monsimas commited on
Commit
da6c696
·
verified ·
1 Parent(s): 5d9355a

Update Readme design

Browse files
Files changed (1) hide show
  1. README.md +381 -4
README.md CHANGED
@@ -6,11 +6,388 @@ colorTo: purple
6
  sdk: static
7
  pinned: false
8
  ---
9
- compar:IA is being developed by the digital department of the French Ministry of Culture and is part of the beta.gouv.fr program of the Interministerial Digital Department (DINUM).
10
 
11
- * Compare 15+ LLMs side-by-side at https://comparia.beta.gouv.fr.
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
12
 
13
- * Learn more about us at https://beta.gouv.fr/startups/languia.html.
 
 
 
 
 
 
 
14
 
15
- * Contact us: [email protected]
 
 
 
 
 
 
 
 
 
16
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6
  sdk: static
7
  pinned: false
8
  ---
 
9
 
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Marianne:wght@300;400;500;700&display=swap');
12
+
13
+ :root {
14
+ --primary-color: #000091;
15
+ --secondary-color: #6a6af4;
16
+ --accent-color: #e1000f;
17
+ --text-color: #1e1e1e;
18
+ --light-bg: #f5f5fe;
19
+ --border-radius: 6px;
20
+ }
21
+
22
+ .container {
23
+ font-family: 'Marianne', sans-serif;
24
+ max-width: 700px; /* Largeur plus petite comme demandé */
25
+ margin: 0 auto; /* Centré horizontalement */
26
+ padding: 15px;
27
+ color: var(--text-color);
28
+ line-height: 1.4;
29
+ font-size: 14px;
30
+ }
31
+
32
+ .logo {
33
+ width: 200px;
34
+ display: block;
35
+ margin: 0 0 20px 0; /* Ajout d'une marge en bas */
36
+ transition: transform 0.3s ease;
37
+ }
38
+
39
+ .logo:hover {
40
+ transform: scale(1.05);
41
+ }
42
 
43
+ h1 {
44
+ color: var(--primary-color);
45
+ text-align: left;
46
+ font-size: 2em;
47
+ margin: 40px 0 30px;
48
+ position: relative;
49
+ padding-bottom: 15px;
50
+ }
51
 
52
+ h1::after {
53
+ content: "";
54
+ position: absolute;
55
+ bottom: 0;
56
+ left: 0;
57
+ width: 80px;
58
+ height: 4px;
59
+ background-color: var(--accent-color);
60
+ border-radius: 2px;
61
+ }
62
 
