Update app.py

app.py

@@ -1,201 +1,101 @@
 #!/usr/bin/env python
 
+import os
+from collections.abc import Iterator
+from threading import Thread
+
 import gradio as gr
+import spaces
+import torch
+from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
+
+DESCRIPTION = """
+<h1 style="color:black;">Mistral-7B v0.3</h1>
+"""
 
-# CSS perso pour :
-# 1) Le fond pastel
-# 2) La barre de navigation
-# 3) Les nuages + positionnement
+if not torch.cuda.is_available():
+    DESCRIPTION += "\n<p>Running on CPU 🥶 This demo does not work on CPU.</p>"
+
+MAX_MAX_NEW_TOKENS = 2048
+DEFAULT_MAX_NEW_TOKENS = 1024
+MAX_INPUT_TOKEN_LENGTH = int(os.getenv("MAX_INPUT_TOKEN_LENGTH", "4096"))
+
+if torch.cuda.is_available():
+    model_id = "mistralai/Mistral-7B-Instruct-v0.3"
+    model = AutoModelForCausalLM.from_pretrained(
+        model_id,
+        torch_dtype=torch.float16,
+        device_map="auto"
+    )
+    tokenizer = AutoTokenizer.from_pretrained(model_id)
+
+@spaces.GPU
+def generate(
+    message: str,
+    chat_history: list[dict],
+    max_new_tokens: int = 1024,
+    temperature: float = 0.6,
+    top_p: float = 0.9,
+    top_k: int = 50,
+    repetition_penalty: float = 1.2,
+) -> Iterator[str]:
+    conversation = [*chat_history, {"role": "user", "content": message}]
+    input_ids = tokenizer.apply_chat_template(conversation, return_tensors="pt")
+    if input_ids.shape[1] > MAX_INPUT_TOKEN_LENGTH:
+        input_ids = input_ids[:, -MAX_INPUT_TOKEN_LENGTH:]
+        gr.Warning(f"Trimmed input from conversation as it was longer than {MAX_INPUT_TOKEN_LENGTH} tokens.")
+    input_ids = input_ids.to(model.device)
+
+    streamer = TextIteratorStreamer(tokenizer, timeout=20.0, skip_prompt=True, skip_special_tokens=True)
+    generate_kwargs = dict(
+        {"input_ids": input_ids},
+        streamer=streamer,
+        max_new_tokens=max_new_tokens,
+        do_sample=True,
+        top_p=top_p,
+        top_k=top_k,
+        temperature=temperature,
+        num_beams=1,
+        repetition_penalty=repetition_penalty,
+    )
+    t = Thread(target=model.generate, kwargs=generate_kwargs)
+    t.start()
+
+    outputs = []
+    for text in streamer:
+        outputs.append(text)
+        yield "".join(outputs)
+
+# CSS pour appliquer le dégradé pastel à TOUTE la page
 custom_css = """
-/* Fond pastel sur toute la page */
 html, body {
-    margin: 0; padding: 0;
     height: 100%;
+    margin: 0;
+    padding: 0;
     background: linear-gradient(135deg, #FDE2E2, #E2ECFD) !important;
-    font-family: 'Arial', sans-serif;
-}
-
-/* Barre de navigation */
-.nav-bar {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.5rem 2rem;
-    background-color: #fbe8d3; /* Couleur très légère pour la barre */
-}
-.nav-left, .nav-right {
-    display: flex;
-    align-items: center;
-}
-.nav-logo {
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-right: 2rem;
-}
-.nav-links a {
-    margin-right: 1.5rem;
-    text-decoration: none;
-    color: #8c5b3e;
-    font-weight: 500;
-}
-.nav-links a:hover {
-    text-decoration: underline;
-}
-
-/* Conteneur principal au centre (pour le robot + nuages) */
-.main-container {
-    position: relative;
-    width: 100%;
-    max-width: 600px;
-    height: 600px;
-    margin: 1rem auto; 
-    text-align: center;
-}
-
-/* Style de l'icône robot */
-.robot-icon {
-    width: 80px;
-    margin: 1rem auto;
-}
-
-/* Texte sous le robot */
-.title-consent {
-    font-size: 1.2rem;
-    font-weight: bold;
-    margin-bottom: 0.3rem;
-}
-.subtitle-consent {
-    font-size: 0.9rem;
-    color: #333;
-    margin-bottom: 1.2rem;
-}
-
-/* Positionnement et style des nuages */
-.cloud {
-    position: absolute;
-    width: 130px;
-    padding: 0.5rem;
-    background: #fff;
-    border-radius: 50px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    cursor: pointer;
-    transition: transform 0.2s;
-    text-align: center;
-    font-size: 0.9rem;
-}
-.cloud:hover {
-    transform: scale(1.05);
-}
-
-/* 5 nuages : positionnés autour du centre */
-.cloud1 { top: 5%;  left: 40%; }
-.cloud2 { top: 30%; left: 10%; }
-.cloud3 { top: 30%; right: 10%; }
-.cloud4 { bottom: 10%; left: 20%; }
-.cloud5 { bottom: 10%; right: 20%; }
-
-/* Pied de page ou zone pour le chat */
-.footer-chat {
-    margin-top: 2rem;
-}
-
-/* Couleur du texte dans la zone markdown */
-.markdown-prose {
-    color: #000 !important;
 }
 """
 
