|
<!DOCTYPE html> |
|
<html lang="fr"> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title> Chat - Analyse PDF</title> |
|
|
|
<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"> |
|
|
|
<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> |
|
|
|
|
|
<div class="flex flex-col gap-2"> |
|
<div class="flex gap-2"> |
|
<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 |
|
id="send-button" |
|
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg" |
|
> |
|
Envoyer |
|
</button> |
|
</div> |
|
<button |
|
id="reset-button" |
|
class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg self-end" |
|
> |
|
Nouvelle Conversation |
|
</button> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<script> |
|
document.addEventListener('DOMContentLoaded', () => { |
|
const chatHistory = document.getElementById('chat-history'); |
|
const userInput = document.getElementById('user-input'); |
|
const sendButton = document.getElementById('send-button'); |
|
const resetButton = document.getElementById('reset-button'); |
|
|
|
|
|
let isLoading = false; |
|
|
|
|
|
function addMessage(role, content, timestamp = getCurrentTime()) { |
|
const messageDiv = document.createElement('div'); |
|
messageDiv.className = `my-2 p-3 rounded-lg ${role === 'user' ? 'bg-blue-100 ml-12' : 'bg-gray-100 mr-12'}`; |
|
|
|
const header = document.createElement('div'); |
|
header.className = 'font-bold text-sm'; |
|
header.textContent = role === 'user' ? 'Vous' : 'Gemini'; |
|
|
|
const timeSpan = document.createElement('span'); |
|
timeSpan.className = 'text-xs text-gray-500 ml-2'; |
|
timeSpan.textContent = timestamp; |
|
header.appendChild(timeSpan); |
|
|
|
const contentDiv = document.createElement('div'); |
|
contentDiv.className = 'whitespace-pre-wrap'; |
|
contentDiv.textContent = content; |
|
|
|
messageDiv.appendChild(header); |
|
messageDiv.appendChild(contentDiv); |
|
chatHistory.appendChild(messageDiv); |
|
|
|
|
|
chatHistory.scrollTop = chatHistory.scrollHeight; |
|
} |
|
|
|
|
|
function getCurrentTime() { |
|
const now = new Date(); |
|
return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`; |
|
} |
|
|
|
|
|
function showLoading() { |
|
if (isLoading) return; |
|
isLoading = true; |
|
|
|
const loadingDiv = document.createElement('div'); |
|
loadingDiv.id = 'loading-indicator'; |
|
loadingDiv.className = 'my-2 p-3 bg-gray-100 rounded-lg mr-12 flex items-center'; |
|
loadingDiv.innerHTML = ` |
|
<div class="font-bold text-sm">Gemini</div> |
|
<div class="ml-2"> |
|
<span class="inline-block w-2 h-2 bg-gray-500 rounded-full animate-bounce"></span> |
|
<span class="inline-block w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></span> |
|
<span class="inline-block w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></span> |
|
</div> |
|
`; |
|
chatHistory.appendChild(loadingDiv); |
|
chatHistory.scrollTop = chatHistory.scrollHeight; |
|
} |
|
|
|
|
|
function hideLoading() { |
|
if (!isLoading) return; |
|
const loadingIndicator = document.getElementById('loading-indicator'); |
|
if (loadingIndicator) { |
|
loadingIndicator.remove(); |
|
} |
|
isLoading = false; |
|
} |
|
|
|
|
|
async function sendMessage() { |
|
const message = userInput.value.trim(); |
|
if (!message) return; |
|
|
|
|
|
if (chatHistory.querySelector('.text-gray-400')) { |
|
chatHistory.innerHTML = ''; |
|
} |
|
|
|
|
|
userInput.value = ''; |
|
addMessage('user', message); |
|
|
|
|
|
showLoading(); |
|
|
|
try { |
|
|
|
const response = await fetch('/chat', { |
|
method: 'POST', |
|
headers: { |
|
'Content-Type': 'application/json', |
|
}, |
|
body: JSON.stringify({ message }), |
|
}); |
|
|
|
if (!response.ok) { |
|
throw new Error('Erreur de communication avec le serveur'); |
|
} |
|
|
|
const data = await response.json(); |
|
|
|
|
|
hideLoading(); |
|
|
|
|
|
addMessage('model', data.response); |
|
|
|
} catch (error) { |
|
|
|
hideLoading(); |
|
|
|
|
|
addMessage('system', `Erreur: ${error.message}`); |
|
console.error('Erreur:', error); |
|
} |
|
} |
|
|
|
|
|
async function resetChat() { |
|
try { |
|
const response = await fetch('/reset', { |
|
method: 'POST', |
|
}); |
|
|
|
if (!response.ok) { |
|
throw new Error('Erreur lors de la réinitialisation'); |
|
} |
|
|
|
|
|
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> |
|
`; |
|
|
|
} catch (error) { |
|
console.error('Erreur de réinitialisation:', error); |
|
alert('Impossible de réinitialiser la conversation. Veuillez réessayer.'); |
|
} |
|
} |
|
|
|
|
|
sendButton.addEventListener('click', sendMessage); |
|
|
|
userInput.addEventListener('keypress', (e) => { |
|
if (e.key === 'Enter' && !e.shiftKey) { |
|
e.preventDefault(); |
|
sendMessage(); |
|
} |
|
}); |
|
|
|
resetButton.addEventListener('click', resetChat); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
