|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Gemini Chat</title> |
|
|
<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"> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script> |
|
|
|
|
|
<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> |
|
|
<div class="app-container"> |
|
|
|
|
|
<div class="side-nav" id="sideNav"> |
|
|
<div class="side-nav-header"> |
|
|
<div class="logo"> |
|
|
<i class="bi bi-stars"></i> |
|
|
</div> |
|
|
<h1>Gemini</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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div class="main-content"> |
|
|
|
|
|
<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 Gemini</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"> |
|
|
|
|
|
<div class="welcome-container"> |
|
|
<div class="welcome-header"> |
|
|
<div class="welcome-logo"> |
|
|
<i class="bi bi-stars"></i> |
|
|
</div> |
|
|
<h2>Bienvenue sur Gemini</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> |
|
|
|
|
|
</div> |
|
|
<div class="input-area"> |
|
|
|
|
|
<div id="imagePreviewArea" class="image-preview-area hidden"> |
|
|
<div id="imagePreviewContainer" class="image-preview-list"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<template id="loadingTemplate"> |
|
|
<div class="message-container bot"> |
|
|
<div class="message-bubble loading"> |
|
|
<div class="dot-typing"></div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
|
|
|
|
|
|
<template id="userMessageTemplate"> |
|
|
<div class="message-container user"> |
|
|
<div class="message-bubble"> |
|
|
<p></p> |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
|
|
|
|
|
|
<template id="botMessageTemplate"> |
|
|
<div class="message-container bot"> |
|
|
<div class="message-bubble"> |
|
|
<p></p> |
|
|
</div> |
|
|
</div> |
|
|
</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> |
|
|
</body> |
|
|
</html> |
|
|
|
