Improvements

app.js

@@ -10,30 +10,44 @@ const THETA3 = 5.550e-10;
 const THETA4 = 2.045e-7;
 
 
-function computeEnergy(d,L,nq,nkv,nin,nout)
+function computeComponents(d,L,nq,nkv,nin,nout)
 {
 
     const ratio = nkv/nq;
 
-    let total=[];
+    let c0=[];
+    let c1=[];
+    let c2=[];
+    let c3=[];
+    let c4=[];
 
-    for (let n of nout)
+
+    for(let n of nout)
     {
-        let value =
-            THETA0
-            +
-            d*L*(
-                THETA1*d*(nin/n)
-                +
-                ratio*(THETA2*nin + THETA3*n)
-                +
-                THETA4
-            );
-
-        total.push(value);
+
+        c0.push(THETA0);
+
+        c1.push(
+            d*L*THETA1*d*(nin/n)
+        );
+
+        c2.push(
+            d*L*ratio*THETA2*nin
+        );
+
+        c3.push(
+            d*L*ratio*THETA3*n
+        );
+
+        c4.push(
+            d*L*THETA4
+        );
     }
 
-    return total;
+
+    return [
+        c0,c1,c2,c3,c4
+    ];
 }
 
 
@@ -76,35 +90,175 @@ function draw()
 
 
     let nout =
-        logspace2(1,4096,300);
+        logspace2(1,4096,400);
 
 
-    let energy =
-        computeEnergy(
+    let components =
+        computeComponents(
             d,L,nq,nkv,nin,nout
         );
 
 
-    let trace = {
+    let total =
+        nout.map(
+            (_,i)=>
+            components.reduce(
+                (a,b)=>a+b[i],
+                0
+            )
+        );
+
+
+    let names =
+    [
+        "θ₀",
+        "θ₁ d²L nin/nout",
+        "θ₂ dL(nkv/nq)nin",
+        "θ₃ dL(nkv/nq)nout",
+        "θ₄ dL"
+    ];
+
+
+    let colors =
+    [
+        "#8c8c8c",
+        "#55A868",
+        "#C44E52",
+        "#E2C044",
+        "#4C72B0"
+    ];
+
+
+    let traces=[];
+
+
+    for(let i=0;i<5;i++)
+    {
+
+        traces.push({
+
+            x:nout,
+
+            y:components[i],
+
+            mode:"lines",
+
+            name:names[i],
+
+            stackgroup:"one",
+
+            line:{
+                width:0
+            },
+
+            fillcolor:colors[i],
+
+            opacity:0.88
+
+        });
+
+    }
+
+
+    traces.push({
+
         x:nout,
-        y:energy,
+
+        y:total,
+
         mode:"lines",
-        name:"Total E_tok"
-    };
+
+        name:"Total E_tok",
+
+        line:{
+            color:"black",
+            width:2
+        }
+
+    });
+
 
 
     let layout={
 
+
+        width:700,
+
+        height:450,
+
+
         title:
-        `d=${d}, L=${L}, nq=${nq}, nkv=${nkv}, nin=${nin}`,
+        `Component breakdown (nᵢₙ=${nin})`,
+
 
         xaxis:{
-            title:"Output tokens",
-            type:"log"
+
+            title:
+            "Output tokens n_out (log₂)",
+
+            type:"log",
+
+            tickmode:"array",
+
+            tickvals:
+            [
+                1,2,4,8,16,32,
+                64,128,256,
+                512,1024,2048,4096
+            ]
+
         },
 
+
         yaxis:{
-            title:"Energy per token (J)"
+
+
+            title:
+            "Energy per token E_tok (J)",
+
+
+            type:"log",
+
+
+            tickmode:"array",
+
+            tickvals:
+            [
+                0.0001,
+                0.001,
+                0.01,
+                0.1,
+                1
+            ],
+
+            ticktext:
+            [
+                "1e-4",
+                "1e-3",
+                "1e-2",
+                "1e-1",
+                "1"
+            ]
+
+        },
+
+
+        legend:{
+
+            x:1,
+
+            y:1,
+
+            bgcolor:"rgba(255,255,255,0)"
+
+        },
+
+
+        margin:{
+            l:70,
+            r:20,
+            t:50,
+            b:60
         }
 
     };
@@ -112,14 +266,15 @@ function draw()
 
     Plotly.newPlot(
         "plot",
-        [trace],
-        layout
+        traces,
+        layout,
+        {
+            responsive:true
+        }
     );
 
 }
 
-
-
 async function loadModel()
 {
 

index.html

@@ -2,7 +2,7 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>SweetSpot v2 — energy-per-token demo</title>
+    <title>SweetSpot v2 — Energy-per-Token demo</title>
 
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>