Spaces:
Sleeping
Sleeping
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Assnani — Dental AI Chatbot</title> | |
| <meta name="description" content="AI-powered dental symptom assessment and X-ray correlation chatbot by Assnani Dental Clinic Management System."> | |
| <meta property="og:title" content="Assnani — Dental AI Chatbot"> | |
| <meta property="og:description" content="AI-powered dental symptom assessment, X-ray analysis, and treatment recommendations for dental clinics."> | |
| <meta property="og:type" content="website"> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🦷</text></svg>"> | |
| <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@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| </head> | |
| <body> | |
| <!-- Background Glow Effects --> | |
| <div class="bg-glow bg-glow-1"></div> | |
| <div class="bg-glow bg-glow-2"></div> | |
| <div class="bg-glow bg-glow-3"></div> | |
| <!-- Main App Container --> | |
| <div class="app-container"> | |
| <!-- Header --> | |
| <header class="app-header" id="app-header"> | |
| <div class="header-left"> | |
| <div class="logo-icon">🦷</div> | |
| <div class="header-text"> | |
| <h1>Assnani AI</h1> | |
| <span class="header-subtitle">Dental Symptom Assistant</span> | |
| </div> | |
| </div> | |
| <div class="header-right"> | |
| <div class="status-indicator"> | |
| <span class="status-dot"></span> | |
| <span class="status-text">Online</span> | |
| </div> | |
| <button class="btn-icon" id="btn-toggle-panel" title="Toggle X-ray Panel" style="display:none;"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><line x1="9" y1="3" x2="9" y2="21"/></svg> | |
| </button> | |
| <button class="btn-icon" id="btn-new-chat" title="New Chat"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <div class="main-content"> | |
| <!-- Chat Area --> | |
| <div class="chat-area" id="chat-area"> | |
| <!-- Messages Container --> | |
| <div class="messages-container" id="messages-container"> | |
| <!-- Messages will be inserted here by JS --> | |
| </div> | |
| <!-- Typing Indicator --> | |
| <div class="typing-indicator" id="typing-indicator" style="display:none;"> | |
| <div class="typing-avatar">🤖</div> | |
| <div class="typing-dots"> | |
| <span></span> | |
| <span></span> | |
| <span></span> | |
| </div> | |
| </div> | |
| <!-- Quick Replies Area --> | |
| <div class="quick-replies-area" id="quick-replies-area" style="display:none;"> | |
| <!-- Quick reply buttons inserted by JS --> | |
| </div> | |
| <!-- Upload Area (shown when X-ray upload is needed) --> | |
| <div class="upload-area" id="upload-area" style="display:none;"> | |
| <div class="upload-dropzone" id="upload-dropzone"> | |
| <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.6"> | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> | |
| <polyline points="17 8 12 3 7 8"/> | |
| <line x1="12" y1="3" x2="12" y2="15"/> | |
| </svg> | |
| <p class="upload-text">Drop your dental X-ray(s) here</p> | |
| <p class="upload-subtext">or click to browse • PNG, JPG, PDF — multiple files supported</p> | |
| <input type="file" id="xray-file-input" accept="image/png,image/jpeg,image/jpg,.pdf,application/pdf" multiple style="display:none;"> | |
| </div> | |
| <div class="upload-preview" id="upload-preview" style="display:none;"> | |
| <div class="preview-grid" id="upload-preview-grid"> | |
| <!-- Thumbnails inserted by JS --> | |
| </div> | |
| <div class="upload-actions"> | |
| <button class="btn-upload-add" id="btn-upload-add" title="Add more files"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg> | |
| Add More | |
| </button> | |
| <button class="btn-upload-submit" id="btn-upload-submit"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"/></svg> | |
| Analyze X-rays | |
| </button> | |
| <button class="btn-upload-cancel" id="btn-upload-cancel">Clear all</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="input-area" id="input-area" style="display:none;"> | |
| <div class="input-wrapper"> | |
| <input type="text" id="user-input" placeholder="Type your message..." autocomplete="off"> | |
| <button class="btn-send" id="btn-send" title="Send"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- X-ray Results Side Panel --> | |
| <div class="side-panel" id="side-panel" style="display:none;"> | |
| <div class="panel-header"> | |
| <h2>🔍 X-ray Analysis</h2> | |
| <button class="btn-icon btn-close-panel" id="btn-close-panel"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg> | |
| </button> | |
| </div> | |
| <div class="panel-content" id="panel-content"> | |
| <!-- Annotated X-ray and detection details --> | |
| <div class="panel-xray" id="panel-xray"> | |
| <!-- Multiple annotated images shown here by JS --> | |
| </div> | |
| <div class="panel-detections" id="panel-detections"> | |
| <!-- Detection cards inserted by JS --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Report Modal --> | |
| <div class="report-overlay" id="report-overlay" style="display:none;"> | |
| <div class="report-modal" id="report-modal"> | |
| <div class="report-header"> | |
| <div class="report-header-icon">📋</div> | |
| <h2>Dental Assessment Report</h2> | |
| <p class="report-subtitle">AI-Assisted Analysis by Assnani</p> | |
| </div> | |
| <div class="report-body" id="report-body"> | |
| <!-- Report content inserted by JS --> | |
| </div> | |
| <div class="report-footer"> | |
| <p class="report-disclaimer">⚠️ This is an AI-assisted preliminary analysis. Final diagnosis and treatment must be verified by a licensed dental professional.</p> | |
| <div class="report-actions"> | |
| <button class="btn-report btn-report-print" id="btn-report-print"> | |
| <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align:middle;margin-right:4px;"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg> | |
| </button> | |
| <button class="btn-report btn-report-close" id="btn-report-close">Close</button> | |
| <button class="btn-report btn-report-new" id="btn-report-new">New Consultation</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/tooth-chart.js"></script> | |
| <script src="/static/chatbot.js"></script> | |
| </body> | |
| </html> | |