neural-context-map/index.html at main · NathN07/neural-context-map · 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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Neural Context Memory Map</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <main class="app-shell">
      <header class="topbar">
        <section class="brand">
          <p class="eyebrow">Portable AI Memory System</p>
          <h1>Neural Context</h1>
        </section>

        <section class="toolbar" aria-label="Memory tools">
          <label class="icon-button file-button" title="Import chat or memory JSON">
            <span aria-hidden="true">+</span>
            <input id="import-file" type="file" accept=".txt,.json" />
          </label>
          <button class="icon-button" id="export-json" title="Export memory JSON" type="button">↓</button>
          <button class="icon-button" id="reset-map" title="Reset demo memory" type="button">↺</button>
        </section>
      </header>

      <aside class="left-panel" aria-label="Map controls">
        <label class="field">
          <span>Search</span>
          <input id="search" type="search" placeholder="Find a memory..." autocomplete="off" />
        </label>

        <label class="field">
          <span>Minimum importance</span>
          <input id="importance-filter" type="range" min="0" max="100" value="0" />
          <strong id="importance-value">0</strong>
        </label>

        <div class="segmented" role="group" aria-label="View mode">
          <button class="is-active" data-mode="network" type="button">Network</button>
          <button data-mode="clusters" type="button">Clusters</button>
          <button data-mode="focus" type="button">Focus</button>
        </div>

        <button class="primary-action" id="add-node" type="button">Add Memory</button>

        <section class="source-importer">
          <h2>Import Context</h2>
          <label class="field">
            <span>Shared conversation link</span>
            <input id="source-url" type="url" placeholder="https://chatgpt.com/share/..." />
          </label>
          <label class="field">
            <span>Copied conversation text</span>
            <textarea
              id="source-text"
              rows="5"
              placeholder="Paste copied chat/context here when a provider blocks link reading."
            ></textarea>
          </label>
          <button class="primary-action" id="import-source" type="button">Import Source</button>
          <p id="source-status" class="source-status" role="status"></p>
        </section>

        <section class="insights">
          <h2>Context Pulse</h2>
          <dl>
            <div>
              <dt>Total</dt>
              <dd id="metric-total">0</dd>
            </div>
            <div>
              <dt>Avg. importance</dt>
              <dd id="metric-average">0</dd>
            </div>
            <div>
              <dt>Strongest cluster</dt>
              <dd id="metric-cluster">-</dd>
            </div>
          </dl>
        </section>
      </aside>

      <section class="map-stage" aria-label="Interactive neural memory map">
        <div class="grid-overlay"></div>
        <svg id="connection-layer" aria-hidden="true"></svg>
        <div id="node-layer"></div>
        <div class="map-caption">Memory Graph / Vector Context / AI Embeddings</div>
      </section>

      <aside class="detail-panel" aria-label="Selected memory details">
        <form id="memory-form">
          <div class="panel-heading">
            <div>
              <p class="eyebrow">Selected Node</p>
              <h2 id="active-title">Import Context</h2>
            </div>
            <button class="danger-button" id="delete-node" type="button" title="Delete selected memory">×</button>
          </div>

          <label class="field">
            <span>Title</span>
            <input id="node-title" type="text" />
          </label>

          <label class="field">
            <span>Summary</span>
            <textarea id="node-summary" rows="4"></textarea>
          </label>

          <label class="field">
            <span>Transferable Context</span>
            <textarea id="node-context" rows="5"></textarea>
          </label>

          <label class="field">
            <span>Related Memories</span>
            <input id="node-related" type="text" placeholder="Import Context, Export Memory" />
          </label>

          <label class="field">
            <span>Importance</span>
            <input id="node-importance" type="range" min="0" max="100" />
            <strong id="node-importance-value">0</strong>
          </label>

          <div class="actions">
            <button class="primary-action" id="save-node" type="submit">Save</button>
            <button class="secondary-action" id="copy-context" type="button">Copy Context</button>
          </div>
        </form>

        <section class="import-preview" id="import-preview" hidden>
          <h2>Imported Chat Preview</h2>
          <pre id="imported-text"></pre>
        </section>
      </aside>
    </main>

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