indroniel
feat(hackathon-demo): Language-agnostic canonical templates + RAG for multilingual MemRL
fe2726b | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>🧠 MemRL Audio Voice Canvas</title> | |
| <!-- Google Fonts Outfit & JetBrains Mono --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/style.css"> | |
| </head> | |
| <body> | |
| <div class="glass-bg-decor color-1"></div> | |
| <div class="glass-bg-decor color-2"></div> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="app-header"> | |
| <div class="logo-area"> | |
| <span class="logo-icon">🧠</span> | |
| <h1>MemRL <span class="accent-text">Canvas</span></h1> | |
| </div> | |
| <p class="subtitle">Self-Evolving <strong>Language-Agnostic</strong> MemRL Canvas — Speak in any language, it remembers the template</p> | |
| </header> | |
| <!-- Main Workspace --> | |
| <main class="workspace-grid"> | |
| <!-- Left Side: Controls, Feedback, Sandbox --> | |
| <section class="control-panel"> | |
| <!-- Audio Recording Card --> | |
| <div class="panel-card mic-card"> | |
| <h2 class="card-title"><span class="icon">🎙️</span> Voice Activation</h2> | |
| <p class="description">Click the microphone to record a drawing command sequence. Try stacking multiple shapes or drawing complex paths!</p> | |
| <div class="mic-container"> | |
| <button id="micBtn" class="mic-button" title="Start Recording"> | |
| <span class="mic-icon">🎤</span> | |
| </button> | |
| <div id="recordingWave" class="wave-container"> | |
| <div class="wave-bar"></div> | |
| <div class="wave-bar"></div> | |
| <div class="wave-bar"></div> | |
| <div class="wave-bar"></div> | |
| <div class="wave-bar"></div> | |
| </div> | |
| </div> | |
| <div id="recordingStatus" class="recording-status">Ready to listen...</div> | |
| </div> | |
| <!-- Execution Telemetry Card --> | |
| <div class="panel-card telemetry-card"> | |
| <h2 class="card-title"><span class="icon">📊</span> Execution Telemetry</h2> | |
| <div class="telemetry-item"> | |
| <span class="label">Raw Transcription:</span> | |
| <div id="transcriptionBox" class="console-box transcript-box">None</div> | |
| </div> | |
| <div class="telemetry-item"> | |
| <span class="label">Interpretation Status:</span> | |
| <div id="statusBadge" class="status-badge state-idle">IDLE</div> | |
| </div> | |
| <div class="telemetry-item"> | |
| <span class="label">Parsed Parameters (JSON):</span> | |
| <textarea id="jsonBox" class="console-box json-box" placeholder="Resolved Action Payload..."></textarea> | |
| </div> | |
| </div> | |
| <!-- Reward Loop Card --> | |
| <div class="panel-card reward-card disabled" id="rewardCard"> | |
| <h2 class="card-title"><span class="icon">🔄</span> Policy Feedback Loop</h2> | |
| <p class="description">Reward good outcomes or correct bad ones. Corrections now support edit → <strong>preview/sample execution</strong> on the canvas → explicit +1.0 reinforcement to MemRL only after you approve the result.</p> | |
| <div class="feedback-actions"> | |
| <button id="acceptBtn" class="action-btn accept-btn"> | |
| <span class="btn-icon">👍</span> Confirm & Reinforce (+1.0) | |
| </button> | |
| <div class="correction-section"> | |
| <span class="label small">Need to correct the interpretation? Edit the JSON in the box above, then use the controls below for sample execution preview <strong>before</strong> MemRL update.</span> | |
| <button id="correctBtn" class="action-btn correct-btn"> | |
| <span class="btn-icon">🔧</span> Start Correction (edit + preview) | |
| </button> | |
| <!-- Better correction flow controls (shown in correction mode) --> | |
| <div id="correctionControls" class="correction-controls hidden"> | |
| <button id="previewCorrectionBtn" class="action-btn preview-btn"> | |
| <span class="btn-icon">▶</span> Preview / Sample Execution on Canvas | |
| </button> | |
| <button id="confirmCorrectionBtn" class="action-btn accept-btn" disabled> | |
| <span class="btn-icon">✅</span> Accept Preview & +1.0 Reinforce to MemRL | |
| </button> | |
| <button id="cancelCorrectionBtn" class="action-btn correct-btn"> | |
| <span class="btn-icon">✖</span> Cancel & Revert | |
| </button> | |
| <div id="jsonValidation" class="json-validation"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Inspiration Sandbox Card --> | |
| <div class="panel-card sandbox-card"> | |
| <h2 class="card-title"><span class="icon">💡</span> Inspiration Sandbox</h2> | |
| <p class="description">Click any example command to run it in the telemetry box, or speak it to train the agent:</p> | |
| <div class="example-commands-list"> | |
| <button class="example-cmd-pill">"draw a yellow star and a red circle around it"</button> | |
| <button class="example-cmd-pill">"draw a green house by making a square size 120 at bottom and a triangle size 120 on top"</button> | |
| <button class="example-cmd-pill">"draw a blue hexagon on the left, a purple heart on the right"</button> | |
| <button class="example-cmd-pill">"freehand: right 100, down 80, left 100, up 80, dot"</button> | |
| <button class="example-cmd-pill">"draw a magenta arrow from left top to right bottom"</button> | |
| <button class="example-cmd-pill">"write 'MemRL' in green at the top"</button> | |
| <!-- Multilingual demo pills (language-agnostic MemRL showcase) --> | |
| <button class="example-cmd-pill" title="Spanish">"dibuja un circulo rojo en el centro"</button> | |
| <button class="example-cmd-pill" title="Hindi/approx">"ek laal square center mein banao"</button> | |
| <button class="example-cmd-pill" title="Broken English / ASR noise">"draw a circle in the miidle please"</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Center Panel: The Canvas & Controls --> | |
| <section class="canvas-panel"> | |
| <!-- Suggestion Banner (Overlay) --> | |
| <div id="suggestionBanner" class="suggestion-banner hidden"> | |
| <div class="banner-content"> | |
| <span class="banner-icon">🧠</span> | |
| <p class="banner-text">MemRL Suggestion: Did you mean to run this action?</p> | |
| </div> | |
| <div class="banner-actions"> | |
| <button id="bannerYes" class="banner-btn yes">Yes</button> | |
| <button id="bannerNo" class="banner-btn no">No</button> | |
| </div> | |
| </div> | |
| <div class="canvas-wrapper"> | |
| <canvas id="drawingCanvas" width="500" height="500"></canvas> | |
| </div> | |
| <!-- Manual Palette Toolbar --> | |
| <div class="manual-toolbar"> | |
| <div class="toolbar-row"> | |
| <div class="toolbar-group"> | |
| <span class="group-label">View Settings:</span> | |
| <label class="switch-container"> | |
| <input type="checkbox" id="gridToggle" checked> | |
| <span class="switch-label">Drafting Grid</span> | |
| </label> | |
| <label class="switch-container"> | |
| <input type="checkbox" id="animateToggle" checked> | |
| <span class="switch-label">Trace Animation</span> | |
| </label> | |
| </div> | |
| <div class="toolbar-group flex-right"> | |
| <span class="group-label small-label">Drag shape to reposition</span> | |
| </div> | |
| </div> | |
| <div class="toolbar-row border-top"> | |
| <div class="toolbar-group wrap-group"> | |
| <span class="group-label">Shapes:</span> | |
| <button class="tool-btn active" data-tool="circle">Circle</button> | |
| <button class="tool-btn" data-tool="square">Square</button> | |
| <button class="tool-btn" data-tool="rectangle">Rectangle</button> | |
| <button class="tool-btn" data-tool="triangle">Triangle</button> | |
| <button class="tool-btn" data-tool="star">Star</button> | |
| <button class="tool-btn" data-tool="pentagon">Pentagon</button> | |
| <button class="tool-btn" data-tool="hexagon">Hexagon</button> | |
| <button class="tool-btn" data-tool="oval">Oval</button> | |
| <button class="tool-btn" data-tool="heart">Heart</button> | |
| <button class="tool-btn" data-tool="line">Line</button> | |
| <button class="tool-btn" data-tool="arrow">Arrow</button> | |
| <button class="tool-btn" data-tool="text">Text</button> | |
| </div> | |
| </div> | |
| <div class="toolbar-row border-top"> | |
| <div class="toolbar-group"> | |
| <span class="group-label">Colors:</span> | |
| <button class="color-btn active" data-color="red" style="background-color: red;"></button> | |
| <button class="color-btn" data-color="blue" style="background-color: blue;"></button> | |
| <button class="color-btn" data-color="green" style="background-color: green;"></button> | |
| <button class="color-btn" data-color="yellow" style="background-color: yellow;"></button> | |
| <button class="color-btn" data-color="purple" style="background-color: purple;"></button> | |
| <button class="color-btn" data-color="orange" style="background-color: orange;"></button> | |
| <button class="color-btn" data-color="black" style="background-color: black; border: 1px solid #555;"></button> | |
| <input type="color" id="customColorPicker" class="custom-color-picker" value="#00e699" title="Custom Hex Color"> | |
| </div> | |
| <div class="toolbar-group"> | |
| <span class="group-label">Size:</span> | |
| <input type="range" id="sizeSlider" min="30" max="250" value="100" class="size-slider"> | |
| <span id="sizeVal" class="size-val">100px</span> | |
| </div> | |
| <div class="toolbar-group flex-right"> | |
| <button id="clearBtn" class="utility-btn danger">🧹 Wipe Canvas</button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Right Panel: SQLite Episodic Memory List --> | |
| <section class="memory-panel"> | |
| <div class="panel-card memory-card"> | |
| <div class="memory-header"> | |
| <h2 class="card-title"><span class="icon">💾</span> SQLite Episodic Memory</h2> | |
| <button id="resetMemoryBtn" class="utility-btn danger-outline" title="Wipe Database">Wipe DB</button> | |
| </div> | |
| <p class="description">Live viewer of the `episodic_memory` SQLite database table. Shows Q-values for learned transcription-to-action paths.</p> | |
| <div class="memory-table-wrapper"> | |
| <table class="memory-table"> | |
| <thead> | |
| <tr> | |
| <th>Query (Voice Transcription)</th> | |
| <th>Resolved Actions</th> | |
| <th>Q-Value</th> | |
| </tr> | |
| </thead> | |
| <tbody id="memoryTableBody"> | |
| <tr> | |
| <td colspan="3" class="empty-state">No learned memories yet. Use voice activation to begin.</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer Info --> | |
| <footer class="app-footer"> | |
| <p>Hugging Face Hackathon • <strong>Multilingual Canonical MemRL + RAG</strong> • Fully local • Templates learned across languages</p> | |
| </footer> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> | |