Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ECG Scan Analyzer</title> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div x-data="{ | |
| isDragging: false, | |
| isAnalyzing: false, | |
| fileName: '', | |
| selectedScan: 'ECG', | |
| handleFile(event) { | |
| const file = event.target.files[0]; | |
| if (file) { | |
| this.fileName = file.name; | |
| document.querySelector('form').submit(); | |
| this.isAnalyzing = true; | |
| } | |
| } | |
| }" | |
| class="container mx-auto px-4 py-8 max-w-4xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-12"> | |
| <h1 class="text-4xl font-bold text-gray-800 mb-4">ECG Scan Analyzer</h1> | |
| <p class="text-gray-600 max-w-2xl mx-auto">Upload your ECG scan reports in PDF format and receive an instant professional analysis powered by advanced AI.</p> | |
| </header> | |
| {% if result %} | |
| <!-- Results Section --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-2xl font-semibold text-gray-800">Analysis Results</h2> | |
| <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium"> | |
| {{ result.scan_type }} Scan | |
| </span> | |
| </div> | |
| <div class="bg-gray-50 rounded-lg p-6 mb-6"> | |
| <!-- Render the converted HTML analysis --> | |
| <div class="text-gray-700 whitespace-pre-wrap"> | |
| {{ result.analysis_html | safe }} | |
| </div> | |
| </div> | |
| {% if result.images %} | |
| <div class="mt-6"> | |
| <h3 class="text-lg font-medium text-gray-800 mb-4">Scan Images</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| {% for image in result.images %} | |
| <div class="border rounded-lg p-2"> | |
| <img src="data:image/png;base64,{{ image }}" alt="Scan image" class="w-full h-auto"> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| {% endif %} | |
| <a href="{{ url_for('index') }}" | |
| class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors duration-200 mt-6"> | |
| Analyze Another Report | |
| </a> | |
| </div> | |
| {% else %} | |
| <!-- Upload Section --> | |
| <div class="bg-white rounded-lg shadow-lg p-8" | |
| x-on:dragover.prevent="isDragging = true" | |
| x-on:dragleave.prevent="isDragging = false" | |
| x-on:drop.prevent="isDragging = false; handleFile($event)"> | |
| <form action="{{ url_for('index') }}" method="POST" enctype="multipart/form-data" | |
| class="relative"> | |
| <!-- Scan Type Selection --> | |
| <div class="mb-6"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Select Scan Type</label> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <label class="relative flex cursor-pointer"> | |
| <input type="radio" name="scan_type" value="ECG" class="sr-only" x-model="selectedScan"> | |
| <div class="flex items-center justify-center w-full p-4 border rounded-lg" | |
| :class="{ 'border-blue-500 bg-blue-50': selectedScan === 'ECG', 'border-gray-200': selectedScan !== 'ECG' }"> | |
| <span class="text-sm font-medium" :class="{ 'text-blue-600': selectedScan === 'ECG', 'text-gray-900': selectedScan !== 'ECG' }"> | |
| ECG Scan | |
| </span> | |
| </div> | |
| </label> | |
| <!-- MRI option removed --> | |
| </div> | |
| </div> | |
| <div class="flex flex-col items-center justify-center space-y-6" | |
| :class="{ 'bg-blue-50 border-2 border-dashed border-blue-400': isDragging, | |
| 'border-2 border-dashed border-gray-300': !isDragging }" | |
| class="rounded-lg p-8 transition-all duration-200"> | |
| <div class="text-center" x-show="!isAnalyzing"> | |
| <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48"> | |
| <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4-4m4-4h8m-4-4v8m-12 4h.02" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /> | |
| </svg> | |
| <div class="mt-4"> | |
| <label for="file" class="cursor-pointer"> | |
| <span class="mt-2 block text-sm font-medium text-gray-900"> | |
| Drop your PDF here, or | |
| <span class="text-blue-600 hover:text-blue-500">browse</span> | |
| </span> | |
| </label> | |
| <input type="file" id="file" name="file" accept=".pdf" required | |
| class="hidden" | |
| @change="handleFile($event)"> | |
| <p class="text-xs text-gray-500 mt-2">PDF files only, up to 20MB</p> | |
| </div> | |
| </div> | |
| <!-- Loading State --> | |
| <div x-show="isAnalyzing" class="text-center"> | |
| <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div> | |
| <p class="mt-4 text-sm text-gray-600">Analyzing your <span x-text="selectedScan"></span> report...</p> | |
| </div> | |
| </div> | |
| </form> | |
| <!-- Error Messages --> | |
| <div class="mt-4"> | |
| {% with messages = get_flashed_messages(with_categories=true) %} | |
| {% if messages %} | |
| {% for category, message in messages %} | |
| <div class="rounded-md p-4 {% if category == 'error' %}bg-red-50 text-red-700{% else %}bg-green-50 text-green-700{% endif %}"> | |
| {{ message }} | |
| </div> | |
| {% endfor %} | |
| {% endif %} | |
| {% endwith %} | |
| </div> | |
| </div> | |
| {% endif %} | |
| <!-- Features Section --> | |
| <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3"> | |
| <div class="text-center"> | |
| <div class="rounded-lg bg-blue-50 p-6"> | |
| <svg class="h-8 w-8 text-blue-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/> | |
| </svg> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Instant Analysis</h3> | |
| <p class="mt-2 text-sm text-gray-500">Get quick insights from your medical scans within seconds</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="rounded-lg bg-blue-50 p-6"> | |
| <svg class="h-8 w-8 text-blue-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/> | |
| </svg> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">Secure Processing</h3> | |
| <p class="mt-2 text-sm text-gray-500">Your medical data is processed securely and never stored</p> | |
| </div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="rounded-lg bg-blue-50 p-6"> | |
| <svg class="h-8 w-8 text-blue-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.428 15.428a2 2 0 00-1.022-.547l-2.387-.477a6 6 0 00-3.86.517l-.318.158a6 6 0 01-3.86.517L6.05 15.21a2 2 0 00-1.806.547M8 4h8l-1 1v5.172a2 2 0 00.586 1.414l5 5c1.26 1.26.367 3.414-1.415 3.414H4.828c-1.782 0-2.674-2.154-1.414-3.414l5-5A2 2 0 009 10.172V5L8 4z"/> | |
| </svg> | |
| <h3 class="mt-4 text-lg font-medium text-gray-900">AI-Powered</h3> | |
| <p class="mt-2 text-sm text-gray-500">Advanced AI technology for accurate medical scan analysis</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html> | |