Update app.py

app.py

@@ -10,12 +10,14 @@ import torch
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 
 DESCRIPTION = "# Mistral-7B v0.3"
+
 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"))
 
-# Chargement du modèle (sur GPU si disponible)
 if torch.cuda.is_available():
     model_id = "mistralai/Mistral-7B-Instruct-v0.3"
     model = AutoModelForCausalLM.from_pretrained(
@@ -35,17 +37,11 @@ def generate(
     top_k: int = 50,
     repetition_penalty: float = 1.2,
 ) -> Iterator[str]:
-    """
-    Génération de texte à partir de l'historique + message utilisateur.
-    """
     conversation = [*chat_history, {"role": "user", "content": message}]
     input_ids = tokenizer.apply_chat_template(conversation, return_tensors="pt")
-
-    # Gestion de la limite de tokens
     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)
@@ -68,131 +64,36 @@ def generate(
         outputs.append(text)
         yield "".join(outputs)
 
-# Liste des questions (chaque question est associée à une "bulle cliquable")
-QUESTIONS = [
-    "I - C’est quoi le consentement ? Comment savoir si ma copine a envie de moi ?",
-    "II - C’est quoi une agression sexuelle ?",
-    "III - C’est quoi un viol ?",
-    "IV - C’est quoi un attouchement ?",
-    "V - C’est quoi un harcèlement sexuel ?",
-    "VI - Est ce illégal de visionner du porno ?",
-    "VII - Mon copain me demande un nude, dois-je le faire ?",
-    "VIII - Mon ancien copain me menace de poster des photos de moi nue sur internet, que faire ?",
-    "IX - 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 ?",
-]
-
-# -- CSS personnalisé --
+# CSS pour appliquer le dégradé pastel à TOUTE la page
 custom_css = """
 html, body {
     height: 100%;
     margin: 0;
     padding: 0;
     background: linear-gradient(135deg, #FDE2E2, #E2ECFD) !important;
-    font-family: sans-serif;
-}
-
-/* Conteneur global pour centrer la "pieuvre" */
-.octopus-container {
-    position: relative;
-    width: 600px;
-    height: 600px;
-    margin: 0 auto; /* centre horizontalement */
-    margin-top: 30px; /* marge en haut */
-}
-
-/* L'image (point d'interrogation) au centre */
-.center-image {
-    position: absolute;
-    width: 100px;  /* Ajuster la taille */
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-}
-
-/* Bulles de question */
-.octopus-arm {
-    position: absolute;
-    width: 140px;
-    background: #FFFFFFCC;
-    padding: 8px;
-    border-radius: 10px;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-    text-align: center;
-    cursor: pointer; /* Pour montrer que c'est cliquable */
-}
-
-/* Positions "rayonnantes" */
-.arm1  { top: 0%;   left: 50%;  transform: translate(-50%, 0); }
-.arm2  { top: 10%;  left: 80%;  }
-.arm3  { top: 35%;  left: 95%;  transform: translateX(-100%); }
-.arm4  { top: 60%;  left: 80%;  }
-.arm5  { top: 85%;  left: 50%;  transform: translate(-50%, -100%); }
-.arm6  { top: 60%;  left: 10%;  }
-.arm7  { top: 35%;  left: 0%;   }
-.arm8  { top: 10%;  left: 10%;  }
-.arm9  { top: 0%;   left: 25%;  }
-
-/* Texte dans les bulles */
-.octopus-arm p {
-    margin: 0;
-    font-size: 0.85rem;
-    line-height: 1.2;
-    color: #000;
 }
 """
 
-#
-# Construction de l'application avec Blocks
-#
-with gr.Blocks(css=custom_css) as demo:
-    # Titre / Description
-    gr.Markdown(DESCRIPTION)
-
-    # Section HTML : la "pieuvre" + le script JS
-    # Notez la fonction setChatText(...) qu'on appelle en cliquant sur la bulle.
-    #with gr.Box():
-    gr.HTML(
-        """
-        <div class="octopus-container">
-            <!-- Image point d'interrogation au centre -->
-            <img src="https://cdn-icons-png.flaticon.com/512/4926/4926733.png" class="center-image" />
-
-            <!-- Bulles de questions (cliquables) -->
-        """ +
-        "".join(
-            f"""
-            <div class="octopus-arm arm{i+1}" onclick="setChatText(`{QUESTIONS[i]}`)">
-                <p>{QUESTIONS[i]}</p>
-            </div>
-            """
-            for i in range(len(QUESTIONS))
-        ) +
-        """
-        </div>
-
-        <script>
-        // Au clic sur une bulle, insère la question dans la zone de saisie du ChatInterface
-        function setChatText(questionText) {
-            // Le ChatInterface de Gradio possède un <textarea> dont
-            // l'attribut placeholder est souvent "Type a message..."
-            // On cherche ce textarea et on y met la question.
-            let textBox = document.querySelector('textarea[placeholder="Type a message..."]');
-            if (textBox) {
-                textBox.value = questionText;
-            } else {
-                console.warn("Impossible de trouver la zone de texte du chatbot.");
-            }
-        }
-        </script>
-        """
-    )
+# 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 ?"],
+]
 
-    # Le chatbot Gradio, en dessous
-    chat = gr.ChatInterface(
-        fn=generate,
-        type="messages",
-        description="Cliquez sur une question ci-dessus ou saisissez votre texte.",
-    )
+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.queue(max_size=20).launch()