Update app.py

app.py

@@ -3,33 +3,52 @@ from transformers import pipeline
 from PIL import Image, ImageDraw
 import numpy as np
 import colorsys
-import os
 
-# Configuration des en-têtes pour WebSocket
-os.environ['STREAMLIT_SERVER_WEBSOCKET_HEADERS'] = '{"Access-Control-Allow-Origin": "*"}'
-os.environ['STREAMLIT_SERVER_ENABLE_CORS'] = 'true'
-
-# Configuration de la page
+# Configuration pour HuggingFace Spaces
 st.set_page_config(
     page_title="Fraktur Detektion",
     layout="wide",
     initial_sidebar_state="collapsed"
 )
 
-# Script pour gérer les WebSockets sur Edge
-st.markdown("""
-<script>
-    if (window.WebSocket && navigator.userAgent.indexOf("Edge") > -1) {
-        const originalWebSocket = window.WebSocket;
-        window.WebSocket = function(url, protocols) {
-            if (url.includes('_stcore/stream')) {
-                url = url.replace('wss://', 'ws://');
-            }
-            return new originalWebSocket(url, protocols);
-        };
-    }
-</script>
-""", unsafe_allow_html=True)
+# Script pour gérer les WebSockets
+st.components.v1.html("""
+    <script>
+        // Fonction pour corriger la connexion WebSocket
+        function fixWebSocketConnection() {
+            const originalWebSocket = window.WebSocket;
+            window.WebSocket = function(url, protocols) {
+                if (url.includes('_stcore/stream')) {
+                    const newUrl = new URL(url);
+                    newUrl.pathname = '/_stcore/stream';
+                    url = newUrl.toString();
+                }
+                return new originalWebSocket(url, protocols);
+            };
+        }
+
+        // Configuration du WebSocket pour Edge et autres navigateurs
+        if (window.WebSocket) {
+            fixWebSocketConnection();
+            
+            // Gérer la reconnexion en cas d'erreur
+            window.addEventListener('load', function() {
+                const maxRetries = 5;
+                let retryCount = 0;
+                
+                function tryConnection() {
+                    if (retryCount < maxRetries) {
+                        fixWebSocketConnection();
+                        retryCount++;
+                        setTimeout(tryConnection, 2000);
+                    }
+                }
+                
+                tryConnection();
+            });
+        }
+    </script>
+""", height=0)
 
 st.markdown("""
 <style>
@@ -118,27 +137,28 @@ st.markdown("""
         display: none !important;
     }
 
-    /* Fix for WebSocket connection issues */
+    /* Fix pour les iframes et WebSocket */
     iframe {
-        visibility: hidden;
+        display: block !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+    }
+
+    .st-emotion-cache-1yiq2ps {
+        overflow: visible !important;
+    }
+
+    .st-emotion-cache-1dp5vir {
+        display: none !important;
     }
-</style>
 
-<script>
-    // Fix for WebSocket connection
-    window.addEventListener('load', function() {
-        setTimeout(function() {
-            const frames = document.getElementsByTagName('iframe');
-            for (let frame of frames) {
-                frame.style.visibility = 'visible';
-            }
-        }, 1000);
-    });
-</script>
+    .st-emotion-cache-r421ms {
+        z-index: 999999 !important;
+    }
+</style>
 """, unsafe_allow_html=True)
 
-# Configuration du cache pour les modèles
-@st.cache_resource(show_spinner=False)
+@st.cache_resource
 def load_models():
     return {
         "KnochenAuge": pipeline("object-detection", model="D3STRON/bone-fracture-detr"),