Update app.py

app.py

@@ -41,10 +41,6 @@ def generate_qrcode(link):
 def add_custom_css():
     css = """
     <style>
-        stApp {
-            background: linear-gradient(to bottom, #87CEEB, #FFFFFF);  /* Dégradé du bleu clair (#87CEEB) vers le blanc (#FFFFFF) */
-        }
-        
         body {
             background: linear-gradient(135deg, #a8dadc, #f1faee);
             color: #1d3557;
@@ -75,7 +71,7 @@ def add_custom_css():
         }
 
         .stSidebar {
-            background: linear-gradient(135deg, #457b9d, #a8dadc);
+            background: linear-gradient(to bottom, #87CEEB, #FFFFFF);
             color: white;
             font-size: 16px;
         }
@@ -197,13 +193,32 @@ def main():
             unsafe_allow_html=True
         )
 
+    # Niveaux de couleurs
     elif menu_option == "Niveaux de couleurs":
         st.subheader("Niveaux de couleurs")
 
+        # Instructions générales sur les niveaux de couleurs
+        st.markdown("""
+        ### Légende : Fonctionnement des niveaux de couleurs
+        - **Les niveaux de couleurs** permettent de manipuler les différentes composantes d'une image : **Rouge**, **Vert**, **Bleu**.
+        - L'édition des canaux colorimétriques permet de visualiser une image en mettant en valeur une couleur spécifique.
+        
+        ### Options disponibles :
+        - **Niveaux de Gris** : Convertit l'image en une seule nuance de gris, supprimant les informations de couleur.
+        - **Rouge** : Filtre l'image pour ne conserver que la composante rouge.
+        - **Vert** : Filtre l'image pour ne conserver que la composante verte.
+        - **Jaune** : Combine les composantes rouge et verte pour donner une teinte jaune.
+
+        ### Exemple :
+        - Si vous choisissez l'option **Rouge**, vous obtiendrez une image où seules les nuances rouges sont visibles, les autres couleurs étant supprimées.
+        """)
+
+        # Création des onglets pour afficher les images dans différentes couleurs
         tab1, tab2, tab3, tab4 = st.tabs([
             "Gris 🖤", "Rouge ❤️", "Vert 💚", "Jaune 💛"
         ])
 
+        # Onglet 1 : Gris
         with tab1:
             gray_image = cv2.cvtColor(image_np, cv2.COLOR_BGR2GRAY)
             st.image(gray_image, caption="Image en Niveaux de Gris", use_container_width=True)
@@ -213,9 +228,11 @@ def main():
                 file_name="image_gris.png",
                 mime="image/png"
             )
+
+        # Onglet 2 : Rouge
         with tab2:
             red = image_np.copy()
-            red[:, :, 1:] = 0
+            red[:, :, 1:] = 0  # On met les canaux vert et bleu à zéro
             st.image(red, caption="Image Rouge", use_container_width=True)
             st.download_button(
                 label="Télécharger l'image rouge",
@@ -223,9 +240,11 @@ def main():
                 file_name="image_rouge.png",
                 mime="image/png"
             )
+
+        # Onglet 3 : Vert
         with tab3:
             green = image_np.copy()
-            green[:, :, [0, 2]] = 0
+            green[:, :, [0, 2]] = 0  # On met les canaux rouge et bleu à zéro
             st.image(green, caption="Image Verte", use_container_width=True)
             st.download_button(
                 label="Télécharger l'image verte",
@@ -233,9 +252,11 @@ def main():
                 file_name="image_verte.png",
                 mime="image/png"
             )
+
+        # Onglet 4 : Jaune
         with tab4:
             yellow = image_np.copy()
-            yellow[:, :, 0] = 0
+            yellow[:, :, 0] = 0  # On supprime la composante bleue
             st.image(yellow, caption="Image Jaune", use_container_width=True)
             st.download_button(
                 label="Télécharger l'image jaune",
@@ -245,16 +266,26 @@ def main():
             )
 
     elif menu_option == "Cropping":
-        st.subheader("Cropping")
+        st.subheader("Cropping - Recadrage d'Image")
 
         # Explications pour les paramètres
         st.markdown(
             """
             ### Légende : Fonctionnement du recadrage
