Hugging Face's logo

Spaces:
Docfile
/
darkmaria
Running

App Files Community
Docfile commited on
Commit
9f671a2
·
verified ·
1 Parent(s): aa815df

Upload index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +145 -169
templates/index.html CHANGED
@@ -1,198 +1,174 @@
1
  <!DOCTYPE html>
2
- <html lang="fr">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <meta name="description" content="Assistant IA personnel alimenté par Mariam AI">
7
- <meta name="theme-color" content="#2196F3">
8
- <title>Mariam AI Chat</title>
9
- <!-- PWA support -->
10
- <link rel="manifest" href="{{ url_for('static', filename='manifest.json') }}">
11
- <link rel="apple-touch-icon" href="{{ url_for('static', filename='icons/icon-192x192.png') }}">
12
- <!-- Fonts et styles -->
13
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
14
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
15
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
16
- <!-- SweetAlert2 pour les alertes -->
17
- <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
18
- <!-- Marked.js pour le parsing Markdown -->
19
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/marked.min.js"></script>
20
- <!-- Prism.js pour la coloration syntaxique -->
21
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism.min.css">
22
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
23
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-python.min.js"></script>
24
- <script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-javascript.min.js"></script>
25
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
26
  </head>
27
  <body>
28
- <!-- Indicateur hors ligne pour PWA -->
29
- <div class="offline-indicator" id="offlineIndicator">
30
- <i class="bi bi-wifi-off"></i> Vous êtes hors ligne. Certaines fonctionnalités peuvent être limitées.
31
- </div>
32
-
33
- <div class="app-container">
34
- <!-- Side navigation bar -->
35
- <div class="side-nav" id="sideNav">
36
- <div class="side-nav-header">
37
- <div class="logo">
38
- <i class="bi bi-stars"></i>
39
- </div>
40
- <h1>Mariam AI</h1>
41
- <button id="closeSideNavButton" class="close-button">
42
- <i class="bi bi-x-lg"></i>
43
- </button>
44
- </div>
45
-
46
- <div class="side-nav-section">
47
- <div class="section-header">
48
- <h3>Historique</h3>
49
- <button id="saveCurrentChatButton" class="action-button-small" title="Sauvegarder cette conversation">
50
- <i class="bi bi-save"></i>
51
- </button>
52
- </div>
53
- <div id="chatHistoryList" class="history-list">
54
- <!-- History items will be added here -->
55
- <div class="empty-state">Aucune conversation sauvegardée</div>
56
- </div>
57
- </div>
58
-
59
- <div class="side-nav-footer">
60
- <button id="clearButtonNav" class="nav-button" title="Effacer la conversation">
61
- <i class="bi bi-trash"></i> Effacer la conversation
62
- </button>
63
- <button id="settingsButtonNav" class="nav-button" title="Paramètres">
64
- <i class="bi bi-gear"></i> Paramètres
65
- </button>
66
- </div>
67
- </div>
68
 
69
- <!-- Main content -->
70
- <div class="main-content">
71
- <!-- Top Bar -->
72
- <div class="top-bar">
73
- <div class="top-bar-left">
74
- <button id="toggleNavButton" class="menu-button" title="Menu">
75
- <i class="bi bi-list"></i>
76
- </button>
77
- <h1>Assistant Mariam AI</h1>
78
- </div>
79
- <div class="top-bar-right">
80
- <button class="icon-button" id="clearButton" title="Effacer la conversation">
81
- <i class="bi bi-trash"></i>
82
- </button>
83
- </div>
84
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
85
 
86
- <div class="chat-container">
87
- <div class="chat-window" id="chatWindow">
88
- <!-- Welcome content with suggestion bubbles -->
89
- <div class="welcome-container">
90
- <div class="welcome-header">
91
- <div class="welcome-logo">
92
- <i class="bi bi-stars"></i>
 
 
 
93
  </div>
94
- <h2>Bienvenue sur Mariam AI</h2>
95
- <p class="welcome-subtitle">Comment puis-je vous aider aujourd'hui ?</p>
96
  </div>
97
-
98
- <div class="suggestion-bubbles">
99
- <div class="suggestion-bubble" data-prompt="Explique-moi comment fonctionne l'intelligence artificielle en termes simples">
100
- <i class="bi bi-lightbulb"></i>
101
- <span>Explique-moi comment fonctionne l'intelligence artificielle</span>
102
- </div>
103
- <div class="suggestion-bubble" data-prompt="Quelles sont les dernières avancées en matière d'énergie renouvelable ?">
104
- <i class="bi bi-wind"></i>
105
- <span>Avancées en énergie renouvelable</span>
106
- </div>
107
- <div class="suggestion-bubble" data-prompt="Donne-moi des idées de recettes rapides pour un dîner équilibré">
108
- <i class="bi bi-egg-fried"></i>
109
- <span>Idées de recettes rapides et équilibrées</span>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
110
  </div>
111
  </div>
112
  </div>
113
- <!-- Messages will be dynamically inserted here -->
114
  </div>
