Hugging Face's logo

Spaces:
yassonee
/
knoch
Running

App Files
yassonee commited on
Commit
aa2e94a
·
verified ·
1 Parent(s): 598fca6

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +31 -88
app.py CHANGED
@@ -113,6 +113,9 @@ COMMON_STYLES = """
113
  input[type="range"] {
114
  background: #444 !important;
115
  }
 
 
 
116
  }
117
 
118
  body {
@@ -121,7 +124,6 @@ COMMON_STYLES = """
121
  margin: 0;
122
  padding: 20px;
123
  color: #1a1a1a;
124
- min-height: 100vh;
125
  }
126
 
127
  /* Scrollbar personnalisée */
@@ -162,71 +164,41 @@ COMMON_STYLES = """
162
  border-radius: 8px;
163
  cursor: pointer;
164
  font-size: 1.1em;
165
- position: relative;
166
- overflow: hidden;
167
  transition: all 0.3s ease;
 
168
  }
169
 
170
  .button:hover {
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
 
@@ -297,23 +269,8 @@ async def main():
297
  border-radius: 50%;
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>
@@ -329,7 +286,10 @@ async def main():
329
  min="0" max="1" step="0.05" value="0.60"
330
  oninput="document.getElementById('thresholdValue').textContent = parseFloat(this.value).toFixed(2)">
331
  </div>
332
- <button type="submit" class="button">Analysieren</button>
 
 
 
333
  </form>
334
  </div>
335
  </div>
@@ -378,12 +338,6 @@ async def analyze_file(file: UploadFile = File(...)):
378
  border-radius: 12px;
379
  margin: 10px 0;
380
  border: 1px solid #e9ecef;
381
- transition: all 0.3s ease;
382
- }}
383
-
384
- .result-box:hover {{
385
- transform: translateY(-2px);
386
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
387
  }}
388
 
389
  .score-high {{
@@ -402,15 +356,6 @@ async def analyze_file(file: UploadFile = File(...)):
402
  margin-top: 20px;
403
  }}
404
 
405
- img {{
406
- max-width: 100%;
407
- max-height: 60vh;
408
- border-radius: 12px;
409
- box-shadow: 0 4px 8px rgba(0,0,0,0.1);
410
- object-fit: contain;
411
- cursor: pointer;
412
- }}
413
-
414
  h3 {{
415
  color: #0066cc;
416
  margin-top: 0;
@@ -459,23 +404,18 @@ async def analyze_file(file: UploadFile = File(...)):
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
 
478
- <a href="/" class="button back-button">← Zurück</a>
 
 
 
479
  </div>
480
  </body>
481
  </html>
@@ -513,7 +453,10 @@ async def analyze_file(file: UploadFile = File(...)):
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>
 
113
  input[type="range"] {
114
  background: #444 !important;
115
  }
116
+ .button-progress {
117
+ background: rgba(255, 255, 255, 0.2) !important;
118
+ }
119
  }
120
 
121
  body {
 
124
  margin: 0;
125
  padding: 20px;
126
  color: #1a1a1a;
 
127
  }
128
 
129
  /* Scrollbar personnalisée */
 
164
  border-radius: 8px;
165
  cursor: pointer;
166
  font-size: 1.1em;
 
 
167
  transition: all 0.3s ease;
168
+ position: relative;
169
  }
170
 
171
  .button:hover {
172
  background: #0052a3;
173
  }
174
 
175
+ /* Nouvelle barre de progression */
176
+ .button {
177
+ position: relative;
178
+ }
179
+
180
  @keyframes progress {
181
  0% { width: 0; }
 
182
  100% { width: 100%; }
183
  }
184
 
185
+ .button-progress {
 
186
  position: absolute;
187
  bottom: 0;
188
  left: 0;
189
  height: 4px;
190
+ background: rgba(255, 255, 255, 0.5);
191
+ width: 0;
192
  }
193
 
194
+ .button:active .button-progress {
195
+ animation: progress 2s linear forwards;
 
 
 
 
 
 
 
 
 
196
  }
197
 
198
+ img {
199
+ max-width: 100%;
200
+ height: auto;
 
 
 
 
 
201
  border-radius: 8px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
202
  }
203
  """
204
 
 
269
  border-radius: 50%;
270
  background: #0066cc;
271
  cursor: pointer;
 
272
  border: none;
273
  }}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
274
  </style>
275
  </head>
276
  <body>
 
286
  min="0" max="1" step="0.05" value="0.60"
287
  oninput="document.getElementById('thresholdValue').textContent = parseFloat(this.value).toFixed(2)">
288
  </div>
289
+ <button type="submit" class="button">
290
+ Analysieren
291
+ <div class="button-progress"></div>
292
+ </button>
293
  </form>
294
  </div>
295
  </div>
 
338
  border-radius: 12px;
339
  margin: 10px 0;
340
  border: 1px solid #e9ecef;
 
 
 
 
 
 
341
  }}
342
 
343
  .score-high {{
 
356
  margin-top: 20px;
357
  }}
358
 
 
 
 
 
 
 
 
 
 
359
  h3 {{
360
  color: #0066cc;
361
  margin-top: 0;
 
404
  """
405
  results_html += "</div></div>"
406
 
407
+ # Image result
408
  results_html += f"""
409
  <div class='result-box'>
410
  <h3>Fraktur Lokalisation</h3>
411
+ <img src="{result_image_b64}" alt="Analyzed image">
 
 
 
 
 
 
 
 
412
  </div>
413
  </div>
414
 
415
+ <a href="/" class="button back-button">
416
+ ← Zurück
417
+ <div class="button-progress"></div>
418
+ </a>
419
  </div>
420
  </body>
421
  </html>
 
453
  <h3>Fehler</h3>
454
  <p>{str(e)}</p>
455
  </div>
456
+ <a href="/" class="button back-button">
457
+ ← Zurück
458
+ <div class="button-progress"></div>
459
+ </a>
460
  </div>
461
  </body>
462
  </html>