fragments

README.md

@@ -27,3 +27,23 @@ npm run dev
 npm run build
 // And commit the dist folder
 ```
+
+## Loading HTML fragments:
+There are two way to load HTML fragments:
+1. Compile them into html during build time
+2. Fetch them and insert them during run-time
+
+## When to use what
+- Use compile time fragments only on parts which you want to ensure are seen by every user right after page load (e.g logo)
+- Use run-time fragments for everything else so that the final HTML is of reasonable size (<1MB idealy)
+
+## How to add a new fragment
+- Add it to the `src/fragments` folder (e.g. `src/fragments/banner.html`)
+- For run-time fragments, add {{{fragment-name}}} to appropriate place in `src/index.html` (e.g. {{{fragment-banner}}})
+- For compile-time fragments, add <div id="fragment-name"></div> to `src/index.html` where you want to insert the fragment (e.g. <div id="fragment-banner"></div>)
+
+
+## How to know which fragments are available
+- Run `npm run dev` and look at the console for available fragments
+
+

dist/fragments/memory-recomputation.html

@@ -0,0 +1 @@
+<div>                            <div id=3a29a7b6-5a6e-4e51-aabe-515dafefbd63 class=plotly-graph-div style="height:500px; width:850px;"></div>            <script>window.PLOTLYENV=window.PLOTLYENV||{},document.getElementById("3a29a7b6-5a6e-4e51-aabe-515dafefbd63")&&Plotly.newPlot("3a29a7b6-5a6e-4e51-aabe-515dafefbd63",[{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(78, 165, 183)"},name:"parameters",showlegend:!0,visible:!0,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAEjnD0AAAAAASPcPQAAAAACkCxBAAAAAAKQrEEA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(227, 138, 66)"},name:"gradients",showlegend:!0,visible:!0,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAEjnD0AAAAAASPcPQAAAAACkCxBAAAAAAKQrEEA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(232, 137, 171)"},name:"optimizer",showlegend:!0,visible:!0,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAEjnH0AAAAAASPcfQAAAAACkCyBAAAAAAKQrIEA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(206, 192, 250)"},name:"activations",showlegend:!0,visible:!0,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAACEDEAAAAAAAEIoQAAAAAAAIUZAAAAAAIAQZUA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(78, 165, 183)"},name:"parameters",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAKWXKkAAAAAApZ0qQAAAAAClqSpAAAAAAKXBKkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(227, 138, 66)"},name:"gradients",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAKWXKkAAAAAApZ0qQAAAAAClqSpAAAAAAKXBKkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(232, 137, 171)"},name:"optimizer",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAKWXOkAAAAAApZ06QAAAAAClqTpAAAAAAKXBOkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(206, 192, 250)"},name:"activations",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAABLGEAAAAAAgLUyQAAAAACA1U9AAAAAAMAKbUA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(78, 165, 183)"},name:"parameters",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAKL6OUAAAAAAov45QAAAAACiBjpAAAAAAKIWOkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(227, 138, 66)"},name:"gradients",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAKL6OUAAAAAAov45QAAAAACiBjpAAAAAAKIWOkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(232, 137, 171)"},name:"optimizer",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAKL6SUAAAAAAov5JQAAAAACiBkpAAAAAAKIWSkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(206, 192, 250)"},name:"activations",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAACCIkAAAAAAAII8QAAAAAAAQVhAAAAAAIAgdkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(78, 165, 183)"},name:"parameters",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAgER/bkAAAACARIBuQAAAAIBEgm5AAAAAgESGbkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(227, 138, 66)"},name:"gradients",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAgER/bkAAAACARIBuQAAAAIBEgm5AAAAAgESGbkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(232, 137, 171)"},name:"optimizer",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAgER/fkAAAACARIB+QAAAAIBEgn5AAAAAgESGfkA="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(206, 192, 250)"},name:"activations",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAAAhR0AAAAAAgNBhQAAAAACAUH5AAAAAAECom0A="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(78, 165, 183)"},name:"parameters",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAgPa/l0AAAACANsCXQAAAAIC2wJdAAAAAgLbBl0A="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(227, 138, 66)"},name:"gradients",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAgPa/l0AAAACANsCXQAAAAIC2wJdAAAAAgLbBl0A="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(232, 137, 171)"},name:"optimizer",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAgPa/p0AAAACANsCnQAAAAIC2wKdAAAAAgLbBp0A="},type:"bar"},{hovertemplate:"Seq len=%{x}<br>Mem=%{y:.1f}GB<br>%{data.name}<extra></extra>",marker:{color:"rgb(206, 192, 250)"},name:"activations",showlegend:!0,visible:!1,x:["1024","2048","4096","8192"],y:{dtype:"f8",bdata:"AAAAAIA2YkAAAAAAgA58QAAAAABA35dAAAAAAKDHtUA="},type:"bar"}],{template:{data:{barpolar:[{marker:{line:{color:"white",width:.5},pattern:{fillmode:"overlay",size:10,solidity:.2}},type:"barpolar"}],bar:[{error_x:{color:"#2a3f5f"},error_y:{color:"#2a3f5f"},marker:{line:{color:"white",width:.5},pattern:{fillmode:"overlay",size:10,solidity:.2}},type:"bar"}],carpet:[{aaxis:{endlinecolor:"#2a3f5f",gridcolor:"#C8D4E3",linecolor:"#C8D4E3",minorgridcolor:"#C8D4E3",startlinecolor:"#2a3f5f"},baxis:{endlinecolor:"#2a3f5f",gridcolor:"#C8D4E3",linecolor:"#C8D4E3",minorgridcolor:"#C8D4E3",startlinecolor:"#2a3f5f"},type:"carpet"}],choropleth:[{colorbar:{outlinewidth:0,ticks:""},type:"choropleth"}],contourcarpet:[{colorbar:{outlinewidth:0,ticks:""},type:"contourcarpet"}],contour:[{colorbar:{outlinewidth:0,ticks:""},colorscale:[[0,"#0d0887"],[.1111111111111111,"#46039f"],[.2222222222222222,"#7201a8"],[.3333333333333333,"#9c179e"],[.4444444444444444,"#bd3786"],[.5555555555555556,"#d8576b"],[.6666666666666666,"#ed7953"],[.7777777777777778,"#fb9f3a"],[.8888888888888888,"#fdca26"],[1,"#f0f921"]],type:"contour"}],heatmap:[{colorbar:{outlinewidth:0,ticks:""},colorscale:[[0,"#0d0887"],[.1111111111111111,"#46039f"],[.2222222222222222,"#7201a8"],[.3333333333333333,"#9c179e"],[.4444444444444444,"#bd3786"],[.5555555555555556,"#d8576b"],[.6666666666666666,"#ed7953"],[.7777777777777778,"#fb9f3a"],[.8888888888888888,"#fdca26"],[1,"#f0f921"]],type:"heatmap"}],histogram2dcontour:[{colorbar:{outlinewidth:0,ticks:""},colorscale:[[0,"#0d0887"],[.1111111111111111,"#46039f"],[.2222222222222222,"#7201a8"],[.3333333333333333,"#9c179e"],[.4444444444444444,"#bd3786"],[.5555555555555556,"#d8576b"],[.6666666666666666,"#ed7953"],[.7777777777777778,"#fb9f3a"],[.8888888888888888,"#fdca26"],[1,"#f0f921"]],type:"histogram2dcontour"}],histogram2d:[{colorbar:{outlinewidth:0,ticks:""},colorscale:[[0,"#0d0887"],[.1111111111111111,"#46039f"],[.2222222222222222,"#7201a8"],[.3333333333333333,"#9c179e"],[.4444444444444444,"#bd3786"],[.5555555555555556,"#d8576b"],[.6666666666666666,"#ed7953"],[.7777777777777778,"#fb9f3a"],[.8888888888888888,"#fdca26"],[1,"#f0f921"]],type:"histogram2d"}],histogram:[{marker:{pattern:{fillmode:"overlay",size:10,solidity:.2}},type:"histogram"}],mesh3d:[{colorbar:{outlinewidth:0,ticks:""},type:"mesh3d"}],parcoords:[{line:{colorbar:{outlinewidth:0,ticks:""}},type:"parcoords"}],pie:[{automargin:!0,type:"pie"}],scatter3d:[{line:{colorbar:{outlinewidth:0,ticks:""}},marker:{colorbar:{outlinewidth:0,ticks:""}},type:"scatter3d"}],scattercarpet:[{marker:{colorbar:{outlinewidth:0,ticks:""}},type:"scattercarpet"}],scattergeo:[{marker:{colorbar:{outlinewidth:0,ticks:""}},type:"scattergeo"}],scattergl:[{marker:{colorbar:{outlinewidth:0,ticks:""}},type:"scattergl"}],scattermapbox:[{marker:{colorbar:{outlinewidth:0,ticks:""}},type:"scattermapbox"}],scattermap:[{marker:{colorbar:{outlinewidth:0,ticks:""}},type:"scattermap"}],scatterpolargl:[{marker:{colorbar:{outlinewidth:0,ticks:""}},type:"scatterpolargl"}],scatterpolar:[{marker:{colorbar:{outlinewidth:0,ticks:""}},type:"scatterpolar"}],scatter:[{fillpattern:{fillmode:"overlay",size:10,solidity:.2},type:"scatter"}],scatterternary:[{marker:{colorbar:{outlinewidth:0,ticks:""}},type:"scatterternary"}],surface:[{colorbar:{outlinewidth:0,ticks:""},colorscale:[[0,"#0d0887"],[.1111111111111111,"#46039f"],[.2222222222222222,"#7201a8"],[.3333333333333333,"#9c179e"],[.4444444444444444,"#bd3786"],[.5555555555555556,"#d8576b"],[.6666666666666666,"#ed7953"],[.7777777777777778,"#fb9f3a"],[.8888888888888888,"#fdca26"],[1,"#f0f921"]],type:"surface"}],table:[{cells:{fill:{color:"#EBF0F8"},line:{color:"white"}},header:{fill:{color:"#C8D4E3"},line:{color:"white"}},type:"table"}]},layout:{annotationdefaults:{arrowcolor:"#2a3f5f",arrowhead:0,arrowwidth:1},autotypenumbers:"strict",coloraxis:{colorbar:{outlinewidth:0,ticks:""}},colorscale:{diverging:[[0,"#8e0152"],[.1,"#c51b7d"],[.2,"#de77ae"],[.3,"#f1b6da"],[.4,"#fde0ef"],[.5,"#f7f7f7"],[.6,"#e6f5d0"],[.7,"#b8e186"],[.8,"#7fbc41"],[.9,"#4d9221"],[1,"#276419"]],sequential:[[0,"#0d0887"],[.1111111111111111,"#46039f"],[.2222222222222222,"#7201a8"],[.3333333333333333,"#9c179e"],[.4444444444444444,"#bd3786"],[.5555555555555556,"#d8576b"],[.6666666666666666,"#ed7953"],[.7777777777777778,"#fb9f3a"],[.8888888888888888,"#fdca26"],[1,"#f0f921"]],sequentialminus:[[0,"#0d0887"],[.1111111111111111,"#46039f"],[.2222222222222222,"#7201a8"],[.3333333333333333,"#9c179e"],[.4444444444444444,"#bd3786"],[.5555555555555556,"#d8576b"],[.6666666666666666,"#ed7953"],[.7777777777777778,"#fb9f3a"],[.8888888888888888,"#fdca26"],[1,"#f0f921"]]},colorway:["#636efa","#EF553B","#00cc96","#ab63fa","#FFA15A","#19d3f3","#FF6692","#B6E880","#FF97FF","#FECB52"],font:{color:"#2a3f5f"},geo:{bgcolor:"white",lakecolor:"white",landcolor:"white",showlakes:!0,showland:!0,subunitcolor:"#C8D4E3"},hoverlabel:{align:"left"},hovermode:"closest",mapbox:{style:"light"},paper_bgcolor:"white",plot_bgcolor:"white",polar:{angularaxis:{gridcolor:"#EBF0F8",linecolor:"#EBF0F8",ticks:""},bgcolor:"white",radialaxis:{gridcolor:"#EBF0F8",linecolor:"#EBF0F8",ticks:""}},scene:{xaxis:{backgroundcolor:"white",gridcolor:"#DFE8F3",gridwidth:2,linecolor:"#EBF0F8",showbackground:!0,ticks:"",zerolinecolor:"#EBF0F8"},yaxis:{backgroundcolor:"white",gridcolor:"#DFE8F3",gridwidth:2,linecolor:"#EBF0F8",showbackground:!0,ticks:"",zerolinecolor:"#EBF0F8"},zaxis:{backgroundcolor:"white",gridcolor:"#DFE8F3",gridwidth:2,linecolor:"#EBF0F8",showbackground:!0,ticks:"",zerolinecolor:"#EBF0F8"}},shapedefaults:{line:{color:"#2a3f5f"}},ternary:{aaxis:{gridcolor:"#DFE8F3",linecolor:"#A2B1C6",ticks:""},baxis:{gridcolor:"#DFE8F3",linecolor:"#A2B1C6",ticks:""},bgcolor:"white",caxis:{gridcolor:"#DFE8F3",linecolor:"#A2B1C6",ticks:""}},title:{x:.05},xaxis:{automargin:!0,gridcolor:"#EBF0F8",linecolor:"#EBF0F8",ticks:"",title:{standoff:15},zerolinecolor:"#EBF0F8",zerolinewidth:2},yaxis:{automargin:!0,gridcolor:"#EBF0F8",linecolor:"#EBF0F8",ticks:"",title:{standoff:15},zerolinecolor:"#EBF0F8",zerolinewidth:2}}},title:{text:"Memory Usage with Recomputation",x:.5,y:.95},margin:{r:80},legend:{y:.95,x:1.02,xanchor:"left",yanchor:"top"},updatemenus:[{active:0,buttons:[{args:[{visible:[!0,!0,!0,!0,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1]},{"yaxis.range":[0,203.1547058105469]}],label:"1B",method:"update"},{args:[{visible:[!1,!1,!1,!1,!0,!0,!0,!0,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1]},{"yaxis.range":[0,314.4336639404297]}],label:"3B",method:"update"},{args:[{visible:[!1,!1,!1,!1,!1,!1,!1,!1,!0,!0,!0,!0,!1,!1,!1,!1,!1,!1,!1,!1]},{"yaxis.range":[0,504.2233764648438]}],label:"8B",method:"update"},{args:[{visible:[!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!0,!0,!0,!0,!1,!1,!1,!1]},{"yaxis.range":[0,3021.530541992188]}],label:"70B",method:"update"},{args:[{visible:[!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!1,!0,!0,!0,!0]},{"yaxis.range":[0,12823.0716796875]}],label:"405B",method:"update"}],direction:"down",showactive:!0,x:1.035,xanchor:"left",y:.6,yanchor:"top"},{active:0,buttons:[{args:[{y:[[3.9879302978515625,3.9957427978515625,4.0113677978515625,4.0426177978515625],[3.9879302978515625,3.9957427978515625,4.0113677978515625,4.0426177978515625],[7.975860595703125,7.991485595703125,8.022735595703125,8.085235595703125],[3.564453125,12.12890625,44.2578125,168.515625],[13.296180725097656,13.307899475097656,13.331336975097656,13.378211975097656],[13.296180725097656,13.307899475097656,13.331336975097656,13.378211975097656],[26.592361450195313,26.615798950195313,26.662673950195313,26.756423950195313],[6.0732421875,18.708984375,63.66796875,232.3359375],[25.979034423828125,25.994659423828125,26.025909423828125,26.088409423828125],[25.979034423828125,25.994659423828125,26.025909423828125,26.088409423828125],[51.95806884765625,51.98931884765625,52.05181884765625,52.17681884765625],[9.25390625,28.5078125,97.015625,354.03125],[243.97711181640625,244.00836181640625,244.07086181640625,244.19586181640625],[243.97711181640625,244.00836181640625,244.07086181640625,244.19586181640625],[487.9542236328125,488.0167236328125,488.1417236328125,488.3917236328125],[46.2578125,142.515625,485.03125,1770.0625],[1519.99072265625,1520.05322265625,1520.17822265625,1520.42822265625],[1519.99072265625,1520.05322265625,1520.17822265625,1520.42822265625],[3039.9814453125,3040.1064453125,3040.3564453125,3040.8564453125],[145.703125,448.90625,1527.8125,5575.625]]}],label:"None",method:"restyle"},{args:[{y:[[3.9879302978515625,3.9957427978515625,4.0113677978515625,4.0426177978515625],[3.9879302978515625,3.9957427978515625,4.0113677978515625,4.0426177978515625],[7.975860595703125,7.991485595703125,8.022735595703125,8.085235595703125],[1.064453125,2.12890625,4.2578125,8.515625],[13.296180725097656,13.307899475097656,13.331336975097656,13.378211975097656],[13.296180725097656,13.307899475097656,13.331336975097656,13.378211975097656],[26.592361450195313,26.615798950195313,26.662673950195313,26.756423950195313],[2.7919921875,5.583984375,11.16796875,22.3359375],[25.979034423828125,25.994659423828125,26.025909423828125,26.088409423828125],[25.979034423828125,25.994659423828125,26.025909423828125,26.088409423828125],[51.95806884765625,51.98931884765625,52.05181884765625,52.17681884765625],[4.25390625,8.5078125,17.015625,34.03125],[243.97711181640625,244.00836181640625,244.07086181640625,244.19586181640625],[243.97711181640625,244.00836181640625,244.07086181640625,244.19586181640625],[487.9542236328125,488.0167236328125,488.1417236328125,488.3917236328125],[21.2578125,42.515625,85.03125,170.0625],[1519.99072265625,1520.05322265625,1520.17822265625,1520.42822265625],[1519.99072265625,1520.05322265625,1520.17822265625,1520.42822265625],[3039.9814453125,3040.1064453125,3040.3564453125,3040.8564453125],[66.953125,133.90625,267.8125,535.625]]}],label:"selective",method:"restyle"},{args:[{y:[[3.9879302978515625,3.9957427978515625,4.0113677978515625,4.0426177978515625],[3.9879302978515625,3.9957427978515625,4.0113677978515625,4.0426177978515625],[7.975860595703125,7.991485595703125,8.022735595703125,8.085235595703125],[.064453125,.12890625,.2578125,.515625],[13.296180725097656,13.307899475097656,13.331336975097656,13.378211975097656],[13.296180725097656,13.307899475097656,13.331336975097656,13.378211975097656],[26.592361450195313,26.615798950195313,26.662673950195313,26.756423950195313],[.1669921875,.333984375,.66796875,1.3359375],[25.979034423828125,25.994659423828125,26.025909423828125,26.088409423828125],[25.979034423828125,25.994659423828125,26.025909423828125,26.088409423828125],[51.95806884765625,51.98931884765625,52.05181884765625,52.17681884765625],[.25390625,.5078125,1.015625,2.03125],[243.97711181640625,244.00836181640625,244.07086181640625,244.19586181640625],[243.97711181640625,244.00836181640625,244.07086181640625,244.19586181640625],[487.9542236328125,488.0167236328125,488.1417236328125,488.3917236328125],[1.2578125,2.515625,5.03125,10.0625],[1519.99072265625,1520.05322265625,1520.17822265625,1520.42822265625],[1519.99072265625,1520.05322265625,1520.17822265625,1520.42822265625],[3039.9814453125,3040.1064453125,3040.3564453125,3040.8564453125],[3.953125,7.90625,15.8125,31.625]]}],label:"full",method:"restyle"}],direction:"down",showactive:!0,x:1.035,xanchor:"left",y:.4,yanchor:"top"}],barmode:"stack",xaxis:{title:{text:"Sequence Length"}},yaxis:{title:{text:"Memory (GB)"},range:[0,203.1547058105469]},width:850,height:500,annotations:[{showarrow:!1,text:"Model Size:",x:1.035,xanchor:"left",xref:"paper",y:.6,yanchor:"bottom",yref:"paper"},{showarrow:!1,text:"Recomputation:",x:1.035,xanchor:"left",xref:"paper",y:.4,yanchor:"bottom",yref:"paper"}]},{responsive:!0,scrollZoom:!1})</script>        </div>

dist/main.bundle.js

@@ -5280,11 +5280,277 @@ var init_memory_plot = function init_memory_plot() {
   }
   updateGraph();
 };
+;// ./src/fragmentLoader.js
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function loadFragments() {
+  return _loadFragments.apply(this, arguments);
+}
+function _loadFragments() {
+  _loadFragments = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
+    var fragmentElements, FetchQueue, fetchQueue, currentIndex, elements;
+    return _regeneratorRuntime().wrap(function _callee7$(_context7) {
+      while (1) switch (_context7.prev = _context7.next) {
+        case 0:
+          // Find all elements with ids starting with 'fragment-'
+          fragmentElements = Array.from(document.querySelectorAll('[id^="fragment-"]'));
+          FetchQueue = /*#__PURE__*/function () {
+            function FetchQueue() {
+              var maxConcurrent = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 3;
+              _classCallCheck(this, FetchQueue);
+              this.queue = [];
+              this.maxConcurrent = maxConcurrent;
+              this.activeFetches = 0;
+              this.maxRetries = 3; // Maximum number of retry attempts
+              this.baseDelay = 1000; // Base delay in milliseconds (1 second)
+            }
+            return _createClass(FetchQueue, [{
+              key: "sleep",
+              value: function () {
+                var _sleep = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(ms) {
+                  return _regeneratorRuntime().wrap(function _callee$(_context) {
+                    while (1) switch (_context.prev = _context.next) {
+                      case 0:
+                        return _context.abrupt("return", new Promise(function (resolve) {
+                          return setTimeout(resolve, ms);
+                        }));
+                      case 1:
+                      case "end":
+                        return _context.stop();
+                    }
+                  }, _callee);
+                }));
+                function sleep(_x) {
+                  return _sleep.apply(this, arguments);
+                }
+                return sleep;
+              }()
+            }, {
+              key: "fetchWithRetry",
+              value: function () {
+                var _fetchWithRetry = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(fragmentPath) {
+                  var retryCount,
+                    response,
+                    delay,
+                    _args2 = arguments;
+                  return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+                    while (1) switch (_context2.prev = _context2.next) {
+                      case 0:
+                        retryCount = _args2.length > 1 && _args2[1] !== undefined ? _args2[1] : 0;
+                        _context2.prev = 1;
+                        _context2.next = 4;
+                        return fetch(fragmentPath);
+                      case 4:
+                        response = _context2.sent;
+                        if (response.ok) {
+                          _context2.next = 7;
+                          break;
+                        }
+                        throw new Error("HTTP error! status: ".concat(response.status));
+                      case 7:
+                        _context2.next = 9;
+                        return response.text();
+                      case 9:
+                        return _context2.abrupt("return", _context2.sent);
+                      case 12:
+                        _context2.prev = 12;
+                        _context2.t0 = _context2["catch"](1);
+                        if (!(retryCount < this.maxRetries)) {
+                          _context2.next = 20;
+                          break;
+                        }
+                        // Exponential backoff: 1s, 2s, 4s
+                        delay = this.baseDelay * Math.pow(2, retryCount);
+                        console.warn("Retry ".concat(retryCount + 1, "/").concat(this.maxRetries, " for ").concat(fragmentPath, " after ").concat(delay, "ms"));
+                        _context2.next = 19;
+                        return this.sleep(delay);
+                      case 19:
+                        return _context2.abrupt("return", this.fetchWithRetry(fragmentPath, retryCount + 1));
+                      case 20:
+                        throw _context2.t0;
+                      case 21:
+                      case "end":
+                        return _context2.stop();
+                    }
+                  }, _callee2, this, [[1, 12]]);
+                }));
+                function fetchWithRetry(_x2) {
+                  return _fetchWithRetry.apply(this, arguments);
+                }
+                return fetchWithRetry;
+              }()
+            }, {
+              key: "addFetch",
+              value: function () {
+                var _addFetch = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5(element) {
+                  var _this = this;
+                  var fragmentName, fragmentPath;
+                  return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+                    while (1) switch (_context5.prev = _context5.next) {
+                      case 0:
+                        fragmentName = element.id.replace('fragment-', '');
+                        fragmentPath = "/fragments/".concat(fragmentName, ".html");
+                        return _context5.abrupt("return", new Promise(/*#__PURE__*/function () {
+                          var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4(resolve, reject) {
+                            var fetchPromise;
+                            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+                              while (1) switch (_context4.prev = _context4.next) {
+                                case 0:
+                                  try {
+                                    fetchPromise = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+                                      var html, temp, scripts;
+                                      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+                                        while (1) switch (_context3.prev = _context3.next) {
+                                          case 0:
+                                            _context3.prev = 0;
+                                            _context3.next = 3;
+                                            return _this.fetchWithRetry(fragmentPath);
+                                          case 3:
+                                            html = _context3.sent;
+                                            // Process the fragment
+                                            temp = document.createElement('div');
+                                            temp.innerHTML = html;
+                                            element.innerHTML = temp.innerHTML;
+
+                                            // Handle scripts
+                                            scripts = temp.getElementsByTagName('script');
+                                            Array.from(scripts).forEach(function (oldScript) {
+                                              var newScript = document.createElement('script');
+                                              Array.from(oldScript.attributes).forEach(function (attr) {
+                                                newScript.setAttribute(attr.name, attr.value);
+                                              });
+                                              newScript.textContent = oldScript.textContent;
+                                              oldScript.parentNode.removeChild(oldScript);
+                                              document.body.appendChild(newScript);
+                                            });
+                                            _this.activeFetches--;
+                                            resolve();
+                                            _context3.next = 18;
+                                            break;
+                                          case 13:
+                                            _context3.prev = 13;
+                                            _context3.t0 = _context3["catch"](0);
+                                            console.error("Failed to load fragment ".concat(fragmentPath, " after ").concat(_this.maxRetries, " retries:"), _context3.t0);
+                                            _this.activeFetches--;
+                                            reject(_context3.t0);
+                                          case 18:
+                                          case "end":
+                                            return _context3.stop();
+                                        }
+                                      }, _callee3, null, [[0, 13]]);
+                                    }))();
+                                    _this.queue.push(fetchPromise);
+                                    _this.activeFetches++;
+                                  } catch (error) {
+                                    reject(error);
+                                  }
+                                case 1:
+                                case "end":
+                                  return _context4.stop();
+                              }
+                            }, _callee4);
+                          }));
+                          return function (_x4, _x5) {
+                            return _ref.apply(this, arguments);
+                          };
+                        }()));
+                      case 3:
+                      case "end":
+                        return _context5.stop();
+                    }
+                  }, _callee5);
+                }));
+                function addFetch(_x3) {
+                  return _addFetch.apply(this, arguments);
+                }
+                return addFetch;
+              }()
+            }, {
+              key: "processNext",
+              value: function () {
+                var _processNext = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6(element) {
+                  return _regeneratorRuntime().wrap(function _callee6$(_context6) {
+                    while (1) switch (_context6.prev = _context6.next) {
+                      case 0:
+                        if (!(this.activeFetches < this.maxConcurrent && element)) {
+                          _context6.next = 3;
+                          break;
+                        }
+                        _context6.next = 3;
+                        return this.addFetch(element);
+                      case 3:
+                      case "end":
+                        return _context6.stop();
+                    }
+                  }, _callee6, this);
+                }));
+                function processNext(_x6) {
+                  return _processNext.apply(this, arguments);
+                }
+                return processNext;
+              }()
+            }]);
+          }(); // Initialize queue
+          fetchQueue = new FetchQueue(3);
+          currentIndex = 0;
+          elements = fragmentElements; // Assuming this is defined elsewhere
+          // Initial loading of first 3 elements
+        case 5:
+          if (!(currentIndex < elements.length && currentIndex < 3)) {
+            _context7.next = 11;
+            break;
+          }
+          _context7.next = 8;
+          return fetchQueue.processNext(elements[currentIndex]);
+        case 8:
+          currentIndex++;
+          _context7.next = 5;
+          break;
+        case 11:
+          if (!(currentIndex < elements.length)) {
+            _context7.next = 20;
+            break;
+          }
+          _context7.next = 14;
+          return Promise.race(fetchQueue.queue);
+        case 14:
+          // Remove completed fetch from queue
+          fetchQueue.queue = fetchQueue.queue.filter(function (p) {
+            return p.status === 'pending';
+          });
+          // Add next element to queue
+          _context7.next = 17;
+          return fetchQueue.processNext(elements[currentIndex]);
+        case 17:
+          currentIndex++;
+          _context7.next = 11;
+          break;
+        case 20:
+          _context7.next = 22;
+          return Promise.all(fetchQueue.queue);
+        case 22:
+        case "end":
+          return _context7.stop();
+      }
+    }, _callee7);
+  }));
+  return _loadFragments.apply(this, arguments);
+}
+
 ;// ./src/index.js
 // import { plotClusters } from './clusters'
 
+
 document.addEventListener("DOMContentLoaded", function () {
   console.log("DOMContentLoaded");
+  loadFragments();
   init_memory_plot();
 }, {
   once: true

src/fragmentLoader.js

@@ -0,0 +1,114 @@
+async function loadFragments() {
+    // Find all elements with ids starting with 'fragment-'
+    const fragmentElements = Array.from(document.querySelectorAll('[id^="fragment-"]'));
+    
+    class FetchQueue {
+        constructor(maxConcurrent = 3) {
+            this.queue = [];
+            this.maxConcurrent = maxConcurrent;
+            this.activeFetches = 0;
+            this.maxRetries = 3; // Maximum number of retry attempts
+            this.baseDelay = 1000; // Base delay in milliseconds (1 second)
+        }
+
+        async sleep(ms) {
+            return new Promise(resolve => setTimeout(resolve, ms));
+        }
+
+        async fetchWithRetry(fragmentPath, retryCount = 0) {
+            try {
+                const response = await fetch(fragmentPath);
+                if (!response.ok) {
+                    throw new Error(`HTTP error! status: ${response.status}`);
+                }
+                return await response.text();
+            } catch (error) {
+                if (retryCount < this.maxRetries) {
+                    // Exponential backoff: 1s, 2s, 4s
+                    const delay = this.baseDelay * Math.pow(2, retryCount);
+                    console.warn(`Retry ${retryCount + 1}/${this.maxRetries} for ${fragmentPath} after ${delay}ms`);
+                    await this.sleep(delay);
+                    return this.fetchWithRetry(fragmentPath, retryCount + 1);
+                }
+                throw error;
+            }
+        }
+
+        async addFetch(element) {
+            const fragmentName = element.id.replace('fragment-', '');
+            const fragmentPath = `/fragments/${fragmentName}.html`;
+            
+            return new Promise(async (resolve, reject) => {
+                try {
+                    const fetchPromise = (async () => {
+                        try {
+                            const html = await this.fetchWithRetry(fragmentPath);
+                            
+                            // Process the fragment
+                            const temp = document.createElement('div');
+                            temp.innerHTML = html;
+                            element.innerHTML = temp.innerHTML;
+                            
+                            // Handle scripts
+                            const scripts = temp.getElementsByTagName('script');
+                            Array.from(scripts).forEach(oldScript => {
+                                const newScript = document.createElement('script');
+                                Array.from(oldScript.attributes).forEach(attr => {
+                                    newScript.setAttribute(attr.name, attr.value);
+                                });
+                                newScript.textContent = oldScript.textContent;
+                                oldScript.parentNode.removeChild(oldScript);
+                                document.body.appendChild(newScript);
+                            });
+                            
+                            this.activeFetches--;
+                            resolve();
+                        } catch (error) {
+                            console.error(`Failed to load fragment ${fragmentPath} after ${this.maxRetries} retries:`, error);
+                            this.activeFetches--;
+                            reject(error);
+                        }
+                    })();
+
+                    this.queue.push(fetchPromise);
+                    this.activeFetches++;
+                } catch (error) {
+                    reject(error);
+                }
+            });
+        }
+
+        async processNext(element) {
+            if (this.activeFetches < this.maxConcurrent && element) {
+                await this.addFetch(element);
+            }
+        }
+    }
+
+    // Initialize queue
+    const fetchQueue = new FetchQueue(3);
+    let currentIndex = 0;
+    const elements = fragmentElements; // Assuming this is defined elsewhere
+
+    // Initial loading of first 3 elements
+    while (currentIndex < elements.length && currentIndex < 3) {
+        await fetchQueue.processNext(elements[currentIndex]);
+        currentIndex++;
+    }
+
+    // Process remaining elements as fetches complete
+    while (currentIndex < elements.length) {
+        // Wait for any fetch to complete
+        await Promise.race(fetchQueue.queue);
+        // Remove completed fetch from queue
+        fetchQueue.queue = fetchQueue.queue.filter(p => p.status === 'pending');
+        // Add next element to queue
+        await fetchQueue.processNext(elements[currentIndex]);
+        currentIndex++;
+    }
+
+    // Wait for remaining fetches to complete
+    await Promise.all(fetchQueue.queue);
+}
+
+export { loadFragments }

src/index.html

@@ -41,7 +41,7 @@
         <h1 class="l-page" style="text-align: center;">The Ultra-Scale Playbook:<br>Training LLMs on GPU Clusters</h1>
         <div id="title-plot" class="main-plot-container l-screen" style="overflow-x: hidden; width: 100%; text-align: center;">
             <div style="display: flex; justify-content: center; position: relative;">
-                {{{banner-html}}}
+                {{{fragment-banner}}}
             </div>
             <p style="text-align: cekter; font-style: italic; margin-top: 10px; max-width: 900px; margin-left: auto; margin-right: auto;">We ran over 4000 scaling experiments on up to 512 GPUs and measured throughput (size of markers) and GPU utilization (color of markers). Note that both are normalized per model size in this visualization.</p>
   
@@ -206,8 +206,9 @@
 
         <p><strong>Real training efficiency benchmarks:</strong> Finally, how to <em>actually</em> scale your LLM training depends on your infrastructure, such as the kind of chips, interconnect etc., and we can’t give a single unified recipe. What we will give though is a way to benchmark several setups and it is what we have done on our cluster! We ran over 4100 distributed experiments (over 16k including test runs) with up to 512 GPUs to scan many possible distributed training layouts and model sizes. </p>
         
-        <iframe id="plotFrame" src="assets/data/benchmarks/benchmarks_interactive.html" scrolling="no" frameborder="0" height="840" width="720"></iframe>
-        {{{benchmarks-interactive-html}}}
+        <!-- <iframe id="plotFrame" src="assets/data/benchmarks/benchmarks_interactive.html" scrolling="no" frameborder="0" height="840" width="720"></iframe> -->
+        <div id="fragment-benchmarks_interactive"></div>
+        <!-- {{{benchmarks-interactive-html}}} -->
 
         <p>As you can see, there’s a lot of ground to be covered. Before getting into the trenches of distributed training let’s take a quick high level look on the challenges we'll cover in the book.</p>
 

src/index.js

@@ -1,7 +1,9 @@
 // import { plotClusters } from './clusters'
 import { init_memory_plot } from './memory'
+import { loadFragments } from './fragmentLoader'
 
 document.addEventListener("DOMContentLoaded", () => {
     console.log("DOMContentLoaded");
+    loadFragments();
     init_memory_plot();
 }, { once: true });

webpack.config.js

@@ -5,7 +5,8 @@ const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPl
 const Handlebars = require("handlebars");
 const fs = require("fs");
 const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
-const { swcMinifyFragment} = require("html-minimizer-webpack-plugin")
+const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
+
 
 const FRAGMENTS_PATH = "src/fragments";
 
@@ -23,10 +24,12 @@ const loadFragmentsMap = (() => {
                     if (fs.statSync(filePath).isDirectory()) {
                         await walkDir(filePath, relativePath);
                     } else {
-                        const dottedPath = relativePath.replace(/\\/g, '-').replace(/\//g, '-').replace(/\./g, '-');
+                        // Remove the .html extension before creating the dotted path
+                        const nameWithoutExt = relativePath.replace(/\.html$/, '');
+                        const dottedPath = 'fragment-' + nameWithoutExt.replace(/\\/g, '-').replace(/\//g, '-').replace(/\./g, '-');
                         const content = fs.readFileSync(filePath, "utf8");
                         // Minify the HTML content using swcMinifyFragment
-                        const minifiedRes = await swcMinifyFragment({"tmp.html": content})
+                        const minifiedRes = await HtmlMinimizerPlugin.swcMinifyFragment({"tmp.html": content})
                         if (minifiedRes.errors) {
                             console.error(minifiedRes.errors)
                         }
@@ -83,13 +86,13 @@ module.exports = {
                     from: "assets",
                     to: "assets",
                 },
+                { from: "src/fragments/*", to: "fragments/[name].html" },
                 { from: "src/style.css", to: "style.css" },
                 { from: "src/bibliography.bib", to: "bibliography.bib" },
                 { 
                     from: "src/index.html", 
                     to: "index.html",
                     transform: transformHandlebars, 
-                    noErrorOnMissing: true
                 },
             ],
         }),
@@ -130,6 +133,11 @@ module.exports = {
                 }
             ]
             }),
+            //Hynek: Ideally we don't run this twice but we
+            new HtmlMinimizerPlugin({
+                test: /fragments\/.*\.html$/i,
+                minify: HtmlMinimizerPlugin.swcMinifyFragment,
+            })
         ]
     },
 };