Update app.py

app.py

@@ -2,220 +2,296 @@ import streamlit as st
 import requests
 import tempfile
 import uuid
+from groq import Groq
 import os
-from dotenv import load_dotenv
+from langsmith import Client as LangSmithClient
+import time
 
-load_dotenv()  # charge les variables depuis le fichier .env
-# === Nouvelle clé API et modèles plus performants ===
-HF_TOKEN_SECRET = os.getenv("HF_TOKEN_SECRET")
-HF_TOKEN = f"Bearer {HF_TOKEN_SECRET}"
+HF_TOKEN = f"Bearer {os.getenv('HF_TOKEN_SECRET')}"
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+LANGSMITH_API_KEY = os.getenv("LANGSMITH_API_KEY")
 
 
-# === Configuration de la page ===
+groq_client = Groq(api_key=GROQ_API_KEY)
+langsmith_client = LangSmithClient(api_key=LANGSMITH_API_KEY)
+
 st.set_page_config(
-    page_title="🧠 NLP Magique avec Hugging Face",
+    page_title="🧠 NLP Magique",
     page_icon="✨",
-    layout="wide"
+    layout="wide",
+    initial_sidebar_state="expanded"
 )
 
-# === CSS personnalisé haut de gamme ===
 st.markdown("""
     <style>
-    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+    
     .stApp {
-        background: linear-gradient(135deg, #e0e7ff, #c4b5fd);
-        font-family: 'Poppins', sans-serif;
-        padding: 1.5rem;
-        min-height: 100vh;
+        background: linear-gradient(135deg, #f5f7ff, #e4e9ff);
+        font-family: 'Inter', sans-serif;
+        color: #1f2937;
     }
-    .title {
+    
+    .main-title {
         text-align: center;
-        font-size: 4em;
+        font-size: 3.5rem;
         font-weight: 700;
-        color: #5B21B6;
-        margin-bottom: 1.5rem;
-        animation: fadeIn 1.5s ease-in-out;
-        text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
-    }
-    .subheader {
-        color: #4C1D95;
-        font-size: 2em;
-        margin: 2rem 0 1rem;
-        font-weight: 600;
-        text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
+        color: #4f46e5;
+        margin: 2rem 0;
+        animation: fadeInDown 1s ease-out;
+    }
+    
+    .sidebar .sidebar-content {
+        background: #ffffff;
+        border-right: 1px solid #e5e7eb;
+        padding: 2rem;
     }
+    
+    .stSidebar .element-container {
+        margin-bottom: 1rem;
+    }
+    
     .card {
-        background: rgba(255,255,255,0.9);
-        border-radius: 15px;
+        background: linear-gradient(145deg, #ffffff, #f9fafb);
+        border-radius: 16px;
         padding: 2rem;
-        margin: 1rem 0;
-        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
-        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        margin: 1.5rem 0;
+        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
+        transition: all 0.3s ease;
+        border: 1px solid #e5e7eb;
     }
+    
     .card:hover {
-        transform: translateY(-5px);
-        box-shadow: 0 12px 25px rgba(0,0,0,0.15);
+        transform: translateY(-4px);
+        box-shadow: 0 6px 24px rgba(0,0,0,0.12);
     }
+    
     .stButton>button {
-        background: linear-gradient(45deg, #7C3AED, #A78BFA);
+        background: linear-gradient(90deg, #4f46e5, #7c3aed);
         color: white;
         font-weight: 600;
-        border-radius: 12px;
-        padding: 15px 35px;
+        border-radius: 8px;
+        padding: 0.75rem 1.5rem;
         border: none;
-        box-shadow: 0 6px 15px rgba(0,0,0,0.2);
         transition: all 0.3s ease;
+        width: 100%;
     }
+    
     .stButton>button:hover {
-        background: linear-gradient(45deg, #5B21B6, #7C3AED);
-        transform: translateY(-3px);
-        box-shadow: 0 10px 20px rgba(0,0,0,0.25);
+        background: linear-gradient(90deg, #4338ca, #6d28d9);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(79,70,229,0.3);
     }
+    
     .stTextArea textarea, .stSlider>div {
-        background: #f8fafc;
-        border-radius: 12px;
-        padding: 15px;
-        font-size: 1.1em;
+        background: #f9fafb;
+        border-radius: 8px;
+        padding: 1rem;
         border: 1px solid #d1d5db;
-        box-shadow: inset 0 2px 5px rgba(0,0,0,0.05);
-        transition: all 0.3s ease;
-    }
-    .stTextArea textarea:focus, .stSlider>div:focus {
-        border-color: #7C3AED;
-        box-shadow: 0 0 8px rgba(124,58,237,0.3);
-        outline: none;
-    }
-    .stTabs [data-baseweb="tab-list"] {
-        background: rgba(255,255,255,0.1);
-        backdrop-filter: blur(10px);
-        padding: 12px 20px;
-        border-radius: 15px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-        position: sticky;
-        top: 0;
-        z-index: 100;
-        display: flex;
-        align-items: center;
-        gap: 10px;
-    }
-    .stTabs [data-baseweb="tab"] {
-        color: #000;
-        font-weight: 600;
-        font-size: 1.2em;
-        padding: 12px 25px;
-        border-radius: 10px;
         transition: all 0.3s ease;
-        display: flex;
-        align-items: center;
-        gap: 8px;
     }
-    .stTabs [data-baseweb="tab"]:hover {
-        background: rgba(124,58,237,0.3);
-        color: white;
-    }
-    .stTabs [aria-selected="true"] {
-        background: #7C3AED;
-        color: white;
-        box-shadow: 0 3px 8px rgba(0,0,0,0.2);
+    
+    .stTextArea textarea:focus {
+        border-color: #4f46e5;
+        box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
     }
+    
     .stFileUploader {
-        background: #f8fafc;
-        border-radius: 12px;
-        padding: 15px;
+        background: #f9fafb;
+        border-radius: 8px;
+        padding: 1rem;
         border: 1px solid #d1d5db;
-        box-shadow: 0 2px 5px rgba(0,0,0,0.05);
-    }
-    .stFileUploader:hover {
-        border-color: #7C3AED;
-    }
-    .stSpinner .spinner {
-        border-top-color: #7C3AED;
     }
+    
     .output-card {
-        background: #f8fafc;
-        border-radius: 12px;
+        background: #f9fafb;
+        border-radius: 8px;
         padding: 1.5rem;
         margin-top: 1rem;
         border: 1px solid #e5e7eb;
-        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
         position: relative;
+        font-size: 1rem;
+        line-height: 1.6;
     }
+    
     .copy-button {
         position: absolute;
-        top: 10px;
-        right: 10px;
-        background: #7C3AED;
+        top: 0.5rem;
+        right: 0.5rem;
+        background: #4f46e5;
         color: white;
         border: none;
-        border-radius: 8px;
-        padding: 8px 12px;
+        border-radius: 6px;
+        padding: 0.5rem 1rem;
+        font-size: 0.875rem;
         cursor: pointer;
-        transition: background 0.3s ease;
+        transition: all 0.3s ease;
     }
+    
     .copy-button:hover {
-        background: #5B21B6;
+        background: #4338ca;
     }
-    @keyframes fadeIn {
-        from { opacity: 0; transform: translateY(-20px); }
-        to { opacity: 1; transform: translateY(0); }
+    
+    /* Chatbot Styles */
+    .chat-tooltip {
+        position: fixed;
+        bottom: 1.5rem;
+        left: 1.5rem;
+        z-index: 1000;
+    }
+    
+    .chat-button {
+        background: #4f46e5;
+        color: white;
+        width: 60px;
+        height: 60px;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+        cursor: pointer;
+        transition: all 0.3s ease;
+        font-size: 1.5rem;
+    }
+    
+    .chat-button:hover {
+        background: #4338ca;
+        transform: scale(1.1);
     }
+    
+    .chat-window {
+        width: 360px;
+        height: 500px;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        animation: slideIn 0.3s ease-out;
+    }
+    
+    .chat-header {
+        background: #4f46e5;
+        color: white;
+        padding: 1rem;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-weight: 600;
+    }
+    
+    .chat-body {
+        flex: 1;
+        overflow-y: auto;
+        padding: 1rem;
+        background: #f9fafb;
+    }
+    
+    .chat-message {
+        margin: 0.5rem 0;
+        padding: 0.75rem;
+        border-radius: 8px;
+        max-width: 80%;
+        font-size: 0.875rem;
+        line-height: 1.4;
+    }
+    
+    .user-message {
+        background: #e0e7ff;
+        margin-left: auto;
+        border: 1px solid #c7d2fe;
+    }
+    
+    .bot-message {
+        background: #f3e8ff;
+        margin-right: auto;
+        border: 1px solid #e9d5ff;
+        position: relative;
+    }
+    
+    .chat-input {
+        padding: 1rem;
+        background: #ffffff;
+        border-top: 1px solid #e5e7eb;
+    }
+    
+    .chat-input textarea {
+        width: 100%;
+        resize: none;
+        border-radius: 6px;
+        padding: 0.5rem;
+        border: 1px solid #d1d5db;
+        font-size: 0.875rem;
+    }
+    
+    .chat-footer {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.5rem;
+    }
+    
     .footer {
         text-align: center;
-        font-size: 1.2em;
-        color: #4C1D95;
+        padding: 2rem;
         margin-top: 3rem;
-        padding: 1.5rem;
-        background: rgba(255,255,255,0.9);
-        border-radius: 15px;
-        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-        animation: glow 3s ease-in-out infinite;
+        background: #ffffff;
+        border-radius: 12px;
+        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
+        font-size: 1rem;
+        color: #4b5563;
     }
+    
     .footer a {
-        color: #7C3AED;
-        text-decoration: none;
+        color: #4f46e5;
         font-weight: 600;
-        transition: color 0.3s ease;
+        text-decoration: none;
     }
+    
     .footer a:hover {
-        color: #5B21B6;
+        color: #4338ca;
         text-decoration: underline;
     }
+    
     .social-icons img {
-        width: 30px;
-        margin: 0 10px;
+        width: 24px;
+        margin: 0 0.5rem;
         transition: transform 0.3s ease;
     }
+    
     .social-icons img:hover {
         transform: scale(1.2);
     }
-    @keyframes glow {
-        0% { box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
-        50% { box-shadow: 0 4px 20px rgba(124,58,237,0.3); }
-        100% { box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
+    
+    @keyframes fadeInDown {
+        from { opacity: 0; transform: translateY(-20px); }
+        to { opacity: 1; transform: translateY(0); }
+    }
+    
+    @keyframes slideIn {
+        from { opacity: 0; transform: translateY(20px); }
+        to { opacity: 1; transform: translateY(0); }
     }
+    
     @media (max-width: 768px) {
-        .title { font-size: 2.5em; }
-        .subheader { font-size: 1.5em; }
-        .stTabs [data-baseweb="tab"] { font-size: 1em; padding: 10px 15px; }
+        .main-title { font-size: 2.5rem; }
         .card { padding: 1.5rem; }
+        .chat-window { width: 90vw; height: 80vh; }
     }
     </style>
 """, unsafe_allow_html=True)
 
