Update app.py

app.py

@@ -5,11 +5,10 @@ from dotenv import load_dotenv
 import http.client
 import json
 import shutil
+import streamlit.components.v1 as components
 
 # Charger les variables d'environnement
 load_dotenv()
-
-# Configurer la clé API
 genai.configure(api_key=os.getenv("GOOGLE_API_KEY"))
 
 # Paramètres de sécurité
@@ -20,25 +19,21 @@ safety_settings = [
     {"category": "HARM_CATEGORY_DANGEROUS_CONTENT", "threshold": "BLOCK_NONE"},
 ]
 
-# Instructions système pour Mariam (inchangées pour brièveté, mais peuvent être affinées)
+# Instructions système (inchangées pour brièveté)
 ss = """
 # Prompt System pour Mariam, IA conçu par youssouf 
 [...]
 """
 
-# Initialisation du modèle
 model = genai.GenerativeModel('gemini-2.0-flash-exp', tools='code_execution',
                               safety_settings=safety_settings,
                               system_instruction=ss)
 
-# Fonction de recherche web
+# Fonctions de recherche web (inchangées)
 def perform_web_search(query):
     conn = http.client.HTTPSConnection("google.serper.dev")
     payload = json.dumps({"q": query})
-    headers = {
-        'X-API-KEY': '9b90a274d9e704ff5b21c0367f9ae1161779b573',
-        'Content-Type': 'application/json'
-    }
+    headers = {'X-API-KEY': '9b90a274d9e704ff5b21c0367f9ae1161779b573', 'Content-Type': 'application/json'}
     try:
         conn.request("POST", "/search", payload, headers)
         res = conn.getresponse()
@@ -50,7 +45,6 @@ def perform_web_search(query):
     finally:
         conn.close()
 
-# Formater les résultats de recherche
 def format_search_results(data):
     if not data:
         return "Aucun résultat trouvé"
@@ -62,17 +56,9 @@ def format_search_results(data):
         result += "### Résultats principaux:\n"
         for item in data['organic'][:3]:
             result += f"- **{item['title']}**\n  {item['snippet']}\n  [Lien]({item['link']})\n\n"
-    if 'peopleAlsoAsk' in data:
-        result += "### Questions fréquentes:\n"
-        for item in data['peopleAlsoAsk'][:2]:
-            result += f"- **{item['question']}**\n  {item['snippet']}\n\n"
     return result
 
-# Convertir les rôles pour Streamlit
-def role_to_streamlit(role):
-    return "assistant" if role == "model" else role
-
-# Initialiser l'état de la session
+# Initialisation de l’état
 if "chat" not in st.session_state:
     st.session_state.chat = model.start_chat(history=[])
 if "web_search" not in st.session_state:
@@ -85,83 +71,136 @@ def clear_chat_history():
     st.session_state.chat = model.start_chat(history=[])
     st.session_state.messages = []
 
-# Créer un dossier temporaire
-os.makedirs("temp", exist_ok=True)
+# CSS personnalisé pour mobile
+st.markdown("""
+    <style>
+    .chat-container {
+        height: 60vh;
+        overflow-y: auto;
+        padding: 10px;
+        background-color: #f9f9f9;
+        border-radius: 10px;
+    }
+    .user-message {
+        background-color: #007bff;
+        color: white;
+        padding: 10px;
+        border-radius: 10px;
+        margin: 5px 0;
+        max-width: 80%;
+        align-self: flex-end;
+    }
+    .assistant-message {
+        background-color: #e9ecef;
+        color: black;
+        padding: 10px;
+        border-radius: 10px;
+        margin: 5px 0;
+        max-width: 80%;
+    }
+    .input-container {
+        position: fixed;
+        bottom: 0;
+        width: 100%;
+        padding: 10px;
+        background-color: white;
+        box-shadow: 0 -2px 5px rgba(0,0,0,0.1);
+    }
+    @media (max-width: 600px) {
+        .chat-container {
+            height: 70vh;
+        }
+        .stTextArea textarea {
+            height: 80px !important;
+        }
+    }
+    </style>
+""", unsafe_allow_html=True)
 
-# Titre de l’application
+# Titre
 st.title("Mariam AI")
 
-# Section des paramètres dans la barre latérale
-with st.sidebar:
-    st.header("Paramètres")
+# Section des paramètres (expansible)
+with st.expander("Paramètres"):
     st.session_state.web_search = st.toggle("Activer la recherche web", value=st.session_state.web_search, 
-                                            help="Permet d’enrichir les réponses avec des informations du web.")
-    if st.button("Effacer l’historique", on_click=clear_chat_history):
+                                            help="Permet des réponses enrichies avec des données du web.")
+    if st.button("Effacer l’historique"):
+        clear_chat_history()
         st.success("Historique effacé.")
 
-# Section de téléchargement de fichiers
-with st.sidebar:
-    st.header("Téléchargement de fichiers")
+# Section de téléchargement
+with st.expander("Télécharger un fichier"):
     st.info("Types acceptés : jpg, jpeg, png, pdf, txt")
     uploaded_file = st.file_uploader("Choisir un fichier", type=['jpg', 'jpeg', 'png', 'pdf', 'txt'])
 
