update

.gitattributes

@@ -7,6 +7,7 @@
 *.gz filter=lfs diff=lfs merge=lfs -text
 *.h5 filter=lfs diff=lfs merge=lfs -text
 *.joblib filter=lfs diff=lfs merge=lfs -text
+*.jpeg filter=lfs diff=lfs merge=lfs -text
 *.lfs.* filter=lfs diff=lfs merge=lfs -text
 *.mlmodel filter=lfs diff=lfs merge=lfs -text
 *.model filter=lfs diff=lfs merge=lfs -text
@@ -19,6 +20,7 @@
 *.pb filter=lfs diff=lfs merge=lfs -text
 *.pickle filter=lfs diff=lfs merge=lfs -text
 *.pkl filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text
 *.pt filter=lfs diff=lfs merge=lfs -text
 *.pth filter=lfs diff=lfs merge=lfs -text
 *.rar filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,5 @@
+node_modules/
+*.log
+*.env
+*.cache
+python/**/__pycache__

README.md

@@ -12,3 +12,18 @@ thumbnail: https://huggingface.co/spaces/HuggingFaceFW/blogpost-fineweb-v1/resol
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+
+Instruction to install and run locally
+
+```bash
+npm install
+npm run build
+npm run dev
+
+// If you want to change something change it in src/....
+
+// Once you are finished
+npm run build
+// And commit the dist folder
+```

assets/data/clustering/info.csv

@@ -0,0 +1,106 @@
+,cluster_id,cluster_summaries,cluster_position_x,cluster_position_y
+0,-1,None,9.926462,4.7121987
+1,0,Philosophical/Spiritual Introspection,10.312462,1.2666532
+2,1,"Scholarships,",8.167274,4.8995786
+3,2,Politics,8.81142,2.4859838
+4,3,Theology,9.615214,0.3783942
+5,4,Dating,4.985182,1.8439052
+6,5,Accommodation,11.457769,5.080919
+7,6,Football,6.6154537,-1.6859366
+8,7,Film Festival,6.9734483,1.4548192
+9,8,Culinary,13.426296,4.5412893
+10,9,Music,6.0653744,0.7536916
+11,10,Gambling,3.124241,3.2533677
+12,11,Baseball,7.133596,-2.4256644
+13,12,Technology,6.4929094,6.768577
+14,13,Website Policies,4.873843,5.771508
+15,14,Weddings,11.815845,3.7894728
+16,15,Gaming,5.529167,2.9530518
+17,16,Commodities/Services Provision,10.453564,5.8489122
+18,17,Crafts,13.287651,6.4237967
+19,18,Automobiles,9.9531145,8.840178
+20,19,Watches,13.893139,9.859185
+21,20,Dogs,12.595798,3.5351615
+22,21,Photography,10.7942295,3.5504062
+23,22,Legalities,8.942016,4.72733
+24,23,Consumer Electronics,7.078649,8.338984
+25,24,Insulation,10.520957,7.914946
+26,25,Cannabis,14.317424,3.2114828
+27,26,Footwear,15.052116,7.6956415
+28,27,Real Estate,9.536316,6.103533
+29,28,Relocation,10.205071,7.1883316
+30,29,Sports betting,3.2779586,2.443366
+31,30,Narratives,7.613535,1.8300554
+32,31,Dating,4.788838,2.1900373
+33,32,Apparel/Clothing,14.394226,7.3073387
+34,33,User Authentication,5.265638,6.4014487
+35,34,Academicwriting,6.9187264,3.4357684
+36,35,Sports,7.4969172,-2.086585
+37,36,Fashion/Lifestyle Products,13.821669,7.7150764
+38,37,Diverse events,9.437052,2.2438836
+39,38,Blockchain/Cryptocurrency,7.7586045,6.9439344
+40,39,Online Businesses/Marketing,6.522259,5.219268
+41,40,Healthcare,11.425277,2.3801014
+42,41,Home Decor,12.878046,7.2632184
+43,42,Biomedicine,12.789575,2.3376262
+44,43,Jewelry,14.259997,8.653363
+45,44,Addiction,11.561383,1.3774762
+46,45,Products,11.711758,8.423251
+47,46,Multi-purposefulness,11.080702,7.4574013
+48,47,"Mass transit,",9.910158,5.4402313
+49,48,Ethernet,6.9763823,7.7909245
+50,49,Legal,9.516912,4.636553
+51,50,E-commerce,13.263438,8.6548195
+52,51,Audio,7.717162,8.903019
+53,52,Infrastructure,10.52904,5.369669
+54,53,Firearms,11.062812,9.268473
+55,54,Freight/Logistics,9.551044,7.0336204
+56,55,Products,12.073747,7.645973
+57,56,Vaccinations,11.9387045,2.7824683
+58,57,Artwork,11.019163,4.1677165
+59,58,Viticulture,14.223523,5.0761614
+60,59,WordPress,5.9597983,5.824579
+61,60,Cosmetics/Dermatology,15.093273,3.4669027
+62,61,Software,6.375921,6.4298844
+63,62,Dentistry,14.76626,1.1620314
+64,63,Pest Control,13.201735,3.6806118
+65,64,SEO,5.720493,5.238112
+66,65,Lottery,1.7142816,2.9782674
+67,66,Narratives,8.460977,1.0804662
+68,67,Waste Reduction & Recycling,10.634534,6.959523
+69,68,Communication,6.438943,5.9467845
+70,69,Orthopedics,13.005415,1.1908791
+71,70,Home Decor & Furniture,12.732457,7.876862
+72,71,Education,7.6568975,3.4944353
+73,72,Sports,7.295141,-0.7343214
+74,73,Social Media Advertising,6.133886,4.8547883
+75,74,Privacy,4.756733,6.3598356
+76,75,Website design,6.1168823,5.465095
+77,76,Roofing,11.389448,8.080609
+78,77,Nutrition/Supplements,13.631578,2.5334294
+79,78,Haircare/Hairstyling,15.544645,4.54254
+80,79,Cookies,4.341592,6.819268
+81,80,International Trade,8.993828,6.4757586
+82,81,Entrepreneurial Resources,9.435777,5.3340797
+83,82,Cricket,6.5171986,-1.245905
+84,83,Crafts,13.852216,7.049825
+85,84,Floristry,13.407425,5.8741536
+86,85,Genealogy,9.530803,1.6548243
+87,86,Mental Health,11.074349,1.6069281
+88,87,Volunteerism,10.145443,3.6734574
+89,88,Lighting,11.385381,8.93693
+90,89,Artificial Intelligence,6.5306387,6.2178063
+91,90,Business,7.471462,6.4142885
+92,91,E-commerce,13.638669,6.5098934
+93,92,Urbanization/Over-tourism,10.221115,6.100654
+94,93,Events,10.8449,3.9822264
+95,94,Pharmaceuticals/Biotechnology,12.318266,2.4331784
+96,95,Professional Wrestling,6.856304,-0.65598303
+97,96,Various,9.3211975,3.4894605
+98,97,Medicine,13.17882,2.1281319
+99,98,Community Engagement,9.848856,3.5187004
+100,99,Fitness,12.504849,0.9134393
+101,100,Bathroom Design & Toilet Engineering,11.779076,7.2920136
+102,101,Business Development,7.328447,5.659843
+103,102,Sports,7.6370654,-1.0701839
+104,103,Sexuality,13.817207,1.6510898

assets/data/plots/all_dumps_bad/agg_score.json