-# === JavaScript pour la fonctionnalité de copie ===
 st.markdown("""
     <script>
     function copyToClipboard(text) {
         navigator.clipboard.writeText(text).then(() => {
-            alert('Texte copié dans le presse-papiers !');
+            alert('Texte copié !');
         });
     }
     </script>
 """, unsafe_allow_html=True)
 
-
-# === Fonctions API ===
-
 def generate_text(prompt):
     url = "https://api-inference.huggingface.co/models/gpt2"
     headers = {"Authorization": HF_TOKEN}
@@ -224,10 +300,9 @@ def generate_text(prompt):
     if response.ok:
         return response.json()[0]["generated_text"]
     else:
-        st.error(f"Erreur FLAN-T5: {response.status_code} - {response.text}")
+        st.error(f"Erreur: {response.status_code} - {response.text}")
         return "Erreur lors de la génération."
 
-
 def summarize_text(text):
     url = "https://api-inference.huggingface.co/models/facebook/bart-large-cnn"
     headers = {"Authorization": HF_TOKEN}
@@ -236,10 +311,9 @@ def summarize_text(text):
     if response.ok:
         return response.json()[0]["summary_text"]
     else:
-        st.error(f"Erreur BART: {response.status_code} - {response.text}")
+        st.error(f"Erreur: {response.status_code} - {response.text}")
         return "Erreur lors du résumé."
 
