Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DocImageAI Explorer - Analyse de Documents et Images</title> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| </head> | |
| <body> | |
| <!-- Fond vidéo --> | |
| <video autoplay muted loop id="bg-video"> | |
| <source src="background.mp4" type="video/mp4"> | |
| Votre navigateur ne supporte pas les vidéos HTML5. | |
| </video> | |
| <!-- Conteneur principal --> | |
| <div class="container"> | |
| <header> | |
| <h1>DocImageAI Explorer</h1> | |
| <p class="subtitle">Analyse intelligente de documents et images avec IA</p> | |
| </header> | |
| <!-- Navigation par onglets --> | |
| <div class="tabs"> | |
| <button class="tab-button active" onclick="openTab('upload')">Upload</button> | |
| <button class="tab-button" onclick="openTab('summarize')">Résumé</button> | |
| <button class="tab-button" onclick="openTab('caption')">Images</button> | |
| <button class="tab-button" onclick="openTab('qa')">Questions</button> | |
| <button class="tab-button" onclick="openTab('about')">À propos</button> | |
| </div> | |
| <!-- Onglet Upload --> | |
| <div id="upload" class="tab-content active"> | |
| <h2><i class="icon">📤</i> Upload de Fichiers</h2> | |
| <div class="upload-area" id="dropArea"> | |
| <input type="file" id="fileInput" multiple accept=".pdf,.docx,.pptx,.xlsx,.jpg,.jpeg,.png"> | |
| <div class="upload-icon">⬆️</div> | |
| <p>Glissez-déposez vos fichiers ici ou cliquez pour parcourir</p> | |
| <p class="file-types">Formats supportés : PDF, DOCX, PPTX, XLSX, JPG, PNG</p> | |
| </div> | |
| <div id="fileList" class="file-list"> | |
| <p class="empty-message">Aucun fichier uploadé</p> | |
| </div> | |
| <div id="uploadStatus" class="status-message"></div> | |
| </div> | |
| <!-- Onglet Résumé --> | |
| <div id="summarize" class="tab-content"> | |
| <h2><i class="icon">📝</i> Résumé de Document</h2> | |
| <div class="form-group"> | |
| <label for="summaryFile">Sélectionnez un document :</label> | |
| <select id="summaryFile" class="file-selector"> | |
| <option value="">-- Choisir un document --</option> | |
| </select> | |
| </div> | |
| <div class="action-area"> | |
| <button id="summarizeBtn" class="action-btn"> | |
| <span class="btn-icon">✍️</span> Générer le Résumé | |
| </button> | |
| <div class="loading-spinner" id="summarySpinner"></div> | |
| </div> | |
| <div id="summaryResult" class="result-box"> | |
| <p class="placeholder">Votre résumé apparaîtra ici...</p> | |
| </div> | |
| </div> | |
| <!-- Onglet Images --> | |
| <div id="caption" class="tab-content"> | |
| <h2><i class="icon">🖼️</i> Analyse d'Image</h2> | |
| <div class="form-group"> | |
| <label for="captionFile">Sélectionnez une image :</label> | |
| <select id="captionFile" class="file-selector"> | |
| <option value="">-- Choisir une image --</option> | |
| </select> | |
| </div> | |
| <div id="imagePreview" class="image-preview"> | |
| <div class="preview-placeholder"> | |
| <div class="placeholder-icon">🖼️</div> | |
| <p>Aperçu de l'image</p> | |
| </div> | |
| </div> | |
| <div class="action-area"> | |
| <button id="captionBtn" class="action-btn"> | |
| <span class="btn-icon">🔍</span> Analyser l'Image | |
| </button> | |
| <div class="loading-spinner" id="captionSpinner"></div> | |
| </div> | |
| <div id="captionResult" class="result-box"> | |
| <p class="placeholder">La description de votre image apparaîtra ici...</p> | |
| </div> | |
| </div> | |
| <!-- Onglet Questions --> | |
| <div id="qa" class="tab-content"> | |
| <h2><i class="icon">❓</i> Questions & Réponses</h2> | |
| <div class="form-group"> | |
| <label for="qaFile">Document/Image (optionnel) :</label> | |
| <select id="qaFile" class="file-selector"> | |
| <option value="">-- Aucun --</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="questionInput">Votre question :</label> | |
| <textarea id="questionInput" rows="4" placeholder="Posez une question sur le document ou l'image..."></textarea> | |
| </div> | |
| <div class="action-area"> | |
| <button id="askBtn" class="action-btn"> | |
| <span class="btn-icon">💡</span> Poser la Question | |
| </button> | |
| <div class="loading-spinner" id="qaSpinner"></div> | |
| </div> | |
| <div id="answerResult" class="result-box"> | |
| <p class="placeholder">La réponse à votre question apparaîtra ici...</p> | |
| </div> | |
| </div> | |
| <!-- Onglet À propos --> | |
| <div id="about" class="tab-content"> | |
| <h2><i class="icon">ℹ️</i> À propos</h2> | |
| <div class="about-content"> | |
| <div class="about-card"> | |
| <h3>Fonctionnalités</h3> | |
| <ul> | |
| <li>📄 Résumé automatique de documents</li> | |
| <li>🖼️ Description d'images par IA</li> | |
| <li>❓ Réponses à vos questions</li> | |
| <li>⚡ Traitement rapide</li> | |
| </ul> | |
| </div> | |
| <div class="about-card"> | |
| <h3>Technologies</h3> | |
| <ul> | |
| <li>🧠 Modèles Hugging Face</li> | |
| <li>🐍 Backend FastAPI</li> | |
| <li>⚛️ Frontend moderne</li> | |
| <li>🐳 Dockerisé</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="footer"> | |
| <p>Projet développé par Kaloun & Tif - © 2025</p> | |
| <p class="version">Version 1.0.0</p> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |