Update templates/index.html
Browse files- templates/index.html +34 -7
templates/index.html
CHANGED
|
@@ -3,27 +3,43 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>
|
| 7 |
<!-- Tailwind CSS via CDN -->
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
<style>
|
| 10 |
.chat-container {
|
| 11 |
-
height: calc(100vh -
|
| 12 |
}
|
| 13 |
</style>
|
| 14 |
</head>
|
| 15 |
<body class="bg-gray-100">
|
| 16 |
<div class="container mx-auto p-4 max-w-3xl">
|
| 17 |
<header class="bg-white shadow-md rounded-lg p-4 mb-4">
|
| 18 |
-
<h1 class="text-2xl font-bold text-center text-blue-600">Gemini Chat</h1>
|
| 19 |
-
<p class="text-center text-gray-500">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 20 |
</header>
|
| 21 |
|
| 22 |
<div class="bg-white shadow-md rounded-lg p-4">
|
| 23 |
<!-- Zone d'historique de chat -->
|
| 24 |
<div id="chat-history" class="chat-container overflow-y-auto mb-4 p-3 bg-gray-50 rounded-lg">
|
| 25 |
<div class="text-center text-gray-400 my-4">
|
| 26 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 27 |
</div>
|
| 28 |
</div>
|
| 29 |
|
|
@@ -33,7 +49,7 @@
|
|
| 33 |
<textarea
|
| 34 |
id="user-input"
|
| 35 |
class="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
| 36 |
-
placeholder="
|
| 37 |
rows="2"
|
| 38 |
></textarea>
|
| 39 |
<button
|
|
@@ -130,6 +146,11 @@
|
|
| 130 |
const message = userInput.value.trim();
|
| 131 |
if (!message) return;
|
| 132 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 133 |
// Vider l'input et ajouter le message de l'utilisateur
|
| 134 |
userInput.value = '';
|
| 135 |
addMessage('user', message);
|
|
@@ -183,7 +204,13 @@
|
|
| 183 |
// Vider l'historique
|
| 184 |
chatHistory.innerHTML = `
|
| 185 |
<div class="text-center text-gray-400 my-4">
|
| 186 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 187 |
</div>
|
| 188 |
`;
|
| 189 |
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title> Chat - Analyse PDF</title>
|
| 7 |
<!-- Tailwind CSS via CDN -->
|
| 8 |
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
<style>
|
| 10 |
.chat-container {
|
| 11 |
+
height: calc(100vh - 220px);
|
| 12 |
}
|
| 13 |
</style>
|
| 14 |
</head>
|
| 15 |
<body class="bg-gray-100">
|
| 16 |
<div class="container mx-auto p-4 max-w-3xl">
|
| 17 |
<header class="bg-white shadow-md rounded-lg p-4 mb-4">
|
| 18 |
+
<h1 class="text-2xl font-bold text-center text-blue-600">Gemini Chat - Analyse PDF</h1>
|
| 19 |
+
<p class="text-center text-gray-500">Discutez avec l'IA à propos du document sur la langue Fang</p>
|
| 20 |
+
<div class="mt-2 text-center">
|
| 21 |
+
<a href="{{ pdf_url }}" target="_blank" class="text-blue-500 hover:underline">
|
| 22 |
+
📄 Consulter le PDF analysé
|
| 23 |
+
</a>
|
| 24 |
+
</div>
|
| 25 |
+
{% if error %}
|
| 26 |
+
<div class="mt-2 p-2 bg-red-100 text-red-700 rounded">
|
| 27 |
+
{{ error }}
|
| 28 |
+
</div>
|
| 29 |
+
{% endif %}
|
| 30 |
</header>
|
| 31 |
|
| 32 |
<div class="bg-white shadow-md rounded-lg p-4">
|
| 33 |
<!-- Zone d'historique de chat -->
|
| 34 |
<div id="chat-history" class="chat-container overflow-y-auto mb-4 p-3 bg-gray-50 rounded-lg">
|
| 35 |
<div class="text-center text-gray-400 my-4">
|
| 36 |
+
<p>Posez des questions sur le document PDF de la langue Fang.</p>
|
| 37 |
+
<p class="mt-2 text-sm">Exemples de questions:</p>
|
| 38 |
+
<ul class="text-sm mt-1 space-y-1">
|
| 39 |
+
<li>• Quelles sont les principales caractéristiques de la langue Fang?</li>
|
| 40 |
+
<li>• Expliquez la structure verbale en Fang</li>
|
| 41 |
+
<li>• Que dit le document sur la phonologie du Fang?</li>
|
| 42 |
+
</ul>
|
| 43 |
</div>
|
| 44 |
</div>
|
| 45 |
|
|
|
|
| 49 |
<textarea
|
| 50 |
id="user-input"
|
| 51 |
class="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
|
| 52 |
+
placeholder="Posez une question sur le document Fang..."
|
| 53 |
rows="2"
|
| 54 |
></textarea>
|
| 55 |
<button
|
|
|
|
| 146 |
const message = userInput.value.trim();
|
| 147 |
if (!message) return;
|
| 148 |
|
| 149 |
+
// Remplacer le contenu initial si c'est le premier message
|
| 150 |
+
if (chatHistory.querySelector('.text-gray-400')) {
|
| 151 |
+
chatHistory.innerHTML = '';
|
| 152 |
+
}
|
| 153 |
+
|
| 154 |
// Vider l'input et ajouter le message de l'utilisateur
|
| 155 |
userInput.value = '';
|
| 156 |
addMessage('user', message);
|
|
|
|
| 204 |
// Vider l'historique
|
| 205 |
chatHistory.innerHTML = `
|
| 206 |
<div class="text-center text-gray-400 my-4">
|
| 207 |
+
<p>Posez des questions sur le document PDF de la langue Fang.</p>
|
| 208 |
+
<p class="mt-2 text-sm">Exemples de questions:</p>
|
| 209 |
+
<ul class="text-sm mt-1 space-y-1">
|
| 210 |
+
<li>• Quelles sont les principales caractéristiques de la langue Fang?</li>
|
| 211 |
+
<li>• Expliquez la structure verbale en Fang</li>
|
| 212 |
+
<li>• Que dit le document sur la phonologie du Fang?</li>
|
| 213 |
+
</ul>
|
| 214 |
</div>
|
| 215 |
`;
|
| 216 |
|