+            Le recadrage d'une image consiste à extraire une portion rectangulaire de celle-ci. Pour cela, nous définissons les coordonnées des coins du rectangle :
+
             - **`x1` (Coordonnée x du coin supérieur gauche)** : Position horizontale du début du rectangle (0 ≤ `x1` < largeur-1).
             - **`y1` (Coordonnée y du coin supérieur gauche)** : Position verticale du début du rectangle (0 ≤ `y1` < hauteur-1).
             - **`x2` (Coordonnée x du coin inférieur droit)** : Position horizontale de la fin du rectangle (1 ≤ `x2` ≤ largeur).
             - **`y2` (Coordonnée y du coin inférieur droit)** : Position verticale de la fin du rectangle (1 ≤ `y2` ≤ hauteur).
+
+            ### Exemple illustratif :
+            Imaginons que vous avez une image de 300x300 pixels. Si vous entrez `x1=50`, `y1=50`, `x2=200`, et `y2=200`, l'image sera recadrée en un rectangle de taille 150x150 pixels, commençant à partir du pixel (50, 50) jusqu'à (200, 200).
+
+            ### Étapes :
+            1. Saisissez les coordonnées du rectangle que vous souhaitez extraire.
+            2. Vous verrez une prévisualisation de la zone sélectionnée avant de la confirmer.
+            3. Téléchargez l'image recadrée.
             """
         )
 
@@ -271,32 +302,62 @@ def main():
             elif y1 >= y2:
                 st.error("`y2` doit être strictement supérieur à `y1`. Veuillez corriger vos entrées.")
             else:
-                # Recadrage de l'image
-                cropped = image_np[int(y1):int(y2), int(x1):int(x2)]
-                st.image(cropped, caption="Image Croppée", use_container_width=True)
-                
-                # Bouton de téléchargement
-                st.download_button(
-                    label="Télécharger l'image croppée",
-                    data=image_to_bytes(cropped),
-                    file_name="image_cropped.png",
-                    mime="image/png"
-                )
+                # Calcul des dimensions du recadrage
+                cropped_width = x2 - x1
+                cropped_height = y2 - y1
+
+                # Bouton pour générer l'image recadrée
+                if st.button("Générer le Recadrage"):
+                    # Recadrage de l'image
+                    cropped = image_np[int(y1):int(y2), int(x1):int(x2)]
+
+                    # Affichage de l'image recadrée
+                    st.image(cropped, caption="Image Croppée", use_container_width=True)
+
+                    # Affichage des informations sur la taille du rectangle
+                    st.write(f"Le rectangle recadré mesure {cropped_width} pixels de large et {cropped_height} pixels de haut.")
+
+                    # Bouton de téléchargement pour l'image recadrée
+                    st.download_button(
+                        label="⬇️ Télécharger l'image croppée",
+                        data=image_to_bytes(cropped),
+                        file_name="image_cropped.png",
+                        mime="image/png"
+                    )
 
         except Exception as e:
             st.error(f"Une erreur est survenue : {e}")
 
+    # Rotation
     elif menu_option == "Rotation":
         st.subheader("Rotation")
 
+        # Instructions sur la rotation
+        st.markdown("""
+        ### Légende : Fonctionnement de la rotation
+        - La **rotation** d'une image consiste à tourner l'image autour de son centre selon un angle défini.
+        - Vous pouvez choisir un angle prédéfini pour faire pivoter l'image à gauche ou à droite.
+        
+        ### Options disponibles :
+        - Choisissez un angle parmi les options proposées : **45°, 90° ou 180°**.
+        - L'image sera ensuite tournée dans le sens des aiguilles d'une montre.
+
+        ### Exemple :
+        - Si vous choisissez un angle de **90°**, l'image sera pivotée de 90 degrés dans le sens des aiguilles d'une montre par rapport à son centre.
+        """)
+        
+        # Sélection de l'angle de rotation
         angle = st.selectbox("Angle de rotation", [45, 90, 180])
 
+        # Calcul des dimensions et application de la rotation
         rows, cols, _ = image_np.shape
         rotation_matrix = cv2.getRotationMatrix2D((cols / 2, rows / 2), angle, 1)
         rotated = cv2.warpAffine(image_np, rotation_matrix, (cols, rows))
+
+        # Affichage de l'image après rotation
         st.image(rotated, caption=f"Image Rotée de {angle} degrés", use_container_width=True)
-        
-        # Bouton de téléchargement
+
+        # Bouton de téléchargement pour l'image rotée
         st.download_button(
             label="Télécharger l'image rotée",
             data=image_to_bytes(rotated),
@@ -304,14 +365,34 @@ def main():
             mime="image/png"
         )
 
+    # Floutage
     elif menu_option == "Floutage":
         st.subheader("Floutage")
 
+        # Instructions sur le floutage
+        st.markdown("""
+        ### Légende : Fonctionnement du floutage
+        - Le **floutage** est utilisé pour adoucir une image en réduisant les détails fins, ce qui est utile pour l'anonymisation ou pour appliquer des effets esthétiques.
+        - Vous pouvez ajuster l'intensité du flou en fonction du niveau choisi.
+
+        ### Options disponibles :
+        - Le **Niveau de flou (k)** détermine l'intensité du flou appliqué. Plus la valeur est élevée, plus l'image sera floutée.
+        - Les valeurs sont comprises entre 1 (très léger flou) et 51 (flou maximal), et doivent être des nombres impairs.
+
+        ### Exemple :
+        - Si vous choisissez **k = 15**, l'image sera floutée de manière modérée, et vous pourrez voir l'effet de réduction de détails.
+        """)
+        
+        # Sélection du niveau de flou
         blur_level = st.slider("Niveau de flou (k)", min_value=1, max_value=51, step=2, value=15)
+
+        # Application du flou sur l'image
         blurred = cv2.GaussianBlur(image_np, (blur_level, blur_level), 0)
+
+        # Affichage de l'image floutée
         st.image(blurred, caption=f"Image Floutée (k={blur_level})", use_container_width=True)
-        
-        # Bouton de téléchargement
+
+        # Bouton de téléchargement pour l'image floutée
         st.download_button(
             label="Télécharger l'image floutée",
             data=image_to_bytes(blurred),
@@ -319,13 +400,32 @@ def main():
             mime="image/png"
         )
 
+    # Détection des contours
     elif menu_option == "Contours":
         st.subheader("Contours")
 
+        # Instructions sur la détection des contours
+        st.markdown("""
+        ### Légende : Fonctionnement de la détection de contours
+        - La **détection de contours** consiste à identifier les bords distincts de l'image, ce qui permet de mieux comprendre les structures présentes.
+        - Elle est souvent utilisée dans des traitements d'image avancés comme la reconnaissance d'objets ou l'analyse d'images.
+
+        ### Options disponibles :
+        - L'image sera convertie en niveaux de gris, et ensuite un algorithme de détection de contours (Canny) sera appliqué pour extraire les bords de l'image.
+        - Cela permet de visualiser les contours dans des images complexes.
+
+        ### Exemple :
+        - Après l'application de l'algorithme Canny, l'image ne contient que les contours des objets, ce qui peut être utilisé pour détecter des formes, des objets ou d'autres détails visuels importants.
+        """)
+        
+        # Conversion de l'image en niveaux de gris pour la détection des contours
         gray = cv2.cvtColor(image_np, cv2.COLOR_BGR2GRAY)
         edges = cv2.Canny(gray, 100, 200)
+
+        # Affichage de l'image avec les contours détectés
         st.image(edges, caption="Contours de l'Image", use_container_width=True)
-        # Bouton de téléchargement
+
+        # Bouton de téléchargement pour l'image avec contours
         st.download_button(
             label="Télécharger l'image avec contours",
             data=image_to_bytes(edges),