Hugging Face's logo

Spaces:
Docfile
/
Eps2
Sleeping

App Files Community
Docfile commited on
Commit
333596d
·
verified ·
1 Parent(s): 2171485

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +194 -101
templates/index.html CHANGED
@@ -3,115 +3,208 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Générateur de comptes automatique</title>
7
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 
8
  <style>
9
- body { background-color: #f5f5f5; }
10
- .card { box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
11
- .progress { height: 25px; }
12
- #status-display { height: 200px; overflow-y: auto; }
13
  </style>
14
- <script src="{{ url_for('serve_js') }}"></script>
15
  </head>
16
- <body>
17
- <div class="container mt-5">
18
- <div class="row">
19
- <div class="col-md-12 mb-4">
20
- <div class="card">
21
- <div class="card-header bg-primary text-white">
22
- <h3 class="card-title mb-0">Générateur de comptes - Startup Côte d'Ivoire</h3>
23
- </div>
24
- <div class="card-body">
25
- <form id="generator-form">
26
- <div class="row mb-3">
27
- <div class="col-md-6">
28
- <label for="num_accounts" class="form-label">Nombre de comptes à créer</label>
29
- <input type="number" class="form-control" id="num_accounts" name="num_accounts" min="1" max="1000000000" value="10">
30
- </div>
31
- <div class="col-md-6">
32
- <label for="startup_ratio" class="form-label">Ratio de représentants de startup (%)</label>
33
- <input type="number" class="form-control" id="startup_ratio" name="startup_ratio" min="0" max="100" value="30">
34
- </div>
35
- </div>
36
- <div class="d-grid gap-2 d-md-flex justify-content-md-center">
37
- <button type="submit" id="start-btn" class="btn btn-success btn-lg">
38
- <i class="fas fa-play"></i> Démarrer
39
- </button>
40
- <button type="button" id="stop-btn" class="btn btn-danger btn-lg">
41
- <i class="fas fa-stop"></i> Arrêter
42
- </button>
43
- <a href="/accounts" class="btn btn-primary btn-lg">
44
- <i class="fas fa-list"></i> Voir les comptes
45
- </a>
46
- </div>
47
- </form>
48
- </div>
49
  </div>
50
  </div>
51
-
52
- <div class="col-md-12">
53
- <div class="card">
54
- <div class="card-header bg-info text-white">
55
- <h4 class="card-title mb-0">Progression</h4>
56
- </div>
57
- <div class="card-body">
58
- <div class="progress mb-3">
59
- <div id="progress-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%">0%</div>
60
- </div>
61
-
62
- <div class="row text-center mb-3">
63
- <div class="col">
64
- <div class="card bg-light">
65
- <div class="card-body">
66
- <h5>Total</h5>
67
- <h3 id="total-count">0</h3>
68
- </div>
69
- </div>
70
- </div>
71
- <div class="col">
72
- <div class="card bg-success text-white">
73
- <div class="card-body">
74
- <h5>Réussis</h5>
75
- <h3 id="success-count">0</h3>
76
- </div>
77
- </div>
78
- </div>
79
- <div class="col">
80
- <div class="card bg-danger text-white">
81
- <div class="card-body">
82
- <h5>Échecs</h5>
83
- <h3 id="failed-count">0</h3>
84
- </div>
85
- </div>
86
- </div>
87
- </div>
88
-
89
- <div class="card mb-3">
90
- <div class="card-header">
91
- <h5>Dernier statut</h5>
92
- </div>
93
- <div class="card-body">
94
- <p id="last-status">-</p>
95
- <p>Dernier compte créé: <span id="last-username" class="text-primary fw-bold">-</span></p>
96
- </div>
97
- </div>
98
-
99
- <div class="row">
100
- <div class="col-md-6">
101
- <p>Heure de début: <span id="start-time">-</span></p>
102
- </div>
103
- <div class="col-md-6 text-end">
104
- <p>Heure de fin: <span id="end-time">-</span></p>
105
- </div>
106
- </div>
107
- </div>
108
  </div>
 
 
 
 
 
 
109
  </div>
110
  </div>
111
  </div>
112
-
113
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
114
- <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
115
-
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  </body>
117
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gemini Chat</title>
7
+ <!-- Tailwind CSS via CDN -->
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
  <style>
10
+ .chat-container {
11
+ height: calc(100vh - 180px);
12
+ }
 
13
  </style>
 
14
  </head>
15
+ <body class="bg-gray-100">
16
+ <div class="container mx-auto p-4 max-w-3xl">
17
+ <header class="bg-white shadow-md rounded-lg p-4 mb-4">
18
+ <h1 class="text-2xl font-bold text-center text-blue-600">Gemini Chat</h1>
19
+ <p class="text-center text-gray-500">Interagissez avec le modèle Gemini-2.0-Flash</p>
20
+ </header>
21
+
22
+ <div class="bg-white shadow-md rounded-lg p-4">
23
+ <!-- Zone d'historique de chat -->
24
+ <div id="chat-history" class="chat-container overflow-y-auto mb-4 p-3 bg-gray-50 rounded-lg">
25
+ <div class="text-center text-gray-400 my-4">
26
+ Commencez une nouvelle conversation...
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
27
  </div>
28
  </div>
29
+
30
+ <!-- Zone de saisie et boutons -->
31
+ <div class="flex flex-col gap-2">
32
+ <div class="flex gap-2">
33
+ <textarea
34
+ id="user-input"
35
+ class="flex-grow p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
36
+ placeholder="Tapez votre message ici..."
37
+ rows="2"
38
+ ></textarea>
39
+ <button
40
+ id="send-button"
41
+ class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-lg"
42
+ >
43
+ Envoyer
44
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
  </div>
46
+ <button
47
+ id="reset-button"
48
+ class="bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded-lg self-end"
49
+ >
50
+ Nouvelle Conversation
51
+ </button>
52
  </div>
53
  </div>
54
  </div>
55
+
56
+ <script>
57
+ document.addEventListener('DOMContentLoaded', () => {
58
+ const chatHistory = document.getElementById('chat-history');
59
+ const userInput = document.getElementById('user-input');
60
+ const sendButton = document.getElementById('send-button');
61
+ const resetButton = document.getElementById('reset-button');
62
+
63
+ // État de chargement
64
+ let isLoading = false;
65
+
66
+ // Fonction pour ajouter un message au chat
67
+ function addMessage(role, content, timestamp = getCurrentTime()) {
68
+ const messageDiv = document.createElement('div');
69
+ messageDiv.className = `my-2 p-3 rounded-lg ${role === 'user' ? 'bg-blue-100 ml-12' : 'bg-gray-100 mr-12'}`;
70
+
71
+ const header = document.createElement('div');
72
+ header.className = 'font-bold text-sm';
73
+ header.textContent = role === 'user' ? 'Vous' : 'Gemini';
74
+
75
+ const timeSpan = document.createElement('span');
76
+ timeSpan.className = 'text-xs text-gray-500 ml-2';
77
+ timeSpan.textContent = timestamp;
78
+ header.appendChild(timeSpan);
79
+
80
+ const contentDiv = document.createElement('div');
81
+ contentDiv.className = 'whitespace-pre-wrap';
82
+ contentDiv.textContent = content;
83
+
84
+ messageDiv.appendChild(header);
85
+ messageDiv.appendChild(contentDiv);
86
+ chatHistory.appendChild(messageDiv);
87
+
88
+ // Scroll to bottom
89
+ chatHistory.scrollTop = chatHistory.scrollHeight;
90
+ }
91
+
92
+ // Obtenir l'heure actuelle
93
+ function getCurrentTime() {
94
+ const now = new Date();
95
+ return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
96
+ }
97
+
98
+ // Fonction pour afficher l'indicateur de chargement
99
+ function showLoading() {
100
+ if (isLoading) return;
101
+ isLoading = true;
102
+
103
+ const loadingDiv = document.createElement('div');
104
+ loadingDiv.id = 'loading-indicator';
105
+ loadingDiv.className = 'my-2 p-3 bg-gray-100 rounded-lg mr-12 flex items-center';
106
+ loadingDiv.innerHTML = `
107
+ <div class="font-bold text-sm">Gemini</div>
108
+ <div class="ml-2">
109
+ <span class="inline-block w-2 h-2 bg-gray-500 rounded-full animate-bounce"></span>
110
+ <span class="inline-block w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></span>
111
+ <span class="inline-block w-2 h-2 bg-gray-500 rounded-full animate-bounce" style="animation-delay: 0.4s"></span>
112
+ </div>
113
+ `;
114
+ chatHistory.appendChild(loadingDiv);
115
+ chatHistory.scrollTop = chatHistory.scrollHeight;
116
+ }
117
+
118
+ // Fonction pour masquer l'indicateur de chargement
119
+ function hideLoading() {
120
+ if (!isLoading) return;
121
+ const loadingIndicator = document.getElementById('loading-indicator');
122
+ if (loadingIndicator) {
123
+ loadingIndicator.remove();
124
+ }
125
+ isLoading = false;
126
+ }
127
+
128
+ // Fonction pour envoyer un message
129
+ async function sendMessage() {
130
+ const message = userInput.value.trim();
131
+ if (!message) return;
132
+
133
+ // Vider l'input et ajouter le message de l'utilisateur
134
+ userInput.value = '';
135
+ addMessage('user', message);
136
+
137
+ // Afficher l'indicateur de chargement
138
+ showLoading();
139
+
140
+ try {
141
+ // Envoyer la requête au serveur
142
+ const response = await fetch('/chat', {
143
+ method: 'POST',
144
+ headers: {
145
+ 'Content-Type': 'application/json',
146
+ },
147
+ body: JSON.stringify({ message }),
148
+ });
149
+
150
+ if (!response.ok) {
151
+ throw new Error('Erreur de communication avec le serveur');
152
+ }
153
+
154
+ const data = await response.json();
155
+
156
+ // Masquer l'indicateur de chargement
157
+ hideLoading();
158
+
159
+ // Afficher la réponse
160
+ addMessage('model', data.response);
161
+
162
+ } catch (error) {
163
+ // Masquer l'indicateur de chargement
164
+ hideLoading();
165
+
166
+ // Afficher l'erreur
167
+ addMessage('system', `Erreur: ${error.message}`);
168
+ console.error('Erreur:', error);
169
+ }
170
+ }
171
+
172
+ // Réinitialiser la conversation
173
+ async function resetChat() {
174
+ try {
175
+ const response = await fetch('/reset', {
176
+ method: 'POST',
177
+ });
178
+
179
+ if (!response.ok) {
180
+ throw new Error('Erreur lors de la réinitialisation');
181
+ }
182
+
183
+ // Vider l'historique
184
+ chatHistory.innerHTML = `
185
+ <div class="text-center text-gray-400 my-4">
186
+ Commencez une nouvelle conversation...
187
+ </div>
188
+ `;
189
+
190
+ } catch (error) {
191
+ console.error('Erreur de réinitialisation:', error);
192
+ alert('Impossible de réinitialiser la conversation. Veuillez réessayer.');
193
+ }
194
+ }
195
+
196
+ // Écouteurs d'événements
197
+ sendButton.addEventListener('click', sendMessage);
198
+
199
+ userInput.addEventListener('keypress', (e) => {
200
+ if (e.key === 'Enter' && !e.shiftKey) {
201
+ e.preventDefault();
202
+ sendMessage();
203
+ }
204
+ });
205
+
206
+ resetButton.addEventListener('click', resetChat);
207
+ });
208
+ </script>
209
  </body>
210
  </html>