-# Section de conversation
-st.header("Conversation")
-chat_container = st.container()
-
-# Afficher les messages
-with chat_container:
-    for message in st.session_state.messages:
-        with st.chat_message(message["role"]):
-            st.markdown(message["content"])
-
-# Champ de saisie multiligne
-user_input = st.text_area("Votre message", height=100)
-
-# Bouton pour envoyer
-if st.button("Envoyer"):
-    if user_input:
-        # Ajouter le message de l’utilisateur
-        st.session_state.messages.append({"role": "user", "content": user_input})
-        
-        # Traiter le fichier téléchargé
-        uploaded_gemini_file = None
-        if uploaded_file:
-            file_ext = uploaded_file.name.split('.')[-1].lower()
-            accepted_types = ['jpg', 'jpeg', 'png', 'pdf', 'txt']
-            if file_ext in accepted_types:
-                with open(os.path.join("temp", uploaded_file.name), "wb") as f:
-                    f.write(uploaded_file.getbuffer())
-                try:
-                    uploaded_gemini_file = genai.upload_file(os.path.join("temp", uploaded_file.name))
-                except Exception as e:
-                    st.error(f"Erreur lors de l’upload du fichier : {e}")
-            else:
-                st.error("Type de fichier non accepté. Utilisez jpg, jpeg, png, pdf ou txt.")
-        
-        # Recherche web si activée
-        web_results = None
-        if st.session_state.web_search:
-            with st.spinner("Recherche web en cours..."):
-                web_results = perform_web_search(user_input)
-                if web_results:
-                    formatted_results = format_search_results(web_results)
-                    user_input = f"{user_input}\n\nVoici les résultats de la recherche web. Analyse-les et donne-moi une réponse complète :\n\n{formatted_results}"
-        
-        # Envoyer à Gemini
-        try:
-            if uploaded_gemini_file:
-                response = st.session_state.chat.send_message([uploaded_gemini_file, "\n\n", user_input])
-            else:
-                response = st.session_state.chat.send_message(user_input)
-            st.session_state.messages.append({"role": "assistant", "content": response.text})
-            with chat_container:
-                with st.chat_message("assistant"):
-                    st.markdown(response.text)
-        except Exception as e:
-            st.error(f"Erreur lors de l’envoi : {e}")
-        
-        # Nettoyer les fichiers temporaires
-        if uploaded_file:
-            shutil.rmtree("temp", ignore_errors=True)
-            os.makedirs("temp", exist_ok=True)
+# Zone de conversation
+st.markdown('<div class="chat-container">', unsafe_allow_html=True)
+for message in st.session_state.messages:
+    if message["role"] == "user":
+        st.markdown(f'<div class="user-message">{message["content"]}</div>', unsafe_allow_html=True)
+    else:
+        st.markdown(f'<div class="assistant-message">{message["content"]}</div>', unsafe_allow_html=True)
+st.markdown('</div>', unsafe_allow_html=True)
+
+# JavaScript pour défiler automatiquement
+components.html("""
+    <script>
+    const chatContainer = document.querySelector('.chat-container');
+    chatContainer.scrollTop = chatContainer.scrollHeight;
+    </script>
+""")
+
+# Zone de saisie
+st.markdown('<div class="input-container">', unsafe_allow_html=True)
+user_input = st.text_area("Votre message", height=80, key="input")
+col1, col2 = st.columns([3, 1])
+with col1:
+    pass
+with col2:
+    send_button = st.button("Envoyer")
+st.markdown('</div>', unsafe_allow_html=True)
+
+# Traitement de l’entrée utilisateur
+if send_button and user_input:
+    st.session_state.messages.append({"role": "user", "content": user_input})
+    
+    # Traitement du fichier
+    uploaded_gemini_file = None
+    if uploaded_file:
+        file_ext = uploaded_file.name.split('.')[-1].lower()
+        if file_ext in ['jpg', 'jpeg', 'png', 'pdf', 'txt']:
+            with open(os.path.join("temp", uploaded_file.name), "wb") as f:
+                f.write(uploaded_file.getbuffer())
+            try:
+                uploaded_gemini_file = genai.upload_file(os.path.join("temp", uploaded_file.name))
+            except Exception as e:
+                st.error(f"Erreur lors de l’upload : {e}")
+        else:
+            st.error("Type de fichier non accepté.")
+    
+    # Recherche web
+    web_results = None
+    if st.session_state.web_search:
+        with st.spinner("Recherche web en cours..."):
+            web_results = perform_web_search(user_input)
+            if web_results:
+                formatted_results = format_search_results(web_results)
+                user_input = f"{user_input}\n\nRésultats de recherche :\n{formatted_results}\nAnalyse ces informations et réponds-moi."
+
+    # Réponse de Mariam
+    try:
+        if uploaded_gemini_file:
+            response = st.session_state.chat.send_message([uploaded_gemini_file, "\n\n", user_input])
+        else:
+            response = st.session_state.chat.send_message(user_input)
+        st.session_state.messages.append({"role": "assistant", "content": response.text})
+    except Exception as e:
+        st.error(f"Erreur : {e}")
+    
+    # Nettoyage
+    if uploaded_file:
+        shutil.rmtree("temp", ignore_errors=True)
+    os.makedirs("temp", exist_ok=True)
+    
+    # Rafraîchir la page pour afficher la réponse
+    st.rerun()