Update app.py

app.py

@@ -1,6 +1,4 @@
 import streamlit as st
-from PIL import Image
-import numpy as np
 
 # Configuration de la page
 st.set_page_config(
@@ -10,135 +8,126 @@ st.set_page_config(
     initial_sidebar_state="expanded"
 )
 
-# --- 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>"
-
-# --- 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é ---
+# CSS personnalisé pour un design plus esthétique
 st.markdown(
-    f"""
+    """
     <style>
-    .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: {text_color};
+    body {
+        background-color: #f4f4f4;
+        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police plus moderne */
+    }
+    .stButton>button {
+        background-color: #4CAF50;
+        color: white;
         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;
+        font-weight: bold;
+        transition: all 0.2s ease-in-out; /* Animation au survol */
+    }
+    .stButton>button:hover {
+        background-color: #3e8e41; /* Couleur plus foncée au survol */
+        box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Ombre au survol */
+        transform: translateY(-2px); /* Légère élévation au survol */
+    }
+    .stFileUploader {
+        padding: 1rem;
+        border: 2px dashed #4CAF50;
         border-radius: 0.5rem;
+    }
+    .stRadio>div>label {
         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};
+    }
+    .st-bb {
+        border-bottom: 2px solid #4CAF50;
+    }
+    .st-el { /* Pour les messages d'avertissement et de succès */
+        border-radius: 0.5rem;
+        padding: 0.75rem;
+    }
+    .st-ek { /* Zone de texte */
+        border-radius: 0.5rem;
+    }
+    .st-ef { /* Titres */
         font-weight: bold;
-    }}
+        color: #267629;
+    }
+    .stProgress>div>div>div>div {
+        background-color: #4CAF50;
+    }
     </style>
     """,
     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)
+# Titre et introduction avec effet d'animation
+st.markdown(
+    """
+    <h1 style='text-align: center; color: #267629; font-size: 3em; font-weight: bold;'>
+        <span style='opacity: 0; animation: fadeIn 1s ease-in-out forwards;'>✨ Mariam Anglais ✨</span>
+    </h1>
+    <style>
+    @keyframes fadeIn {
+        from { opacity: 0; }
+        to { opacity: 1; }
+    }
+    </style>
+    """,
+    unsafe_allow_html=True
+)
+st.markdown("<br>", unsafe_allow_html=True)  # Espace
+st.write("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.")
 
-# --- Colonnes ---
-col1, col2 = st.columns(2)
+# Colonnes pour une meilleure disposition
+col1, col2 = st.columns(2, gap="large") # Ajout d'un gap plus grand
 
 with col1:
-    # --- Téléchargement d'images ---
-    uploaded_files = st.file_uploader("Choisissez des images", type=["jpg", "jpeg", "png"], accept_multiple_files=True)
+    # Section de téléchargement d'images
+    st.subheader("📷 Téléchargement d'images")
+    uploaded_files = st.file_uploader("", type=["jpg", "jpeg", "png"], accept_multiple_files=True, label_visibility="collapsed") # Label caché
 
-    # --- Effet sur les images téléchargées ---
+    # Aperçu des images téléchargées avec possibilité de les supprimer individuellement
     if uploaded_files:
-        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:
-            img = Image.open(uploaded_file)
-            img = np.array(img)
-            st.image(img, width=200, use_column_width='auto', output_format='JPEG')
+        st.write("Aperçu des images :")
+        for i, uploaded_file in enumerate(uploaded_files):
+            col_img, col_del = st.columns([4, 1]) # Colonnes pour l'image et le bouton de suppression
+            with col_img:
+                st.image(uploaded_file, width=200, caption=f"Image {i+1}")
+            with col_del:
+                if st.button(f"🗑️", key=f"del_{i}"):
+                    del uploaded_files[i]
+                    st.experimental_rerun()
 
 with col2:
-    # --- 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)))
+    # Section de choix du type d'analyse
+    st.subheader("🎛️ Choix du type d'analyse")
+    analysis_type = st.radio("",
+                            ("🔍 Type 1: Analyse de base", "🧠 Type 2: Analyse approfondie"), label_visibility="collapsed")
+
+    # Description des types d'analyse (cachée par défaut, visible en cliquant)
+    with st.expander("ℹ️ En savoir plus sur les types d'analyse"):
+        if analysis_type == "🔍 Type 1: Analyse de base":
+            st.write("L'analyse de base effectue une reconnaissance d'objets simple et rapide.")
+        else:
+            st.write("L'analyse approfondie utilise des algorithmes d'intelligence artificielle avancés pour une analyse plus précise et détaillée.")
 
-    # --- Bouton de soumission avec effet néon ---
-    if st.button("🚀 Soumettre"):
+    # Bouton de soumission
+    if st.button("🚀 Soumettre", key="submit"):
         if uploaded_files:
-            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)):
+            st.write("Type d'analyse sélectionné :", analysis_type)
+            progress_bar = st.progress(0)
+            for percent_complete in range(101):
                 # Insérez ici le code pour effectuer l'analyse d'image
+                # en fonction du type d'analyse choisi.
+                # Simule un traitement pour l'exemple
                 import time
-                time.sleep(3)
+                time.sleep(0.05)
+                progress_bar.progress(percent_complete)
+                if percent_complete == 100:
+                  st.success("✅ Analyse terminée !")
 
-            st.success(neon_effect("✅ Analyse terminée !", neon_blue))
         else:
-            st.warning(neon_effect("⚠️ Veuillez télécharger au moins une image.", neon_blue))
+            st.warning("⚠️ Veuillez télécharger au moins une image.")
 
-# --- Pied de page ---
+# Pied de page
 st.markdown("---")
-st.write(f"<p style='color: {text_color};'>© 2023 Mariam Anglais - Tous droits réservés.</p>", unsafe_allow_html=True)
+st.write("© 2024 Mariam Anglais - Tous droits réservés.")