Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Tools Interface</title> | |
| <link rel="stylesheet" href="/static/styles.css"> | |
| <link rel="icon" href="/static/favicon.ico" type="image/x-icon"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <h1>AI Tools Interface</h1> | |
| <p class="subtitle">Outils d'IA pour le traitement de documents et d'images</p> | |
| </header> | |
| <div class="tab-container"> | |
| <!-- Navigation des onglets --> | |
| <nav class="tab-nav"> | |
| <button onclick="openTab('summarize')" class="tab-btn active" data-tab="summarize" aria-selected="true" aria-controls="summarize"> | |
| <i class="icon">📝</i> Résumer | |
| </button> | |
| <button onclick="openTab('interpret-image')" class="tab-btn" data-tab="interpret-image" aria-selected="false" aria-controls="interpret-image"> | |
| <i class="icon">🖼️</i> Légende Image | |
| </button> | |
| <button onclick="openTab('answer-question')" class="tab-btn" data-tab="answer-question" aria-selected="false" aria-controls="answer-question"> | |
| <i class="icon">❓</i> Réponse Question | |
| </button> | |
| <button onclick="openTab('generate-visualization')" class="tab-btn" data-tab="generate-visualization" aria-selected="false" aria-controls="generate-visualization"> | |
| <i class="icon">📊</i> Visualisation | |
| </button> | |
| <button onclick="openTab('translate-document')" class="tab-btn" data-tab="translate-document" aria-selected="false" aria-controls="translate-document"> | |
| <i class="icon">🌐</i> Traduire | |
| </button> | |
| </nav> | |
| <!-- Contenu des onglets --> | |
| <div class="tab-content-wrapper"> | |
| <!-- Onglet Résumer --> | |
| <section id="summarize" class="tab-content" role="tabpanel" aria-labelledby="summarize-tab"> | |
| <h2>Résumer un document</h2> | |
| <form id="summarize-form" class="form"> | |
| <div class="file-upload-container"> | |
| <input type="file" id="summarize-file" accept=".txt,.pdf,.docx,.pptx" class="hidden-file" required /> | |
| <label for="summarize-file" class="file-upload"> | |
| <span class="file-icon">📁</span> | |
| <span class="file-label">Sélectionner un fichier (TXT, PDF, DOCX, PPTX)</span> | |
| </label> | |
| <div id="summarize-filename" class="filename-display"></div> | |
| </div> | |
| <button type="submit" class="btn btn-blue"> | |
| <span class="btn-icon">✨</span> Générer le résumé | |
| </button> | |
| </form> | |
| <div id="summarize-result" class="result-box"> | |
| <div class="placeholder">Votre résumé apparaîtra ici...</div> | |
| </div> | |
| </section> | |
| <!-- Onglet Légende Image --> | |
| <section id="interpret-image" class="tab-content hidden" role="tabpanel" aria-labelledby="interpret-image-tab"> | |
| <h2>Générer une légende d'image</h2> | |
| <form id="interpret-image-form" class="form"> | |
| <div class="file-upload-container"> | |
| <input type="file" id="interpret-image-file" accept="image/*" class="hidden-file" required /> | |
| <label for="interpret-image-file" class="file-upload"> | |
| <span class="file-icon">🖼️</span> | |
| <span class="file-label">Sélectionner une image (JPG, PNG, etc.)</span> | |
| </label> | |
| <div id="interpret-image-filename" class="filename-display"></div> | |
| </div> | |
| <button type="submit" class="btn btn-purple"> | |
| <span class="btn-icon">🔍</span> Générer la légende | |
| </button> | |
| </form> | |
| <div id="interpret-image-result" class="result-box"> | |
| <div class="placeholder">La description de votre image apparaîtra ici...</div> | |
| </div> | |
| </section> | |
| <!-- Onglet Réponse Question --> | |
| <section id="answer-question" class="tab-content hidden" role="tabpanel" aria-labelledby="answer-question-tab"> | |
| <h2>Poser une question à un document</h2> | |
| <form id="answer-question-form" class="form"> | |
| <div class="form-group"> | |
| <label for="question-input" class="form-label">Votre question</label> | |
| <textarea id="question-input" placeholder="Posez votre question ici..." class="textarea" rows="3" required></textarea> | |
| </div> | |
| <div class="file-upload-container"> | |
| <input type="file" id="answer-question-file" accept=".txt,.pdf,.docx" class="hidden-file" /> | |
| <label for="answer-question-file" class="file-upload"> | |
| <span class="file-icon">📄</span> | |
| <span class="file-label">Document de référence (optionnel)</span> | |
| </label> | |
| <div id="answer-question-filename" class="filename-display"></div> | |
| </div> | |
| <button type="submit" class="btn btn-green"> | |
| <span class="btn-icon">💡</span> Obtenir la réponse | |
| </button> | |
| </form> | |
| <div id="answer-question-result" class="result-box"> | |
| <div class="placeholder">La réponse à votre question apparaîtra ici...</div> | |
| </div> | |
| </section> | |
| <!-- Onglet Visualisation --> | |
| <section id="generate-visualization" class="tab-content hidden" role="tabpanel" aria-labelledby="generate-visualization-tab"> | |
| <h2>Générer une visualisation</h2> | |
| <form id="generate-visualization-form" class="form"> | |
| <div class="file-upload-container"> | |
| <input type="file" id="visualization-file" accept=".xlsx,.xls,.csv" class="hidden-file" required /> | |
| <label for="visualization-file" class="file-upload"> | |
| <span class="file-icon">📈</span> | |
| <span class="file-label">Sélectionner un fichier Excel/CSV</span> | |
| </label> | |
| <div id="visualization-filename" class="filename-display"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="visualization-request" class="form-label">Type de visualisation</label> | |
| <input type="text" id="visualization-request" placeholder="Ex: histogramme des ventes par mois" class="input-text" required> | |
| </div> | |
| <button type="submit" class="btn btn-indigo"> | |
| <span class="btn-icon">📊</span> Générer le graphique | |
| </button> | |
| </form> | |
| <div id="generate-visualization-result" class="result-box"> | |
| <div class="placeholder">Votre visualisation apparaîtra ici...</div> | |
| </div> | |
| </section> | |
| <!-- Onglet Traduction --> | |
| <section id="translate-document" class="tab-content hidden" role="tabpanel" aria-labelledby="translate-document-tab"> | |
| <h2>Traduire un document</h2> | |
| <form id="translate-document-form" class="form"> | |
| <div class="file-upload-container"> | |
| <input type="file" id="translate-file" accept=".txt,.docx,.pdf" class="hidden-file" required /> | |
| <label for="translate-file" class="file-upload"> | |
| <span class="file-icon">📑</span> | |
| <span class="file-label">Sélectionner un document</span> | |
| </label> | |
| <div id="translate-filename" class="filename-display"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="target-language" class="form-label">Langue cible</label> | |
| <select id="target-language" class="select" required> | |
| <option value="" disabled selected>Choisir une langue</option> | |
| <option value="en">Anglais</option> | |
| <option value="fr">Français</option> | |
| <option value="es">Espagnol</option> | |
| <option value="de">Allemand</option> | |
| <option value="it">Italien</option> | |
| <option value="pt">Portugais</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="btn btn-pink"> | |
| <span class="btn-icon">🔤</span> Traduire | |
| </button> | |
| </form> | |
| <div id="translate-document-result" class="result-box"> | |
| <div class="placeholder">La traduction apparaîtra ici...</div> | |
| </div> | |
| </section> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/script.js"></script> | |
| </body> | |
| </html> |