Update app.py

app.py

@@ -1,217 +1,99 @@
-import streamlit as st
-from transformers import pipeline
-from PIL import Image, ImageDraw
-import torch
+<?php
+// [En-tête PHP existant]
+?>
 
-# Configuration page
-st.set_page_config(
-    page_title="Fraktur Detektion",
-    layout="wide",
-    initial_sidebar_state="collapsed"
-)
+<div class="min-h-screen bg-gray-100 dark:bg-gray-900 pt-20 scrollable-content">
+    <div id="fraktur-root" class="w-2/3 min-w-[800px] mx-auto p-4 ml-0">
+        <div class="bg-white dark:bg-gray-800 shadow-md rounded-lg overflow-hidden">
+            <!-- Titre -->
+            <div class="p-4 border-b border-gray-200 dark:border-gray-700">
+                <div class="flex items-center gap-2">
+                    <svg class="w-6 h-6 text-blue-500 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"/>
+                    </svg>
+                    <h1 class="text-xl font-bold text-gray-900 dark:text-white">Fraktur Detektion</h1>
+                </div>
+            </div>
+
+            <!-- Conteneur iframe adaptatif -->
+            <div class="iframe-container relative w-full" style="padding-top: 80%;">
+                <iframe
+                    src="https://yassonee-radpid.hf.space"
+                    class="absolute top-0 left-0 w-full h-full border-none"
+                    id="frakturFrame"
+                ></iframe>
+            </div>
+        </div>
+    </div>
+</div>
 
-# CSS optimisé
-st.markdown("""
 <style>
-    /* Reset complet */
-    .stApp {
-        background-color: var(--background-color) !important;
-        padding: 0 !important;
-        max-height: 600px !important;
-        overflow: hidden !important;
-    }
-    
-    /* Variables de thème */
-    [data-theme="light"] {
-        --background-color: #ffffff;
-        --text-color: #1f2937;
-        --border-color: #e5e7eb;
-        --secondary-bg: #f3f4f6;
-    }
-    
-    [data-theme="dark"] {
-        --background-color: #1f2937;
-        --text-color: #f3f4f6;
-        --border-color: #4b5563;
-        --secondary-bg: #374151;
-    }
-    
-    /* Conteneur principal */
-    .block-container {
-        padding: 0.5rem !important;
-        max-width: 100% !important;
-    }
-    
-    /* Upload et contrôles */
-    .uploadedFile {
-        border: 1px dashed var(--border-color);
-        border-radius: 0.375rem;
-        padding: 0.25rem;
-        background: var(--secondary-bg);
-    }
-    
-    /* Images plus petites */
-    .stImage > img {
-        max-width: 250px !important;
-        max-height: 250px !important;
-        margin: 0 auto !important;
-    }
-    
-    /* Tabs compacts */
-    .stTabs [data-baseweb="tab-list"] {
-        gap: 0.25rem;
-        background: transparent;
-    }
-    
-    .stTabs [data-baseweb="tab"] {
-        padding: 0.25rem 0.5rem;
-        background: var(--secondary-bg);
-        border-radius: 0.375rem;
-    }
-    
-    /* Résultats */
-    .result-box {
-        padding: 0.375rem;
-        border-radius: 0.375rem;
-        margin: 0.25rem 0;
-        background: var(--secondary-bg);
-        border: 1px solid var(--border-color);
-        color: var(--text-color);
-    }
-    
-    /* Cacher éléments inutiles */
-    #MainMenu, footer, header, .viewerBadge_container__1QSob, .stDeployButton {
-        display: none !important;
-    }
-    
-    div[data-testid="stVerticalBlock"] {
-        gap: 0.5rem !important;
-    }
-    
-    /* Ajustements espacement */
-    .st-emotion-cache-1kyxreq {
-        margin-top: -1rem !important;
+/* Styles pour l'iframe adaptatif */
+.iframe-container {
+    position: relative;
+    width: 100%;
+    height: 0;
+    padding-top: 80%; /* Ratio 4:5 pour l'iframe */
+    overflow: hidden;
+}
+
+.iframe-container iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+}
+
+/* Ajustements responsifs */
+@media (max-width: 1280px) {
+    #fraktur-root {
+        width: 80%;
     }
-    
-    .st-emotion-cache-1wmy9hl {
-        padding: 0 !important;
+    .iframe-container {
+        padding-top: 90%;
     }
-</style>
-""", unsafe_allow_html=True)
+}
 
