Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on Feb 1

Commit

42a564e

verified ·

1 Parent(s): a6bd134

Create templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +459 -0

templates/index.html ADDED Viewed

	@@ -0,0 +1,459 @@

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Mariam AI - Analyse d'Image</title>
+  <!-- Tailwind CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
+  <!-- Marked -->
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <!-- SweetAlert2 -->
+  <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+  <!-- Moment.js -->
+  <script src="https://cdn.jsdelivr.net/npm/[email protected]/moment.min.js"></script>
+  <style>
+    /* Loader et animations */
+    .loader {
+      width: 48px;
+      height: 48px;
+      border: 5px solid #FFF;
+      border-bottom-color: #6366F1;
+      border-radius: 50%;
+      animation: rotation 1s linear infinite;
+    }
+    @keyframes rotation {
+      from { transform: rotate(0deg); }
+      to   { transform: rotate(360deg); }
+    }
+    .fade-in {
+      animation: fadeIn 0.5s ease-in;
+    }
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to   { opacity: 1; }
+    }
+    /* Zone de drop d'image */
+    .upload-zone {
+      border: 2px dashed #6366F1;
+      transition: background-color 0.3s ease, border-color 0.3s ease;
+    }
+    .upload-zone:hover {
+      border-color: #4F46E5;
+      background-color: #EEF2FF;
+    }
+    /* Contenu Markdown */
+    .markdown-content {
+      overflow-x: auto;
+      padding-bottom: 1rem;
+    }
+    .markdown-content table {
+      border-collapse: collapse;
+      width: 100%;
+      margin: 1rem 0;
+    }
+    .markdown-content th,
+    .markdown-content td {
+      border: 1px solid #e5e7eb;
+      padding: 0.75rem;
+      text-align: left;
+      white-space: nowrap;
+      min-width: 150px;
+    }
+    .markdown-content th {
+      background-color: #f9fafb;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+    /* Pour conserver les espaces et retours à la ligne dans le Markdown */
+    .markdown-content p,
+    .markdown-content pre,
+    .markdown-content code {
+      white-space: pre-wrap;
+      word-wrap: break-word;
+    }
+    /* Scroll horizontal */
+    .scroll-indicator {
+      position: absolute;
+      bottom: 20px;
+      right: 20px;
+      background: rgba(99, 102, 241, 0.9);
+      color: white;
+      padding: 8px 12px;
+      border-radius: 4px;
+      font-size: 0.875rem;
+      opacity: 0;
+      transition: opacity 0.3s ease;
+      pointer-events: none;
+    }
+    .scroll-indicator.visible { opacity: 1; }
+    /* Prévisualisation de l'image */
+    .image-preview-container {
+      position: relative;
+      max-width: 100%;
+      margin: 1rem auto;
+      border-radius: 0.5rem;
+      overflow: hidden;
+      box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
+    }
+    .image-preview-container img {
+      display: block;
+      width: 100%;
+      height: auto;
+      max-height: 400px;
+      object-fit: contain;
+    }
+    .remove-image {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+      background-color: rgba(255,255,255,0.9);
+      border-radius: 50%;
+      padding: 0.5rem;
+      cursor: pointer;
+      transition: background-color 0.2s ease;
+    }
+    .remove-image:hover {
+      background-color: #EF4444;
+      color: white;
+    }
+    /* Boutons d'onglets */
+    .tab-buttons button {
+      margin: 0 0.5rem;
+      padding: 0.5rem 1rem;
+      border: 1px solid #6366F1;
+      background-color: #EEF2FF;
+      color: #6366F1;
+      border-radius: 0.25rem;
+      transition: background-color 0.3s ease;
+    }
+    .tab-buttons button.active {
+      background-color: #6366F1;
+      color: white;
+    }
+    /* Liste des sauvegardes */
+    #backupList li {
+      margin-bottom: 0.5rem;
+      padding: 0.75rem;
+      border: 1px solid #e5e7eb;
+      border-radius: 0.25rem;
+      background-color: #fff;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    #backupList li:hover { background-color: #f9fafb; }
+    #backupList .backup-date { font-size: 0.8rem; color: #9ca3af; }
+    #backupList button {
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+    }
+    /* Ajustement SweetAlert2 */
+    .swal2-popup {
+      width: 90% !important;
+      max-width: 1200px !important;
+    }
+    .swal2-html-container {
+      max-height: 80vh !important;
+      overflow-y: auto !important;
+    }
+  </style>
+</head>
+<body class="bg-gray-50">
+  <div class="min-h-screen flex flex-col">
+    <!-- Header -->
+    <header class="bg-white shadow">
+      <div class="max-w-7xl mx-auto px-4 py-4 sm:px-6 lg:px-8">
+        <h1 class="text-3xl font-bold text-indigo-600">Mariam AI</h1>
+        <p class="mt-1 text-sm text-gray-500">Assistant pour commentaire composé.</p>
+      </div>
+    </header>
+    <!-- Contenu principal -->
+    <main class="flex-grow max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
+      <!-- Formulaire d'upload -->
+      <div class="bg-white rounded-lg shadow p-6 mb-8">
+        <form id="uploadForm" class="space-y-6">
+          <div class="upload-zone rounded-lg p-8 text-center cursor-pointer">
+            <input type="file" id="imageInput" accept="image/*" required class="hidden" onchange="handleImageSelect()">
+            <label for="imageInput" class="block">
+              <div class="space-y-2">
+                <svg class="mx-auto h-12 w-12 text-indigo-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                    d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+                </svg>
+                <div id="fileName" class="text-sm text-gray-500">Cliquez ou glissez une image ici</div>
+              </div>
+            </label>
+          </div>
+          <!-- Prévisualisation de l'image -->
+          <div id="imagePreview" class="hidden image-preview-container">
+            <img id="preview" src="#" alt="Prévisualisation">
+            <button type="button" class="remove-image" onclick="removeImage()">
+              <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                  d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <div class="flex justify-center">
+            <button type="submit"
+              class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
+              Analyser l'image
+            </button>
+          </div>
+        </form>
+      </div>
+      <!-- Loader -->
+      <div id="loading" class="hidden">
+        <div class="flex flex-col items-center justify-center space-y-4">
+          <span class="loader"></span>
+          <p class="text-gray-500">Analyse en cours, veuillez patienter...</p>
+        </div>
+      </div>
+      <!-- Résultats -->
+      <div id="results" class="space-y-8 hidden">
+        <div class="tab-buttons flex flex-wrap justify-center mb-4">
+          <button id="showDissertation" class="active">Dissertation</button>
+          <button id="showTableau">Tableau d'analyse</button>
+          <button id="showBackups">Sauvegardes</button>
+        </div>
+        <!-- Onglet Dissertation -->
+        <div id="dissertationTab" class="tab-content active bg-white rounded-lg shadow p-6">
+          <h2 class="text-2xl font-bold text-gray-900 mb-4">Dissertation</h2>
+          <div id="dissertationResult" class="prose max-w-none markdown-content"></div>
+          <button id="saveDissertation" class="mt-4 px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
+            Sauvegarder la dissertation
+          </button>
+        </div>
+        <!-- Onglet Tableau d'analyse -->
+        <div id="tableauTab" class="tab-content bg-white rounded-lg shadow p-6 hidden">
+          <h2 class="text-2xl font-bold text-gray-900 mb-4">Tableau d'analyse</h2>
+          <div id="tableauResult" class="markdown-content"></div>
+          <button id="saveTableau" class="mt-4 px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition-colors">
+            Sauvegarder le tableau
+          </button>
+        </div>
+        <!-- Onglet Sauvegardes -->
+        <div id="backupsTab" class="tab-content bg-white rounded-lg shadow p-6 hidden">
+          <h2 class="text-2xl font-bold text-gray-900 mb-4">Sauvegardes locales</h2>
+          <ul id="backupList" class="space-y-2"></ul>
+        </div>
+      </div>
+    </main>
+  </div>
+  <!-- JavaScript -->
+  <script>
+    let tableauContent = '';
+    let dissertationContent = '';
+    let backups = loadBackups();
+    function handleImageSelect() {
+      const input = document.getElementById('imageInput');
+      const preview = document.getElementById('preview');
+      const previewContainer = document.getElementById('imagePreview');
+      const fileName = document.getElementById('fileName');
+      if (input.files && input.files[0]) {
+        const reader = new FileReader();
+        reader.onload = e => {
+          preview.src = e.target.result;
+          previewContainer.classList.remove('hidden');
+          previewContainer.classList.add('fade-in');
+        };
+        reader.readAsDataURL(input.files[0]);
+        fileName.textContent = input.files[0].name;
+      } else {
+        removeImage();
+      }
+    }
+    function removeImage() {
+      const input = document.getElementById('imageInput');
+      const preview = document.getElementById('preview');
+      const previewContainer = document.getElementById('imagePreview');
+      const fileName = document.getElementById('fileName');
+      input.value = '';
+      preview.src = '#';
+      previewContainer.classList.add('hidden');
+      fileName.textContent = 'Cliquez ou glissez une image ici';
+    }
+    function showScrollIndicator(container) {
+      if (container.scrollWidth > container.clientWidth) {
+        const indicator = document.createElement('div');
+        indicator.className = 'scroll-indicator visible';
+        indicator.textContent = '← Faites défiler →';
+        container.parentElement.appendChild(indicator);
+        setTimeout(() => indicator.classList.remove('visible'), 3000);
+        container.addEventListener('scroll', () => {
+          clearTimeout(container.scrollTimeout);
+          indicator.classList.toggle('visible', container.scrollLeft > 0);
+          container.scrollTimeout = setTimeout(() => indicator.classList.remove('visible'), 1000);
+        });
+      }
+    }
+    // Gestion des onglets
+    document.getElementById('showTableau').addEventListener('click', () => {
+      showTab('tableau');
+      renderTableauContent();
+    });
+    document.getElementById('showDissertation').addEventListener('click', () => showTab('dissertation'));
+    document.getElementById('showBackups').addEventListener('click', () => {
+      showTab('backups');
+      updateBackupList();
+    });
+    function showTab(tabName) {
+      document.querySelectorAll('.tab-content').forEach(tab => tab.classList.remove('active'));
+      document.querySelectorAll('.tab-buttons button').forEach(btn => btn.classList.remove('active'));
+      document.getElementById(`${tabName}Tab`).classList.add('active');
+      document.getElementById(`show${tabName.charAt(0).toUpperCase() + tabName.slice(1)}`).classList.add('active');
+    }
+    function loadBackups() {
+      try {
+        const stored = localStorage.getItem('mariamAIBackups');
+        return stored ? JSON.parse(stored) : [];
+      } catch (error) {
+        console.error("Erreur lors du chargement des sauvegardes :", error);
+        return [];
+      }
+    }
+    function saveBackup(type, content) {
+      const timestamp = moment().format('YYYY-MM-DD HH:mm:ss');
+      backups.push({ timestamp, type, content });
+      localStorage.setItem('mariamAIBackups', JSON.stringify(backups));
+      updateBackupList();
+      Swal.fire({ icon: 'success', title: 'Sauvegarde réussie!' });
+    }
+    function updateBackupList() {
+      const backupList = document.getElementById('backupList');
+      backupList.innerHTML = '';
+      backups.forEach((backup, index) => {
+        const li = document.createElement('li');
+        li.innerHTML = `
+          <span>${backup.type === 'dissertation' ? 'Dissertation' : 'Tableau'} - ${backup.timestamp}</span>
+          <div>
+            <button data-index="${index}" class="view-backup bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded text-xs">Voir</button>
+            <button data-index="${index}" class="delete-backup bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded text-xs">Supprimer</button>
+          </div>
+        `;
+        backupList.appendChild(li);
+        li.querySelector('.view-backup').addEventListener('click', viewBackup);
+        li.querySelector('.delete-backup').addEventListener('click', deleteBackup);
+      });
+    }
+    function viewBackup(e) {
+      const index = e.target.dataset.index;
+      const backup = backups[index];
+      Swal.fire({
+        title: backup.type === 'dissertation' ? 'Dissertation sauvegardée' : 'Tableau sauvegardé',
+        html: marked.parse(backup.content),
+        width: '90%',
+        customClass: { htmlContainer: 'markdown-content' },
+        didRender: () => {
+          const container = document.querySelector('.markdown-content');
+          showScrollIndicator(container);
+        }
+      });
+    }
+    function deleteBackup(e) {
+      const index = e.target.dataset.index;
+      Swal.fire({
+        title: 'Êtes-vous sûr ?',
+        text: "Vous ne pourrez pas revenir en arrière !",
+        icon: 'warning',
+        showCancelButton: true,
+        confirmButtonColor: '#3085d6',
+        cancelButtonColor: '#d33',
+        confirmButtonText: 'Oui, supprimer!'
+      }).then((result) => {
+        if (result.isConfirmed) {
+          backups.splice(index, 1);
+          localStorage.setItem('mariamAIBackups', JSON.stringify(backups));
+          updateBackupList();
+          Swal.fire('Supprimé!', 'Votre fichier a été supprimé.', 'success');
+        }
+      });
+    }
+    document.getElementById('saveDissertation').addEventListener('click', () => saveBackup('dissertation', dissertationContent));
+    document.getElementById('saveTableau').addEventListener('click', () => saveBackup('tableau', tableauContent));
+    document.getElementById('uploadForm').addEventListener('submit', async (e) => {
+      e.preventDefault();
+      const imageInput = document.getElementById('imageInput');
+      if (!imageInput.files || !imageInput.files[0]) {
+        return Swal.fire({
+          icon: 'error',
+          title: 'Aucune image sélectionnée',
+          text: 'Veuillez sélectionner une image à analyser.'
+        });
+      }
+      const loading = document.getElementById('loading');
+      const results = document.getElementById('results');
+      const dissertationResult = document.getElementById('dissertationResult');
+      const formData = new FormData();
+      formData.append('image', imageInput.files[0]);
+      loading.classList.remove('hidden');
+      results.classList.add('hidden');
+      try {
+        const response = await fetch('/analyze', { method: 'POST', body: formData });
+        if (!response.ok) {
+          const errorData = await response.json();
+          throw new Error(errorData.error || `Erreur serveur ${response.status}`);
+        }
+        const data = await response.json();
+        dissertationContent = data.dissertation;
+        tableauContent = data.tableau;
+        dissertationResult.innerHTML = marked.parse(data.dissertation);
+        results.classList.remove('hidden');
+        results.classList.add('fade-in');
+        showTab('dissertation');
+      } catch (error) {
+        console.error("Erreur lors de l'analyse :", error);
+        Swal.fire({
+          icon: 'error',
+          title: 'Erreur',
+          text: error.message || 'Une erreur est survenue lors de la communication avec le serveur.'
+        });
+      } finally {
+        loading.classList.add('hidden');
+      }
+    });
+    function renderTableauContent() {
+      const tableauResult = document.getElementById('tableauResult');
+      if (tableauContent) {
+        tableauResult.innerHTML = marked.parse(tableauContent);
+        showScrollIndicator(tableauResult);
+      }
+    }
+  </script>
+</body>
+</html>