-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathworkflow.html
More file actions
204 lines (179 loc) · 8.55 KB
/
Copy pathworkflow.html
File metadata and controls
204 lines (179 loc) · 8.55 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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>स्मृ|憶 — OBLIVION — Workflow</title>
<link rel="stylesheet" href="assets/css/main.css">
</head>
<body>
<script src="assets/js/nav.js" data-depth="."></script>
<div class="content">
<h1>Information Flow Understanding in <span class="sc">Oblivion</span></h1>
<p>
Running example demonstrating the <span class="sc">Oblivion</span>
pipeline across a 34-turn conversation covering seven topics (travel, cooking, work/technology,
health/fitness, reading, astrophotography, mushroom foraging) with repeated questions to
show Ebbinghaus-style memory decay and reinforcement spikes. Each <strong>turn</strong>
is one back-and-forth exchange (one human message + one agent response). Step through
each turn to see module states, buffer contents, and all logged metrics.
</p>
<!-- Step controls -->
<div class="step-controls">
<button id="btn-prev" onclick="stepPrev()">← Previous</button>
<span class="step-label" id="step-label">Loading…</span>
<button id="btn-next" onclick="stepNext()">Next →</button>
<span style="margin-left:auto; font-size:12px; color:var(--gray-5)">
Use arrow keys ← → to navigate
</span>
</div>
<!-- Two-panel layout -->
<div class="workflow-grid">
<div class="workflow-panel" id="chat-panel">
<h4>Conversation</h4>
<p style="color:var(--gray-5);font-size:13px">Loading conversation data…</p>
</div>
<div class="workflow-panel" id="state-panel">
<h4>Module State</h4>
<p style="color:var(--gray-5);font-size:13px">Loading module state…</p>
</div>
</div>
<hr style="border:none;border-top:1px solid var(--gray-2);margin:32px 0">
<!-- Metrics overview -->
<h2>Metrics Overview</h2>
<p>
Aggregated visualizations across all 34 interactions. Data is pre-generated from a live
<span class="sc">Oblivion</span> session with full metric logging enabled.
</p>
<!-- Aggregated metrics table (collapsible, collapsed by default) -->
<div style="margin-bottom:16px">
<div class="chart-collapse-header" onclick="toggleCollapse(this)">
<h3>Aggregated Metrics Summary</h3>
<span class="chart-collapse-chevron">▼</span>
</div>
<div class="chart-collapse-body" id="agg-metrics-body" style="padding:12px 14px">
<p style="font-size:13px;color:var(--gray-6)">Loading aggregated metrics…</p>
</div>
</div>
<div class="chart-section">
<!-- Latency -->
<div style="margin-bottom:12px">
<div class="chart-collapse-header open" onclick="toggleCollapse(this)">
<h3>Latency Breakdown</h3>
<span class="chart-collapse-chevron">▼</span>
</div>
<div class="chart-collapse-body open" style="padding:16px">
<p style="font-size:13px;color:var(--gray-6);margin-bottom:8px">Stacked bar showing per-module processing time. Each segment represents Recognizer, Decayer, Activator, and Response generation latency for that turn.</p>
<canvas id="chart-latency"></canvas>
</div>
</div>
<!-- Tokens (collapsed by default) -->
<div style="margin-bottom:12px">
<div class="chart-collapse-header" onclick="toggleCollapse(this)">
<h3>Token Usage</h3>
<span class="chart-collapse-chevron">▼</span>
</div>
<div class="chart-collapse-body" style="padding:16px">
<p style="font-size:13px;color:var(--gray-6);margin-bottom:8px">Prompt vs completion tokens consumed per interaction, aggregated across all modules.</p>
<canvas id="chart-tokens"></canvas>
</div>
</div>
<!-- Buffer (collapsed by default) -->
<div style="margin-bottom:12px">
<div class="chart-collapse-header" onclick="toggleCollapse(this)">
<h3>Buffer Size Over Time</h3>
<span class="chart-collapse-chevron">▼</span>
</div>
<div class="chart-collapse-body" style="padding:16px">
<p style="font-size:13px;color:var(--gray-6);margin-bottom:8px">Total memories in the working memory buffer over time. Growth indicates new memory extraction; drops indicate purging of low-decay memories.</p>
<canvas id="chart-buffer"></canvas>
</div>
</div>
<!-- Activator (collapsed by default) -->
<div style="margin-bottom:12px">
<div class="chart-collapse-header" onclick="toggleCollapse(this)">
<h3>Activator Trigger Events</h3>
<span class="chart-collapse-chevron">▼</span>
</div>
<div class="chart-collapse-body" style="padding:16px">
<p style="font-size:13px;color:var(--gray-6);margin-bottom:8px">Number of times the Activator was invoked per turn. <code>activator_trigger_count</code> counts actual Activator invocations, while <code>thinking_iterations_used</code> counts total Decayer evaluation rounds (the Decayer may decide the buffer is sufficient without triggering the Activator).</p>
<canvas id="chart-activator"></canvas>
</div>
</div>
<!-- Semantic Decay -->
<div style="margin-bottom:12px">
<div class="chart-collapse-header open" onclick="toggleCollapse(this)">
<h3>Decay Curves — Semantic Memories</h3>
<span class="chart-collapse-chevron">▼</span>
</div>
<div class="chart-collapse-body open" style="padding:16px">
<p style="font-size:13px;color:var(--gray-6);margin-bottom:8px">Reinforced semantic memory decay scores over turns. Decay follows the Ebbinghaus curve R = e<sup>-t/(S·T)</sup>; spikes indicate reinforcement when a memory is used in a response.</p>
<canvas id="chart-decay"></canvas>
</div>
</div>
<!-- Episodic Decay (collapsed by default) -->
<div style="margin-bottom:12px">
<div class="chart-collapse-header" onclick="toggleCollapse(this)">
<h3>Decay Curves — Episodic Memories</h3>
<span class="chart-collapse-chevron">▼</span>
</div>
<div class="chart-collapse-body" style="padding:16px">
<p style="font-size:13px;color:var(--gray-6);margin-bottom:8px">Reinforced episodic memory decay scores over turns. Only episodic entries with unique content (different from semantic) are shown. Each legend shows the memory start…end with word count.</p>
<canvas id="chart-decay-episodic"></canvas>
</div>
</div>
</div>
</div>
<footer class="site-footer">
© 2026 NEC Laboratories Europe GmbH. All rights reserved.
</footer>
<!-- Pre-loaded data (no fetch — works with file:// protocol) -->
<script src="assets/data/workflow_interaction_data.js"></script>
<script src="assets/data/workflow_decay_data.js"></script>
<!-- Flow controller & metrics (v2 — no fetch) -->
<script src="assets/js/flow.js"></script>
<script src="assets/js/metrics.js"></script>
<!-- Chart.js from CDN (loaded after data so workflow page works even if CDN is slow) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
<script>
var chatPanel = document.getElementById("chat-panel");
var statePanel = document.getElementById("state-panel");
var stepLabel = document.getElementById("step-label");
var btnPrev = document.getElementById("btn-prev");
var btnNext = document.getElementById("btn-next");
function updateUI() {
FlowController.renderConversation(chatPanel);
FlowController.renderModuleState(statePanel);
stepLabel.textContent = "Turn " + (FlowController.step() + 1) + " / " + FlowController.total();
btnPrev.disabled = FlowController.step() === 0;
btnNext.disabled = FlowController.step() >= FlowController.total() - 1;
}
function stepNext() { FlowController.next(); updateUI(); }
function stepPrev() { FlowController.prev(); updateUI(); }
document.addEventListener("keydown", function (e) {
if (e.key === "ArrowRight") stepNext();
else if (e.key === "ArrowLeft") stepPrev();
});
function toggleCollapse(header) {
header.classList.toggle("open");
var body = header.nextElementSibling;
if (body) body.classList.toggle("open");
}
/* Initialize */
FlowController.load(function (err) {
if (err) {
chatPanel.innerHTML = '<p style="color:red">Failed to load workflow data. Run <code>python docs/scripts/generate_workflow_data.py</code> from project root first.</p>';
return;
}
updateUI();
});
MetricsCharts.load(function () {
var aggBody = document.getElementById("agg-metrics-body");
if (aggBody) aggBody.innerHTML = MetricsCharts.buildAggregatedTable();
if (typeof Chart !== "undefined") {
MetricsCharts.renderAll();
}
});
</script>
</body>
</html>