Repository navigation
Expand file tree
/
Copy pathapp.html
More file actions
164 lines (146 loc) · 10.7 KB
/
Copy pathapp.html
File metadata and controls
164 lines (146 loc) · 10.7 KB
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
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Bodhi Map — Interactive AI & Fine-Tuning Knowledge Graph</title>
<!-- Small screens get the touch-friendly mobile view (override with ?desktop=1) -->
<script>
(function () {
try {
if (!/[?&]desktop=1/.test(location.search) && window.matchMedia && window.matchMedia('(max-width: 820px)').matches) {
location.replace('m.html' + location.hash);
}
} catch (e) {}
})();
</script>
<!-- PWA -->
<link rel="manifest" href="manifest.json" />
<meta name="theme-color" content="#0e1a13" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="apple-mobile-web-app-title" content="Bodhi Map" />
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png" />
<link rel="stylesheet" href="css/style.css" />
<!-- set theme before paint to avoid flash -->
<script>
(function () {
try { var t = localStorage.getItem('bodhi-theme'); if (t) document.documentElement.setAttribute('data-theme', t); } catch (e) {}
})();
</script>
</head>
<body>
<!-- Top bar -->
<header class="topbar">
<a class="brand" href="index.html" data-tip="About Bodhi Map" aria-label="About Bodhi Map — home"><span class="om" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M12 6.2C10.4 4.5 6.7 4.6 5.1 7.6 3.3 10.9 5.7 15.9 12 22c6.3-6.1 8.7-11.1 6.9-14.4C17.3 4.6 13.6 4.5 12 6.2Z" fill="currentColor"/><path d="M12 6.2V2.6" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/><g stroke="#0a3f24" stroke-opacity=".5" stroke-width=".9" stroke-linecap="round"><path d="M12 7.3V20"/><path d="M12 10.1 8.9 8.3"/><path d="M12 10.1 15.1 8.3"/><path d="M12 12.9 8.6 11.3"/><path d="M12 12.9 15.4 11.3"/><path d="M12 15.6 9.2 14.5"/><path d="M12 15.6 14.8 14.5"/></g></svg></span><span class="brand-text"><span class="brand-name">Bodhi Map</span><span class="sub">awakening to AI</span></span></a>
<div class="search-wrap">
<input id="search" type="text" placeholder="Search concepts… (f)" autocomplete="off" aria-label="Search concepts" />
<div id="searchResults" class="search-results" role="listbox"></div>
</div>
<div class="level-bar" role="group" aria-label="Filter concepts by level">
<span class="level-caption">Levels</span>
<button class="level-chip active" data-level="1" data-tip="Level 1 · Foundations" aria-label="Toggle Level 1 — Foundations"><span class="num">1</span><span class="lbl">Foundations</span></button>
<button class="level-chip active" data-level="2" data-tip="Level 2 · Core Mechanics" aria-label="Toggle Level 2 — Mechanics"><span class="num">2</span><span class="lbl">Mechanics</span></button>
<button class="level-chip active" data-level="3" data-tip="Level 3 · Adaptation Basics" aria-label="Toggle Level 3 — Adaptation"><span class="num">3</span><span class="lbl">Adaptation</span></button>
<button class="level-chip active" data-level="4" data-tip="Level 4 · Fine-Tuning Techniques" aria-label="Toggle Level 4 — Fine-Tuning"><span class="num">4</span><span class="lbl">Fine-Tuning</span></button>
<button class="level-chip active" data-level="5" data-tip="Level 5 · Advanced / Alignment" aria-label="Toggle Level 5 — Advanced"><span class="num">5</span><span class="lbl">Advanced</span></button>
<button class="new-chip" id="newChip" data-tip="Spotlight concepts added this release, with their connections" aria-label="Spotlight new concepts and their links"><span class="spark" aria-hidden="true">✦</span><span class="lbl">New</span><span class="new-count">0</span></button>
</div>
<div class="toolbar">
<div class="tool-group">
<button class="btn primary" id="startDecision" data-tip="Decision wizard — find the right technique" aria-label="Decision wizard">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polygon points="16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76"/></svg>
<span class="label">Which technique?</span>
</button>
<button class="btn" id="startPath" data-tip="Guided Path — walk the concepts in order" aria-label="Guided Path">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="19" r="3"/><path d="M9 19h8.5a3.5 3.5 0 0 0 0-7h-11a3.5 3.5 0 0 1 0-7H15"/><circle cx="18" cy="5" r="3"/></svg>
<span class="label">Guided Path</span>
</button>
<button class="btn" id="mapBtn" data-tip="Build your own learning map — pick your topics" aria-label="Build your learning map">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polygon points="12 2 14.09 8.26 20.9 8.26 15.41 12.14 17.5 18.4 12 14.52 6.5 18.4 8.59 12.14 3.1 8.26 9.91 8.26"/></svg>
<span class="label">My Map</span>
</button>
</div>
<span class="tool-divider" aria-hidden="true"></span>
<div class="tool-group">
<button class="btn ghost icon-only" id="fitBtn" data-tip="Fit graph to screen" aria-label="Fit graph to screen">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 3H5a2 2 0 0 0-2 2v3M21 8V5a2 2 0 0 0-2-2h-3M3 16v3a2 2 0 0 0 2 2h3M16 21h3a2 2 0 0 0 2-2v-3"/></svg>
<span class="label">Fit</span>
</button>
<button class="btn ghost icon-only" id="relayoutBtn" data-tip="Recompute layout" aria-label="Re-layout graph">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12a9 9 0 0 1 15-6.7L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-15 6.7L3 16"/><path d="M3 21v-5h5"/></svg>
<span class="label">Re-layout</span>
</button>
<button class="btn ghost icon-only" id="exportBtn" data-tip="Export the knowledge base as one LLM-ready file (OKF)" aria-label="Export knowledge base for agents">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
<span class="label">For agents</span>
</button>
<button class="btn ghost icon-only" id="compareBtn" data-tip="Compare techniques side by side" aria-label="Compare techniques">
<svg class="ic" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/></svg>
<span class="label">Compare</span>
</button>
</div>
<span class="tool-divider" aria-hidden="true"></span>
<button class="icon-btn" id="helpBtn" data-tip="Help & welcome" aria-label="Help and welcome">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
</button>
<button class="icon-btn" id="themeToggle" data-tip="Toggle light / dark theme" aria-label="Toggle theme"></button>
</div>
</header>
<!-- Graph -->
<div id="cy"></div>
<!-- Minimap (orientation) -->
<div id="minimap" class="minimap" data-tip="Minimap — click/drag to pan · m to hide" aria-hidden="true">
<canvas id="minimapCanvas"></canvas>
</div>
<!-- Legend dock (collapsible) -->
<button class="icon-btn dock-toggle" id="dockToggle" data-tip="Show legend & filters" aria-label="Show legend">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg>
</button>
<aside class="dock" id="dock">
<div class="dock-head">
<span class="dock-title">Legend & filters</span>
<button class="dock-collapse" id="dockCollapse" data-tip="Collapse" aria-label="Collapse legend">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 18 9 12 15 6"/></svg>
</button>
</div>
<div class="legend-section">
<h3>Explore by theme <span class="h3-hint">tap ● to hide · name to zoom</span></h3>
<div id="legend"></div>
</div>
<div class="legend-section">
<h3>Relationships</h3>
<div id="relLegend"></div>
</div>
</aside>
<!-- Detail panel -->
<aside id="panel" class="panel" aria-live="polite"></aside>
<!-- Guided path -->
<div id="guidedBox" class="float-box"></div>
<!-- Decision wizard -->
<div id="decisionBox" class="float-box"></div>
<!-- Welcome / onboarding modal -->
<div id="welcomeModal" class="modal" role="dialog" aria-modal="true" aria-label="Welcome to LLM Bodhi">
<div class="modal-card welcome-card" id="welcomeCard"></div>
</div>
<!-- Compare modal -->
<div id="compareModal" class="modal" role="dialog" aria-modal="true" aria-label="Compare techniques">
<div class="modal-card" id="compareCard"></div>
</div>
<!-- My Map (build your own learning map) -->
<div id="mapModal" class="modal" role="dialog" aria-modal="true" aria-label="Build your learning map">
<div class="modal-card" id="mapCard"></div>
</div>
<!-- Toast -->
<div id="toast" class="toast"></div>
<div class="hint">Click a node · drag to pan · scroll to zoom · <kbd>f</kbd> search <kbd>↑</kbd><kbd>↓</kbd><kbd>↵</kbd> · <kbd>t</kbd> theme · <kbd>m</kbd> map · <kbd>?</kbd> help · <kbd>Esc</kbd> close · shareable</div>
<script src="js/cytoscape.min.js"></script>
<!-- fcose layout extension (offline) — load order: layout-base → cose-base → fcose -->
<script src="js/layout-base.js"></script>
<script src="js/cose-base.js"></script>
<script src="js/cytoscape-fcose.js"></script>
<script src="js/data.js"></script>
<script src="js/graph.js"></script>
<script src="js/sw-register.js"></script>
</body>
</html>