Docfile commited on
Commit
367e465
·
verified ·
1 Parent(s): 25f0e13

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +96 -107
app.py CHANGED
@@ -1,6 +1,4 @@
1
  import streamlit as st
2
- from PIL import Image
3
- import numpy as np
4
 
5
  # Configuration de la page
6
  st.set_page_config(
@@ -10,135 +8,126 @@ st.set_page_config(
10
  initial_sidebar_state="expanded"
11
  )
12
 
13
- # --- Fonctions pour effets visuels ---
14
- def gradient_background(start_color, end_color):
15
- """Génère un fond dégradé."""
16
- st.markdown(
17
- f"""
18
- <style>
19
- body {{
20
- background: linear-gradient(to right, {start_color}, {end_color});
21
- background-size: 120% 120%;
22
- animation: gradient 5s ease infinite;
23
- }}
24
- @keyframes gradient {{
25
- 0% {{ background-position: 0% 50%; }}
26
- 50% {{ background-position: 100% 50%; }}
27
- 100% {{ background-position: 0% 50%; }}
28
- }}
29
- </style>
30
- """,
31
- unsafe_allow_html=True
32
- )
33
-
34
- def neon_effect(text, color):
35
- """Ajoute un effet néon à un texte."""
36
- return f"<span style='color: {color}; text-shadow: 0 0 5px {color};'>{text}</span>"
37
-
38
- # --- Couleurs ---
39
- start_color = "#0078D7" # Bleu Microsoft
40
- end_color = "#00B294" # Vert émeraude
41
- text_color = "#FFFFFF" # Blanc
42
- neon_blue = "#66CCFF" # Bleu néon
43
-
44
- # --- Appliquer le fond dégradé ---
45
- gradient_background(start_color, end_color)
46
-
47
- # --- CSS Personnalisé ---
48
  st.markdown(
49
- f"""
50
  <style>
51
- .stApp {{
52
- font-family: 'Segoe UI', sans-serif;
53
- }}
54
- .stFileUploader {{
55
- padding: 1.5rem;
56
- border: 3px dashed {neon_blue};
57
- border-radius: 1rem;
58
- }}
59
- .stRadio>div>label {{
60
- font-weight: 600;
61
- color: {text_color};
62
  padding: 0.75rem 1.5rem;
63
- margin-bottom: 0.5rem;
64
  border-radius: 0.5rem;
65
- border: 2px solid {neon_blue};
66
- background-color: rgba(0, 0, 0, 0.2);
67
- }}
68
- .stRadio>div>label:hover {{
69
- background-color: {neon_blue};
70
- color: black;
71
- }}
72
- .stButton>button {{
73
- background-color: {neon_blue};
74
- color: black;
75
- padding: 0.75rem 1.5rem;
76
  border-radius: 0.5rem;
 
 
77
  font-weight: bold;
78
- box-shadow: 0 0 10px {neon_blue};
79
- transition: all 0.3s ease;
80
- }}
81
- .stButton>button:hover {{
82
- transform: scale(1.05);
83
- box-shadow: 0 0 15px {neon_blue};
84
- }}
85
- .st-bb {{
86
- border-bottom: 3px solid {neon_blue};
87
- }}
88
- .st-eb, .st-ec, .st-ed, .st-ee, .st-ef, .st-eg, .st-eh, .st-ei, .st-ej {{
89
- color: {text_color};
90
- }}
91
- .uploadedFiles {{
92
- color: {neon_blue}
93
- }}
94
- .uploadedFile {{
95
- color: {neon_blue};
96
  font-weight: bold;
97
- }}
 
 
 
 
98
  </style>
99
  """,
100
  unsafe_allow_html=True
101
  )
102
 
103
- # --- Titre avec effet néon ---
104
- st.title(neon_effect("✨ Mariam Anglais ✨", neon_blue))
105
-
106
- # --- Introduction ---
107
- 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)
 
 
 
 
 
 
 
 
 
 
 
 
108
 
109
- # --- Colonnes ---
110
- col1, col2 = st.columns(2)
111
 
112
  with col1:
113
- # --- Téléchargement d'images ---
114
- uploaded_files = st.file_uploader("Choisissez des images", type=["jpg", "jpeg", "png"], accept_multiple_files=True)
 
115
 
116
- # --- Effet sur les images téléchargées ---
117
  if uploaded_files:
118
- st.write(f"<p style='color: {neon_blue}; font-weight: bold; font-size: 1.1rem;'>Aperçu des images :</p>", unsafe_allow_html=True)
119
- for uploaded_file in uploaded_files:
120
- img = Image.open(uploaded_file)
121
- img = np.array(img)
122
- st.image(img, width=200, use_column_width='auto', output_format='JPEG')
 
 
 
 
123
 
124
  with col2:
125
- # --- Choix du type d'analyse avec effet néon ---
126
- analysis_type = st.radio("Choisissez le type d'analyse :",
127
- (neon_effect("🔍 Type 1", neon_blue), neon_effect("🧠 Type 2", neon_blue)))
 
 
 
 
 
 
 
 
128
 
129
- # --- Bouton de soumission avec effet néon ---
130
- if st.button("🚀 Soumettre"):
131
  if uploaded_files:
132
- st.write(f"<p style='color: {text_color};'>Type d'analyse sélectionné : {analysis_type}</p>", unsafe_allow_html=True)
133
- with st.spinner(neon_effect("Analyse en cours...", neon_blue)):
 
134
  # Insérez ici le code pour effectuer l'analyse d'image
 
 
135
  import time
136
- time.sleep(3)
 
 
 
137
 
138
- st.success(neon_effect("✅ Analyse terminée !", neon_blue))
139
  else:
140
- st.warning(neon_effect("⚠️ Veuillez télécharger au moins une image.", neon_blue))
141
 