63
+ .dataset-section {
64
+ display: flex;
65
+ flex-direction: row; /* Changé de column à row */
66
+ gap: 10px; /* Réduit l'espace entre les cartes */
67
+ margin: 20px 0;
68
+ overflow-x: auto; /* Permet de faire défiler horizontalement si nécessaire */
69
+ align-items: stretch; /* Assure que toutes les cartes ont la même hauteur */
70
+ }
71
+
72
+ .dataset-card {
73
+ background-color: white;
74
+ border-radius: var(--border-radius);
75
+ padding: 15px; /* Légèrement réduit pour plus de compacité */
76
+ border: 1px solid #eee;
77
+ display: flex;
78
+ flex-direction: column;
79
+ transition: all 0.3s ease;
80
+ flex: 1; /* Chaque carte prend 1/3 de l'espace */
81
+ min-width: 0; /* Important pour permettre le redimensionnement */
82
+ max-width: calc(33.333% - 7px); /* Limite la largeur maximale */
83
+ }
84
+
85
+ .dataset-card:hover {
86
+ transform: translateY(-2px);
87
+ border-color: #ddd;
88
+ }
89
+
90
+ .dataset-icon {
91
+ font-size: 1.8em; /* Légèrement réduit */
92
+ margin-bottom: 10px;
93
+ text-align: left;
94
+ }
95
+
96
+ .dataset-title {
97
+ color: var(--primary-color);
98
+ font-size: 1.1em; /* Légèrement réduit */
99
+ font-weight: 600;
100
+ margin-bottom: 8px;
101
+ text-align: left;
102
+ }
103
+
104
+ .dataset-card img,
105
+ .dataset-card video {
106
+ width: 100%;
107
+ height: auto;
108
+ max-height: 120px; /* Réduit un peu */
109
+ object-fit: contain;
110
+ margin-bottom: 12px;
111
+ }
112
+
113
+ .dataset-description {
114
+ color: #555;
115
+ font-size: 0.85em; /* Réduit pour tenir dans l'espace */
116
+ margin-bottom: 15px;
117
+ flex-grow: 1;
118
+ text-align: left;
119
+ overflow: visible;
120
+ display: block;
121
+ }
122
+
123
+ .dataset-metrics {
124
+ background-color: var(--light-bg);
125
+ padding: 12px;
126
+ border-radius: var(--border-radius);
127
+ margin-bottom: 15px;
128
+ text-align: left;
129
+ }
130
+
131
+ .dataset-metrics .number {
132
+ font-size: 1.4em; /* Légèrement réduit */
133
+ font-weight: 700;
134
+ color: var(--primary-color);
135
+ margin: 2px 0;
136
+ }
137
+
138
+ .dataset-metrics .label {
139
+ font-size: 0.85em;
140
+ color: #555;
141
+ }
142
+
143
+ .dataset-button {
144
+ background-color: #6A6AF5;
145
+ color: white;
146
+ text-decoration: none;
147
+ padding: 8px 15px; /* Légèrement réduit */
148
+ border-radius: var(--border-radius);
149
+ text-align: center;
150
+ transition: all 0.3s ease;
151
+ font-weight: 600;
152
+ display: inline-flex;
153
+ align-items: center;
154
+ justify-content: flex-start;
155
+ font-size: 0.9em; /* Légèrement réduit */
156
+ margin-top: auto; /* Pousse le bouton vers le bas */
157
+ }
158
+
159
+ .dataset-button:hover {
160
+ transform: translateY(-2px);
161
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
162
+ }
163
+
164
+ .description {
165
+ text-align: left;
166
+ line-height: 1.4;
167
+ margin: 20px 0;
168
+ font-size: 0.95em;
169
+ }
170
+
171
+ .video-container {
172
+ box-shadow: 0 4px 12px rgba(0, 0, 145, 0.15);
173
+ border-radius: var(--border-radius);
174
+ overflow: hidden;
175
+ width: 300px;
176
+ margin: 25px 0;
177
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
178
+ display: block;
179
+ }
180
+
181
+ .video-player {
182
+ width: 100%;
183
+ display: block;
184
+ vertical-align: bottom;
185
+ margin: 0;
186
+ padding: 0;
187
+ }
188
+
189
+ .video-container:hover {
190
+ transform: translateY(-3px);
191
+ box-shadow: 0 6px 15px rgba(0, 0, 145, 0.2);
192
+ }
193
+
194
+ .objectives {
195
+ background-color: var(--light-bg);
196
+ padding: 15px;
197
+ border-radius: var(--border-radius);
198
+ margin: 20px 0;
199
+ text-align: left;
200
+ }
201
+
202
+ .objectives h2 {
203
+ text-align: left;
204
+ color: var(--primary-color);
205
+ margin-top: 0;
206
+ margin-bottom: 20px;
207
+ font-size: 1.4em;
208
+ position: relative;
209
+ }
210
+
211
+ .objectives h2:after {
212
+ content: "";
213
+ display: block;
214
+ width: 60px;
215
+ height: 3px;
216
+ background-color: var(--accent-color);
217
+ margin: 8px 0 0;
218
+ border-radius: 2px;
219
+ }
220
+
221
+ .objective-columns {
222
+ display: flex;
223
+ gap: 20px;
224
+ flex-wrap: wrap;
225
+ }
226
+
227
+ .objective-column {
228
+ flex: 1;
229
+ min-width: 200px;
230
+ }
231
+
232
+ .objective-column h3 {
233
+ color: var(--primary-color);
234
+ font-size: 1.1em;
235
+ margin-bottom: 12px;
236
+ text-align: left;
237
+ }
238
+
239
+ .objective-column ul {
240
+ padding-left: 15px;
241
+ text-align: left;
242
+ }
243
+
244
+ .objective-column li {
245
+ margin-bottom: 8px;
246
+ position: relative;
247
+ padding-left: 4px;
248
+ font-size: 0.9em;
249
+ text-align: left;
250
+ }
251
+
252
+ .objective-column li::marker {
253
+ color: var(--accent-color);
254
+ font-weight: bold;
255
+ }
256
+
257
+ .links {
258
+ display: flex;
259
+ flex-wrap: wrap;
260
+ justify-content: flex-start;
261
+ gap: 12px;
262
+ margin: 25px 0;
263
+ }
264
+
265
+ .button {
266
+ display: inline-block;
267
+ padding: 8px 16px;
268
+ border-radius: var(--border-radius);
269
+ text-decoration: none;
270
+ font-weight: 500;
271
+ font-size: 0.9em;
272
+ transition: all 0.3s ease;
273
+ }
274
+
275
+ .button.secondary {
276
+ background-color: #F2F5F9;
277
+ color: var(--primary-color);
278
+ border: 1px solid var(--primary-color);
279
+ }
280
+
281
+ .button.secondary:hover {
282
+ background-color: #f5f5ff;
283
+ transform: translateY(-2px);
284
+ }
285
+
286
+ .cta-container {
287
+ display: flex;
288
+ justify-content: flex-start;
289
+ margin: 30px 0 40px;
290
+ }
291
+
292
+ .cta-button {
293
+ background-color: #6A6AF5;
294
+ color: white;
295
+ font-size: 1em;
296
+ font-weight: 600;
297
+ padding: 10px 20px;
298
+ border-radius: var(--border-radius);
299
+ text-decoration: none;
300
+ transition: all 0.3s ease;
301
+ display: inline-flex;
302
+ align-items: center;
303
+ box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
304
+ }
305
+
306
+ .cta-button:hover {
307
+ transform: translateY(-2px);
308
+ box-shadow: 0 5px 15px;
309
+ }
310
+
311
+ .cta-arrow {
312
+ margin-left: 8px;
313
+ font-size: 1.1em;
314
+ transition: transform 0.3s ease;
315
+ }
316
+
317
+ .cta-button:hover .cta-arrow {
318
+ transform: translateX(3px);
319
+ }
320
+
321
+ .container > p:last-of-type img {
322
+ max-width: 100px;
323
+ height: auto;
324
+ margin: 0;
325
+ display: block;
326
+ }
327
+ </style>
328
+
329
+ <div class="container">
330
+ <a href="https://comparia.beta.gouv.fr/">
331
+ <img class="logo" src="https://github.com/user-attachments/assets/bd071ffd-1253-486d-ad18-9f5b371788b0" alt="compar:IA logo">
332
+ </a>
333
+
334
+ [Compar:IA](https://comparia.beta.gouv.fr/) est un comparateur d'IA conversationnelles (une "chatbot arena") développé au sein du Ministère de la Culture français avec une double mission :
335
+ - Former et sensibiliser au pluralisme des modèles, aux biais culturels et linguistiques et aux enjeux environnementaux des IA conversationnelles.
336
+ - Améliorer les IA conversationnelles en français en publiant des jeux de données d'alignement en français et en faisant un classement de modèles d'IA conversationnelle en français (en construction).
337
+
338
+ Le comparateur compar:IA est développé dans le cadre de la start-up d'Etat compar:IA (incubateur de l'[Atelier numérique](https://www.culture.gouv.fr/Thematiques/innovation-numerique/Aides-a-l-innovation-et-a-la-transformation-numerique/L-Atelier-numerique#:~:text=L'Atelier%20num%C3%A9rique%20est%20l,engager%20personnellement%20pour%20le%20r%C3%A9soudre.) et [AllIAnce](https://alliance.numerique.gouv.fr/)) intégrée au programme [beta.gouv.fr](beta.gouv.fr) de la [Direction interministérielle du numérique (DINUM)](https://www.numerique.gouv.fr/dinum/) qui aide les administrations publiques à construire des services numériques utiles, simples et faciles à utiliser.
339
+ <p class="links">
340
+ <a href="https://comparia.beta.gouv.fr/" class="button secondary">✨ Tester compar:IA</a>
341
+ <a href="mailto:[email protected]" class="button secondary">📧 Nous contacter</a>
342
+ <a href="https://github.com/betagouv/ComparIA" class="button secondary">💻 Dépôt de code</a>
343
+ </p>
344
+
345
+ Les données collectées via compar:IA sont publiés dans trois jeux de données :
346
+
347
+ <div class="dataset-section">
348
+ <div class="dataset-card">
349
+ <div class="dataset-icon">💬</div>
350
+ <div class="dataset-title">comparIA-conversations</div>
351
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/649d986a474bf415c03b772c/LUYr4vyM1eeHGQ5JSHJQR.png" alt="Conversations">
352
+ <div class="dataset-description">
353
+ Jeu de données de l'ensemble des questions posées et réponses reçues sur la plateforme compar:IA.
354
+ </div>
355
+ <div class="dataset-metrics">
356
+ <div class="number">103k+</div>
357
+ <div class="label">conversations</div>
358
+ </div>
359
+ <a href="https://huggingface.co/datasets/ministere-culture/comparia-questions" class="dataset-button">Découvrir</a>
360
+ </div>
361
+ <div class="dataset-card">
362
+ <div class="dataset-icon">👍</div>
363
+ <div class="dataset-title">comparIA-votes</div>
364
+ <video controls autoplay loop muted playsinline src="https://cdn-uploads.huggingface.co/production/uploads/649d986a474bf415c03b772c/Fv-aTZYUKDsPwS5HwNbX3.mp4"></video>
365
+ <div class="dataset-description">
366
+ Jeu de données regroupant les préférences exprimées par les utilisateurs après une conversation entière. Les votes permettent de comparer deux modèles lorsqu'aucune réaction n'a été donnée sur des messages individuels.
367
+ </div>
368
+ <div class="dataset-metrics">
369
+ <div class="number">30k+</div>
370
+ <div class="label">votes</div>
371
+ </div>
372
+ <a href="https://huggingface.co/datasets/ministere-culture/comparia-preferences" class="dataset-button">Découvrir</a>
373
+ </div>
374
+ <div class="dataset-card">
375
+ <div class="dataset-icon">🫶</div>
376
+ <div class="dataset-title">comparIA-reactions</div>
377
+ <video controls autoplay loop muted playsinline src="https://cdn-uploads.huggingface.co/production/uploads/649d986a474bf415c03b772c/ncldPIO_bTesSd8bqcjqn.mp4"></video>
378
+ <div class="dataset-description">
379
+ Jeu de données regroupant les réactions des utilisateurs de compar:IA à l'échelle d'un message. Il reflète les préférences exprimées au fil des discussions, message par message.
380
+ </div>
381
+ <div class="dataset-metrics">
382
+ <div class="number">30k+</div>
383
+ <div class="label">réactions</div>
384
+ </div>
385
+ <a href="https://huggingface.co/datasets/ministere-culture/comparia-reactions" class="dataset-button">Découvrir</a>
386
+ </div>
387
+ </div>
388
+
389
+ Le comparateur compar:IA est développé dans le cadre de la start-up d'Etat compar:IA (incubateur de l'[Atelier numérique](https://www.culture.gouv.fr/Thematiques/innovation-numerique/Aides-a-l-innovation-et-a-la-transformation-numerique/L-Atelier-numerique#:~:text=L'Atelier%20num%C3%A9rique%20est%20l,engager%20personnellement%20pour%20le%20r%C3%A9soudre.) et [AllIAnce](https://alliance.numerique.gouv.fr/)) intégrée au programme [beta.gouv.fr](beta.gouv.fr) de la [Direction interministérielle du numérique (DINUM)](https://www.numerique.gouv.fr/dinum/) qui aide les administrations publiques à construire des services numériques utiles, simples et faciles à utiliser.
390
+
391
+ <img src="https://cdn-uploads.huggingface.co/production/uploads/649d986a474bf415c03b772c/Zk4YiqgKu9sm5ydQ7fhSq.png" alt="Beta.gouv.fr logo">
392
+
393
+ </div>