Spaces:

Docfile
/

Mariam-cc

Running

App Files Files Community

Docfile commited on Nov 24, 2024

Commit

be3b8ad

verified ·

1 Parent(s): f8a6e4a

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +162 -42

templates/index.html CHANGED Viewed

@@ -3,63 +3,168 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Analyse d'Image</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
     <style>
-        .container {
-            max-width: 800px;
-            margin: 0 auto;
-            padding: 20px;
         }
-        .result-section {
-            margin-top: 20px;
-            padding: 15px;
-            border: 1px solid #ddd;
-            border-radius: 5px;
         }
-        #loading {
-            display: none;
-            text-align: center;
-            margin: 20px 0;
         }
     </style>
 </head>
-<body>
-    <div class="container">
-        <h1>Analyse d'Image avec Gemini</h1>
-        <form id="uploadForm">
-            <input type="file" id="imageInput" accept="image/*" required>
-            <button type="submit">Analyser</button>
-        </form>
-        <div id="loading">Analyse en cours...</div>
-        <div class="result-section">
-            <h2>Tableau d'Analyse</h2>
-            <div id="tableauResult"></div>
-        </div>
-        <div class="result-section">
-            <h2>Dissertation</h2>
-            <div id="dissertationResult"></div>
-        </div>
     </div>
     <script>
         document.getElementById('uploadForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             const loading = document.getElementById('loading');
-            const tableauResult = document.getElementById('tableauResult');
             const dissertationResult = document.getElementById('dissertationResult');
             const formData = new FormData();
             formData.append('image', document.getElementById('imageInput').files[0]);
-            loading.style.display = 'block';
-            tableauResult.innerHTML = '';
-            dissertationResult.innerHTML = '';
             try {
                 const response = await fetch('/analyze', {
@@ -70,15 +175,30 @@
                 const data = await response.json();
                 if (response.ok) {
-                    tableauResult.innerHTML = marked.parse(data.tableau);
                     dissertationResult.innerHTML = marked.parse(data.dissertation);
                 } else {
-                    alert('Erreur: ' + data.error);
                 }
             } catch (error) {
-                alert('Erreur lors de l\'analyse: ' + error);
             } finally {
-                loading.style.display = 'none';
             }
         });
     </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mariam AI - Analyse d'Image</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert2/11.7.32/sweetalert2.all.min.js"></script>
     <style>
+        .loader {
+            width: 48px;
+            height: 48px;
+            border: 5px solid #FFF;
+            border-bottom-color: #6366F1;
+            border-radius: 50%;
+            display: inline-block;
+            box-sizing: border-box;
+            animation: rotation 1s linear infinite;
         }
+        @keyframes rotation {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        .fade-in {
+            animation: fadeIn 0.5s ease-in;
+        }
+        @keyframes fadeIn {
+            0% { opacity: 0; }
+            100% { opacity: 1; }
+        }
+        .upload-zone {
+            border: 2px dashed #6366F1;
+            transition: all 0.3s ease;
+        }
+        .upload-zone:hover {
+            border-color: #4F46E5;
+            background-color: #EEF2FF;
+        }
+        /* Style pour le markdown rendu */
+        .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;
         }
+        .markdown-content th {
+            background-color: #f9fafb;
         }
     </style>
 </head>
+<body class="bg-gray-50">
+    <div class="min-h-screen">
+        <!-- Header -->
+        <header class="bg-white shadow-sm">
+            <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 d'analyse d'images intelligent</p>
+            </div>
+        </header>
+        <!-- Main content -->
+        <main class="max-w-7xl mx-auto px-4 py-8 sm:px-6 lg:px-8">
+            <!-- Upload Section -->
+            <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">
+                        <input type="file" id="imageInput" accept="image/*" required
+                               class="hidden" onchange="updateFileName()">
+                        <label for="imageInput" class="cursor-pointer">
+                            <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>
+                    <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 duration-200">
+                            Analyser l'image
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <!-- Loading indicator -->
+            <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>
+            <!-- Results Section -->
+            <div id="results" class="space-y-8 hidden">
+                <!-- Tableau Button -->
+                <div class="flex justify-center">
+                    <button id="showTableau"
+                            class="px-6 py-3 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 transition-colors duration-200">
+                        Voir le tableau d'analyse
+                    </button>
+                </div>
+                <!-- Dissertation -->
+                <div class="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>
+                </div>
+            </div>
+        </main>
     </div>
     <script>
+        let tableauContent = ''; // Variable pour stocker le contenu du tableau
+        function updateFileName() {
+            const input = document.getElementById('imageInput');
+            const fileName = document.getElementById('fileName');
+            if (input.files.length > 0) {
+                fileName.textContent = input.files[0].name;
+            } else {
+                fileName.textContent = 'Cliquez ou glissez une image ici';
+            }
+        }
+        document.getElementById('showTableau').addEventListener('click', () => {
+            Swal.fire({
+                title: 'Tableau d\'analyse',
+                html: marked.parse(tableauContent),
+                width: '80%',
+                customClass: {
+                    htmlContainer: 'markdown-content'
+                }
+            });
+        });
         document.getElementById('uploadForm').addEventListener('submit', async (e) => {
             e.preventDefault();
             const loading = document.getElementById('loading');
+            const results = document.getElementById('results');
             const dissertationResult = document.getElementById('dissertationResult');
             const formData = new FormData();
             formData.append('image', document.getElementById('imageInput').files[0]);
+            loading.classList.remove('hidden');
+            results.classList.add('hidden');
             try {
                 const response = await fetch('/analyze', {
                 const data = await response.json();
                 if (response.ok) {
+                    // Stocker le tableau pour l'affichage ultérieur
+                    tableauContent = data.tableau;
+                    // Afficher la dissertation
                     dissertationResult.innerHTML = marked.parse(data.dissertation);
+                    // Afficher la section des résultats avec animation
+                    results.classList.remove('hidden');
+                    results.classList.add('fade-in');
                 } else {
+                    Swal.fire({
+                        icon: 'error',
+                        title: 'Erreur',
+                        text: data.error
+                    });
                 }
             } catch (error) {
+                Swal.fire({
+                    icon: 'error',
+                    title: 'Erreur',
+                    text: 'Une erreur est survenue lors de l\'analyse'
+                });
             } finally {
+                loading.classList.add('hidden');
             }
         });
     </script>