-# HTML pour la barre de navigation
-nav_bar_html = """
-<div class="nav-bar">
-    <div class="nav-left">
-        <div class="nav-logo">LÉLI</div>
-    </div>
-    <div class="nav-right nav-links">
-        <a href="#">Pourquoi ?</a>
-        <a href="#">Discute avec Léli</a>
-        <a href="#">Contacts utiles</a>
-    </div>
-</div>
-"""
-
-# HTML pour la zone centrale (robot + nuages).
-# onclick="cloudClicked('xxxx')" => appelle une fonction JS
-main_html = """
-<div class="main-container">
-    <!-- Robot icône -->
-    <img src="https://cdn-icons-png.flaticon.com/512/6188/6188530.png" class="robot-icon" alt="Robot" />
-
-    <!-- Titre et sous-titre -->
-    <div class="title-consent">LE CONSENTEMENT</div>
-    <div class="subtitle-consent">Clique sur un nuage pour en découvrir le contenu</div>
-
-    <!-- Nuages -->
-    <div class="cloud cloud1" onclick="cloudClicked('Ce que c’est')">Ce que c'est</div>
-    <div class="cloud cloud2" onclick="cloudClicked('Ce que ce n’est pas')">Ce que ce n’est pas</div>
-    <div class="cloud cloud3" onclick="cloudClicked('Les risques si tu ne le respectes pas')">Les risques si tu ne le respectes pas</div>
-    <div class="cloud cloud4" onclick="cloudClicked('Mise en situation')">Mise en situation</div>
-    <div class="cloud cloud5" onclick="cloudClicked('Comment faire en pratique')">Comment faire en pratique</div>
-</div>
-
-<script>
-function cloudClicked(message) {
-    // Sélectionner la zone de texte du chat (Placeholder: "Type a message...")
-    let textBox = document.querySelector('textarea[placeholder="Type a message..."]');
-    if (textBox) {
-        textBox.value = message;
-        // Facultatif : automatiquement "envoyer" le message ?
-        // On peut simuler un Enter, etc. Mais souvent on laisse l'utilisateur cliquer "Send".
-    }
-}
-</script>
-"""
-
-def dummy_chatbot(user_input, history):
-    """
-    Exemple de fonction simple pour répondre dans le chat.
-    - user_input: question de l’utilisateur
-    - history: historique [(user_msg, bot_msg), ...]
-    """
-    history = history or []
-    # Pour l’exemple : on se contente de renvoyer un message "Réponse".
-    # À remplacer par votre propre logique, ou un modèle HF.
-    bot_message = f"Voici un contenu sur : {user_input}"
-    history.append((user_input, bot_message))
-    return history
-
-with gr.Blocks(css=custom_css) as demo:
-    # La barre de navigation
-    gr.HTML(nav_bar_html)
-
-    # La zone "robot + nuages"
-    gr.HTML(main_html)
-
-    # Le chatbot en bas
-    with gr.Group(elem_id="footer-chat"):
-        chatbot = gr.Chatbot()
-        msg = gr.Textbox(
-            label="Pose ta question à Léli",
-            placeholder="Type a message...",
-            show_label=False
-        )
-        submit_btn = gr.Button("Send")
-
-        def respond(user_input, chat_history):
-            return dummy_chatbot(user_input, chat_history)
-
-        submit_btn.click(
-            fn=respond,
-            inputs=[msg, chatbot],
-            outputs=chatbot
-        )
-
-        # Optional: envoyer au "Enter" direct
-        msg.submit(
-            fn=respond,
-            inputs=[msg, chatbot],
-            outputs=chatbot
-        )
+# Questions prédéfinies
+predefined_examples = [
+    ["1 - C’est quoi le consentement ? Comment savoir si ma copine a envie de moi ?"],
+    ["2 - C’est quoi une agression sexuelle ?"],
+    ["3 - C’est quoi un viol ?"],
+    ["4 - C’est quoi un attouchement ?"],
+    ["5 - C’est quoi un harcèlement sexuel ?"],
+    ["6 - Est ce illégal de visionner du porno ?"],
+    ["7 - Mon copain me demande un nude, dois-je le faire ?"],
+    ["8 - Mon ancien copain me menace de poster des photos de moi nue sur internet, que faire ?"],
+    ["9 - Que puis-je faire si un membre de ma famille me touche d’une manière bizarre, mais que j’ai peur de parler ou de ne pas être cru ?"],
+]
+
+demo = gr.ChatInterface(
+    fn=generate,
+    type="messages",
+    description=DESCRIPTION,
+    css=custom_css,       # On applique le CSS pastel global
+    examples=predefined_examples
+)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.queue(max_size=20).launch()