feat: merge amd and nvidia where viable

wozeparrot · Apr 30, 2024 · 9cd75a8 · 9cd75a8
1 parent 7535a5a
commit 9cd75a8
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 94 deletions.
diff --git a/stats/index.css b/stats/index.css
@@ -1,9 +1,14 @@
 /* define colors */
+:root {
+  --primary-color: #a52e4d;
+  --secondary-color: #228039;
+
+  --red-color: #a52e4d;
+  --green-color: #228039;
+  --silver-color: #88808e;
+}
 @media(prefers-color-scheme: light) {
   :root {
-    --primary-color: #a52e4d;
-    --secondary-color: #228039;
-
     --primary-bg-color: #f0f0f0;
     --secondary-bg-color: #eeeeee;
     --foreground-color: #111111;
@@ -12,9 +17,6 @@
 }
 @media(prefers-color-scheme: dark) {
   :root {
-    --primary-color: #a52e4d;
-    --secondary-color: #228039;
-
     --primary-bg-color: #111111;
     --secondary-bg-color: #131313;
     --foreground-color: #f0f0f0;
@@ -96,11 +98,6 @@
   opacity: 0.2;
 }
 
-.ct-series-a .ct-line,
-.ct-series-a .ct-point {
-  stroke: var(--primary-color);
-}
-
 .ct-line {
   stroke-width: 2px;
 }
@@ -109,8 +106,37 @@
   stroke-width: 4px;
 }
 
+/* chartist series colors */
+.ct-series-a .ct-line,
+.ct-series-a .ct-point {
+  stroke: var(--red-color);
+}
 .ct-series-a .ct-area {
-  fill: var(--primary-color);
+  fill: var(--red-color);
+}
+
+.ct-series-b .ct-line,
+.ct-series-b .ct-point {
+  stroke: var(--red-color);
+}
+.ct-series-b .ct-area {
+  fill: var(--red-color);
+}
+
+.ct-series-c .ct-line,
+.ct-series-c .ct-point {
+  stroke: var(--green-color);
+}
+.ct-series-c .ct-area {
+  fill: var(--green-color);
+}
+
+.ct-series-d .ct-line,
+.ct-series-d .ct-point {
+  stroke: var(--silver-color);
+}
+.ct-series-d .ct-area {
+  fill: var(--silver-color);
 }
 
 /* fonts */

diff --git a/stats/index.html b/stats/index.html
@@ -51,42 +51,33 @@ <h3 class="card-header">Stable Diffusion (tinybox red)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-sd-amd"></div>
         </div>
 
-        <div class="card stat-card" data-filename="llama_unjitted.txt" data-system="amd">
-          <h3 class="card-header">Llama 7B unjitted (tinybox red)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-llama_unjitted-amd"></div>
+        <div class="card stat-card" data-filename="llama_unjitted.txt" data-system="amd_nvidia">
+          <h3 class="card-header">Llama 7B unjitted (tinybox red & green)</h3>
+          <div class="ct-chart ct-major-tenth" id="chart-llama_unjitted-amd_nvidia"></div>
         </div>
         <div class="card stat-card" data-filename="llama_unjitted.txt" data-system="mac">
           <h3 class="card-header">Llama 7B unjitted (mac)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-llama_unjitted-mac"></div>
         </div>
-        <div class="card stat-card" data-filename="llama_unjitted.txt" data-system="nvidia">
-          <h3 class="card-header">Llama 7B unjitted (nvidia)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-llama_unjitted-nvidia"></div>
-        </div>
-        <div class="card stat-card" data-filename="llama_jitted.txt" data-system="amd">
-          <h3 class="card-header">Llama 7B jitted (tinybox red)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-llama_jitted-amd"></div>
+
+        <div class="card stat-card" data-filename="llama_jitted.txt" data-system="amd_nvidia">
+          <h3 class="card-header">Llama 7B jitted (tinybox red & green)</h3>
+          <div class="ct-chart ct-major-tenth" id="chart-llama_jitted-amd_nvidia"></div>
         </div>
         <div class="card stat-card" data-filename="llama_jitted.txt" data-system="mac">
           <h3 class="card-header">Llama 7B jitted (mac)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-llama_jitted-mac"></div>
         </div>
-        <div class="card stat-card" data-filename="llama_jitted.txt" data-system="nvidia">
-          <h3 class="card-header">Llama 7B jitted (nvidia)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-llama_jitted-nvidia"></div>
-        </div>
-        <div class="card stat-card" data-filename="llama_beam.txt" data-system="amd">
-          <h3 class="card-header">Llama 7B BEAM (tinybox red)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-llama_beam-amd"></div>
+
+        <div class="card stat-card" data-filename="llama_beam.txt" data-system="amd_nvidia">
+          <h3 class="card-header">Llama 7B BEAM (tinybox red & green)</h3>
+          <div class="ct-chart ct-major-tenth" id="chart-llama_beam-amd_nvidia"></div>
         </div>
         <div class="card stat-card" data-filename="llama_beam.txt" data-system="mac">
           <h3 class="card-header">Llama 7B BEAM (mac)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-llama_beam-mac"></div>
         </div>
-        <div class="card stat-card" data-filename="llama_beam.txt" data-system="nvidia">
-          <h3 class="card-header">Llama 7B BEAM (nvidia)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-llama_beam-nvidia"></div>
-        </div>
+
         <div class="card stat-card" data-filename="llama_2_70B.txt" data-system="amd">
           <h3 class="card-header">Llama 2 70B (tinybox red)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-llama_2_70B-amd"></div>
@@ -105,87 +96,70 @@ <h3 class="card-header">Mixtral (tinybox red)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-mixtral-amd"></div>
         </div>
 
-        <div class="card stat-card" data-filename="gpt2_unjitted.txt" data-system="amd">
-          <h3 class="card-header">GPT2 unjitted (tinybox red)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-gpt2_unjitted-amd"></div>
+        <div class="card stat-card" data-filename="gpt2_unjitted.txt" data-system="amd_nvidia">
+          <h3 class="card-header">GPT2 unjitted (tinybox red & green)</h3>
+          <div class="ct-chart ct-major-tenth" id="chart-gpt2_unjitted-amd_nvidia"></div>
         </div>
         <div class="card stat-card" data-filename="gpt2_unjitted.txt" data-system="mac">
           <h3 class="card-header">GPT2 unjitted (mac)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-gpt2_unjitted-mac"></div>
         </div>
-        <div class="card stat-card" data-filename="gpt2_unjitted.txt" data-system="nvidia">
-          <h3 class="card-header">GPT2 unjitted (nvidia)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-gpt2_unjitted-nvidia"></div>
-        </div>
-        <div class="card stat-card" data-filename="gpt2_jitted.txt" data-system="amd">
-          <h3 class="card-header">GPT2 jitted (tinybox red)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-gpt2_jitted-amd"></div>
+
+        <div class="card stat-card" data-filename="gpt2_jitted.txt" data-system="amd_nvidia">
+          <h3 class="card-header">GPT2 jitted (tinybox red & green)</h3>
+          <div class="ct-chart ct-major-tenth" id="chart-gpt2_jitted-amd_nvidia"></div>
         </div>
         <div class="card stat-card" data-filename="gpt2_jitted.txt" data-system="mac">
           <h3 class="card-header">GPT2 jitted (mac)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-gpt2_jitted-mac"></div>
         </div>
-        <div class="card stat-card" data-filename="gpt2_jitted.txt" data-system="nvidia">
-          <h3 class="card-header">GPT2 jitted (nvidia)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-gpt2_jitted-nvidia"></div>
-        </div>
+
         <div class="card stat-card" data-filename="gpt2_half.txt" data-system="mac">
           <h3 class="card-header">GPT2 HALF=1 (mac)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-gpt2_half-mac"></div>
         </div>
         <div class="card stat-card" data-filename="gpt2_half.txt" data-system="nvidia">
-          <h3 class="card-header">GPT2 HALF=1 (nvidia)</h3>
+          <h3 class="card-header">GPT2 HALF=1 (tinybox green)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-gpt2_half-nvidia"></div>
         </div>
+
         <div class="card stat-card" data-filename="gpt2_half_beam.txt" data-system="mac">
           <h3 class="card-header">GPT2 HALF=1 BEAM=2 (mac)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-gpt2_half_beam-mac"></div>
         </div>
         <div class="card stat-card" data-filename="gpt2_half_beam.txt" data-system="nvidia">
-          <h3 class="card-header">GPT2 HALF=1 BEAM=2 (nvidia)</h3>
+          <h3 class="card-header">GPT2 HALF=1 BEAM=2 (tinybox green)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-gpt2_half_beam-nvidia"></div>
         </div>
 
-        <div class="card stat-card" data-filename="train_cifar.txt" data-system="amd-train">
-          <h3 class="card-header">hlb-cifar10 (tinybox red)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-train_cifar-amd-train"></div>
+        <div class="card stat-card" data-filename="train_cifar.txt" data-system="amd-train_nvidia">
+          <h3 class="card-header">hlb-cifar10 (tinybox red & green)</h3>
+          <div class="ct-chart ct-major-tenth" id="chart-train_cifar-amd-train_nvidia"></div>
         </div>
         <div class="card stat-card" data-filename="train_cifar.txt" data-system="mac">
           <h3 class="card-header">hlb-cifar10 (mac)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-train_cifar-mac"></div>
         </div>
-        <div class="card stat-card" data-filename="train_cifar.txt" data-system="nvidia">
-          <h3 class="card-header">hlb-cifar10 (nvidia)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-train_cifar-nvidia"></div>
-        </div>
-        <div class="card stat-card" data-filename="train_cifar_half.txt" data-system="amd-train">
-          <h3 class="card-header">hlb-cifar10 HALF=1 (tinybox red)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-train_cifar_half-amd-train"></div>
+
+        <div class="card stat-card" data-filename="train_cifar_half.txt" data-system="amd-train_nvidia">
+          <h3 class="card-header">hlb-cifar10 HALF=1 (tinybox red & green)</h3>
+          <div class="ct-chart ct-major-tenth" id="chart-train_cifar_half-amd-train_nvidia"></div>
         </div>
         <div class="card stat-card" data-filename="train_cifar_half.txt" data-system="mac">
           <h3 class="card-header">hlb-cifar10 HALF=1 (mac)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-train_cifar_half-mac"></div>
         </div>
-        <div class="card stat-card" data-filename="train_cifar_half.txt" data-system="nvidia">
-          <h3 class="card-header">hlb-cifar10 HALF=1 (nvidia)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-train_cifar_half-nvidia"></div>
-        </div>
-        <div class="card stat-card" data-filename="train_cifar_bf16.txt" data-system="amd-train">
-          <h3 class="card-header">hlb-cifar10 bf16 (tinybox red)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-train_cifar_bf16-amd-train"></div>
-        </div>
-        <div class="card stat-card" data-filename="train_cifar_bf16.txt" data-system="nvidia">
-          <h3 class="card-header">hlb-cifar10 bf16 (nvidia)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-train_cifar_bf16-nvidia"></div>
-        </div>
-        <div class="card stat-card" data-filename="train_cifar_one_gpu.txt" data-system="amd-train">
-          <h3 class="card-header">hlb-cifar10 Single GPU (tinybox red)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-train_cifar_one_gpu-amd-train"></div>
+
+        <div class="card stat-card" data-filename="train_cifar_bf16.txt" data-system="amd-train_nvidia">
+          <h3 class="card-header">hlb-cifar10 bf16 (tinybox red & green)</h3>
+          <div class="ct-chart ct-major-tenth" id="chart-train_cifar_bf16-amd-train_nvidia"></div>
         </div>
-        <div class="card stat-card" data-filename="train_cifar_one_gpu.txt" data-system="nvidia">
-          <h3 class="card-header">hlb-cifar10 Single GPU (nvidia)</h3>
-          <div class="ct-chart ct-major-tenth" id="chart-train_cifar_one_gpu-nvidia"></div>
+
+        <div class="card stat-card" data-filename="train_cifar_one_gpu.txt" data-system="amd-train_nvidia">
+          <h3 class="card-header">hlb-cifar10 Single GPU (tinybox red & green)</h3>
+          <div class="ct-chart ct-major-tenth" id="chart-train_cifar_one_gpu-amd-train_nvidia"></div>
         </div>
+
         <div class="card stat-card" data-filename="train_cifar_six_gpu.txt" data-system="amd-train">
           <h3 class="card-header">hlb-cifar10 Six GPUs (tinybox red)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-train_cifar_six_gpu-amd-train"></div>
@@ -195,6 +169,7 @@ <h3 class="card-header">hlb-cifar10 Six GPUs (tinybox red)</h3>
           <h3 class="card-header">ResNet50 Single GPU (tinybox red)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-train_resnet_one_gpu-amd-train"></div>
         </div>
+
         <div class="card stat-card" data-filename="train_resnet.txt" data-system="amd-train">
           <h3 class="card-header">ResNet50 Six GPUs (tinybox red)</h3>
           <div class="ct-chart ct-major-tenth" id="chart-train_resnet-amd-train"></div>

diff --git a/stats/index.js b/stats/index.js
@@ -18,8 +18,8 @@ function main() {
   });
 
   // connect to websocket
