Hugging Face's logo

Spaces:
onenoly11
/
cyber_samurai
Configuration error

App Files Community
onenoly11 commited on
Commit
ac8a0d6
·
verified ·
1 Parent(s): 590202b

Delete app.py

Browse files
Files changed (1) hide show
  1. app.py +0 -705
app.py DELETED
@@ -1,705 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Cyber Samurai Dojo v2.0 - Design Specification</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
- <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
10
- <style>
11
- /* Chosen Palette: Warm Tech Neutrals */
12
- :root {
13
- --bg-main: #f5f5f4; /* stone-100 */
14
- --card-bg: #ffffff;
15
- --text-primary: #1c1917; /* stone-900 */
16
- --text-secondary: #57534e; /* stone-600 */
17
- --accent-primary: #0891b2; /* cyan-600 */
18
- --accent-secondary: #e11d48; /* rose-600 */
19
- }
20
-
21
- body {
22
- font-family: 'Inter', sans-serif;
23
- background-color: var(--bg-main);
24
- color: var(--text-primary);
25
- }
26
-
27
- h1, h2, h3, h4 {
28
- font-family: 'Space Grotesk', sans-serif;
29
- }
30
-
31
- /* Chart Container Styling (Mandatory) */
32
- .chart-container {
33
- position: relative;
34
- width: 100%;
35
- max-width: 600px; /* max-w-xl equivalent */
36
- margin-left: auto;
37
- margin-right: auto;
38
- height: 300px;
39
- max-height: 400px;
40
- }
41
-
42
- @media (min-width: 768px) {
43
- .chart-container {
44
- height: 350px;
45
- }
46
- }
47
-
48
- /* Custom Utilities */
49
- .glass-card {
50
- background: rgba(255, 255, 255, 0.9);
51
- border: 1px solid rgba(231, 229, 228, 1);
52
- box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
53
- transition: all 0.3s ease;
54
- }
55
-
56
- .glass-card:hover {
57
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
58
- }
59
-
60
- .active-tab {
61
- border-bottom: 2px solid var(--accent-primary);
62
- color: var(--accent-primary);
63
- font-weight: 600;
64
- }
65
-
66
- .step-node {
67
- transition: all 0.5s ease;
68
- }
69
-
70
- .flow-line {
71
- transition: all 0.5s ease;
72
- }
73
-
74
- .glowing-border {
75
- border-color: var(--accent-primary);
76
- box-shadow: 0 0 15px rgba(8, 145, 178, 0.2);
77
- }
78
- </style>
79
- <!-- Chosen Palette: Warm Tech Neutrals (Stone/Cyan/Rose) -->
80
- <!-- Application Structure Plan: A dashboard-style layout dividing the spec into logical consumption areas. 1. Executive Summary (Goal). 2. Architecture Evolution (Comparison Viz). 3. Feature Deep Dive (Interactive Tabs for Voice/API). 4. Implementation Logic (Process Flow Simulation). This structure transforms a linear markdown doc into an explorable system blueprint. -->
81
- <!-- Visualization & Content Choices:
82
- 1. Bar Chart: To visually compare v1 vs v2 capabilities (Static vs Dynamic). Goal: Compare.
83
- 2. Doughnut Chart: To show the distribution of technical changes (UI vs Logic vs API). Goal: Inform.
84
- 3. Interactive Flow Diagram (HTML/CSS/JS): To simulate the new 'cyber_haiku_v2' logic flow described in snippets. Goal: Change/Process.
85
- 4. Tabbed Interface: To organize the dense text of Section 2 (Feature Breakdown) without clutter. Goal: Organize.
86
- - Justification: Charts allow quick impact assessment; simulation helps developers visualize the async logic.
87
- -->
88
- <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->
89
- </head>
90
- <body class="antialiased min-h-screen pb-12">
91
-
92
- <!-- Header -->
93
- <header class="bg-white border-b border-stone-200 sticky top-0 z-50">
94
- <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
95
- <div class="flex items-center space-x-3">
96
- <span class="text-2xl">⚔️</span>
97
- <h1 class="text-xl font-bold tracking-tight text-stone-900">Cyber Samurai Dojo <span class="text-cyan-600">v2.0</span> Design Spec</h1>
98
- </div>
99
- <div class="text-sm font-medium text-stone-500 bg-stone-100 px-3 py-1 rounded-full">
100
- Status: Design Approved
101
- </div>
102
- </div>
103
- </header>
104
-
105
- <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
106
-
107
- <!-- Section 1: Executive Summary -->
108
- <section class="glass-card rounded-xl p-6 md:p-8">
109
- <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
110
- <div class="space-y-2">
111
- <h2 class="text-2xl font-bold text-stone-800">The Dynamic Oracle Evolution</h2>
112
- <p class="text-stone-600 max-w-3xl leading-relaxed">
113
- This specification outlines the transformation of the v1.0 Haiku Oracle into a comprehensive, dynamic threat intelligence platform.
114
- By integrating <span class="font-semibold text-cyan-700">Voice Input</span> and <span class="font-semibold text-cyan-700">Real-Time Grounding</span> (via NVD/Gemini API),
115
- v2.0 moves beyond static responses to provide actionable, citation-backed security context.
116
- </p>
117
- </div>
118
- <div class="flex-shrink-0 bg-cyan-50 border border-cyan-100 p-4 rounded-lg text-center min-w-[150px]">
119
- <span class="block text-sm text-cyan-800 font-medium uppercase tracking-wide">Target State</span>
120
- <span class="block text-3xl font-bold text-cyan-600 mt-1">Dynamic</span>
121
- <span class="block text-xs text-cyan-600 mt-1">Real-Time Context</span>
122
- </div>
123
- </div>
124
- </section>
125
-
126
- <!-- Section 2: Architectural Analysis (Visual Comparison) -->
127
- <section>
128
- <div class="mb-6">
129
- <h3 class="text-xl font-bold text-stone-800">1. Core Architectural Changes</h3>
130
- <p class="text-sm text-stone-500 mt-1">
131
- Visualizing the shift in system capabilities and complexity between v1.0 and v2.0.
132
- The interactive chart below highlights the massive leap in Intelligence and Threat Feed dynamism.
133
- </p>
134
- </div>
135
-
136
- <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
137
- <!-- Comparison Chart -->
138
- <div class="glass-card rounded-xl p-6 lg:col-span-2 flex flex-col">
139
- <div class="flex justify-between items-center mb-4">
140
- <h4 class="font-semibold text-stone-700">Capability Impact Analysis</h4>
141
- <div class="flex space-x-2">
142
- <button onclick="updateArchChart('capabilities')" class="px-3 py-1 text-xs bg-stone-100 hover:bg-stone-200 rounded transition font-medium">Capabilities</button>
143
- <button onclick="updateArchChart('complexity')" class="px-3 py-1 text-xs bg-stone-100 hover:bg-stone-200 rounded transition font-medium">Complexity</button>
144
- </div>
145
- </div>
146
- <div class="flex-grow flex items-center justify-center bg-white rounded-lg border border-stone-100 p-2">
147
- <!-- Chart Container -->
148
- <div class="chart-container">
149
- <canvas id="archChart"></canvas>
150
- </div>
151
- </div>
152
- <div class="mt-4 text-xs text-stone-500 text-center">
153
- Comparing Input Modality, Intelligence Depth, and Threat Feed Freshness.
154
- </div>
155
- </div>
156
-
157
- <!-- Textual Summary of Changes -->
158
- <div class="glass-card rounded-xl p-6 space-y-4">
159
- <h4 class="font-semibold text-stone-700 border-b pb-2">Change Matrix</h4>
160
-
161
- <div class="space-y-4">
162
- <div class="group cursor-pointer hover:bg-stone-50 p-2 rounded transition" onclick="highlightChart('Input Method')">
163
- <div class="flex justify-between items-center">
164
- <span class="text-sm font-medium text-stone-800">Input Method</span>
165
- <span class="text-xs bg-stone-200 text-stone-600 px-2 py-0.5 rounded">High Impact</span>
166
- </div>
167
- <div class="mt-1 text-xs text-stone-500">
168
- <span class="line-through text-stone-400">Textbox Only</span> &rarr; <span class="text-cyan-600 font-semibold">Voice/Audio Recorder</span>
169
- </div>
170
- </div>
171
-
172
- <div class="group cursor-pointer hover:bg-stone-50 p-2 rounded transition" onclick="highlightChart('Intelligence')">
173
- <div class="flex justify-between items-center">
174
- <span class="text-sm font-medium text-stone-800">Intelligence</span>
175
- <span class="text-xs bg-rose-100 text-rose-600 px-2 py-0.5 rounded">Criticial</span>
176
- </div>
177
- <div class="mt-1 text-xs text-stone-500">
178
- <span class="line-through text-stone-400">Local Rules</span> &rarr; <span class="text-cyan-600 font-semibold">Gemini API Calls</span>
179
- </div>
180
- </div>
181
-
182
- <div class="group cursor-pointer hover:bg-stone-50 p-2 rounded transition" onclick="highlightChart('Threat Feed')">
183
- <div class="flex justify-between items-center">
184
- <span class="text-sm font-medium text-stone-800">Threat Feed</span>
185
- <span class="text-xs bg-cyan-100 text-cyan-600 px-2 py-0.5 rounded">New Feature</span>
186
- </div>
187
- <div class="mt-1 text-xs text-stone-500">
188
- <span class="line-through text-stone-400">Conceptual</span> &rarr; <span class="text-cyan-600 font-semibold">Real-Time CVE Context</span>
189
- </div>
190
- </div>
191
- </div>
192
- </div>
193
- </div>
194
- </section>
195
-
196
- <!-- Section 3: Feature Breakdown (Interactive Tabs) -->
197
- <section>
198
- <div class="mb-6">
199
- <h3 class="text-xl font-bold text-stone-800">2. Feature Breakdown & Implementation</h3>
200
- <p class="text-sm text-stone-500 mt-1">
201
- Detailed analysis of the two major features driving the v2.0 upgrade.
202
- Explore the specific file actions, constraints, and API configurations required.
203
- </p>
204
- </div>
205
-
206
- <div class="glass-card rounded-xl overflow-hidden">
207
- <!-- Tabs -->
208
- <div class="flex border-b border-stone-200 bg-stone-50">
209
- <button onclick="switchTab('voice')" id="tab-voice" class="flex-1 py-4 text-sm font-medium text-center hover:bg-stone-100 transition active-tab text-stone-600">
210
- A. Voice Input Integration
211
- </button>
212
- <button onclick="switchTab('grounding')" id="tab-grounding" class="flex-1 py-4 text-sm font-medium text-center hover:bg-stone-100 transition text-stone-500">
213
- B. Real-Time Grounding (Gemini API)
214
- </button>
215
- </div>
216
-
217
- <!-- Tab Content: Voice -->
218
- <div id="content-voice" class="p-6 md:p-8 animate-fade-in">
219
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
220
- <div class="space-y-4">
221
- <h4 class="text-lg font-bold text-stone-800">Hands-Free Analysis</h4>
222
- <p class="text-stone-600 text-sm leading-relaxed">
223
- The v2.0 update introduces an audio recorder to the Gradio interface, allowing for spontaneous threat reporting via voice.
224
- </p>
225
- <ul class="space-y-3 mt-4">
226
- <li class="flex items-start">
227
- <span class="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-cyan-100 text-cyan-600 text-xs font-bold mt-0.5">1</span>
228
- <div class="ml-3">
229
- <p class="text-sm font-medium text-stone-900">File Action</p>
230
- <p class="text-xs text-stone-500">Update <code class="bg-stone-100 px-1 py-0.5 rounded">app.py</code> to include <code class="bg-stone-100 px-1 py-0.5 rounded">gr.Audio</code>.</p>
231
- </div>
232
- </li>
233
- <li class="flex items-start">
234
- <span class="flex-shrink-0 w-6 h-6 flex items-center justify-center rounded-full bg-rose-100 text-rose-600 text-xs font-bold mt-0.5">!</span>
235
- <div class="ml-3">
236
- <p class="text-sm font-medium text-stone-900">V2 Constraint</p>
237
- <p class="text-xs text-stone-500">STT is assumed to be handled internally by Gradio or client-side to maintain focus on threat logic.</p>
238
- </div>
239
- </li>
240
- </ul>
241
- </div>
242
- <div class="bg-stone-900 rounded-lg p-4 font-mono text-xs text-stone-300 shadow-inner">
243
- <div class="flex items-center gap-2 border-b border-stone-700 pb-2 mb-2">
244
- <div class="w-2 h-2 rounded-full bg-red-500"></div>
245
- <div class="w-2 h-2 rounded-full bg-yellow-500"></div>
246
- <div class="w-2 h-2 rounded-full bg-green-500"></div>
247
- <span class="text-stone-500 ml-2">app.py (Snippet)</span>
248
- </div>
249
- <p class="text-purple-400">def <span class="text-blue-400">cyber_haiku_v2</span>(text_in, audio_in):</p>
250
- <p class="pl-4 text-stone-500"># Handle audio input if present</p>
251
- <p class="pl-4">if audio_in:</p>
252
- <p class="pl-8 text-green-400"># STT Logic Placeholder</p>
253
- <p class="pl-8">processed_text = <span class="text-yellow-300">transcribe</span>(audio_in)</p>
254
- <p class="pl-4">else:</p>
255
- <p class="pl-8">processed_text = text_in</p>
256
- </div>
257
- </div>
258
- </div>
259
-
260
- <!-- Tab Content: Grounding -->
261
- <div id="content-grounding" class="p-6 md:p-8 hidden">
262
- <div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-start">
263
- <div class="space-y-4">
264
- <h4 class="text-lg font-bold text-stone-800">Advanced Grounding</h4>
265
- <p class="text-stone-600 text-sm leading-relaxed">
266
- The core intelligence upgrade. We use the Gemini API to fetch real-world context (CVEs) related to the classified threat.
267
- </p>
268
- <div class="bg-stone-50 rounded border border-stone-200 p-4 space-y-2">
269
- <h5 class="text-xs font-bold text-stone-700 uppercase">API Configuration</h5>
270
- <div class="grid grid-cols-3 gap-2 text-xs">
271
- <div class="font-medium text-stone-500">Endpoint</div>
272
- <div class="col-span-2 text-cyan-700 font-mono">gemini-2.5-flash-preview...</div>
273
-
274
- <div class="font-medium text-stone-500">Tooling</div>
275
- <div class="col-span-2 text-stone-800">Google Search Grounding</div>
276
-
277
- <div class="font-medium text-stone-500">Goal</div>
278
- <div class="col-span-2 text-stone-800">Fetch 2 most recent high-severity CVEs</div>
279
- </div>
280
- </div>
281
- </div>
282
-
283
- <!-- Visualizing the API Query -->
284
- <div class="bg-white rounded-lg border-l-4 border-cyan-500 shadow p-4">
285
- <p class="text-xs text-stone-400 font-bold mb-2 uppercase tracking-wider">System Instruction Strategy</p>
286
- <p class="text-sm text-stone-800 italic">
287
- "Act as a concise cybersecurity analyst. Provide a single-paragraph summary of the latest real-world threat context for the given category, focusing on recent CVEs or NVD data."
288
- </p>
289
- <div class="mt-4 pt-3 border-t border-stone-100">
290
- <p class="text-xs text-stone-400 font-bold mb-1 uppercase tracking-wider">User Query Template</p>
291
- <p class="text-sm font-mono text-cyan-700">
292
- "Find the 2 most recent, high-severity CVEs related to <span class="bg-yellow-100 text-yellow-800 px-1 rounded">[DETECTED_CATEGORY]</span>..."
293
- </p>
294
- </div>
295
- </div>
296
- </div>
297
- </div>
298
- </div>
299
- </section>
300
-
301
- <!-- Section 4: Logic Flow Simulation (HTML Diagram) -->
302
- <section>
303
- <div class="mb-6 flex flex-col md:flex-row justify-between items-start md:items-end gap-4">
304
- <div>
305
- <h3 class="text-xl font-bold text-stone-800">3. Application Logic Simulation</h3>
306
- <p class="text-sm text-stone-500 mt-1">
307
- Conceptual data flow for the new <code class="text-xs bg-stone-100 px-1 rounded">cyber_haiku_v2</code> asynchronous function.
308
- Click 'Simulate Flow' to trace the path from user input to grounded output.
309
- </p>
310
- </div>
311
- <button onclick="runSimulation()" class="bg-stone-900 hover:bg-stone-800 text-white px-4 py-2 rounded text-sm font-medium shadow transition flex items-center gap-2">
312
- <span id="sim-btn-text">Simulate Flow</span>
313
- <span class="text-cyan-400">▶</span>
314
- </button>
315
- </div>
316
-
317
- <div class="glass-card rounded-xl p-6 md:p-8 overflow-x-auto">
318
- <div class="min-w-[700px] flex justify-between items-center relative py-10">
319
- <!-- Connecting Line -->
320
- <div class="absolute top-1/2 left-0 w-full h-1 bg-stone-200 -z-10"></div>
321
- <div id="progress-bar" class="absolute top-1/2 left-0 w-0 h-1 bg-cyan-500 -z-10 transition-all duration-[3000ms] ease-linear"></div>
322
-
323
- <!-- Step 1: Input -->
324
- <div id="step-1" class="step-node flex flex-col items-center gap-3 w-32 relative z-10">
325
- <div class="w-12 h-12 bg-white border-2 border-stone-300 rounded-full flex items-center justify-center text-xl shadow-sm">🎤</div>
326
- <div class="text-center">
327
- <p class="font-bold text-sm text-stone-800">Input</p>
328
- <p class="text-xs text-stone-500">Audio/Text</p>
329
- </div>
330
- </div>
331
-
332
- <!-- Step 2: V1 Logic -->
333
- <div id="step-2" class="step-node flex flex-col items-center gap-3 w-32 relative z-10 opacity-50">
334
- <div class="w-12 h-12 bg-white border-2 border-stone-300 rounded-full flex items-center justify-center text-xl shadow-sm">⚙️</div>
335
- <div class="text-center">
336
- <p class="font-bold text-sm text-stone-800">Classify</p>
337
- <p class="text-xs text-stone-500">V1 Logic</p>
338
- </div>
339
- </div>
340
-
341
- <!-- Step 3: API Call -->
342
- <div id="step-3" class="step-node flex flex-col items-center gap-3 w-32 relative z-10 opacity-50">
343
- <div class="w-12 h-12 bg-white border-2 border-stone-300 rounded-full flex items-center justify-center text-xl shadow-sm">☁️</div>
344
- <div class="text-center">
345
- <p class="font-bold text-sm text-stone-800">Grounding</p>
346
- <p class="text-xs text-stone-500">Gemini API</p>
347
- </div>
348
- </div>
349
-
350
- <!-- Step 4: Formatting -->
351
- <div id="step-4" class="step-node flex flex-col items-center gap-3 w-32 relative z-10 opacity-50">
352
- <div class="w-12 h-12 bg-white border-2 border-stone-300 rounded-full flex items-center justify-center text-xl shadow-sm">📝</div>
353
- <div class="text-center">
354
- <p class="font-bold text-sm text-stone-800">Format</p>
355
- <p class="text-xs text-stone-500">Append CVEs</p>
356
- </div>
357
- </div>
358
-
359
- <!-- Step 5: Output -->
360
- <div id="step-5" class="step-node flex flex-col items-center gap-3 w-32 relative z-10 opacity-50">
361
- <div class="w-12 h-12 bg-white border-2 border-stone-300 rounded-full flex items-center justify-center text-xl shadow-sm">🚀</div>
362
- <div class="text-center">
363
- <p class="font-bold text-sm text-stone-800">Output</p>
364
- <p class="text-xs text-stone-500">Haiku + Context</p>
365
- </div>
366
- </div>
367
- </div>
368
-
369
- <div id="sim-log" class="mt-6 bg-stone-50 border border-stone-200 rounded p-3 font-mono text-xs text-stone-600 h-20 overflow-y-auto hidden">
370
- <!-- Simulation logs appear here -->
371
- </div>
372
- </div>
373
- </section>
374
-
375
- <!-- Section 5: Implementation Stats -->
376
- <section class="grid grid-cols-1 md:grid-cols-2 gap-6">
377
- <div class="glass-card rounded-xl p-6">
378
- <h3 class="text-lg font-bold text-stone-800 mb-4">Implementation Effort Distribution</h3>
379
- <div class="flex items-center justify-center">
380
- <div class="chart-container" style="max-width: 300px; max-height: 250px;">
381
- <canvas id="effortChart"></canvas>
382
- </div>
383
- </div>
384
- <p class="text-xs text-center text-stone-500 mt-2">Estimated effort based on dependency impacts defined in spec.</p>
385
- </div>
386
-
387
- <div class="glass-card rounded-xl p-6 flex flex-col justify-center bg-stone-900 text-stone-200">
388
- <h3 class="text-lg font-bold text-white mb-2">Ready to Code?</h3>
389
- <p class="text-sm text-stone-400 mb-6">
390
- The design specification is complete. The next step is to initiate the v2 code implementation starting with the asynchronous <code>app.py</code> logic.
391
- </p>
392
- <div class="bg-stone-800 p-4 rounded border-l-4 border-cyan-500">
393
- <p class="text-xs font-bold text-cyan-400 uppercase mb-1">Status</p>
394
- <p class="font-medium text-white">Pending Approval for Implementation</p>
395
- </div>
396
- </div>
397
- </section>
398
-
399
- </main>
400
-
401
- <footer class="bg-white border-t border-stone-200 mt-12 py-8">
402
- <div class="max-w-7xl mx-auto px-4 text-center">
403
- <p class="text-stone-400 text-sm">Cyber Samurai Dojo v2.0 Design Specification • Interactive SPA</p>
404
- </div>
405
- </footer>
406
-
407
- <script>
408
- // State Management
409
- const appState = {
410
- currentTab: 'voice',
411
- simulating: false,
412
- chartMode: 'capabilities'
413
- };
414
-
415
- // --- CHART CONFIGURATION ---
416
- Chart.defaults.font.family = "'Inter', sans-serif";
417
- Chart.defaults.color = '#57534e';
418
-
419
- // 1. Architecture Comparison Chart
420
- const archCtx = document.getElementById('archChart').getContext('2d');
421
- const archChart = new Chart(archCtx, {
422
- type: 'bar',
423
- data: {
424
- labels: ['Input Modality', 'Intelligence Depth', 'Data Freshness'],
425
- datasets: [
426
- {
427
- label: 'v1.0 (Current)',
428
- data: [30, 40, 20],
429
- backgroundColor: '#e7e5e4', // stone-200
430
- borderRadius: 4,
431
- barPercentage: 0.6
432
- },
433
- {
434
- label: 'v2.0 (Target)',
435
- data: [90, 95, 100],
436
- backgroundColor: '#0891b2', // cyan-600
437
- borderRadius: 4,
438
- barPercentage: 0.6
439
- }
440
- ]
441
- },
442
- options: {
443
- responsive: true,
444
- maintainAspectRatio: false,
445
- plugins: {
446
- legend: { position: 'top' },
447
- tooltip: {
448
- callbacks: {
449
- label: function(context) {
450
- let label = context.dataset.label || '';
451
- if (label) {
452
- label += ': ';
453
- }
454
- if (context.parsed.y > 80) return label + "High/Dynamic";
455
- if (context.parsed.y < 40) return label + "Basic/Static";
456
- return label + "Moderate";
457
- }
458
- }
459
- }
460
- },
461
- scales: {
462
- y: {
463
- beginAtZero: true,
464
- max: 100,
465
- ticks: { display: false },
466
- grid: { display: false }
467
- },
468
- x: {
469
- grid: { display: false }
470
- }
471
- }
472
- }
473
- });
474
-
475
- // Function to update Arch Chart data visualization
476
- function updateArchChart(mode) {
477
- appState.chartMode = mode;
478
- if (mode === 'complexity') {
479
- archChart.data.datasets[0].data = [20, 30, 10]; // v1 complexity (low)
480
- archChart.data.datasets[1].data = [60, 85, 80]; // v2 complexity (higher)
481
- archChart.data.datasets[0].label = 'v1.0 Complexity';
482
- archChart.data.datasets[1].label = 'v2.0 Complexity';
483
- archChart.data.datasets[1].backgroundColor = '#e11d48'; // rose-600
484
- } else {
485
- archChart.data.datasets[0].data = [30, 40, 20]; // v1 capability
486
- archChart.data.datasets[1].data = [90, 95, 100]; // v2 capability
487
- archChart.data.datasets[0].label = 'v1.0 Capability';
488
- archChart.data.datasets[1].label = 'v2.0 Capability';
489
- archChart.data.datasets[1].backgroundColor = '#0891b2'; // cyan-600
490
- }
491
- archChart.update();
492
- }
493
-
494
- function highlightChart(category) {
495
- // Simple visual feedback when clicking the text matrix
496
- // In a real app this might highlight the specific bar
497
- const messageBox = document.createElement('div');
498
- messageBox.className = 'fixed inset-0 bg-gray-600 bg-opacity-50 flex items-center justify-center z-50';
499
- messageBox.innerHTML = `
500
- <div class="bg-white p-6 rounded-lg shadow-xl max-w-sm text-center">
501
- <p class="text-lg font-bold text-cyan-600 mb-4">Focusing Analysis</p>
502
- <p class="text-stone-700">The application would now filter or highlight data related to:</p>
503
- <p class="text-xl font-mono mt-2">${category}</p>
504
- <button onclick="this.parentNode.parentNode.remove()" class="mt-6 bg-stone-900 hover:bg-stone-800 text-white px-4 py-2 rounded text-sm font-medium">Close</button>
505
- </div>
506
- `;
507
- document.body.appendChild(messageBox);
508
- }
509
-
510
- // 2. Effort Distribution Chart (Doughnut)
511
- const effortCtx = document.getElementById('effortChart').getContext('2d');
512
- const effortChart = new Chart(effortCtx, {
513
- type: 'doughnut',
514
- data: {
515
- labels: ['App Logic (Async)', 'UI Components', 'Ext. API Integration'],
516
- datasets: [{
517
- data: [45, 20, 35],
518
- backgroundColor: [
519
- '#0891b2', // cyan
520
- '#a8a29e', // stone-400
521
- '#e11d48' // rose
522
- ],
523
- borderWidth: 0
524
- }]
525
- },
526
- options: {
527
- responsive: true,
528
- maintainAspectRatio: false,
529
- cutout: '70%',
530
- plugins: {
531
- legend: { position: 'bottom' }
532
- }
533
- }
534
- });
535
-
536
- // --- INTERACTION LOGIC ---
537
-
538
- // Tab Switching
539
- function switchTab(tabId) {
540
- appState.currentTab = tabId;
541
-
542
- // Reset styles
543
- document.getElementById('tab-voice').classList.remove('active-tab', 'text-stone-600');
544
- document.getElementById('tab-grounding').classList.remove('active-tab', 'text-stone-600');
545
- document.getElementById('tab-voice').classList.add('text-stone-500');
546
- document.getElementById('tab-grounding').classList.add('text-stone-500');
547
-
548
- // Hide content
549
- document.getElementById('content-voice').classList.add('hidden');
550
- document.getElementById('content-grounding').classList.add('hidden');
551
-
552
- // Activate selected
553
- document.getElementById(`tab-${tabId}`).classList.add('active-tab', 'text-stone-600');
554
- document.getElementById(`tab-${tabId}`).classList.remove('text-stone-500');
555
- document.getElementById(`content-${tabId}`).classList.remove('hidden');
556
- }
557
-
558
- // Flow Simulation
559
- function runSimulation() {
560
- if (appState.simulating) return;
561
- appState.simulating = true;
562
-
563
- const btnText = document.getElementById('sim-btn-text');
564
- const log = document.getElementById('sim-log');
565
- const pBar = document.getElementById('progress-bar');
566
-
567
- btnText.innerText = "Simulating...";
568
- log.innerHTML = '';
569
- log.classList.remove('hidden');
570
- pBar.style.width = '0%';
571
-
572
- // Reset Nodes
573
- for(let i=1; i<=5; i++) {
574
- const el = document.getElementById(`step-${i}`);
575
- el.classList.add('opacity-50');
576
- el.querySelector('.w-12').classList.remove('border-cyan-500', 'text-cyan-600', 'transform', 'scale-110');
577
- el.querySelector('.w-12').classList.add('border-stone-300');
578
- }
579
-
580
- // Start Animation Sequence
581
- const delay = 600;
582
- const steps = [
583
- "User records voice input...",
584
- "V1 Logic: Classifying threat category...",
585
- "V2 Logic: Calling Gemini API for NVD data...",
586
- "Formatting: Appending CVE summary to Haiku...",
587
- "Result: Displaying Dynamic Oracle response."
588
- ];
589
-
590
- // Animate Progress Bar
591
- setTimeout(() => { pBar.style.width = '100%'; }, 100);
592
-
593
- let currentStep = 0;
594
- const interval = setInterval(() => {
595
- if (currentStep >= 5) {
596
- clearInterval(interval);
597
- appState.simulating = false;
598
- btnText.innerText = "Simulate Flow";
599
- return;
600
- }
601
-
602
- // Update UI for current step
603
- const stepNum = currentStep + 1;
604
- const node = document.getElementById(`step-${stepNum}`);
605
-
606
- node.classList.remove('opacity-50');
607
- node.querySelector('.w-12').classList.add('border-cyan-500', 'text-cyan-600', 'transition', 'duration-300', 'transform', 'scale-110');
608
- node.querySelector('.w-12').classList.remove('border-stone-300');
609
-
610
- // Add log entry
611
- const entry = document.createElement('div');
612
- entry.innerText = `[${new Date().toLocaleTimeString()}] ${steps[currentStep]}`;
613
- log.appendChild(entry);
614
- log.scrollTop = log.scrollHeight;
615
-
616
- currentStep++;
617
- }, delay);
618
- }
619
-
620
- </script>
621
- </body>
622
- </html>
623
- FORGE_TEMPLATES = [
624
- "Sharpen structure → remove noise.",
625
- "Infuse neon-clarity → emphasize core intent.",
626
- "Embed Pi discipline → precision above all.",
627
- "Tighten latency → eliminate cognitive delay.",
628
- "Finalize → transform into battle-ready prompt."
629
- ]
630
-
631
- # ───── Core Functions ─────────────────────────────
632
- def _sample(lines, temperature, max_lines):
633
- k = max(1, int(len(lines) * (0.3 + temperature)))
634
- return random.sample(lines, min(k, max_lines, len(lines)))
635
-
636
- def generate_response(user_input, mode, temperature, max_lines):
637
- if not user_input or not user_input.strip():
638
- return "*The blade cannot cut without intent.*"
639
- themed = LATENCY_LINES if mode == "Latency Dojo" else PI_GUARDIAN_LINES if mode == "Pi Guardian" else QUANTUM_FORGE_LINES
640
- sampled = _sample(themed, temperature, int(max_lines))
641
- lines = "\n".join(f"- {l}" for l in sampled)
642
- return textwrap.dedent(f"""
643
- ### Samurai Response
644
- **Intent:** {user_input}
645
- {lines}
646
- """)
647
-
648
- def forge_prompt(base, intensity):
649
- if not base or not base.strip():
650
- return "The forge rejects emptiness."
651
- result = base.strip()
652
- for step in FORGE_TEMPLATES[:intensity]:
653
- result = f"{step}\n→ {result}"
654
- return f"**Forged Prompt**\n{result}"
655
-
656
- def analyze_latency(ns):
657
- ns = float(ns)
658
- verdict = "Perfect blade — no hesitation." if ns <= 5 else "Acceptable — refine your stance." if ns <= 9 else "Unacceptable — rebuild your architecture."
659
- return f"## Latency Report\n- Measured: **{ns} ns**\n- Verdict: {verdict}"
660
-
661
- # ───── Gradio UI ──────────────────────────────────
662
- with gr.Blocks(title="Pi Cyber Samurai Dojo") as demo:
663
-
664
- gr.HTML(f"<div class='banner'><img src='{LOGO}' class='crest'/></div>")
665
-
666
- if RAIN.exists():
667
- gr.Audio(str(RAIN), autoplay=False, loop=True, interactive=True,
668
- label="Dojo Rain Ambience", container=False)
669
-
670
- with gr.Tabs():
671
- with gr.Tab("Samurai Oracle"):
672
- gr.Markdown("# Pi Cyber Samurai — Oracle Mode")
673
- if HERO.exists():
674
- gr.Image(str(HERO), height=320, show_label=False, container=False)
675
- user_input = gr.Textbox(label="Your Intent", lines=4)
676
- dojo_mode = gr.Radio(["Latency Dojo","Pi Guardian","Quantum Forge"], value="Latency Dojo", label="Mode")
677
- temperature = gr.Slider(0,1,value=0.3,step=0.05,label="Temperature")
678
- max_lines = gr.Slider(3,20,value=8,step=1,label="Lines")
679
- out = gr.Markdown()
680
- gr.Button("Invoke Samurai Spirit", variant="primary").click(
681
- generate_response, [user_input, dojo_mode, temperature, max_lines], out)
682
-
683
- with gr.Tab("Prompt Forge"):
684
- raw = gr.Textbox(label="Base Idea", lines=4)
685
- intensity = gr.Slider(1,5,value=3,step=1,label="Intensity")
686
- forged = gr.Textbox(label="Forged Prompt", lines=12)
687
- gr.Button("Strike the Anvil", variant="primary").click(
688
- forge_prompt, [raw, intensity], forged)
689
-
690
- with gr.Tab("Latency Profiler"):
691
- ns = gr.Number(label="Latency (ns)", value=7.5)
692
- res = gr.Markdown()
693
- gr.Button("Analyze Latency", variant="primary").click(
694
- analyze_latency, ns, res)
695
-
696
- gr.HTML("<div class='footer'><p class='footer-text'>Forged in neon. Driven by Pi.</p></div>")
697
-
698
- # ───── LAUNCH — THIS LINE IS THE ONLY ONE THAT CHANGED ─────
699
- #
700
- if __name__ == "__main__":
701
- demo.launch(
702
- css_paths=["style.css"], # neon restored
703
- server_name="0.0.0.0",
704
- server_port=7860
705
- )