Hugging Face's logo

Spaces:
Docfile
/
darkmaria
Sleeping

App Files Community
darkmaria
File size: 8,014 Bytes 
7bc796e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
<!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">
    <!-- 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>
    <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>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">
                    <!-- 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 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">
                    <!-- 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 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>
                    <!-- 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">
                <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>
</body>
</html>