-@st.cache_resource
-def load_models():
-    return {
-        "KnochenAuge": pipeline("object-detection", model="D3STRON/bone-fracture-detr"),  # L'œil des os
-        "KnochenWächter": pipeline("image-classification", model="Heem2/bone-fracture-detection-using-xray"),  # Le gardien des os
-        "RöntgenMeister": pipeline("image-classification",  # Le maître des rayons X
-            model="nandodeomkar/autotrain-fracture-detection-using-google-vit-base-patch-16-54382127388")
+@media (max-width: 768px) {
+    #fraktur-root {
+        width: 95%;
+        min-width: 0;
     }
-
-def translate_label(label):
-    translations = {
-        "fracture": "Knochenbruch",
-        "no fracture": "Kein Bruch",
-        "normal": "Normal",
-        "abnormal": "Auffällig"
+    .iframe-container {
+        padding-top: 100%;
     }
-    return translations.get(label.lower(), label)
-
-def draw_boxes(image, predictions):
-    draw = ImageDraw.Draw(image)
-    for pred in predictions:
-        box = pred['box']
-        label = f"{translate_label(pred['label'])} ({pred['score']:.2%})"
-        color = "#2563eb" if pred['score'] > 0.7 else "#eab308"
-        
-        draw.rectangle(
-            [(box['xmin'], box['ymin']), (box['xmax'], box['ymax'])],
-            outline=color,
-            width=2
-        )
-        
-        text_bbox = draw.textbbox((box['xmin'], box['ymin']-15), label)
-        draw.rectangle(text_bbox, fill=color)
-        draw.text((box['xmin'], box['ymin']-15), label, fill="white")
-    return image
+}
+</style>
 
-def main():
-    models = load_models()
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const iframe = document.getElementById('frakturFrame');
     
-    # Contrôle de confiance compact
-    conf_threshold = st.slider(
-        "Konfidenzschwelle",
-        min_value=0.0, max_value=1.0,
-        value=0.60, step=0.05
-    )
+    function updateTheme() {
+        const isDark = document.documentElement.classList.contains('dark');
+        iframe.contentWindow.postMessage({
+            type: 'theme-change',
+            theme: isDark ? 'dark' : 'light'
+        }, '*');
+    }
     
-    # Upload plus propre
-    uploaded_file = st.file_uploader("", type=['png', 'jpg', 'jpeg'])
-
-    if uploaded_file:
-        image = Image.open(uploaded_file)
-        max_size = (250, 250)  # Taille réduite
-        image.thumbnail(max_size, Image.Resampling.LANCZOS)
-
-        tab1, tab2 = st.tabs(["📊 KI-Analyse", "🔍 Lokalisierung"])
-        
-        with tab1:
-            # Afficher l'image originale seulement dans l'onglet Analyse
-            st.image(image, use_container_width=False)
-            
-            model_names = {
-                "KnochenWächter": "🛡️ Der KnochenWächter",
-                "RöntgenMeister": "🎓 Der RöntgenMeister"
+    const observer = new MutationObserver((mutations) => {
+        mutations.forEach((mutation) => {
+            if (mutation.attributeName === 'class') {
+                updateTheme();
             }
-            
-            for model_key, display_name in model_names.items():
-                st.markdown(f"<div style='font-weight:500; margin-top:0.5rem;'>{display_name}</div>", unsafe_allow_html=True)
-                predictions = models[model_key](image)
-                for pred in predictions:
-                    if pred['score'] >= conf_threshold:
-                        score_color = "#22c55e" if pred['score'] > 0.7 else "#eab308"
-                        st.markdown(f"""
-                            <div class='result-box'>
-                                <span style='color: {score_color}; font-weight: 500;'>
-                                    {pred['score']:.1%}
-                                </span> - {translate_label(pred['label'])}
-                            </div>
-                        """, unsafe_allow_html=True)
+        });
+    });
 
-        with tab2:
-            # Dans l'onglet Lokalisierung, montrer directement l'image avec les boîtes
-            with st.spinner("Analyse läuft..."):
-                predictions = models["KnochenAuge"](image)
-                filtered_preds = [p for p in predictions if p['score'] >= conf_threshold]
-                
-                if filtered_preds:
-                    result_image = image.copy()
-                    result_image = draw_boxes(result_image, filtered_preds)
-                    st.markdown("### 👁️ Das KnochenAuge")
-                    st.image(result_image, use_container_width=False)
-                else:
-                    st.info("Keine Auffälligkeiten erkannt")
-
-    else:
-        st.info("Röntgenbild hochladen (JPEG, PNG)")
-
-    # Script pour la synchronisation du thème
-    st.markdown("""
-        <script>
-            function updateTheme(isDark) {
-                document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
-            }
-            
-            window.addEventListener('message', function(e) {
-                if (e.data.type === 'theme-change') {
-                    updateTheme(e.data.theme === 'dark');
-                }
-            });
-            
-            // Thème initial
-            updateTheme(window.matchMedia('(prefers-color-scheme: dark)').matches);
-        </script>
-    """, unsafe_allow_html=True)
+    observer.observe(document.documentElement, {
+        attributes: true,
+        attributeFilter: ['class']
+    });
+    
+    iframe.addEventListener('load', updateTheme);
+});
+</script>
 
-if __name__ == "__main__":
-    main()
+<?php include 'includes/footer.php'; ?>