Update app.py

app.py

@@ -2,7 +2,9 @@ from fastapi import FastAPI, File, UploadFile
 from fastapi.responses import HTMLResponse
 from transformers import pipeline
 from PIL import Image, ImageDraw
+import numpy as np
 import io
+import uvicorn
 import base64
 
 app = FastAPI()
@@ -67,7 +69,12 @@ def draw_boxes(image, predictions):
         
         text_bbox = draw.textbbox((box['xmin'], box['ymin']-20), label)
         draw.rectangle(text_bbox, fill=(0, 0, 0, 180))
-        draw.text((box['xmin'], box['ymin']-20), label, fill=(255, 255, 255, 255))
+        
+        draw.text(
+            (box['xmin'], box['ymin']-20),
+            label,
+            fill=(255, 255, 255, 255)
+        )
     
     return result_image
 
@@ -77,116 +84,121 @@ def image_to_base64(image):
     img_str = base64.b64encode(buffered.getvalue()).decode()
     return f"data:image/png;base64,{img_str}"
 
-STYLES = """
+# Styles communs pour les deux pages
+COMMON_STYLES = """
+    :root {
+        color-scheme: light dark;
+    }
+
+    @media (prefers-color-scheme: dark) {
+        body {
+            background: #1a1a1a !important;
+            color: #ffffff !important;
+        }
+        .container { 
+            background: #2d2d2d !important;
+        }
+        .result-box, .upload-section {
+            background: #363636 !important;
+            border-color: #555 !important;
+        }
+        .button {
+            background: #0066cc !important;
+        }
+        input[type="file"]::file-selector-button {
+            background: #444 !important;
+            color: #fff !important;
+            border-color: #555 !important;
+        }
+        input[type="range"] {
+            background: #444 !important;
+        }
+        .button-progress {
+            background: rgba(255, 255, 255, 0.2) !important;
+        }
+    }
+
     body {
         font-family: system-ui, -apple-system, sans-serif;
-        background: #2d3748;
+        background: #f0f2f5;
         margin: 0;
         padding: 20px;
-        color: #e2e8f0;
+        color: #1a1a1a;
+    }
+
+    /* Scrollbar personnalisée */
+    ::-webkit-scrollbar {
+        width: 8px;
+        height: 8px;
+    }
+    
+    ::-webkit-scrollbar-track {
+        background: transparent;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba(156, 163, 175, 0.5);
+        border-radius: 4px;
+    }
+    
+    @media (prefers-color-scheme: dark) {
+        ::-webkit-scrollbar-thumb {
+            background-color: rgba(75, 85, 99, 0.5);
+        }
     }
 
     .container {
         max-width: 1200px;
         margin: 0 auto;
-        background: #1a202c;
+        background: white;
         padding: 20px;
         border-radius: 10px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-
-    .upload-section {
-        background: #2d3748;
-        padding: 40px;
-        border-radius: 12px;
-        margin: 20px 0;
-        text-align: center;
-        border: 2px dashed #4a5568;
-    }
-
-    /* Animation de chargement */
-    @keyframes loading {
-        0% { background-position: 200% 0; }
-        100% { background-position: -200% 0; }
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
 
     .button {
-        background: #4299e1;
+        background: #0066cc;
         color: white;
         border: none;
         padding: 12px 30px;
         border-radius: 8px;
         cursor: pointer;
         font-size: 1.1em;
-        overflow: hidden;
+        transition: all 0.3s ease;
+        position: relative;
     }
 
-    .button:active {
-        background: linear-gradient(90deg, #4299e1 0%, #63b3ed 50%, #4299e1 100%);
-        background-size: 200% 100%;
-        animation: loading 2s infinite linear;
+    .button:hover {
+        background: #0052a3;
     }
 
-    input[type="file"] {
-        font-size: 1.1em;
-        margin: 20px 0;
-        color: #e2e8f0;
-    }
-
-    input[type="file"]::file-selector-button {
-        font-size: 1em;
-        padding: 10px 20px;
-        border-radius: 8px;
-        border: 1px solid #4a5568;
-        background: #2d3748;
-        color: #e2e8f0;
-        cursor: pointer;
+    /* Nouvelle barre de progression */
+    .button {
+        position: relative;
     }
 
-    input[type="file"]::file-selector-button:hover {
-        background: #4a5568;
+    @keyframes progress {
+        0% { width: 0; }
+        100% { width: 100%; }
     }
 
-    .result-box {
-        background: #2d3748;
-        padding: 20px;
-        border-radius: 12px;
-        margin: 10px 0;
-        border: 1px solid #4a5568;
+    .button-progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 4px;
+        background: rgba(255, 255, 255, 0.5);
+        width: 0;
     }
 
-    .score-high { 
-        color: #48bb78;
-        font-weight: bold;
-    }
-    
-    .score-medium { 
-        color: #ed8936;
-        font-weight: bold;
+    .button:active .button-progress {
+        animation: progress 2s linear forwards;
     }
 
     img {
         max-width: 100%;
+        height: auto;
         border-radius: 8px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-
-    h3 {
-        color: #63b3ed;
-        margin-top: 0;
-    }
-
-    .results-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 20px;
-        margin-top: 20px;
-    }
-
-    @media (max-width: 768px) {
-        .results-grid {
-            grid-template-columns: 1fr;
-        }
     }
 """
 
@@ -198,15 +210,86 @@ async def main():
     <head>
         <title>Fraktur Detektion</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>{STYLES}</style>
+        <style>
+            {COMMON_STYLES}
+            
+            .upload-section {{
+                background: #f8f9fa;
+                padding: 40px;
+                border-radius: 12px;
+                margin: 20px 0;
+                text-align: center;
+                border: 2px dashed #ccc;
+                transition: all 0.3s ease;
+            }}
+
+            .upload-section:hover {{
+                border-color: #0066cc;
+            }}
+
+            input[type="file"] {{
+                font-size: 1.1em;
+                margin: 20px 0;
+            }}
+
+            input[type="file"]::file-selector-button {{
+                font-size: 1em;
+                padding: 10px 20px;
+                border-radius: 8px;
+                border: 1px solid #ccc;
+                background: #f8f9fa;
+                transition: all 0.3s ease;
+                cursor: pointer;
+            }}
+
+            input[type="file"]::file-selector-button:hover {{
+                background: #e9ecef;
+            }}
+
+            .confidence-slider {{
+                width: 100%;
+                max-width: 300px;
+                margin: 20px auto;
+            }}
+
+            input[type="range"] {{
+                width: 100%;
+                height: 8px;
+                border-radius: 4px;
+                background: #e9ecef;
+                outline: none;
+                transition: all 0.3s ease;
+                -webkit-appearance: none;
+            }}
+
+            input[type="range"]::-webkit-slider-thumb {{
+                -webkit-appearance: none;
+                width: 20px;
+                height: 20px;
+                border-radius: 50%;
+                background: #0066cc;
+                cursor: pointer;
+                border: none;
+            }}
+        </style>
     </head>
     <body>
         <div class="container">
             <div class="upload-section">
                 <form action="/analyze" method="post" enctype="multipart/form-data">
-                    <input type="file" name="file" accept="image/*" required>
-                    <br>
-                    <button type="submit" class="button">Analysieren</button>
+                    <div>
+                        <input type="file" name="file" accept="image/*" required>
+                    </div>
+                    <div class="confidence-slider">
+                        <label for="threshold">Konfidenzschwelle: <span id="thresholdValue">0.60</span></label>
+                        <input type="range" id="threshold" name="threshold" 
+                               min="0" max="1" step="0.05" value="0.60" 
+                               oninput="document.getElementById('thresholdValue').textContent = parseFloat(this.value).toFixed(2)">
+                    </div>
+                    <button type="submit" class="button">
+                        Analysieren
+                        <div class="button-progress"></div>
+                    </button>
                 </form>
             </div>
         </div>
@@ -226,7 +309,11 @@ async def analyze_file(file: UploadFile = File(...)):
         predictions_locator = models["KnochenAuge"](image)
         
         filtered_preds = [p for p in predictions_locator if p['score'] >= 0.6]
-        result_image = draw_boxes(image, filtered_preds) if filtered_preds else image
+        if filtered_preds:
+            result_image = draw_boxes(image, filtered_preds)
+        else:
+            result_image = image
+
         result_image_b64 = image_to_base64(result_image)
         
         results_html = f"""
@@ -235,7 +322,57 @@ async def analyze_file(file: UploadFile = File(...)):
         <head>
             <title>Ergebnisse</title>
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <style>{STYLES}</style>
+            <style>
+                {COMMON_STYLES}
+                
+                .results-grid {{
+                    display: grid;
+                    grid-template-columns: 1fr 1fr;
+                    gap: 20px;
+                    margin-top: 20px;
+                }}
+
+                .result-box {{
+                    background: #f8f9fa;
+                    padding: 20px;
+                    border-radius: 12px;
+                    margin: 10px 0;
+                    border: 1px solid #e9ecef;
+                }}
+
+                .score-high {{ 
+                    color: #0066cc; 
+                    font-weight: bold;
+                }}
+                
+                .score-medium {{ 
+                    color: #ffa500; 
+                    font-weight: bold;
+                }}
+
+                .back-button {{
+                    display: inline-block;
+                    text-decoration: none;
+                    margin-top: 20px;
+                }}
+
+                h3 {{
+                    color: #0066cc;
+                    margin-top: 0;
+                }}
+
+                @media (prefers-color-scheme: dark) {{
+                    h3 {{
+                        color: #66b3ff;
+                    }}
+                }}
+
+                @media (max-width: 768px) {{
+                    .results-grid {{
+                        grid-template-columns: 1fr;
+                    }}
+                }}
+            </style>
         </head>
         <body>
             <div class="container">
@@ -275,7 +412,10 @@ async def analyze_file(file: UploadFile = File(...)):
                     </div>
                 </div>
                 
-                <a href="/" class="button">← Zurück</a>
+                <a href="/" class="button back-button">
+                    ← Zurück
+                    <div class="button-progress"></div>
+                </a>
             </div>
         </body>
         </html>
@@ -290,20 +430,37 @@ async def analyze_file(file: UploadFile = File(...)):
         <head>
             <title>Fehler</title>
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <style>{STYLES}</style>
+            <style>
+                {COMMON_STYLES}
+                .error-box {{
+                    background: #fee2e2;
+                    border: 1px solid #ef4444;
+                    padding: 20px;
+                    border-radius: 8px;
+                    margin: 20px 0;
+                }}
+                @media (prefers-color-scheme: dark) {{
+                    .error-box {{
+                        background: #471818;
+                        border-color: #dc2626;
+                    }}
+                }}
+            </style>
         </head>
         <body>
             <div class="container">
-                <div class="result-box">
+                <div class="error-box">
                     <h3>Fehler</h3>
                     <p>{str(e)}</p>
                 </div>
-                <a href="/" class="button">← Zurück</a>
+                <a href="/" class="button back-button">
+                    ← Zurück
+                    <div class="button-progress"></div>
+                </a>
             </div>
         </body>
         </html>
         """
 
 if __name__ == "__main__":
-    import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=7860)