Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="Assistant IA personnel alimenté par Mariam AI"> | |
| <meta name="theme-color" content="#2196F3"> | |
| <title>Mariam AI Chat</title> | |
| <!-- PWA support --> | |
| <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}"> | |
| <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}"> | |
| <!-- Fonts et styles --> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"> | |
| <!-- SweetAlert2 pour les alertes --> | |
| <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> | |
| <!-- Marked.js pour le parsing Markdown --> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script> | |
| <!-- Prism.js pour la coloration syntaxique --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css"> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-python.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-javascript.min.js"></script> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}"> | |
| </head> | |
| <body> | |
| <!-- Indicateur hors ligne pour PWA --> | |
| <div class="offline-indicator" id="offlineIndicator"> | |
| <i class="bi bi-wifi-off"></i> Vous êtes hors ligne. Certaines fonctionnalités peuvent être limitées. | |
| </div> | |
| <div class="app-container"> | |
| <!-- Side navigation bar --> | |
| <div class="side-nav" id="sideNav"> | |
| <div class="side-nav-header"> | |
| <div class="logo"> | |
| <i class="bi bi-stars"></i> | |
| </div> | |
| <h1>Mariam AI</h1> | |
| <button id="closeSideNavButton" class="close-button"> | |
| <i class="bi bi-x-lg"></i> | |
| </button> | |
| </div> | |
| <div class="side-nav-section"> | |
| <div class="section-header"> | |
| <h3>Historique</h3> | |
| <button id="saveCurrentChatButton" class="action-button-small" title="Sauvegarder cette conversation"> | |
| <i class="bi bi-save"></i> | |
| </button> | |
| </div> | |
| <div id="chatHistoryList" class="history-list"> | |
| <!-- History items will be added here --> | |
| <div class="empty-state">Aucune conversation sauvegardée</div> | |
| </div> | |
| </div> | |
| <div class="side-nav-footer"> | |
| <button id="clearButtonNav" class="nav-button" title="Effacer la conversation"> | |
| <i class="bi bi-trash"></i> Effacer la conversation | |
| </button> | |
| <button id="settingsButtonNav" class="nav-button" title="Paramètres"> | |
| <i class="bi bi-gear"></i> Paramètres | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main content --> | |
| <div class="main-content"> | |
| <!-- Top Bar --> | |
| <div class="top-bar"> | |
| <div class="top-bar-left"> | |
| <button id="toggleNavButton" class="menu-button" title="Menu"> | |
| <i class="bi bi-list"></i> | |
| </button> | |
| <h1>Assistant Mariam AI</h1> | |
| </div> | |
| <div class="top-bar-right"> | |
| <button class="icon-button" id="clearButton" title="Effacer la conversation"> | |
| <i class="bi bi-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="chat-container"> | |
| <div class="chat-window" id="chatWindow"> | |
| <!-- Welcome content with suggestion bubbles --> | |
| <div class="welcome-container"> | |
| <div class="welcome-header"> | |
| <div class="welcome-logo"> | |
| <i class="bi bi-stars"></i> | |
| </div> | |
| <h2>Bienvenue sur Mariam AI</h2> | |
| <p class="welcome-subtitle">Comment puis-je vous aider aujourd'hui ?</p> | |
| </div> | |
| <div class="suggestion-bubbles"> | |
| <div class="suggestion-bubble" data-prompt="Explique-moi comment fonctionne l'intelligence artificielle en termes simples"> | |
| <i class="bi bi-lightbulb"></i> | |
| <span>Explique-moi comment fonctionne l'intelligence artificielle</span> | |
| </div> | |
| <div class="suggestion-bubble" data-prompt="Quelles sont les dernières avancées en matière d'énergie renouvelable ?"> | |
| <i class="bi bi-wind"></i> | |
| <span>Avancées en énergie renouvelable</span> | |
| </div> | |
| <div class="suggestion-bubble" data-prompt="Donne-moi des idées de recettes rapides pour un dîner équilibré"> | |
| <i class="bi bi-egg-fried"></i> | |
| <span>Idées de recettes rapides et équilibrées</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Messages will be dynamically inserted here --> | |
| </div> | |
| <div class="input-area"> | |
| <!-- Image preview area --> | |
| <div id="imagePreviewArea" class="image-preview-area hidden"> | |
| <div id="imagePreviewContainer" class="image-preview-list"> | |
| <!-- Les miniatures d'images seront ajoutées ici dynamiquement --> | |
| </div> | |
| </div> | |
| <div class="input-bar"> | |
| <button id="uploadImageButton" class="upload-button" title="Joindre une image"> | |
| <i class="bi bi-image"></i> | |
| </button> | |
| <input type="file" id="imageInput" accept="image/*" multiple hidden> | |
| <div class="input-container"> | |
| <textarea id="userInput" placeholder="Écrivez votre message..." rows="1"></textarea> | |
| <button id="sendButton" class="send-button" title="Envoyer"> | |
| <i class="bi bi-send"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Loading indicator template --> | |
| <template id="loadingTemplate"> | |
| <div class="message-container bot"> | |
| <div class="message-bubble loading"> | |
| <div class="dot-typing"></div> | |
| </div> | |
| </div> | |
| </template> | |
| <!-- User message template --> | |
| <template id="userMessageTemplate"> | |
| <div class="message-container user"> | |
| <div class="message-bubble"> | |
| <p></p> | |
| </div> | |
| </div> | |
| </template> | |
| <!-- User message with image template --> | |
| <template id="userImageMessageTemplate"> | |
| <div class="message-container user"> | |
| <div class="message-bubble"> | |
| <div class="image-container"> | |
| <img src="" alt="Uploaded image" class="chat-image"> | |
| </div> | |
| <p></p> | |
| </div> | |
| </div> | |
| </template> | |
| <!-- Bot message template --> | |
| <template id="botMessageTemplate"> | |
| <div class="message-container bot"> | |
| <div class="message-bubble"> | |
| <div class="message-actions"> | |
| <button class="copy-button" title="Copier le message"> | |
| <i class="bi bi-clipboard"></i> | |
| </button> | |
| </div> | |
| <p></p> | |
| </div> | |
| </div> | |
| </template> | |
| <!-- Error message template --> | |
| <template id="errorMessageTemplate"> | |
| <div class="message-container bot error"> | |
| <div class="message-bubble"> | |
| <p></p> | |
| <button class="retry-button">Réessayer</button> | |
| </div> | |
| </div> | |
| </template> | |
| <script src="{{ url_for('static', filename='js/chat.js') }}"></script> | |
| <!-- PWA Service Worker Registration --> | |
| <script src="{{ url_for('static', filename='js/pwa.js') }}"></script> | |
| </body> | |
| </html> | |