Hugging Face's logo

Spaces:
HuggingFaceTB
/
smol-training-playbook
Running on CPU Upgrade

App Files Community
13
tfrere HF Staff commited on
Commit
0e14448
·
1 Parent(s): 87a952c

update

Browse files
Files changed (7) hide show
  1. app/scripts/notion-importer/.notion-to-md/media/2421384e-bcac-800c-b22c-df0bb34c69f7_media.json +2 -2
  2. app/scripts/notion-importer/.notion-to-md/media/2421384e-bcac-80fb-aa7c-f939fc39269d_media.json +2 -2
  3. app/src/content/article.mdx +0 -0
  4. app/src/content/assets/image/{Capture_decran_2025-10-22_a_09_46_36_2941384e-bcac-80cc-af9d-d2ace91e56e8.png → Capture_decran_2025-10-24_a_12_14_09_2951384e-bcac-8045-a047-d10b3d124503.png} +2 -2
  5. app/src/content/assets/image/Capture_decran_2025-10-24_a_12_14_21_2951384e-bcac-80d5-afd9-e3495ce3164b.png +3 -0
  6. app/src/content/embeds/data-packing.html +331 -0
  7. app/src/content/embeds/input-labels-training.html +279 -0
app/scripts/notion-importer/.notion-to-md/media/2421384e-bcac-800c-b22c-df0bb34c69f7_media.json CHANGED
@@ -1,3 +1,3 @@
1
  version https://git-lfs.github.com/spec/v1
2
- oid sha256:648822eca6b2443739fc003f777539d2b714b859aedac172cb78c972fd9bee6a
3
- size 242451
 
1
  version https://git-lfs.github.com/spec/v1
2
+ oid sha256:d9feeed0f8903b4e105a81668305c8ff6529e8b2dd14f75af68a07c28269886a
3
+ size 242613
app/scripts/notion-importer/.notion-to-md/media/2421384e-bcac-80fb-aa7c-f939fc39269d_media.json CHANGED
@@ -1,3 +1,3 @@
1
  version https://git-lfs.github.com/spec/v1
2
- oid sha256:6e9895065abea37145132bf59d643fb85225a5071a4b1942060976e8ad4c5eb6
3
- size 61360
 
1
  version https://git-lfs.github.com/spec/v1
2
+ oid sha256:caa89ec1b62b1b78b4592c41d3b9997ed79e276d7169064572f88303a400c4e8
3
+ size 61500
app/src/content/article.mdx CHANGED
The diff for this file is too large to render. See raw diff
 
app/src/content/assets/image/{Capture_decran_2025-10-22_a_09_46_36_2941384e-bcac-80cc-af9d-d2ace91e56e8.png → Capture_decran_2025-10-24_a_12_14_09_2951384e-bcac-8045-a047-d10b3d124503.png} RENAMED
File without changes
app/src/content/assets/image/Capture_decran_2025-10-24_a_12_14_21_2951384e-bcac-80d5-afd9-e3495ce3164b.png ADDED

Git LFS Details

  • SHA256: 967a9aa76fe0b48df7a0b74521346b7cad1c7a4a0e1adea9f31e64d206f53d6e
  • Pointer size: 130 Bytes
  • Size of remote file: 97.5 kB
