Update app.py

app.py

@@ -84,40 +84,7 @@ 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;
-        }
-    }
-
     body {
         font-family: system-ui, -apple-system, sans-serif;
         background: #f0f2f5;
@@ -125,8 +92,6 @@ COMMON_STYLES = """
         padding: 20px;
         color: #1a1a1a;
     }
-
-    /* Scrollbar personnalisée */
     ::-webkit-scrollbar {
         width: 8px;
         height: 8px;
@@ -141,12 +106,6 @@ COMMON_STYLES = """
         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;
@@ -155,9 +114,8 @@ COMMON_STYLES = """
         border-radius: 10px;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
-
     .button {
-        background: #0066cc;
+        background: #2d2d2d;
         color: white;
         border: none;
         padding: 12px 30px;
@@ -167,21 +125,13 @@ COMMON_STYLES = """
         transition: all 0.3s ease;
         position: relative;
     }
-
     .button:hover {
-        background: #0052a3;
+        background: #404040;
     }
-
-    /* Nouvelle barre de progression */
-    .button {
-        position: relative;
-    }
-
     @keyframes progress {
         0% { width: 0; }
         100% { width: 100%; }
     }
-
     .button-progress {
         position: absolute;
         bottom: 0;
@@ -190,16 +140,26 @@ COMMON_STYLES = """
         background: rgba(255, 255, 255, 0.5);
         width: 0;
     }
-
     .button:active .button-progress {
         animation: progress 2s linear forwards;
     }
-
     img {
         max-width: 100%;
         height: auto;
         border-radius: 8px;
     }
+    #loading {
+        display: none;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background: #2d2d2d;
+        color: white;
+        padding: 20px;
+        border-radius: 8px;
+        z-index: 1000;
+    }
 """
 
 @app.get("/", response_class=HTMLResponse)
@@ -214,69 +174,66 @@ async def main():
             {COMMON_STYLES}
             
             .upload-section {{
-                background: #f8f9fa;
+                background: #2d2d2d;
                 padding: 40px;
                 border-radius: 12px;
                 margin: 20px 0;
                 text-align: center;
-                border: 2px dashed #ccc;
+                border: 2px dashed #404040;
                 transition: all 0.3s ease;
+                color: white;
             }}
-
             .upload-section:hover {{
-                border-color: #0066cc;
+                border-color: #555;
             }}
-
             input[type="file"] {{
                 font-size: 1.1em;
                 margin: 20px 0;
+                color: white;
             }}
-
             input[type="file"]::file-selector-button {{
                 font-size: 1em;
                 padding: 10px 20px;
                 border-radius: 8px;
-                border: 1px solid #ccc;
-                background: #f8f9fa;
+                border: 1px solid #404040;
+                background: #2d2d2d;
+                color: white;
                 transition: all 0.3s ease;
                 cursor: pointer;
             }}
-
             input[type="file"]::file-selector-button:hover {{
-                background: #e9ecef;
+                background: #404040;
             }}
-
             .confidence-slider {{
                 width: 100%;
                 max-width: 300px;
                 margin: 20px auto;
             }}
-
             input[type="range"] {{
                 width: 100%;
                 height: 8px;
                 border-radius: 4px;
-                background: #e9ecef;
+                background: #404040;
                 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;
+                background: white;
                 cursor: pointer;
                 border: none;
             }}
         </style>
     </head>
     <body>
+        <div id="loading">Loading...</div>
         <div class="container">
             <div class="upload-section">
-                <form action="/analyze" method="post" enctype="multipart/form-data">
+                <form action="/analyze" method="post" enctype="multipart/form-data" onsubmit="document.getElementById('loading').style.display = 'block';">
                     <div>
                         <input type="file" name="file" accept="image/*" required>
                     </div>
@@ -331,15 +288,13 @@ async def analyze_file(file: UploadFile = File(...)):
                     gap: 20px;
                     margin-top: 20px;
                 }}
-
                 .result-box {{
-                    background: #f8f9fa;
+                    background: white;
                     padding: 20px;
                     border-radius: 12px;
                     margin: 10px 0;
                     border: 1px solid #e9ecef;
                 }}
-
                 .score-high {{ 
                     color: #0066cc; 
                     font-weight: bold;
@@ -349,24 +304,15 @@ async def analyze_file(file: UploadFile = File(...)):
                     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;
@@ -378,10 +324,9 @@ async def analyze_file(file: UploadFile = File(...)):
             <div class="container">
                 <div class="results-grid">
                     <div>
+                        <div class="result-box"><h3>KnochenWächter</h3>
         """
         
-        # KnochenWächter results
-        results_html += "<div class='result-box'><h3>KnochenWächter</h3>"
         for pred in predictions_watcher:
             confidence_class = "score-high" if pred['score'] > 0.7 else "score-medium"
             results_html += f"""
@@ -392,7 +337,6 @@ async def analyze_file(file: UploadFile = File(...)):
             """
         results_html += "</div>"
         
-        # RöntgenMeister results
         results_html += "<div class='result-box'><h3>RöntgenMeister</h3>"
         for pred in predictions_master:
             confidence_class = "score-high" if pred['score'] > 0.7 else "score-medium"
@@ -404,7 +348,6 @@ async def analyze_file(file: UploadFile = File(...)):
             """
         results_html += "</div></div>"
         
-        # Image result
         results_html += f"""
                     <div class='result-box'>
                         <h3>Fraktur Lokalisation</h3>
@@ -439,12 +382,6 @@ async def analyze_file(file: UploadFile = File(...)):
                     border-radius: 8px;
                     margin: 20px 0;
                 }}
-                @media (prefers-color-scheme: dark) {{
-                    .error-box {{
-                        background: #471818;
-                        border-color: #dc2626;
-                    }}
-                }}
             </style>
         </head>
         <body>