Update app.py

app.py

@@ -1,47 +1,30 @@
 from fastapi import FastAPI, File, UploadFile
 from fastapi.responses import HTMLResponse
-from transformers import AutoImageProcessor, AutoModelForImageClassification
+from transformers import pipeline
 from PIL import Image
 import io
-import torch
 import uvicorn
 import base64
 
 app = FastAPI()
 
-# Laden der Modelle und des Processors
+# Chargement des modèles
 def load_models():
-    processor = AutoImageProcessor.from_pretrained("codewithdark/vit-chest-xray")
-    model = AutoModelForImageClassification.from_pretrained("codewithdark/vit-chest-xray")
     return {
-        "processor": processor,
-        "model": model
+        "chest_classifier": pipeline("image-classification", model="codewithdark/vit-chest-xray")
     }
 
 models = load_models()
 
-# Definition der Krankheitsbezeichnungen
-LABEL_COLUMNS = ['Kardiomegalie', 'Ödem', 'Konsolidierung', 'Lungenentzündung', 'Kein Befund']
-
-def analyze_image(image):
-    if image.mode != 'RGB':
-        image = image.convert('RGB')
-    
-    inputs = models["processor"](images=image, return_tensors="pt")
-    
-    with torch.no_grad():
-        outputs = models["model"](**inputs)
-    
-    probs = torch.nn.functional.softmax(outputs.logits, dim=-1)[0]
-    predictions = []
-    
-    for idx, (label, prob) in enumerate(zip(LABEL_COLUMNS, probs)):
-        predictions.append({
-            'label': label,
-            'score': prob.item()
-        })
-    
-    return sorted(predictions, key=lambda x: x['score'], reverse=True)
+def translate_label(label):
+    translations = {
+        'Cardiomegaly': 'Kardiomegalie',
+        'Edema': 'Ödem',
+        'Consolidation': 'Konsolidierung',
+        'Pneumonia': 'Lungenentzündung',
+        'No Finding': 'Kein Befund'
+    }
+    return translations.get(label, label)
 
 def image_to_base64(image):
     buffered = io.BytesIO()
@@ -57,6 +40,20 @@ COMMON_STYLES = """
         padding: 20px;
         color: #1a1a1a;
     }
+    ::-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;
+    }
+    
     .container {
         max-width: 1200px;
         margin: 0 auto;
@@ -74,73 +71,42 @@ COMMON_STYLES = """
         cursor: pointer;
         font-size: 1.1em;
         transition: all 0.3s ease;
+        position: relative;
     }
     .button:hover {
         background: #404040;
     }
