Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Midnight Sketchbook | Peak Artistic Visualizer</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="app-container"> | |
| <aside class="sidebar"> | |
| <div class="sidebar-header"> | |
| <h2>📜 Audio Journal</h2> | |
| <p style="font-size: 13px; color: #666; margin-top: 5px;">Recorded Expressions</p> | |
| </div> | |
| <div id="masterList" class="scroll-area"></div> | |
| </aside> | |
| <main class="main-content"> | |
| <header class="top-bar"> | |
| <div class="branding"> | |
| <h1>Midnight<span>Sketchbook</span></h1> | |
| </div> | |
| <nav class="tab-system"> | |
| <button class="tab-btn active" onclick="switchMode('charcoal')">🖤 Charcoal Pulse</button> | |
| <button class="tab-btn" onclick="switchMode('kinetic')">🌊 Kinetic</button> | |
| <button class="tab-btn" onclick="switchMode('nebula')">🌀 Nebula</button> | |
| </nav> | |
| </header> | |
| <div class="canvas-container" id="stage"> | |
| <div class="paper-texture"></div> | |
| <div id="status-badge" class="badge">Mic Offline</div> | |
| <canvas id="mainCanvas"></canvas> | |
| </div> | |
| <footer class="controls-bar"> | |
| <button class="btn secondary" id="btnInit" onclick="initMic()">🔌 Awake Mic</button> | |
| <button class="btn primary" id="btnStart" onclick="startVAD()" disabled>▶️ Begin Drawing</button> | |
| <button class="btn danger" id="btnStop" onclick="stopVAD()" disabled>🛑 Rest Artist</button> | |
| </footer> | |
| </main> | |
| </div> | |
| <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web@1.22.0/dist/ort.wasm.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/@ricky0123/vad-web@0.0.29/dist/bundle.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/audiobuffer-to-wav@1.0.0/index.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |