première version

2026-01-17 23:47:34 +01:00
commit 2ca24a312b
6 changed files with 10154 additions and 0 deletions
--- a/index.php
+++ b/index.php
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>ChatEB</title>
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+        <link rel="icon" type="image/svg+xml" href="cat.svg">
+        <style>
+            main {
+                display: flex;
+                flex-direction: column;
+                height: 100vh;
+            }
+
+            #conversation {
+                flex-grow: 2;
+                overflow-y: auto;
+            }
+        </style>
+    </head>
+
+    <body>
+        <main class="container">
+            <h1>ChatEB</h1>
+            <div id="conversation">
+                <p>😸 Posez-moi toutes vos questions !</p>
+            </div>
+            <form id="formulaire" action="question.php" method="post" role="group">
+                <textarea id="question" name="question" placeholder="Ma question" required></textarea>
+                <button type="submit">Envoyer</button>
+            </form>
+        </main>
+        <script>
+            const formulaire = document.getElementById('formulaire');
+            const bouton = document.querySelector('button[type="submit"]');
+            const conversation = document.getElementById('conversation');
+            const question = document.getElementById('question');
+
+            question.addEventListener('keydown', e => {
+                if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey) {
+                    e.preventDefault();
+                    e.target.form.requestSubmit();
+                }
+            });
+
+            formulaire.addEventListener('submit', async (e) => {
+                e.preventDefault();
+                bouton.disabled = true;
+                bouton.setAttribute("aria-busy", true)
+                const formulaireData = new FormData(formulaire);
+                const citation = document.createElement('blockquote');
+                citation.innerText = formulaireData.get('question');
+                conversation.appendChild(citation);
+                
+                formulaire.reset();
+                const requete = await fetch(formulaire.action, {
+                    method: formulaire.method,
+                    body: formulaireData
+                });
+
+                const paragraphe = document.createElement('p');
+                paragraphe.setAttribute('aria-busy', 'true');
+                conversation.appendChild(paragraphe);
+                const reponse = await requete.text();
+                paragraphe.setAttribute('aria-busy', 'false');
+                Array.from(reponse).forEach((lettre, i) => {
+                    setTimeout(() => {
+                        if (lettre == "\n") paragraphe.innerHTML += "<br>";
+                        else paragraphe.innerHTML += lettre;
+                    }, i * 40);
+                });
+                setTimeout(() => {
+                    conversation.innerHTML += "<p>😸 Voulez-vous que je réponde à une autre question ?</p>";
+                    conversation.scrollTop = conversation.scrollHeight;
+                    bouton.disabled = false;
+                    bouton.setAttribute("aria-busy", false);
+                }, reponse.length * 40);
+            });
+        </script>
+    </body>
+
+</html>