@@ -0,0 +1 @@
+{"data": {"big-run-refinedweb": {"x": [0.0, 2.0971520000000003, 4.194304000000001, 6.291456, 8.388608000000001, 10.48576, 12.582912, 14.680064000000002, 16.777216000000003, 18.874368, 20.97152, 23.068672000000003, 25.165824, 27.262976000000002, 28.311552000000002, 29.360128000000003, 31.45728, 33.554432000000006, 35.651584, 37.748736, 39.845888, 41.94304, 44.040192000000005, 46.137344000000006, 48.234496, 50.331648, 52.4288, 54.525952000000004, 56.623104000000005, 58.720256000000006, 60.817408, 62.91456, 65.011712, 67.10886400000001, 69.206016, 71.303168, 73.40032000000001, 75.497472, 77.59462400000001, 79.691776, 81.788928, 83.88608, 85.983232, 88.08038400000001, 90.177536, 92.27468800000001, 94.37184, 96.468992, 98.56614400000001, 100.663296, 102.76044800000001, 104.8576, 106.95475200000001, 109.05190400000001, 111.149056, 113.24620800000001, 115.34336, 117.44051200000001, 119.537664, 121.634816, 123.73196800000001, 125.82912, 127.92627200000001, 130.023424, 132.120576, 134.21772800000002, 136.31488000000002, 138.412032, 140.509184, 142.606336, 144.70348800000002, 146.80064000000002, 148.897792, 150.994944, 153.092096, 155.18924800000002, 157.28640000000001, 159.383552, 161.480704, 163.577856, 165.67500800000002, 167.77216, 169.869312, 171.966464, 174.06361600000002, 176.16076800000002, 178.25792, 180.355072, 182.452224, 184.54937600000002, 186.64652800000002, 188.74368, 190.840832, 192.937984, 195.03513600000002, 197.13228800000002, 199.22944, 201.326592, 203.423744, 205.52089600000002, 207.61804800000002, 209.7152, 211.812352, 213.90950400000003, 216.00665600000002, 218.10380800000001, 220.20096, 222.298112, 224.39526400000003, 226.49241600000002, 228.589568, 230.68672, 232.783872, 234.88102400000002, 236.97817600000002, 239.075328, 241.17248, 243.269632, 245.36678400000002, 247.46393600000002, 249.561088, 251.65824, 253.75539200000003, 255.85254400000002, 257.949696, 260.046848, 262.144, 264.241152, 266.338304, 268.43545600000004, 270.53260800000004, 272.62976000000003, 274.726912, 276.824064, 278.921216, 281.018368, 283.11552, 285.212672, 287.309824, 289.40697600000004, 291.50412800000004, 293.60128000000003, 295.698432, 297.795584, 299.892736, 301.989888, 304.08704, 306.184192, 308.28134400000005, 310.37849600000004, 312.47564800000004, 314.57280000000003, 316.669952, 318.767104, 320.864256, 322.961408, 325.05856, 327.155712, 329.25286400000005, 331.35001600000004, 333.44716800000003, 335.54432, 337.641472, 339.738624, 341.835776, 343.932928, 346.03008, 348.12723200000005, 350.22438400000004], "y": [0.3308933284133672, 0.3534814938902855, 0.3764607086777687, 0.38782499730587, 0.3981050960719585, 0.4028486795723438, 0.4125883243978023, 0.4117814563214779, 0.414029736071825, 0.4197172522544861, 0.4211113378405571, 0.4279881417751312, 0.4280137903988361, 0.4280424378812313, 0.4291964024305343, 0.4326301179826259, 0.4371833503246307, 0.4346669465303421, 0.4336562640964985, 0.4432648755609989, 0.4401291646063328, 0.4394684173166752, 0.4476612061262131, 0.4465444348752498, 0.4472153298556804, 0.4433343075215816, 0.4510187618434429, 0.4459567815065384, 0.4460812956094742, 0.4498684890568256, 0.4529943652451038, 0.4528274349868297, 0.4551213420927524, 0.4549156539142132, 0.4564928151667118, 0.4576693661510944, 0.4557182416319847, 0.4536240361630916, 0.457439012825489, 0.4570476822555065, 0.4589823484420776, 0.462024375796318, 0.4540738053619861, 0.4550252184271812, 0.4576593860983848, 0.4573238864541054, 0.4575810581445694, 0.4622134491801262, 0.4592566937208175, 0.4614734016358852, 0.4637473002076149, 0.4625372551381588, 0.4613912180066108, 0.4597448222339153, 0.4594792164862156, 0.4662549719214439, 0.4634026065468788, 0.4633508697152138, 0.4635734222829342, 0.4628961533308029, 0.4670135043561458, 0.4639505892992019, 0.4631133340299129, 0.4665167145431041, 0.4672448337078094, 0.4693268723785877, 0.4630668573081493, 0.4676454700529575, 0.4646359197795391, 0.4621579721570015, 0.4692446552217006, 0.4704835228621959, 0.4663223996758461, 0.4680556617677212, 0.466339822858572, 0.4682099223136902, 0.4711195565760135, 0.4722655527293682, 0.4727961830794811, 0.4676857478916645, 0.4719390422105789, 0.4713102728128433, 0.4712141714990139, 0.4721613004803657, 0.4713456854224205, 0.4682970903813839, 0.4679934531450271, 0.4685162976384163, 0.4679946713149547, 0.4681242071092129, 0.4702276065945625, 0.472664151340723, 0.4730790853500366, 0.4731674715876579, 0.4718914777040481, 0.4719801284372806, 0.4761029370129108, 0.4735167175531387, 0.4730370938777923, 0.4730173237621784, 0.4735377207398414, 0.4777223989367485, 0.4796326830983162, 0.4734170883893966, 0.4739485755562782, 0.4748299159109592, 0.4765299335122108, 0.4745025858283043, 0.4754423759877682, 0.4784592799842357, 0.4761341325938701, 0.4760282784700393, 0.4769757278263569, 0.47154351323843, 0.4786738082766533, 0.4804279990494251, 0.4777076803147793, 0.4798569902777672, 0.4759011939167976, 0.4784621745347976, 0.479673832654953, 0.4780617095530033, 0.48076206818223, 0.47995800152421, 0.4790860973298549, 0.4817167408764362, 0.4811586998403072, 0.482547752559185, 0.4816697351634502, 0.4809327870607376, 0.4816545359790325, 0.4804601892828941, 0.4776877984404564, 0.4813711903989315, 0.4844604581594467, 0.4819537848234176, 0.4820829331874847, 0.4778126627206802, 0.482935007661581, 0.48230691999197, 0.4826001971960068, 0.4823969900608063, 0.4811219945549965, 0.4789146520197391, 0.484035175293684, 0.4848698377609253, 0.4855728335678577, 0.4825376532971859, 0.485215101391077, 0.4824351668357849, 0.4835342466831207, 0.4822137206792831, 0.4838785007596016, 0.4837255179882049, 0.4853012599050998, 0.4857851006090641, 0.4863366298377514, 0.4856646582484245, 0.4842503517866134, 0.4838776960968971, 0.4846346862614155, 0.4837041422724724, 0.4813097268342972, 0.4873070046305656, 0.4841253720223903, 0.4837464913725853, 0.483069509267807, 0.4851242564618587, 0.4861010462045669], "label": "RefinedWeb"}, "big-run-sampled_full_filtered_no_dedup": {"x": [0.0, 2.0971520000000003, 4.194304000000001, 6.291456, 8.388608000000001, 10.48576, 12.582912, 14.680064000000002, 16.777216000000003, 18.874368, 20.97152, 23.068672000000003, 25.165824, 27.262976000000002, 28.311552000000002, 29.360128000000003, 31.45728, 33.554432000000006, 35.651584, 37.748736, 39.845888, 41.94304, 44.040192000000005, 46.137344000000006, 48.234496, 50.331648, 52.4288, 54.525952000000004, 56.623104000000005, 58.720256000000006, 60.817408, 62.91456, 65.011712, 67.10886400000001, 69.206016, 71.303168, 73.40032000000001, 75.497472, 77.59462400000001, 79.691776, 81.788928, 83.88608, 85.983232, 88.08038400000001, 90.177536, 92.27468800000001, 94.37184, 96.468992, 98.56614400000001, 100.663296, 102.76044800000001, 104.8576, 106.95475200000001, 109.05190400000001, 111.149056, 113.24620800000001, 115.34336, 117.44051200000001, 119.537664, 121.634816, 123.73196800000001, 125.82912, 127.92627200000001, 130.023424, 132.120576, 134.21772800000002, 136.31488000000002, 138.412032, 140.509184, 142.606336, 144.70348800000002, 146.80064000000002, 148.897792, 150.994944, 153.092096, 155.18924800000002, 157.28640000000001, 159.383552, 161.480704, 163.577856, 165.67500800000002, 167.77216, 169.869312, 171.966464, 174.06361600000002, 176.16076800000002, 178.25792, 180.355072, 182.452224, 184.54937600000002, 186.64652800000002, 188.74368, 190.840832, 192.937984, 195.03513600000002, 197.13228800000002, 199.22944, 201.326592, 203.423744, 205.52089600000002, 207.61804800000002, 209.7152, 211.812352, 213.90950400000003, 216.00665600000002, 218.10380800000001, 220.20096, 222.298112, 224.39526400000003, 226.49241600000002, 228.589568, 230.68672, 232.783872, 234.88102400000002, 236.97817600000002, 239.075328, 241.17248, 243.269632, 245.36678400000002, 247.46393600000002, 249.561088, 251.65824, 253.75539200000003, 255.85254400000002, 257.949696, 260.046848, 262.144, 264.241152, 266.338304, 268.43545600000004, 270.53260800000004, 272.62976000000003, 274.726912, 276.824064, 278.921216, 281.018368, 283.11552, 285.212672, 287.309824, 289.40697600000004, 291.50412800000004, 293.60128000000003, 295.698432, 297.795584, 299.892736, 301.989888, 304.08704, 306.184192, 308.28134400000005, 310.37849600000004, 312.47564800000004, 314.57280000000003, 316.669952, 318.767104, 320.864256, 322.961408, 325.05856, 327.155712, 329.25286400000005, 331.35001600000004, 333.44716800000003, 335.54432, 337.641472, 339.738624, 341.835776, 343.932928, 346.03008, 348.12723200000005, 350.22438400000004], "y": [0.3308933284133672, 0.3605199865996837, 0.3733148723840713, 0.3882005847990513, 0.3934122696518898, 0.3947227671742439, 0.4042885974049568, 0.3974800482392311, 0.4055779427289963, 0.4133470430970192, 0.4117913842201233, 0.4113653488457203, 0.4149517640471458, 0.4187851920723915, 0.4252083078026771, 0.4206527359783649, 0.4240428246557712, 0.422003373503685, 0.4280910938978195, 0.4244147576391697, 0.4316282644867897, 0.4295645765960216, 0.4310102686285972, 0.4360743537545204, 0.4313482865691185, 0.4350991360843181, 0.4378576353192329, 0.4335876516997814, 0.4347924515604973, 0.4348904751241207, 0.436600212007761, 0.430036511272192, 0.4350974671542644, 0.4399556629359722, 0.4371416717767715, 0.4363861419260502, 0.4376698136329651, 0.4405004419386387, 0.4373639523983001, 0.4379038028419018, 0.4371281825006008, 0.4393439553678036, 0.440426729619503, 0.4401675276458263, 0.4429537951946258, 0.4449137263000011, 0.4434786736965179, 0.4450470842421055, 0.4454202279448509, 0.4394537284970283, 0.442185215651989, 0.4461225643754005, 0.4427758157253265, 0.4430646039545536, 0.4476901069283485, 0.4478763341903686, 0.4493869319558143, 0.4448477327823639, 0.450044184923172, 0.4498609118163585, 0.4457665979862213, 0.4506924152374267, 0.449855338782072, 0.448790930211544, 0.4474099352955818, 0.4546772800385952, 0.4529431238770485, 0.452015146613121, 0.4502020999789238, 0.4493804536759853, 0.4523266032338142, 0.4551868587732315, 0.4501944817602634, 0.4493303671479225, 0.4526805207133293, 0.4533850513398647, 0.4518048763275146, 0.4518973492085933, 0.4531301632523536, 0.4518006071448326, 0.4553494565188885, 0.4528752230107784, 0.4536322727799415, 0.4561733976006508, 0.4549491256475448, 0.4574789106845855, 0.4577847123146057, 0.4563642293214798, 0.4578686729073524, 0.4561499990522861, 0.4537816494703293, 0.4542164430022239, 0.4559455662965774, 0.4554723873734474, 0.4575514122843742, 0.4575202167034149, 0.4592722058296203, 0.4585275091230869, 0.4580587856471538, 0.456934317946434, 0.4577495418488979, 0.4540119916200638, 0.4570806957781315, 0.4608120545744896, 0.4588425755500793, 0.4578334167599678, 0.4610816091299057, 0.4598177038133144, 0.461849745362997, 0.4631866924464702, 0.4601576402783394, 0.4646804705262184, 0.4632389545440674, 0.4604574106633663, 0.4602976888418197, 0.4581312239170074, 0.4654182009398937, 0.4655338563024997, 0.4616620391607284, 0.461054053157568, 0.4613021649420261, 0.4658613465726375, 0.4633531905710697, 0.4613638147711754, 0.4643996246159076, 0.462500050663948, 0.4650798961520195, 0.4648764543235302, 0.4639869071543216, 0.4634246975183487, 0.46585888043046, 0.4639799632132053, 0.4630857892334461, 0.4644265696406364, 0.4642998576164245, 0.4686848931014538, 0.4687492996454239, 0.4650243632495403, 0.4627032242715359, 0.4665953740477562, 0.4660026729106903, 0.4664581045508384, 0.4676475040614605, 0.4657339677214622, 0.4664678275585174, 0.4673498086631298, 0.4676674827933311, 0.4680955372750759, 0.4681585058569908, 0.4659864418208599, 0.4686457589268684, 0.4661462865769863, 0.4658931568264961, 0.4674226939678192, 0.46805215254426, 0.4682257212698459, 0.4689070098102093, 0.4699570722877979, 0.4655096270143986, 0.4688013233244419, 0.4707522802054882, 0.4661469310522079, 0.4688841328024864, 0.4671329781413078, 0.4662554152309894, 0.4697433896362781, 0.4698473587632179, 0.4676505327224731, 0.4696521013975143], "label": "FineWeb filtered only"}, "big-run-fineweb-cross-dedup-fixed": {"x": [0.0, 2.0971520000000003, 4.194304000000001, 6.291456, 8.388608000000001, 10.48576, 12.582912, 14.680064000000002, 16.777216000000003, 18.874368, 20.97152, 23.068672000000003, 25.165824, 27.262976000000002, 29.360128000000003, 31.45728, 33.554432000000006, 35.651584, 37.748736, 39.845888, 41.94304, 44.040192000000005, 46.137344000000006, 48.234496, 50.331648, 52.4288, 54.525952000000004, 56.623104000000005, 58.720256000000006, 60.817408, 62.91456, 65.011712, 67.10886400000001, 69.206016, 71.303168, 73.40032000000001, 75.497472, 77.59462400000001, 79.691776, 81.788928, 83.88608, 85.983232, 88.08038400000001, 90.177536, 92.27468800000001, 94.37184, 96.468992, 98.56614400000001, 100.663296, 102.76044800000001, 104.8576, 106.95475200000001, 109.05190400000001, 111.149056, 113.24620800000001, 115.34336, 117.44051200000001, 119.537664, 121.634816, 123.73196800000001, 125.82912, 127.92627200000001, 130.023424, 132.120576, 134.21772800000002, 136.31488000000002, 138.412032, 140.509184, 142.606336, 144.70348800000002, 146.80064000000002, 148.897792, 150.994944, 153.092096, 155.18924800000002, 157.28640000000001, 159.383552, 161.480704, 163.577856, 165.67500800000002, 167.77216, 169.869312, 171.966464, 174.06361600000002, 176.16076800000002, 178.25792, 180.355072, 182.452224, 184.54937600000002, 186.64652800000002, 188.74368, 190.840832, 192.937984, 195.03513600000002, 197.13228800000002, 199.22944, 201.326592, 203.423744, 205.52089600000002, 207.61804800000002, 209.7152, 211.812352, 213.90950400000003, 216.00665600000002, 218.10380800000001, 220.20096, 222.298112, 224.39526400000003, 226.49241600000002, 228.589568, 230.68672, 232.783872, 234.88102400000002, 236.97817600000002, 239.075328, 241.17248, 243.269632, 245.36678400000002, 247.46393600000002, 249.561088, 251.65824, 253.75539200000003, 255.85254400000002, 257.949696, 260.046848, 262.144, 264.241152, 266.338304, 268.43545600000004, 270.53260800000004, 272.62976000000003, 274.726912, 276.824064, 278.921216, 281.018368, 283.11552, 285.212672, 287.309824, 289.40697600000004, 291.50412800000004, 293.60128000000003, 295.698432, 297.795584, 299.892736, 301.989888, 304.08704, 306.184192, 308.28134400000005, 310.37849600000004, 312.47564800000004, 314.57280000000003, 316.669952, 318.767104, 320.864256, 322.961408, 325.05856, 327.155712, 329.25286400000005, 331.35001600000004, 333.44716800000003, 335.54432, 337.641472, 339.738624, 341.835776, 343.932928, 346.03008, 348.12723200000005, 350.22438400000004], "y": [0.3308933284133672, 0.3551952373236418, 0.3736435137689113, 0.3814037963747978, 0.3948809280991554, 0.3996850810945034, 0.4089604057371616, 0.4100853353738785, 0.4119834117591381, 0.4168377220630646, 0.4186493046581745, 0.4169826358556747, 0.4234288297593593, 0.4229162000119686, 0.4273439794778824, 0.4290364980697632, 0.4291782416403293, 0.4296907968819141, 0.4311576783657074, 0.4326641112565994, 0.430318683385849, 0.430436260998249, 0.4339037239551544, 0.4363459683954716, 0.4357402548193931, 0.4342963136732578, 0.4366712383925915, 0.4363959729671478, 0.436981026083231, 0.4447868093848228, 0.4411709941923618, 0.4406092017889023, 0.4424176625907421, 0.4423875361680984, 0.4422253370285034, 0.4410557933151722, 0.4447037056088447, 0.4454837813973427, 0.4435960277915001, 0.4468514993786812, 0.4479999616742134, 0.4428562931716442, 0.445764634758234, 0.4456562362611294, 0.4488007053732872, 0.4475954286754131, 0.4468922987580299, 0.4548408314585686, 0.4511027485132217, 0.4530330970883369, 0.4483681954443455, 0.4531726539134979, 0.45334542542696, 0.4544384703040123, 0.4530758671462536, 0.4540613554418087, 0.4510113634169101, 0.4538320265710354, 0.4518541917204857, 0.4536847211420536, 0.4532708041369915, 0.4552236869931221, 0.455034039914608, 0.4562875479459762, 0.4532428197562694, 0.4574853852391243, 0.4517738744616508, 0.4579889141023159, 0.4538268558681011, 0.456730306148529, 0.4526018649339676, 0.4562746733427048, 0.4560015797615051, 0.4555426277220249, 0.4561501257121563, 0.4524396173655987, 0.4557023830711841, 0.4589769169688225, 0.4581078588962555, 0.4620813727378845, 0.4586601965129375, 0.4568093195557594, 0.4569808952510357, 0.4567535072565079, 0.4575250148773193, 0.4606908001005649, 0.4603964723646641, 0.4622848592698574, 0.4594669193029403, 0.4640629850327968, 0.4604269936680794, 0.4634841009974479, 0.4644578285515308, 0.4642514958977699, 0.4666304066777229, 0.4616626128554344, 0.4588956907391548, 0.4620226770639419, 0.4628621749579906, 0.4595407098531723, 0.4635516740381717, 0.46005355194211, 0.4601523540914058, 0.4644204638898372, 0.4620639197528362, 0.46614545956254, 0.4636696502566337, 0.4610077403485775, 0.4640897810459137, 0.4636163525283336, 0.4630545899271965, 0.466012816876173, 0.4650349207222461, 0.4613720141351223, 0.4644323363900184, 0.4647249802947044, 0.4656480401754379, 0.4651664271950722, 0.4622530452907085, 0.4655019529163837, 0.4650313258171081, 0.466718140989542, 0.4661559611558914, 0.4661237150430679, 0.4664223715662956, 0.4640601389110088, 0.4642657749354839, 0.4633881188929081, 0.4629989042878151, 0.4685831367969513, 0.4675870984792709, 0.467183344066143, 0.4678030684590339, 0.4660939238965511, 0.4691914953291416, 0.4670972637832165, 0.468262892216444, 0.4672016054391861, 0.4676182121038437, 0.4698677137494087, 0.4658828042447567, 0.4701816700398922, 0.4684622809290886, 0.466015312820673, 0.4675401039421558, 0.4693200923502445, 0.4702670983970165, 0.4679145030677318, 0.4676233418285846, 0.4674933589994907, 0.4678357951343059, 0.4669915996491909, 0.4657857678830623, 0.4666901864111423, 0.4669371582567692, 0.4672787226736545, 0.4684535376727581, 0.4685697965323925, 0.4694835692644119, 0.4683254994451999, 0.4712230190634727, 0.4683987610042095, 0.4707653746008873, 0.4663059376180172, 0.4683133698999882, 0.4686385430395603, 0.4657671600580215, 0.4692615270614624], "label": "FineWeb full MinHash"}}, "layout": {"title": {"text": "Dedup across all dumps does not improve performance"}}}

dist/bibliography.bib

@@ -1,5 +0,0 @@
-@article{radford2019language,
-  title={Language Models are Unsupervised Multitask Learners},
-  author={Radford, Alec and Wu, Jeff and Child, Rewon and Luan, David and Amodei, Dario and Sutskever, Ilya},
-  year={2019}
-}

dist/index.html

@@ -1,121 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <script src="distill.bundle.js" type="module" fetchpriority="high" blocking></script>
-    <script src="main.bundle.js" type="module" fetchpriority="low" defer></script>
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta charset="utf8">
-    <base target="_blank">
-    <title>FineWeb: decanting the web for the finest text data at scale</title>
-    <link rel="stylesheet" href="style.css">
-</head>
-
-<body>
-<d-front-matter>
-    <script id='distill-front-matter' type="text/json">{
-    "title": "Nanotron Gigablogpost",
-    "description": "This blog covers everything.",
-    "published": "May 28, 2024",
-    "affiliation": {"name": "HuggingFace"},
-    "authors": [
-      {
-        "author":"John Doe",
-        "authorURL":"https://huggingface.co/"
-      },
-    ],
-    "katex": {
-      "delimiters": [
-        {"left": "$$", "right": "$$", "display": false}
-      ]
-    }
-  }
-    </script>
-</d-front-matter>
-<d-title>
-    <h1 class="l-page" style="text-align: center;">Nanotron Gigablogpost</h1>
-    <div id="title-plot" class="main-plot-container l-screen">
-        <figure>
-            <img src="assets/images/banner.png" alt="FineWeb">
-        </figure>
-        <div id="clusters-plot">
-            <img src="assets/images/clusters.png" alt="Clusters">
-        </div>
-    </div>
-</d-title>
-<d-byline></d-byline>
-<d-article>
-    <d-contents>
-    </d-contents>
-
-    <p>The performance of a large language model (LLM) depends heavily on the quality and size of its pretraining framework.</p>
-</d-article>
-
-<d-appendix>
-    <d-bibliography src="bibliography.bib"></d-bibliography>
-</d-appendix>
-
-<script>
-    const article = document.querySelector('d-article');
-    const toc = document.querySelector('d-contents');
-    if (toc) {
-        const headings = article.querySelectorAll('h2, h3, h4');
-        let ToC = `<nav role="navigation" class="l-text figcaption"><h3>Table of contents</h3>`;
-        let prevLevel = 0;
-
-        for (const el of headings) {
-            // should element be included in TOC?
-            const isInTitle = el.parentElement.tagName == 'D-TITLE';
-            const isException = el.getAttribute('no-toc');
-            if (isInTitle || isException) continue;
-            el.setAttribute('id', el.textContent.toLowerCase().replaceAll(" ", "_"))
-            const link = '<a target="_self" href="' + '#' + el.getAttribute('id') + '">' + el.textContent + '</a>';
-
-            const level = el.tagName === 'H2' ? 0 : (el.tagName === 'H3' ? 1 : 2);
-            while (prevLevel < level) {
-                ToC += '<ul>'
-                prevLevel++;
-            }
-            while (prevLevel > level) {
-                ToC += '</ul>'
-                prevLevel--;
-            }
-            if (level === 0)
-                ToC += '<div>' + link + '</div>';
-            else
-                ToC += '<li>' + link + '</li>';
-        }
-
-        while (prevLevel > 0) {
-            ToC += '</ul>'
-            prevLevel--;
-        }
-        ToC += '</nav>';
-        toc.innerHTML = ToC;
-        toc.setAttribute('prerendered', 'true');
-        const toc_links = document.querySelectorAll('d-contents > nav a');
-
-        window.addEventListener('scroll', (_event) => {
-            if (typeof (headings) != 'undefined' && headings != null && typeof (toc_links) != 'undefined' && toc_links != null) {
-                // Then iterate forwards, on the first match highlight it and break
-                find_active: {
-                    for (let i = headings.length - 1; i >= 0; i--) {
-                        if (headings[i].getBoundingClientRect().top - 50 <= 0) {
-                            if (!toc_links[i].classList.contains("active")) {
-                                toc_links.forEach((link, _index) => {
-                                    link.classList.remove("active");
-                                });
-                                toc_links[i].classList.add('active');
-                            }
-                            break find_active;
-                        }
-                    }
-                    toc_links.forEach((link, _index) => {
-                        link.classList.remove("active");
-                    });
-                }
-            }
-        });
-    }
-</script>
-</body>
-</html>

