Spaces:
Runtime error
Runtime error
| | |
| <html lang="si"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sinhala Chatbot</title> | |
| <link rel="stylesheet" href="/static/css/style.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Sinhala:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| </head> | |
| <body> | |
| <!-- Three.js Background Canvas --> | |
| <canvas id="bgCanvas"></canvas> | |
| <div class="app-wrapper"> | |
| <!-- Hidden Status Indicator (used by JS) --> | |
| <div class="status-indicator" id="statusIndicator" style="display:none;"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Ready</span> | |
| </div> | |
| <!-- Compact Header --> | |
| <header class="hero compact"> | |
| <div class="hero-top-row"> | |
| <div class="hero-badge">AI-Powered</div> | |
| <h1 class="hero-title">Sinhala Chatbot</h1> | |
| </div> | |
| <p class="hero-desc"><i class="fas fa-wand-magic-sparkles"></i> Press the microphone to start — Supports Sinhala & English voice input</p> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="main-content" id="voiceChatSection"> | |
| <!-- Mic Control Area (no box) --> | |
| <div class="mic-area no-box"> | |
| <!-- Recording Timer --> | |
| <div class="recording-timer" id="recordingTimer"> | |
| <span class="timer-dot"></span> | |
| <span class="timer-text">00:00</span> | |
| </div> | |
| <!-- Mic Button with Glow --> | |
| <div class="mic-wrapper"> | |
| <div class="mic-glow-ring ring-1"></div> | |
| <div class="mic-glow-ring ring-2"></div> | |
| <div class="mic-glow-ring ring-3"></div> | |
| <button class="mic-btn" id="micBtn" title="Click to record"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| </div> | |
| <!-- Audio Visualizer --> | |
| <div class="visualizer" id="visualizer"> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| <div class="bar"></div> | |
| </div> | |
| </div> | |
| <!-- Reset Button Row --> | |
| <div class="reset-row"> | |
| <button class="reset-btn" id="resetBtn" title="Reset"> | |
| <i class="fas fa-rotate-right"></i> | |
| <span>Reset</span> | |
| </button> | |
| </div> | |
| <!-- Chat Messages --> | |
| <div class="chat-messages" id="chatContainer"> | |
| <!-- User Message Card --> | |
| <div class="message-card user-card" id="inputDisplay"> | |
| <div class="message-avatar user-avatar"> | |
| <i class="fas fa-user-circle"></i> | |
| </div> | |
| <div class="message-body"> | |
| <div class="message-label">Your Message</div> | |
| <div class="message-text" id="userText"> | |
| <p class="placeholder">Your transcribed message will appear here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bot Response Card --> | |
| <div class="message-card bot-card" id="responseDisplay"> | |
| <div class="message-actions-top"> | |
| <button class="action-btn-sm speak-btn" id="speakerBtn" title="Listen to response" disabled> | |
| <i class="fas fa-volume-up"></i> | |
| </button> | |
| <button class="action-btn-sm pause-btn" id="pauseBtn" title="Pause audio"> | |
| <i class="fas fa-pause"></i> | |
| </button> | |
| </div> | |
| <div class="message-avatar bot-avatar"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <div class="message-body"> | |
| <div class="message-label">Bot Response</div> | |
| <div class="message-text" id="botText"> | |
| <p class="placeholder">Bot response will appear here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Loading Overlay --> | |
| <div class="loading-overlay" id="loadingOverlay"> | |
| <div class="loader"> | |
| <div class="loader-visual"> | |
| <div class="loader-ring"></div> | |
| <div class="loader-ring"></div> | |
| <div class="loader-ring"></div> | |
| <div class="loader-core"> | |
| <i class="fas fa-brain"></i> | |
| </div> | |
| </div> | |
| <div class="loader-text-area"> | |
| <p id="loadingText">Processing...</p> | |
| <div class="loader-dots"> | |
| <span></span><span></span><span></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> | |
| <script src="/static/js/script.js"></script> | |
| <script src="/static/js/bg-animation.js"></script> | |
| </body> | |
| </html> | |