| | <!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> |
