Eps2

Sleeping

App Files Files Community

Docfile commited on 12 days ago

Commit

07de6c6

verified ·

1 Parent(s): fcc1da1

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +34 -7

templates/index.html CHANGED Viewed

@@ -3,27 +3,43 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Gemini Chat</title>
     <!-- Tailwind CSS via CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         .chat-container {
-            height: calc(100vh - 180px);
         }
     </style>
 </head>
 <body class="bg-gray-100">
     <div class="container mx-auto p-4 max-w-3xl">
         <header class="bg-white shadow-md rounded-lg p-4 mb-4">
-            <h1 class="text-2xl font-bold text-center text-blue-600">Gemini Chat</h1>
-            <p class="text-center text-gray-500">Interagissez avec le modèle Gemini-2.0-Flash</p>
         </header>
         <div class="bg-white shadow-md rounded-lg p-4">
             <!-- Zone d'historique de chat -->
             <div id="chat-history" class="chat-container overflow-y-auto mb-4 p-3 bg-gray-50 rounded-lg">
                 <div class="text-center text-gray-400 my-4">
-                    Commencez une nouvelle conversation...
                 </div>
             </div>
@@ -33,7 +49,7 @@
                     <textarea
                         id="user-input"
                         class="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
-                        placeholder="Tapez votre message ici..."
                         rows="2"
                     ></textarea>
                     <button
@@ -130,6 +146,11 @@
                 const message = userInput.value.trim();
                 if (!message) return;
                 // Vider l'input et ajouter le message de l'utilisateur
                 userInput.value = '';
                 addMessage('user', message);
@@ -183,7 +204,13 @@
                     // Vider l'historique
                     chatHistory.innerHTML = `
                         <div class="text-center text-gray-400 my-4">
-                            Commencez une nouvelle conversation...
                         </div>
                     `;

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title> Chat - Analyse PDF</title>
     <!-- Tailwind CSS via CDN -->
     <script src="https://cdn.tailwindcss.com"></script>
     <style>
         .chat-container {
+            height: calc(100vh - 220px);
         }
     </style>
 </head>
 <body class="bg-gray-100">
     <div class="container mx-auto p-4 max-w-3xl">
         <header class="bg-white shadow-md rounded-lg p-4 mb-4">
+            <h1 class="text-2xl font-bold text-center text-blue-600">Gemini Chat - Analyse PDF</h1>
+            <p class="text-center text-gray-500">Discutez avec l'IA à propos du document sur la langue Fang</p>
+            <div class="mt-2 text-center">
+                <a href="{{ pdf_url }}" target="_blank" class="text-blue-500 hover:underline">
+                    📄 Consulter le PDF analysé
+                </a>
+            </div>
+            {% if error %}
+            <div class="mt-2 p-2 bg-red-100 text-red-700 rounded">
+                {{ error }}
+            </div>
+            {% endif %}
         </header>
         <div class="bg-white shadow-md rounded-lg p-4">
             <!-- Zone d'historique de chat -->
             <div id="chat-history" class="chat-container overflow-y-auto mb-4 p-3 bg-gray-50 rounded-lg">
                 <div class="text-center text-gray-400 my-4">
+                    <p>Posez des questions sur le document PDF de la langue Fang.</p>
+                    <p class="mt-2 text-sm">Exemples de questions:</p>
+                    <ul class="text-sm mt-1 space-y-1">
+                        <li>• Quelles sont les principales caractéristiques de la langue Fang?</li>
+                        <li>• Expliquez la structure verbale en Fang</li>
+                        <li>• Que dit le document sur la phonologie du Fang?</li>
+                    </ul>
                 </div>
             </div>
                     <textarea
                         id="user-input"
                         class="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        placeholder="Posez une question sur le document Fang..."
                         rows="2"
                     ></textarea>
                     <button
                 const message = userInput.value.trim();
                 if (!message) return;
+                // Remplacer le contenu initial si c'est le premier message
+                if (chatHistory.querySelector('.text-gray-400')) {
+                    chatHistory.innerHTML = '';
+                }
                 // Vider l'input et ajouter le message de l'utilisateur
                 userInput.value = '';
                 addMessage('user', message);
                     // Vider l'historique
                     chatHistory.innerHTML = `
                         <div class="text-center text-gray-400 my-4">
+                            <p>Posez des questions sur le document PDF de la langue Fang.</p>
+                            <p class="mt-2 text-sm">Exemples de questions:</p>
+                            <ul class="text-sm mt-1 space-y-1">
+                                <li>• Quelles sont les principales caractéristiques de la langue Fang?</li>
+                                <li>• Expliquez la structure verbale en Fang</li>
+                                <li>• Que dit le document sur la phonologie du Fang?</li>
+                            </ul>
                         </div>
                     `;