Spaces:
Running
Running
| <!-- templates/index.html --> | |
| <html> | |
| <head> | |
| <title>Human Notes Evaluator</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <style> | |
| .upload-container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| text-align: center; | |
| } | |
| .upload-form { | |
| background-color: #f9f9f9; | |
| padding: 25px; | |
| border-radius: 8px; | |
| border: 1px solid #eee; | |
| margin-top: 30px; | |
| } | |
| .file-input-wrapper { | |
| margin: 20px 0; | |
| padding: 20px; | |
| border: 2px dashed #ccc; | |
| border-radius: 5px; | |
| text-align: center; | |
| transition: all 0.3s; | |
| } | |
| .file-input-wrapper:hover { | |
| border-color: #3498db; | |
| } | |
| .file-input-wrapper input[type="file"] { | |
| display: block; | |
| width: 100%; | |
| margin-top: 10px; | |
| } | |
| .steps-container { | |
| margin-bottom: 30px; | |
| text-align: left; | |
| } | |
| .step { | |
| margin-bottom: 15px; | |
| display: flex; | |
| align-items: flex-start; | |
| } | |
| .step-number { | |
| display: inline-block; | |
| width: 25px; | |
| height: 25px; | |
| background-color: #3498db; | |
| color: white; | |
| border-radius: 50%; | |
| text-align: center; | |
| line-height: 25px; | |
| margin-right: 10px; | |
| flex-shrink: 0; | |
| } | |
| .step-content { | |
| flex-grow: 1; | |
| } | |
| .submit-container { | |
| margin-top: 30px; | |
| } | |
| .preview-info { | |
| text-align: left; | |
| margin-top: 15px; | |
| font-size: 14px; | |
| color: #666; | |
| } | |
| .preview-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| margin-top: 10px; | |
| font-size: 14px; | |
| } | |
| .preview-table th, .preview-table td { | |
| border: 1px solid #ddd; | |
| padding: 8px; | |
| text-align: left; | |
| } | |
| .preview-table th { | |
| background-color: #f2f2f2; | |
| } | |
| .debug-link { | |
| margin-top: 20px; | |
| text-align: center; | |
| font-size: 12px; | |
| } | |
| .debug-link a { | |
| color: #999; | |
| text-decoration: none; | |
| } | |
| .debug-link a:hover { | |
| text-decoration: underline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="header"> | |
| <h1>Human Notes Evaluator</h1> | |
| <div class="header-links"> | |
| <a href="{{ url_for('view_instructions') }}" class="instructions-btn">Instructions</a> | |
| <a href="{{ url_for('results') }}" class="results-btn">View Results</a> | |
| </div> | |
| </div> | |
| <div class="upload-container"> | |
| <h2>Welcome to the Human Notes Evaluator</h2> | |
| <p>This application allows you to evaluate clinical notes based on several quality criteria.</p> | |
| <div class="steps-container"> | |
| <h3>Getting Started</h3> | |
| <div class="step"> | |
| <span class="step-number">1</span> | |
| <div class="step-content"> | |
| <strong>Prepare your documents file</strong> | |
| <p>Create a CSV file with columns for filename, description, MRN, and note content as shown in the example below.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <span class="step-number">2</span> | |
| <div class="step-content"> | |
| <strong>Enter your name</strong> | |
| <p>Provide your name as the evaluator so we can track who completed each evaluation.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <span class="step-number">3</span> | |
| <div class="step-content"> | |
| <strong>Upload your documents file</strong> | |
| <p>Select and upload your CSV file containing the clinical notes to evaluate.</p> | |
| </div> | |
| </div> | |
| <div class="step"> | |
| <span class="step-number">4</span> | |
| <div class="step-content"> | |
| <strong>Start evaluating</strong> | |
| <p>After uploading, you'll be presented with clinical notes to evaluate one by one.</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="sample-table-container" style="margin: 30px 0; overflow-x: auto;"> | |
| <h3>Sample CSV Format</h3> | |
| <p>Your CSV file should follow this format with these exact column names:</p> | |
| <table class="preview-table" style="width: 100%; border-collapse: collapse; margin-top: 15px;"> | |
| <thead> | |
| <tr> | |
| <th>filename</th> | |
| <th>description</th> | |
| <th>mrn</th> | |
| <th>note</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>progress_note_1.txt</td> | |
| <td>Primary Care Follow-up Visit</td> | |
| <td>MRN12345678</td> | |
| <td>Patient is a 57-year-old male with history of hypertension, type 2 diabetes, and hyperlipidemia presenting for routine follow-up. BP today is 138/82, weight stable at 87kg...</td> | |
| </tr> | |
| <tr> | |
| <td>ed_visit_note.txt</td> | |
| <td>Emergency Department Visit</td> | |
| <td>MRN87654321</td> | |
| <td>45-year-old female with no significant past medical history presents with sudden onset substernal chest pain that started 2 hours ago while at rest...</td> | |
| </tr> | |
| <tr> | |
| <td>discharge_summary.txt</td> | |
| <td>Hospital Discharge Summary</td> | |
| <td>MRN23456789</td> | |
| <td>72-year-old male with COPD admitted for community-acquired pneumonia. Patient presented with 4 days of productive cough, fever, and worsening shortness of breath...</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| <p style="margin-top: 15px; font-style: italic; color: #666;">Note: Ensure your CSV has these exact column names. You can add as many rows (documents) as needed for evaluation.</p> | |
| </div> | |
| <div class="upload-form"> | |
| <h3>Upload Documents and Begin Evaluation</h3> | |
| <form method="POST" enctype="multipart/form-data" action="{{ url_for('index') }}"> | |
| <div class="form-group"> | |
| <label for="evaluator_name">Your Name (as Evaluator):</label> | |
| <input type="text" id="evaluator_name" name="evaluator_name" required> | |
| </div> | |
| <div class="file-input-wrapper"> | |
| <label for="file">Select CSV file with documents to evaluate:</label> | |
| <input type="file" id="file" name="file" accept=".csv" required> | |
| </div> | |
| <div class="submit-container"> | |
| <button type="submit" class="submit-btn">Upload & Begin Evaluation</button> | |
| </div> | |
| </form> | |
| <div style="margin-top: 20px; padding: 15px; background-color: #fff3cd; border-radius: 5px; border: 1px solid #ffeaa7;"> | |
| <strong>Having upload issues?</strong> Try the <a href="{{ url_for('upload_documents') }}" style="color: #856404; text-decoration: underline;">alternative upload method</a> if you're experiencing permission errors. | |
| </div> | |
| </div> | |
| {% if session.get('evaluator_name') %} | |
| <div style="margin-top: 20px;"> | |
| <form method="POST" action="{{ url_for('reset') }}"> | |
| <button type="submit" class="logout-btn">Reset & Start New Evaluation</button> | |
| </form> | |
| </div> | |
| {% endif %} | |
| <div class="debug-link"> | |
| <a href="{{ url_for('debug') }}">Debug Information</a> | |
| </div> | |
| </div> | |
| {% with messages = get_flashed_messages() %} | |
| {% if messages %} | |
| {% for message in messages %} | |
| <div class="alert">{{ message }}</div> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| <div class="fallback-links" style="margin-top: 20px; padding: 15px; background-color: #f8f9fa; border-radius: 8px;"> | |
| <h3>Direct Access to Evaluation</h3> | |
| <p>You can access the evaluation page directly by entering your name and clicking the button below:</p> | |
| <div style="margin-top: 15px;"> | |
| <form action="{{ url_for('evaluate') }}" method="GET"> | |
| <div style="display: flex; gap: 10px; margin-bottom: 15px;"> | |
| <input type="text" name="evaluator" placeholder="Your Name" required style="flex: 1; padding: 8px;"> | |
| <button type="submit" class="submit-btn">Start Evaluation</button> | |
| </div> | |
| </form> | |
| </div> | |
| <p><strong>Note:</strong> If you're having trouble with the file upload method, this direct access approach may work better.</p> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |