Update app.py

app.py

@@ -1,26 +1,105 @@
-from fastapi import FastAPI, File, UploadFile, Form
-from fastapi.responses import HTMLResponse, JSONResponse
-from fastapi.staticfiles import StaticFiles
-from fastapi.middleware.cors import CORSMiddleware
-import uvicorn
+import streamlit as st
 from transformers import pipeline
 from PIL import Image, ImageDraw
-import io
-import base64
 import numpy as np
+import colorsys
 
-app = FastAPI()
-
-# Configuration CORS pour éviter les problèmes de navigateur
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
+st.set_page_config(
+    page_title="Fraktur Detektion",
+    layout="wide",
+    initial_sidebar_state="collapsed"
 )
 
-# Chargement des modèles
+st.markdown("""
+<style>
+    .stApp {
+        background: #f0f2f5 !important;
+    }
+    
+    .block-container {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        max-width: 1400px !important;
+    }
+    
+    .upload-container {
+        background: white;
+        padding: 1.5rem;
+        border-radius: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        margin-bottom: 1rem;
+        text-align: center;
+    }
+    
+    .results-container {
+        background: white;
+        padding: 1.5rem;
+        border-radius: 10px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    }
+    
+    .result-box {
+        background: #f8f9fa;
+        padding: 0.75rem;
+        border-radius: 8px;
+        margin: 0.5rem 0;
+        border: 1px solid #e9ecef;
+    }
+    
+    h1, h2, h3, h4, p {
+        color: #1a1a1a !important;
+        margin: 0.5rem 0 !important;
+    }
+    
+    .stImage {
+        background: white;
+        padding: 0.5rem;
+        border-radius: 8px;
+        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+    }
+    
+    .stImage > img {
+        max-height: 300px !important;
+        width: auto !important;
+        margin: 0 auto !important;
+        display: block !important;
+    }
+    
+    [data-testid="stFileUploader"] {
+        width: 100% !important;
+    }
+    
+    .stFileUploaderFileName {
+        color: #1a1a1a !important;
+    }
+    
+    .stButton > button {
+        width: 200px;
+        background-color: #f8f9fa !important;
+        color: #1a1a1a !important;
+        border: 1px solid #e9ecef !important;
+        padding: 0.5rem 1rem !important;
+        border-radius: 5px !important;
+        transition: all 0.3s ease !important;
+    }
+    
+    .stButton > button:hover {
+        background-color: #e9ecef !important;
+        transform: translateY(-1px);
+    }
+    
+    #MainMenu, footer, header, [data-testid="stToolbar"] {
+        display: none !important;
+    }
+    
+    /* Hide deprecation warning */
+    [data-testid="stExpander"], .element-container:has(>.stAlert) {
+        display: none !important;
+    }
+</style>
+""", unsafe_allow_html=True)
+
+@st.cache_resource
 def load_models():
     return {
         "KnochenAuge": pipeline("object-detection", model="D3STRON/bone-fracture-detr"),
@@ -29,8 +108,6 @@ def load_models():
             model="nandodeomkar/autotrain-fracture-detection-using-google-vit-base-patch-16-54382127388")
     }
 
-models = load_models()
-
 def translate_label(label):
     translations = {
         "fracture": "Knochenbruch",
@@ -49,17 +126,21 @@ def create_heatmap_overlay(image, box, score):
     x1, y1 = box['xmin'], box['ymin']
     x2, y2 = box['xmax'], box['ymax']
     
+    # Couleur basée sur le score
     if score > 0.8:
-        fill_color = (255, 0, 0, 100)
+        fill_color = (255, 0, 0, 100)  # Rouge
         border_color = (255, 0, 0, 255)
     elif score > 0.6:
-        fill_color = (255, 165, 0, 100)
+        fill_color = (255, 165, 0, 100)  # Orange
         border_color = (255, 165, 0, 255)
     else:
-        fill_color = (255, 255, 0, 100)
+        fill_color = (255, 255, 0, 100)  # Jaune
         border_color = (255, 255, 0, 255)
     
+    # Rectangle semi-transparent
     draw.rectangle([x1, y1, x2, y2], fill=fill_color)
+    
+    # Bordure
     draw.rectangle([x1, y1, x2, y2], outline=border_color, width=2)
     
     return overlay
@@ -71,16 +152,20 @@ def draw_boxes(image, predictions):
         box = pred['box']
         score = pred['score']
         
+        # Création de l'overlay
         overlay = create_heatmap_overlay(image, box, score)
         result_image = Image.alpha_composite(result_image, overlay)
         
+        # Ajout du texte
         draw = ImageDraw.Draw(result_image)
         temp = 36.5 + (score * 2.5)
         label = f"{translate_label(pred['label'])} ({score:.1%} • {temp:.1f}°C)"
         
+        # Fond noir pour le texte
         text_bbox = draw.textbbox((box['xmin'], box['ymin']-20), label)
         draw.rectangle(text_bbox, fill=(0, 0, 0, 180))
         
+        # Texte en blanc
         draw.text(
             (box['xmin'], box['ymin']-20),
             label,
@@ -89,200 +174,101 @@ def draw_boxes(image, predictions):
     
     return result_image
 
-# Interface HTML de base
-@app.get("/", response_class=HTMLResponse)
-async def read_root():
-    return """
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <title>Fraktur Detektion</title>
-        <style>
-            body {
-                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-                background: #f0f2f5;
-                margin: 0;
-                padding: 20px;
-            }
-            .container {
-                max-width: 1200px;
-                margin: 0 auto;
-                background: white;
-                padding: 20px;
-                border-radius: 10px;
-                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-            }
-            .result-box {
-                background: #f8f9fa;
-                padding: 15px;
-                border-radius: 8px;
-                margin: 10px 0;
-                border: 1px solid #e9ecef;
-            }
-            .button {
-                background: #f8f9fa;
-                border: 1px solid #e9ecef;
-                padding: 10px 20px;
-                border-radius: 5px;
-                cursor: pointer;
-                transition: all 0.3s ease;
-            }
-            .button:hover {
-                background: #e9ecef;
-                transform: translateY(-1px);
-            }
-            .row {
-                display: flex;
-                margin: 20px -10px;
-            }
-            .col {
-                flex: 1;
-                padding: 0 10px;
-            }
-            img {
-                max-width: 100%;
-                border-radius: 8px;
-            }
-            .loading {
-                display: none;
-                text-align: center;
-                padding: 20px;
-            }
-        </style>
-    </head>
-    <body>
-        <div class="container">
-            <h1>📤 Fraktur Detektion</h1>
-            
-            <form id="uploadForm">
-                <input type="file" id="image" name="image" accept="image/*">
-                <input type="range" id="threshold" min="0" max="1" step="0.05" value="0.6">
-                <label for="threshold">Konfidenzschwelle: <span id="thresholdValue">0.60</span></label>
-                <button type="submit" class="button">Analysieren</button>
-            </form>
-
-            <div class="loading" id="loading">
-                Bild wird analysiert...
-            </div>
-
-            <div class="row">
-                <div class="col" id="results"></div>
-                <div class="col" id="imageResult"></div>
-            </div>
-        </div>
-
-        <script>
-            document.getElementById('threshold').addEventListener('input', function(e) {
-                document.getElementById('thresholdValue').textContent = 
-                    parseFloat(e.target.value).toFixed(2);
-            });
+def main():
+    models = load_models()
+    
+    with st.container():
+        st.write("### 📤 Röntgenbild hochladen")
+        uploaded_file = st.file_uploader("Bild auswählen", type=['png', 'jpg', 'jpeg'], label_visibility="collapsed")
+        
+        col1, col2 = st.columns([2, 1])
+        with col1:
+            conf_threshold = st.slider(
+                "Konfidenzschwelle",
+                min_value=0.0, max_value=1.0,
+                value=0.60, step=0.05,
+                label_visibility="visible"
+            )
+        with col2:
+            analyze_button = st.button("Analysieren")
 
-            document.getElementById('uploadForm').addEventListener('submit', async function(e) {
-                e.preventDefault();
-                
-                const formData = new FormData();
-                formData.append('image', document.getElementById('image').files[0]);
-                formData.append('threshold', document.getElementById('threshold').value);
+    if uploaded_file and analyze_button:
+        with st.spinner("Bild wird analysiert..."):
+            image = Image.open(uploaded_file)
+            results_container = st.container()
+            
+            predictions_watcher = models["KnochenWächter"](image)
+            predictions_master = models["RöntgenMeister"](image)
+            predictions_locator = models["KnochenAuge"](image)
+            
+            has_fracture = False
+            max_fracture_score = 0
+            filtered_locations = [p for p in predictions_locator 
+                                if p['score'] >= conf_threshold]
+            
+            for pred in predictions_watcher:
+                if pred['score'] >= conf_threshold and 'fracture' in pred['label'].lower():
+                    has_fracture = True
+                    max_fracture_score = max(max_fracture_score, pred['score'])
+            
+            with results_container:
+                st.write("### 🔍 Analyse Ergebnisse")
+                col1, col2 = st.columns(2)
                 
-                document.getElementById('loading').style.display = 'block';
-                document.getElementById('results').innerHTML = '';
-                document.getElementById('imageResult').innerHTML = '';
-
-                try {
-                    const response = await fetch('/analyze', {
-                        method: 'POST',
-                        body: formData
-                    });
+                with col1:
+                    st.write("#### 🤖 KI-Diagnose")
                     
-                    const data = await response.json();
+                    st.markdown("#### 🛡️ KnochenWächter")
+                    # Afficher tous les résultats de KnochenWächter
+                    for pred in predictions_watcher:
+                        confidence_color = '#0066cc' if pred['score'] > 0.7 else '#ffa500'
+                        label_lower = pred['label'].lower()
+                        # Mettre à jour max_fracture_score seulement pour les fractures
+                        if pred['score'] >= conf_threshold and 'fracture' in label_lower:
+                            has_fracture = True
+                            max_fracture_score = max(max_fracture_score, pred['score'])
+                        # Afficher tous les résultats
+                        st.markdown(f"""
+                            <div class="result-box" style="color: #1a1a1a;">
+                                <span style="color: {confidence_color}; font-weight: 500;">
+                                    {pred['score']:.1%}
+                                </span> - {translate_label(pred['label'])}
+                            </div>
+                        """, unsafe_allow_html=True)
                     
-                    document.getElementById('results').innerHTML = data.results;
-                    document.getElementById('imageResult').innerHTML = 
-                        `<img src="data:image/jpeg;base64,${data.image}" alt="Analyzed image">`;
-                } catch (error) {
-                    console.error('Error:', error);
-                } finally {
-                    document.getElementById('loading').style.display = 'none';
-                }
-            });
-        </script>
-    </body>
-    </html>
-    """
-
-@app.post("/analyze")
-async def analyze_image(image: UploadFile = File(...), threshold: float = Form(0.6)):
-    # Lecture de l'image
-    image_data = await image.read()
-    image = Image.open(io.BytesIO(image_data))
-    
-    # Analyse
-    predictions_watcher = models["KnochenWächter"](image)
-    predictions_master = models["RöntgenMeister"](image)
-    predictions_locator = models["KnochenAuge"](image)
-    
-    has_fracture = False
-    max_fracture_score = 0
-    
-    # Génération du HTML pour les résultats
-    results_html = "<h2>🔍 Analyse Ergebnisse</h2>"
-    
-    # KnochenWächter results
-    results_html += "<h3>🛡️ KnochenWächter</h3>"
-    for pred in predictions_watcher:
-        confidence_color = '#0066cc' if pred['score'] > 0.7 else '#ffa500'
-        if pred['score'] >= threshold and 'fracture' in pred['label'].lower():
-            has_fracture = True
-            max_fracture_score = max(max_fracture_score, pred['score'])
-        results_html += f"""
-            <div class="result-box">
-                <span style="color: {confidence_color}; font-weight: 500;">
-                    {pred['score']:.1%}
-                </span> - {translate_label(pred['label'])}
-            </div>
-        """
-    
-    # RöntgenMeister results
-    results_html += "<h3>🎓 RöntgenMeister</h3>"
-    for pred in predictions_master:
-        confidence_color = '#0066cc' if pred['score'] > 0.7 else '#ffa500'
-        results_html += f"""
-            <div class="result-box">
-                <span style="color: {confidence_color}; font-weight: 500;">
-                    {pred['score']:.1%}
-                </span> - {translate_label(pred['label'])}
-            </div>
-        """
-    
-    # Probabilité si fracture détectée
-    if max_fracture_score > 0:
-        no_fracture_prob = 1 - max_fracture_score
-        results_html += f"""
-            <h3>📊 Wahrscheinlichkeit</h3>
-            <div class="result-box">
-                Knochenbruch: <strong style="color: #0066cc">{max_fracture_score:.1%}</strong><br>
-                Kein Knochenbruch: <strong style="color: #ffa500">{no_fracture_prob:.1%}</strong>
-            </div>
-        """
-    
-    # Traitement de l'image
-    predictions = models["KnochenAuge"](image)
-    filtered_preds = [p for p in predictions if p['score'] >= threshold]
-    
-    if filtered_preds:
-        result_image = draw_boxes(image, filtered_preds)
-    else:
-        result_image = image
-    
-    # Conversion de l'image en base64
-    buffered = io.BytesIO()
-    result_image.save(buffered, format="JPEG")
-    img_str = base64.b64encode(buffered.getvalue()).decode()
-    
-    return JSONResponse({
-        "results": results_html,
-        "image": img_str
-    })
+                    st.markdown("#### 🎓 RöntgenMeister")
+                    # Afficher tous les résultats de RöntgenMeister
+                    for pred in predictions_master:
+                        confidence_color = '#0066cc' if pred['score'] > 0.7 else '#ffa500'
+                        st.markdown(f"""
+                            <div class="result-box" style="color: #1a1a1a;">
+                                <span style="color: {confidence_color}; font-weight: 500;">
+                                    {pred['score']:.1%}
+                                </span> - {translate_label(pred['label'])}
+                            </div>
+                        """, unsafe_allow_html=True)
+                    
+                    if max_fracture_score > 0:
+                        st.write("#### 📊 Wahrscheinlichkeit")
+                        no_fracture_prob = 1 - max_fracture_score
+                        st.markdown(f"""
+                            <div class="result-box" style="color: #1a1a1a;">
+                                Knochenbruch: <strong style="color: #0066cc">{max_fracture_score:.1%}</strong><br>
+                                Kein Knochenbruch: <strong style="color: #ffa500">{no_fracture_prob:.1%}</strong>
+                            </div>
+                        """, unsafe_allow_html=True)
+                
+                with col2:
+                    predictions = models["KnochenAuge"](image)
+                    filtered_preds = [p for p in predictions if p['score'] >= conf_threshold]
+                    
+                    if filtered_preds:
+                        st.write("#### 🎯 Fraktur Lokalisation")
+                        result_image = draw_boxes(image, filtered_preds)
+                        st.image(result_image, use_container_width=True)
+                    else:
+                        st.write("#### 🖼️ Röntgenbild")
+                        st.image(image, use_container_width=True)
 
 if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860)
+    main()