Spaces:

Docfile
/

Mariam-france

Running

App Files Files Community

Docfile commited on Feb 1

Commit

9708b60

verified ·

1 Parent(s): 78cec43

Delete templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +0 -510

templates/index.html DELETED Viewed

@@ -1,510 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Mariam AI - Assistant Français Intelligent</title>
-  <!-- Tailwind CSS, Font Awesome, Marked et MathJax -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script>
-  <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
-  <style>
-    @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');
-    body {
-      font-family: 'Plus Jakarta Sans', sans-serif;
-      background-color: #fafafa;
-    }
-    /* Effet de Glassmorphism */
-    .glassmorphism {
-      background: rgba(255, 255, 255, 0.95);
-      backdrop-filter: blur(10px);
-      border: 1px solid rgba(255, 255, 255, 0.3);
-    }
-    /* Effet hover sur les cartes */
-    .card-hover {
-      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-    }
-    .card-hover:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
-    }
-    /* Texte en dégradé */
-    .gradient-text {
-      background: linear-gradient(135deg, #1a365d 0%, #3182ce 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-    }
-    /* Animation des points de chargement */
-    .loading-dot {
-      animation: bounce 1.4s infinite;
-    }
-    .loading-dot:nth-child(2) { animation-delay: 0.2s; }
-    .loading-dot:nth-child(3) { animation-delay: 0.4s; }
-    @keyframes bounce {
-      0%, 80%, 100% { transform: translateY(0); }
-      40% { transform: translateY(-6px); }
-    }
-    /* Bouton radio personnalisé */
-    .custom-radio:checked + span {
-      background: linear-gradient(135deg, #1a365d 0%, #3182ce 100%);
-      color: white;
-    }
-    /* Styles pour les sauvegardes */
-    .backup-item {
-      cursor: pointer;
-    }
-    .backup-content {
-      display: none;
-      margin-top: 10px;
-    }
-    .backup-content-expanded {
-      display: block;
-    }
-    /* Prévisualisation d'images */
-    .image-preview {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-top: 10px;
-    }
-    .image-preview-item {
-      position: relative;
-      width: 100px;
-      height: 100px;
-    }
-    .image-preview-item img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 5px;
-    }
-    .remove-image {
-      position: absolute;
-      top: 5px;
-      right: 5px;
-      background-color: rgba(0, 0, 0, 0.5);
-      color: white;
-      border: none;
-      border-radius: 50%;
-      padding: 2px 6px;
-      cursor: pointer;
-      font-size: 12px;
-    }
-    .remove-image:hover {
-      background-color: rgba(0, 0, 0, 0.7);
-    }
-    /* Préserver les espaces dans le markdown */
-    .prose {
-      white-space: pre-wrap;
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-    }
-    @media (max-width: 640px) {
-      .prose {
-        font-size: 0.95rem;
-        line-height: 1.6;
-      }
-    }
-  </style>
-</head>
-<body class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50">
-  <header>
-    <nav class="glassmorphism sticky top-0 z-50 border-b border-blue-100">
-      <div class="container mx-auto px-6 py-4">
-        <div class="flex items-center justify-between">
-          <div class="flex items-center space-x-4">
-            <div class="bg-blue-600 rounded-lg p-2 shadow-lg">
-              <i class="fas fa-robot text-white text-xl"></i>
-            </div>
-            <h1 class="text-2xl font-bold gradient-text">Mariam AI</h1>
-          </div>
-          <div class="text-blue-900 font-medium">Assistant Français Intelligent</div>
-        </div>
-      </div>
-    </nav>
-  </header>
-  <main class="container mx-auto px-6 py-12">
-    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
-      <!-- Section Travail Argumentatif -->
-      <section class="card-hover glassmorphism rounded-2xl overflow-hidden">
-        <div class="p-8">
-          <div class="flex items-center space-x-4 mb-8">
-            <div class="bg-blue-100 rounded-lg p-3">
-              <i class="fas fa-pen-fancy text-blue-600 text-xl"></i>
-            </div>
-            <h2 class="text-2xl font-bold text-gray-800">Travail Argumentatif</h2>
-          </div>
-          <form id="francais-form" class="space-y-8">
-            <div class="space-y-3">
-              <label for="sujet-francais" class="block text-sm font-medium text-gray-700">
-                <i class="fas fa-book-open mr-2 text-blue-500"></i>Sujet
-              </label>
-              <textarea id="sujet-francais" name="sujet" rows="4" class="w-full px-4 py-3 rounded-xl border-2 border-gray-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-200 transition-all duration-200 resize-none" placeholder="Entrez votre sujet ici..."></textarea>
-            </div>
-            <div class="space-y-4">
-              <label class="block text-sm font-medium text-gray-700">
-                <i class="fas fa-tasks mr-2 text-blue-500"></i>Type d'argumentation
-              </label>
-              <div class="grid grid-cols-3 gap-4">
-                <label class="relative">
-                  <input type="radio" name="choix" value="Etaye" class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
-                  <span class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">Étayer</span>
-                </label>
-                <label class="relative">
-                  <input type="radio" name="choix" value="refute" class="custom-radio absolute opacity-0 w-full h-full cursor-pointer">
-                  <span class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">Réfuter</span>
-                </label>
-                <label class="relative">
-                  <input type="radio" name="choix" value="discuter" class="custom-radio absolute opacity-0 w-full h-full cursor-pointer">
-                  <span class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">Discuter</span>
-                </label>
-              </div>
-            </div>
-            <div class="space-y-4">
-              <label class="block text-sm font-medium text-gray-700">
-                <i class="fas fa-feather-alt mr-2 text-blue-500"></i>Style d'écriture
-              </label>
-              <div class="grid grid-cols-2 gap-4">
-                <label class="relative">
-                  <input type="radio" name="style" value="raffiné" class="custom-radio absolute opacity-0 w-full h-full cursor-pointer" checked>
-                  <span class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">Raffiné</span>
-                </label>
-                <label class="relative">
-                  <input type="radio" name="style" value="Normal" class="custom-radio absolute opacity-0 w-full h-full cursor-pointer">
-                  <span class="flex items-center justify-center p-3 border-2 border-gray-200 rounded-xl text-sm font-medium transition-all duration-200 hover:border-blue-400">Normal</span>
-                </label>
-              </div>
-            </div>
-            <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white px-6 py-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg">
-              <div class="flex items-center justify-center space-x-3">
-                <i class="fas fa-magic"></i>
-                <span>Générer</span>
-              </div>
-            </button>
-          </form>
-          <div id="francais-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none">
-            <!-- Le contenu généré sera inséré ici -->
-          </div>
-        </div>
-      </section>
-      <!-- Section Étude de texte -->
-      <section class="card-hover glassmorphism rounded-2xl overflow-hidden">
-        <div class="p-8">
-          <div class="flex items-center space-x-4 mb-8">
-            <div class="bg-blue-100 rounded-lg p-3">
-              <i class="fas fa-file-alt text-blue-600 text-xl"></i>
-            </div>
-            <h2 class="text-2xl font-bold text-gray-800">Étude de texte</h2>
-          </div>
-          <form id="etude-texte-form" class="space-y-8" enctype="multipart/form-data">
-            <div class="space-y-4">
-              <label class="block text-sm font-medium text-gray-700">
-                <i class="fas fa-image mr-2 text-blue-500"></i>Image du texte
-              </label>
-              <div class="border-3 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:border-blue-400 transition-all duration-200" id="drop-zone">
-                <input type="file" id="image-upload" name="images" accept="image/*" class="hidden" multiple>
-                <div class="space-y-3">
-                  <div class="bg-blue-50 rounded-full w-16 h-16 flex items-center justify-center mx-auto">
-                    <i class="fas fa-cloud-upload-alt text-3xl text-blue-500"></i>
-                  </div>
-                  <p class="text-sm text-gray-600 font-medium">Glissez vos images ici ou cliquez pour sélectionner</p>
-                  <p class="text-xs text-gray-400">PNG, JPG jusqu'à 10MB</p>
-                </div>
-              </div>
-              <div id="image-preview" class="image-preview"></div>
-            </div>
-            <button type="submit" class="w-full bg-gradient-to-r from-blue-600 to-blue-800 text-white px-6 py-4 rounded-xl font-medium hover:from-blue-700 hover:to-blue-900 transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] shadow-lg">
-              <div class="flex items-center justify-center space-x-3">
-                <i class="fas fa-search"></i>
-                <span>Analyser</span>
-              </div>
-            </button>
-          </form>
-          <div id="etude-texte-output" class="mt-8 p-6 bg-blue-50 rounded-xl prose max-w-none">
-            <!-- Le contenu analysé sera inséré ici -->
-          </div>
-        </div>
-      </section>
-    </div>
-    <!-- Section Sauvegardes -->
-    <section class="mt-12">
-      <h2 class="text-2xl font-bold text-gray-800 mb-4">Sauvegardes</h2>
-      <div id="backups-list" class="space-y-4">
-        <!-- Les sauvegardes seront listées ici -->
-      </div>
-    </section>
-  </main>
-  <script>
-    // Gestion de l'upload d'images
-    function initializeFileUpload() {
-      const dropZone = document.getElementById('drop-zone');
-      const fileInput = document.getElementById('image-upload');
-      const imagePreview = document.getElementById('image-preview');
-      dropZone.addEventListener('click', () => fileInput.click());
-      ['dragenter', 'dragover'].forEach(eventName => {
-        dropZone.addEventListener(eventName, (e) => {
-          e.preventDefault();
-          dropZone.classList.add('border-blue-500', 'bg-blue-50');
-        });
-      });
-      ['dragleave', 'drop'].forEach(eventName => {
-        dropZone.addEventListener(eventName, (e) => {
-          e.preventDefault();
-          dropZone.classList.remove('border-blue-500', 'bg-blue-50');
-        });
-      });
-      dropZone.addEventListener('drop', (e) => {
-        e.preventDefault();
-        const files = e.dataTransfer.files;
-        handleFiles(files);
-      });
-      fileInput.addEventListener('change', () => {
-        handleFiles(fileInput.files);
-      });
-      function handleFiles(files) {
-        Array.from(files).forEach(file => {
-          if (!file.type.startsWith('image/')) return;
-          const reader = new FileReader();
-          reader.onload = (e) => {
-            const previewItem = document.createElement('div');
-            previewItem.classList.add('image-preview-item');
-            previewItem.innerHTML = `
-              <img src="${e.target.result}" alt="${file.name}">
-              <button class="remove-image" title="Supprimer">×</button>
-            `;
-            imagePreview.appendChild(previewItem);
-            previewItem.querySelector('.remove-image').addEventListener('click', () => {
-              imagePreview.removeChild(previewItem);
-            });
-          };
-          reader.readAsDataURL(file);
-        });
-      }
-    }
-    // Sauvegarde et affichage des réponses dans le localStorage
-    function sauvegarderReponse(titre, contenu) {
-      const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-      const dateSauvegarde = new Date().toISOString();
-      sauvegardes.push({ titre, contenu, date: dateSauvegarde });
-      localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
-      afficherSauvegardes();
-    }
-    function supprimerSauvegarde(index) {
-      let sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-      sauvegardes.splice(index, 1);
-      localStorage.setItem('mariam_ai_sauvegardes', JSON.stringify(sauvegardes));
-      afficherSauvegardes();
-    }
-    function afficherSauvegardes() {
-      const sauvegardes = JSON.parse(localStorage.getItem('mariam_ai_sauvegardes') || '[]');
-      const backupsList = document.getElementById('backups-list');
-      backupsList.innerHTML = sauvegardes.length === 0
-        ? '<p class="text-gray-600">Aucune sauvegarde pour le moment.</p>'
-        : '';
-      sauvegardes.forEach((sauvegarde, index) => {
-        const sauvegardeDiv = document.createElement('div');
-        sauvegardeDiv.className = 'bg-white rounded-lg shadow-md p-4 relative backup-item';
-        sauvegardeDiv.innerHTML = `
-          <h3 class="text-lg font-semibold text-gray-800">${sauvegarde.titre}</h3>
-          <p class="text-sm text-gray-600 mb-2">${new Date(sauvegarde.date).toLocaleString()}</p>
-          <div class="text-sm text-gray-700 backup-content prose max-w-none">${marked.parse(sauvegarde.contenu)}</div>
-          <button class="absolute top-2 right-2 text-red-500 hover:text-red-700 focus:outline-none" data-index="${index}">
-            <i class="fas fa-trash"></i>
-          </button>
-        `;
-        backupsList.appendChild(sauvegardeDiv);
-        // Toggle du contenu lors d'un clic sur la sauvegarde (hors bouton de suppression)
-        const backupContentDiv = sauvegardeDiv.querySelector('.backup-content');
-        sauvegardeDiv.addEventListener('click', (e) => {
-          if (e.target.tagName === "BUTTON") return;
-          backupContentDiv.classList.toggle('backup-content-expanded');
-          MathJax.typesetPromise([backupContentDiv]);
-        });
-        sauvegardeDiv.querySelector('button').addEventListener('click', () => {
-          if (confirm('Êtes-vous sûr de vouloir supprimer cette sauvegarde ?')) {
-            supprimerSauvegarde(index);
-          }
-        });
-      });
-    }
-    // Gestion des formulaires
-    function submitFrancaisForm() {
-      const form = document.getElementById('francais-form');
-      const output = document.getElementById('francais-output');
-      form.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        output.innerHTML = `
-          <div class="flex items-center justify-center space-x-2 text-blue-600">
-            <div class="loading-dot">[x]</div>
-            <div class="loading-dot">[x]</div>
-            <div class="loading-dot">[x]</div>
-            <span class="ml-3 text-sm font-medium text-gray-600">Génération en cours...</span>
-          </div>`;
-        const formData = new FormData(form);
-        try {
-          const response = await fetch('/api/francais', { method: 'POST', body: formData });
-          const result = await response.json();
-          output.innerHTML = marked.parse(result.output);
-          sauvegarderReponse(formData.get('sujet'), result.output);
-          MathJax.typesetPromise([output]);
-        } catch (error) {
-          output.innerHTML = `
-            <div class="flex items-center space-x-2 text-red-500 bg-red-50 p-4 rounded-lg">
-              <i class="fas fa-exclamation-circle"></i>
-              <span class="text-sm font-medium">Une erreur est survenue. Veuillez réessayer.</span>
-            </div>`;
-        }
-      });
-    }
-    function submitEtudeTexteForm() {
-      const form = document.getElementById('etude-texte-form');
-      const output = document.getElementById('etude-texte-output');
-      form.addEventListener('submit', async (e) => {
-        e.preventDefault();
-        output.innerHTML = `
-          <div class="flex items-center justify-center space-x-2 text-blue-600">
-            <div class="loading-dot">[x]</div>
-            <div class="loading-dot">[x]</div>
-            <div class="loading-dot">[x]</div>
-            <span class="ml-3 text-sm font-medium text-gray-600">Analyse en cours...</span>
-          </div>`;
-        const formData = new FormData(form);
-        try {
-          const response = await fetch('/api/etude-texte', { method: 'POST', body: formData });
-          const result = await response.json();
-          output.innerHTML = marked.parse(result.output);
-          const titre = "Analyse d'image " + new Date().toLocaleString();
-          sauvegarderReponse(titre, result.output);
-          MathJax.typesetPromise([output]);
-        } catch (error) {
-          output.innerHTML = `
-            <div class="flex items-center space-x-2 text-red-500 bg-red-50 p-4 rounded-lg">
-              <i class="fas fa-exclamation-circle"></i>
-              <span class="text-sm font-medium">Une erreur est survenue. Veuillez réessayer.</span>
-            </div>`;
-        }
-      });
-    }
-    // Effets d'animation et d'interaction
-    function animateOnScroll() {
-      const cards = document.querySelectorAll('.card-hover');
-      const observer = new IntersectionObserver((entries) => {
-        entries.forEach(entry => {
-          if (entry.isIntersecting) {
-            entry.target.style.opacity = '1';
-            entry.target.style.transform = 'translateY(0)';
-          }
-        });
-      }, { threshold: 0.1 });
-      cards.forEach(card => {
-        card.style.opacity = '0';
-        card.style.transform = 'translateY(20px)';
-        card.style.transition = 'all 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
-        observer.observe(card);
-      });
-    }
-    function enhanceTextareaFocus() {
-      document.querySelectorAll('textarea').forEach(textarea => {
-        textarea.addEventListener('focus', () => {
-          textarea.parentElement.classList.add('ring-2', 'ring-blue-200');
-        });
-        textarea.addEventListener('blur', () => {
-          textarea.parentElement.classList.remove('ring-2', 'ring-blue-200');
-        });
-      });
-    }
-    function enhanceRadioButtons() {
-      document.querySelectorAll('input[type="radio"] + span').forEach(label => {
-        label.addEventListener('mouseenter', () => {
-          if (!label.previousElementSibling.checked) {
-            label.style.borderColor = '#3182ce';
-          }
-        });
-        label.addEventListener('mouseleave', () => {
-          if (!label.previousElementSibling.checked) {
-            label.style.borderColor = '#e5e7eb';
-          }
-        });
-      });
-    }
-    // Message de bienvenue (optionnel)
-    function showWelcomeMessage() {
-      const welcomeMessage = document.createElement('div');
-      welcomeMessage.innerHTML = `
-        <div class="fixed bottom-6 right-6 bg-white rounded-xl shadow-lg p-4 transform transition-all duration-500 opacity-0 translate-y-4">
-          <div class="flex items-center space-x-3">
-            <div class="bg-blue-100 rounded-lg p-2">
-              <i class="fas fa-robot text-blue-600"></i>
-            </div>
-            <div>
-              <p class="text-sm font-medium text-gray-800">Bienvenue sur Mariam AI</p>
-              <p class="text-xs text-gray-500">Je suis là pour vous aider</p>
-            </div>
-          </div>
-        </div>`;
-      document.body.appendChild(welcomeMessage);
-      setTimeout(() => {
-        welcomeMessage.firstElementChild.classList.remove('opacity-0', 'translate-y-4');
-      }, 1000);
-      setTimeout(() => {
-        welcomeMessage.firstElementChild.classList.add('opacity-0', 'translate-y-4');
-        setTimeout(() => welcomeMessage.remove(), 500);
-      }, 5000);
-    }
-    // Initialisation au chargement du DOM
-    document.addEventListener('DOMContentLoaded', () => {
-      initializeFileUpload();
-      submitFrancaisForm();
-      submitEtudeTexteForm();
-      animateOnScroll();
-      enhanceTextareaFocus();
-      enhanceRadioButtons();
-      showWelcomeMessage();
-      afficherSauvegardes();
-    });
-  </script>
-</body>
-</html>