Hugging Face's logo

Spaces:
Docfile
/
Chatm
Running

App Files Community
Chatm / templates /index.html
Docfile's picture
Docfile
Update templates/index.html
e2542f2 verified
raw
history blame
33.1 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 généraux */
html, body {
min-height: 100vh; /* Assure que le body prend toute la hauteur */
margin: 0;
padding: 0;
}
body {
display: flex;
flex-direction: column; /* Empile les enfants verticalement */
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; /* Empile les zones de message et d'input */
flex-grow: 1; /* Permet au conteneur de grandir pour remplir l'espace */
min-height: 0; /* Nécessaire pour que flex-grow fonctionne correctement dans un conteneur flex */
}
#chat-messages {
flex-grow: 1; /* Permet à la zone de message de grandir */
overflow-y: auto; /* Ajoute une barre de défilement si nécessaire */
min-height: 0; /* Nécessaire pour le défilement correct */
}
/* Barre de défilement personnalisée */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: #a8a8a8;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #7a7a7a;
}
/* Styles pour le rendu Markdown (Prose) */
#chat-messages .prose code:not(pre code) { /* Inline code */
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 { /* Code block */
background-color: #f3f4f6; /* gray-100 */
padding: 0.8em 1em;
border-radius: 6px;
overflow-x: auto; /* Horizontal scroll for long code lines */
font-size: 0.875rem; /* text-sm */
}
#chat-messages .prose pre code { /* Code inside block */
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 */
}
/* Indicateur de chargement */
#history-loading {
padding: 20px;
text-align: center;
color: #6b7280; /* gray-500 */
font-style: italic;
}
/* Zone de prévisualisation des images */
#file-preview {
margin-top: 8px;
}
#file-preview img {
max-width: 100%; /* Empêche l'image de dépasser */
max-height: 150px; /* Limite la hauteur */
border: 1px solid #ddd; /* gray-300 */
border-radius: 4px;
padding: 4px;
}
/* Bouton de copie (positionné en haut à droite de la bulle de réponse) */
.copy-btn {
position: absolute;
top: 4px;
right: 4px;
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 4px;
padding: 2px 4px;
cursor: pointer;
font-size: 0.75rem; /* text-xs */
display: none; /* Caché par défaut */
color: #374151; /* gray-700 */
transition: background-color 0.2s ease;
}
.copy-btn:hover {
background: rgba(230, 230, 230, 0.9);
}
/* Afficher le bouton au survol de la bulle parente */
.message-wrapper:hover .copy-btn {
display: block;
}
</style>
</head>
<body class="bg-gray-100 flex flex-col min-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>
<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 -->
<div id="chat-messages" class="flex-grow overflow-y-auto p-4 sm:p-6 space-y-4 scroll-smooth">
<!-- Indicateur de chargement initial de l'historique -->
<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 pendant la réponse de l'IA -->
<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 id="loading-text">Mariam réfléchit...</span> <!-- Texte dynamique -->
</div>
</div>
</div>
<!-- Zone d'erreur -->
<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, d'upload et YouTube -->
<div class="bg-gray-50 border-t border-gray-200 px-4 py-2 flex-shrink-0 space-y-2">
<!-- Ligne 1 : Toggles & Upload Fichier -->
<div class="flex items-center justify-between text-sm">
<!-- Groupe de Toggles (Gauche) -->
<div class="flex items-center space-x-4">
<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-600 focus:ring-blue-500 focus:ring-offset-0 border-gray-300">
<span class="hidden sm:inline">Recherche Web</span>
<span class="sm:hidden">Web</span> <!-- Version courte pour mobile -->
</label>
<label for="advanced_reasoning_toggle" class="flex items-center space-x-2 cursor-pointer text-purple-600 hover:text-purple-800 select-none" title="Utiliser le raisonnement avancé (Gemini Pro - recommandé pour vidéo, peut avoir un cooldown)">
<input type="checkbox" id="advanced_reasoning_toggle" name="advanced_reasoning" value="true" class="form-checkbox h-4 w-4 rounded text-purple-600 focus:ring-purple-500 focus:ring-offset-0 border-gray-300">
<span class="hidden sm:inline">Raisonnement Avancé</span>
<span class="sm:hidden">Avancé</span> <!-- Version courte pour mobile -->
<span id="advanced-cooldown-timer" class="text-xs text-gray-500 ml-1" style="display: none;"></span> <!-- Indicateur cooldown -->
</label>
</div>
<!-- Upload Fichier (Droite) -->
<div class="flex items-center space-x-2">
<label for="file_upload" class="cursor-pointer text-blue-600 hover:text-blue-700 font-medium flex items-center" title="Joindre un fichier (txt, pdf, img, vidéo)">
<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/Vidéo</span>
<input type="file" id="file_upload" name="file" class="hidden" accept=".txt,.pdf,.png,.jpg,.jpeg,.mp4,.mov,.avi,.mkv,.webm,image/*,video/*"> <!-- Input caché -->
</label>
<span id="file-name" class="text-gray-500 text-xs truncate max-w-[150px]" title=""></span> <!-- Nom du fichier -->
<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;"> <!-- Bouton pour retirer -->
<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>
<!-- Ligne 2 : Input URL YouTube -->
<div class="flex items-center space-x-2">
<label for="youtube_url_input" class="text-sm font-medium text-gray-700 whitespace-nowrap">Lien YouTube:</label>
<input type="url" id="youtube_url_input" name="youtube_url" class="flex-grow form-input px-3 py-1 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-sm" placeholder="Collez l'URL de la vidéo YouTube ici...">
</div>
<!-- Notes & Prévisualisation -->
<p id="video-processing-note" class="text-xs text-gray-500 text-center mt-1" style="display: none;">
Note: Le traitement des vidéos (upload ou YouTube) peut prendre plusieurs minutes.
</p>
<div id="file-preview"></div> <!-- Zone pour prévisualiser les images -->
</div>
<!-- Formulaire d'entrée du message principal -->
<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 une question (optionnel si fichier/lien)..." 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">
<!-- Icône d'envoi -->
<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 DOM ---
const chatForm = document.getElementById('chat-form');
const promptInput = document.getElementById('prompt');
const chatMessages = document.getElementById('chat-messages');
const loadingIndicator = document.getElementById('loading-indicator');
const loadingText = document.getElementById('loading-text');
const historyLoadingIndicator = document.getElementById('history-loading');
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 filePreview = document.getElementById('file-preview');
const sendButton = document.getElementById('send-button');
const clearForm = document.getElementById('clear-form');
const advancedToggle = document.getElementById('advanced_reasoning_toggle');
const advancedCooldownTimerSpan = document.getElementById('advanced-cooldown-timer');
const videoProcessingNote = document.getElementById('video-processing-note');
const youtubeUrlInput = document.getElementById('youtube_url_input'); // Input YouTube
// --- Constantes & État ---
const API_CHAT_ENDPOINT = '/api/chat';
const API_HISTORY_ENDPOINT = '/api/history';
const CLEAR_ENDPOINT = '/clear';
let advancedToggleCooldownEndTime = 0; // Timestamp de fin du cooldown
const COOLDOWN_DURATION = 60 * 1000; // 60 secondes en millisecondes
// --- Fonctions Utilitaires ---
// Fait défiler la zone de chat vers le bas
function scrollToBottom() {
setTimeout(() => { // Léger délai pour laisser le temps au DOM de se mettre à jour
chatMessages.scrollTop = chatMessages.scrollHeight;
}, 50);
}
// Affiche ou cache l'indicateur de chargement principal
function showLoading(show, isMediaOrYoutube = false) {
const currentlyLoading = loadingIndicator.style.display !== 'none';
if (show && !currentlyLoading) {
loadingText.textContent = isMediaOrYoutube
? "Traitement média en cours..." // Texte si fichier ou URL YT
: "Mariam réfléchit..."; // Texte par défaut
loadingIndicator.style.display = 'block';
chatMessages.appendChild(loadingIndicator); // Déplace l'indicateur à la fin
scrollToBottom();
} else if (!show && currentlyLoading) {
loadingIndicator.style.display = 'none';
loadingText.textContent = "Mariam réfléchit..."; // Réinitialise le texte
}
// Désactive les éléments pendant le chargement
sendButton.disabled = show;
promptInput.disabled = show;
fileUpload.disabled = show;
clearFileButton.disabled = show;
youtubeUrlInput.disabled = show; // Désactive aussi l'input YouTube
// Ne pas désactiver les toggles pendant le chargement normal
}
// Affiche un message d'erreur
function displayError(message) {
errorTextP.textContent = message || "Une erreur inconnue est survenue.";
errorMessageDiv.style.display = 'flex'; // Utilise flex pour aligner l'icône et le texte si nécessaire
// Fait défiler pour voir l'erreur
errorMessageDiv.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
}
// Ajoute un message (utilisateur ou assistant) à la zone de chat
function addMessageToChat(role, text, isHtml = false) {
errorMessageDiv.style.display = 'none'; // Cache l'erreur précédente
const messageWrapper = document.createElement('div');
messageWrapper.classList.add('message-wrapper', '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'); // `relative` pour le bouton copier
if (role === 'user') {
// Style pour les messages utilisateur
bubbleDiv.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
const paragraph = document.createElement('p');
// `break-words` pour couper les mots longs, `whitespace-pre-wrap` pour conserver les sauts de ligne de l'utilisateur
paragraph.classList.add('text-sm', 'sm:text-base', 'break-words', 'whitespace-pre-wrap');
paragraph.textContent = text;
bubbleDiv.appendChild(paragraph);
} else {
// Style pour les messages de l'assistant
bubbleDiv.classList.add('bg-gray-100', 'text-gray-800', 'rounded-bl-none', 'border', 'border-gray-200');
// Conteneur pour le contenu formaté en Markdown/HTML
const proseDiv = document.createElement('div');
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) {
proseDiv.innerHTML = text; // Injecte le HTML si fourni
} else {
proseDiv.textContent = text; // Sinon, texte brut
}
bubbleDiv.appendChild(proseDiv);
// Ajout du bouton de copie
const copyBtn = document.createElement('button');
copyBtn.textContent = 'Copier';
copyBtn.classList.add('copy-btn');
copyBtn.title = "Copier la réponse";
copyBtn.addEventListener('click', (e) => {
e.stopPropagation(); // Empêche le clic de se propager
e.preventDefault();
// Copie le texte brut (innerText) même si c'est du HTML
let textToCopy = proseDiv.innerText || text; // Fallback au texte original
navigator.clipboard.writeText(textToCopy)
.then(() => {
copyBtn.textContent = 'Copié'; // Confirmation visuelle
setTimeout(() => { copyBtn.textContent = 'Copier'; }, 2000); // Revient à l'état initial après 2s
})
.catch(err => {
console.error('Erreur lors de la copie :', err);
// Optionnel : Afficher une petite erreur près du bouton
});
});
bubbleDiv.appendChild(copyBtn);
}
messageWrapper.appendChild(bubbleDiv);
// Insère le nouveau message AVANT l'indicateur de chargement s'il est visible
if (loadingIndicator.parentNode === chatMessages) {
chatMessages.insertBefore(messageWrapper, loadingIndicator);
} else {
chatMessages.appendChild(messageWrapper); // Sinon, ajoute à la fin
}
// Ne fait défiler que si l'historique n'est pas en cours de chargement (pour éviter les sauts)
if (historyLoadingIndicator.style.display === 'none') {
scrollToBottom();
}
}
// Démarre le minuteur pour le cooldown du raisonnement avancé
function startAdvancedCooldownTimer() {
advancedToggle.disabled = true; // Désactive le toggle
advancedToggleCooldownEndTime = Date.now() + COOLDOWN_DURATION;
const updateTimer = () => {
const now = Date.now();
if (now >= advancedToggleCooldownEndTime) {
// Fin du cooldown
clearInterval(intervalId);
advancedCooldownTimerSpan.style.display = 'none';
advancedToggle.disabled = false; // Réactive le toggle
advancedToggleCooldownEndTime = 0;
} else {
// Met à jour le temps restant
const remainingSeconds = Math.ceil((advancedToggleCooldownEndTime - now) / 1000);
advancedCooldownTimerSpan.textContent = `(${remainingSeconds}s)`;
advancedCooldownTimerSpan.style.display = 'inline';
}
};
const intervalId = setInterval(updateTimer, 1000); // Met à jour toutes les secondes
updateTimer(); // Appel initial pour afficher immédiatement
}
// Charge l'historique de chat depuis le serveur
async function loadChatHistory() {
historyLoadingIndicator.style.display = 'block'; // Affiche le chargement de l'historique
try {
const response = await fetch(API_HISTORY_ENDPOINT);
if (!response.ok) {
let errorMsg = `Erreur serveur (${response.status})`;
try { errorMsg = (await response.json()).error || errorMsg; } catch(e){}
throw new Error(errorMsg);
}
const data = await response.json();
if (data.success && Array.isArray(data.history)) {
chatMessages.innerHTML = ''; // Vide la zone de chat avant d'ajouter l'historique
chatMessages.appendChild(loadingIndicator); // Ré-ajoute le template de chargement (caché)
loadingIndicator.style.display = 'none'; // S'assure qu'il est caché
if (data.history.length === 0) {
// Message d'accueil si l'historique est vide
addMessageToChat('assistant', "Bonjour ! Posez une question, joignez un fichier/vidéo ou collez un lien YouTube.");
} else {
// Ajoute chaque message de l'historique
data.history.forEach(message => {
const isAssistantHtml = message.role === 'assistant'; // Les messages de l'assistant sont en HTML
addMessageToChat(message.role, message.text, isAssistantHtml);
});
}
scrollToBottom(); // Fait défiler vers le bas après avoir chargé l'historique
} else {
throw new Error(data.error || "Format de réponse de l'historique invalide.");
}
} catch (error) {
// En cas d'erreur de chargement, vide quand même et affiche l'erreur
chatMessages.innerHTML = '';
chatMessages.appendChild(loadingIndicator);
loadingIndicator.style.display = 'none';
displayError(`Impossible de charger l'historique: ${error.message}`);
} finally {
// Supprime définitivement l'indicateur de chargement de l'historique
const histLoadingElement = document.getElementById('history-loading');
if (histLoadingElement) { histLoadingElement.remove(); }
promptInput.focus(); // Met le focus sur l'input principal
}
}
// Réinitialise l'input de fichier et la prévisualisation
function clearFileInput() {
fileUpload.value = ''; // Vide la valeur de l'input file
fileNameSpan.textContent = ''; // Vide le nom affiché
fileNameSpan.title = ''; // Vide le title (tooltip)
clearFileButton.style.display = 'none'; // Cache le bouton de suppression
filePreview.innerHTML = ''; // Vide la zone de prévisualisation
videoProcessingNote.style.display = 'none'; // Cache la note sur le temps de traitement
}
// --- Écouteurs d'Événements ---
// Changement dans l'input de fichier
fileUpload.addEventListener('change', () => {
if (fileUpload.files.length > 0) {
const file = fileUpload.files[0];
const name = file.name;
// Affiche le nom du fichier (tronqué si trop long)
fileNameSpan.textContent = name.length > 20 ? name.substring(0, 17) + '...' : name;
fileNameSpan.title = name; // Nom complet en tooltip
clearFileButton.style.display = 'inline-block'; // Affiche le bouton de suppression
filePreview.innerHTML = ''; // Vide la prévisualisation précédente
videoProcessingNote.style.display = 'none'; // Cache la note
// Efface l'input YouTube si un fichier est sélectionné (priorité au fichier)
youtubeUrlInput.value = '';
// Affiche une prévisualisation si c'est une image
if (file.type.startsWith('image/')) {
const reader = new FileReader();
reader.onload = (e) => { filePreview.innerHTML = `<img src="${e.target.result}" alt="Prévisualisation">`; };
reader.readAsDataURL(file);
} else if (file.type.startsWith('video/')) {
// Affiche un texte simple pour les vidéos et la note sur le temps
filePreview.innerHTML = `<p class="text-xs text-gray-500 italic">Fichier vidéo sélectionné.</p>`;
videoProcessingNote.style.display = 'block';
}
} else {
// Si aucun fichier n'est sélectionné (ou annulé), réinitialise
clearFileInput();
}
});
// Saisie dans l'input YouTube
youtubeUrlInput.addEventListener('input', () => {
if (youtubeUrlInput.value.trim() !== '') {
// Si l'utilisateur saisit une URL, efface l'input fichier (priorité à l'URL)
clearFileInput();
videoProcessingNote.style.display = 'block'; // Affiche la note pour les URL aussi
} else {
// Si l'input URL est vidé, cache la note
videoProcessingNote.style.display = 'none';
}
});
// Clic sur le bouton pour retirer le fichier
clearFileButton.addEventListener('click', () => {
clearFileInput();
});
// Soumission du formulaire de chat principal
chatForm.addEventListener('submit', async (e) => {
e.preventDefault(); // Empêche la soumission classique du formulaire
// Récupère les valeurs des inputs et toggles
const prompt = promptInput.value.trim();
const file = fileUpload.files[0];
const youtubeUrl = youtubeUrlInput.value.trim();
const useWebSearch = webSearchToggle.checked;
const useAdvanced = advancedToggle.checked;
// Validation : il faut au moins un fichier, une URL YouTube ou un prompt texte
if (!file && !youtubeUrl && !prompt) {
displayError("Veuillez fournir un message, un fichier/vidéo ou un lien YouTube.");
promptInput.focus();
return; // Arrête l'exécution si rien n'est fourni
}
errorMessageDiv.style.display = 'none'; // Cache les erreurs précédentes
// Vérifie le cooldown pour le raisonnement avancé
if (useAdvanced) {
const now = Date.now();
if (now < advancedToggleCooldownEndTime) {
const remainingSeconds = Math.ceil((advancedToggleCooldownEndTime - now) / 1000);
displayError(`Le raisonnement avancé est disponible dans ${remainingSeconds} seconde(s).`);
return; // Arrête si en cooldown
}
// Si la vérification passe, le cooldown sera démarré APRÈS la soumission réussie
}
// Détermine si la requête concerne un média (fichier ou URL)
let isMediaInput = !!file || !!youtubeUrl;
// Construit le message à afficher pour l'utilisateur
let userMessageText = prompt;
if (file) { // Priorité au fichier pour l'affichage
userMessageText = prompt ? `[${file.name}] ${prompt}` : `[${file.name}]`;
} else if (youtubeUrl) { // Sinon, URL YouTube
// Affiche "[YouTube]" suivi du prompt (si existe) et de l'URL sur une nouvelle ligne
userMessageText = `[YouTube]${prompt ? ` ${prompt}` : ''}\n${youtubeUrl}`;
}
addMessageToChat('user', userMessageText); // Ajoute le message utilisateur au chat
// Prépare les données à envoyer au serveur
const formData = new FormData();
formData.append('prompt', prompt);
formData.append('web_search', useWebSearch);
if (file) {
formData.append('file', file); // Ajoute le fichier s'il existe
}
formData.append('youtube_url', youtubeUrl); // Ajoute l'URL YouTube (même si vide)
formData.append('advanced_reasoning', useAdvanced);
// Affiche l'indicateur de chargement (avec texte spécifique si média)
showLoading(true, isMediaInput);
// Réinitialise les inputs après avoir récupéré leurs valeurs
promptInput.value = '';
clearFileInput(); // Réinitialise aussi l'upload fichier
youtubeUrlInput.value = ''; // Réinitialise l'input YouTube
videoProcessingNote.style.display = 'none'; // Cache la note
// Réinitialise le toggle avancé et démarre le cooldown s'il a été utilisé
advancedToggle.checked = false;
if (useAdvanced) startAdvancedCooldownTimer();
// --- Appel API au backend ---
try {
const response = await fetch(API_CHAT_ENDPOINT, {
method: 'POST',
body: formData, // Envoie les données du formulaire
});
const data = await response.json(); // Attend la réponse JSON
// Gère les erreurs HTTP ou les erreurs retournées par l'API
if (!response.ok) {
throw new Error(data.error || `Erreur serveur: ${response.status}`);
}
// Si la réponse est OK et contient un message
if (data.success && data.message) {
addMessageToChat('assistant', data.message, true); // Ajoute la réponse de l'assistant (HTML)
} else {
// Si la réponse est OK mais le format est incorrect
throw new Error(data.error || "Réponse invalide ou vide du serveur.");
}
} catch (error) {
// Affiche l'erreur à l'utilisateur
displayError(error.message);
// Optionnel : Gérer l'annulation du cooldown en cas d'erreur API ?
} finally {
// Cache l'indicateur de chargement dans tous les cas (succès ou erreur)
showLoading(false);
promptInput.focus(); // Remet le focus sur l'input principal
}
});
// Soumission du formulaire pour effacer le chat
clearForm.addEventListener('submit', async (e) => {
e.preventDefault();
if (confirm("Êtes-vous sûr de vouloir effacer toute la conversation ?")) {
const btn = e.target.querySelector('button');
const originalText = btn.textContent;
btn.textContent = '...'; // Indique le traitement
btn.disabled = true;
try {
// Envoie une requête POST pour effacer côté serveur
const response = await fetch(CLEAR_ENDPOINT, {
method: 'POST',
headers: { 'X-Requested-With': 'XMLHttpRequest' } // Pour identifier comme requête AJAX côté serveur si nécessaire
});
const data = await response.json();
if (response.ok && data.success) {
// Si succès, vide le chat localement et affiche un message
chatMessages.innerHTML = '';
chatMessages.appendChild(loadingIndicator); // Ré-ajoute le template
loadingIndicator.style.display = 'none';
addMessageToChat('assistant', "Conversation effacée. Comment puis-je vous aider ?");
errorMessageDiv.style.display = 'none'; // Cache les erreurs précédentes
} else {
// Si erreur côté serveur
throw new Error(data.error || "Impossible d'effacer côté serveur.");
}
} catch (error) {
// Affiche l'erreur si l'effacement échoue
displayError(`Erreur lors de l'effacement du chat: ${error.message}`);
} finally {
// Réactive le bouton dans tous les cas
btn.textContent = originalText;
btn.disabled = false;
promptInput.focus();
}
}
});
// --- Chargement Initial ---
loadChatHistory(); // Charge l'historique au démarrage de la page
});
</script>
</body>
</html>