app/src/content/embeds/data-packing.html ADDED
@@ -0,0 +1,331 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Data Packing Visualization</title>
8
+ <style>
9
+ body {
10
+ font-family: 'Arial', sans-serif;
11
+ margin: 0;
12
+ padding: 20px;
13
+ background-color: #f5f5f5;
14
+ }
15
+
16
+ .container {
17
+ max-width: 1000px;
18
+ margin: 0 auto;
19
+ background: white;
20
+ border-radius: 10px;
21
+ padding: 30px;
22
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23
+ }
24
+
25
+ .section {
26
+ margin-bottom: 40px;
27
+ }
28
+
29
+ .section-title {
30
+ font-size: 24px;
31
+ font-weight: bold;
32
+ margin-bottom: 20px;
33
+ text-align: center;
34
+ color: #333;
35
+ }
36
+
37
+ .dataset {
38
+ display: flex;
39
+ flex-wrap: wrap;
40
+ gap: 3px;
41
+ justify-content: center;
42
+ margin-bottom: 20px;
43
+ }
44
+
45
+ .grid {
46
+ display: grid;
47
+ gap: 3px;
48
+ margin: 0 auto;
49
+ width: fit-content;
50
+ }
51
+
52
+ .block {
53
+ width: 30px;
54
+ height: 30px;
55
+ border: 2px solid #333;
56
+ border-radius: 4px;
57
+ display: flex;
58
+ align-items: center;
59
+ justify-content: center;
60
+ font-size: 10px;
61
+ font-weight: bold;
62
+ color: white;
63
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
64
+ }
65
+
66
+ .red {
67
+ background-color: #e74c3c;
68
+ }
69
+
70
+ .orange {
71
+ background-color: #f39c12;
72
+ }
73
+
74
+ .yellow {
75
+ background-color: #f1c40f;
76
+ }
77
+
78
+ .green {
79
+ background-color: #2ecc71;
80
+ }
81
+
82
+ .lightblue {
83
+ background-color: #3498db;
84
+ }
85
+
86
+ .blue {
87
+ background-color: #2980b9;
88
+ }
89
+
90
+ .purple {
91
+ background-color: #9b59b6;
92
+ }
93
+
94
+ .pink {
95
+ background-color: #e91e63;
96
+ }
97
+
98
+ .gray {
99
+ background-color: #bdc3c7;
100
+ }
101
+
102
+ .packing-false {
103
+ grid-template-columns: repeat(7, 1fr);
104
+ }
105
+
106
+ .packing-true {
107
+ grid-template-columns: repeat(7, 1fr);
108
+ }
109
+
110
+ .description {
111
+ text-align: center;
112
+ margin-top: 15px;
113
+ color: #666;
114
+ font-size: 14px;
115
+ }
116
+
117
+ .efficiency {
118
+ background: #ecf0f1;
119
+ padding: 15px;
120
+ border-radius: 8px;
121
+ margin-top: 20px;
122
+ text-align: center;
123
+ }
124
+
125
+ .efficiency h3 {
126
+ margin: 0 0 10px 0;
127
+ color: #2c3e50;
128
+ }
129
+
130
+ .efficiency p {
131
+ margin: 5px 0;
132
+ color: #34495e;
133
+ }
134
+ </style>
135
+ </head>
136
+
137
+ <body>
138
+ <div class="container">
139
+ <div class="section">
140
+ <h2 class="section-title">Dataset</h2>
141
+ <div class="dataset">
142
+ <!-- 7 red blocks -->
143
+ <div class="block red">R</div>
144
+ <div class="block red">R</div>
145
+ <div class="block red">R</div>
146
+ <div class="block red">R</div>
147
+ <div class="block red">R</div>
148
+ <div class="block red">R</div>
149
+ <div class="block red">R</div>
150
+ <!-- 3 orange blocks -->
151
+ <div class="block orange">O</div>
152
+ <div class="block orange">O</div>
153
+ <div class="block orange">O</div>
154
+ <!-- 4 yellow blocks -->
155
+ <div class="block yellow">Y</div>
156
+ <div class="block yellow">Y</div>
157
+ <div class="block yellow">Y</div>
158
+ <div class="block yellow">Y</div>
159
+ <!-- 7 green blocks -->
160
+ <div class="block green">G</div>
161
+ <div class="block green">G</div>
162
+ <div class="block green">G</div>
163
+ <div class="block green">G</div>
164
+ <div class="block green">G</div>
165
+ <div class="block green">G</div>
166
+ <div class="block green">G</div>
167
+ <!-- 10 light blue blocks -->
168
+ <div class="block lightblue">L</div>
169
+ <div class="block lightblue">L</div>
170
+ <div class="block lightblue">L</div>
171
+ <div class="block lightblue">L</div>
172
+ <div class="block lightblue">L</div>
173
+ <div class="block lightblue">L</div>
174
+ <div class="block lightblue">L</div>
175
+ <div class="block lightblue">L</div>
176
+ <div class="block lightblue">L</div>
177
+ <div class="block lightblue">L</div>
178
+ <!-- 3 blue blocks -->
179
+ <div class="block blue">B</div>
180
+ <div class="block blue">B</div>
181
+ <div class="block blue">B</div>
182
+ <!-- 5 purple blocks -->
183
+ <div class="block purple">P</div>
184
+ <div class="block purple">P</div>
185
+ <div class="block purple">P</div>
186
+ <div class="block purple">P</div>
187
+ <div class="block purple">P</div>
188
+ <!-- 3 pink blocks -->
189
+ <div class="block pink">K</div>
190
+ <div class="block pink">K</div>
191
+ <div class="block pink">K</div>
192
+ </div>
193
+ <div class="description">42 blocs de données non organisés</div>
194
+ </div>
195
+
196
+ <div class="section">
197
+ <h2 class="section-title">packing=False</h2>
198
+ <div class="grid packing-false">
199
+ <!-- Row 1: 7 red blocks -->
200
+ <div class="block red">R</div>
201
+ <div class="block red">R</div>
202
+ <div class="block red">R</div>
203
+ <div class="block red">R</div>
204
+ <div class="block red">R</div>
205
+ <div class="block red">R</div>
206
+ <div class="block red">R</div>
207
+ <!-- Row 2: 3 orange + 4 gray -->
208
+ <div class="block orange">O</div>
209
+ <div class="block orange">O</div>
210
+ <div class="block orange">O</div>
211
+ <div class="block gray">-</div>
212
+ <div class="block gray">-</div>
213
+ <div class="block gray">-</div>
214
+ <div class="block gray">-</div>
215
+ <!-- Row 3: 4 yellow + 3 gray -->
216
+ <div class="block yellow">Y</div>
217
+ <div class="block yellow">Y</div>
218
+ <div class="block yellow">Y</div>
219
+ <div class="block yellow">Y</div>
220
+ <div class="block gray">-</div>
221
+ <div class="block gray">-</div>
222
+ <div class="block gray">-</div>
223
+ <!-- Row 4: 7 green -->
224
+ <div class="block green">G</div>
225
+ <div class="block green">G</div>
226
+ <div class="block green">G</div>
227
+ <div class="block green">G</div>
228
+ <div class="block green">G</div>
229
+ <div class="block green">G</div>
230
+ <div class="block green">G</div>
231
+ <!-- Row 5: 7 light blue -->
232
+ <div class="block lightblue">L</div>
233
+ <div class="block lightblue">L</div>
234
+ <div class="block lightblue">L</div>
235
+ <div class="block lightblue">L</div>
236
+ <div class="block lightblue">L</div>
237
+ <div class="block lightblue">L</div>
238
+ <div class="block lightblue">L</div>
239
+ <!-- Row 6: 3 light blue + 4 gray -->
240
+ <div class="block lightblue">L</div>
241
+ <div class="block lightblue">L</div>
242
+ <div class="block lightblue">L</div>
243
+ <div class="block gray">-</div>
244
+ <div class="block gray">-</div>
245
+ <div class="block gray">-</div>
246
+ <div class="block gray">-</div>
247
+ <!-- Row 7: 3 blue + 4 gray -->
248
+ <div class="block blue">B</div>
249
+ <div class="block blue">B</div>
250
+ <div class="block blue">B</div>
251
+ <div class="block gray">-</div>
252
+ <div class="block gray">-</div>
253
+ <div class="block gray">-</div>
254
+ <div class="block gray">-</div>
255
+ <!-- Row 8: 5 purple + 2 gray -->
256
+ <div class="block purple">P</div>
257
+ <div class="block purple">P</div>
258
+ <div class="block purple">P</div>
259
+ <div class="block purple">P</div>
260
+ <div class="block purple">P</div>
261
+ <div class="block gray">-</div>
262
+ <div class="block gray">-</div>
263
+ </div>
264
+ <div class="description">Placement séquentiel avec espace perdu (17 cellules vides)</div>
265
+ </div>
266
+
267
+ <div class="section">
268
+ <h2 class="section-title">packing=True</h2>
269
+ <div class="grid packing-true">
270
+ <!-- Row 1: 7 light blue -->
271
+ <div class="block lightblue">L</div>
272
+ <div class="block lightblue">L</div>
273
+ <div class="block lightblue">L</div>
274
+ <div class="block lightblue">L</div>
275
+ <div class="block lightblue">L</div>
276
+ <div class="block lightblue">L</div>
277
+ <div class="block lightblue">L</div>
278
+ <!-- Row 2: 7 pink -->
279
+ <div class="block pink">K</div>
280
+ <div class="block pink">K</div>
281
+ <div class="block pink">K</div>
282
+ <div class="block pink">K</div>
283
+ <div class="block pink">K</div>
284
+ <div class="block pink">K</div>
285
+ <div class="block pink">K</div>
286
+ <!-- Row 3: 7 red -->
287
+ <div class="block red">R</div>
288
+ <div class="block red">R</div>
289
+ <div class="block red">R</div>
290
+ <div class="block red">R</div>
291
+ <div class="block red">R</div>
292
+ <div class="block red">R</div>
293
+ <div class="block red">R</div>
294
+ <!-- Row 4: 7 green -->
295
+ <div class="block green">G</div>
296
+ <div class="block green">G</div>
297
+ <div class="block green">G</div>
298
+ <div class="block green">G</div>
299
+ <div class="block green">G</div>
300
+ <div class="block green">G</div>
301
+ <div class="block green">G</div>
302
+ <!-- Row 5: 7 purple -->
303
+ <div class="block purple">P</div>
304
+ <div class="block purple">P</div>
305
+ <div class="block purple">P</div>
306
+ <div class="block purple">P</div>
307
+ <div class="block purple">P</div>
308
+ <div class="block purple">P</div>
309
+ <div class="block purple">P</div>
310
+ <!-- Row 6: 4 yellow + 3 orange -->
311
+ <div class="block yellow">Y</div>
312
+ <div class="block yellow">Y</div>
313
+ <div class="block yellow">Y</div>
314
+ <div class="block yellow">Y</div>
315
+ <div class="block orange">O</div>
316
+ <div class="block orange">O</div>
317
+ <div class="block orange">O</div>
318
+ </div>
319
+ <div class="description">Optimisation complète sans espace perdu (0 cellule vide)</div>
320
+ </div>
321
+
322
+ <div class="efficiency">
323
+ <h3>Efficacité du Packing</h3>
324
+ <p><strong>packing=False:</strong> 39 blocs utilisés / 56 cellules = 69.6% d'efficacité</p>
325
+ <p><strong>packing=True:</strong> 42 blocs utilisés / 42 cellules = 100% d'efficacité</p>
326
+ <p><strong>Gain:</strong> +30.4% d'efficacité et 14 cellules économisées</p>
327
+ </div>
328
+ </div>
329
+ </body>
330
+
331
+ </html>
app/src/content/embeds/input-labels-training.html ADDED
@@ -0,0 +1,279 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Input IDs and Labels Training Visualization</title>
8
+ <style>
9
+ body {
10
+ font-family: 'Arial', sans-serif;
11
+ margin: 0;
12
+ padding: 20px;
13
+ background-color: #f5f5f5;
14
+ }
15
+
16
+ .container {
17
+ max-width: 1200px;
18
+ margin: 0 auto;
19
+ background: white;
20
+ border-radius: 10px;
21
+ padding: 30px;
22
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
23
+ }
24
+
25
+ .title {
26
+ font-size: 28px;
27
+ font-weight: bold;
28
+ text-align: center;
29
+ margin-bottom: 30px;
30
+ color: #2c3e50;
31
+ }
32
+
33
+ .conversation-container {
34
+ display: flex;
35
+ flex-direction: column;
36
+ gap: 20px;
37
+ margin-bottom: 30px;
38
+ }
39
+
40
+ .row {
41
+ display: flex;
42
+ align-items: center;
43
+ gap: 20px;
44
+ }
45
+
46
+ .row-label {
47
+ font-size: 18px;
48
+ font-weight: bold;
49
+ min-width: 120px;
50
+ color: #34495e;
51
+ }
52
+
53
+ .tokens-container {
54
+ display: flex;
55
+ flex-wrap: wrap;
56
+ gap: 3px;
57
+ flex: 1;
58
+ }
59
+
60
+ .token {
61
+ width: 35px;
62
+ height: 35px;
63
+ border: 2px solid #333;
64
+ border-radius: 4px;
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ font-size: 10px;
69
+ font-weight: bold;
70
+ color: white;
71
+ text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
72
+ position: relative;
73
+ }
74
+
75
+ .user-token {
76
+ background-color: #e74c3c;
77
+ }
78
+
79
+ .assistant-token {
80
+ background-color: #27ae60;
81
+ }
82
+
83
+ .label-token {
84
+ background-color: #3498db;
85
+ }
86
+
87
+ .label-masked {
88
+ background: repeating-linear-gradient(45deg,
89
+ #3498db,
90
+ #3498db 3px,
91
+ #2980b9 3px,
92
+ #2980b9 6px);
93
+ }
94
+
95
+ .turn-label {
96
+ position: absolute;
97
+ top: -25px;
98
+ left: 50%;
99
+ transform: translateX(-50%);
100
+ font-size: 12px;
101
+ font-weight: bold;
102
+ color: #2c3e50;
103
+ background: white;
104
+ padding: 2px 6px;
105
+ border-radius: 3px;
106
+ border: 1px solid #bdc3c7;
107
+ }
108
+
109
+ .user-label {
110
+ color: #e74c3c;
111
+ }
112
+
113
+ .assistant-label {
114
+ color: #27ae60;
115
+ }
116
+
117
+ .explanation {
118
+ background: #ecf0f1;
119
+ padding: 20px;
120
+ border-radius: 8px;
121
+ margin-top: 20px;
122
+ }
123
+
124
+ .explanation h3 {
125
+ margin: 0 0 15px 0;
126
+ color: #2c3e50;
127
+ }
128
+
129
+ .explanation p {
130
+ margin: 8px 0;
131
+ color: #34495e;
132
+ line-height: 1.5;
133
+ }
134
+
135
+ .legend {
136
+ display: flex;
137
+ justify-content: center;
138
+ gap: 30px;
139
+ margin: 20px 0;
140
+ flex-wrap: wrap;
141
+ }
142
+
143
+ .legend-item {
144
+ display: flex;
145
+ align-items: center;
146
+ gap: 8px;
147
+ }
148
+
149
+ .legend-color {
150
+ width: 20px;
151
+ height: 20px;
152
+ border: 2px solid #333;
153
+ border-radius: 3px;
154
+ }
155
+
156
+ .legend-masked {
157
+ background: repeating-linear-gradient(45deg,
158
+ #3498db,
159
+ #3498db 2px,
160
+ #2980b9 2px,
161
+ #2980b9 4px);
162
+ }
163
+ </style>
164
+ </head>
165
+
166
+ <body>
167
+ <div class="container">
168
+ <h1 class="title">Input IDs et Labels dans l'Entraînement Conversationnel</h1>
169
+
170
+ <div class="legend">
171
+ <div class="legend-item">
172
+ <div class="legend-color user-token"></div>
173
+ <span>Tokens Utilisateur</span>
174
+ </div>
175
+ <div class="legend-item">
176
+ <div class="legend-color assistant-token"></div>
177
+ <span>Tokens Assistant</span>
178
+ </div>
179
+ <div class="legend-item">
180
+ <div class="legend-color label-token"></div>
181
+ <span>Labels Actifs</span>
182
+ </div>
183
+ <div class="legend-item">
184
+ <div class="legend-color legend-masked"></div>
185
+ <span>Labels Masqués (-100)</span>
186
+ </div>
187
+ </div>
188
+
189
+ <div class="conversation-container">
190
+ <div class="row">
191
+ <div class="row-label">input_ids</div>
192
+ <div class="tokens-container">
193
+ <!-- Premier tour utilisateur -->
194
+ <div class="token user-token">
195
+ <div class="turn-label user-label">user</div>
196
+ U1
197
+ </div>
198
+ <div class="token user-token">U2</div>
199
+ <div class="token user-token">U3</div>
200
+ <div class="token user-token">U4</div>
201
+ <div class="token user-token">U5</div>
202
+
203
+ <!-- Premier tour assistant -->
204
+ <div class="token assistant-token">
205
+ <div class="turn-label assistant-label">assistant</div>
206
+ A1
207
+ </div>
208
+ <div class="token assistant-token">A2</div>
209
+ <div class="token assistant-token">A3</div>
210
+ <div class="token assistant-token">A4</div>
211
+
212
+ <!-- Deuxième tour utilisateur -->
213
+ <div class="token user-token">
214
+ <div class="turn-label user-label">user</div>
215
+ U6
216
+ </div>
217
+ <div class="token user-token">U7</div>
218
+ <div class="token user-token">U8</div>
219
+ <div class="token user-token">U9</div>
220
+ <div class="token user-token">U10</div>
221
+
222
+ <!-- Deuxième tour assistant -->
223
+ <div class="token assistant-token">
224
+ <div class="turn-label assistant-label">assistant</div>
225
+ A5
226
+ </div>
227
+ <div class="token assistant-token">A6</div>
228
+ <div class="token assistant-token">A7</div>
229
+ <div class="token assistant-token">A8</div>
230
+ </div>
231
+ </div>
232
+
233
+ <div class="row">
234
+ <div class="row-label">labels</div>
235
+ <div class="tokens-container">
236
+ <!-- Labels masqués pour premier tour utilisateur -->
237
+ <div class="token label-masked">-100</div>
238
+ <div class="token label-masked">-100</div>
239
+ <div class="token label-masked">-100</div>
240
+ <div class="token label-masked">-100</div>
241
+ <div class="token label-masked">-100</div>
242
+
243
+ <!-- Labels actifs pour premier tour assistant -->
244
+ <div class="token label-token">A1</div>
245
+ <div class="token label-token">A2</div>
246
+ <div class="token label-token">A3</div>
247
+ <div class="token label-token">A4</div>
248
+
249
+ <!-- Labels masqués pour deuxième tour utilisateur -->
250
+ <div class="token label-masked">-100</div>
251
+ <div class="token label-masked">-100</div>
252
+ <div class="token label-masked">-100</div>
253
+ <div class="token label-masked">-100</div>
254
+ <div class="token label-masked">-100</div>
255
+
256
+ <!-- Labels actifs pour deuxième tour assistant -->
257
+ <div class="token label-token">A5</div>
258
+ <div class="token label-token">A6</div>
259
+ <div class="token label-token">A7</div>
260
+ <div class="token label-token">A8</div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <div class="explanation">
266
+ <h3>Comment ça fonctionne :</h3>
267
+ <p><strong>input_ids :</strong> Séquence complète des tokens d'entrée (utilisateur + assistant)</p>
268
+ <p><strong>labels :</strong> Tokens cibles pour l'entraînement</p>
269
+ <p><strong>Labels masqués (-100) :</strong> Les tokens utilisateur sont masqués car le modèle ne doit pas
270
+ apprendre à les prédire</p>
271
+ <p><strong>Labels actifs :</strong> Seuls les tokens de l'assistant sont utilisés pour calculer la perte
272
+ d'entraînement</p>
273
+ <p><strong>Objectif :</strong> Le modèle apprend à générer des réponses d'assistant cohérentes en se basant
274
+ sur le contexte utilisateur</p>
275
+ </div>
276
+ </div>
277
+ </body>
278
+
279
+ </html>