| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| <title>AI Doctor Consultation with Voice</title>
|
| <link rel="stylesheet" href="styles.css">
|
| </head>
|
| <body>
|
| <div class="notification" id="notification"></div>
|
|
|
| <div class="container">
|
| <div class="header">
|
| <h1>🩺 AI Doctor Consultation</h1>
|
| <p>Professional Medical Consultation with Voice & PDF Summary</p>
|
|
|
| <div class="voice-controls">
|
| <button class="voice-btn" id="continuousModeBtn" onclick="toggleContinuousMode()">
|
| <span class="voice-indicator"></span>
|
| <span>🔄 Continuous: OFF</span>
|
| </button>
|
| <button class="voice-btn" id="toggleAutoSpeak" onclick="toggleAutoSpeak()">
|
| <span class="voice-indicator" id="speakIndicator"></span>
|
| <span id="autoSpeakText">🔊 Auto-Speak: OFF</span>
|
| </button>
|
| <button class="voice-btn" id="voiceInputBtn" onclick="toggleVoiceInput()">
|
| 🎤 Voice Input
|
| </button>
|
| </div>
|
|
|
| <div class="voice-status" id="voiceStatus"></div>
|
|
|
| <div class="session-info" id="sessionInfo">
|
| Starting new session...
|
| </div>
|
| <div class="session-id-display" id="sessionIdDisplay" onclick="copySessionId()" title="Click to copy">
|
| Session ID: Loading...
|
| </div>
|
| </div>
|
|
|
| <div class="loading" id="loading">Dr. AI is typing...</div>
|
|
|
| <div class="chat-container" id="chatContainer">
|
|
|
| </div>
|
|
|
| <div class="input-area">
|
| <button class="btn btn-voice" id="voiceBtn" onclick="toggleVoiceInput()">
|
| 🎤
|
| </button>
|
| <input type="text" id="messageInput" placeholder="Type or speak your message..." />
|
| <button class="btn btn-primary" onclick="sendMessage()">Send 📤</button>
|
| </div>
|
|
|
| <div class="controls">
|
| <button class="btn btn-success" onclick="generateSummary()">📋 Generate Summary & PDF</button>
|
| <button class="btn btn-info" onclick="showHistoryModal()">📜 Load History</button>
|
| <button class="btn btn-secondary" onclick="restartSession()">🔄 Restart</button>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="modal" id="summaryModal">
|
| <div class="modal-content">
|
| <span class="close-btn" onclick="closeSummary()">×</span>
|
| <h2>📋 Consultation Summary</h2>
|
|
|
| <div id="pdfDownloadInfo" class="pdf-download-info" style="display: none;">
|
| <div class="pdf-icon">📄</div>
|
| <h3>PDF Generated Successfully!</h3>
|
| <p>Your consultation summary has been saved as a PDF document.</p>
|
| </div>
|
|
|
| <div class="summary-actions">
|
| <button class="btn btn-success" id="downloadPdfBtn" onclick="downloadPDF()" style="display: none;">
|
| 📥 Download PDF
|
| </button>
|
| <button class="btn btn-info" id="viewPdfBtn" onclick="togglePDFViewer()" style="display: none;">
|
| 👁️ View PDF
|
| </button>
|
| </div>
|
|
|
| <div id="pdfViewerContainer" style="display: none;">
|
| <h3 style="margin-top: 20px;">PDF Preview:</h3>
|
| <iframe id="pdfViewer" class="pdf-viewer"></iframe>
|
| </div>
|
|
|
| <h3 style="margin-top: 20px;">Text Summary:</h3>
|
| <pre id="summaryText"></pre>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="modal" id="historyModal">
|
| <div class="modal-content">
|
| <span class="close-btn" onclick="closeHistory()">×</span>
|
| <h2>📜 Load Previous Consultation</h2>
|
|
|
| <div class="load-session-form">
|
| <input type="text" id="sessionIdInput" placeholder="Enter Session ID..." />
|
| <button class="btn btn-primary" onclick="loadSessionById()">Load</button>
|
| </div>
|
|
|
| <h3>Recent Consultations:</h3>
|
| <div class="history-list" id="historyList">
|
| <p style="text-align: center; color: #999;">Loading history...</p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
| <script src="script.js"></script>
|
| </body>
|
| </html> |
