app

app.js

@@ -0,0 +1,216 @@
+// =====================================================
+// SweetSpot analytical model
+// =====================================================
+
+
+const THETA0 = -2.100e-3;
+const THETA1 = 3.419e-11;
+const THETA2 = 1.010e-9;
+const THETA3 = 5.550e-10;
+const THETA4 = 2.045e-7;
+
+
+function computeEnergy(d,L,nq,nkv,nin,nout)
+{
+
+    const ratio = nkv/nq;
+
+    let total=[];
+
+    for (let n of nout)
+    {
+        let value =
+            THETA0
+            +
+            d*L*(
+                THETA1*d*(nin/n)
+                +
+                ratio*(THETA2*nin + THETA3*n)
+                +
+                THETA4
+            );
+
+        total.push(value);
+    }
+
+    return total;
+}
+
+
+
+function logspace2(start,end,points)
+{
+    let arr=[];
+
+    let a=Math.log2(start);
+    let b=Math.log2(end);
+
+    for(let i=0;i<points;i++)
+    {
+        let x=a+(b-a)*i/(points-1);
+        arr.push(2**x);
+    }
+
+    return arr;
+}
+
+
+
+function draw()
+{
+
+    let d =
+        Number(document.getElementById("d").value);
+
+    let L =
+        Number(document.getElementById("L").value);
+
+    let nq =
+        Number(document.getElementById("nq").value);
+
+    let nkv =
+        Number(document.getElementById("nkv").value);
+
+    let nin =
+        Number(document.getElementById("nin").value);
+
+
+    let nout =
+        logspace2(1,4096,300);
+
+
+    let energy =
+        computeEnergy(
+            d,L,nq,nkv,nin,nout
+        );
+
+
+    let trace = {
+        x:nout,
+        y:energy,
+        mode:"lines",
+        name:"Total E_tok"
+    };
+
+
+    let layout={
+
+        title:
+        `d=${d}, L=${L}, nq=${nq}, nkv=${nkv}, nin=${nin}`,
+
+        xaxis:{
+            title:"Output tokens",
+            type:"log"
+        },
+
+        yaxis:{
+            title:"Energy per token (J)"
+        }
+
+    };
+
+
+    Plotly.newPlot(
+        "plot",
+        [trace],
+        layout
+    );
+
+}
+
+
+
+async function loadModel()
+{
+
+    let repo =
+        document.getElementById("repo").value.trim();
+
+
+    if(!repo.includes("/"))
+    {
+        alert("Use org/model format");
+        return;
+    }
+
+
+    let url =
+    `https://huggingface.co/${repo}/resolve/main/config.json`;
+
+
+    try
+    {
+
+        let response =
+            await fetch(url);
+
+
+        if(!response.ok)
+            throw Error("Cannot load config");
+
+
+        let cfg =
+            await response.json();
+
+
+        let d =
+            cfg.hidden_size ||
+            cfg.d_model ||
+            cfg.n_embd;
+
+
+        let L =
+            cfg.num_hidden_layers ||
+            cfg.num_layers ||
+            cfg.n_layer;
+
+
+        let nq =
+            cfg.num_attention_heads ||
+            cfg.n_head;
+
+
+        let nkv =
+            cfg.num_key_value_heads ||
+            nq;
+
+
+        document.getElementById("d").value=d;
+        document.getElementById("L").value=L;
+        document.getElementById("nq").value=nq;
+        document.getElementById("nkv").value=nkv;
+
+
+        document.getElementById("status").innerHTML =
+        `
+        Loaded ${repo}<br>
+        d=${d},
+        L=${L},
+        nq=${nq},
+        nkv=${nkv}
+        `;
+
+
+        draw();
+
+    }
+    catch(e)
+    {
+        document.getElementById("status").innerHTML =
+        "Error: "+e.message;
+    }
+
+}
+
+
+
+// redraw when sliders change
+
+document
+.querySelectorAll("input[type=number]")
+.forEach(
+    x=>x.addEventListener("change",draw)
+);
+
+
+draw();