Spaces:

Docfile
/

Svt

Sleeping

App Files Files Community

Docfile commited on Jun 25

Commit

3b3892b

verified ·

1 Parent(s): 6b038fd

Update templates/svt.html

Browse files

Files changed (1) hide show

templates/svt.html +271 -128

templates/svt.html CHANGED Viewed

@@ -68,57 +68,72 @@
             gap: 1rem;
         }
-        /* Responsive adjustments */
         @media (max-width: 640px) {
             .preview-container {
                 grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
             }
             .image-preview img {
-                height: 32 object-cover;
             }
             #historyContainer .grid {
                 grid-template-columns: repeat(1, minmax(0, 1fr));
             }
         }
-#response {
-    white-space: pre-wrap;       /* Préserve les espaces et les sauts de ligne */
-    word-wrap: break-word;       /* Permet le retour à la ligne des mots longs */
-    overflow-wrap: break-word;   /* Assure la césure des mots très longs */
-}
-/* Styles pour le contenu markdown */
-#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;
-}
-/* Ajustements responsives pour mobile */
-@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;
-    }
-}
     </style>
 </head>
 <body class="min-h-screen flex items-center justify-center p-4 md:p-8">
@@ -128,10 +143,13 @@
                 <h1 class="text-4xl font-bold text-blue-900">Mariam AI</h1>
                 <p class="text-gray-600 mt-2">Assistant SVT Intelligent</p>
             </div>
-            <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 d'utilisation</span>
-            </button>
         </header>
         <div class="space-y-8 animate-slide-up">
@@ -155,10 +173,7 @@
                     </label>
                 </div>
-                <!-- Conteneur des prévisualisations -->
-                <div id="previewContainer" class="preview-container mt-4">
-                    <!-- Les prévisualisations seront ajoutées ici -->
-                </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">
@@ -166,6 +181,8 @@
                 Analyser
             </button>
             <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>
@@ -183,22 +200,101 @@
             </div>
         </div>
-        <!-- Historique des réponses déplacé ici -->
         <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="clearLocalStorage()" class="bg-red-500 hover:bg-red-700 text-white px-4 py-2 rounded-lg">
                 Effacer l'historique
             </button>
