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