115
- <div class="input-area">
116
- <!-- Image preview area -->
117
- <div id="imagePreviewArea" class="image-preview-area hidden">
118
- <div id="imagePreviewContainer" class="image-preview-list">
119
- <!-- Les miniatures d'images seront ajoutées ici dynamiquement -->
120
- </div>
121
- </div>
122
-
123
- <div class="input-bar">
124
- <button id="uploadImageButton" class="upload-button" title="Joindre une image">
125
- <i class="bi bi-image"></i>
126
- </button>
127
- <input type="file" id="imageInput" accept="image/*" multiple hidden>
128
- <div class="input-container">
129
- <textarea id="userInput" placeholder="Écrivez votre message..." rows="1"></textarea>
130
- <button id="sendButton" class="send-button" title="Envoyer">
131
- <i class="bi bi-send"></i>
132
  </button>
133
  </div>
134
  </div>
135
  </div>
136
- </div>
137
- </div>
138
- </div>
139
-
140
- <!-- Loading indicator template -->
141
- <template id="loadingTemplate">
142
- <div class="message-container bot">
143
- <div class="message-bubble loading">
144
- <div class="dot-typing"></div>
145
- </div>
146
- </div>
147
- </template>
148
 
149
- <!-- User message template -->
150
- <template id="userMessageTemplate">
151
- <div class="message-container user">
152
- <div class="message-bubble">
153
- <p></p>
154
- </div>
155
- </div>
156
- </template>
157
-
158
- <!-- User message with image template -->
159
- <template id="userImageMessageTemplate">
160
- <div class="message-container user">
161
- <div class="message-bubble">
162
- <div class="image-container">
163
- <img src="" alt="Uploaded image" class="chat-image">
164
  </div>
165
- <p></p>
166
- </div>
167
- </div>
168
- </template>
169
 
170
- <!-- Bot message template -->
171
- <template id="botMessageTemplate">
172
- <div class="message-container bot">
173
- <div class="message-bubble">
174
- <div class="message-actions">
175
- <button class="copy-button" title="Copier le message">
176
- <i class="bi bi-clipboard"></i>
177
- </button>
178
  </div>
179
- <p></p>
180
  </div>
181
  </div>
182
- </template>
183
 
184
- <!-- Error message template -->
185
- <template id="errorMessageTemplate">
186
- <div class="message-container bot error">
187
- <div class="message-bubble">
188
- <p></p>
189
- <button class="retry-button">Réessayer</button>
190
- </div>
191
- </div>
192
- </template>
193
 
194
- <script src="{{ url_for('static', filename='js/chat.js') }}"></script>
195
- <!-- PWA Service Worker Registration -->
196
- <script src="{{ url_for('static', filename='js/pwa.js') }}"></script>
 
197
  </body>
198
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en" data-bs-theme="dark">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gemini Podcast Generator</title>
7
+ <!-- Bootstrap CSS (Replit Theme) -->
8
+ <link href="https://cdn.replit.com/agent/bootstrap-agent-dark-theme.min.css" rel="stylesheet">
9
+ <!-- Font Awesome for icons -->
10
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
11
+ <!-- Custom CSS -->
 
 
 
 
 
 
 
 
 
 
 
 
 
12
  <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
13
  </head>
14
  <body>
15
+ <div class="container py-4">
16
+ <header class="mb-5 text-center">
17
+ <h1 class="display-4">Gemini Podcast Generator</h1>
18
+ <p class="lead">Créez un podcast à partir d'un scénario avec des personnages multiples</p>
19
+ </header>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
20
 
21
+ <div class="row justify-content-center">
22
+ <div class="col-lg-10">
23
+ <ul class="nav nav-tabs mb-3" id="myTab" role="tablist">
24
+ <li class="nav-item" role="presentation">
25
+ <button class="nav-link active" id="simple-tab" data-bs-toggle="tab" data-bs-target="#simple-tts" type="button" role="tab" aria-controls="simple-tts" aria-selected="true">
26
+ <i class="fas fa-comment me-2"></i>Texte Simple
27
+ </button>
28
+ </li>
29
+ <li class="nav-item" role="presentation">
30
+ <button class="nav-link" id="scenario-tab" data-bs-toggle="tab" data-bs-target="#scenario-podcast" type="button" role="tab" aria-controls="scenario-podcast" aria-selected="false">
31
+ <i class="fas fa-microphone-alt me-2"></i>Scénario Podcast
32
+ </button>
33
+ </li>
34
+ </ul>
35
+
36
+ <div class="tab-content" id="myTabContent">
37
+ <!-- Simple Text-to-Speech Tab -->
38
+ <div class="tab-pane fade show active" id="simple-tts" role="tabpanel" aria-labelledby="simple-tab">
39
+ <div class="card shadow-sm">
40
+ <div class="card-body">
41
+ <form id="ttsForm">
42
+ <div class="mb-3">
43
+ <label for="textInput" class="form-label">Entrez votre texte</label>
44
+ <textarea
45
+ class="form-control"
46
+ id="textInput"
47
+ rows="5"
48
+ placeholder="Saisissez le texte que vous souhaitez convertir en parole..."
49
+ required
50
+ ></textarea>
51
+ </div>
52
+
53
+ <div class="mb-3">
54
+ <label for="voiceSelect" class="form-label">Sélectionnez une voix</label>
55
+ <select class="form-select" id="voiceSelect">
56
+ {% for voice in voices %}
57
+ <option value="{{ voice }}">{{ voice }}</option>
58
+ {% endfor %}
59
+ </select>
60
+ </div>
61
 
