Update app.py

app.py

@@ -9,17 +9,13 @@ import spaces
 import torch
 from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
 
-# Description de la démo
 DESCRIPTION = "# Mistral-7B v0.3"
-
-# Si pas de GPU détecté, afficher un message
 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(
@@ -33,7 +29,6 @@ if torch.cuda.is_available():
 def generate(
     message: str,
     chat_history: list[dict],
-    # Valeurs par défaut pour la génération
     max_new_tokens: int = 1024,
     temperature: float = 0.6,
     top_p: float = 0.9,
@@ -41,22 +36,19 @@ def generate(
     repetition_penalty: float = 1.2,
 ) -> Iterator[str]:
     """
-    Génération de texte à partir de l'historique de conversation (chat_history) et du message utilisateur.
+    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
-    )
+    streamer = TextIteratorStreamer(tokenizer, timeout=20.0, skip_prompt=True, skip_special_tokens=True)
     generate_kwargs = dict(
         {"input_ids": input_ids},
         streamer=streamer,
@@ -76,37 +68,131 @@ def generate(
         outputs.append(text)
         yield "".join(outputs)
 
-# CSS pour appliquer le dégradé pastel à TOUTE la page
+# 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é --
 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;
 }
 """
 
-# Liste des 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 ?"],
-]
+#
+# 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>
 
-# Création de l'interface de chat
-demo = gr.ChatInterface(
-    fn=generate,
-    type="messages",
-    description=DESCRIPTION,
-    css=custom_css,
-    examples=predefined_examples,
-)
+            <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>
+            """
+        )
+
+    # Le chatbot Gradio, en dessous
+    chat = gr.ChatInterface(
+        fn=generate,
+        type="messages",
+        description="Cliquez sur une question ci-dessus ou saisissez votre texte.",
+    )
 
 if __name__ == "__main__":
     demo.queue(max_size=20).launch()