DeepSelfModel/index.html at main · RealityBending/DeepSelfModel · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Deep-Self Predictive Cascade Model of Personality</title>
        <link rel="stylesheet" href="app/styles.css" />
        <script src="https://d3js.org/d3.v7.min.js"></script>
    </head>
    <body>
        <main class="page-stack">
            <section id="overview-panel" class="overview-panel" aria-labelledby="overview-title"></section>

            <div id="cascade-container">
                <div class="cascade-layout">
                    <section class="graph-column" aria-label="Core priors cascade simulator">
                        <div id="graph"></div>
                    </section>

                    <aside id="node-details" class="details-panel" aria-live="polite">
                        <div id="details-sliders" class="details-sliders" style="display: none">
                            <div class="slider-row" id="row-mu">
                                <div class="slider-header">
                                    <span class="slider-label" id="label-mu">Location (μ)</span>
                                    <span class="slider-val" id="val-mu">.50</span>
                                </div>
                                <input type="range" id="slider-mu" min="0" max="1" step="0.01" />
                            </div>
                            <div class="slider-row" id="row-pi">
                                <div class="slider-header">
                                    <span class="slider-label">Precision (π)</span>
                                    <span class="slider-val" id="val-pi">44</span>
                                </div>
                                <input type="range" id="slider-pi" min="6" max="400" step="1" />
                            </div>
                        </div>

                        <h1 id="details-title">Select a node</h1>
                        <p id="details-description" class="details-description">
                            Drag an Ultra-Prior distribution left/right and up/down to change the cascade.
                        </p>
                    </aside>
                </div>
            </div>

            <section id="frameworks-panel" class="overview-panel" aria-labelledby="frameworks-title"></section>
        </main>

        <script src="app/data.js"></script>
        <script src="app/frameworks.js"></script>
        <script src="app/app.js"></script>
    </body>
</html>