62
+ <div class="d-grid">
63
+ <button
64
+ type="submit"
65
+ class="btn btn-primary"
66
+ id="generateBtn"
67
+ >
68
+ <i class="fas fa-microphone me-2"></i>Générer l'audio
69
+ </button>
70
+ </div>
71
+ </form>
72
  </div>
 
 
73
  </div>
74
+ </div>
75
+
76
+ <!-- Scenario Podcast Tab -->
77
+ <div class="tab-pane fade" id="scenario-podcast" role="tabpanel" aria-labelledby="scenario-tab">
78
+ <div class="card shadow-sm">
79
+ <div class="card-body">
80
+ <form id="podcastForm">
81
+ <div class="mb-3">
82
+ <label for="scenarioInput" class="form-label">Entrez votre scénario (JSON)</label>
83
+ <textarea
84
+ class="form-control"
85
+ id="scenarioInput"
86
+ rows="12"
87
+ placeholder='{"title": "Titre du podcast", "language": "fr-FR", "characters": [{"name": "Personnage1", "voice": "Kore", "text": "Texte du personnage 1"}, {"name": "Personnage2", "voice": "Puck", "text": "Texte du personnage 2"}]}'
88
+ required
89
+ ></textarea>
90
+ </div>
91
+
92
+ <div class="alert alert-info">
93
+ <h6><i class="fas fa-info-circle me-2"></i>Format du scénario:</h6>
94
+ <pre class="mb-0"><code>{
95
+ "title": "Titre du podcast",
96
+ "language": "fr-FR",
97
+ "characters": [
98
+ {
99
+ "name": "Personnage1",
100
+ "voice": "Kore",
101
+ "text": "Texte du personnage 1"
102
+ },
103
+ {
104
+ "name": "Personnage2",
105
+ "voice": "Puck",
106
+ "text": "Texte du personnage 2"
107
+ }
108
+ ]
109
+ }</code></pre>
110
+ </div>
111
+
112
+ <div class="d-grid mt-4">
113
+ <button
114
+ type="submit"
115
+ class="btn btn-primary"
116
+ id="generatePodcastBtn"
117
+ >
118
+ <i class="fas fa-podcast me-2"></i>Générer le podcast
119
+ </button>
120
+ </div>
121
+ </form>
122
  </div>
123
  </div>
124
  </div>
 
125
  </div>
126
+
127
+ <div class="card mt-4 shadow-sm d-none" id="audioCard">
128
+ <div class="card-body">
129
+ <h5 class="card-title">Audio généré</h5>
130
+ <div class="text-center my-4">
131
+ <div id="audioPlayerContainer" class="mb-3">
132
+ <audio id="audioPlayer" controls class="w-100"></audio>
133
+ </div>
134
+ <button class="btn btn-success me-2" id="downloadBtn">
135
+ <i class="fas fa-download me-2"></i>Télécharger
136
+ </button>
137
+ <button class="btn btn-secondary" id="newGenerationBtn">
138
+ <i class="fas fa-plus me-2"></i>Nouvelle génération
 
 
 
 
139
  </button>
140
  </div>
141
  </div>
142
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
143
 
144
+ <!-- Loading Indicator -->
145
+ <div class="text-center mt-4 d-none" id="loadingIndicator">
146
+ <div class="spinner-border text-primary" role="status">
147
+ <span class="visually-hidden">Chargement...</span>
148
+ </div>
149
+ <p class="mt-2">Génération en cours avec Gemini AI...</p>
150
+ <div class="progress mt-3 d-none" id="progressBar">
151
+ <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
152
+ </div>
153
+ <p class="mt-2 d-none" id="progressText">Préparation du podcast...</p>
 
 
 
 
 
154
  </div>
 
 
 
 
155
 
156
+ <!-- Error Alert -->
157
+ <div class="alert alert-danger mt-4 d-none" id="errorAlert" role="alert">
158
+ <i class="fas fa-exclamation-triangle me-2"></i>
159
+ <span id="errorMessage"></span>
 
 
 
 
160
  </div>
 
161
  </div>
162
  </div>
 
163
 
164
+ <footer class="mt-5 pt-4 text-center text-muted">
165
+ <p>Powered by Google Gemini AI &copy; <script>document.write(new Date().getFullYear())</script></p>
166
+ </footer>
167
+ </div>
 
 
 
 
 
168
 
169
+ <!-- Bootstrap JS -->
170
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
171
+ <!-- Custom JS -->
172
+ <script src="{{ url_for('static', filename='js/main.js') }}"></script>
173
  </body>
174
  </html>