Hugging Face's logo

Spaces:
Docfile
/
darkmariam
Running

App Files Community
darkmariam
File size: 9,093 Bytes 
7bc796e
 
 
 
 
7d3a75b
 
 
 
 
 
 
7bc796e
 
 
7d3a75b
 
7bc796e
 
 
 
 
 
 
 
 
 
7d3a75b
 
 
 
 
7bc796e
 
 
 
 
 
 
7d3a75b
7bc796e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7d3a75b
7bc796e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7d3a75b
7bc796e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7d3a75b
 
 
 
 
7bc796e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
7d3a75b
 
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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
 
<!DOCTYPE html>
<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>