Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Histoire et Géographie - Assistant Académique</title> | |
| <!-- CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.css" rel="stylesheet"> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Scripts principaux --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.0.2/marked.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/aos@2.3.4/dist/aos.js"></script> | |
| <style> | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| } | |
| .gradient-background { | |
| background: linear-gradient(120deg, #1a365d 0%, #2563eb 100%); | |
| } | |
| .card-hover { | |
| transition: transform 0.3s ease-in-out; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| } | |
| .loading-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .form-input { | |
| transition: all 0.3s ease; | |
| } | |
| .form-input:focus { | |
| transform: scale(1.01); | |
| } | |
| .image-preview { | |
| max-width: 200px; | |
| max-height: 200px; | |
| margin: 10px; | |
| border: 1px solid #ccc; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-slate-100 min-h-screen"> | |
| <!-- Navigation --> | |
| <nav class="gradient-background shadow-lg"> | |
| <div class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-book-open text-white text-2xl mr-3"></i> | |
| <h1 class="text-white text-2xl font-bold">Mariam </h1> | |
| </div> | |
| <div class="text-white text-sm"> | |
| <i class="fas fa-graduation-cap mr-2"></i> | |
| Histoire et Géographie | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <div class="container mx-auto p-6"> | |
| <!-- Introduction Section --> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Assistant de Rédaction</h2> | |
| <p class="text-gray-600 max-w-2xl mx-auto"> | |
| Générez des dissertations structurées et détaillées pour vos devoirs d'histoire et de géographie. | |
| </p> | |
| </div> | |
| <!-- Histoire Type 1&3 --> | |
| <div class="mb-8" data-aos="fade-up"> | |
| <div class="bg-white rounded-xl shadow-xl p-8 card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-landmark text-blue-600 text-2xl mr-3"></i> | |
| <h2 class="text-2xl font-bold text-gray-800">Dissertation d'Histoire - Type 1 & 3</h2> | |
| </div> | |
| <form id="histoire-form" class="space-y-6"> | |
| <div class="space-y-2"> | |
| <label for="sujet-histoire" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation | |
| </label> | |
| <textarea name="sujet-histoire" id="sujet-histoire" rows="3" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Entrez le sujet de votre dissertation..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="space-y-2"> | |
| <label for="pointt1-histoire" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-list-ol mr-2"></i>Premier point | |
| </label> | |
| <input type="text" name="pointt1-histoire" id="pointt1-histoire" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Premier argument..."> | |
| </div> | |
| <div class="space-y-2"> | |
| <label for="point2-histoire" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-list-ol mr-2"></i>Deuxième point | |
| </label> | |
| <input type="text" name="point2-histoire" id="point2-histoire" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Deuxième argument..."> | |
| </div> | |
| <div class="space-y-2"> | |
| <label for="point3-histoire" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-list-ol mr-2"></i>Troisième point | |
| </label> | |
| <input type="text" name="point3-histoire" id="point3-histoire" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Troisième argument..."> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors duration-200 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-magic mr-2"></i> | |
| <span>Générer la dissertation</span> | |
| </button> | |
| </form> | |
| <div id="histoire-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div> | |
| </div> | |
| </div> | |
| <!-- Histoire Type 2 --> | |
| <div class="mb-8" data-aos="fade-up"> | |
| <div class="bg-white rounded-xl shadow-xl p-8 card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-scroll text-green-600 text-2xl mr-3"></i> | |
| <h2 class="text-2xl font-bold text-gray-800">Histoire - Type 2 (Images)</h2> | |
| </div> | |
| <form id="histoire-type2-form" class="space-y-6" enctype="multipart/form-data"> | |
| <div class="space-y-2"> | |
| <label for="sujet-histoire-type2" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-pen-fancy mr-2"></i>Sujet | |
| </label> | |
| <textarea name="sujet-histoire-type2" id="sujet-histoire-type2" rows="3" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Entrez le sujet..."></textarea> | |
| </div> | |
| <div class="space-y-2"> | |
| <label for="images-histoire-type2" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-images mr-2"></i>Images (Multiple) | |
| </label> | |
| <input type="file" name="images-histoire-type2" id="images-histoire-type2" multiple | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"> | |
| <div id="image-preview-histoire-type2" class="flex flex-wrap"></div> | |
| </div> | |
| <button type="submit" class="w-full bg-green-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-green-700 transition-colors duration-200 flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> | |
| <span>Générer l'analyse</span> | |
| </button> | |
| </form> | |
| <div id="histoire-type2-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div> | |
| </div> | |
| </div> | |
| <!-- Géographie Type 1 & 3 --> | |
| <div class="mb-8" data-aos="fade-up"> | |
| <div class="bg-white rounded-xl shadow-xl p-8 card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-globe-europe text-purple-600 text-2xl mr-3"></i> | |
| <h2 class="text-2xl font-bold text-gray-800">Dissertation de Géographie - Type 1 & 3</h2> | |
| </div> | |
| <form id="geographie-form" class="space-y-6"> | |
| <div class="space-y-2"> | |
| <label for="sujet-geographie" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-pen-fancy mr-2"></i>Sujet de la dissertation | |
| </label> | |
| <textarea name="sujet-geographie" id="sujet-geographie" rows="3" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Entrez le sujet de votre dissertation..."></textarea> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="space-y-2"> | |
| <label for="point1-geographie" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-list-ol mr-2"></i>Premier point | |
| </label> | |
| <input type="text" name="point1-geographie" id="point1-geographie" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Premier argument..."> | |
| </div> | |
| <div class="space-y-2"> | |
| <label for="point2-geographie" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-list-ol mr-2"></i>Deuxième point | |
| </label> | |
| <input type="text" name="point2-geographie" id="point2-geographie" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Deuxième argument..."> | |
| </div> | |
| <div class="space-y-2"> | |
| <label for="point3-geographie" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-list-ol mr-2"></i>Troisième point | |
| </label> | |
| <input type="text" name="point3-geographie" id="point3-geographie" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Troisième argument..."> | |
| </div> | |
| </div> | |
| <button type="submit" class="w-full bg-purple-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-700 transition-colors duration-200 flex items-center justify-center space-x-2"> | |
| <i class="fas fa-magic mr-2"></i> | |
| <span>Générer la dissertation</span> | |
| </button> | |
| </form> | |
| <div id="geographie-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div> | |
| </div> | |
| </div> | |
| <!-- Géographie Type 2 --> | |
| <div class="mb-8" data-aos="fade-up"> | |
| <div class="bg-white rounded-xl shadow-xl p-8 card-hover"> | |
| <div class="flex items-center mb-6"> | |
| <i class="fas fa-map-marked-alt text-yellow-600 text-2xl mr-3"></i> | |
| <h2 class="text-2xl font-bold text-gray-800">Géographie - Type 2 (Images)</h2> | |
| </div> | |
| <form id="geographie-type2-form" class="space-y-6" enctype="multipart/form-data"> | |
| <div class="space-y-2"> | |
| <label for="sujet-geographie-type2" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-pen-fancy mr-2"></i>Sujet | |
| </label> | |
| <textarea name="sujet-geographie-type2" id="sujet-geographie-type2" rows="3" | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50" | |
| placeholder="Entrez le sujet..."></textarea> | |
| </div> | |
| <div class="space-y-2"> | |
| <label for="images-geographie-type2" class="text-sm font-medium text-gray-700 block"> | |
| <i class="fas fa-images mr-2"></i>Images (Multiple) | |
| </label> | |
| <input type="file" name="images-geographie-type2" id="images-geographie-type2" multiple | |
| class="form-input mt-1 block w-full rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:ring-opacity-50"> | |
| <div id="image-preview-geographie-type2" class="flex flex-wrap"></div> | |
| </div> | |
| <button type="submit" class="w-full bg-yellow-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-yellow-700 transition-colors duration-200 flex items-center justify-center"> | |
| <i class="fas fa-magic mr-2"></i> | |
| <span>Générer l'analyse</span> | |
| </button> | |
| </form> | |
| <div id="geographie-type2-output" class="mt-6 p-6 bg-gray-50 rounded-lg hidden"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="gradient-background mt-12 py-6"> | |
| <div class="container mx-auto px-6 text-center text-white"> | |
| <p class="text-sm">© 2024 Mariam- Tous droits réservés</p> | |
| </div> | |
| </footer> | |
| <!-- Scripts --> | |
| <script> | |
| // Attendre que tous les scripts soient chargés | |
| window.addEventListener('load', function() { | |
| // Initialize AOS | |
| AOS.init({ | |
| duration: 800, | |
| once: true, | |
| offset: 100 | |
| }); | |
| function showLoading(outputId) { | |
| const output = document.getElementById(outputId); | |
| output.classList.remove('hidden'); | |
| output.innerHTML = ` | |
| <div class="flex items-center justify-center space-x-3"> | |
| <div class="loading-spinner h-8 w-8 border-4 border-blue-500 border-t-transparent rounded-full"></div> | |
| <span class="text-gray-600">Génération en cours...</span> | |
| </div> | |
| `; | |
| } | |
| function handleImagePreviews(inputId, previewContainerId) { | |
| const input = document.getElementById(inputId); | |
| const previewContainer = document.getElementById(previewContainerId); | |
| input.addEventListener('change', function() { | |
| previewContainer.innerHTML = ''; // Clear previous previews | |
| const files = this.files; | |
| for (let i = 0; i < files.length; i++) { | |
| const file = files[i]; | |
| if (file.type.startsWith('image/')) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| const img = document.createElement('img'); | |
| img.src = e.target.result; | |
| img.classList.add('image-preview'); | |
| previewContainer.appendChild(img); | |
| } | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| }); | |
| } | |
| async function submitForm(formId, outputId, endpoint) { | |
| const form = document.getElementById(formId); | |
| const output = document.getElementById(outputId); | |
| form.addEventListener('submit', async (e) => { | |
| e.preventDefault(); | |
| showLoading(outputId); | |
| try { | |
| const formData = new FormData(form); | |
| const response = await fetch(endpoint, { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const result = await response.json(); | |
| output.classList.remove('hidden'); | |
| output.innerHTML = ` | |
| <div class="prose max-w-none"> | |
| ${marked.parse(result.output)} | |
| </div> | |
| `; | |
| } catch (error) { | |
| output.classList.remove('hidden'); | |
| output.innerHTML = ` | |
| <div class="bg-red-50 border-l-4 border-red-500 p-4"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i class="fas fa-exclamation-circle text-red-500"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-red-700">Une erreur est survenue: ${error.message}</p> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| }); | |
| } | |
| submitForm('histoire-form', 'histoire-output', '/api/histoire'); | |
| submitForm('histoire-type2-form', 'histoire-type2-output', '/api/histoire-type2'); | |
| submitForm('geographie-form', 'geographie-output', '/api/geographie'); | |
| submitForm('geographie-type2-form', 'geographie-type2-output', '/api/geographie-type2'); | |
| handleImagePreviews('images-histoire-type2', 'image-preview-histoire-type2'); | |
| handleImagePreviews('images-geographie-type2', 'image-preview-geographie-type2'); | |
| }); | |
| </script> | |
| </body> | |
| </html> |