Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>EMR - Medical AI Assistant</title> | |
| <link rel="icon" type="image/svg+xml" href="/static/icon.svg"> | |
| <link rel="stylesheet" href="/static/css/styles.css"> | |
| <link rel="stylesheet" href="/static/css/emr.css"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="emr-container"> | |
| <!-- Header --> | |
| <div class="emr-header"> | |
| <div class="emr-header-content"> | |
| <div class="emr-title"> | |
| <i class="fas fa-file-medical"></i> | |
| <h1>Electronic Medical Records</h1> | |
| </div> | |
| <div class="emr-actions"> | |
| <button class="btn btn-secondary" id="refreshBtn"> | |
| <i class="fas fa-sync-alt"></i> | |
| Refresh | |
| </button> | |
| <button class="btn btn-primary" id="searchBtn"> | |
| <i class="fas fa-search"></i> | |
| Search | |
| </button> | |
| <a href="/static/index.html" class="btn btn-outline"> | |
| <i class="fas fa-arrow-left"></i> | |
| Back to Chat | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Patient Info Bar --> | |
| <div class="patient-info-bar" id="patientInfoBar" style="display: none;"> | |
| <div class="patient-info"> | |
| <div class="patient-avatar"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <div class="patient-details"> | |
| <h3 id="patientName">Patient Name</h3> | |
| <p id="patientDetails">Age: -- | Sex: -- | ID: --</p> | |
| </div> | |
| </div> | |
| <div class="patient-stats" id="patientStats"> | |
| <!-- Stats will be populated here --> | |
| </div> | |
| </div> | |
| <!-- File Upload Section --> | |
| <div class="emr-upload-section"> | |
| <div class="upload-container"> | |
| <div class="upload-header"> | |
| <h3><i class="fas fa-upload"></i> Upload Medical Document</h3> | |
| <p>Upload PDF, image, or document files to extract medical information</p> | |
| </div> | |
| <div class="upload-area" id="uploadArea"> | |
| <div class="upload-content"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <h4>Drop files here or click to browse</h4> | |
| <p>Supported formats: PDF, DOC, DOCX, JPG, PNG, TIFF</p> | |
| <input type="file" id="fileInput" accept=".pdf,.doc,.docx,.jpg,.jpeg,.png,.tiff" multiple style="display: none;"> | |
| <button class="btn btn-primary" id="uploadBtn"> | |
| <i class="fas fa-folder-open"></i> | |
| Choose Files | |
| </button> | |
| </div> | |
| </div> | |
| <div class="upload-progress" id="uploadProgress" style="display: none;"> | |
| <div class="progress-bar"> | |
| <div class="progress-fill" id="progressFill"></div> | |
| </div> | |
| <span class="progress-text" id="progressText">Uploading...</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search and Filters --> | |
| <div class="emr-controls"> | |
| <div class="search-container"> | |
| <input type="text" id="searchInput" placeholder="Search EMR entries..." class="search-input"> | |
| <button class="search-btn" id="searchButton"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <div class="filter-container"> | |
| <select id="dateFilter" class="filter-select"> | |
| <option value="all">All Time</option> | |
| <option value="today">Today</option> | |
| <option value="week">This Week</option> | |
| <option value="month">This Month</option> | |
| </select> | |
| <select id="typeFilter" class="filter-select"> | |
| <option value="all">All Types</option> | |
| <option value="diagnosis">Diagnosis</option> | |
| <option value="medication">Medication</option> | |
| <option value="vitals">Vital Signs</option> | |
| <option value="lab">Lab Results</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- EMR Content Tabs --> | |
| <div class="emr-content"> | |
| <div class="emr-tabs"> | |
| <button class="tab-btn active" data-tab="overview">Overview</button> | |
| <button class="tab-btn" data-tab="diagnosis">Diagnoses</button> | |
| <button class="tab-btn" data-tab="medications">Medications</button> | |
| <button class="tab-btn" data-tab="vitals">Vital Signs</button> | |
| <button class="tab-btn" data-tab="lab">Lab Results</button> | |
| <button class="tab-btn" data-tab="procedures">Procedures</button> | |
| </div> | |
| <!-- Overview Tab --> | |
| <div class="tab-content active" id="overview-tab"> | |
| <div class="emr-table-container"> | |
| <table class="emr-table" id="emrTable"> | |
| <thead> | |
| <tr> | |
| <th>Date & Time</th> | |
| <th>Type</th> | |
| <th>Diagnosis</th> | |
| <th>Medications</th> | |
| <th>Vital Signs</th> | |
| <th>Confidence</th> | |
| <th>Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody id="emrTableBody"> | |
| <!-- EMR entries will be populated here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <!-- Diagnosis Tab --> | |
| <div class="tab-content" id="diagnosis-tab"> | |
| <div class="emr-section"> | |
| <h3>Diagnosis History</h3> | |
| <div class="diagnosis-timeline" id="diagnosisTimeline"> | |
| <!-- Diagnosis entries will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Medications Tab --> | |
| <div class="tab-content" id="medications-tab"> | |
| <div class="emr-section"> | |
| <h3>Medication History</h3> | |
| <div class="medications-grid" id="medicationsGrid"> | |
| <!-- Medication entries will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Vital Signs Tab --> | |
| <div class="tab-content" id="vitals-tab"> | |
| <div class="emr-section"> | |
| <h3>Vital Signs Trends</h3> | |
| <div class="vitals-chart-container"> | |
| <canvas id="vitalsChart" width="800" height="400"></canvas> | |
| </div> | |
| <div class="vitals-table-container"> | |
| <table class="vitals-table" id="vitalsTable"> | |
| <thead> | |
| <tr> | |
| <th>Date</th> | |
| <th>Blood Pressure</th> | |
| <th>Heart Rate</th> | |
| <th>Temperature</th> | |
| <th>Respiratory Rate</th> | |
| <th>Oxygen Saturation</th> | |
| </tr> | |
| </thead> | |
| <tbody id="vitalsTableBody"> | |
| <!-- Vital signs entries will be populated here --> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Lab Results Tab --> | |
| <div class="tab-content" id="lab-tab"> | |
| <div class="emr-section"> | |
| <h3>Laboratory Results</h3> | |
| <div class="lab-results-container" id="labResultsContainer"> | |
| <!-- Lab results will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Procedures Tab --> | |
| <div class="tab-content" id="procedures-tab"> | |
| <div class="emr-section"> | |
| <h3>Medical Procedures</h3> | |
| <div class="procedures-timeline" id="proceduresTimeline"> | |
| <!-- Procedure entries will be populated here --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading State --> | |
| <div class="loading-state" id="loadingState" style="display: none;"> | |
| <div class="loading-spinner"> | |
| <i class="fas fa-spinner fa-spin"></i> | |
| </div> | |
| <p>Loading EMR data...</p> | |
| </div> | |
| <!-- Empty State --> | |
| <div class="empty-state" id="emptyState" style="display: none;"> | |
| <div class="empty-icon"> | |
| <i class="fas fa-file-medical"></i> | |
| </div> | |
| <h3>No EMR Data Found</h3> | |
| <p>No medical records found for this patient. EMR data will appear here when you extract information from chat messages.</p> | |
| <a href="/static/index.html" class="btn btn-primary"> | |
| <i class="fas fa-comments"></i> | |
| Go to Chat | |
| </a> | |
| </div> | |
| </div> | |
| <!-- EMR Detail Modal --> | |
| <div class="modal" id="emrDetailModal"> | |
| <div class="modal-content emr-detail-modal"> | |
| <div class="modal-header"> | |
| <h3>EMR Entry Details</h3> | |
| <button class="modal-close" id="emrDetailModalClose">×</button> | |
| </div> | |
| <div class="modal-body" id="emrDetailContent"> | |
| <!-- EMR details will be populated here --> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-secondary" id="emrDetailModalCancel">Close</button> | |
| <button class="btn btn-danger" id="deleteEmrBtn" style="display: none;">Delete Entry</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Search Modal --> | |
| <div class="modal" id="searchModal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h3>Advanced Search</h3> | |
| <button class="modal-close" id="searchModalClose">×</button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="form-group"> | |
| <label for="semanticSearchInput">Search by meaning (semantic search):</label> | |
| <input type="text" id="semanticSearchInput" placeholder="e.g., 'chest pain treatment' or 'diabetes medication'"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exactSearchInput">Search by exact text:</label> | |
| <input type="text" id="exactSearchInput" placeholder="e.g., 'hypertension' or 'metformin'"> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-secondary" id="searchModalCancel">Cancel</button> | |
| <button class="btn btn-primary" id="performSearchBtn">Search</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Document Analysis Preview Modal --> | |
| <div class="modal" id="documentPreviewModal"> | |
| <div class="modal-content document-preview-modal"> | |
| <div class="modal-header"> | |
| <h3><i class="fas fa-file-medical"></i> Document Analysis Preview</h3> | |
| <button class="modal-close" id="documentPreviewModalClose">×</button> | |
| </div> | |
| <div class="modal-body" id="documentPreviewContent"> | |
| <!-- Document analysis results will be populated here --> | |
| </div> | |
| <div class="modal-footer"> | |
| <button class="btn btn-secondary" id="documentPreviewCancel">Cancel</button> | |
| <button class="btn btn-primary" id="saveDocumentAnalysis">Save to EMR</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/js/emr.js"></script> | |
| </body> | |
| </html> |