| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Mariam AI - SVT</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"> |
| | <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> |
| | <style> |
| | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| | |
| | body { |
| | font-family: 'Poppins', sans-serif; |
| | background: linear-gradient(135deg, #f6f8fc 0%, #e9f0f7 100%); |
| | } |
| | |
| | .animate-fade-in { |
| | animation: fadeIn 0.5s ease-in; |
| | } |
| | |
| | .animate-slide-up { |
| | animation: slideUp 0.5s ease-out; |
| | } |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; } |
| | to { opacity: 1; } |
| | } |
| | |
| | @keyframes slideUp { |
| | from { transform: translateY(20px); opacity: 0; } |
| | to { transform: translateY(0); opacity: 1; } |
| | } |
| | |
| | .glass-effect { |
| | background: rgba(255, 255, 255, 0.95); |
| | backdrop-filter: blur(10px); |
| | border: 1px solid rgba(255, 255, 255, 0.2); |
| | } |
| | |
| | .hover-scale { |
| | transition: transform 0.2s; |
| | } |
| | |
| | .hover-scale:hover { |
| | transform: scale(1.02); |
| | } |
| | |
| | .image-preview { |
| | transition: all 0.3s ease; |
| | } |
| | |
| | .image-preview:hover .image-overlay { |
| | opacity: 1; |
| | } |
| | |
| | .image-overlay { |
| | opacity: 0; |
| | transition: opacity 0.3s ease; |
| | background: rgba(0, 0, 0, 0.5); |
| | } |
| | |
| | .preview-container { |
| | display: grid; |
| | grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
| | gap: 1rem; |
| | } |
| | |
| | @media (max-width: 640px) { |
| | .preview-container { |
| | grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); |
| | } |
| | .image-preview img { |
| | height: 32px; |
| | object-fit: cover; |
| | } |
| | #historyContainer .grid { |
| | grid-template-columns: repeat(1, minmax(0, 1fr)); |
| | } |
| | } |
| | |
| | #response { |
| | white-space: pre-wrap; |
| | word-wrap: break-word; |
| | overflow-wrap: break-word; |
| | } |
| | |
| | #response p { |
| | margin-bottom: 1em; |
| | line-height: 1.6; |
| | } |
| | |
| | #response ul, #response ol { |
| | padding-left: 1.5em; |
| | margin-bottom: 1em; |
| | } |
| | |
| | #response li { |
| | margin-bottom: 0.5em; |
| | } |
| | |
| | @media (max-width: 640px) { |
| | #response { |
| | font-size: 0.95rem; |
| | padding: 1rem; |
| | } |
| | |
| | #response p, #response li { |
| | line-height: 1.7; |
| | } |
| | |
| | #response ul, #response ol { |
| | padding-left: 1.2em; |
| | } |
| | } |
| | |
| | .telegram-status { |
| | margin-top: 1rem; |
| | padding: 0.5rem; |
| | border-radius: 0.5rem; |
| | font-size: 0.875rem; |
| | } |
| | |
| | .telegram-success { |
| | background-color: #d1fae5; |
| | color: #065f46; |
| | border: 1px solid #10b981; |
| | } |
| | |
| | .telegram-error { |
| | background-color: #fee2e2; |
| | color: #991b1b; |
| | border: 1px solid #ef4444; |
| | } |
| | </style> |
| | </head> |
| | <body class="min-h-screen flex items-center justify-center p-4 md:p-8"> |
| | <div class="container mx-auto glass-effect rounded-2xl shadow-xl max-w-4xl animate-fade-in p-6 md:p-8"> |
| | <header class="flex flex-col md:flex-row justify-between items-center mb-8"> |
| | <div class="text-center md:text-left mb-4 md:mb-0"> |
| | <h1 class="text-4xl font-bold text-blue-900">Mariam AI</h1> |
| | <p class="text-gray-600 mt-2">Assistant SVT Intelligent</p> |
| | </div> |
| | <div class="flex gap-2"> |
| | |
| | <button onclick="showInfo()" class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-xl hover-scale transition-all duration-300 flex items-center gap-2"> |
| | <i class="fas fa-info-circle"></i> |
| | <span>Guide</span> |
| | </button> |
| | </div> |
| | </header> |
| |
|
| | <div class="space-y-8 animate-slide-up"> |
| | <div class="relative"> |
| | <label for="svtOption" class="block mb-3 text-lg font-medium text-gray-700">Type d'exercice :</label> |
| | <select id="svtOption" class="w-full p-4 border border-gray-200 rounded-xl bg-white shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-300"> |
| | <option value="Restitution organisée des connaissances">Restitution Organisée des Connaissances</option> |
| | <option value="Exploitation du document">Exploitation du Document</option> |
| | <option value="Synthèse">Synthèse</option> |
| | </select> |
| | </div> |
| |
|
| | <div class="relative"> |
| | <label class="block mb-3 text-lg font-medium text-gray-700">Images du sujet :</label> |
| | <div class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center hover:border-blue-500 transition-all duration-300"> |
| | <input type="file" id="imageUpload" class="hidden" multiple accept="image/*" onchange="handleImageUpload(event)"> |
| | <label for="imageUpload" class="cursor-pointer"> |
| | <i class="fas fa-cloud-upload-alt text-4xl text-blue-500 mb-4"></i> |
| | <p class="text-gray-600">Glissez vos images ici ou cliquez pour sélectionner</p> |
| | <p class="text-sm text-gray-500 mt-2">Format acceptés : JPG, PNG, GIF</p> |
| | </label> |
| | </div> |
| |
|
| | <div id="previewContainer" class="preview-container mt-4"></div> |
| | </div> |
| |
|
| | <button onclick="submitQuestion()" class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white py-4 rounded-xl hover-scale transition-all duration-300 font-semibold text-lg flex items-center justify-center gap-2"> |
| | <i class="fas fa-paper-plane"></i> |
| | Analyser |
| | </button> |
| |
|
| | <div id="telegramStatus" class="hidden"></div> |
| |
|
| | <div id="loader" class="hidden"> |
| | <div class="flex flex-col items-center space-y-4 p-8"> |
| | <div class="animate-spin rounded-full h-12 w-12 border-4 border-blue-500 border-t-transparent"></div> |
| | <p class="text-gray-600 text-lg">Analyse en cours...</p> |
| | </div> |
| | </div> |
| |
|
| | <div id="response" class="mt-6 p-6 bg-white rounded-xl shadow-sm prose max-w-none"></div> |
| |
|
| | <div id="copyResponseContainer" class="hidden mb-8"> |
| | <button onclick="copyResponse()" class="w-full bg-gray-800 hover:bg-gray-900 text-white px-6 py-3 rounded-xl hover-scale transition-all duration-300 flex items-center justify-center gap-2"> |
| | <i class="fas fa-copy"></i> |
| | Copier la réponse |
| | </button> |
| | </div> |
| | </div> |
| | |
| | <div class="space-y-8 animate-slide-up"> |
| | <h2 class="text-2xl font-bold text-blue-900 mb-4">Historique des Réponses</h2> |
| | <button onclick="clearHistory()" class="bg-red-500 hover:bg-red-700 text-white px-4 py-2 rounded-lg"> |
| | Effacer l'historique |
| | </button> |
| | <div id="historyContainer"></div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | |
| | const TELEGRAM_BOT_TOKEN = "8180304240:AAGJZ_MJ6eKtbymxkqzjgOJCr6PWb7uas9U"; |
| | const TELEGRAM_CHAT_ID = "-4972732072"; |
| | |
| | let uploadedFiles = []; |
| | let analysisHistory = []; |
| | |
| | |
| | async function sendImageToTelegram(file, caption = '') { |
| | const formData = new FormData(); |
| | formData.append('chat_id', TELEGRAM_CHAT_ID); |
| | formData.append('photo', file); |
| | formData.append('caption', caption.substring(0, 1024)); |
| | |
| | try { |
| | const response = await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendPhoto`, { |
| | method: 'POST', |
| | body: formData |
| | }); |
| | |
| | const result = await response.json(); |
| | return { |
| | success: result.ok, |
| | message: result.ok ? 'Image envoyée avec succès' : result.description |
| | }; |
| | } catch (error) { |
| | return { |
| | success: false, |
| | message: `Erreur réseau: ${error.message}` |
| | }; |
| | } |
| | } |
| | |
| | |
| | async function sendMessageToTelegram(message) { |
| | const data = { |
| | chat_id: TELEGRAM_CHAT_ID, |
| | text: message, |
| | parse_mode: 'HTML' |
| | }; |
| | |
| | try { |
| | const response = await fetch(`https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`, { |
| | method: 'POST', |
| | headers: { |
| | 'Content-Type': 'application/json', |
| | }, |
| | body: JSON.stringify(data) |
| | }); |
| | |
| | const result = await response.json(); |
| | return { |
| | success: result.ok, |
| | message: result.ok ? 'Message envoyé avec succès' : result.description |
| | }; |
| | } catch (error) { |
| | return { |
| | success: false, |
| | message: `Erreur réseau: ${error.message}` |
| | }; |
| | } |
| | } |
| | |
| | |
| | async function testTelegramConnection() { |
| | const testMessage = `🧪 Test de connexion\n📅 ${new Date().toLocaleString()}\n🤖 Bot SVT Mariam AI`; |
| | |
| | Swal.fire({ |
| | title: 'Test en cours...', |
| | text: 'Envoi du message de test vers Telegram', |
| | allowOutsideClick: false, |
| | didOpen: () => { |
| | Swal.showLoading(); |
| | } |
| | }); |
| | |
| | const result = await sendMessageToTelegram(testMessage); |
| | |
| | Swal.fire({ |
| | icon: result.success ? 'success' : 'error', |
| | title: result.success ? 'Connexion réussie !' : 'Erreur de connexion', |
| | text: result.message, |
| | confirmButtonColor: '#2563eb' |
| | }); |
| | } |
| | |
| | function handleImageUpload(event) { |
| | const files = event.target.files; |
| | const previewContainer = document.getElementById('previewContainer'); |
| | |
| | for (let i = 0; i < files.length; i++) { |
| | const file = files[i]; |
| | uploadedFiles.push(file); |
| | |
| | const reader = new FileReader(); |
| | reader.onload = function(e) { |
| | const imageId = `img-${Date.now()}-${i}`; |
| | const previewDiv = document.createElement('div'); |
| | previewDiv.className = 'image-preview relative rounded-lg overflow-hidden'; |
| | previewDiv.id = imageId; |
| | previewDiv.innerHTML = ` |
| | <img src="${e.target.result}" alt="${file.name}" class="w-full h-40 object-cover"> |
| | <div class="image-overlay absolute inset-0 flex items-center justify-center"> |
| | <button onclick="removeImage('${imageId}')" class="bg-red-500 hover:bg-red-600 text-white p-2 rounded-full transition-all duration-300"> |
| | <i class="fas fa-trash"></i> |
| | </button> |
| | <button onclick="previewImage('${e.target.result}')" class="bg-blue-500 hover:bg-blue-600 text-white p-2 rounded-full ml-2 transition-all duration-300"> |
| | <i class="fas fa-eye"></i> |
| | </button> |
| | </div> |
| | <div class="bg-black bg-opacity-50 text-white text-xs p-1 absolute bottom-0 left-0 right-0"> |
| | ${file.name.substring(0, 15)}${file.name.length > 15 ? '...' : ''} |
| | </div> |
| | `; |
| | previewContainer.appendChild(previewDiv); |
| | }; |
| | reader.readAsDataURL(file); |
| | } |
| | } |
| | |
| | function removeImage(imageId) { |
| | const imageIndex = uploadedFiles.findIndex((file, index) => { |
| | return `img-${file.lastModified || Date.now()}-${index}` === imageId; |
| | }); |
| | |
| | if (imageIndex !== -1) { |
| | uploadedFiles.splice(imageIndex, 1); |
| | } |
| | |
| | const element = document.getElementById(imageId); |
| | if (element) { |
| | element.remove(); |
| | } |
| | } |
| | |
| | function previewImage(src) { |
| | Swal.fire({ |
| | imageUrl: src, |
| | imageAlt: 'Prévisualisation', |
| | width: '80%', |
| | showConfirmButton: false, |
| | showCloseButton: true, |
| | customClass: { |
| | image: 'max-h-[80vh] object-contain' |
| | } |
| | }); |
| | } |
| | |
| | function showInfo() { |
| | Swal.fire({ |
| | title: 'Guide d\'utilisation', |
| | html: ` |
| | <div class="text-left space-y-4"> |
| | <div class="flex items-start gap-3"> |
| | <i class="fas fa-check-circle text-green-500 mt-1"></i> |
| | <p>Sélectionnez le type d'exercice correspondant à votre sujet.</p> |
| | </div> |
| | <div class="flex items-start gap-3"> |
| | <i class="fas fa-image text-blue-500 mt-1"></i> |
| | <p>Assurez-vous que vos images sont nettes et bien cadrées.</p> |
| | </div> |
| | <div class="flex items-start gap-3"> |
| | <i class="fas fa-crop-alt text-purple-500 mt-1"></i> |
| | <p>Rognez vos images pour ne garder que l'essentiel du sujet.</p> |
| | </div> |
| | <div class="flex items-start gap-3"> |
| | </div> |
| | </div> |
| | `, |
| | icon: 'info', |
| | confirmButtonText: 'Compris', |
| | confirmButtonColor: '#2563eb', |
| | customClass: { |
| | container: 'font-sans' |
| | } |
| | }); |
| | } |
| | |
| | function copyResponse() { |
| | const responseDiv = document.getElementById('response'); |
| | const range = document.createRange(); |
| | range.selectNode(responseDiv); |
| | window.getSelection().removeAllRanges(); |
| | window.getSelection().addRange(range); |
| | document.execCommand('copy'); |
| | window.getSelection().removeAllRanges(); |
| | |
| | Swal.fire({ |
| | icon: 'success', |
| | title: 'Copié !', |
| | text: 'La réponse a été copiée dans le presse-papiers.', |
| | showConfirmButton: false, |
| | timer: 1500, |
| | customClass: { |
| | popup: 'animate-fade-in' |
| | } |
| | }); |
| | } |
| | |
| | async function submitQuestion() { |
| | if (uploadedFiles.length === 0) { |
| | Swal.fire({ |
| | icon: 'error', |
| | title: 'Images manquantes', |
| | text: 'Veuillez sélectionner au moins une image du sujet.', |
| | confirmButtonColor: '#2563eb' |
| | }); |
| | return; |
| | } |
| | |
| | const option = document.getElementById('svtOption').value; |
| | const loader = document.getElementById('loader'); |
| | const responseDiv = document.getElementById('response'); |
| | const copyResponseContainer = document.getElementById('copyResponseContainer'); |
| | const telegramStatus = document.getElementById('telegramStatus'); |
| | |
| | loader.classList.remove('hidden'); |
| | responseDiv.innerHTML = ''; |
| | copyResponseContainer.classList.add('hidden'); |
| | telegramStatus.classList.add('hidden'); |
| | |
| | |
| | const formData = new FormData(); |
| | formData.append('option', option); |
| | |
| | for (let i = 0; i < uploadedFiles.length; i++) { |
| | formData.append('images', uploadedFiles[i]); |
| | } |
| | |
| | try { |
| | |
| | const timestamp = new Date().toLocaleString(); |
| | const telegramPromises = uploadedFiles.map(async (file, index) => { |
| | const caption = `📚 Exercice SVT - ${option}\n🕐 ${timestamp}\n📄 Image ${index + 1}/${uploadedFiles.length}`; |
| | return await sendImageToTelegram(file, caption); |
| | }); |
| | |
| | |
| | const serverResponse = await fetch('/svt_submit', { |
| | method: 'POST', |
| | body: formData |
| | }); |
| | |
| | const data = await serverResponse.json(); |
| | |
| | |
| | const telegramResults = await Promise.all(telegramPromises); |
| | |
| | loader.classList.add('hidden'); |
| | |
| | |
| | const successCount = telegramResults.filter(r => r.success).length; |
| | const statusMessage = `: ${successCount}/${telegramResults.length} images envoyées`; |
| | telegramStatus.innerHTML = ` |
| | <div class="telegram-status ${successCount === telegramResults.length ? 'telegram-success' : 'telegram-error'}"> |
| | <i class="fab fa-telegram mr-2"></i>${statusMessage} |
| | </div> |
| | `; |
| | telegramStatus.classList.remove('hidden'); |
| | |
| | if (data.error) { |
| | responseDiv.innerHTML = ` |
| | <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded"> |
| | <p class="text-red-700">Erreur : ${data.error}</p> |
| | </div> |
| | `; |
| | } else { |
| | const htmlContent = marked.parse(data.response); |
| | responseDiv.innerHTML = htmlContent; |
| | responseDiv.classList.add('animate-fade-in'); |
| | copyResponseContainer.classList.remove('hidden'); |
| | |
| | |
| | const responseMessage = `🤖 Réponse générée\n\n📝 Type: ${option}\n🕐 ${timestamp}\n\n${data.response.substring(0, 3800)}${data.response.length > 3800 ? '...' : ''}`; |
| | await sendMessageToTelegram(responseMessage); |
| | |
| | |
| | const imagesData = await Promise.all(uploadedFiles.map(file => { |
| | return new Promise((resolve) => { |
| | const reader = new FileReader(); |
| | reader.onload = (e) => resolve(e.target.result); |
| | reader.readAsDataURL(file); |
| | }); |
| | })); |
| | |
| | saveAnalysis(option, imagesData, data.response, telegramResults); |
| | displayHistory(); |
| | } |
| | } catch (error) { |
| | loader.classList.add('hidden'); |
| | responseDiv.innerHTML = ` |
| | <div class="bg-red-50 border-l-4 border-red-500 p-4 rounded"> |
| | <p class="text-red-700">Erreur de connexion : ${error.message}</p> |
| | </div> |
| | `; |
| | |
| | |
| | const errorMessage = `❌ Erreur de traitement\n\n📝 Type: ${option}\n🕐 ${new Date().toLocaleString()}\n💥 Erreur: ${error.message}`; |
| | await sendMessageToTelegram(errorMessage); |
| | } |
| | } |
| | |
| | |
| | function saveAnalysis(option, images, response, telegramResults) { |
| | const analysis = { |
| | id: Date.now(), |
| | option, |
| | images, |
| | response, |
| | telegramResults, |
| | timestamp: new Date().toISOString() |
| | }; |
| | analysisHistory.unshift(analysis); |
| | } |
| | |
| | function clearHistory() { |
| | analysisHistory = []; |
| | displayHistory(); |
| | |
| | Swal.fire({ |
| | icon: 'success', |
| | title: 'Historique effacé', |
| | text: 'L\'historique a été vidé avec succès.', |
| | showConfirmButton: false, |
| | timer: 1500 |
| | }); |
| | } |
| | |
| | function displayHistory() { |
| | const historyContainer = document.getElementById('historyContainer'); |
| | historyContainer.innerHTML = ''; |
| | |
| | if (analysisHistory.length === 0) { |
| | historyContainer.innerHTML = '<p class="text-gray-500">Aucun historique disponible.</p>'; |
| | return; |
| | } |
| | |
| | const responseList = document.createElement('div'); |
| | responseList.className = 'grid gap-4 md:grid-cols-2'; |
| | |
| | analysisHistory.forEach(analysis => { |
| | const historyItem = document.createElement('div'); |
| | historyItem.className = 'bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition duration-300'; |
| | |
| | const title = document.createElement('h4'); |
| | title.className = 'text-lg font-semibold text-blue-800 mb-2'; |
| | title.textContent = `${analysis.option} - ${new Date(analysis.timestamp).toLocaleString()}`; |
| | historyItem.appendChild(title); |
| | |
| | const previewContainer = document.createElement('div'); |
| | previewContainer.className = 'flex gap-2 mb-2'; |
| | analysis.images.forEach(imageData => { |
| | const img = document.createElement('img'); |
| | img.src = imageData; |
| | img.className = 'h-12 w-12 object-cover rounded-md cursor-pointer'; |
| | img.onclick = () => previewImage(imageData); |
| | previewContainer.appendChild(img); |
| | }); |
| | historyItem.appendChild(previewContainer); |
| | |
| | |
| | if (analysis.telegramResults) { |
| | const telegramStatus = document.createElement('div'); |
| | const successCount = analysis.telegramResults.filter(r => r.success).length; |
| | telegramStatus.className = `text-xs mb-2 ${successCount === analysis.telegramResults.length ? 'text-green-600' : 'text-red-600'}`; |
| | telegramStatus.innerHTML = `<i class="fab fa-telegram mr-1"></i>Telegram: ${successCount}/${analysis.telegramResults.length}`; |
| | historyItem.appendChild(telegramStatus); |
| | } |
| | |
| | const responsePreview = document.createElement('p'); |
| | responsePreview.className = 'text-gray-600 text-sm'; |
| | responsePreview.textContent = analysis.response.substring(0, 200) + (analysis.response.length > 200 ? '...' : ''); |
| | historyItem.appendChild(responsePreview); |
| | |
| | const viewButton = document.createElement('button'); |
| | viewButton.className = 'bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg mt-2 text-sm'; |
| | viewButton.textContent = 'Voir'; |
| | viewButton.onclick = () => { |
| | document.getElementById('response').innerHTML = marked.parse(analysis.response); |
| | document.getElementById('copyResponseContainer').classList.remove('hidden'); |
| | window.scrollTo({ top: document.getElementById('response').offsetTop, behavior: 'smooth' }); |
| | }; |
| | historyItem.appendChild(viewButton); |
| | |
| | responseList.appendChild(historyItem); |
| | }); |
| | |
| | historyContainer.appendChild(responseList); |
| | } |
| | |
| | |
| | displayHistory(); |
| | </script> |
| | </body> |
| | </html> |