-  const socket = new WebSocket("wss://tinymod.dev:10000");
-  // const socket = new WebSocket("ws://localhost:10000");
+  // const socket = new WebSocket("wss://tinymod.dev:10000");
+  const socket = new WebSocket("ws://localhost:10000");
   console.log("Connecting to websocket");
 
   // state
@@ -46,7 +46,8 @@ function main() {
     if (event.target.value == last_n_slider.max) {
       last_n.textContent = "All";
     } else {
-      last_n.textContent = (Number(last_n_slider.value) + Number(last_n_slider.step));
+      last_n.textContent = Number(last_n_slider.value) +
+        Number(last_n_slider.step);
     }
 
     reload_charts();
@@ -63,35 +64,42 @@ function main() {
     }
 
     if ("benchmarks" in data) {
+      console.log(data);
       // generate integer only chart ticks for the x axis
       const x_ticks = [];
-      const low = Math.floor(data.benchmarks[0].x / 10) * 10;
-      const high =
-        Math.ceil(data.benchmarks[data.benchmarks.length - 1].x / 10) *
-        10;
+      let lowest_x = Infinity;
+      let highest_x = -Infinity;
+      for (const benchmark of data.benchmarks) {
+        if (benchmark.length == 0) continue;
+        if (benchmark[0].x < lowest_x) {
+          lowest_x = benchmark[0].x;
+        }
+        if (benchmark[benchmark.length - 1].x > highest_x) {
+          highest_x = benchmark[benchmark.length - 1].x;
+        }
+      }
+      const low = Math.floor(lowest_x / 10) * 10;
+      const high = Math.ceil(highest_x / 10) * 10;
       const divisor = (high - low) / 10;
       for (let i = low; i < high; i += divisor) {
         const i_10 = i;
-        if (
-          i_10 < data.benchmarks[0].x ||
-          i_10 > data.benchmarks[data.benchmarks.length - 1].x
-        ) continue;
+        if (i_10 < lowest_x || i_10 > highest_x) continue;
         x_ticks.push(i_10);
       }
 
       // update chart
       charts[`${data.filename}-${data.system}`].update({
-        series: [data.benchmarks],
+        series: data.benchmarks,
       }, {
-        showPoint: (data.benchmarks.length <= 100) ? true : false,
+        showPoint: (data.benchmarks[0].length <= 100) ? true : false,
         showLine: true,
         showArea: true,
         lineSmooth: false,
         axisX: {
           type: Chartist.FixedScaleAxis,
           ticks: x_ticks,
-          high: data.benchmarks[data.benchmarks.length - 1].x,
-          low: data.benchmarks[0].x,
+          high: highest_x,
+          low: lowest_x,
         },
       });
     } else if ("commit" in data) {
@@ -121,7 +129,7 @@ function main() {
             if (data.type === "line" || data.type === "area") {
               data.element.animate({
                 d: {
-                  begin: 2000 * data.index,
+                  begin: 0,
                   dur: 1000,
                   from: data.path.clone().scale(1, 0).translate(
                     0,
@@ -134,7 +142,8 @@ function main() {
             }
           });
 
-          let last_n_v = Number(last_n_slider.value) + Number(last_n_slider.step);
+          let last_n_v = Number(last_n_slider.value) +
+            Number(last_n_slider.step);
           if (last_n_v > Number(last_n_slider.max)) {
             last_n_v = 0;
           }