-
 def transcribe_audio(path):
     url = "https://api-inference.huggingface.co/models/openai/whisper-large-v2"
     headers = {
@@ -251,77 +325,152 @@ def transcribe_audio(path):
     if response.ok:
         return response.json()["text"]
     else:
-        st.error(f"Erreur Whisper Large: {response.status_code} - {response.text}")
+        st.error(f"Erreur: {response.status_code} - {response.text}")
         return "Erreur lors de la transcription."
 
+def chat_with_grok(user_input, conversation_id):
+    try:
+        run = langsmith_client.create_run(
+            name="Grok_Chat",
+            run_type="chain",
+            inputs={"user_input": user_input, "conversation_id": conversation_id}
+        )
+        
+        response = groq_client.chat.completions.create(
+            messages=[
+                {"role": "system", "content": "Vous êtes Grok, un assistant IA créé par xAI. Répondez en français avec précision et clarté."},
+                {"role": "user", "content": user_input}
+            ],
+            model="mixtral-8x7b-32768",
+            temperature=0.7,
+            max_tokens=1000
+        )
+        
+        response_text = response.choices[0].message.content
+        run.update({"outputs": response_text, "end_time": time.time()})
+        return response_text
+    except Exception as e:
+        run.update({"outputs": {"error": str(e)}, "end_time": time.time(), "status": "error"})
+        st.error(f"Erreur: {str(e)}")
+        return "Une erreur s'est produite. Réessayez."
+
+st.markdown('<h1 class="main-title">✨ NLP Magique</h1>', unsafe_allow_html=True)
 
-# === Titre principal ===
-st.markdown('<div class="title">✨ NLP Magique avec Hugging Face ✨</div>', unsafe_allow_html=True)
-st.markdown("---")
+with st.sidebar:
+    st.image("https://via.placeholder.com/100?text=Logo", width=100)
+    st.markdown("### Navigation")
+    page = st.selectbox(
+        "Choisir une fonctionnalité",
+        ["Résumé", "Génération", "Transcription"]
+    )
+    st.markdown("---")
+    st.markdown("### À propos")
+    st.write("Une application NLP avancée utilisant Hugging Face et xAI.")
 
-# === AppBar avec onglets ===
-tabs = st.tabs([ f"📄 Résumeur", f"📝 Générateur", f"🎧 Transcripteur"])
+if 'chat_history' not in st.session_state:
+    st.session_state.chat_history = []
+if 'conversation_id' not in st.session_state:
+    st.session_state.conversation_id = str(uuid4())
+if 'chat_open' not in st.session_state:
+    st.session_state.chat_open = False
 
-# === Générateur de texte ===
-with tabs[1]:
-    st.markdown('<div class="subheader">📝 Génération de contenu créatif</div>', unsafe_allow_html=True)
+if page == "Génération":
     with st.container():
-        st.markdown('<div class="card">', unsafe_allow_html=True)
-        prompt = st.text_area("💡 Saisissez une idée ou une phrase :", "La médecine moderne", height=150,
-                              placeholder="Entrez votre texte ici...")
-        temp = st.slider("🎯 Niveau de créativité", 0.1, 1.0, 0.7, step=0.1)
-        if st.button("🚀 Générer"):
-            with st.spinner("Génération en cours..."):
+        st.markdown("<div class='card'>", unsafe_allow_html=True)
+        st.subheader("Génération de texte")
+        prompt = st.text_area("Entrez votre idée :", "La médecine moderne", height=150)
+        temp = st.slider("Créativité", 0.1, 1.0, 0.7, step=0.1)
+        if st.button("Générer"):
+            with st.spinner("Génération..."):
                 output = generate_text(prompt)
             st.markdown(
                 f'<div class="output-card">{output}<button class="copy-button" onclick="copyToClipboard(\'{output}\')">Copier</button></div>',
                 unsafe_allow_html=True)
-        st.markdown('</div>', unsafe_allow_html=True)
+        st.markdown("</div>", unsafe_allow_html=True)
 
-# === Résumeur de texte ===
-with tabs[0]:
-    st.markdown('<div class="subheader">📄 Synthèse intelligente de textes</div>', unsafe_allow_html=True)
+elif page == "Résumé":
     with st.container():
-        st.markdown('<div class="card">', unsafe_allow_html=True)
-        texte = st.text_area("✍️ Collez votre texte à résumer :", height=200, placeholder="Collez un long texte ici...")
-        if st.button("🧠 Résumer"):
-            with st.spinner("Analyse et synthèse en cours..."):
+        st.markdown("<div class='card'>", unsafe_allow_html=True)
+        st.subheader("Résumé de texte")
+        texte = st.text_area("Collez votre texte :", height=200)
+        if st.button("Résumer"):
+            with st.spinner("Résumé..."):
                 summary = summarize_text(texte)
             st.markdown(
                 f'<div class="output-card">{summary}<button class="copy-button" onclick="copyToClipboard(\'{summary}\')">Copier</button></div>',
                 unsafe_allow_html=True)
-        st.markdown('</div>', unsafe_allow_html=True)
+        st.markdown("</div>", unsafe_allow_html=True)
 
-# === Transcription audio ===
-with tabs[2]:
-    st.markdown('<div class="subheader">🎧 Transcription automatisée d’audio (Vidéo Maximumu de 30 secondes net)</div>', unsafe_allow_html=True)
+elif page == "Transcription":
     with st.container():
-        st.markdown('<div class="card">', unsafe_allow_html=True)
-        audio_file = st.file_uploader("🎵 Chargez un fichier audio (Vidéo Maximumu de 30 secondes net)", type=["wav", "mp3", "m4a"],
-                                      help="Formats supportés : WAV, MP3, M4A")
-        if audio_file is not None:
+        st.markdown("<div class='card'>", unsafe_allow_html=True)
+        st.subheader("Transcription audio")
+        audio_file = st.file_uploader("Chargez un audio (max 30s)", type=["wav", "mp3", "m4a"])
+        if audio_file:
             with tempfile.NamedTemporaryFile(delete=False, suffix='.wav') as tmp_file:
                 tmp_file.write(audio_file.read())
                 audio_path = tmp_file.name
             st.audio(audio_path)
-            if st.button("✍️ Transcrire"):
-                with st.spinner("Transcription en cours..."):
+            if st.button("Transcrire"):
+                with st.spinner("Transcription..."):
                     transcript = transcribe_audio(audio_path)
                 st.markdown(
                     f'<div class="output-card">{transcript}<button class="copy-button" onclick="copyToClipboard(\'{transcript}\')">Copier</button></div>',
                     unsafe_allow_html=True)
+        st.markdown("</div>", unsafe_allow_html=True)
+
+# Chatbot Tooltip
+with st.container():
+    st.markdown('<div class="chat-tooltip">', unsafe_allow_html=True)
+    if not st.session_state.chat_open:
+        if st.button("💬", key="chat_toggle", help="Ouvrir le chatbot"):
+            st.session_state.chat_open = True
+            st.rerun()
+    else:
+        st.markdown('<div class="chat-window">', unsafe_allow_html=True)
+        st.markdown('<div class="chat-header">Grok AI<div class="chat-button" onclick="this.closest(\'.chat-tooltip\').querySelector(\'.stButton>button\').click()">✖</div></div>', unsafe_allow_html=True)
+        
+        st.markdown('<div class="chat-body">', unsafe_allow_html=True)
+        for message in st.session_state.chat_history:
+            if message['role'] == 'user':
+                st.markdown(f'<div class="chat-message user-message">{message["content"]}</div>', unsafe_allow_html=True)
+            else:
+                st.markdown(f'<div class="chat-message bot-message">{message["content"]}<button class="copy-button" onclick="copyToClipboard(\'{message["content"]}\')">Copier</button></div>', unsafe_allow_html=True)
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        st.markdown('<div class="chat-input">', unsafe_allow_html=True)
+        user_input = st.text_area("Votre message :", height=80, key="chat_input")
+        st.markdown('<div class="chat-footer">', unsafe_allow_html=True)
+        col1, col2 = st.columns([3, 1])
+        with col1:
+            if st.button("Envoyer"):
+                if user_input:
+                    with st.spinner("Grok répond..."):
+                        st.session_state.chat_history.append({"role": "user", "content": user_input})
+                        response = chat_with_grok(user_input, st.session_state.conversation_id)
+                        st.session_state.chat_history.append({"role": "assistant", "content": response})
+                        st.rerun()
+        with col2:
+            if st.button("Effacer"):
+                st.session_state.chat_history = []
+                st.session_state.conversation_id = str(uuid4())
+                st.rerun()
+        st.markdown('</div>', unsafe_allow_html=True)
         st.markdown('</div>', unsafe_allow_html=True)
+        
+        if st.button("💬", key="chat_toggle_close", help="Fermer le chatbot"):
+            st.session_state.chat_open = False
+            st.rerun()
+    st.markdown('</div>', unsafe_allow_html=True)
 
-# === Pied de page amélioré ===
-st.markdown("---")
 st.markdown("""
     <div class="footer">
-        <p>✨ Propriété intellectuelle de NTONGA BABONG Entrepreneur<br>
-        Créé grâce à <a href='https://huggingface.co/' target='_blank'>Hugging Face</a> et <a href='https://streamlit.io' target='_blank'>Streamlit</a></p>
+        <p>© 2025 NTONGA BABONG<br>
+        Propulsé par <a href='https://huggingface.co/' target='_blank'>Hugging Face</a>, <a href='https://streamlit.io' target='_blank'>Streamlit</a> et <a href='https://x.ai' target='_blank'>xAI</a></p>
         <div class="social-icons">
-            <a href="https://twitter.com" target="_blank"><img src="https://img.icons8.com/color/48/000000/twitter--v1.png"/></a>
-            <a href="https://linkedin.com" target="_blank"><img src="https://img.icons8.com/color/48/000000/linkedin.png"/></a>
-            <a href="https://github.com" target="_blank"><img src="https://img.icons8.com/color/48/000000/github--v1.png"/></a>
+            <a href="https://twitter.com" target="_blank"><img src="https://img.icons8.com/color/48/twitter--v1.png"/></a>
+            <a href="https://linkedin.com" target="_blank"><img src="https://img.icons8.com/color/48/linkedin.png"/></a>
+            <a href="https://github.com" target="_blank"><img src="https://img.icons8.com/color/48/github--v1.png"/></a>
         </div>
     </div>
 """, unsafe_allow_html=True)