Hugging Face's logo

Spaces:
yassonee
/
knoch
Sleeping

App Files
yassonee commited on
Commit
b7174bc
·
verified ·
1 Parent(s): 3ff8e0e

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +103 -28
app.py CHANGED
@@ -105,6 +105,14 @@ COMMON_STYLES = """
105
  .button {
106
  background: #0066cc !important;
107
  }
 
 
 
 
 
 
 
 
108
  }
109
 
110
  body {
@@ -113,6 +121,7 @@ COMMON_STYLES = """
113
  margin: 0;
114
  padding: 20px;
115
  color: #1a1a1a;
 
116
  }
117
 
118
  /* Scrollbar personnalisée */
@@ -162,35 +171,62 @@ COMMON_STYLES = """
162
  background: #0052a3;
163
  }
164
 
165
- .button:active {
166
- transform: scale(0.98);
167
- }
168
-
169
- /* Animation de chargement */
170
- @keyframes loading {
171
- 0% { transform: translateX(-100%); }
172
- 50% { transform: translateX(100%); }
173
- 100% { transform: translateX(-100%); }
174
  }
175
 
176
- .button:before {
177
  content: '';
178
  position: absolute;
 
 
 
 
 
 
 
 
 
 
 
179
  top: 0;
180
  left: 0;
181
  width: 100%;
182
  height: 100%;
183
- background: linear-gradient(
184
- 90deg,
185
- transparent,
186
- rgba(255, 255, 255, 0.2),
187
- transparent
188
- );
189
- transform: translateX(-100%);
190
  }
191
 
192
- .button:active:before {
193
- animation: loading 1.5s infinite;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
194
  }
195
  """
196
 
@@ -201,6 +237,7 @@ async def main():
201
  <html>
202
  <head>
203
  <title>Fraktur Detektion</title>
 
204
  <style>
205
  {COMMON_STYLES}
206
 
@@ -250,6 +287,7 @@ async def main():
250
  background: #e9ecef;
251
  outline: none;
252
  transition: all 0.3s ease;
 
253
  }}
254
 
255
  input[type="range"]::-webkit-slider-thumb {{
@@ -260,11 +298,22 @@ async def main():
260
  background: #0066cc;
261
  cursor: pointer;
262
  transition: all 0.3s ease;
 
263
  }}
264
 
265
  input[type="range"]::-webkit-slider-thumb:hover {{
266
  transform: scale(1.1);
267
  }}
 
 
 
 
 
 
 
 
 
 
268
  </style>
269
  </head>
270
  <body>
@@ -312,6 +361,7 @@ async def analyze_file(file: UploadFile = File(...)):
312
  <html>
313
  <head>
314
  <title>Ergebnisse</title>
 
315
  <style>
316
  {COMMON_STYLES}
317
 
@@ -349,6 +399,7 @@ async def analyze_file(file: UploadFile = File(...)):
349
  .back-button {{
350
  display: inline-block;
351
  text-decoration: none;
 
352
  }}
353
 
354
  img {{
@@ -358,11 +409,6 @@ async def analyze_file(file: UploadFile = File(...)):
358
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
359
  object-fit: contain;
360
  cursor: pointer;
361
- transition: all 0.3s ease;
362
- }}
363
-
364
- img:hover {{
365
- transform: scale(1.02);
366
  }}
367
 
368
  h3 {{
@@ -375,6 +421,12 @@ async def analyze_file(file: UploadFile = File(...)):
375
  color: #66b3ff;
376
  }}
377
  }}
 
 
 
 
 
 
378
  </style>
379
  </head>
380
  <body>
@@ -396,7 +448,7 @@ async def analyze_file(file: UploadFile = File(...)):
396
  results_html += "</div>"
397
 
398
  # RöntgenMeister results
399
- results_html += "<div class='result-box'><h3>RöntgenMeister</h3>"
400
  for pred in predictions_master:
401
  confidence_class = "score-high" if pred['score'] > 0.7 else "score-medium"
402
  results_html += f"""
@@ -407,10 +459,19 @@ async def analyze_file(file: UploadFile = File(...)):
407
  """
408
  results_html += "</div></div>"