dist/main.bundle.js.LICENSE.txt

@@ -1,19 +0,0 @@
-/* @license
-Papa Parse
-v5.4.1
-https://github.com/mholt/PapaParse
-License: MIT
-*/
-
-/*! For license information please see plotly-basic.min.js.LICENSE.txt */
-
-/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
-
-/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright OpenJS Foundation and other contributors <https://openjsf.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "katex": "^0.16.11",
         "lodash": "^4.17.21",
         "papaparse": "^5.4.1",
         "plotly.js-basic-dist-min": "^2.33.0"
@@ -5294,6 +5295,29 @@
         "node": ">=6"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.11",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.11.tgz",
+      "integrity": "sha512-RQrI8rlHY92OLf3rho/Ts8i/XvjgguEjOkO1BEXcU3N8BqPpSzBNwV/G0Ukr+P/l3ivvJUE/Fa/CwbS6HesGNQ==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/kind-of": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",

package.json

@@ -1,5 +1,6 @@
 {
   "dependencies": {
+    "katex": "^0.16.11",
     "lodash": "^4.17.21",
     "papaparse": "^5.4.1",
     "plotly.js-basic-dist-min": "^2.33.0"

python/memory/explorations.ipynb

@@ -0,0 +1,51 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": 3,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "from utils import activation_memory, param_grads_opt"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {},
+   "outputs": [],
+   "source": [
+    "tpl = (\n",
+    "    a, # attention heads\n",
+    "    b, # micro batch size\n",
+    "    h, # hidden dimension size\n",
+    "    L, # number of layers\n",
+    "    s, # sequence length\n",
+    "    mixed=True,\n",
+    "    recomputation=None\n",
+    ")"
+   ]
+  }
+ ],
+ "metadata": {
+  "kernelspec": {
+   "display_name": "jupyter",
+   "language": "python",
+   "name": "python3"
+  },
+  "language_info": {
+   "codemirror_mode": {
+    "name": "ipython",
+    "version": 3
+   },
+   "file_extension": ".py",
+   "mimetype": "text/x-python",
+   "name": "python",
+   "nbconvert_exporter": "python",
+   "pygments_lexer": "ipython3",
+   "version": "3.10.14"
+  }
+ },
+ "nbformat": 4,
+ "nbformat_minor": 2
+}

python/memory/utils.py

@@ -0,0 +1,57 @@
+def activation_memory(
+    a, # attention heads
+    b, # micro batch size
+    h, # hidden dimension size
+    L, # number of layers
+    s, # sequence length
+    mixed=True,
+    recomputation=None
+    ):
+    
+    # https://arxiv.org/pdf/2205.05198
+    if recomputation is None:
+        one_layer = s * b * h * (34 + (5 * a * s / h)) # eq (2)
+    elif recomputation =="selective":
+        one_layer = s * b * h * 34 # eq (6)
+    elif recomputation =="full":
+        one_layer = s * b * h * 2
+    else:
+        raise ValueError()
+    
+    input_dropout = s * b * h # section 4.3
+    
+    if mixed:
+        bytes_per_value = 2 
+    else:
+        bytes_per_value = 4
+    
+    return bytes_per_value * L * one_layer + input_dropout
+
+
+def param_grads_opt(
+    h, # hidden dimension size
+    L, # number of layers
+    s, # sequence length
+    v, # vocab size
+    k=8, # parameters for optimizer (Adam: 8 = 4 bytes moments + 4 bytes variance)
+    mixed=True # mixed precision training
+    ):
+    
+    # https://michaelwornow.net/2024/01/18/counting-params-in-transformer
+    # note: this is without GQA or MQA
+    
+    emb = h*(v+s)
+    one_layer = 12 * h**2 + 13*h
+    other = 2*h
+
+    n = emb + L * one_layer + other
+    
+    # 3.1 https://arxiv.org/pdf/1910.02054
+    
+    if mixed:
+        k += 4 # additional full precision weights
+        bytes_per_paramter = 2
+    else:
+        bytes_per_paramter = 4
+    
+    return bytes_per_paramter*n, bytes_per_paramter*n, k*n

src/bibliography.bib