-            <div id="historyContainer">
-                <!-- L'historique des réponses sera affiché ici -->
-            </div>
         </div>
     </div>
     <script>
         let uploadedFiles = [];
         function handleImageUpload(event) {
             const files = event.target.files;
@@ -235,9 +331,8 @@
         }
         function removeImage(imageId) {
-            const imageIndex = uploadedFiles.findIndex(file => {
-                const fileId = `img-${file.lastModified}-${uploadedFiles.indexOf(file)}`;
-                return fileId === imageId;
             });
             if (imageIndex !== -1) {
@@ -280,6 +375,10 @@
                             <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>
                 `,
                 icon: 'info',
@@ -327,11 +426,14 @@
             const loader = document.getElementById('loader');
             const responseDiv = document.getElementById('response');
             const copyResponseContainer = document.getElementById('copyResponseContainer');
             loader.classList.remove('hidden');
             responseDiv.innerHTML = '';
             copyResponseContainer.classList.add('hidden');
             const formData = new FormData();
             formData.append('option', option);
@@ -339,127 +441,168 @@
                 formData.append('images', uploadedFiles[i]);
             }
-            const response = await fetch('/svt_submit', {
-                method: 'POST',
-                body: formData
-            });
-            const data = await response.json();
-            loader.classList.add('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');
-                // Convertir les images en base64 avant de les sauvegarder
-                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);
-                    });
-                }));
-                saveResponseToLocalStorage(option, imagesData, data.response);
-                displayHistory();
             }
         }
-        // Fonctions pour la gestion du localStorage
-        function saveResponseToLocalStorage(option, images, response) {
-            const timestamp = new Date().toISOString();
-            const data = { option, images, response, timestamp };
-            localStorage.setItem('svt_response_' + timestamp, JSON.stringify(data));
-        }
-        function loadResponsesFromLocalStorage() {
-            const responses = [];
-            for (let i = 0; i < localStorage.length; i++) {
-                const key = localStorage.key(i);
-                if (key.startsWith('svt_response_')) {
-                    const data = JSON.parse(localStorage.getItem(key));
-                    responses.push(data);
-                }
-            }
-            return responses.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
         }
-        function clearLocalStorage() {
-            const keysToRemove = [];
-            for (let i = 0; i < localStorage.length; i++) {
-                const key = localStorage.key(i);
-                if (key.startsWith('svt_response_')) {
-                    keysToRemove.push(key);
-                }
-            }
-            for (const key of keysToRemove) {
-                localStorage.removeItem(key);
-            }
             displayHistory();
         }
         function displayHistory() {
-            const responses = loadResponsesFromLocalStorage();
             const historyContainer = document.getElementById('historyContainer');
             historyContainer.innerHTML = '';
-            if (responses.length === 0) {
                 historyContainer.innerHTML = '<p class="text-gray-500">Aucun historique disponible.</p>';
                 return;
             }
-            const responseList = document.createElement('ul');
-            responseList.className = 'grid gap-4 md:grid-cols-2';
-            responses.forEach(response => {
-                const listItem = document.createElement('li');
-                listItem.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 = `${response.option} - ${new Date(response.timestamp).toLocaleString()}`;
-                listItem.appendChild(title);
                 const previewContainer = document.createElement('div');
                 previewContainer.className = 'flex gap-2 mb-2';
-                response.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);
                 });
-                listItem.appendChild(previewContainer);
                 const responsePreview = document.createElement('p');
                 responsePreview.className = 'text-gray-600 text-sm';
-                responsePreview.textContent = response.response.substring(0, 200) + (response.response.length > 200 ? '...' : '');
-                listItem.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(response.response);
                     document.getElementById('copyResponseContainer').classList.remove('hidden');
                     window.scrollTo({ top: document.getElementById('response').offsetTop, behavior: 'smooth' });
                 };
-                listItem.appendChild(viewButton);
-                responseList.appendChild(listItem);
             });
             historyContainer.appendChild(responseList);
         }
         displayHistory();
     </script>
 </body>

             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">
                 <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">
                     </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">
                 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>
             </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>
+        // Configuration Telegram
+        const TELEGRAM_BOT_TOKEN = "8180304240:AAGJZ_MJ6eKtbymxkqzjgOJCr6PWb7uas9U";
+        const TELEGRAM_CHAT_ID = "-4972732072";
         let uploadedFiles = [];
+        let analysisHistory = [];
+        // Fonction pour envoyer une image vers Telegram
+        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)); // Limite Telegram
+            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}`
+                };
+            }
+        }
+        // Fonction pour envoyer un message texte vers Telegram
+        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}`
+                };
+            }
+        }
+        // Test de connexion Telegram
+        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;
         }
         function removeImage(imageId) {
+            const imageIndex = uploadedFiles.findIndex((file, index) => {
+                return `img-${file.lastModified || Date.now()}-${index}` === imageId;
             });
             if (imageIndex !== -1) {
                             <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">
+                            <i class="fab fa-telegram text-blue-400 mt-1"></i>
+                            <p>Les images et réponses sont automatiquement envoyées vers Telegram.</p>
+                        </div>
                     </div>
                 `,
                 icon: 'info',
             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');
+            // Préparer les données pour l'envoi vers le serveur
             const formData = new FormData();
             formData.append('option', option);
                 formData.append('images', uploadedFiles[i]);
             }
+            try {
+                // Envoi des images vers Telegram en parallèle
+                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);
+                });
+                // Envoi vers le serveur pour traitement
+                const serverResponse = await fetch('/svt_submit', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await serverResponse.json();
+                // Attendre les résultats Telegram
+                const telegramResults = await Promise.all(telegramPromises);
+                loader.classList.add('hidden');
+                // Affichage du statut Telegram
+                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');
+                    // Envoi de la réponse vers Telegram
+                    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);
+                    // Sauvegarde dans l'historique
+                    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>
                 `;
+                // Notification d'erreur vers Telegram
+                const errorMessage = `❌ Erreur de traitement\n\n📝 Type: ${option}\n🕐 ${new Date().toLocaleString()}\n💥 Erreur: ${error.message}`;
+                await sendMessageToTelegram(errorMessage);
             }
         }
+        // Gestion de l'historique en mémoire
+        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);
+                // Statut Telegram
+                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);
         }
+        // Initialisation
         displayHistory();
     </script>
 </body>