409
 
 
410
  results_html += f"""
411
  <div class='result-box'>
412
  <h3>Fraktur Lokalisation</h3>
413
- <img src="{result_image_b64}" alt="Analyzed image">
 
 
 
 
 
 
 
 
414
  </div>
415
  </div>
416
 
@@ -428,17 +489,31 @@ async def analyze_file(file: UploadFile = File(...)):
428
  <html>
429
  <head>
430
  <title>Fehler</title>
 
431
  <style>
432
  {COMMON_STYLES}
 
 
 
 
 
 
 
 
 
 
 
 
 
433
  </style>
434
  </head>
435
  <body>
436
  <div class="container">
437
- <div class="result-box">
438
  <h3>Fehler</h3>
439
  <p>{str(e)}</p>
440
- <a href="/" class="button back-button">← Zurück</a>
441
  </div>
 
442
  </div>
443
  </body>
444
  </html>
 
105
  .button {
106
  background: #0066cc !important;
107
  }
108
+ input[type="file"]::file-selector-button {
109
+ background: #444 !important;
110
+ color: #fff !important;
111
+ border-color: #555 !important;
112
+ }
113
+ input[type="range"] {
114
+ background: #444 !important;
115
+ }
116
  }
117
 
118
  body {
 
121
  margin: 0;
122
  padding: 20px;
123
  color: #1a1a1a;
124
+ min-height: 100vh;
125
  }
126
 
127
  /* Scrollbar personnalisée */
 
171
  background: #0052a3;
172
  }
173
 
174
+ /* Barre de progression */
175
+ @keyframes progress {
176
+ 0% { width: 0; }
177
+ 50% { width: 60%; }
178
+ 100% { width: 100%; }
 
 
 
 
179
  }
180
 
181
+ form:active .button::after {
182
  content: '';
183
  position: absolute;
184
+ bottom: 0;
185
+ left: 0;
186
+ height: 4px;
187
+ background: #ffffff;
188
+ animation: progress 2s ease-in-out infinite;
189
+ }
190
+
191
+ /* Modal pour image */
192
+ .modal {
193
+ display: none;
194
+ position: fixed;
195
  top: 0;
196
  left: 0;
197
  width: 100%;
198
  height: 100%;
199
+ background: rgba(0, 0, 0, 0.9);
200
+ z-index: 1000;
201
+ backdrop-filter: blur(5px);
 
 
 
 
202
  }
203
 
204
+ .modal img {
205
+ max-width: 90%;
206
+ max-height: 90vh;
207
+ margin: auto;
208
+ position: absolute;
209
+ top: 50%;
210
+ left: 50%;
211
+ transform: translate(-50%, -50%);
212
+ border-radius: 8px;
213
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
214
+ }
215
+
216
+ input[type="checkbox"] {
217
+ display: none;
218
+ }
219
+
220
+ input[type="checkbox"]:checked + .modal {
221
+ display: block;
222
+ }
223
+
224
+ .result-box img {
225
+ transition: transform 0.3s ease;
226
+ }
227
+
228
+ .result-box img:hover {
229
+ transform: scale(1.02);
230
  }
231
  """
232
 
 
237
  <html>
238
  <head>
239
  <title>Fraktur Detektion</title>
240
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
241
  <style>
242
  {COMMON_STYLES}
243
 
 
287
  background: #e9ecef;
288
  outline: none;
289
  transition: all 0.3s ease;
290
+ -webkit-appearance: none;
291
  }}
292
 
293
  input[type="range"]::-webkit-slider-thumb {{
 
298
  background: #0066cc;
299
  cursor: pointer;
300
  transition: all 0.3s ease;
301
+ border: none;
302
  }}
303
 
304
  input[type="range"]::-webkit-slider-thumb:hover {{
305
  transform: scale(1.1);
306
  }}
307
+
308
+ @media (max-width: 640px) {{
309
+ .upload-section {{
310
+ padding: 20px;
311
+ }}
312
+
313
+ input[type="file"] {{
314
+ width: 100%;
315
+ }}
316
+ }}
317
  </style>
318
  </head>
319
  <body>
 
361
  <html>
362
  <head>
363
  <title>Ergebnisse</title>
364
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
365
  <style>
366
  {COMMON_STYLES}
367
 
 
399
  .back-button {{
400
  display: inline-block;
401
  text-decoration: none;
402
+ margin-top: 20px;
403
  }}
404
 
405
  img {{
 
409
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
410
  object-fit: contain;
411
  cursor: pointer;
 
 
 
 
 
412
  }}
413
 
414
  h3 {{
 
421
  color: #66b3ff;
422
  }}
423
  }}
424
+
425
+ @media (max-width: 768px) {{
426
+ .results-grid {{
427
+ grid-template-columns: 1fr;
428
+ }}
429
+ }}
430
  </style>
431
  </head>
432
  <body>
 
448
  results_html += "</div>"
449
 
450
  # RöntgenMeister results
451
+ results_html += "<div class='result-box'><h3>RöntgenMeister</h3>"
452
  for pred in predictions_master:
453
  confidence_class = "score-high" if pred['score'] > 0.7 else "score-medium"
454
  results_html += f"""
 
459
  """
460
  results_html += "</div></div>"
461
 
462
+ # Image result avec modal
463
  results_html += f"""
464
  <div class='result-box'>
465
  <h3>Fraktur Lokalisation</h3>
466
+ <label for="zoom-image" style="cursor: pointer; display: block;">
467
+ <img src="{result_image_b64}" alt="Analyzed image">
468
+ </label>
469
+ <input type="checkbox" id="zoom-image">
470
+ <div class="modal">
471
+ <label for="zoom-image" style="cursor: pointer; display: block; width: 100%; height: 100%;">
472
+ <img src="{result_image_b64}" alt="Analyzed image">
473
+ </label>
474
+ </div>
475
  </div>
476
  </div>
477
 
 
489
  <html>
490
  <head>
491
  <title>Fehler</title>
492
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
493
  <style>
494
  {COMMON_STYLES}
495
+ .error-box {{
496
+ background: #fee2e2;
497
+ border: 1px solid #ef4444;
498
+ padding: 20px;
499
+ border-radius: 8px;
500
+ margin: 20px 0;
501
+ }}
502
+ @media (prefers-color-scheme: dark) {{
503
+ .error-box {{
504
+ background: #471818;
505
+ border-color: #dc2626;
506
+ }}
507
+ }}
508
  </style>
509
  </head>
510
  <body>
511
  <div class="container">
512
+ <div class="error-box">
513
  <h3>Fehler</h3>
514
  <p>{str(e)}</p>
 
515
  </div>
516
+ <a href="/" class="button back-button">← Zurück</a>
517
  </div>
518
  </body>
519
  </html>