Spaces:
Running
Running
| <html lang="en" data-theme="saffron"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> | |
| <title>VERA — Advanced AI</title> | |
| <link rel="stylesheet" href="bot_style.css" /> | |
| <link rel="manifest" href="manifest.json" /> | |
| <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" /> | |
| </head> | |
| <body> | |
| <div id="toasts" aria-live="polite" aria-atomic="true"></div> | |
| <!-- Header controls drawer (mobile) --> | |
| <aside id="headerDrawer" class="drawer" aria-hidden="true" aria-label="Header menu"> | |
| <div class="drawer-head"> | |
| <strong>Menu</strong> | |
| <button id="closeHeaderDrawer" class="icon-btn" title="Close" type="button">✕</button> | |
| </div> | |
| <div id="drawerControls" class="drawer-body"></div> | |
| </aside> | |
| <div id="drawerScrim" class="drawer-scrim" aria-hidden="true"></div> | |
| <div class="layout"> | |
| <!-- Sidebar: Chats & Folders --> | |
| <aside class="sidebar offcanvas" id="sidebar" aria-label="Conversation list"> | |
| <div class="side-header"> | |
| <div class="brand-mini"> | |
| <img src="icon_vera.png" alt="Vera" /> | |
| <span>VERA</span> | |
| </div> | |
| <button id="closeSidebar" class="icon-btn only-mobile" title="Close" type="button">✕</button> | |
| </div> | |
| <div class="side-actions"> | |
| <button id="btnNewChat" class="primary full" type="button">＋ New chat</button> | |
| <button id="btnNewFolder" class="ghost full" type="button">Create folder</button> | |
| </div> | |
| <div class="side-section"> | |
| <div class="section-title">Folders</div> | |
| <ul id="folderList" class="list"></ul> | |
| </div> | |
| <div class="side-section"> | |
| <div class="section-title">Chats</div> | |
| <ul id="chatList" class="list"></ul> | |
| </div> | |
| </aside> | |
| <div id="scrim" class="scrim" aria-hidden="true"></div> | |
| <!-- Main Panel --> | |
| <div class="panel"> | |
| <!-- Header --> | |
| <header class="header sticky-top" role="banner"> | |
| <div class="brand"> | |
| <button id="openSidebar" class="icon-btn only-mobile" title="History" type="button">☰</button> | |
| <button id="openHeaderDrawer" class="icon-btn only-mobile" title="Menu" type="button">⋮</button> | |
| <img src="icon_vera.png" alt="Vera Icon" class="vera-icon" /> | |
| <div class="titles"> | |
| <h1>VERA</h1> | |
| <div class="subtitle">Spiritual • Health • Any Topic</div> | |
| </div> | |
| </div> | |
| <!-- Keep header clean: ONLY Category + Settings button --> | |
| <div class="header-controls" role="group" aria-label="Header controls"> | |
| <div class="field"> | |
| <label for="categorySelect">Category</label> | |
| <select id="categorySelect" name="category"> | |
| <option value="auto" selected>Auto detect</option> | |
| <option value="spiritual_guidance">Spiritual</option> | |
| <option value="health_wellness">Health</option> | |
| <option value="generate_image">Generate Image</option> | |
| <option value="realtime_query">Realtime</option> | |
| <option value="other_query">Other</option> | |
| </select> | |
| </div> | |
| <button class="icon-btn" id="openSettings" title="Settings" type="button" aria-haspopup="dialog" aria-controls="settingsModal">⚙️</button> | |
| </div> | |
| </header> | |
| <!-- Body --> | |
| <main class="chat scrollable" id="chatBody" aria-live="polite" aria-label="Chat area"> | |
| <section class="welcome bot"> | |
| <img src="icon_vera.png" alt="Bot Icon" class="bot-icon" /> | |
| <p><strong>Namaste! I’m VERA.</strong> Ask anything. Set a category if you like, or keep Auto.</p> | |
| <div class="chips" role="list"> | |
| <button class="chip" data-chip="Recite a mantra for peace" type="button">🕉️ Mantra for peace</button> | |
| <button class="chip" data-chip="Explain Bhagavatam canto 10 devotion" type="button">📜 Bhagavatam 10</button> | |
| <button class="chip" data-chip="Best diet for high BP, vegetarian, low salt" type="button">🥗 BP-friendly diet</button> | |
| <button class="chip" data-chip="/image serene meditation space at dawn" type="button">🖼️ Generate: meditation</button> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="footer sticky-bottom" role="contentinfo"> | |
| <div class="left-tools" role="group" aria-label="TTS controls"> | |
| <button id="btnPlay" class="mini" title="Speak last" type="button">▶</button> | |
| <button id="btnPause" class="mini" title="Pause" type="button">⏸</button> | |
| <button id="btnResume" class="mini" title="Resume" type="button">▶︎</button> | |
| <button id="btnStop" class="mini" title="Stop" type="button">⏹</button> | |
| </div> | |
| <div class="input"> | |
| <textarea id="userInput" placeholder="Type your message… (Tip: /image your prompt)" rows="1" aria-label="Message input"></textarea> | |
| <button id="sendButton" class="send" type="button" title="Send">➤</button> | |
| <button id="micButton" class="mic" title="Speak to type" type="button">🎤</button> | |
| <button id="attachButton" class="attach" type="button" title="Attach health image">📎</button> | |
| <input type="file" id="healthImage" accept="image/*" style="display:none"> | |
| </div> | |
| </footer> | |
| </div> | |
| </div> | |
| <!-- Settings Modal --> | |
| <dialog id="settingsModal" class="modal" aria-labelledby="settingsTitle"> | |
| <form method="dialog" class="modal-content"> | |
| <button class="close" aria-label="Close" value="cancel">×</button> | |
| <h3 id="settingsTitle">Settings</h3> | |
| <!-- All header options moved into Settings to avoid duplicate IDs in DOM --> | |
| <div class="setting-field"> | |
| <label for="ttsLang">TTS Language</label> | |
| <select id="ttsLang" name="ttsLang"> | |
| <option value="auto">Auto (detect)</option> | |
| <option value="hi-IN">Hindi (hi-IN)</option> | |
| <option value="en-IN">English (en-IN)</option> | |
| <option value="sa-IN">Sanskrit (sa-IN)</option> | |
| </select> | |
| </div> | |
| <div class="setting-field"> | |
| <label for="voiceSelect">Voice</label> | |
| <!-- Keep original IDs here so existing JS continues to work --> | |
| <select id="voiceSelect" name="voiceSelect"></select> | |
| </div> | |
| <div class="setting-field"> | |
| <label for="speakToggle">Always speak</label> | |
| <label class="switch"> | |
| <input type="checkbox" id="speakToggle" checked /> | |
| <span class="slider" aria-hidden="true"></span> | |
| </label> | |
| </div> | |
| <div class="setting-field"> | |
| <label for="ttsRate">Rate</label> | |
| <input type="range" min="0.75" max="1.2" step="0.05" value="0.95" id="ttsRate" /> | |
| </div> | |
| <div class="setting-field"> | |
| <label for="ttsPitch">Pitch</label> | |
| <input type="range" min="0.7" max="1.2" step="0.05" value="0.95" id="ttsPitch" /> | |
| </div> | |
| <div class="setting-field"> | |
| <label for="themeToggle">Theme</label> | |
| <label class="switch"> | |
| <!-- Keep original ID so scripts can read it; removed from header to avoid duplicates --> | |
| <input type="checkbox" id="themeToggle" /> | |
| <span class="slider" aria-hidden="true"></span> | |
| </label> | |
| <span class="hint">Toggle dark theme</span> | |
| </div> | |
| <div class="setting-field"> | |
| <label for="imgVision">Health image reading</label> | |
| <input type="checkbox" id="imgVision" /> | |
| <span class="hint">If enabled, attach an image in Health; VERA will try to interpret.</span> | |
| </div> | |
| <div class="modal-actions"> | |
| <button class="btn" value="close" type="submit">Close</button> | |
| </div> | |
| </form> | |
| </dialog> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.7/dist/purify.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/jwt-decode@3.1.2/build/jwt-decode.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js"></script> | |
| <script src="bot_script.js"></script> | |
| </body> | |
| </html> | |