Update app.py

app.py

@@ -1,6 +1,6 @@
 import streamlit as st
 from PIL import Image
-import time
+import numpy as np
 
 # Configuration de la page
 st.set_page_config(
@@ -10,176 +10,135 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# --- Fonctions de simulation d'analyse ---
-def simulate_analysis_type_1(image):
-    """Simule une analyse de type 1."""
-    time.sleep(2)  # Simule un traitement
-    # Ici, vous ajouteriez le code pour traiter l'image avec le type 1
-    st.write("Résultats de l'analyse de type 1 (simulation) :")
-    # Exemple : détection d'objets (simulation)
-    st.image(image, caption="Image avec détection d'objets (simulation)")
-    st.write("Objets détectés : voiture (80%), personne (70%), route (90%)")
+# --- Fonctions pour effets visuels ---
+def gradient_background(start_color, end_color):
+    """Génère un fond dégradé."""
+    st.markdown(
+        f"""
+        <style>
+        body {{
+            background: linear-gradient(to right, {start_color}, {end_color});
+            background-size: 120% 120%;
+            animation: gradient 5s ease infinite;
+        }}
+        @keyframes gradient {{
+            0% {{ background-position: 0% 50%; }}
+            50% {{ background-position: 100% 50%; }}
+            100% {{ background-position: 0% 50%; }}
+        }}
+        </style>
+        """,
+        unsafe_allow_html=True
+    )
+
+def neon_effect(text, color):
+    """Ajoute un effet néon à un texte."""
+    return f"<span style='color: {color}; text-shadow: 0 0 5px {color};'>{text}</span>"
 
-def simulate_analysis_type_2(image):
-    """Simule une analyse de type 2."""
-    time.sleep(3)  # Simule un traitement plus long
-    # Ici, vous ajouteriez le code pour traiter l'image avec le type 2
-    st.write("Résultats de l'analyse de type 2 (simulation) :")
-    # Exemple : analyse de texte (simulation)
-    st.image(image, caption="Image avec analyse de texte (simulation)")
-    st.write("Texte détecté : 'Welcome to London' (95%)")
+# --- Couleurs ---
+start_color = "#0078D7"  # Bleu Microsoft
+end_color = "#00B294"    # Vert émeraude
+text_color = "#FFFFFF"  # Blanc
+neon_blue = "#66CCFF"    # Bleu néon
+
+# --- Appliquer le fond dégradé ---
+gradient_background(start_color, end_color)
 
 # --- CSS Personnalisé ---
 st.markdown(
-    """
+    f"""
     <style>
-    body {
-        background-color: #f8f8f8; /* Fond légèrement plus clair */
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police plus moderne */
-    }
-    /* Titre principal */
-    .title {
-        color: #2c3e50; /* Bleu foncé */
-        text-align: center;
-        font-size: 3.5em;
-        font-weight: 800;
-        padding: 0.5em;
-        margin-bottom: 0.5em;
-        background-color: #ecf0f1; /* Fond gris clair */
-        border-radius: 10px; /* Coins arrondis */
-        box-shadow: 3px 3px 5px #888888; /* Ombre légère */
-    }
-    /* Introduction */
-    .intro {
-        text-align: center;
-        font-size: 1.3em;
-        margin-bottom: 2em;
-        color: #34495e; /* Gris bleu */
-    }
-    /* Conteneurs */
-    .container {
-        background-color: white;
-        border-radius: 10px;
-        padding: 1.5em;
-        margin-bottom: 1em;
-        box-shadow: 2px 2px 4px #888888;
-    }
-    /* Bouton */
-    .stButton>button {
-        background-color: #007bff; /* Bleu vif */
-        color: white;
-        padding: 0.8em 1.8em;
-        border-radius: 25px; /* Coins très arrondis */
-        font-weight: 600;
-        font-size: 1.1em;
-        transition: all 0.3s ease; /* Transition douce */
-    }
-    .stButton>button:hover {
-        background-color: #0056b3; /* Bleu plus foncé au survol */
-        transform: translateY(-2px); /* Léger déplacement vers le haut */
-        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Ombre plus prononcée au survol */
-    }
-    /* Uploader de fichiers */
-    .stFileUploader {
-        padding: 1.5em;
-        border: 2px dashed #007bff;
-        border-radius: 10px;
-    }
-    /* Radio buttons */
-    .stRadio>div>label {
+    .stApp {{
+        font-family: 'Segoe UI', sans-serif;
+    }}
+    .stFileUploader {{
+        padding: 1.5rem;
+        border: 3px dashed {neon_blue};
+        border-radius: 1rem;
+    }}
+    .stRadio>div>label {{
         font-weight: 600;
-        color: #2c3e50;
-        font-size: 1.1em;
-        padding: 0.5em 0;
-    }
-    .stRadio>div>label>div>p {
-        font-size: 1em; /* Texte descriptif plus petit */
-        font-weight: 400;
-        color: #34495e;
-    }
-    /* Spinner */
-    .stSpinner {
-        text-align: center;
-        color: #007bff;
-    }
-    /* Messages */
-    .stSuccess, .stWarning, .stError {
-        border-radius: 10px;
-        padding: 1em;
-        font-weight: 600;
-    }
-    .stSuccess {
-        background-color: #d4edda;
-        border-color: #c3e6cb;
-        color: #155724;
-    }
-    .stWarning {
-        background-color: #fff3cd;
-        border-color: #ffeeba;
-        color: #856404;
-    }
-    /* Pied de page */
-    footer {
-        text-align: center;
-        margin-top: 2em;
-        color: #666;
-    }
+        color: {text_color};
+        padding: 0.75rem 1.5rem;
+        margin-bottom: 0.5rem;
+        border-radius: 0.5rem;
+        border: 2px solid {neon_blue};
+        background-color: rgba(0, 0, 0, 0.2);
+    }}
+    .stRadio>div>label:hover {{
+        background-color: {neon_blue};
+        color: black;
+    }}
+    .stButton>button {{
+        background-color: {neon_blue};
+        color: black;
+        padding: 0.75rem 1.5rem;
+        border-radius: 0.5rem;
+        font-weight: bold;
+        box-shadow: 0 0 10px {neon_blue};
+        transition: all 0.3s ease;
+    }}
+    .stButton>button:hover {{
+        transform: scale(1.05);
+        box-shadow: 0 0 15px {neon_blue};
+    }}
+    .st-bb {{
+        border-bottom: 3px solid {neon_blue};
+    }}
+    .st-eb, .st-ec, .st-ed, .st-ee, .st-ef, .st-eg, .st-eh, .st-ei, .st-ej {{
+        color: {text_color};
+    }}
+    .uploadedFiles {{
+        color: {neon_blue}
+    }}
+    .uploadedFile {{
+        color: {neon_blue};
+        font-weight: bold;
+    }}
     </style>
     """,
     unsafe_allow_html=True
 )
 
-# --- Titre et introduction ---
-st.markdown("<div class='title'>✨ Mariam Anglais ✨</div>", unsafe_allow_html=True)
-st.markdown("<div class='intro'>Votre plateforme d'analyse d'images intelligente et ultra-réaliste !</div>", unsafe_allow_html=True)
+# --- Titre avec effet néon ---
+st.title(neon_effect("✨ Mariam Anglais ✨", neon_blue))
+
+# --- Introduction ---
+st.markdown(f"<p style='color: {text_color}; font-size: 1.2rem;'>Bienvenue sur votre plateforme d'analyse d'images intelligente ! Téléchargez vos images, choisissez votre type d'analyse, et laissez la magie opérer.</p>", unsafe_allow_html=True)
 
-# --- Conteneurs pour une meilleure disposition ---
+# --- Colonnes ---
 col1, col2 = st.columns(2)
 
 with col1:
-    st.markdown("<div class='container'>", unsafe_allow_html=True)
-    # Téléchargement d'images
+    # --- Téléchargement d'images ---
     uploaded_files = st.file_uploader("Choisissez des images", type=["jpg", "jpeg", "png"], accept_multiple_files=True)
-    st.markdown("</div>", unsafe_allow_html=True)
 
-    # Aperçu des images téléchargées
+    # --- Effet sur les images téléchargées ---
     if uploaded_files:
-        st.markdown("<div class='container'>", unsafe_allow_html=True)
-        st.write("Aperçu des images :")
+        st.write(f"<p style='color: {neon_blue}; font-weight: bold; font-size: 1.1rem;'>Aperçu des images :</p>", unsafe_allow_html=True)
         for uploaded_file in uploaded_files:
-            st.image(uploaded_file, width=200)
-        st.markdown("</div>", unsafe_allow_html=True)
+            img = Image.open(uploaded_file)
+            img = np.array(img)
+            st.image(img, width=200, use_column_width='auto', output_format='JPEG')
 
 with col2:
-    st.markdown("<div class='container'>", unsafe_allow_html=True)
-    # Choix du type d'analyse
-    analysis_type = st.radio(
-        "Choisissez le type d'analyse :",
-        (
-            "🔍 Type 1: Détection d'objets",
-            "🧠 Type 2: Analyse de texte"
-        ),
-        format_func=lambda x: x.split(":")[1]  # Affiche uniquement la description
-    )
-    st.markdown("</div>", unsafe_allow_html=True)
+    # --- Choix du type d'analyse avec effet néon ---
+    analysis_type = st.radio("Choisissez le type d'analyse :",
+                             (neon_effect("🔍 Type 1", neon_blue), neon_effect("🧠 Type 2", neon_blue)))
 
-    # Bouton de soumission
-    st.markdown("<div class='container'>", unsafe_allow_html=True)
-    if st.button("🚀 Lancer l'analyse"):
+    # --- Bouton de soumission avec effet néon ---
+    if st.button("🚀 Soumettre"):
         if uploaded_files:
-            st.write("Type d'analyse sélectionné :", analysis_type.split(":")[1])
-            with st.spinner(f"Analyse de type {analysis_type.split(':')[0]} en cours..."):
-                # Traitement des images
-                for uploaded_file in uploaded_files:
-                    image = Image.open(uploaded_file)
-                    if "Type 1" in analysis_type:
-                        simulate_analysis_type_1(image)
-                    elif "Type 2" in analysis_type:
-                        simulate_analysis_type_2(image)
-            st.success("✅ Analyse terminée !")
+            st.write(f"<p style='color: {text_color};'>Type d'analyse sélectionné : {analysis_type}</p>", unsafe_allow_html=True)
+            with st.spinner(neon_effect("Analyse en cours...", neon_blue)):
+                # Insérez ici le code pour effectuer l'analyse d'image
+                import time
+                time.sleep(3)
+
+            st.success(neon_effect("✅ Analyse terminée !", neon_blue))
         else:
-            st.warning("⚠️ Veuillez télécharger au moins une image.")
-    st.markdown("</div>", unsafe_allow_html=True)
+            st.warning(neon_effect("⚠️ Veuillez télécharger au moins une image.", neon_blue))
 
 # --- Pied de page ---
-st.markdown("<footer>© 2023 Mariam Anglais - Tous droits réservés.</footer>", unsafe_allow_html=True)
+st.markdown("---")
+st.write(f"<p style='color: {text_color};'>© 2023 Mariam Anglais - Tous droits réservés.</p>", unsafe_allow_html=True)