-    .upload-section {
-        background: #2d2d2d;
-        padding: 40px;
-        border-radius: 12px;
-        margin: 20px 0;
-        text-align: center;
-        border: 2px dashed #404040;
-        transition: all 0.3s ease;
-        color: white;
+    @keyframes progress {
+        0% { width: 0; }
+        100% { width: 100%; }
     }
-    .upload-section:hover {
-        border-color: #555;
+    .button-progress {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 4px;
+        background: rgba(255, 255, 255, 0.5);
+        width: 0;
     }
-    #loading {
-        display: none;
-        color: white;
-        margin-top: 10px;
-        animation: blink 1s infinite;
-        text-align: center;
+    .button:active .button-progress {
+        animation: progress 2s linear forwards;
+    }
+    img {
+        max-width: 100%;
+        height: auto;
+        border-radius: 8px;
     }
     @keyframes blink {
         0% { opacity: 1; }
         50% { opacity: 0; }
         100% { opacity: 1; }
     }
-    .preview-image {
-        max-width: 300px;
-        margin: 20px auto;
+    #loading {
         display: none;
-    }
-    .results-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 20px;
-        margin-top: 20px;
-    }
-    .result-box {
-        background: white;
-        padding: 20px;
-        border-radius: 12px;
-        margin: 10px 0;
-        border: 1px solid #e9ecef;
-    }
-    .analyzed-image {
-        max-width: 400px;
-        margin: 0 auto;
-    }
-    .score-high {
-        color: #0066cc;
-        font-weight: bold;
-    }
-    .score-medium {
-        color: #ffa500;
-        font-weight: bold;
-    }
-    h3 {
-        color: #0066cc;
-        margin-top: 0;
-    }
-    @media (max-width: 768px) {
-        .results-grid {
-            grid-template-columns: 1fr;
-        }
+        color: white;
+        margin-top: 10px;
+        animation: blink 1s infinite;
+        text-align: center;
     }
 """
 
@@ -150,17 +116,52 @@ async def main():
     <!DOCTYPE html>
     <html>
     <head>
-        <title>Röntgenbild-Analyse</title>
+        <title>Thorax-Röntgen Analyse</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <style>
             {COMMON_STYLES}
+            
+            .upload-section {{
+                background: #2d2d2d;
+                padding: 40px;
+                border-radius: 12px;
+                margin: 20px 0;
+                text-align: center;
+                border: 2px dashed #404040;
+                transition: all 0.3s ease;
+                color: white;
+            }}
+            .upload-section:hover {{
+                border-color: #555;
+            }}
+            input[type="file"] {{
+                width: 0.1px;
+                height: 0.1px;
+                opacity: 0;
+                overflow: hidden;
+                position: absolute;
+                z-index: -1;
+            }}
+            .file-upload-label {{
+                display: inline-block;
+                padding: 12px 30px;
+                background: #404040;
+                color: white;
+                border-radius: 8px;
+                cursor: pointer;
+                font-size: 1.1em;
+                transition: all 0.3s ease;
+                margin: 20px 0;
+            }}
+            .file-upload-label:hover {{
+                background: #555;
+            }}
         </style>
     </head>
     <body>
         <div class="container">
             <div class="upload-section">
-                <form action="/analyze" method="post" enctype="multipart/form-data" 
-                      onsubmit="document.getElementById('loading').style.display = 'block';">
+                <form action="/analyze" method="post" enctype="multipart/form-data" onsubmit="document.getElementById('loading').style.display = 'block';">
                     <div>
                         <label for="file-upload" class="file-upload-label">
                             Röntgenbild auswählen
@@ -169,6 +170,7 @@ async def main():
                     </div>
                     <button type="submit" class="button">
                         Analysieren
+                        <div class="button-progress"></div>
                     </button>
                     <div id="loading">Wird geladen...</div>
                 </form>
@@ -185,7 +187,7 @@ async def analyze_file(file: UploadFile = File(...)):
         contents = await file.read()
         image = Image.open(io.BytesIO(contents))
         
-        predictions = analyze_image(image)
+        predictions = models["chest_classifier"](image)
         result_image_b64 = image_to_base64(image)
         
         results_html = f"""
@@ -196,6 +198,42 @@ async def analyze_file(file: UploadFile = File(...)):
             <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: white;
+                    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 (max-width: 768px) {{
+                    .results-grid {{
+                        grid-template-columns: 1fr;
+                    }}
+                }}
             </style>
         </head>
         <body>
@@ -210,7 +248,7 @@ async def analyze_file(file: UploadFile = File(...)):
             results_html += f"""
                 <div>
                     <span class="{confidence_class}">{pred['score']:.1%}</span> - 
-                    {pred['label']}
+                    {translate_label(pred['label'])}
                 </div>
             """
         
@@ -218,12 +256,13 @@ async def analyze_file(file: UploadFile = File(...)):
                     </div>
                     <div class="result-box">
                         <h3>Röntgenbild</h3>
-                        <img src="{result_image_b64}" alt="Analysiertes Röntgenbild" class="analyzed-image">
+                        <img src="{result_image_b64}" alt="Analysiertes Röntgenbild">
                     </div>
                 </div>
                 
                 <a href="/" class="button back-button">
                     ← Zurück
+                    <div class="button-progress"></div>
                 </a>
             </div>
         </body>
@@ -258,6 +297,7 @@ async def analyze_file(file: UploadFile = File(...)):
                 </div>
                 <a href="/" class="button back-button">
                     ← Zurück
+                    <div class="button-progress"></div>
                 </a>
             </div>
         </body>