142
- # --- Pied de page ---
143
  st.markdown("---")
144
- st.write(f"<p style='color: {text_color};'>© 2023 Mariam Anglais - Tous droits réservés.</p>", unsafe_allow_html=True)
 
1
  import streamlit as st
 
 
2
 
3
  # Configuration de la page
4
  st.set_page_config(
 
8
  initial_sidebar_state="expanded"
9
  )
10
 
11
+ # CSS personnalisé pour un design plus esthétique
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  st.markdown(
13
+ """
14
  <style>
15
+ body {
16
+ background-color: #f4f4f4;
17
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Police plus moderne */
18
+ }
19
+ .stButton>button {
20
+ background-color: #4CAF50;
21
+ color: white;
 
 
 
 
22
  padding: 0.75rem 1.5rem;
 
23
  border-radius: 0.5rem;
24
+ font-weight: bold;
25
+ transition: all 0.2s ease-in-out; /* Animation au survol */
26
+ }
27
+ .stButton>button:hover {
28
+ background-color: #3e8e41; /* Couleur plus foncée au survol */
29
+ box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Ombre au survol */
30
+ transform: translateY(-2px); /* Légère élévation au survol */
31
+ }
32
+ .stFileUploader {
33
+ padding: 1rem;
34
+ border: 2px dashed #4CAF50;
35
  border-radius: 0.5rem;
36
+ }
37
+ .stRadio>div>label {
38
  font-weight: bold;
39
+ }
40
+ .st-bb {
41
+ border-bottom: 2px solid #4CAF50;
42
+ }
43
+ .st-el { /* Pour les messages d'avertissement et de succès */
44
+ border-radius: 0.5rem;
45
+ padding: 0.75rem;
46
+ }
47
+ .st-ek { /* Zone de texte */
48
+ border-radius: 0.5rem;
49
+ }
50
+ .st-ef { /* Titres */
 
 
 
 
 
 
51
  font-weight: bold;
52
+ color: #267629;
53
+ }
54
+ .stProgress>div>div>div>div {
55
+ background-color: #4CAF50;
56
+ }
57
  </style>
58
  """,
59
  unsafe_allow_html=True
60
  )
61
 
62
+ # Titre et introduction avec effet d'animation
63
+ st.markdown(
64
+ """
65
+ <h1 style='text-align: center; color: #267629; font-size: 3em; font-weight: bold;'>
66
+ <span style='opacity: 0; animation: fadeIn 1s ease-in-out forwards;'>✨ Mariam Anglais ✨</span>
67
+ </h1>
68
+ <style>
69
+ @keyframes fadeIn {
70
+ from { opacity: 0; }
71
+ to { opacity: 1; }
72
+ }
73
+ </style>
74
+ """,
75
+ unsafe_allow_html=True
76
+ )
77
+ st.markdown("<br>", unsafe_allow_html=True) # Espace
78
+ 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.")
79
 
80
+ # Colonnes pour une meilleure disposition
81
+ col1, col2 = st.columns(2, gap="large") # Ajout d'un gap plus grand
82
 
83
  with col1:
84
+ # Section de téléchargement d'images
85
+ st.subheader("📷 Téléchargement d'images")
86
+ uploaded_files = st.file_uploader("", type=["jpg", "jpeg", "png"], accept_multiple_files=True, label_visibility="collapsed") # Label caché
87
 
88
+ # Aperçu des images téléchargées avec possibilité de les supprimer individuellement
89
  if uploaded_files:
90
+ st.write("Aperçu des images :")
91
+ for i, uploaded_file in enumerate(uploaded_files):
92
+ col_img, col_del = st.columns([4, 1]) # Colonnes pour l'image et le bouton de suppression
93
+ with col_img:
94
+ st.image(uploaded_file, width=200, caption=f"Image {i+1}")
95
+ with col_del:
96
+ if st.button(f"🗑️", key=f"del_{i}"):
97
+ del uploaded_files[i]
98
+ st.experimental_rerun()
99
 
100
  with col2:
101
+ # Section de choix du type d'analyse
102
+ st.subheader("🎛️ Choix du type d'analyse")
103
+ analysis_type = st.radio("",
104
+ ("🔍 Type 1: Analyse de base", "🧠 Type 2: Analyse approfondie"), label_visibility="collapsed")
105
+
106
+ # Description des types d'analyse (cachée par défaut, visible en cliquant)
107
+ with st.expander("ℹ️ En savoir plus sur les types d'analyse"):
108
+ if analysis_type == "🔍 Type 1: Analyse de base":
109
+ st.write("L'analyse de base effectue une reconnaissance d'objets simple et rapide.")
110
+ else:
111
+ st.write("L'analyse approfondie utilise des algorithmes d'intelligence artificielle avancés pour une analyse plus précise et détaillée.")
112
 
113
+ # Bouton de soumission
114
+ if st.button("🚀 Soumettre", key="submit"):
115
  if uploaded_files:
116
+ st.write("Type d'analyse sélectionné :", analysis_type)
117
+ progress_bar = st.progress(0)
118
+ for percent_complete in range(101):
119
  # Insérez ici le code pour effectuer l'analyse d'image
120
+ # en fonction du type d'analyse choisi.
121
+ # Simule un traitement pour l'exemple
122
  import time
123
+ time.sleep(0.05)
124
+ progress_bar.progress(percent_complete)
125
+ if percent_complete == 100:
126
+ st.success("✅ Analyse terminée !")
127
 
 
128
  else:
129
+ st.warning("⚠️ Veuillez télécharger au moins une image.")
130
 
131
+ # Pied de page
132
  st.markdown("---")
133
+ st.write("© 2024 Mariam Anglais - Tous droits réservés.")