Hugging Face's logo

Spaces:
Docfile
/
Chatm
Running

App Files Community
Chatm / templates /index.html
Docfile's picture
Docfile
Update templates/index.html
ed39ad7 verified
raw
history blame
27 kB
 <!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mariam AI!</title>
<!-- Tailwind CSS via CDN (inclut le plugin Forms) -->
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>
<!-- Favicon (Emoji simple) -->
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🤖</text></svg>">
<style>
/* Styles pour assurer la hauteur complète et le bon fonctionnement du scroll */
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* Empêche le scroll sur le body lui-même */
}
body {
display: flex;
flex-direction: column;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
#chat-container {
display: flex;
flex-direction: column;
flex-grow: 1; /* Prend l'espace restant */
min-height: 0; /* Essentiel pour le scroll dans un conteneur flex */
}
#chat-messages {
flex-grow: 1;
overflow-y: auto; /* Active le scroll vertical uniquement sur cette zone */
min-height: 0; /* Essentiel pour le scroll dans un conteneur flex */
}
/* Style personnalisé pour la barre de défilement (optionnel) */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #a8a8a8; /* Gris plus doux */
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #7a7a7a; /* Gris plus foncé au survol */
}
/* Amélioration du rendu Markdown par défaut (via classes Prose de Tailwind principalement) */
/* Ciblage plus spécifique pour éviter conflits si prose est utilisé ailleurs */
#chat-messages .prose code:not(pre code) { /* Code inline */
background-color: #e5e7eb; /* gray-200 */
padding: 0.2em 0.4em;
font-size: 85%;
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
#chat-messages .prose pre { /* Bloc de code */
background-color: #f3f4f6; /* gray-100 */
padding: 0.8em 1em;
border-radius: 6px;
overflow-x: auto; /* Scroll horizontal si nécessaire */
font-size: 0.875rem; /* text-sm */
}
#chat-messages .prose pre code { /* Code dans un bloc pre */
background-color: transparent;
padding: 0;
font-size: inherit;
border-radius: 0;
color: inherit;
}
#chat-messages .prose blockquote {
border-left-color: #9ca3af; /* gray-400 */
color: #4b5563; /* gray-600 */
}
#chat-messages .prose strong {
color: #1f2937; /* gray-800 */
}
#chat-messages .prose a {
color: #2563eb; /* blue-600 */
text-decoration: underline;
text-decoration-color: #93c5fd; /* blue-300 */
transition: color 0.2s ease;
}
#chat-messages .prose a:hover {
color: #1d4ed8; /* blue-700 */
text-decoration-color: #60a5fa; /* blue-400 */
}
/* Style pour le chargement initial de l'historique */
#history-loading {
padding: 20px;
text-align: center;
color: #6b7280; /* gray-500 */
font-style: italic;
}
</style>
</head>
<body class="bg-gray-100 flex flex-col h-screen">
<!-- En-tête fixe -->
<header class="bg-gradient-to-r from-cyan-500 to-blue-500 text-white p-3 sm:p-4 shadow-md flex justify-between items-center sticky top-0 z-10 flex-shrink-0">
<h1 class="text-xl sm:text-2xl font-bold">Mariam AI!</h1>
<!-- Formulaire pour le bouton "Effacer" (intercepté par JS) -->
<form action="/clear" method="POST" id="clear-form">
<button type="submit" title="Effacer la conversation actuelle" class="bg-red-500 hover:bg-red-600 text-white text-xs font-semibold py-1 px-3 rounded-full transition duration-200 focus:outline-none focus:ring-2 focus:ring-red-400 focus:ring-opacity-75">
Effacer
</button>
</form>
</header>
<!-- Conteneur Principal du Chat -->
<div id="chat-container" class="max-w-4xl w-full mx-auto bg-white shadow-xl rounded-b-lg flex flex-col flex-grow">
<!-- Zone d'affichage des messages (avec scroll) -->
<div id="chat-messages" class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4 scroll-smooth">
<!-- Indicateur de chargement de l'historique (sera remplacé) -->
<div id="history-loading">
<div class="flex justify-center items-center space-x-2">
<svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Chargement de l'historique...</span>
</div>
</div>
<!-- Indicateur de chargement pour les NOUVEAUX messages (sera déplacé ici par JS) -->
<div id="loading-indicator" class="text-center text-gray-500 italic py-4" style="display: none;">
<div class="flex justify-center items-center space-x-2">
<svg class="animate-spin h-5 w-5 text-blue-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
<span>Mariam réfléchit...</span>
</div>
</div>
</div>
<!-- Zone d'erreur (cachée par défaut) -->
<div id="error-message" class="bg-red-100 border-l-4 border-red-500 text-red-700 px-4 py-2 rounded mx-4 my-2 flex-shrink-0" role="alert" style="display: none;">
<p class="font-bold mr-2">Erreur:</p>
<p id="error-text">Le message d'erreur détaillé ira ici.</p>
</div>
<!-- Barre d'options et d'upload -->
<div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0">
<div class="flex items-center justify-between text-sm">
<!-- Toggle Recherche Web -->
<label for="web_search_toggle" class="flex items-center space-x-2 cursor-pointer text-gray-600 hover:text-gray-800 select-none" title="Activer/Désactiver la recherche web pour le prochain message">
<input type="checkbox" id="web_search_toggle" name="web_search" value="true" class="form-checkbox h-4 w-4 rounded text-blue-500 focus:ring-blue-400 focus:ring-offset-0 border-gray-300">
<span class="hidden sm:inline">Recherche Web</span>
<span class="sm:hidden">Web</span> <!-- Texte plus court pour mobile -->
</label>
<!-- Upload Fichier -->
<div class="flex items-center space-x-2">
<label for="file_upload" class="cursor-pointer text-blue-500 hover:text-blue-700 font-medium flex items-center" title="Joindre un fichier (txt, pdf, png, jpg)">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13" />
</svg>
<span class="hidden sm:inline">Fichier</span>
<input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg">
</label>
<span id="file-name" class="text-gray-500 text-xs truncate max-w-[100px] sm:max-w-[150px]" title=""></span>
<button id="clear-file" class="text-red-500 hover:text-red-700 text-xs p-0.5 rounded focus:outline-none focus:ring-1 focus:ring-red-400" title="Retirer le fichier" style="display: none;">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
</div>
<!-- Formulaire d'entrée du message -->
<form id="chat-form" class="bg-gray-100 p-3 sm:p-4 border-t border-gray-200 rounded-b-lg flex-shrink-0">
<div class="flex items-center space-x-2 sm:space-x-3">
<input type="text" id="prompt" name="prompt" class="flex-grow form-input px-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 shadow-sm text-sm sm:text-base" placeholder="Posez votre question à Mariam..." autocomplete="off">
<button type="submit" id="send-button" title="Envoyer le message" class="bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold p-2 rounded-full transition duration-200 flex items-center justify-center shadow-md w-10 h-10 flex-shrink-0 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<path d="M10.894 2.553a1 1 0 00-1.788 0l-7 14a1 1 0 001.169 1.409l5-1.429A1 1 0 009 15.571V11a1 1 0 112 0v4.571a1 1 0 00.725.962l5 1.428a1 1 0 001.17-1.408l-7-14z" />
</svg>
</button>
</div>
</form>
</div>
<!-- Script JavaScript pour l'interaction -->
<script>
document.addEventListener('DOMContentLoaded', () => {
// === Références aux éléments du DOM ===
const chatForm = document.getElementById('chat-form');
const promptInput = document.getElementById('prompt');
const chatMessages = document.getElementById('chat-messages');
const loadingIndicator = document.getElementById('loading-indicator'); // Indicateur pour NOUVEAUX messages
const historyLoadingIndicator = document.getElementById('history-loading'); // Indicateur pour l'historique
const errorMessageDiv = document.getElementById('error-message');
const errorTextP = document.getElementById('error-text');
const webSearchToggle = document.getElementById('web_search_toggle');
const fileUpload = document.getElementById('file_upload');
const fileNameSpan = document.getElementById('file-name');
const clearFileButton = document.getElementById('clear-file');
const sendButton = document.getElementById('send-button');
const clearForm = document.getElementById('clear-form');
// === Endpoints de l'API Backend ===
// Assurez-vous que ces URLs correspondent à votre configuration Flask
const API_CHAT_ENDPOINT = '/api/chat';
const API_HISTORY_ENDPOINT = '/api/history';
const CLEAR_ENDPOINT = '/clear';
// === Fonctions Utilitaires ===
/** Fait défiler la zone de chat vers le bas */
function scrollToBottom() {
// Utilise un léger délai pour s'assurer que le DOM est mis à jour
setTimeout(() => {
chatMessages.scrollTop = chatMessages.scrollHeight;
}, 50);
}
/** Affiche/cache l'indicateur de chargement pour les nouveaux messages */
function showLoading(show) {
const currentlyLoading = loadingIndicator.style.display !== 'none';
if (show && !currentlyLoading) {
loadingIndicator.style.display = 'block';
// S'assurer qu'il est le dernier élément pour être en bas
chatMessages.appendChild(loadingIndicator);
scrollToBottom();
} else if (!show && currentlyLoading) {
loadingIndicator.style.display = 'none';
}
// Désactiver/réactiver les contrôles pendant le chargement
sendButton.disabled = show;
promptInput.disabled = show;
fileUpload.disabled = show;
clearFileButton.disabled = show; // Désactiver aussi la suppression de fichier
}
/** Affiche un message d'erreur dans la zone dédiée */
function displayError(message) {
errorTextP.textContent = message || "Une erreur inconnue est survenue.";
errorMessageDiv.style.display = 'flex'; // Utiliser flex pour aligner l'icône si on en ajoute une
// Faire défiler pour voir l'erreur si elle est hors écran
errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
// Optionnel: Cacher l'erreur après un délai (ex: 8 secondes)
// setTimeout(() => { errorMessageDiv.style.display = 'none'; }, 8000);
}
/** Ajoute un message (utilisateur ou assistant) à la zone de chat */
function addMessageToChat(role, text, isHtml = false) {
// Cacher l'erreur si elle était affichée lors de l'ajout d'un nouveau message
errorMessageDiv.style.display = 'none';
const messageWrapper = document.createElement('div');
messageWrapper.classList.add('flex', role === 'user' ? 'justify-end' : 'justify-start', 'mb-4');
const bubbleDiv = document.createElement('div');
bubbleDiv.classList.add('p-3', 'rounded-lg', 'max-w-[85%]', 'sm:max-w-[75%]', 'shadow-md', 'relative'); // Limite la largeur
if (role === 'user') {
bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
const paragraph = document.createElement('p');
paragraph.classList.add('text-sm', 'sm:text-base', 'break-words'); // Permet le retour à la ligne
paragraph.textContent = text; // Sécurité: toujours textContent pour l'input utilisateur
bubbleDiv.appendChild(paragraph);
} else { // Assistant
bubbleDiv.classList.add('bg-gray-100', 'text-gray-800', 'rounded-bl-none', 'border', 'border-gray-200');
const proseDiv = document.createElement('div');
// Appliquer les classes Prose pour le rendu Markdown/HTML
proseDiv.classList.add('prose', 'prose-sm', 'sm:prose-base', 'max-w-none', 'text-gray-800',
'prose-headings:font-semibold', 'prose-headings:text-gray-800',
'prose-a:text-blue-600', 'prose-a:no-underline', 'hover:prose-a:underline',
'prose-strong:text-gray-800', 'prose-code:text-red-600', 'prose-code:font-mono',
'prose-blockquote:text-gray-600', 'break-words');
if (isHtml) {
// ATTENTION : NECESSITE QUE LE HTML DU BACKEND SOIT NETTOYÉ/SÉCURISÉ
proseDiv.innerHTML = text;
} else {
proseDiv.textContent = text;
}
bubbleDiv.appendChild(proseDiv);
}
messageWrapper.appendChild(bubbleDiv);
// Insérer le nouveau message AVANT l'indicateur de chargement pour qu'il reste en bas
chatMessages.insertBefore(messageWrapper, loadingIndicator);
// Faire défiler seulement si on n'est pas en train de charger l'historique initial
if (historyLoadingIndicator.parentNode !== chatMessages) {
scrollToBottom();
}
}
/** Charge l'historique de chat depuis le backend */
async function loadChatHistory() {
console.log("Tentative de chargement de l'historique...");
// Garder l'indicateur visible pendant le chargement
historyLoadingIndicator.style.display = 'block';
try {
const response = await fetch(API_HISTORY_ENDPOINT);
if (!response.ok) {
let errorMsg = `Erreur serveur (${response.status})`;
try { // Tenter de lire un message d'erreur JSON du backend
const errData = await response.json();
errorMsg = errData.error || errorMsg;
} catch (e) { /* Ignorer si pas JSON */ }
throw new Error(errorMsg);
}
const data = await response.json();
if (data.success && Array.isArray(data.history)) {
console.log(`Historique reçu: ${data.history.length} message(s).`);
// Vider les messages actuels (au cas où, et supprime l'indicateur de chargement d'historique)
chatMessages.innerHTML = '';
// Remettre l'indicateur de chargement de NOUVEAU message (caché)
chatMessages.appendChild(loadingIndicator);
loadingIndicator.style.display = 'none'; // S'assurer qu'il est caché
if (data.history.length === 0) {
addMessageToChat('assistant', "Bonjour ! Comment puis-je vous aider aujourd'hui ?");
} else {
data.history.forEach(message => {
const isAssistantHtml = message.role === 'assistant';
addMessageToChat(message.role, message.text, isAssistantHtml);
});
}
// Faire défiler vers le bas après avoir ajouté tous les messages
scrollToBottom();
} else {
throw new Error(data.error || "Format de réponse de l'historique invalide.");
}
} catch (error) {
console.error("Erreur lors du chargement de l'historique:", error);
// Afficher l'erreur dans la zone de chat à la place de l'indicateur
chatMessages.innerHTML = ''; // Vider
chatMessages.appendChild(loadingIndicator); // Remettre l'indicateur caché
loadingIndicator.style.display = 'none';
displayError(`Impossible de charger l'historique: ${error.message}`);
} finally {
// Cacher l'indicateur de chargement d'historique s'il est toujours là (en cas d'erreur avant de le vider)
if (historyLoadingIndicator.parentNode === chatMessages) {
historyLoadingIndicator.remove();
}
// Mettre le focus sur l'input à la fin
promptInput.focus();
}
}
/** Réinitialise l'input fichier */
function clearFileInput() {
fileUpload.value = ''; // Réinitialise la sélection
fileNameSpan.textContent = '';
fileNameSpan.title = '';
clearFileButton.style.display = 'none'; // Cache le bouton 'X'
}
// === Gestionnaires d'événements ===
// Changement sur l'input fichier
fileUpload.addEventListener('change', () => {
if (fileUpload.files.length > 0) {
const file = fileUpload.files[0];
const name = file.name;
// Tronquer le nom si trop long pour l'affichage
fileNameSpan.textContent = name.length > 20 ? name.substring(0, 17) + '...' : name;
fileNameSpan.title = name; // Titre complet au survol
clearFileButton.style.display = 'inline-block'; // Montre le bouton 'X'
} else {
clearFileInput(); // Appeler la fonction de nettoyage
}
});
// Clic sur le bouton 'X' pour retirer le fichier
clearFileButton.addEventListener('click', () => {
clearFileInput();
});
// Soumission du formulaire de chat
chatForm.addEventListener('submit', async (e) => {
e.preventDefault(); // Empêche le rechargement de page
const prompt = promptInput.value.trim();
const file = fileUpload.files[0]; // Récupère le fichier s'il y en a un
const useWebSearch = webSearchToggle.checked;
// Vérifier si un prompt ou un fichier est présent
if (!prompt && !file) {
displayError("Veuillez entrer un message ou sélectionner un fichier.");
promptInput.focus();
return;
}
errorMessageDiv.style.display = 'none'; // Cacher les erreurs précédentes
// Afficher le message utilisateur immédiatement
let userMessageText = prompt;
if (file) {
// Préciser le fichier dans le message affiché si les deux sont présents
userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
}
addMessageToChat('user', userMessageText);
// Préparer les données pour l'envoi
const formData = new FormData();
formData.append('prompt', prompt); // Envoyer même si vide si un fichier est présent
formData.append('web_search', useWebSearch); // Envoyer 'true' ou 'false'
if (file) {
formData.append('file', file);
}
// Afficher le chargement et vider les champs
showLoading(true);
promptInput.value = '';
clearFileInput(); // Nettoyer l'input fichier après envoi
try {
// Envoyer les données au backend
const response = await fetch(API_CHAT_ENDPOINT, {
method: 'POST',
body: formData,
// Pas besoin de 'Content-Type', FormData le gère
});
const data = await response.json(); // Tenter de lire la réponse JSON
if (!response.ok) {
// Utiliser le message d'erreur du JSON si dispo, sinon statut HTTP
throw new Error(data.error || `Erreur serveur: ${response.status}`);
}
if (data.success && data.message) {
// Ajouter la réponse de l'assistant (en supposant qu'elle est en HTML sûr)
addMessageToChat('assistant', data.message, true);
} else {
// Gérer le cas où success=true mais pas de message, ou success=false
throw new Error(data.error || "Réponse invalide ou vide du serveur.");
}
} catch (error) {
console.error("Erreur lors de l'envoi du message:", error);
displayError(error.message);
// Optionnel : Supprimer le message utilisateur qui a causé l'erreur ? (Peut être déroutant)
} finally {
// Arrêter l'indicateur de chargement et réactiver les contrôles
showLoading(false);
promptInput.focus(); // Remettre le focus sur l'input
}
});
// Soumission du formulaire pour effacer le chat
clearForm.addEventListener('submit', async (e) => {
e.preventDefault(); // Empêche la soumission classique
if (confirm("Êtes-vous sûr de vouloir effacer toute la conversation ?")) {
console.log("Demande d'effacement du chat...");
// Ajouter un indicateur visuel temporaire si souhaité
const originalButtonText = e.target.querySelector('button').textContent;
e.target.querySelector('button').textContent = '...';
e.target.querySelector('button').disabled = true;
try {
const response = await fetch(CLEAR_ENDPOINT, { method: 'POST' });
const data = await response.json(); // Lire la réponse JSON
if (response.ok && data.success) {
console.log("Chat effacé avec succès.");
// Effacer les messages affichés dans le DOM
chatMessages.innerHTML = ''; // Vide complètement
// Remettre l'indicateur de chargement de NOUVEAU message (caché)
chatMessages.appendChild(loadingIndicator);
loadingIndicator.style.display = 'none';
// Ajouter le message d'accueil initial
addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
errorMessageDiv.style.display = 'none'; // Cacher toute erreur précédente
} else {
throw new Error(data.error || "Impossible d'effacer côté serveur.");
}
} catch (error) {
console.error("Erreur lors de l'effacement:", error);
displayError(`Erreur lors de l'effacement du chat: ${error.message}`);
} finally {
// Restaurer le bouton
e.target.querySelector('button').textContent = originalButtonText;
e.target.querySelector('button').disabled = false;
promptInput.focus(); // Remettre le focus
}
}
});
// === Initialisation au chargement de la page ===
loadChatHistory(); // Charger l'historique dès que le DOM est prêt
});
</script>
</body>
</html>