Hugging Face's logo

Spaces:
sikeaditya
/
ECG
Sleeping

App Files Community
sikeaditya commited on
Commit
0e45806
·
verified ·
1 Parent(s): 674c814

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +174 -174
templates/index.html CHANGED
@@ -1,174 +1,174 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="utf-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Medical Scan Analyzer</title>
7
- <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
8
- <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>
9
- </head>
10
- <body class="bg-gray-50 min-h-screen">
11
- <div x-data="{
12
- isDragging: false,
13
- isAnalyzing: false,
14
- fileName: '',
15
- selectedScan: 'ECG',
16
- handleFile(event) {
17
- const file = event.target.files[0];
18
- if (file) {
19
- this.fileName = file.name;
20
- document.querySelector('form').submit();
21
- this.isAnalyzing = true;
22
- }
23
- }
24
- }"
25
- class="container mx-auto px-4 py-8 max-w-4xl">
26
-
27
- <!-- Header -->
28
- <header class="text-center mb-12">
29
- <h1 class="text-4xl font-bold text-gray-800 mb-4">Medical Scan Analyzer</h1>
30
- <p class="text-gray-600 max-w-2xl mx-auto">Upload your medical scan reports in PDF format and receive an instant professional analysis powered by advanced AI.</p>
31
- </header>
32
-
33
- {% if result %}
34
- <!-- Results Section -->
35
- <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
36
- <div class="flex items-center justify-between mb-4">
37
- <h2 class="text-2xl font-semibold text-gray-800">Analysis Results</h2>
38
- <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
39
- {{ result.scan_type }} Scan
40
- </span>
41
- </div>
42
-
43
- <div class="bg-gray-50 rounded-lg p-6 mb-6">
44
- <!-- Render the converted HTML analysis -->
45
- <div class="text-gray-700 whitespace-pre-wrap">
46
- {{ result.analysis_html | safe }}
47
- </div>
48
- </div>
49
-
50
- {% if result.images %}
51
- <div class="mt-6">
52
- <h3 class="text-lg font-medium text-gray-800 mb-4">Scan Images</h3>
53
- <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
54
- {% for image in result.images %}
55
- <div class="border rounded-lg p-2">
56
- <img src="data:image/png;base64,{{ image }}" alt="Scan image" class="w-full h-auto">
57
- </div>
58
- {% endfor %}
59
- </div>
60
- </div>
61
- {% endif %}
62
-
63
-
64
- <a href="{{ url_for('index') }}"
65
- 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">
66
- Analyze Another Report
67
- </a>
68
- </div>
69
- {% else %}
70
- <!-- Upload Section -->
71
- <div class="bg-white rounded-lg shadow-lg p-8"
72
- x-on:dragover.prevent="isDragging = true"
73
- x-on:dragleave.prevent="isDragging = false"
74
- x-on:drop.prevent="isDragging = false; handleFile($event)">
75
-
76
- <form action="{{ url_for('index') }}" method="POST" enctype="multipart/form-data"
77
- class="relative">
78
-
79
- <!-- Scan Type Selection -->
80
- <div class="mb-6">
81
- <label class="block text-sm font-medium text-gray-700 mb-2">Select Scan Type</label>
82
- <div class="grid grid-cols-2 gap-4">
83
- <label class="relative flex cursor-pointer">
84
- <input type="radio" name="scan_type" value="ECG" class="sr-only" x-model="selectedScan">
85
- <div class="flex items-center justify-center w-full p-4 border rounded-lg"
86
- :class="{ 'border-blue-500 bg-blue-50': selectedScan === 'ECG', 'border-gray-200': selectedScan !== 'ECG' }">
87
- <span class="text-sm font-medium" :class="{ 'text-blue-600': selectedScan === 'ECG', 'text-gray-900': selectedScan !== 'ECG' }">
88
- ECG Scan
89
- </span>
90
- </div>
91
- </label>
92
- <!-- MRI option removed -->
93
- </div>
94
- </div>
95
-
96
- <div class="flex flex-col items-center justify-center space-y-6"
97
- :class="{ 'bg-blue-50 border-2 border-dashed border-blue-400': isDragging,
98
- 'border-2 border-dashed border-gray-300': !isDragging }"
99
- class="rounded-lg p-8 transition-all duration-200">
100
-
101
- <div class="text-center" x-show="!isAnalyzing">
102
- <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
103
- <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" />
104
- </svg>
105
- <div class="mt-4">
106
- <label for="file" class="cursor-pointer">
107
- <span class="mt-2 block text-sm font-medium text-gray-900">
108
- Drop your PDF here, or
109
- <span class="text-blue-600 hover:text-blue-500">browse</span>
110
- </span>
111
- </label>
112
- <input type="file" id="file" name="file" accept=".pdf" required
113
- class="hidden"
114
- @change="handleFile($event)">
115
- <p class="text-xs text-gray-500 mt-2">PDF files only, up to 20MB</p>
116
- </div>
117
- </div>
118
-
119
- <!-- Loading State -->
120
- <div x-show="isAnalyzing" class="text-center">
121
- <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
122
- <p class="mt-4 text-sm text-gray-600">Analyzing your <span x-text="selectedScan"></span> report...</p>
123
- </div>
124
- </div>
125
- </form>
126
-
127
- <!-- Error Messages -->
128
- <div class="mt-4">
129
- {% with messages = get_flashed_messages(with_categories=true) %}
130
- {% if messages %}
131
- {% for category, message in messages %}
132
- <div class="rounded-md p-4 {% if category == 'error' %}bg-red-50 text-red-700{% else %}bg-green-50 text-green-700{% endif %}">
133
- {{ message }}
134
- </div>
135
- {% endfor %}
136
- {% endif %}
137
- {% endwith %}
138
- </div>
139
- </div>
140
- {% endif %}
141
-
142
- <!-- Features Section -->
143
- <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
144
- <div class="text-center">
145
- <div class="rounded-lg bg-blue-50 p-6">
146
- <svg class="h-8 w-8 text-blue-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
147
- <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
148
- </svg>
149
- <h3 class="mt-4 text-lg font-medium text-gray-900">Instant Analysis</h3>
150
- <p class="mt-2 text-sm text-gray-500">Get quick insights from your medical scans within seconds</p>
151
- </div>
152
- </div>
153
- <div class="text-center">
154
- <div class="rounded-lg bg-blue-50 p-6">
155
- <svg class="h-8 w-8 text-blue-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
156
- <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"/>
157
- </svg>
158
- <h3 class="mt-4 text-lg font-medium text-gray-900">Secure Processing</h3>
159
- <p class="mt-2 text-sm text-gray-500">Your medical data is processed securely and never stored</p>
160
- </div>
161
- </div>
162
- <div class="text-center">
163
- <div class="rounded-lg bg-blue-50 p-6">
164
- <svg class="h-8 w-8 text-blue-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
165
- <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"/>
166
- </svg>
167
- <h3 class="mt-4 text-lg font-medium text-gray-900">AI-Powered</h3>
168
- <p class="mt-2 text-sm text-gray-500">Advanced AI technology for accurate medical scan analysis</p>
169
- </div>
170
- </div>
171
- </div>
172
- </div>
173
- </body>
174
- </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ECG Scan Analyzer</title>
7
+ <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.3.0/alpine.js"></script>
9
+ </head>
10
+ <body class="bg-gray-50 min-h-screen">
11
+ <div x-data="{
12
+ isDragging: false,
13
+ isAnalyzing: false,
14
+ fileName: '',
15
+ selectedScan: 'ECG',
16
+ handleFile(event) {
17
+ const file = event.target.files[0];
18
+ if (file) {
19
+ this.fileName = file.name;
20
+ document.querySelector('form').submit();
21
+ this.isAnalyzing = true;
22
+ }
23
+ }
24
+ }"
25
+ class="container mx-auto px-4 py-8 max-w-4xl">
26
+
27
+ <!-- Header -->
28
+ <header class="text-center mb-12">
29
+ <h1 class="text-4xl font-bold text-gray-800 mb-4">ECG Scan Analyzer</h1>
30
+ <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>
31
+ </header>
32
+
33
+ {% if result %}
34
+ <!-- Results Section -->
35
+ <div class="bg-white rounded-lg shadow-lg p-6 mb-8">
36
+ <div class="flex items-center justify-between mb-4">
37
+ <h2 class="text-2xl font-semibold text-gray-800">Analysis Results</h2>
38
+ <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm font-medium">
39
+ {{ result.scan_type }} Scan
40
+ </span>
41
+ </div>
42
+
43
+ <div class="bg-gray-50 rounded-lg p-6 mb-6">
44
+ <!-- Render the converted HTML analysis -->
45
+ <div class="text-gray-700 whitespace-pre-wrap">
46
+ {{ result.analysis_html | safe }}
47
+ </div>
48
+ </div>
49
+
50
+ {% if result.images %}
51
+ <div class="mt-6">
52
+ <h3 class="text-lg font-medium text-gray-800 mb-4">Scan Images</h3>
53
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
54
+ {% for image in result.images %}
55
+ <div class="border rounded-lg p-2">
56
+ <img src="data:image/png;base64,{{ image }}" alt="Scan image" class="w-full h-auto">
57
+ </div>
58
+ {% endfor %}
59
+ </div>
60
+ </div>
61
+ {% endif %}
62
+
63
+
64
+ <a href="{{ url_for('index') }}"
65
+ 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">
66
+ Analyze Another Report
67
+ </a>
68
+ </div>
69
+ {% else %}
70
+ <!-- Upload Section -->
71
+ <div class="bg-white rounded-lg shadow-lg p-8"
72
+ x-on:dragover.prevent="isDragging = true"
73
+ x-on:dragleave.prevent="isDragging = false"
74
+ x-on:drop.prevent="isDragging = false; handleFile($event)">
75
+
76
+ <form action="{{ url_for('index') }}" method="POST" enctype="multipart/form-data"
77
+ class="relative">
78
+
79
+ <!-- Scan Type Selection -->
80
+ <div class="mb-6">
81
+ <label class="block text-sm font-medium text-gray-700 mb-2">Select Scan Type</label>
82
+ <div class="grid grid-cols-2 gap-4">
83
+ <label class="relative flex cursor-pointer">
84
+ <input type="radio" name="scan_type" value="ECG" class="sr-only" x-model="selectedScan">
85
+ <div class="flex items-center justify-center w-full p-4 border rounded-lg"
86
+ :class="{ 'border-blue-500 bg-blue-50': selectedScan === 'ECG', 'border-gray-200': selectedScan !== 'ECG' }">
87
+ <span class="text-sm font-medium" :class="{ 'text-blue-600': selectedScan === 'ECG', 'text-gray-900': selectedScan !== 'ECG' }">
88
+ ECG Scan
89
+ </span>
90
+ </div>
91
+ </label>
92
+ <!-- MRI option removed -->
93
+ </div>
94
+ </div>
95
+
96
+ <div class="flex flex-col items-center justify-center space-y-6"
97
+ :class="{ 'bg-blue-50 border-2 border-dashed border-blue-400': isDragging,
98
+ 'border-2 border-dashed border-gray-300': !isDragging }"
99
+ class="rounded-lg p-8 transition-all duration-200">
100
+
101
+ <div class="text-center" x-show="!isAnalyzing">
102
+ <svg class="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
103
+ <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" />
104
+ </svg>
105
+ <div class="mt-4">
106
+ <label for="file" class="cursor-pointer">
107
+ <span class="mt-2 block text-sm font-medium text-gray-900">
108
+ Drop your PDF here, or
109
+ <span class="text-blue-600 hover:text-blue-500">browse</span>
110
+ </span>
111
+ </label>
112
+ <input type="file" id="file" name="file" accept=".pdf" required
113
+ class="hidden"
114
+ @change="handleFile($event)">
115
+ <p class="text-xs text-gray-500 mt-2">PDF files only, up to 20MB</p>
116
+ </div>
117
+ </div>
118
+
119
+ <!-- Loading State -->
120
+ <div x-show="isAnalyzing" class="text-center">
121
+ <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
122
+ <p class="mt-4 text-sm text-gray-600">Analyzing your <span x-text="selectedScan"></span> report...</p>
123
+ </div>
124
+ </div>
125
+ </form>
126
+
127
+ <!-- Error Messages -->
128
+ <div class="mt-4">
129
+ {% with messages = get_flashed_messages(with_categories=true) %}
130
+ {% if messages %}
131
+ {% for category, message in messages %}
132
+ <div class="rounded-md p-4 {% if category == 'error' %}bg-red-50 text-red-700{% else %}bg-green-50 text-green-700{% endif %}">
133
+ {{ message }}
134
+ </div>
135
+ {% endfor %}
136
+ {% endif %}
137
+ {% endwith %}
138
+ </div>
139
+ </div>
140
+ {% endif %}
141
+
142
+ <!-- Features Section -->
143
+ <div class="mt-12 grid grid-cols-1 gap-8 md:grid-cols-3">
144
+ <div class="text-center">
145
+ <div class="rounded-lg bg-blue-50 p-6">
146
+ <svg class="h-8 w-8 text-blue-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
147
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
148
+ </svg>
149
+ <h3 class="mt-4 text-lg font-medium text-gray-900">Instant Analysis</h3>
150
+ <p class="mt-2 text-sm text-gray-500">Get quick insights from your medical scans within seconds</p>
151
+ </div>
152
+ </div>
153
+ <div class="text-center">
154
+ <div class="rounded-lg bg-blue-50 p-6">
155
+ <svg class="h-8 w-8 text-blue-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
156
+ <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"/>
157
+ </svg>
158
+ <h3 class="mt-4 text-lg font-medium text-gray-900">Secure Processing</h3>
159
+ <p class="mt-2 text-sm text-gray-500">Your medical data is processed securely and never stored</p>
160
+ </div>
161
+ </div>
162
+ <div class="text-center">
163
+ <div class="rounded-lg bg-blue-50 p-6">
164
+ <svg class="h-8 w-8 text-blue-600 mx-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24">
165
+ <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"/>
166
+ </svg>
167
+ <h3 class="mt-4 text-lg font-medium text-gray-900">AI-Powered</h3>
168
+ <p class="mt-2 text-sm text-gray-500">Advanced AI technology for accurate medical scan analysis</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </body>
174
+ </html>