@@ -0,0 +1,334 @@
+@article{radford2019language,
+  title={Language Models are Unsupervised Multitask Learners},
+  author={Radford, Alec and Wu, Jeff and Child, Rewon and Luan, David and Amodei, Dario and Sutskever, Ilya},
+  year={2019}
+}
+@inproceedings{barbaresi-2021-trafilatura,
+  title = {Trafilatura: A Web Scraping Library and Command-Line Tool for Text Discovery and Extraction},
+  author = "Barbaresi, Adrien",
+  booktitle = "Proceedings of the Joint Conference of the 59th Annual Meeting of the Association for Computational Linguistics and the 11th International Joint Conference on Natural Language Processing: System Demonstrations",
+  pages = "122--131",
+  publisher = "Association for Computational Linguistics",
+  url = "https://aclanthology.org/2021.acl-demo.15",
+  year = 2021,
+}
+@misc{penedo2023refinedweb,
+      title={The RefinedWeb Dataset for Falcon LLM: Outperforming Curated Corpora with Web Data, and Web Data Only},
+      author={Guilherme Penedo and Quentin Malartic and Daniel Hesslow and Ruxandra Cojocaru and Alessandro Cappelli and Hamza Alobeidli and Baptiste Pannier and Ebtesam Almazrouei and Julien Launay},
+      year={2023},
+      eprint={2306.01116},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@article{joulin2016fasttext,
+  title={FastText.zip: Compressing text classification models},
+  author={Joulin, Armand and Grave, Edouard and Bojanowski, Piotr and Douze, Matthijs and J{\'e}gou, H{\'e}rve and Mikolov, Tomas},
+  journal={arXiv preprint arXiv:1612.03651},
+  year={2016}
+}
+@article{joulin2016bag,
+  title={Bag of Tricks for Efficient Text Classification},
+  author={Joulin, Armand and Grave, Edouard and Bojanowski, Piotr and Mikolov, Tomas},
+  journal={arXiv preprint arXiv:1607.01759},
+  year={2016}
+}
+@misc{penedo2024datatrove,
+  author = {Penedo, Guilherme and Kydlíček, Hynek and Cappelli, Alessandro and Sasko, Mario and Wolf, Thomas},
+  title = {DataTrove: large scale data processing},
+  year = {2024},
+  publisher = {GitHub},
+  journal = {GitHub repository},
+  url = {https://github.com/huggingface/datatrove}
+}
+@misc{chiang2024chatbot,
+      title={Chatbot Arena: An Open Platform for Evaluating LLMs by Human Preference},
+      author={Wei-Lin Chiang and Lianmin Zheng and Ying Sheng and Anastasios Nikolas Angelopoulos and Tianle Li and Dacheng Li and Hao Zhang and Banghua Zhu and Michael Jordan and Joseph E. Gonzalez and Ion Stoica},
+      year={2024},
+      eprint={2403.04132},
+      archivePrefix={arXiv},
+      primaryClass={cs.AI}
+}
+@misc{rae2022scaling,
+      title={Scaling Language Models: Methods, Analysis & Insights from Training Gopher},
+      author={Jack W. Rae and Sebastian Borgeaud and Trevor Cai and Katie Millican and Jordan Hoffmann and Francis Song and John Aslanides and Sarah Henderson and Roman Ring and Susannah Young and Eliza Rutherford and Tom Hennigan and Jacob Menick and Albin Cassirer and Richard Powell and George van den Driessche and Lisa Anne Hendricks and Maribeth Rauh and Po-Sen Huang and Amelia Glaese and Johannes Welbl and Sumanth Dathathri and Saffron Huang and Jonathan Uesato and John Mellor and Irina Higgins and Antonia Creswell and Nat McAleese and Amy Wu and Erich Elsen and Siddhant Jayakumar and Elena Buchatskaya and David Budden and Esme Sutherland and Karen Simonyan and Michela Paganini and Laurent Sifre and Lena Martens and Xiang Lorraine Li and Adhiguna Kuncoro and Aida Nematzadeh and Elena Gribovskaya and Domenic Donato and Angeliki Lazaridou and Arthur Mensch and Jean-Baptiste Lespiau and Maria Tsimpoukelli and Nikolai Grigorev and Doug Fritz and Thibault Sottiaux and Mantas Pajarskas and Toby Pohlen and Zhitao Gong and Daniel Toyama and Cyprien de Masson d'Autume and Yujia Li and Tayfun Terzi and Vladimir Mikulik and Igor Babuschkin and Aidan Clark and Diego de Las Casas and Aurelia Guy and Chris Jones and James Bradbury and Matthew Johnson and Blake Hechtman and Laura Weidinger and Iason Gabriel and William Isaac and Ed Lockhart and Simon Osindero and Laura Rimell and Chris Dyer and Oriol Vinyals and Kareem Ayoub and Jeff Stanway and Lorrayne Bennett and Demis Hassabis and Koray Kavukcuoglu and Geoffrey Irving},
+      year={2022},
+      eprint={2112.11446},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{lee2022deduplicating,
+      title={Deduplicating Training Data Makes Language Models Better},
+      author={Katherine Lee and Daphne Ippolito and Andrew Nystrom and Chiyuan Zhang and Douglas Eck and Chris Callison-Burch and Nicholas Carlini},
+      year={2022},
+      eprint={2107.06499},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{carlini2023quantifying,
+      title={Quantifying Memorization Across Neural Language Models},
+      author={Nicholas Carlini and Daphne Ippolito and Matthew Jagielski and Katherine Lee and Florian Tramer and Chiyuan Zhang},
+      year={2023},
+      eprint={2202.07646},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG}
+}
+@misc{raffel2023exploring,
+      title={Exploring the Limits of Transfer Learning with a Unified Text-to-Text Transformer},
+      author={Colin Raffel and Noam Shazeer and Adam Roberts and Katherine Lee and Sharan Narang and Michael Matena and Yanqi Zhou and Wei Li and Peter J. Liu},
+      year={2023},
+      eprint={1910.10683},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG}
+}
+@misc{touvron2023llama,
+      title={LLaMA: Open and Efficient Foundation Language Models},
+      author={Hugo Touvron and Thibaut Lavril and Gautier Izacard and Xavier Martinet and Marie-Anne Lachaux and Timothée Lacroix and Baptiste Rozière and Naman Goyal and Eric Hambro and Faisal Azhar and Aurelien Rodriguez and Armand Joulin and Edouard Grave and Guillaume Lample},
+      year={2023},
+      eprint={2302.13971},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@article{dolma,
+  title = {Dolma: an Open Corpus of Three Trillion Tokens for Language Model Pretraining Research},
+  author={
+    Luca Soldaini and Rodney Kinney and Akshita Bhagia and Dustin Schwenk and David Atkinson and
+    Russell Authur and Ben Bogin and Khyathi Chandu and Jennifer Dumas and Yanai Elazar and
+    Valentin Hofmann and Ananya Harsh Jha and Sachin Kumar and Li Lucy and Xinxi Lyu and
+    Nathan Lambert and Ian Magnusson and Jacob Morrison and Niklas Muennighoff and Aakanksha Naik and
+    Crystal Nam and Matthew E. Peters and Abhilasha Ravichander and Kyle Richardson and Zejiang Shen and
+    Emma Strubell and Nishant Subramani and Oyvind Tafjord and Pete Walsh and Luke Zettlemoyer and
+    Noah A. Smith and Hannaneh Hajishirzi and Iz Beltagy and Dirk Groeneveld and Jesse Dodge and Kyle Lo
+  },
+  year = {2024},
+  journal={arXiv preprint},
+}
+@article{gao2020pile,
+  title={The {P}ile: An 800{GB} dataset of diverse text for language modeling},
+  author={Gao, Leo and Biderman, Stella and Black, Sid and Golding, Laurence and Hoppe, Travis and Foster, Charles and Phang, Jason and He, Horace and Thite, Anish and Nabeshima, Noa and others},
+  journal={arXiv preprint arXiv:2101.00027},
+  year={2020}
+}
+@misc{cerebras2023slimpajama,
+  author = {Soboleva, Daria and Al-Khateeb, Faisal and Myers, Robert and Steeves, Jacob R and Hestness, Joel and Dey, Nolan},
+  title = {SlimPajama: A 627B token cleaned and deduplicated version of RedPajama},
+  month = {June},
+  year = 2023,
+  url = {https://huggingface.co/datasets/cerebras/SlimPajama-627B},
+}
+@software{together2023redpajama,
+  author = {Together Computer},
+  title = {RedPajama: an Open Dataset for Training Large Language Models},
+  month = {October},
+  year = 2023,
+  url = {https://github.com/togethercomputer/RedPajama-Data}
+}
+@article{jaccard1912distribution,
+  title={The distribution of the flora in the alpine zone. 1},
+  author={Jaccard, Paul},
+  journal={New phytologist},
+  volume={11},
+  number={2},
+  pages={37--50},
+  year={1912},
+  publisher={Wiley Online Library}
+}
+@misc{albalak2024survey,
+      title={A Survey on Data Selection for Language Models},
+      author={Alon Albalak and Yanai Elazar and Sang Michael Xie and Shayne Longpre and Nathan Lambert and Xinyi Wang and Niklas Muennighoff and Bairu Hou and Liangming Pan and Haewon Jeong and Colin Raffel and Shiyu Chang and Tatsunori Hashimoto and William Yang Wang},
+      year={2024},
+      eprint={2402.16827},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{longpre2023pretrainers,
+      title={A Pretrainer's Guide to Training Data: Measuring the Effects of Data Age, Domain Coverage, Quality, & Toxicity},
+      author={Shayne Longpre and Gregory Yauney and Emily Reif and Katherine Lee and Adam Roberts and Barret Zoph and Denny Zhou and Jason Wei and Kevin Robinson and David Mimno and Daphne Ippolito},
+      year={2023},
+      eprint={2305.13169},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{wenzek2019ccnet,
+      title={CCNet: Extracting High Quality Monolingual Datasets from Web Crawl Data},
+      author={Guillaume Wenzek and Marie-Anne Lachaux and Alexis Conneau and Vishrav Chaudhary and Francisco Guzmán and Armand Joulin and Edouard Grave},
+      year={2019},
+      eprint={1911.00359},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{soldaini2024dolma,
+      title={Dolma: an Open Corpus of Three Trillion Tokens for Language Model Pretraining Research},
+      author={Luca Soldaini and Rodney Kinney and Akshita Bhagia and Dustin Schwenk and David Atkinson and Russell Authur and Ben Bogin and Khyathi Chandu and Jennifer Dumas and Yanai Elazar and Valentin Hofmann and Ananya Harsh Jha and Sachin Kumar and Li Lucy and Xinxi Lyu and Nathan Lambert and Ian Magnusson and Jacob Morrison and Niklas Muennighoff and Aakanksha Naik and Crystal Nam and Matthew E. Peters and Abhilasha Ravichander and Kyle Richardson and Zejiang Shen and Emma Strubell and Nishant Subramani and Oyvind Tafjord and Pete Walsh and Luke Zettlemoyer and Noah A. Smith and Hannaneh Hajishirzi and Iz Beltagy and Dirk Groeneveld and Jesse Dodge and Kyle Lo},
+      year={2024},
+      eprint={2402.00159},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{ouyang2022training,
+      title={Training language models to follow instructions with human feedback},
+      author={Long Ouyang and Jeff Wu and Xu Jiang and Diogo Almeida and Carroll L. Wainwright and Pamela Mishkin and Chong Zhang and Sandhini Agarwal and Katarina Slama and Alex Ray and John Schulman and Jacob Hilton and Fraser Kelton and Luke Miller and Maddie Simens and Amanda Askell and Peter Welinder and Paul Christiano and Jan Leike and Ryan Lowe},
+      year={2022},
+      eprint={2203.02155},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{hoffmann2022training,
+      title={Training Compute-Optimal Large Language Models},
+      author={Jordan Hoffmann and Sebastian Borgeaud and Arthur Mensch and Elena Buchatskaya and Trevor Cai and Eliza Rutherford and Diego de Las Casas and Lisa Anne Hendricks and Johannes Welbl and Aidan Clark and Tom Hennigan and Eric Noland and Katie Millican and George van den Driessche and Bogdan Damoc and Aurelia Guy and Simon Osindero and Karen Simonyan and Erich Elsen and Jack W. Rae and Oriol Vinyals and Laurent Sifre},
+      year={2022},
+      eprint={2203.15556},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{muennighoff2023scaling,
+      title={Scaling Data-Constrained Language Models},
+      author={Niklas Muennighoff and Alexander M. Rush and Boaz Barak and Teven Le Scao and Aleksandra Piktus and Nouamane Tazi and Sampo Pyysalo and Thomas Wolf and Colin Raffel},
+      year={2023},
+      eprint={2305.16264},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{hernandez2022scaling,
+      title={Scaling Laws and Interpretability of Learning from Repeated Data},
+      author={Danny Hernandez and Tom Brown and Tom Conerly and Nova DasSarma and Dawn Drain and Sheer El-Showk and Nelson Elhage and Zac Hatfield-Dodds and Tom Henighan and Tristan Hume and Scott Johnston and Ben Mann and Chris Olah and Catherine Olsson and Dario Amodei and Nicholas Joseph and Jared Kaplan and Sam McCandlish},
+      year={2022},
+      eprint={2205.10487},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG}
+}
+@article{llama3modelcard,
+
+title={Llama 3 Model Card},
+
+author={AI@Meta},
+
+year={2024},
+
+url = {https://github.com/meta-llama/llama3/blob/main/MODEL_CARD.md}
+
+}
+@misc{jiang2024mixtral,
+      title={Mixtral of Experts},
+      author={Albert Q. Jiang and Alexandre Sablayrolles and Antoine Roux and Arthur Mensch and Blanche Savary and Chris Bamford and Devendra Singh Chaplot and Diego de las Casas and Emma Bou Hanna and Florian Bressand and Gianna Lengyel and Guillaume Bour and Guillaume Lample and Lélio Renard Lavaud and Lucile Saulnier and Marie-Anne Lachaux and Pierre Stock and Sandeep Subramanian and Sophia Yang and Szymon Antoniak and Teven Le Scao and Théophile Gervet and Thibaut Lavril and Thomas Wang and Timothée Lacroix and William El Sayed},
+      year={2024},
+      eprint={2401.04088},
+      archivePrefix={arXiv},
+      primaryClass={cs.LG}
+}
+@article{yuan2024self,
+  title={Self-rewarding language models},
+  author={Yuan, Weizhe and Pang, Richard Yuanzhe and Cho, Kyunghyun and Sukhbaatar, Sainbayar and Xu, Jing and Weston, Jason},
+  journal={arXiv preprint arXiv:2401.10020},
+  year={2024}
+}
+@article{verga2024replacing,
+  title={Replacing Judges with Juries: Evaluating LLM Generations with a Panel of Diverse Models},
+  author={Verga, Pat and Hofstatter, Sebastian and Althammer, Sophia and Su, Yixuan and Piktus, Aleksandra and Arkhangorodsky, Arkady and Xu, Minjie and White, Naomi and Lewis, Patrick},
+  journal={arXiv preprint arXiv:2404.18796},
+  year={2024}
+}
+@article{abdin2024phi,
+  title={Phi-3 technical report: A highly capable language model locally on your phone},
+  author={Abdin, Marah and Jacobs, Sam Ade and Awan, Ammar Ahmad and Aneja, Jyoti and Awadallah, Ahmed and Awadalla, Hany and Bach, Nguyen and Bahree, Amit and Bakhtiari, Arash and Behl, Harkirat and others},
+  journal={arXiv preprint arXiv:2404.14219},
+  year={2024}
+}
+@misc{meta2024responsible,
+  title = {Our responsible approach to Meta AI and Meta Llama 3},
+  author = {Meta},
+  year = {2024},
+  url = {https://ai.meta.com/blog/meta-llama-3-meta-ai-responsibility/},
+  note = {Accessed: 2024-05-31}
+}
+@inproceedings{talmor-etal-2019-commonsenseqa,
+    title = "CommonsenseQA: A Question Answering Challenge Targeting Commonsense Knowledge",
+    author = "Talmor, Alon  and
+      Herzig, Jonathan  and
+      Lourie, Nicholas  and
+      Berant, Jonathan",
+    booktitle = "Proceedings of the 2019 Conference of the North {A}merican Chapter of the Association for Computational Linguistics: Human Language Technologies, Volume 1 (Long and Short Papers)",
+    month = jun,
+    year = "2019",
+    address = "Minneapolis, Minnesota",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/N19-1421",
+    doi = "10.18653/v1/N19-1421",
+    pages = "4149--4158",
+    archivePrefix = "arXiv",
+    eprint        = "1811.00937",
+    primaryClass  = "cs",
+}
+@inproceedings{zellers-etal-2019-hellaswag,
+    title = "HellaSwag: Can a Machine Really Finish Your Sentence?",
+    author = "Zellers, Rowan  and
+      Holtzman, Ari  and
+      Bisk, Yonatan  and
+      Farhadi, Ali  and
+      Choi, Yejin",
+    editor = "Korhonen, Anna  and
+      Traum, David  and
+      M{\`a}rquez, Llu{\'\i}s",
+    booktitle = "Proceedings of the 57th Annual Meeting of the Association for Computational Linguistics",
+    month = jul,
+    year = "2019",
+    address = "Florence, Italy",
+    publisher = "Association for Computational Linguistics",
+    url = "https://aclanthology.org/P19-1472",
+    doi = "10.18653/v1/P19-1472",
+    pages = "4791--4800",
+    abstract = "Recent work by Zellers et al. (2018) introduced a new task of commonsense natural language inference: given an event description such as {``}A woman sits at a piano,{''} a machine must select the most likely followup: {``}She sets her fingers on the keys.{''} With the introduction of BERT, near human-level performance was reached. Does this mean that machines can perform human level commonsense inference? In this paper, we show that commonsense inference still proves difficult for even state-of-the-art models, by presenting HellaSwag, a new challenge dataset. Though its questions are trivial for humans ({\textgreater}95{\%} accuracy), state-of-the-art models struggle ({\textless}48{\%}). We achieve this via Adversarial Filtering (AF), a data collection paradigm wherein a series of discriminators iteratively select an adversarial set of machine-generated wrong answers. AF proves to be surprisingly robust. The key insight is to scale up the length and complexity of the dataset examples towards a critical {`}Goldilocks{'} zone wherein generated text is ridiculous to humans, yet often misclassified by state-of-the-art models. Our construction of HellaSwag, and its resulting difficulty, sheds light on the inner workings of deep pretrained models. More broadly, it suggests a new path forward for NLP research, in which benchmarks co-evolve with the evolving state-of-the-art in an adversarial way, so as to present ever-harder challenges.",
+}
+@inproceedings{OpenBookQA2018,
+ title={Can a Suit of Armor Conduct Electricity? A New Dataset for Open Book Question Answering},
+ author={Todor Mihaylov and Peter Clark and Tushar Khot and Ashish Sabharwal},
+ booktitle={EMNLP},
+ year={2018}
+}
+@misc{bisk2019piqa,
+      title={PIQA: Reasoning about Physical Commonsense in Natural Language},
+      author={Yonatan Bisk and Rowan Zellers and Ronan Le Bras and Jianfeng Gao and Yejin Choi},
+      year={2019},
+      eprint={1911.11641},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{sap2019socialiqa,
+      title={SocialIQA: Commonsense Reasoning about Social Interactions},
+      author={Maarten Sap and Hannah Rashkin and Derek Chen and Ronan LeBras and Yejin Choi},
+      year={2019},
+      eprint={1904.09728},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{sakaguchi2019winogrande,
+      title={WinoGrande: An Adversarial Winograd Schema Challenge at Scale},
+      author={Keisuke Sakaguchi and Ronan Le Bras and Chandra Bhagavatula and Yejin Choi},
+      year={2019},
+      eprint={1907.10641},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+}
+@misc{clark2018think,
+      title={Think you have Solved Question Answering? Try ARC, the AI2 Reasoning Challenge},
+      author={Peter Clark and Isaac Cowhey and Oren Etzioni and Tushar Khot and Ashish Sabharwal and Carissa Schoenick and Oyvind Tafjord},
+      year={2018},
+      eprint={1803.05457},
+      archivePrefix={arXiv},
+      primaryClass={cs.AI}
+}
+@misc{hendrycks2021measuring,
+      title={Measuring Massive Multitask Language Understanding},
+      author={Dan Hendrycks and Collin Burns and Steven Basart and Andy Zou and Mantas Mazeika and Dawn Song and Jacob Steinhardt},
+      year={2021},
+      eprint={2009.03300},
+      archivePrefix={arXiv},
+      primaryClass={cs.CY}
+}
+@misc{mitchell2023measuring,
+      title={Measuring Data},
+      author={Margaret Mitchell and Alexandra Sasha Luccioni and Nathan Lambert and Marissa Gerchick and Angelina McMillan-Major and Ezinwanne Ozoani and Nazneen Rajani and Tristan Thrush and Yacine Jernite and Douwe Kiela},
+      year={2023},
+      eprint={2212.05129},
+      archivePrefix={arXiv},
+      primaryClass={cs.AI}
+}

src/colors.mjs

@@ -0,0 +1,77 @@
+// export const COLORS = [
+//     [255, 135, 65], // Bright Orange
+//     [96, 168, 176], // Ocean Blue
+//     [23, 17, 26], // Charcoal Black
+//     [141, 193, 86], // Fresh Green
+//     [208, 65, 83], // Soft Red
+//     [73, 85, 136], // Deep Blue
+//     [45, 68, 67], // Dark Forest Green
+//     [255, 206, 149], // Peach
+//     [241, 139, 105], // Salmon Pink
+//     [102, 45, 57], // Burgundy
+//     [174, 91, 57], // Brown
+//     [232, 158, 86], // Sand
+//     [255, 220, 106], // Sun Yellow
+//     [213, 246, 110], // Light Lime
+//     [74, 122, 71], // Moss Green
+//     [110, 81, 106], // Muted Purple
+//     [170, 140, 148], // Dusty Rose
+//     [223, 203, 191], // Soft Beige
+//     [255, 255, 255], // Pure White
+//     [255, 153, 169], // Light Pink
+//     [199, 102, 178], // Vivid Purple
+//     [131, 58, 149], // Deep Purple
+//     [59, 44, 74], // Dark Slate
+//     [154, 231, 201], // Aqua Green
+// ]
+
+export const COLORS = [
+    ["235", "102", "59"], // Burnt Orange
+    ["46", "145", "229"], // Sky Blue
+    ["225", "95", "153"], // Soft Magenta
+    ["28", "167", "28"], // Bright Green
+    // ["108", "69", "22"], // Dark Brown
+    ["167", "119", "241"], // Lavender
+    ["182", "129", "0"], // Mustard Yellow
+    ["134", "42", "22"], // Brick Red
+    ["0", "160", "139"], // Teal
+    ["175", "0", "56"], // Crimson
+    ["108", "124", "50"], // Olive Green
+    ["81", "28", "251"], // Royal Blue
+    ["218", "22", "255"], // Electric Purple
+    ["98", "0", "66"], // Dark Magenta
+    // ['34', '42', '42'], Black, which makes the text unreadable
+    // ["117", "13", "134"], // Deep Magenta
+    ["251", "0", "209"], // Hot Pink
+    ["252", "0", "128"], // Bright Pink
+    // ["178", "130", "141"], // Dusty Pink
+    ["119", "138", "174"], // Slate Blue
+    ["22", "22", "167"], // Deep Blue
+    ["218", "96", "202"], // Orchid
+    // ['13', '42', '99'], Black
+];
+
+
+
+
+export const NAMED_COLORS = {
+    "red": ["251", "13", "13"], // Vivid Red
+    "black": ['13', '42', '99'], // Black
+    "blue": ["46", "145", "229"], // Sky Blue
+};
+
+export const getColor = (i, opacity=1) => {
+    if (i < 0) {
+        i = i * -1;
+    }
+    return `rgba(${COLORS[i % COLORS.length].join(",")}, ${opacity})`;
+};
+
+export const getNamedColor = (name, opacity=1) => {
+    if (NAMED_COLORS.hasOwnProperty(name)) {
+        return `rgba(${NAMED_COLORS[name].join(",")}, ${opacity})`;
+    } else {
+        return undefined; // Return undefined if name doesn't exist
+    }
+};
+

src/index.html

@@ -0,0 +1,917 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <script src="distill.bundle.js" type="module" fetchpriority="high" blocking></script>
+    <script src="main.bundle.js" type="module" fetchpriority="low" defer></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf8">
+    <base target="_blank">
+    <title>FineWeb: decanting the web for the finest text data at scale</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+<d-front-matter>
+    <script id='distill-front-matter' type="text/json">{
+    "title": "🔭 Ultra-Guide to Scaling LLM training",
+    "description": "This blog covers everything about scaling LLMs in 2024.",
+    "published": "Sept 28, 2024",
+    "affiliation": {"name": "HuggingFace"},
+    "authors": [
+      {
+        "author":"Leandro Werra",
+        "authorURL":"https://huggingface.co/lvwerra"
+      },
+      {
+        "author":"Thomas Wolf",
+        "authorURL":"https://huggingface.co/thomwolf"
+      }
+    ],
+    "katex": {
+      "delimiters": [
+        {"left": "$$", "right": "$$", "display": false}
+      ]
+    }
+  }
+    </script>
+</d-front-matter>
+<d-title>
+    <h1 class="l-page" style="text-align: center;">🔭 Ultra-Guide to Scaling LLM training</h1>
+    <div id="title-plot" class="main-plot-container l-screen">
+        <figure>
+            <img src="assets/images/banner.png" alt="FineWeb">
+        </figure>
+        <!-- <div id="clusters-plot">
+            <img src="assets/images/clusters.png" alt="Clusters">
+        </div> -->
+    </div>
+</d-title>
+<d-byline></d-byline>
+<d-article>
+    <d-contents>
+    </d-contents>
+
+    <p>The performance of a large language model (LLM) depends heavily on the quality and size of the LLMs.
+        However, the pretraining datasets for state-of-the-art open LLMs like Llama 3<d-cite bibtex-key="llama3modelcard"></d-cite> and Mixtral<d-cite bibtex-key="jiang2024mixtral"></d-cite> are not publicly available and very little is known about how they were created.</p>
+        <aside>Reading time: 7 days. For the best reading experience, we recommend not using a mobile phone.</aside>
+
+        <p>Recently, we released <a href="https://huggingface.co/datasets/HuggingFaceFW/fineweb"><strong>🍷 FineWeb</strong></a>, a new, large-scale
+        (<strong>15-trillion tokens, 44TB disk space</strong>) dataset for LLM pretraining. FineWeb is derived from 96 <a href="https://commoncrawl.org/">CommonCrawl</a> snapshots and produces <strong>better-performing LLMs than other open pretraining datasets</strong>.
+
+        <aside>We are extremely thankful to the whole <a href="https://distill.pub/">distill.pub</a> team for creating the template on which we based this blog post.</aside>
+
+    <p><strong>TLDR:</strong> This blog covers a discussion on processing and evaluating data quality at scale, the 🍷 FineWeb
+        recipe (listing and explaining all of our design choices), and the process followed to create its 📚 FineWeb-Edu subset.</p>
+
+    <h2>Scaling Models and Hardware</h2>
+
+    <p>Now that we know the basics of distributed communication and computations it’s time to apply this to training LLMs at scale. Here’s the plan of action: we’ll go through increasingly complex distribution strategies, namely data, then tensor and finally pipeline parallelism, and show three things:</p>
+
+    <ol>
+        <li>conceptual explanations with diagrams</li>
+        <li>a minimal coding example illustrating how to implement said strategy</li>
+        <li>scaling experiments show casing strengths and limits of the method with real data</li>
+    </ol>
+
+    <p>For the experiments we scale across two dimensions: we make the models larger and larger and add more and more compute nodes and measure how throughput changes.</p>
+
+    <p>So this is a good point to get ☕ #2 and we’ll have a look at the setup for the practical experiments.</p>
+
+    <h2>Experiment setup</h2>
+
+    <table>
+        <thead>
+            <tr>
+                <th></th>
+                <th><strong>1B (1)</strong></th>
+                <th><strong>7B</strong></th>
+                <th><strong>70B</strong></th>
+                <th><strong>340B (2)</strong></th>
+                <th><strong>400B (3)</strong></th>
+            </tr>
+        </thead>
+        <tbody>
+            <tr>
+                <td><strong>N Layers</strong></td>
+                <td>24</td>
+                <td>32</td>
+                <td>80</td>
+                <td>96</td>
+                <td>126</td>
+            </tr>
+            <tr>
+                <td><strong>N Heads</strong></td>
+                <td>32</td>
+                <td>32</td>
+                <td>64</td>
+                <td>96</td>
+                <td>128</td>
+            </tr>
+            <tr>
+                <td><strong>Dimension</strong></td>
+                <td>2048</td>
+                <td>4096</td>
+                <td>8192</td>
+                <td>18432</td>
+                <td>16384</td>
+            </tr>
+        </tbody>
+    </table>
+
+    <p>(1) FineWeb ablation models</p>
+    <p>(2) Nemotron-340B architecture (without GQA)</p>
+    <p>(3) Llama-400B, ffn dim = 1.2 hidden dim (without GQA)</p>
+
+
+    <h2>Distribution Methods</h2>
+
+    <p>Efficiently training LLMs now requires amounts of compute which exceed in most case single GPUs or machine. Large distributed clusters are thus used to train these models and can range from hundreds to thousands of nodes each usually equipped with up to 8 GPUs. To make the best use of such an expensive hardware, a range of distributed training methods have been developed with the goal of ensuring that GPUs are highly utilized at all times and not waiting for data/synchronization/etc.</p>
+
+    <p>Several methods can be used to distribute training and we’ll start with 4D parallelism followed-up by DeepSpeed stages. While we explain these strategies we’ll also run experiments to determine the trade-offs and understand the optimal settings.</p>
+<p>The name “4D parallelism” originates from the fact that it involves combining up to 4 distribution methods: data, tensor, pipeline, and sequence parallelism (each of these techniques can be used independently of the other). You may thus ask “So which one should I use?”.</p>
+
+<p>Unfortunately, there is no universal answer as the response will actually depend on the cluster setup as well as the model architecture. But do not despair for in this section we’ll develop strategies to figure out the best setting experimentally!</p>
+
+<p>In addition to 4D parallelism we’ll also take a look at “DeepSpeed”, a method developed by Microsoft which is generally complimentary to 4D parallelism and can be leveraged on top of it.</p>
+
+<p><strong>Idea: show two things in every section</strong></p>
+<ol>
+    <li>a small toy model (e.g. 4 layer FFN) we can interactively show with every approach</li>
+    <li>a benchmark showing the improvement/limits of the approach (e.g. when you cross 1 node with TP)</li>
+</ol>
+
+<h3>No Parallelism</h3>
+
+<p>Let’s quickly go over the basics before going into distributed training. When a model is trained on a single GPU, the training consists of 3 steps in the simplest case:</p>
+<ol>
+    <li>one forward pass,</li>
+    <li>one backward pass to compute the gradients, and</li>
+    <li>an optimization step using the gradients to update the parameters</li>
+</ol>
+
+<p>As we’ll see in the future, these steps may be repeated or intertwined but for now we’ll start simple:</p>
+
+<img src="assets/images/IMG_7537D08D7F41-1.jpeg" alt="Training Steps">
+
+<p>In this figure the successive blue boxes on the top line can be seen as successive layers inside a model (same for the last line). The red boxes are the associated gradients for each of these layers.</p>
+
+<p>The batch size (<em>bs</em>) is one of the most important hyper-parameters in machine learning, affecting both model convergence and throughput.</p>
+
+<p>If the batch size is too small, gradients will tend to be noisy and the model may not be able to converge to optimal performances while a batch size too large can make the convergence of the model slower and waste compute. You can find a nice discussion of this topic in OpenAI’s paper on large batch training (<a href="https://arxiv.org/abs/1812.06162">https://arxiv.org/pdf/1812.06162</a>).</p>
+
+<p>The batch size also affects the throughput: a small batch size will require more optimizer steps to train on a given amount of samples. Optimizer steps are costly (in compute time) and the throughput will thus be lower than when using a larger batch size. On the other hand, larger batches, while leading to higher throughput may suffer from slow convergence in the limits as we’ve just seen. There is generally an optimal batch size from a convergence/performance point of view (note that the batch size can usually still be changed around the optimal batch size without major impact to the performance of the model).</p>
+
+<p>Note that in the LLM community, batch sizes are commonly reported in terms of tokens instead of number of samples (BST - Batch Size Tokens) as each token has a label and thus a loss term and can thus be considered individual (although highly correlated) samples.</p>
+
+<p>A sweet spot for LLM training is usually on the order of 4-20 million tokens per batch (links GPT-3, DeepSeek, Llama). In the simplest case, training on a single machine, the <em>BS</em> and <em>BST</em> can be computed from the model input sequence length as follows:</p>
+
+<d-math>
+bst=bs *seq
+</d-math>
+
+<p>(note that from here on forward we’ll show the formulas for the batch size in number of samples but you can always get its token-unit counterpart by multiplying it with the sequence length)</p>
+
+<p>And we’re now hitting our first scaling problem:</p>
+
+<blockquote>
+    <p>what if we can’t fit the model into GPU memory even with <code>BS=1</code>?</p>
+</blockquote>
+
+<p>Good question, reader!</p>
+
+<p>Let’s start by understanding what led to our out-of-memory issue in the first place.</p>
+
+<h2>A brief overview of memory usage in Transformers</h2>
+
+<p>To train a neural network model, one needs to store many elements in memory besides the weights themselves. Generally, the memory usage is made up from the following elements:</p>
+<ul>
+    <li>model weights</li>
+    <li>model gradients</li>
+    <li>optimizer states</li>
+    <li>activations computed during the forward pass and which are needed to compute the backward pass</li>
+    <li>also CUDA Kernels require 1-2GB of GPU memory which you can quickly check yourself by running <code>import torch; torch.ones((1, 1)).to("cuda")</code> and then checking the GPU memory with <code>nvidia-smi</code></li>
+    <li>lower rest memory usage from buffers, intermediate results and some memory that can’t be used due to fragmentation</li>
+</ul>
+
+<p>Scaling up training is usually a question of playing with those constituents to keep memory low while not impacting performance too much. We’ll neglect the last two contributors as there’s usually not that much you can do about them unless you dive deep in the code.</p>
+
+<p>For the rest, they are usually different types of tensors that can have various sizes (usually multiples of one or several of batch size, sequence length, model hidden dimension and some potential sharding) and various precisions (with optimizer states and weights copy being often kept in full FP32 precision while activations can be of lower precision like BF16 or FP8). Let’s try to get some intuition for the memory requirement of these various elements.</p>
+
+<p>Let’s first look at the weights, gradients and optimizer states. They are all dependent on the number of parameters in a model. For a simple LLM the number of parameters is given by the following formula:</p>
+
+<d-math>
+N = h*v + L * (12 * h^2 + 13*h) + 2*h
+</d-math>
+
+<p>In that equation, <em>h</em> corresponds to the hidden dimension, <em>v</em> to the vocabulary size, and <em>L</em> the number of layers in the model. Note that looking at the equation we can see that the term that will dominate at large model scales is the one with <em>h^2</em> since it’s the only term growing quadratically as we scale the models.</p>
+
+<p>Let’s see how the number of parameters translates to memory usage. The memory requirements for the parameters and gradients are the number of parameters multiplied by the number of bytes per parameter. Mixed precision training with BF16 is the default nowadays which requires 2 bytes per parameter. In addition, there are a number of values necessary for the optimizer states: for ADAM it requires the momentum and the variance in FP32, each using 4 bytes, and an additional copy of the model weights in FP32, thus 12 bytes per parameter (ref: <a href="https://arxiv.org/pdf/1910.02054">ZeRO</a>):</p>
+
+<d-math>
+m_{params} = 2 * N 
+m_{grad} = 2 * N 
+m_{opt} = (4+4+4) * N
+</d-math>
+
+<p>In old-fashioned full precision training both parameters and gradients would require 4 bytes each but the optimizer on the other hand wouldn’t need to store an extra full precision copy of the weights:</p>
+
+<d-math>
+m_{params} = 4 * N 
+m_{grad} = 4 * N 
+m_{opt} = (4+4) * N
+</d-math>
+
+<p>So we can easily see that mixed precision itself doesn’t save memory as it just distributes the memory differently across the three components. So by multiplying the number of parameters by 16 (=2+2+12) you can quickly get a sense of how much GPU memory we need for a model:</p>
+
+<table>
+    <thead>
+        <tr>
+            <th>Model parameters</th>
+            <th>Memory requirements</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>1B</td>
+            <td>16 GB</td>
+        </tr>
+        <tr>
+            <td>7B</td>
+            <td>112 GB</td>
+        </tr>
+        <tr>
+            <td>70B</td>
+            <td>1120 GB</td>
+        </tr>
+        <tr>
+            <td>405B</td>
+            <td>6480 GB</td>
+        </tr>
+    </tbody>
+</table>
+
+<p>We can further decrease the memory usage if we choose FP8 training instead of BF16 but it is much less stable and a very active research topic (see <a href="https://x.com/xariusrke/status/1826669126955278401">here</a>) thus we won’t go in details here.</p>
+
+<p>But we are not done yet, we’ll also need to store the forward pass activations which are used during the backward pass to compute the gradients. The total memory required for the activations in mixed precision (which contributes the leading factor of 2 below) is given by the following equation:</p>
+
+<d-math>
+m_{act} =  2 * L* seq * bs * h * (34 +   \frac{5*n_{heads}*seq}{h})
+</d-math>
+
+<p>You can follow <a href="https://arxiv.org/pdf/2205.05198">this NVIDIA paper</a> for a complete derivation, it essentially requires you to do some accounting of all the sizes of intermediate activations between each operation. What’s interesting here is that the memory is not static for a given model but depends critically on the sequence length. We can use the memory formulas and have a look how the memory usage changes for a model for various sequence lengths:</p>
+
+<img src="assets/images/image%206.png" alt="Memory Usage Graph 1">
+<img src="assets/images/image%207.png" alt="Memory Usage Graph 2">
+
+<p>This graph tells a striking story: for short sequences, activations are almost negligible, but starting at around 2-4k tokens they start to take up a significant amount of memory while parameter, gradient and optimizer state are roughly independent of the sequence length and batch size. For large batch/sequence, activations however become by far the largest memory burden.</p>
+
+<p>Is there a way to tame this “activation explosion”?</p>
+
+<p>Good question, reader! I see you’re following well and you’re lucky as the answer is “Yes”! Let’s talk about a technique called <strong>gradient checkpointing</strong> or more frequently <strong>activation recomputation</strong> which can help us cap activation memory footprint and is an essential tool in today’s large model training toolbox.</p>
+
+<h3>Activation recomputation</h3>
+
+<p>The general idea behind gradient checkpointing is to discard some activations to save memory if we are willing to spend some extra compute to recompute them when needed. Typically we will save activations at some key points in memory and discard the rest and recompute them during the backward pass from the nearest activations:</p>
+
+<img src="assets/images/IMG_C4260C5C58DC-1.jpeg" alt="Activation Recompute">
+
+<p>We can select these key activations according to several strategies and modern frameworks usually choose among the following three strategies:</p>
+<ul>
+    <li><strong>None</strong>: We don’t recompute activations during the backward pass and keep all activations in memory. While this is the fastest and thus computationally cheapest option, it also requires the most memory.</li>
+    <li><strong>Full</strong>: The simplest strategy from a conceptual point of view is to checkpoint activations between each Transformer layer. This is usually called the <code>full</code> strategy since it requires a forward pass through each layer essentially adding a full forward pass during the backward pass. This strategy saves the most memory but is the most expensive one in terms of compute. This increases the compute cost by up to 30-40% which is very noticeable.</li>
+    <li><strong>Selective</strong>: In general we can do better than full. The authors of <a href="https://arxiv.org/pdf/2205.05198">this paper</a> did a detailed analysis studying which activations grow the largest and have the cheapest recomputation cost in terms of FLOPs. Turns out that the attention computations fall in that category, and thus we can usually discard them and focus on checkpointing expensive feedforward computations. Note: for a GPT-3 (175B) model this means 70% activation memory reduction at a 2.7% compute cost.</li>
+</ul>
+
+<p>Let’s see how recomputation strategies can drastically reduce the memory footprint while selective recomputation strikes a nice balance between memory saving and recomputation cost:</p>
+
+<img src="assets/images/image%208.png" alt="Recomputation Strategies">
+
+<p>Note: Hardware vs Model flops.</p>
+
+<p>Most frameworks these days use FlashAttention (TODO: see later) which makes the attention computation less memory intensive through kernel fusion, thus most trainings use the <code>full</code> settings.</p>
+
+<p>We can save some GPU memory with activation recomputation but this only delays by a bit the next bottleneck: as hinted earlier for LLM training there is usually a sweet spot for the GBST and we need to work out the training configuration backward from there. However, you can’t choose MBS to be an arbitrary large number on your GPU; at some point you will run out of GPU memory again since you need to store at least some of the activations in memory.</p>
+
+<p>There is a useful trick to compensate for that: <strong>gradient accumulation</strong> (<em>GradAcc</em>). With gradient accumulation we will split our batch in micro-batch, do forward and backward passes repeatedly on each micro-batch, compute the gradients, and, as the name suggests, sum the gradients step by step before doing a final optimizer step.</p>
+
+<p>We call the <code>micro batch size</code> (MBS) the batch size for each forward pass on a single node (the number of samples flowing through the model in one forward pass). We’ll refer to the overall batch size between each optimizer step as the <code>global batch size</code> (GBS). If we do one optimizer step each 8 forward/backward pass, the <code>global batch size</code> will be 8 times the <code>micro batch size</code>.</p>
+
+<p>What we now call <code>global batch size</code> thus corresponds to what we’ve called up to now just <code>batch size</code> for simplicity (we now make the terms more precise to avoid ambiguity).</p>
+
+<p>With gradient accumulation the global batch size can be computed as follows:</p>
+
+<d-math>
+BS = GBS=MBS * GradAcc 
+</d-math>
+
+<p>Gradient accumulation allows us to effectively increase our batch size up to infinity (!) while the memory footprint stays constant. Gradient accumulation is also compatible with activation recomputation for further memory reduction. One drawback however, is that gradient accumulation requires multiple consecutive forward/backward passes per optimization step thereby increasing the compute overhead and slowing down training. No free lunch!</p>
+
+<img src="assets/images/IMG_DA188FF29F45-1.jpeg" alt="Gradient Accumulation">
+
+<p>This is actually a bummer since the forward/backward passes for each micro-batch could actually totally be run in parallel. They are independent from each other and the only changing parameter are the input samples.</p>
+
+<p>Here comes data parallelism to solve exactly this problem! Let’s take a look, you say? Okay sure!</p>
+
+<h3>Data Parallelism</h3>
+
+<p>The idea behind data parallelism (DP) is to parallelize forward and backward passes across GPUs, passing different batches of data per GPU (or groups of GPUs) to the same model instance. Just like for gradient accumulation, we need to average gradients across instances before we do the optimization step. The GBS equation can then be extended to:</p>
+
+<d-math>
+GBS=MBS * GradAcc * DP
+</d-math>
+
+<p>This means that we can reduce the number of gradient accumulation steps in favor of data parallel processes which speeds up training. In practice, people will tend to max out the number of data parallel nodes (the DP above) as much as possible as it’s inherently parallel versus the sequential Gradient Accumulation. Gradient accumulation is then added only to achieve a target batch size if DP alone is not sufficient. One exception to that is pipeline parallelism which we’ll discuss later.</p>
+
+<img src="assets/images/IMG_A95961668B3F-1.jpeg" alt="Data Parallelism">
+
+<p>As you can see on the figure above, some gradients can already be gathered and summed (red boxes) even before gradients down the line (red boxes on the left of the current gradient) are still being computed. This significantly speeds up data parallelism. For instance, as soon as the backward pass of the last layer is done (last boxes on the right) those gradients can already be gathered/summed while the backward pass computations move to earlier layers, aka to the left. This lowers the communication/bandwidth pressure to sync gradients of the full model as it can be performed in part in parallel to the computation of said gradients. See <a href="https://siboehm.com/articles/22/data-parallel-training">this article</a> for more information.</p>
+
+<p>A general recipe to determine an optimal data-parallel setup can be as follows:</p>
+<ol>
+    <li>Determine the best (global) batch size in tokens to use either by consulting literature or running experiments? This determines the GBST.</li>
+    <li>Select a sequence length for training, again by either consulting literature or running experiments. Generally 2-8k tokens works reliably well.</li>
+    <li>You now know the batch size (GBS=GBST/SeqLen). Find the maximum MBS on a single GPU by increasing the local batch size until you run out of memory. This determines the MBS.</li>
+    <li>Finally, the number of available GPUs corresponds to the potential DP. The ratio of GPT to DP determines the remaining number of gradient accumulation steps needed for the desired GBS.</li>
+</ol>
+
+<p>If the gradient accumulation ratio is lower than one, i.e. you have too many GPUs (!), you can either choose to not use all your GPUs or test if a lower MBS will speed up training. In these cases, you may want to prioritize throughput over the individual GPU utilization, you can then choose DP first and use a smaller MBS than possible in order to speed up training.</p>
+
+<p>Time to take a concrete example: We want to train a model with a GBS of 4M tokens and a sequence length of 4k. This means our batch size will be 1024 samples (we pick powers of two). We observe that a single of our GPU can fit MBS=2 in memory and we have 128 GPUs available for training. This means with 4 gradient accumulation steps we’ll achieve our goal of 1024 samples or 4M tokens per training step. Now what if we suddenly have 1024 GPUs available? We can achieve the same GBS and thus identical training by setting both MBS and gradient accumulation to 1 speeding up training significantly.</p>
+
+<p>[EXPERIMENTS WHERE WE INCREASE DP AND SHOW THROUGHPUT FOR SEVERAL MODELS]</p>
+
+<p>We’ve explored data parallelism, a simple strategy to scale training across more GPUs and gives consistent speed improvements. The keen reader might have noticed however that it rests on the assumption that we can fit at least one input sample forward pass (<em>MBS=1</em>) into our GPU memory. This is not always the case! In particular for larger models which often don’t fit into a single GPU anymore even with activation recomputations activated.</p>
+
+<p>In such case, we need to shard the model across devices! We’ll now study two complementary sharding methods, tensor and pipeline parallelism which are doing that. Let’s start by the simplest, tensor parallelism!</p>
+
+<h3>Tensor Parallelism</h3>
+
+<p>So you’ve exhausted all the previous textbook tricks to try to fit your model on a single GPU but it still doesn’t fit? Let’s try to distribute this model across several GPUs. Unlike DP we will not simply duplicate the model but various parts of the model instance will be living on various GPUs.</p>
+
+<p>If we take a look at a typical matrix multiplication (the core of a neural network), we can get an idea about how we could split the model:</p>
+
+<img src="assets/images/image%209.png" alt="Matrix Multiplication Example">
+
+<p>Tensor parallelism is a technique in which a tensor is split into N shards along a particular dimension across N GPUs. Matrices can be split either on the column part or row part leading to row and column parallelism. Depending on which splitting strategy we choose will require different communications primitives.</p>
+
+<p><strong>Column linear:</strong></p>
+<ul>
+    <li>Splitting by column or row involves different synchronization primitives:
+        <ul>
+            <li>column:
+                <ul>
+                    <li>A <strong>Broadcast</strong> operation is used to send the same input to different GPUs,</li>
+                    <li>Multiplications are done independently on the GPUs, and finally</li>
+                    <li>An <strong>All-gather</strong> operation is used to gather the output results.</li>
+                </ul>
+            </li>
+            <li>Row:
+                <ul>
+                    <li>A <strong>Scatter</strong> operation is used to split the input and send it to different GPUs (we split the weight row-wise),</li>
+                    <li>Multiplications are done independently on the GPUs, and finally</li>
+                    <li>An <strong>All-reduce</strong> operation is used to add the results together and the full output results.</li>
+                </ul>
+            </li>
+        </ul>
+    </li>
+</ul>
+
+<p>This was for an example matrix multiplication. How do we apply this in practice to a real model? In the Transformer, there are 2 basic building blocks where tensor parallel can be applied:</p>
+<ul>
+    <li>Feedforward layers (MLP)</li>
+    <li>Multi-Head Attention (MHA)</li>
+</ul>
+
+<p>Feedforward layers comprise 2 successive MLPs with a non-linearity in-between. Here is the first part of it:</p>
+
+<img src="assets/images/image%2012.png" alt="Feedforward Layers">
+
+<p>Should we use row or column parallelization for the first MLP?</p>
+
+<p>Well it turns out parallelized GeLU only works in Column schema:</p>
+
+<p>In column schema:</p>
+<d-math>
+GeLU(cat([XW1, XW2])) = cat([GeLU(XW1),  GeLU(XW2)])
+</d-math>
+
+<p>In row schema:</p>
+<d-math>
+GeLU(XW1 + XW2) \neq GeLU(XW1) + GeLU(XW2)
+</d-math>
+
+<p>If you rather like code, note that we can prove this with the following snippet as well:</p>
+
+<pre>
+def example_gelu():
+    from torch.nn.functional import gelu
+    
+    X = torch.randn(4, 2, device="cuda", dtype=torch.float32)
+    W = torch.randn(2, 2, device="cuda", dtype=torch.float32)
+    
+    W_0, W_1 = W.chunk(2, dim=1)
+    
+    # Column linear
+    y_col_1 =  torch.cat([gelu(X @ W_0), gelu(X @ W_1)], dim=1)
+    y_col_2 = gelu(torch.cat([X @ W_0, X @ W_1], dim=1))
+    
+    # All match
+    torch.testing.assert_close(y_col_1, y_col_2, rtol=1e-5, atol=1e-5)
+    
+    # Row linear
+    X_0, X_1 = X.chunk(2, dim=1)
+    W_0, W_1 = W.chunk(2, dim=0)
+    y_row_1 = gelu(X_0 @ W_0) +  gelu(X_1 @ W_1)
+    y_row_2 = gelu(X_0 @ W_0 + X_1 @ W_1)
+    
+    # Mismatch
+    torch.testing.assert_close(y_row_1, y_row_2, rtol=1e-5, atol=1e-5)
+</pre>
+
+<p>To avoid a synchronization step directly after the first MLP, we’ll thus start with Column Parallel and be able to directly perform parallel GELU.</p>
+
+<p>Now, what about the second MLP? Should it be column or row parallel? Let’s draft both options:</p>
+<ul>
+    <li>Column Parallel followed by Column Parallel</li>
+    <img src="assets/images/image%2013.png" alt="Column Parallel Schema 1">
+    <li>Column Parallel followed by Row Parallel</li>
+    <img src="assets/images/image%2014.png" alt="Column Parallel Schema 2">
+</ul>
+
+<p>We see that the “Column Parallel followed by Row Parallel” schema only involves two communications instead of four. It’s thus the most efficient schema in terms of communications.</p>
+
+<p>Let’s take a quick look at the backward pass:</p>
+<img src="assets/images/image%2015.png" alt="Backward Pass 1">
+<img src="assets/images/image%2016.png" alt="Backward Pass 2">
+
+<pre>
+def column_linear_forward(X, local_W, group):
+    Y_local = X @ local_W.t()
+    return Y_local
+
+def column_linear_backward(local_grad_Y, X, local_W, group):
+    local_grad_X = local_grad_Y @ local_W
+    grad_W = local_grad_Y.t() @ X        
+    return local_grad_X, grad_W
+
+def row_linear_forward(local_X, local_W, group):
+    Y_local = local_X @ local_W.t()
+    dist.all_reduce(Y_local, group=group)
+    Y = Y_local
+    return Y
+
+def row_linear_backward(grad_Y, X, local_W, group):
+    local_grad_X = grad_Y @ local_W
+    grad_W = grad_Y.t() @ X
+    return local_grad_X, grad_W
+
+def example_column_row_linear():
+    # torchrun --nproc_per_node=2 tp_all_reduce.py
+    group = dist.distributed_c10d._get_default_group()
+
+    X_ref = torch.arange(4 * 2, device="cuda", dtype=torch.float32, requires_grad=True).reshape(4, 2)
+    W_ref_layer1 = torch.arange(1, 5, device="cuda", dtype=torch.float32, requires_grad=True).reshape(2, 2) * 10
+    W_ref_layer2 = torch.arange(1, 5, device="cuda", dtype=torch.float32, requires_grad=True).reshape(2, 2)
+
+    X_ref.retain_grad()
+    W_ref_layer1.retain_grad()
+    W_ref_layer2.retain_grad()
+    
+    dist.broadcast(X_ref, src=0, group=group)
+    dist.broadcast(W_ref_layer1, src=0, group=group)
+    dist.broadcast(W_ref_layer2, src=0, group=group)
+    
+    X = X_ref.clone()
+    W_layer1 = W_ref_layer1.clone()
+    W_layer2 = W_ref_layer2.clone()
+    
+    # Forward
+    Y_ref_linear1 = X_ref @ W_ref_layer1.t()
+    Y_ref_linear1.retain_grad()
+
+    # We will transpose for matrix multiplication. As a result, we need to split row-wise
+    Y_local_linear1 = column_linear_forward(X, split_tensor(W_layer1, dim=0), group)
+
+    torch.testing.assert_close(Y_local_linear1, split_tensor(Y_ref_linear1, dim=1), rtol=1e-5, atol=1e-5)
+    
+    Y_local_linear2 = row_linear_forward(Y_local_linear1, split_tensor(W_ref_layer2, dim=1), group)
+    Y_ref_linear2 = Y_ref_linear1 @ W_ref_layer2.t()
+    torch.testing.assert_close(Y_local_linear2, Y_ref_linear2, rtol=1e-5, atol=1e-5)
+    
+    # Backward
+    Y_ref_linear2.sum().backward()
+    
+    grad_Y = torch.ones_like(Y_ref_linear2)
+    grad_X_linear2, grad_W_linear2 = row_linear_backward(grad_Y, Y_local_linear1, split_tensor(W_layer2, dim=1), group)
+
+    torch.testing.assert_close(grad_X_linear2, split_tensor(Y_ref_linear1.grad, dim=1), rtol=1e-5, atol=1e-5)
+    torch.testing.assert_close(grad_W_linear2, split_tensor(W_ref_layer2.grad, dim=1), rtol=1e-5, atol=1e-5)
+
+    grad_X, grad_W = column_linear_backward(grad_X_linear2, X, split_tensor(W_layer1, dim=0), group)
+
+    torch.testing.assert_close(grad_X, X_ref.grad, rtol=1e-5, atol=1e-5)
+    torch.testing.assert_close(grad_W, split_tensor(W_ref_layer1.grad, dim=0), rtol=1e-5, atol=1e-5)
+
+if __name__ == "__main__":
+    dist.init_process_group("nccl", rank=int(os.environ["RANK"]), world_size=int(os.environ["WORLD_SIZE"]))
+    torch.cuda.set_device(int(os.environ["LOCAL_RANK"]))
+
+    example_column_row_linear()
+</pre>
+
+<p>Now that we’ve found the most efficient schema for the Feedforward part of the transformer, let’s take a look at the multi-head attention block (MHA).</p>
+
+<p>We can generally follow a similar approach where the Q, K, V will be split in a Column Parallel fashion and the output projection will be split along the Row dimension.</p>
+
+<img src="assets/images/image%2017.png" alt="Multi-Head Attention Block">
+
+<p>To dive in further particularities, a nice reference paper detailing TP is for instance <a href="https://arxiv.org/abs/2205.05198">Megatron-LM: Training Multi-Billion Parameter Language Models Using Model Parallelism</a>.</p>
+
+<p>Note: Sequence Parallel</p>
+
+<h3>Sequence Parallelism</h3>
+
+<p>Tensor parallelism has been a great help to parallelize some of our computation on several GPU nodes with the limited cost of a few communication operations.</p>
+
+<p>It also had the additional benefit of reducing memory usage by splitting intermediate activations inside the feedforward elements across GPUs and thereby reducing the activations to store on each node.</p>
+
+<p>Could we push this approach further?</p>
+
+<p>Sequence parallelism applies this same idea to other parts of our model. We’ve applied tensor parallelism to two main parts in our models where combination of MLP allowed to naturally split the weights along major axis.</p>
+
+<p>The rest of the model mostly comprises layer norms, dropout and various summation of residuals, these contribute little to the computation but come with rather large forward activations to store.</p>
+
+<p>[Add some illustration of the forward activations to store for each part]</p>
+
+<h3>Context Parallelism</h3>
+
+<p>Even though TP-SP mode helps reduce the memory used by activation values, it has two main drawbacks:</p>
+<ol>
+    <li>Internode connections are usually slow, so the TP degree shouldn't typically exceed 8</li>
+    <li>The TP degree is limited by the number of Key/Value heads, which is 8 for LLaMA 3 8B.</li>
+</ol>
+
+<p>An empirical estimation is that with TP=8, you can only train an 8B model with a 20K context length. However, LLaMA 3.1 has managed to scale the context length to 128K by using context parallelism.</p>
+
+<p>There are several ways to implement sequence parallelism. We used ring attention, which overlaps communication and computation. LLaMA3.1 uses all-gather along the sequence dimension because it is easier and more flexible to support different types of attention masks in all-gather based CP attention, such as the document mask.</p>
+
+<h3>Pipeline Parallelism</h3>
+
+<h3>Overlapping computation and communication</h3>
+
+<h3>ZeRO</h3>
+
+<h2>II – Architecture</h2>
+
+<h3>Transformers</h3>
+
+<h3>Choosing the right dimensions</h3>
+
+<h3>Positional Embeddings (Learned, RoPE, ALiBi)</h3>
+
+<h3>RoPE</h3>
+
+<p>In the transformer model, tokens have no inherent information about their positional information. For these reasons, we need to use a positional encoding function.</p>
+
+<p>Assuming that in the multi-head attention layer, <em>q_m</em> is the “position-aware” query vector corresponding to a token at position <em>m</em>, <em>k_n</em> the “position-aware” key vector corresponding to the token at position <em>n</em> and <em>f</em> is our position embedding function, we would like our position vector to be a function of the input vectors and absolute positions like this:</p>
+
+<d-math>
+q_m = f(q,m)
+k_n = f(k,n)
+</d-math>
+
+<p>We may also want the positional encoding to model relative positional information between two input tokens. Relative positions help the model to operate across longer context spans and even context lengths not seen during training. The attention operation is generally a dot product operation between “position-aware” vectors <em>q</em> and <em>k</em>, so for a positional encoding that contains relative positional information, we’ll want to have:</p>
+
+<d-math>
+<q_m, k_n> = g(q, k, m-n)
+</d-math>
+
+<p>In other words, we want the result of <em>⟨ 𝑞_𝑚 , 𝑘_𝑛 ⟩</em> to depend on the values of <em>q</em> and <em>k</em> themselves, as well as their relative position <em>m − n</em>, but not <em>m</em> and <em>n</em>. This way, the model can focus on the relative difference between two tokens rather than their absolute positions.</p>
+
+<p>Let’s show that the RoPE positional embedding formulation satisfies the above formula.</p>
+
+<p><strong>Rotation matrix</strong></p>
+
+<p>RoPE are based on rotation matrices which have simple and interesting properties for us. In a 2D space, a rotation matrix has the following form:</p>
+
+<d-math>
+R(θ) =
+\begin{pmatrix}
+\cosθ & -\sinθ \\
+\sinθ & \cosθ
+\end{pmatrix}
+</d-math>
+
+<p>The rotation matrix has the following properties:</p>
+<ul>
+    <li><em>R(θ)</em><sup>T</sup> = <em>R(-θ)</em></li>
+    <li><em>R(θ<sub>1</sub>)R(θ<sub>2</sub>) = R(θ<sub>1</sub>+θ<sub>2</sub>)</li>
+</ul>
+
+<img src="assets/images/rotation.jpeg" alt="Rotation Matrix">
+
+<p><strong>RoPE in 2D space</strong></p>
+
+<p>Assuming <em>q</em> and <em>k</em> are 2D column vectors, we can show that:</p>
+
+<d-math>
+<R(θ_1)q, R(θ_2)k> = (R(θ_1)q)<sup>T</sup> (R(θ_2)k) = q<sup>T</sup>R(-θ_1)R(θ_2)k = q<sup>T</sup>R(θ_2-θ_1)k = (R(θ_1-θ_2)q)<sup>T</sup>k = <R(θ_1-θ_2)q,k>
+</d-math>
+
+<p>Therefore, if we define our position embedding like this: <em>f(x, m) = R(mθ)x</em> where <em>R</em> is a 2D rotation matrix, we have <em>q_m = R(mθ)q</em> and <em>k_n = R(nθ)k</em> and then:</p>
+
+<d-math>
+<q_m, k_n> = <R(mθ)q, R(nθ)k> = <R((m-n)θ)q, k>
+</d-math>
+
+<p>We can see that a multiplication with a rotation matrix is exactly the positional encoding we were looking for. The result of <em>⟨ 𝑞_𝑚 , 𝑘_𝑛 ⟩</em> only depends on <em>q</em>, <em>k</em> and <em>m-n</em>.</p>
+
+<p><strong>Implementation</strong></p>
+
+<p>In our case, our internal vectors (the activations in our model) have much more than two elements. Let’s pair elements to get 2D vectors and apply the 2D rotation operation on these pairs.</p>
+
+<p>There are combinatorially many ways we can pair elements but generally two options are the most popular for implementing RoPE: we call them the <em>interleaved</em> and <em>non-interleaved</em> versions. (It’s still rather unfortunate to have two popular options)</p>
+
+<ol>
+    <li>In the interleaved version, we pair consecutive elements <em>(x<sub>0</sub>, x<sub>1</sub>),(x<sub>2</sub>,x<sub>3</sub>),…</em> before applying the rotation matrix:</li>
+    <d-math>
+R<sup>d</sup>_{θ,m}x=\begin{pmatrix}
+x_0 \\
+x_1 \\
+x_2 \\
+x_3 \\
+\vdots \\
+x_{d-2} \\
+x_{d-1}
+\end{pmatrix}
+\odot
+\begin{pmatrix}
+\cos mθ_0 \\
+\cos mθ_0 \\
+\cos mθ_1 \\
+\cos mθ_1 \\
+\vdots \\
+\cos mθ_{d/2-1} \\
+\cos mθ_{d/2-1}
+\end{pmatrix}
++
+\begin{pmatrix}
+-x_1 \\
+x_0 \\
+-x_3 \\
+x_2 \\ 
+\vdots \\
+-x_{d-1} \\
+x_{d-2}
+\end{pmatrix}
+\odot
+\begin{pmatrix}
+\sin mθ_0 \\
+\sin mθ_0 \\
+\sin mθ_1 \\
+\sin mθ_1 \\
+\vdots \\
+\sin mθ_{d/2-1} \\
+\sin mθ_{d/2-1}
+\end{pmatrix} 
+    </d-math>
+    <d-math>
+R<sup>d</sup>_{θ,m}x=\begin{pmatrix}
+x_0\cos mθ_0 - x_1\sin mθ_0 \\
+x_1\cos mθ_0 + x_0\sin mθ_0 \\
+x_2\cos mθ_1 - x_3\sin mθ_1 \\
+x_3\cos mθ_1 + x_2\sin mθ_1 \\
+\vdots \\
+x_{d-2}\cos mθ_{d/2-1} - x_{d-1}\sin mθ_{d/2-1}  \\
+x_{d-1}\cos mθ_{d/2-1} + x_{d-2}\sin mθ_{d/2-1}
+\end{pmatrix}
+    </d-math>
+    <li>In the non-interleaved version, we split the vector in two to pair elements as follows: <em>(x<sub>0</sub>, x<sub>d/2</sub>),(x<sub>1</sub>,x<sub>d/2+1</sub>),…</em> This is the implementation used in the <code>transformers</code> library:</li>
+    <d-math>
+R<sup>d</sup>_{θ,m}x=\begin{pmatrix}
+x_0 \\
+x_1 \\
+\vdots \\
+x_{d/2-1} \\
+x_{d/2} \\
+x_{d/2+1} \\
+\vdots \\
+x_{d-1}
+\end{pmatrix}
+\odot
+\begin{pmatrix}
+\cos mθ_0 \\
+\cos mθ_1 \\
+\vdots \\
+\cos mθ_{d/2-1} \\
+\cos mθ_{0} \\
+\cos mθ_{1} \\
+\vdots \\
+\cos mθ_{d/2-1}
+\end{pmatrix}
++
+\begin{pmatrix}
+-x_{d/2} \\
+-x_{d/2+1} \\
+\vdots \\
+-x_{d-1} \\
+x_{0} \\
+x_{1} \\
+\vdots \\
+x_{d/2-1}
+\end{pmatrix}
+\odot
+\begin{pmatrix}
+\sin mθ_0 \\
+\sin mθ_1 \\
+\vdots \\
+\sin mθ_{d/2-1} \\
+\sin mθ_{0} \\
+\sin mθ_{1} \\
+\vdots \\
+\sin mθ_{d/2-1}
+\end{pmatrix}
+    </d-math>
+    <d-math>
+R<sup>d</sup>_{θ,m}x=\begin{pmatrix}
+x_0\cos mθ_0 - x_{d/2}\sin mθ_0 \\
+x_1\cos mθ_1 - x_{d/2+1}\sin mθ_1 \\
+\vdots \\
+x_{d/2-1}\cos mθ_{d/2-1} - x_{d-1}\sin mθ_{d/2-1}  \\
+x_{d/2}\cos mθ_0 + x_0\sin mθ_0  \\
+x_{d/2+1}\cos mθ_1 + x_0\sin mθ_1  \\
+\vdots \\
+x_{d-1}\cos mθ_{d/2-1} + x_{d-1}\sin mθ_{d/2-1}  \\
+\end{pmatrix}
+    </d-math>
+    <p>The angle of rotation, <em>θ<sub>i</sub></em> is defined as follows, where <em>d</em> is the dimension of the attention head:</p>
+    <d-math>
+θ<sub>i</sub> = base<sup>-2(i-1)/d</sup>, i∈  [1,2,...,d/2]
+    </d-math>
+    <p>How does this look? When moving the same distance, vectors in some dimensions rotate faster than vectors in other dimensions.</p>
+    <img src="assets/images/rotation_speed.jpeg" alt="Rotation Speed">
+</ol>
+
+<h3>Attention (MHA, MQA, GQA)</h3>
+
+<h2>Optimized Operations</h2>
+
+<h3>Flash Attention 1&2&3</h3>
+
+<h3>Fused Kernels</h3>
+
+<h2>III – Training Recipe</h2>
+
+<h3>Batch Size</h3>
+
+<h3>Initialization + rescaling activations inside the model</h3>
+
+<h3>Numerical Precision</h3>
+
+<h4>FP16/BF16/FP8</h4>
+
+<p>@Phuc Nguyen?</p>
+
+<h3>Long Context Training</h3>
+
+<h3>Evaluation</h3>
+
+<p>@Haojun Zhao</p>
+
+<h3>Infini-Attention</h3>
+
+<p>@Phuc Nguyen</p>
+
+<h3>Ring Attention</h3>
+
+<p>@Haojun Zhao</p>
+
+<h3>RoPE scaling / Yarn</h3>
+
+<p>@Haojun Zhao maybe?</p>
+
+<h2>References</h2>
+
+<ul>
+    <li>Harm’s posts:
+        <ul>
+            <li><a href="https://www.harmdevries.com/post/context-length/">https://www.harmdevries.com/post/context-length/</a></li>
+            <li><a href="https://www.harmdevries.com/post/model-size-vs-compute-overhead/">https://www.harmdevries.com/post/model-size-vs-compute-overhead/</a></li>
+        </ul>
+    </li>
+    <li>Stas’ guides:
+        <ul>
+            <li><a href="https://github.com/stas00/ml-engineering">https://github.com/stas00/ml-engineering</a></li>
+            <li><a href="https://github.com/bigscience-workshop/bigscience/blob/master/train/tr11-176B-ml/chronicles.md">https://github.com/bigscience-workshop/bigscience/blob/master/train/tr11-176B-ml/chronicles.md</a></li>
+        </ul>
+    </li>
+    <li>data parallel: <a href="https://siboehm.com/articles/22/data-parallel-training">https://siboehm.com/articles/22/data-parallel-training</a></li>
+    <li>ZeRO: <a href="https://arxiv.org/abs/1910.02054">https://arxiv.org/abs/1910.02054</a></li>
+    <li>TP/SP + Selective Recomputation: <a href="https://arxiv.org/abs/2205.05198">https://arxiv.org/abs/2205.05198</a></li>
+</ul>
+    <h2>Conclusion and looking forward</h2>
+    <p>Through our open science efforts we hope to keep shining a light on the black box that is the training of high performance large language models as well as to give every model trainer the ability to create state-of-the-art LLMs. We are excited to continue iterating on FineWeb and to release increasingly better filtered subsets of web data, in a fully open and reproducible manner.</p>
+    <p>In the short term, we are looking forward to applying the learnings from (English) FineWeb to other languages. While English currently dominates the LLM landscape, we believe that making high quality web data in other languages as accessible as possible would be incredibly impactful.</p>
+    <p>In a nutshell: the future is bright and exciting for studying the science of creating datasets at scale and in the open 🤗.</p>
+</d-article>
+
+<d-appendix>
+    <d-bibliography src="bibliography.bib"></d-bibliography>
+    <style>
+      d-appendix .citation {
+        font-size: 11px;
+        line-height: 15px;
+        border-left: 1px solid rgba(0, 0, 0, 0.1);
+        padding-left: 18px;
+        border: 1px solid rgba(0,0,0,0.1);
+        background: rgba(0, 0, 0, 0.02);
+        padding: 10px 18px;
+        border-radius: 3px;
+        color: rgba(150, 150, 150, 1);
+        overflow: hidden;
+        margin-top: -12px;
+        white-space: pre-wrap;
+        word-wrap: break-word;
+      }
+    </style>
+
+    <h3 id="citation">Citation</h3>
+    <p>For attribution in academic contexts, please cite this work as</p>
+    <pre class="citation short">Penedo, et al., "The FineWeb Datasets: Decanting the Web for the Finest Text Data at Scale", 2024.</pre>
+    <p>BibTeX citation</p>
+    <pre class="citation long">@misc{penedo2024finewebdatasetsdecantingweb,
+      title={The FineWeb Datasets: Decanting the Web for the Finest Text Data at Scale},
+      author={Guilherme Penedo and Hynek Kydlíček and Loubna Ben allal and Anton Lozhkov and Margaret Mitchell and Colin Raffel and Leandro Von Werra and Thomas Wolf},
+      year={2024},
+      eprint={2406.17557},
+      archivePrefix={arXiv},
+      primaryClass={cs.CL}
+      url={https://arxiv.org/abs/2406.17557},
+}</pre>
+</d-appendix>
+
+<script>
+    const article = document.querySelector('d-article');
+    const toc = document.querySelector('d-contents');
+    if (toc) {
+        const headings = article.querySelectorAll('h2, h3, h4');
+        let ToC = `<nav role="navigation" class="l-text figcaption"><h3>Table of contents</h3>`;
+        let prevLevel = 0;
+
+        for (const el of headings) {
+            // should element be included in TOC?
+            const isInTitle = el.parentElement.tagName == 'D-TITLE';
+            const isException = el.getAttribute('no-toc');
+            if (isInTitle || isException) continue;
+            el.setAttribute('id', el.textContent.toLowerCase().replaceAll(" ", "_"))
+            const link = '<a target="_self" href="' + '#' + el.getAttribute('id') + '">' + el.textContent + '</a>';
+
+            const level = el.tagName === 'H2' ? 0 : (el.tagName === 'H3' ? 1 : 2);
+            while (prevLevel < level) {
+                ToC += '<ul>'
+                prevLevel++;
+            }
+            while (prevLevel > level) {
+                ToC += '</ul>'
+                prevLevel--;
+            }
+            if (level === 0)
+                ToC += '<div>' + link + '</div>';
+            else
+                ToC += '<li>' + link + '</li>';
+        }
+
+        while (prevLevel > 0) {
+            ToC += '</ul>'
+            prevLevel--;
+        }
+        ToC += '</nav>';
+        toc.innerHTML = ToC;
+        toc.setAttribute('prerendered', 'true');
+        const toc_links = document.querySelectorAll('d-contents > nav a');
+
+        window.addEventListener('scroll', (_event) => {
+            if (typeof (headings) != 'undefined' && headings != null && typeof (toc_links) != 'undefined' && toc_links != null) {
+                // Then iterate forwards, on the first match highlight it and break
+                find_active: {
+                    for (let i = headings.length - 1; i >= 0; i--) {
+                        if (headings[i].getBoundingClientRect().top - 50 <= 0) {
+                            if (!toc_links[i].classList.contains("active")) {
+                                toc_links.forEach((link, _index) => {
+                                    link.classList.remove("active");
+                                });
+                                toc_links[i].classList.add('active');
+                            }
+                            break find_active;
+                        }
+                    }
+                    toc_links.forEach((link, _index) => {
+                        link.classList.remove("active");
+                    });
+                }
+            }
+        });
+    }
+</script>
+</body>
+</html>

src/index.js

@@ -0,0 +1,10 @@
+// import { plotClusters } from './clusters'
+import { init_ablation_plot } from './plotting'
+import 'katex/dist/katex.min.css';
+import katex from 'katex';
+
+document.addEventListener("DOMContentLoaded", () => {
+    console.log("DOMContentLoaded");
+    // plotClusters();
+    init_ablation_plot();
+}, { once: true });

src/plotting.js

@@ -0,0 +1,383 @@
+import { getColor, COLORS } from "./colors.mjs"
+import Plotly from "plotly.js-basic-dist-min"
+import _ from "lodash"
+
+const DATA_FOLDER = "assets/data/plots"
+
+
+const LINE_SETTINGS = {
+    width: 2.5,
+    type: "scatter",
+    mode: "lines",
+}
+const BAR_SETTINGS = {
+    width: 0.5,
+    type: "bar",
+    opacity: 0.9,
+    marker: {
+        line: {
+            width: 1.0
+        }
+    }
+}
+
+const METRIC_ID_TO_PRIORITY = {
+    "agg_score": 0,
+    "hellaswag/acc_norm": 1,
+    "arc/acc_norm": 2,
+    "mmlu/acc_norm": 3,
+    "openbookqa/acc_norm": 4,
+    "commonsense_qa/acc_norm": 5,
+    "piqa/acc_norm": 6,
+    "siqa/acc_norm": 7,
+    "winogrande/acc_norm": 8,
+
+
+    // Stats
+    "lines_ended_with_punct": 0,
+    "lines_chars": 1,
+    "short_lines": 2,
+}
+
+const TASK_ID_TO_NAME = {
+    // Ablations
+    agg_score: "Aggregate Score",
+    "commonsense_qa/acc_norm": "Commonsense QA",
+    "hellaswag/acc_norm": "HellaSwag",
+    "openbookqa/acc_norm": "OpenBook QA",
+    "piqa/acc_norm": "PIQA",
+    "siqa/acc_norm": "Social IQA",
+    "winogrande/acc_norm": "WinoGrande",
+    "arc/acc_norm": "ARC",
+    "mmlu/acc_norm": "MMLU",
+
+    // Stats
+    "lines_ended_with_punct": "Lines Ended With Punctuation",
+    "lines_chars": "Lines Chars",
+    "short_lines": "Short Lines",
+};
+
+const DATASET_ID_TO_NAME = {
+    pii_removed: "Fineweb",
+    allenai_c4_en: "C4",
+    "tiiuae_falcon-refinedweb_data": "RefinedWeb",
+    "red-pajama-v2_jsonl-deduplicated-extract": "RedPajamaV2",
+    "dolma-sample": "Dolma1.6",
+    dedup_minhash_independent_output: "Independent Dedup MinHash",
+    "dedup_minhash_CC-MAIN-2013-48_output": "Full MinHash CC-MAIN-2013-48",
+    "dedup_minhash_independent_output_CC-MAIN-2013-48": "Independent MinHash CC-MAIN-2013-48",
+    "ind_minhash-CC-MAIN-2019-18": "Independent MinHash CC-MAIN-2019-18",
+    "wet-extraction-2019-18": "WET Extraction 2019-18",
+    "dedup_minhash_CC-MAIN-2013-48_output": "Full MinHash CC-MAIN-2013-48",
+    "dedup_minhash_independent_output_CC-MAIN-2013-48": "Independent MinHash CC-MAIN-2013-48",
+
+};
+
+const DEFAULT_SETTINGS = {
+    slider: {
+        max: 30,
+        min: 0,
+        default: 0,
+    },
+    defaultMetric: "agg_score",
+    type: "line"
+};
+
+const DEFAULT_LAYOUT = {
+    font: {
+        family: "apple-system, Arial, sans-serif",
+    },
+    title: {
+        text: "Plot Title",
+        font: {
+            size: 19,
+            family: "apple-system, Arial, sans-serif",
+        },
+    },
+    xaxis: {
+        title: {
+            text: "Training tokens (billions)",
+            font: {
+                size: 15,
+                family: "apple-system, Arial, sans-serif",
+            },
+        },
+        tickfont: {
+            size: 14,
+            family: "apple-system, Arial, sans-serif",
+        },
+        showgrid: false,
+        mirror: true,
+        ticks: "outside",
+        showline: true,
+    },
+    yaxis: {
+        title: {
+            text: "Agg Score",
+            font: {
+                size: 15,
+                family: "apple-system, Arial, sans-serif",
+            },
+            standoff: 10,
+        },
+        showgrid: false,
+        mirror: true,
+        ticks: "outside",
+        showline: true,
+        tickfont: {
+            size: 14,
+            family: "apple-system, Arial, sans-serif",
+        },
+    },
+    yaxis2: {
+        title: {
+            text: "Words Contamination",
+            font: {
+                size: 15,
+                family: "apple-system, Arial, sans-serif",
+            },
+            standoff: 10,
+        },
+        tickfont: {
+            size: 14,
+            family: "apple-system, Arial, sans-serif",
+        },
+        showgrid: false,
+        ticks: "outside",
+    },
+    legend: {
+        orientation: "v",
+        xanchor: "right",
+        yanchor: "bottom",
+        x: 1,
+        y: 0,
+        font: {
+            size: 14,
+            family: "apple-system, Arial, sans-serif",
+        },
+        bgcolor: "rgba(0,0,0,0)",
+    },
+    margin: {
+        t: 30,
+        b: 50,
+    },
+    height: 400,
+};
+
+const getAutoRange = (traces) => {
+    let minX = Math.min(...traces.flatMap((trace) => trace.x));
+    let maxX = Math.max(...traces.flatMap((trace) => trace.x));
+    return [minX * 0.95, maxX * 1.05];
+};
+
+const getColorForTrace = (traceName, colorsMapping, index) => {
+    // First check if the color already exists in colorsMaping and if so return it
+    const reusedColor = colorsMapping.get(traceName)
+    if (reusedColor) {
+        return reusedColor
+    }
+
+    let color = getColor(index)
+    while (colorsMapping.has(color) && index < COLORS.length) {
+        index += 1
+        color = getColor(index)
+    }
+    colorsMapping.set(traceName, color)
+    return color
+}
+
+
+const createAblationPlottingElements = (
+    plotElement,
+    indexMapping,
+    settings
+) => {
+    const plot = document.createElement("figure");
+    const controls = document.createElement("div");
+    plot.classList.add("plotly");
+    controls.classList.add("plotly_controls");
+    plotElement.appendChild(plot);
+    plotElement.appendChild(controls);
+
+    const metricOptions = Object.keys(indexMapping).filter(
+        (metric) => metric in TASK_ID_TO_NAME
+    );
+    // Dropdown
+    let dropdown = undefined
+    if (metricOptions.length > 1) {
+        const dropdownLabel = document.createElement("label");
+        dropdownLabel.textContent = "Metric:";
+        dropdown = document.createElement("select");
+        dropdown.innerHTML = metricOptions
+            .sort((a, b) => (METRIC_ID_TO_PRIORITY[a] ?? 0) - (METRIC_ID_TO_PRIORITY[b] ?? 0))
+            .map(
+                (option) =>
+                    `<option value="${option}">${TASK_ID_TO_NAME[option]}</option>`
+            )
+            .join("");
+        dropdown.value = settings.defaultMetric;
+
+        const dropdownContainer = document.createElement("div");
+        dropdownContainer.classList.add("plotly_input_container");
+        dropdownContainer.appendChild(dropdownLabel);
+        dropdownContainer.appendChild(dropdown);
+        controls.appendChild(dropdownContainer);
+    }
+
+    let slider = undefined;
+    if (settings.slider !== null) {
+        const sliderLabel = document.createElement("label");
+        sliderLabel.textContent = "Rolling window:";
+        slider = document.createElement("input");
+        slider.type = "range";
+        slider.min = settings.slider.min;
+        slider.max = settings.slider.max;
+        slider.value = settings.slider.default;
+
+        // current value
+        const sliderValue = document.createElement("span");
+        sliderValue.textContent = slider.value;
+        slider.addEventListener("input", () => {
+            sliderValue.textContent = slider.value;
+        });
+        const sliderInputContainer = document.createElement("div");
+        sliderInputContainer.classList.add("plotly_slider");
+        sliderInputContainer.appendChild(slider);
+        sliderInputContainer.appendChild(sliderValue);
+
+        const sliderContainer = document.createElement("div");
+        sliderContainer.classList.add("plotly_input_container");
+
+        sliderContainer.appendChild(sliderLabel);
+        sliderContainer.appendChild(sliderInputContainer);
+        controls.appendChild(sliderContainer);
+    }
+    let caption = undefined
+    if (settings.caption) {
+        caption = document.createElement("figcaption");
+        caption.classList.add("plotly_caption");
+        caption.textContent = settings.caption;
+        plotElement.appendChild(caption);
+    }
+
+    return { dropdown, slider, plot, caption };
+};
+
+const rollingWindow = function (data, windowSize) {
+    if (windowSize === 0) {
+        return data;
+    }
+    const rollingData = [];
+
+    // Start at halfWindowSize to ensure we can get a full window
+    for (let i = windowSize; i < data.length; i++) {
+        const windowStart = i - windowSize;
+        const windowEnd = i;
+        const windowData = data.slice(windowStart, windowEnd);
+
+        const windowAverage =
+            windowData.reduce((acc, value) => acc + value, 0) /
+            windowData.length;
+        rollingData.push(windowAverage);
+    }
+
+    return rollingData;
+};
+
+const createTraces = (data, settings, colorsMapping, sliderValue) => {
+    if (!data) {
+        return []
+    }
+    const res = Array.from(Object.entries(data)).map(([key, traceData], index) => {
+        const y = rollingWindow(traceData.y, sliderValue);
+        const x = traceData.x.slice(0, y.length);
+        const plotSettings = settings?.type === "bar" ? BAR_SETTINGS : LINE_SETTINGS;
+        const traceColor = traceData.color ?? getColorForTrace(key, colorsMapping, index)
+        const trace = _.merge({}, {
+            x: x,
+            y: y,
+            name: traceData.label ?? DATASET_ID_TO_NAME[key] ?? key,
+            marker: {
+                color: traceColor,
+            },
+            line: {
+                color: traceColor,
+            },
+            yaxis: traceData.yaxis ?? "y1"
+        }, plotSettings);
+        return trace
+    });
+    return res
+}
+
+export const init_ablation_plot = function () {
+    const plotElements = document.querySelectorAll('[id^="plot-"]');
+    plotElements.forEach(async (plotElement) => {
+        const plotName = plotElement.id.replace("plot-", "");
+        const indexData = await fetch(`${DATA_FOLDER}/${plotName}/index.json`).then(
+            (response) => response.json()
+        );
+        const settings = _.merge({}, DEFAULT_SETTINGS, indexData.settings);
+        const indexMapping = indexData.files;
+        const { dropdown, slider, plot } = createAblationPlottingElements(
+            plotElement,
+            indexMapping,
+            settings
+        );
+        plot.id = `graph-${plotName}`;
+        if (dropdown !== undefined) {
+            dropdown.addEventListener("change", () => updatePlot(dropdown, slider));
+        }
+        let timeoutId;
+        // Debounce the slider
+        if (slider !== undefined) {
+            slider.addEventListener("input", () => {
+                clearTimeout(timeoutId);
+                timeoutId = setTimeout(() => {
+                    updatePlot(dropdown, slider);
+                }, 500);
+            });
+        }
+        // Shared plot
+        Plotly.newPlot(plot, []);
+
+        // This is to ensure that the colors are consistent acrros different metrics
+        const colorsMapping = new Map()
+
+        async function updatePlot(dropdown, slider) {
+            const metricName = dropdown?.value ?? settings.defaultMetric;
+            const sliderValue = parseInt(slider?.value ?? 0);
+            const metricData = await fetch(
+                `${DATA_FOLDER}/${plotName}/${indexMapping[metricName]["file"]}`
+            ).then((response) => response.json());
+            const traces = (metricData?.traces ?? []).concat(createTraces(metricData.data, settings, colorsMapping, sliderValue))
+            const width = plot.parentElement.offsetWidth;
+            const layout = _.merge(
+                {},
+                DEFAULT_LAYOUT,
+                {
+                    width: width,
+                    yaxis: { title: { text: TASK_ID_TO_NAME[metricName] } },
+                    xaxis: {
+                        range: null
+                    },
+                },
+                metricData.layout
+            );
+            Plotly.react(plot, traces, layout);
+
+            window.addEventListener("resize", () => {
+                // If the window size is smaller than 768, we don't care as it's not shown
+                if (window.innerWidth < 768) {
+                    return;
+                }
+                Plotly.relayout(plot, {
+                    width: plot.parentElement.offsetWidth,
+                });
+            });
+        }
+
+        // Initial plot
+        updatePlot(dropdown, slider);
+    });
+};

webpack.config.js

@@ -0,0 +1,96 @@
+const path = require("path");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const CopyPlugin = require("copy-webpack-plugin");
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+
+const COLOR_KEYS = ["color", "bgColor", "fillcolor"];
+
+const transformDataColors = async (data, path) => {
+    const {getNamedColor} = await import('./src/colors.mjs');
+    // if not json file, return
+    if (!path.endsWith(".json")) {
+        return data;
+    }
+    const parsedData = JSON.parse(data);
+    // Change the color of the data
+    const deepIterateAndSetColor = (key, val) => {
+        if (val === null) {
+            return null;
+        }
+        if (val == undefined) {
+            return undefined;
+        }
+        if (Array.isArray(val)) {
+            return val.map(item => deepIterateAndSetColor(key, item));
+        }
+        if (typeof val === "object") {
+            return Object.entries(val).reduce((newObj, [key, value]) => {
+                newObj[key] = deepIterateAndSetColor(key, value);
+                return newObj;
+            }, {});
+        }
+        if (COLOR_KEYS.includes(key)) {
+            const [colorName, opacity, ...rest] = val.trim().split(/\s+/);
+            const floatOpacity = parseFloat(opacity);
+            const newColor = getNamedColor(colorName, floatOpacity);
+            if (newColor !== undefined && rest.length === 0 && !isNaN(floatOpacity)) {
+                console.log(`key: ${key} in file ${path} changed from ${val} to ${newColor}`);
+                return newColor;
+            } else {
+                return val;
+            }
+        }
+        return val;
+    };
+    return JSON.stringify(deepIterateAndSetColor(undefined, parsedData))
+};
+
+module.exports = {
+    entry: {
+        distill: "./src/distill.js",
+        main: "./src/index.js",
+    },
+    output: {
+        filename: "[name].bundle.js", // The output file
+        path: path.resolve(__dirname, "dist"), // Output directory
+    },
+    module: {
+        rules: [
+            { test: /\.css$/, use: ["style-loader", "css-loader"] },
+            {
+                test: /\.(js|mjs)$/,
+                exclude: /node_modules/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        presets: ["@babel/preset-env"],
+                    },
+                },
+            },
+        ],
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        new CopyPlugin({
+            patterns: [
+                {
+                    from: "assets",
+                    to: "assets",
+                    transform: transformDataColors,
+                },
+                { from: "src/style.css", to: "style.css" },
+                { from: "src/bibliography.bib", to: "bibliography.bib" },
+                { from: "src/index.html", to: "index.html" },
+            ],
+        }),
+    ],
+    devtool: process.env.NODE_ENV === 'production' ? 'source-map' : 'eval-source-map',
+    devServer: {
+        static: "./dist", // Serve files from the 'dist' directory
+        open: process.env.NODE_ENV !== 'production', // Automatically open the browser unless in production
+        hot: process.env.NODE_ENV !== 'production', // Enable hot module replacement unless in production
+    },
+    mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
+};
+
+console.log(process.env.NODE_ENV)