993e46f720
- Live encounter recording → HPI generation - Physician voice dictation → polished HPI - Developmental milestones checklist (AAP/Nelson) - 3-sentence summary generator - OpenRouter integration with model selector - Docker support - Mobile responsive UI
327 lines
13 KiB
HTML
327 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Pediatric AI Scribe</title>
|
|
<link rel="stylesheet" href="/css/styles.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
</head>
|
|
<body>
|
|
|
|
<!-- HEADER -->
|
|
<header class="app-header">
|
|
<div class="header-content">
|
|
<div class="header-top">
|
|
<div class="logo">
|
|
<i class="fas fa-stethoscope"></i>
|
|
<div>
|
|
<h1>Pediatric AI Scribe</h1>
|
|
<p class="tagline">AI-Powered Clinical Documentation</p>
|
|
</div>
|
|
</div>
|
|
<div class="model-selector">
|
|
<label><i class="fas fa-robot"></i> Model:</label>
|
|
<select id="global-model-select">
|
|
<option value="google/gemini-2.5-flash">⚡ Gemini Flash 2.5 (Best Value)</option>
|
|
<option value="google/gemini-2.5-flash:thinking">🧠 Gemini Flash Thinking</option>
|
|
<option value="deepseek/deepseek-chat-v3-0324">💰 DeepSeek V3</option>
|
|
<option value="deepseek/deepseek-r1:free">🆓 DeepSeek R1 (FREE)</option>
|
|
<option value="qwen/qwen3-30b-a3b:free">🆓 Qwen3 30B (FREE)</option>
|
|
<option value="meta-llama/llama-3.1-70b-instruct">🦙 Llama 3.1 70B</option>
|
|
<option value="openai/gpt-4o">👑 GPT-4o (Premium)</option>
|
|
<option value="anthropic/claude-sonnet-4">👑 Claude Sonnet 4</option>
|
|
</select>
|
|
<span id="model-cost-badge" class="cost-badge">~$0.001/call</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- TAB NAVIGATION -->
|
|
<nav class="tab-nav">
|
|
<button class="tab-btn active" data-tab="encounter">
|
|
<i class="fas fa-comments"></i>
|
|
<span>Live Encounter → HPI</span>
|
|
</button>
|
|
<button class="tab-btn" data-tab="dictation">
|
|
<i class="fas fa-microphone"></i>
|
|
<span>Voice Dictation → HPI</span>
|
|
</button>
|
|
<button class="tab-btn" data-tab="milestones">
|
|
<i class="fas fa-baby"></i>
|
|
<span>Dev Milestones</span>
|
|
</button>
|
|
</nav>
|
|
|
|
<main class="main-content">
|
|
|
|
<!-- ===== TAB 1: LIVE ENCOUNTER ===== -->
|
|
<section id="encounter-tab" class="tab-content active">
|
|
<div class="module-header">
|
|
<h2><i class="fas fa-comments"></i> Live Patient Encounter → HPI</h2>
|
|
<p>Record the doctor-patient conversation. AI generates a structured HPI.</p>
|
|
</div>
|
|
|
|
<div class="demographics-bar">
|
|
<div class="demo-field">
|
|
<label>Patient Age</label>
|
|
<input type="text" id="enc-patient-age" placeholder="e.g., 4 years old">
|
|
</div>
|
|
<div class="demo-field">
|
|
<label>Gender</label>
|
|
<select id="enc-patient-gender">
|
|
<option value="">Select</option>
|
|
<option value="Male">Male</option>
|
|
<option value="Female">Female</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="record-controls">
|
|
<button id="enc-record-btn" class="record-btn">
|
|
<i class="fas fa-microphone"></i>
|
|
<span>Start Recording</span>
|
|
</button>
|
|
<div id="enc-recording-indicator" class="recording-indicator hidden">
|
|
<div class="pulse-dot"></div>
|
|
<span>Recording... <span id="enc-timer">00:00</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3><i class="fas fa-file-alt"></i> Transcript</h3>
|
|
<button id="enc-clear-transcript" class="btn-sm btn-ghost">
|
|
<i class="fas fa-eraser"></i> Clear
|
|
</button>
|
|
</div>
|
|
<div id="enc-transcript" class="editable-box" contenteditable="true"
|
|
data-placeholder="Transcript appears here. You can also type or paste directly."></div>
|
|
</div>
|
|
|
|
<button id="enc-generate-btn" class="btn-generate">
|
|
<i class="fas fa-magic"></i> Generate HPI from Encounter
|
|
</button>
|
|
|
|
<div id="enc-output" class="card output-card hidden">
|
|
<div class="card-header output-header">
|
|
<h3><i class="fas fa-file-medical"></i> Generated HPI</h3>
|
|
<div class="output-actions">
|
|
<span id="enc-model-used" class="model-tag"></span>
|
|
<button class="btn-sm btn-primary" onclick="copyText('enc-hpi-text')">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<button class="btn-sm btn-ghost" onclick="speakText('enc-hpi-text')">
|
|
<i class="fas fa-volume-up"></i> Read
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="enc-hpi-text" class="output-text" contenteditable="true"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== TAB 2: VOICE DICTATION ===== -->
|
|
<section id="dictation-tab" class="tab-content">
|
|
<div class="module-header">
|
|
<h2><i class="fas fa-microphone"></i> Physician Voice Dictation → HPI</h2>
|
|
<p>Dictate your clinical narrative. AI restructures it into a polished HPI.</p>
|
|
</div>
|
|
|
|
<div class="demographics-bar">
|
|
<div class="demo-field">
|
|
<label>Patient Age</label>
|
|
<input type="text" id="dict-patient-age" placeholder="e.g., 8 months">
|
|
</div>
|
|
<div class="demo-field">
|
|
<label>Gender</label>
|
|
<select id="dict-patient-gender">
|
|
<option value="">Select</option>
|
|
<option value="Male">Male</option>
|
|
<option value="Female">Female</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="record-controls">
|
|
<button id="dict-record-btn" class="record-btn btn-purple">
|
|
<i class="fas fa-microphone"></i>
|
|
<span>Start Dictation</span>
|
|
</button>
|
|
<div id="dict-recording-indicator" class="recording-indicator hidden">
|
|
<div class="pulse-dot pulse-purple"></div>
|
|
<span>Dictating... <span id="dict-timer">00:00</span></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h3><i class="fas fa-file-alt"></i> Dictation Text</h3>
|
|
<button id="dict-clear-transcript" class="btn-sm btn-ghost">
|
|
<i class="fas fa-eraser"></i> Clear
|
|
</button>
|
|
</div>
|
|
<div id="dict-transcript" class="editable-box" contenteditable="true"
|
|
data-placeholder="Your dictation appears here. You can also type directly."></div>
|
|
</div>
|
|
|
|
<button id="dict-generate-btn" class="btn-generate btn-generate-purple">
|
|
<i class="fas fa-magic"></i> Generate Polished HPI
|
|
</button>
|
|
|
|
<div id="dict-output" class="card output-card hidden">
|
|
<div class="card-header output-header">
|
|
<h3><i class="fas fa-file-medical"></i> Polished HPI</h3>
|
|
<div class="output-actions">
|
|
<span id="dict-model-used" class="model-tag"></span>
|
|
<button class="btn-sm btn-primary" onclick="copyText('dict-hpi-text')">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<button class="btn-sm btn-ghost" onclick="speakText('dict-hpi-text')">
|
|
<i class="fas fa-volume-up"></i> Read
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="dict-hpi-text" class="output-text" contenteditable="true"></div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ===== TAB 3: DEVELOPMENTAL MILESTONES (COMPLETELY SEPARATE) ===== -->
|
|
<section id="milestones-tab" class="tab-content">
|
|
<div class="module-header">
|
|
<h2><i class="fas fa-baby"></i> Developmental Milestones Assessment</h2>
|
|
<p>Based on AAP & Nelson Textbook of Pediatrics. Click to assess. Leave blank = not assessed (omitted from narrative).</p>
|
|
</div>
|
|
|
|
<div class="demographics-bar">
|
|
<div class="demo-field">
|
|
<label>Patient Age</label>
|
|
<input type="text" id="ms-patient-age" placeholder="e.g., 9 months">
|
|
</div>
|
|
<div class="demo-field">
|
|
<label>Gender</label>
|
|
<select id="ms-patient-gender">
|
|
<option value="">Select</option>
|
|
<option value="Male">Male</option>
|
|
<option value="Female">Female</option>
|
|
</select>
|
|
</div>
|
|
<div class="demo-field">
|
|
<label>Milestone Age Group</label>
|
|
<select id="ms-age-group">
|
|
<option value="">-- Select Age Group --</option>
|
|
<option value="2 months">2 Months</option>
|
|
<option value="4 months">4 Months</option>
|
|
<option value="6 months">6 Months</option>
|
|
<option value="9 months">9 Months</option>
|
|
<option value="12 months">12 Months</option>
|
|
<option value="15 months">15 Months</option>
|
|
<option value="18 months">18 Months</option>
|
|
<option value="24 months">2 Years</option>
|
|
<option value="30 months">2.5 Years</option>
|
|
<option value="36 months">3 Years</option>
|
|
<option value="48 months">4 Years</option>
|
|
<option value="60 months">5 Years</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- LEGEND -->
|
|
<div class="legend">
|
|
<div class="legend-item">
|
|
<span class="legend-icon legend-yes">✓</span> Achieved
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-icon legend-no">✗</span> Not Yet Achieved
|
|
</div>
|
|
<div class="legend-item">
|
|
<span class="legend-icon legend-blank">—</span> Not Assessed (omitted)
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CHECKLIST CONTAINER -->
|
|
<div id="milestone-checklist"></div>
|
|
|
|
<!-- ACTIONS -->
|
|
<div class="milestone-actions" id="milestone-actions" style="display:none;">
|
|
<button id="ms-all-yes" class="btn-sm btn-success">
|
|
<i class="fas fa-check-double"></i> All Yes
|
|
</button>
|
|
<button id="ms-all-clear" class="btn-sm btn-ghost">
|
|
<i class="fas fa-eraser"></i> Clear All
|
|
</button>
|
|
<button id="ms-generate-btn" class="btn-generate btn-generate-teal">
|
|
<i class="fas fa-magic"></i> Generate Narrative
|
|
</button>
|
|
</div>
|
|
|
|
<!-- OUTPUT -->
|
|
<!-- OUTPUT -->
|
|
<div id="ms-output" class="card output-card hidden">
|
|
<div class="card-header output-header">
|
|
<h3><i class="fas fa-file-medical"></i> Developmental Assessment Narrative</h3>
|
|
<div class="output-actions">
|
|
<span id="ms-model-used" class="model-tag"></span>
|
|
<button class="btn-sm btn-primary" onclick="copyText('ms-narrative-text')">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<button class="btn-sm btn-ghost" onclick="speakText('ms-narrative-text')">
|
|
<i class="fas fa-volume-up"></i> Read
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="ms-summary-bar" class="summary-bar hidden"></div>
|
|
<div id="ms-narrative-text" class="output-text" contenteditable="true"></div>
|
|
|
|
<!-- 3-SENTENCE SUMMARY SECTION -->
|
|
<div class="summary-section">
|
|
<div class="summary-section-header">
|
|
<button id="ms-quick-summary-btn" class="btn-generate-summary">
|
|
<i class="fas fa-compress-alt"></i> Generate 3-Sentence Summary
|
|
</button>
|
|
</div>
|
|
<div id="ms-quick-summary" class="hidden">
|
|
<div class="card-header summary-output-header">
|
|
<h3><i class="fas fa-clipboard-list"></i> Quick Summary (3 Sentences)</h3>
|
|
<div class="output-actions">
|
|
<span id="ms-summary-model-used" class="model-tag"></span>
|
|
<button class="btn-sm btn-primary" onclick="copyText('ms-summary-text')">
|
|
<i class="fas fa-copy"></i> Copy
|
|
</button>
|
|
<button class="btn-sm btn-ghost" onclick="speakText('ms-summary-text')">
|
|
<i class="fas fa-volume-up"></i> Read
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="ms-summary-text" class="summary-output-text" contenteditable="true"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<!-- LOADING OVERLAY -->
|
|
<div id="loading-overlay" class="loading-overlay hidden">
|
|
<div class="loading-box">
|
|
<div class="spinner"></div>
|
|
<p id="loading-text">Processing...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- TOAST -->
|
|
<div id="toast-container" class="toast-container"></div>
|
|
|
|
<!-- SCRIPTS (order matters) -->
|
|
<script src="/js/milestonesData.js"></script>
|
|
<script src="/js/app.js"></script>
|
|
<script src="/js/liveEncounter.js"></script>
|
|
<script src="/js/voiceDictation.js"></script>
|
|
<script src="/js/milestones.js"></script>
|
|
</body>
|
|
</html>
|