Update app.py

app.py

@@ -2,9 +2,7 @@ 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()
@@ -69,12 +67,7 @@ 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
 
@@ -84,121 +77,116 @@ def image_to_base64(image):
     img_str = base64.b64encode(buffered.getvalue()).decode()
     return f"data:image/png;base64,{img_str}"
 
-# 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;
-        }
-    }
-
+STYLES = """
     body {
         font-family: system-ui, -apple-system, sans-serif;
-        background: #f0f2f5;
+        background: #2d3748;
         margin: 0;
         padding: 20px;
-        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);
-        }
+        color: #e2e8f0;
     }
 
     .container {
         max-width: 1200px;
         margin: 0 auto;
-        background: white;
+        background: #1a202c;
         padding: 20px;
         border-radius: 10px;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        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; }
     }
 
     .button {
-        background: #0066cc;
+        background: #4299e1;
         color: white;
         border: none;
         padding: 12px 30px;
         border-radius: 8px;
         cursor: pointer;
         font-size: 1.1em;
-        transition: all 0.3s ease;
-        position: relative;
+        overflow: hidden;
     }
 
-    .button:hover {
-        background: #0052a3;
+    .button:active {
+        background: linear-gradient(90deg, #4299e1 0%, #63b3ed 50%, #4299e1 100%);
+        background-size: 200% 100%;
+        animation: loading 2s infinite linear;
     }
 
-    /* Nouvelle barre de progression */
-    .button {
-        position: relative;
+    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;
     }
 
-    @keyframes progress {
-        0% { width: 0; }
-        100% { width: 100%; }
+    input[type="file"]::file-selector-button:hover {
+        background: #4a5568;
     }
 
-    .button-progress {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        height: 4px;
-        background: rgba(255, 255, 255, 0.5);
-        width: 0;
+    .result-box {
+        background: #2d3748;
+        padding: 20px;
+        border-radius: 12px;
+        margin: 10px 0;
+        border: 1px solid #4a5568;
     }
 
-    .button:active .button-progress {
-        animation: progress 2s linear forwards;
+    .score-high { 
+        color: #48bb78;
+        font-weight: bold;
+    }
+    
+    .score-medium { 
+        color: #ed8936;
+        font-weight: bold;
     }
 
     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;
+        }
     }
 """
 
@@ -210,86 +198,15 @@ async def main():
     <head>
         <title>Fraktur Detektion</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <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>
+        <style>{STYLES}</style>
     </head>
     <body>
         <div class="container">
             <div class="upload-section">
                 <form action="/analyze" method="post" enctype="multipart/form-data">
-                    <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>
+                    <input type="file" name="file" accept="image/*" required>
+                    <br>
+                    <button type="submit" class="button">Analysieren</button>
                 </form>
             </div>
         </div>
@@ -309,11 +226,7 @@ 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]
-        if filtered_preds:
-            result_image = draw_boxes(image, filtered_preds)
-        else:
-            result_image = image
-
+        result_image = draw_boxes(image, filtered_preds) if filtered_preds else image
         result_image_b64 = image_to_base64(result_image)
         
         results_html = f"""
@@ -322,57 +235,7 @@ async def analyze_file(file: UploadFile = File(...)):
         <head>
             <title>Ergebnisse</title>
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <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>
+            <style>{STYLES}</style>
         </head>
         <body>
             <div class="container">
@@ -412,10 +275,7 @@ async def analyze_file(file: UploadFile = File(...)):
                     </div>
                 </div>
                 
-                <a href="/" class="button back-button">
-                    ← Zurück
-                    <div class="button-progress"></div>
-                </a>
+                <a href="/" class="button">← Zurück</a>
             </div>
         </body>
         </html>
@@ -430,37 +290,20 @@ async def analyze_file(file: UploadFile = File(...)):
         <head>
             <title>Fehler</title>
             <meta name="viewport" content="width=device-width, initial-scale=1.0">
-            <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>
+            <style>{STYLES}</style>
         </head>
         <body>
             <div class="container">
-                <div class="error-box">
+                <div class="result-box">
                     <h3>Fehler</h3>
                     <p>{str(e)}</p>
                 </div>
-                <a href="/" class="button back-button">
-                    ← Zurück
-                    <div class="button-progress"></div>
-                </a>
+                <a href="/" class="button">← Zurück</a>
             </div>
         </body>
         </html>
         """
 
 if __name__ == "__main__":
+    import uvicorn
     uvicorn.run(app, host="0.0.0.0", port=7860)