add benchmark renderer

2023-02-21 11:54:12 -05:00 · 2023-02-21 11:54:12 -05:00 · 832265157a
parent 71c2e3c70e
commit 832265157a
10 changed files with 734 additions and 7 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,5 +1,4 @@
 node_modules
 __pycache__
-package.json
 pnpm-lock.yaml
 benchmark-download.js
--- a/README.md
+++ b/README.md
@ -26,6 +26,16 @@ Creates a top-level **System Info** tab in Automatic WebUI with

 ![screenshot](system-info.jpg)

+## Benchmark
+
+- Allows to run standardized benchmark and optionally submit data to cloud logger [[details]](pages/README.md)
+
+![screenshot](benchmark.jpg)
+
+- *Note: Record is appended if any of the system properties change else benchmark data replaces existing matching record*
+
+- All results can be [viewed online](https://vladmandic.github.io/sd-extension-system-info/pages/benchmark.html)
+
 ## Models

 - Models (with hash)
--- a/benchmark.jpg
+++ b/benchmark.jpg
--- a/pages/benchmark-raw.json
+++ b/pages/benchmark-raw.json
@ -1,5 +1,5 @@
 {
-  "max_id": "1564658460619108355",
+  "max_id": "1564688567958171650",
  "events": [
    {
      "id": "1564370541899603981",
@ -1092,6 +1092,20 @@
      "hostname": "kalia",
      "severity": "Info",
      "facility": "User"
+    },
+    {
+      "id": "1564688567958171650",
+      "source_ip": "37.79.4.194",
+      "program": "SDBENCHMARK",
+      "message": "False 2023-02-20 11:56:43.428913|7.2 / 8.1 / 8.84|updated:2023-02-19 hash:fc3e9e5d url:https://github.com/vladmandic/automatic/tree/master|host:wsl arch:x86_64 cpu:x86_64 system:Linux release:5.15.90.1-microsoft-standard-WSL2 python:3.10.6|torch:2.0.0.dev20230211+cu118 autocast half xformers:0.0.17+12c076d.d20230211 accelerate:0.16.0 transformers:4.26.1|device:NVIDIA GeForce RTX 3060 (1) (sm_90) (8, 6) cuda:11.8 cudnn:8700 12GB|xformers none|sd-v15-runwayml.ckpt [cc6cb27103]|vlado||88abf4|4bb7e0 ",
+      "received_at": "2023-02-21T09:00:47-05:00",
+      "generated_at": "2023-02-21T14:00:46-05:00",
+      "display_received_at": "Feb 21 09:00:47",
+      "source_id": 13745391437,
+      "source_name": "SIPOVEC-PC",
+      "hostname": "SIPOVEC-PC",
+      "severity": "Info",
+      "facility": "User"
    }
  ]
 }
--- a/pages/benchmark.css
+++ b/pages/benchmark.css
@ -0,0 +1,583 @@
+.gridjs-head button, .gridjs-footer button {
+  cursor: pointer;
+  background-color: transparent;
+  background-image: none;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none; }
+
+.gridjs-temp {
+  position: relative; }
+
+.gridjs-head {
+  width: 100%;
+  margin-bottom: 5px;
+  padding: 5px 1px; }
+  .gridjs-head::after {
+    content: '';
+    display: block;
+    clear: both; }
+
+.gridjs-head:empty {
+  padding: 0;
+  border: none; }
+
+.gridjs-container {
+  overflow: hidden;
+  display: inline-block;
+  padding: 2px;
+  color: #000;
+  position: relative;
+  z-index: 0; }
+
+.gridjs-footer {
+  display: block;
+  position: relative;
+  width: 100%;
+  z-index: 5;
+  padding: 12px 24px;
+  border-top: 1px solid #e5e7eb;
+  background-color: #fff;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);
+  border-radius: 0 0 8px 8px;
+  border-bottom-width: 1px;
+  border-color: #e5e7eb; }
+
+.gridjs-footer:empty {
+  padding: 0;
+  border: none; }
+
+input.gridjs-input {
+  outline: none;
+  background-color: #fff;
+  border: 1px solid #d2d6dc;
+  border-radius: 5px;
+  padding: 10px 13px;
+  font-size: 14px;
+  line-height: 1.45;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none; }
+  input.gridjs-input:focus {
+    box-shadow: 0 0 0 3px rgba(149, 189, 243, 0.5);
+    border-color: #9bc2f7; }
+
+.gridjs-pagination {
+  color: #3d4044; }
+  .gridjs-pagination::after {
+    content: '';
+    display: block;
+    clear: both; }
+  .gridjs-pagination .gridjs-summary {
+    float: left;
+    margin-top: 5px; }
+  .gridjs-pagination .gridjs-pages {
+    float: right; }
+    .gridjs-pagination .gridjs-pages button {
+      padding: 5px 14px;
+      border: 1px solid #d2d6dc;
+      background-color: #fff;
+      border-right: none;
+      outline: none;
+      -webkit-user-select: none;
+         -moz-user-select: none;
+          -ms-user-select: none;
+              user-select: none; }
+    .gridjs-pagination .gridjs-pages button:focus {
+      box-shadow: 0 0 0 2px rgba(149, 189, 243, 0.5); }
+    .gridjs-pagination .gridjs-pages button:hover {
+      background-color: #f7f7f7;
+      color: #3c4257;
+      outline: none; }
+    .gridjs-pagination .gridjs-pages button:disabled,
+    .gridjs-pagination .gridjs-pages button[disabled],
+    .gridjs-pagination .gridjs-pages button:hover:disabled {
+      cursor: default;
+      background-color: #fff;
+      color: #6b7280; }
+    .gridjs-pagination .gridjs-pages button.gridjs-spread {
+      cursor: default;
+      box-shadow: none;
+      background-color: #fff; }
+    .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
+      background-color: #f7f7f7;
+      font-weight: bold; }
+    .gridjs-pagination .gridjs-pages button:last-child {
+      border-bottom-right-radius: 6px;
+      border-top-right-radius: 6px;
+      border-right: 1px solid #d2d6dc; }
+    .gridjs-pagination .gridjs-pages button:first-child {
+      border-bottom-left-radius: 6px;
+      border-top-left-radius: 6px; }
+
+button.gridjs-sort {
+  float: right;
+  height: 24px;
+  width: 13px;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position-x: center;
+  cursor: pointer;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background-size: contain; }
+  button.gridjs-sort-neutral {
+    opacity: 0.3;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MDEuOTk4cHgiIGhlaWdodD0iNDAxLjk5OHB4IiB2aWV3Qm94PSIwIDAgNDAxLjk5OCA0MDEuOTk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDEuOTk4IDQwMS45OTg7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NwoJCQljMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEKCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KCQk8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3CgkJCWMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2CgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");
+    background-position-y: center; }
+  button.gridjs-sort-asc {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MXB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjE7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDE5Ny4yODdMMTU5LjAyOCw2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMsMS44MDctMTIuODUsNS40MjRMNS40MjQsMTk3LjI4NwoJCUMxLjgwNywyMDAuOTA0LDAsMjA1LjE4NiwwLDIxMC4xMzRzMS44MDcsOS4yMzMsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI1LDEyLjg1LDUuNDI1aDI1NS44MTMKCQljNC45NDksMCw5LjIzMy0xLjgwOCwxMi44NDgtNS40MjVjMy42MTMtMy42MTMsNS40MjctNy44OTgsNS40MjctMTIuODQ3UzI5MC41NDgsMjAwLjkwNCwyODYuOTM1LDE5Ny4yODd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");
+    background-position-y: 35%;
+    background-size: 10px; }
+  button.gridjs-sort-desc {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIsMC05LjIzMywxLjgwNy0xMi44NSw1LjQyNAoJCUMxLjgwNyw3Mi45OTgsMCw3Ny4yNzksMCw4Mi4yMjhjMCw0Ljk0OCwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDdsMTI3LjkwNywxMjcuOTA3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4CgkJczkuMjMzLTEuODExLDEyLjg0Ny01LjQyOEwyODYuOTM1LDk1LjA3NGMzLjYxMy0zLjYxNyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdDMjkyLjM2Miw3Ny4yNzksMjkwLjU0OCw3Mi45OTgsMjg2LjkzNSw2OS4zNzd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");
+    background-position-y: 65%;
+    background-size: 10px; }
+
+button.gridjs-sort:focus {
+  outline: none; }
+
+table.gridjs-table {
+  max-width: 100%;
+  border-collapse: collapse;
+  text-align: left;
+  display: table;
+  margin: 0;
+  padding: 0;
+  overflow: auto;
+  table-layout: fixed; }
+
+.gridjs-tbody {
+  background-color: #fff; }
+
+td.gridjs-td {
+  border: 1px solid #e5e7eb;
+  padding: 12px 24px;
+  background-color: #fff;
+  box-sizing: content-box; }
+
+td.gridjs-td:first-child {
+  border-left: none; }
+
+td.gridjs-td:last-child {
+  border-right: none; }
+
+td.gridjs-message {
+  text-align: center; }
+
+th.gridjs-th {
+  position: relative;
+  color: #6b7280;
+  background-color: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-top: none;
+  padding: 14px 24px;
+  -webkit-user-select: none;
+     -moz-user-select: none;
+      -ms-user-select: none;
+          user-select: none;
+  box-sizing: border-box;
+  white-space: nowrap;
+  outline: none;
+  vertical-align: middle; }
+  th.gridjs-th .gridjs-th-content {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    width: 100%;
+    float: left; }
+  th.gridjs-th-sort {
+    cursor: pointer; }
+    th.gridjs-th-sort .gridjs-th-content {
+      width: calc(100% - 15px); }
+  th.gridjs-th-sort:hover {
+    background-color: #e5e7eb; }
+  th.gridjs-th-sort:focus {
+    background-color: #e5e7eb; }
+  th.gridjs-th-fixed {
+    position: sticky;
+    box-shadow: 0 1px 0 0 #e5e7eb; }
+    @supports (-moz-appearance: none) {
+      th.gridjs-th-fixed {
+        box-shadow: 0 0 0 1px #e5e7eb; } }
+
+th.gridjs-th:first-child {
+  border-left: none; }
+
+th.gridjs-th:last-child {
+  border-right: none; }
+
+.gridjs-tr {
+  border: none; }
+  .gridjs-tr-selected td {
+    background-color: #ebf5ff; }
+
+.gridjs-tr:last-child td {
+  border-bottom: 0; }
+
+.gridjs *,
+.gridjs :after,
+.gridjs :before {
+  box-sizing: border-box; }
+
+.gridjs-wrapper {
+  position: relative;
+  z-index: 1;
+  overflow: auto;
+  width: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.26);
+  border-radius: 8px 8px 0 0;
+  display: block;
+  border-top-width: 1px;
+  border-color: #e5e7eb; }
+
+.gridjs-wrapper:nth-last-of-type(2) {
+  border-radius: 8px;
+  border-bottom-width: 1px; }
+
+.gridjs-search {
+  float: left; }
+  .gridjs-search-input {
+    width: 250px; }
+
+.gridjs-loading-bar {
+  z-index: 10;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  background-color: #fff;
+  opacity: 0.5; }
+  .gridjs-loading-bar::after {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateX(-100%);
+    background-image: linear-gradient(90deg, rgba(204, 204, 204, 0) 0, rgba(204, 204, 204, 0.2) 20%, rgba(204, 204, 204, 0.5) 60%, rgba(204, 204, 204, 0));
+    -webkit-animation: shimmer 2s infinite;
+            animation: shimmer 2s infinite;
+    content: ''; }
+
+@-webkit-keyframes shimmer {
+  100% {
+    transform: translateX(100%); } }
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%); } }
+
+.gridjs-td .gridjs-checkbox {
+  display: block;
+  margin: auto;
+  cursor: pointer; }
+
+.gridjs-resizable {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  width: 5px; }
+  .gridjs-resizable:hover {
+    cursor: ew-resize;
+    background-color: #9bc2f7; }
+
+/*# sourceMappingURL=mermaid.css.map */
+
+@media (prefers-color-scheme: dark) {
+  .gridjs-head button, .gridjs-footer button {
+    cursor: pointer;
+    background-color: transparent;
+    background-image: none;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none; }
+  
+  .gridjs-temp {
+    position: relative; }
+  
+  .gridjs-head {
+    width: 100%;
+    margin-bottom: 5px;
+    padding: 5px 1px; }
+    .gridjs-head::after {
+      content: '';
+      display: block;
+      clear: both; }
+  
+  .gridjs-head:empty {
+    padding: 0;
+    border: none; }
+  
+  .gridjs-container {
+    overflow: hidden;
+    display: inline-block;
+    padding: 2px;
+    color: #fff;
+    position: relative;
+    z-index: 0; }
+  
+  .gridjs-footer {
+    display: block;
+    position: relative;
+    width: 100%;
+    z-index: 5;
+    padding: 12px 24px;
+    border-top: 1px solid #1a1814;
+    background-color: #000;
+    box-shadow: 0 1px 3px 0 rgba(255,255,255, 0.1), 0 1px 2px 0 rgba(255,255,255, 0.26);
+    border-radius: 0 0 8px 8px;
+    border-bottom-width: 1px;
+    border-color: #1a1814; }
+  
+  .gridjs-footer:empty {
+    padding: 0;
+    border: none; }
+  
+  input.gridjs-input {
+    outline: none;
+    background-color: #000;
+    border: 1px solid #2d2923;
+    border-radius: 5px;
+    padding: 10px 13px;
+    font-size: 14px;
+    line-height: 1.45;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none; }
+    input.gridjs-input:focus {
+      box-shadow: 0 0 0 3px rgba(106,66,12, 0.5);
+      border-color: #643d08; }
+  
+  .gridjs-pagination {
+    color: #c2bfbb; }
+    .gridjs-pagination::after {
+      content: '';
+      display: block;
+      clear: both; }
+    .gridjs-pagination .gridjs-summary {
+      float: left;
+      margin-top: 5px; }
+    .gridjs-pagination .gridjs-pages {
+      float: right; }
+      .gridjs-pagination .gridjs-pages button {
+        padding: 5px 14px;
+        border: 1px solid #2d2923;
+        background-color: #000;
+        border-right: none;
+        outline: none;
+        -webkit-user-select: none;
+           -moz-user-select: none;
+            -ms-user-select: none;
+                user-select: none; }
+      .gridjs-pagination .gridjs-pages button:focus {
+        box-shadow: 0 0 0 2px rgba(106,66,12, 0.5); }
+      .gridjs-pagination .gridjs-pages button:hover {
+        background-color: #080808;
+        color: #c3bda8;
+        outline: none; }
+      .gridjs-pagination .gridjs-pages button:disabled,
+      .gridjs-pagination .gridjs-pages button[disabled],
+      .gridjs-pagination .gridjs-pages button:hover:disabled {
+        cursor: default;
+        background-color: #000;
+        color: #948d7f; }
+      .gridjs-pagination .gridjs-pages button.gridjs-spread {
+        cursor: default;
+        box-shadow: none;
+        background-color: #000; }
+      .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
+        background-color: #080808;
+        font-weight: bold; }
+      .gridjs-pagination .gridjs-pages button:last-child {
+        border-bottom-right-radius: 6px;
+        border-top-right-radius: 6px;
+        border-right: 1px solid #2d2923; }
+      .gridjs-pagination .gridjs-pages button:first-child {
+        border-bottom-left-radius: 6px;
+        border-top-left-radius: 6px; }
+  
+  button.gridjs-sort {
+    float: right;
+    height: 24px;
+    width: 13px;
+    background-color: transparent;
+    background-repeat: no-repeat;
+    background-position-x: center;
+    cursor: pointer;
+    padding: 0;
+    margin: 0;
+    border: none;
+    outline: none;
+    background-size: contain; }
+    button.gridjs-sort-neutral {
+      opacity: 0.3;
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSI0MDEuOTk4cHgiIGhlaWdodD0iNDAxLjk5OHB4IiB2aWV3Qm94PSIwIDAgNDAxLjk5OCA0MDEuOTk4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MDEuOTk4IDQwMS45OTg7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxnPgoJCTxwYXRoIGQ9Ik03My4wOTIsMTY0LjQ1MmgyNTUuODEzYzQuOTQ5LDAsOS4yMzMtMS44MDcsMTIuODQ4LTUuNDI0YzMuNjEzLTMuNjE2LDUuNDI3LTcuODk4LDUuNDI3LTEyLjg0NwoJCQljMC00Ljk0OS0xLjgxMy05LjIyOS01LjQyNy0xMi44NUwyMTMuODQ2LDUuNDI0QzIxMC4yMzIsMS44MTIsMjA1Ljk1MSwwLDIwMC45OTksMHMtOS4yMzMsMS44MTItMTIuODUsNS40MjRMNjAuMjQyLDEzMy4zMzEKCQkJYy0zLjYxNywzLjYxNy01LjQyNCw3LjkwMS01LjQyNCwxMi44NWMwLDQuOTQ4LDEuODA3LDkuMjMxLDUuNDI0LDEyLjg0N0M2My44NjMsMTYyLjY0NSw2OC4xNDQsMTY0LjQ1Miw3My4wOTIsMTY0LjQ1MnoiLz4KCQk8cGF0aCBkPSJNMzI4LjkwNSwyMzcuNTQ5SDczLjA5MmMtNC45NTIsMC05LjIzMywxLjgwOC0xMi44NSw1LjQyMWMtMy42MTcsMy42MTctNS40MjQsNy44OTgtNS40MjQsMTIuODQ3CgkJCWMwLDQuOTQ5LDEuODA3LDkuMjMzLDUuNDI0LDEyLjg0OEwxODguMTQ5LDM5Ni41N2MzLjYyMSwzLjYxNyw3LjkwMiw1LjQyOCwxMi44NSw1LjQyOHM5LjIzMy0xLjgxMSwxMi44NDctNS40MjhsMTI3LjkwNy0xMjcuOTA2CgkJCWMzLjYxMy0zLjYxNCw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDhjMC00Ljk0OC0xLjgxMy05LjIyOS01LjQyNy0xMi44NDdDMzM4LjEzOSwyMzkuMzUzLDMzMy44NTQsMjM3LjU0OSwzMjguOTA1LDIzNy41NDl6Ii8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");
+      background-position-y: center; filter: invert(100%);}
+    button.gridjs-sort-asc {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MXB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYxIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjE7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDE5Ny4yODdMMTU5LjAyOCw2OS4zODFjLTMuNjEzLTMuNjE3LTcuODk1LTUuNDI0LTEyLjg0Ny01LjQyNHMtOS4yMzMsMS44MDctMTIuODUsNS40MjRMNS40MjQsMTk3LjI4NwoJCUMxLjgwNywyMDAuOTA0LDAsMjA1LjE4NiwwLDIxMC4xMzRzMS44MDcsOS4yMzMsNS40MjQsMTIuODQ3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI1LDEyLjg1LDUuNDI1aDI1NS44MTMKCQljNC45NDksMCw5LjIzMy0xLjgwOCwxMi44NDgtNS40MjVjMy42MTMtMy42MTMsNS40MjctNy44OTgsNS40MjctMTIuODQ3UzI5MC41NDgsMjAwLjkwNCwyODYuOTM1LDE5Ny4yODd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");
+      background-position-y: 35%;
+      background-size: 10px; filter: invert(100%);}
+    button.gridjs-sort-desc {
+      background-image: url("data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHdpZHRoPSIyOTIuMzYycHgiIGhlaWdodD0iMjkyLjM2MnB4IiB2aWV3Qm94PSIwIDAgMjkyLjM2MiAyOTIuMzYyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAyOTIuMzYyIDI5Mi4zNjI7IgoJIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8Zz4KCTxwYXRoIGQ9Ik0yODYuOTM1LDY5LjM3N2MtMy42MTQtMy42MTctNy44OTgtNS40MjQtMTIuODQ4LTUuNDI0SDE4LjI3NGMtNC45NTIsMC05LjIzMywxLjgwNy0xMi44NSw1LjQyNAoJCUMxLjgwNyw3Mi45OTgsMCw3Ny4yNzksMCw4Mi4yMjhjMCw0Ljk0OCwxLjgwNyw5LjIyOSw1LjQyNCwxMi44NDdsMTI3LjkwNywxMjcuOTA3YzMuNjIxLDMuNjE3LDcuOTAyLDUuNDI4LDEyLjg1LDUuNDI4CgkJczkuMjMzLTEuODExLDEyLjg0Ny01LjQyOEwyODYuOTM1LDk1LjA3NGMzLjYxMy0zLjYxNyw1LjQyNy03Ljg5OCw1LjQyNy0xMi44NDdDMjkyLjM2Miw3Ny4yNzksMjkwLjU0OCw3Mi45OTgsMjg2LjkzNSw2OS4zNzd6Ii8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+");
+      background-position-y: 65%;
+      background-size: 10px; filter: invert(100%);}
+  
+  button.gridjs-sort:focus {
+    outline: none; }
+  
+  table.gridjs-table {
+    max-width: 100%;
+    border-collapse: collapse;
+    text-align: left;
+    display: table;
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    table-layout: fixed; }
+  
+  .gridjs-tbody {
+    background-color: #000; }
+  
+  td.gridjs-td {
+    border: 1px solid #1a1814;
+    padding: 12px 24px;
+    background-color: #000;
+    box-sizing: content-box; }
+  
+  td.gridjs-td:first-child {
+    border-left: none; }
+  
+  td.gridjs-td:last-child {
+    border-right: none; }
+  
+  td.gridjs-message {
+    text-align: center; }
+  
+  th.gridjs-th {
+    position: relative;
+    color: #6b7280;
+    background-color: #060504;
+    border: 1px solid #1a1814;
+    border-top: none;
+    padding: 14px 24px;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
+    box-sizing: border-box;
+    white-space: nowrap;
+    outline: none;
+    vertical-align: middle; }
+    th.gridjs-th .gridjs-th-content {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      width: 100%;
+      float: left; }
+    th.gridjs-th-sort {
+      cursor: pointer; }
+      th.gridjs-th-sort .gridjs-th-content {
+        width: calc(100% - 15px); }
+    th.gridjs-th-sort:hover {
+      background-color: #1a1814; }
+    th.gridjs-th-sort:focus {
+      background-color: #1a1814; }
+    th.gridjs-th-fixed {
+      position: sticky;
+      box-shadow: 0 1px 0 0 #1a1814; }
+      @supports (-moz-appearance: none) {
+        th.gridjs-th-fixed {
+          box-shadow: 0 0 0 1px #1a1814; } }
+  
+  th.gridjs-th:first-child {
+    border-left: none; }
+  
+  th.gridjs-th:last-child {
+    border-right: none; }
+  
+  .gridjs-tr {
+    border: none; }
+    .gridjs-tr-selected td {
+      background-color: #140a00; }
+  
+  .gridjs-tr:last-child td {
+    border-bottom: 0; }
+  
+  .gridjs *,
+  .gridjs :after,
+  .gridjs :before {
+    box-sizing: border-box; }
+  
+  .gridjs-wrapper {
+    position: relative;
+    z-index: 1;
+    overflow: auto;
+    width: 100%;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    box-shadow: 0 1px 3px 0 rgba(255,255,255, 0.1), 0 1px 2px 0 rgba(255,255,255, 0.26);
+    border-radius: 8px 8px 0 0;
+    display: block;
+    border-top-width: 1px;
+    border-color: #1a1814; }
+  
+  .gridjs-wrapper:nth-last-of-type(2) {
+    border-radius: 8px;
+    border-bottom-width: 1px; }
+  
+  .gridjs-search {
+    float: left; }
+    .gridjs-search-input {
+      width: 250px; }
+  
+  .gridjs-loading-bar {
+    z-index: 10;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    background-color: #000;
+    opacity: 0.5; }
+    .gridjs-loading-bar::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      background-image: linear-gradient(90deg, rgba(51,51,51, 0) 0, rgba(51,51,51, 0.2) 20%, rgba(51,51,51, 0.5) 60%, rgba(51,51,51, 0));
+      -webkit-animation: shimmer 2s infinite;
+              animation: shimmer 2s infinite;
+      content: ''; }
+  
+  @-webkit-keyframes shimmer {
+    100% {
+      transform: translateX(100%); } }
+  
+  @keyframes shimmer {
+    100% {
+      transform: translateX(100%); } }
+  
+  .gridjs-td .gridjs-checkbox {
+    display: block;
+    margin: auto;
+    cursor: pointer; }
+  
+  .gridjs-resizable {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    width: 5px; }
+    .gridjs-resizable:hover {
+      cursor: ew-resize;
+      background-color: #643d08; }
+  }
--- a/pages/benchmark.html
+++ b/pages/benchmark.html
@ -11,14 +11,104 @@
    <link rel="manifest" href="manifest.webmanifest">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="favicon.png">
-    <script src="benchmark.js" type="module"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridjs@6.0.6/dist/theme/mermaid.css">
+    <!-- <link rel="stylesheet" href="benchmark.css"> -->
    <style>
-      @font-face { font-family: 'Lato'; font-display: swap; font-style: normal; font-weight: 100; src: local('Lato'), url('lato-light.woff2') }
-      html { font-family: 'Lato', 'Segoe UI'; font-size: 16px; font-variant: small-caps; }
-      body { margin: 0; background: black; color: white; overflow-x: hidden; width: 100vw; height: 100vh; }
+      @font-face { font-family: 'Roboto'; font-display: swap; font-style: normal; font-weight: 100; src: local('Roboto'), url('roboto.ttf') }
+      html { font-family: 'Roboto', 'Segoe UI'; font-size: 14px; }
+      body { margin: 0; background: black; color: white; overflow: hidden; width: 100vw; height: 100vh; line-height: 1.5rem; }
      body::-webkit-scrollbar { display: none; }
+      div { margin-bottom: 1rem; }
+      a { color: #AAA; text-decoration: none; }
+      th { top: -2px !important; } /* fix for gridjs header */
+      input[type=search] { background-color: #333; font-size: 1.2rem; border-color: #222; color: white; margin-left: 12px; }
+      ::-webkit-scrollbar { width: 12px; }
+      ::-webkit-scrollbar-track { background: #555; }
+      ::-webkit-scrollbar-thumb { background-color: #AAA; border-radius: 2px; border-width: 0; box-shadow: 2px 2px 3px #111111; }
    </style>
  </head>
  <body>
+    <div style="margin: 12px">
+      <h1>SD WebUI Bechmark Data</h1>
+      <div>
+        Benchmark data is created using | <b>SD WebUI Extension <a href="https://github.com/vladmandic/sd-extension-system-info" style="color: #CE6400">System Info</a></b>
+      </div>
+      Last modified | <span id="modified" style="color: #AAA"></span>
+      <div>Download 
+        | <a href="https://vladmandic.github.io/sd-extension-system-info/pages/benchmark-data.json" style="color: #AAA" target="_blank">DATA</a></b> |
+        | <a href="https://vladmandic.github.io/sd-extension-system-info/pages/benchmark-raw.json" style="color: #AAA" target="_blank">RAW</a></b> |
+        | <a href="https://github.com/vladmandic/sd-extension-system-info/blob/main/pages/benchmark.md" style="color: #AAA" target="_blank">MD</a></b> |
+      </div>
+      <div style="color: #CCC"><i>Note | Performance is measured as iterations per second for different batch sizes (1, 2, 4, 8 ...) and using standardized txt2img settings</i></div>
+      <br>
+      <div id="table"></div> 
+      <div id="log" style="color: #AAA; position: absolute; bottom: 0"></div>
+    </div>
+    <script type="module">
+      import { Grid, html } from 'https://cdn.jsdelivr.net/npm/gridjs@6.0.6/dist/gridjs.module.js'; // eslint-disable-line import/no-unresolved, node/no-missing-import, import/extensions
+
+      const dataUrl = 'https://vladmandic.github.io/sd-extension-system-info/pages/benchmark-data.json';
+
+      const log = (...msg) => {
+        console.log('benchmark', ...msg); // eslint-disable-line no-console
+        const el = document.getElementById('log');
+        el.innerHTML = Array.isArray(msg) ? msg.join(' ') : msg;
+        el.style.display = 'block';
+        setTimeout(() => el.style.display = 'none', 2500);
+      };
+
+      async function main() {
+        let data = [];
+        const res = await fetch(dataUrl);
+        if (res.ok) {
+          data = await res.json();
+          const modified = res.headers.get('last-modified');
+          document.getElementById('modified').innerHTML = `${new Date(modified).toLocaleString()}`;
+          log('benchmark data loaded records:', data.length);
+        } else {
+          log('benchmark data load failed:', res.status, res.statusText);
+        }
+
+        const text2url = (text) => text.replace(/((|http|https|ftp):\/\/[\w?=&./-;#~%-]+(?![\w\s?&./;#~%"=-]*>))/g, "<a href='$1' target='_blank'>$1</a>").replace(/(url:)/g, '').replace('updated:', '');
+        const perfSort = (a, b) => {
+          const a0 = a.split('/');
+          const b0 = b.split('/');
+          const a1 = parseFloat(a0[a0.length - 1].trim());
+          const b1 = parseFloat(b0[b0.length - 1].trim());
+          return a1 - b1;
+        };
+
+        const grid = new Grid({
+          columns: [
+            { name: 'Date', width: '130px', formatter: (cell) => `${new Date(cell).toLocaleString()}` },
+            { name: 'Performance', formatter: (cell) => html(`<b>${cell.replace(/\//g, 'it/s<br>')} it/s</b>`), sort: { compare: (a, b) => perfSort(a, b) } },
+            { name: 'Version', width: '260px', formatter: (cell) => html(`${text2url(cell)}</b>`) },
+            { name: 'System', width: '400px' },
+            { name: 'Libraries', width: '300px' },
+            { name: 'GPU', width: '260px', formatter: (cell) => html(`${cell.replace('device:', '')}`) },
+            { name: 'Optimizations', formatter: (cell) => html(`${cell.replace(/ /g, '<br>')}`) },
+            { name: 'Model', formatter: (cell) => html(`${cell.replace(/\[/g, '<br>[')}`) },
+            'Username',
+            'Note',
+          ],
+          // pagination: true,
+          search: true,
+          sort: true,
+          resizable: true,
+          fixedHeader: true,
+          height: '78vh',
+          style: {
+            th: { 'background-color': '#CE6400', color: '#000', border: '2px solid #111', padding: '12px' },
+            td: { overflow: 'hidden', padding: '6px 10px', 'line-height': '1.5rem', 'background-color': '#333', color: '#FFF', border: '2px solid #111' },
+          },
+          data,
+        });
+        grid.render(document.getElementById('table'));
+        grid.on('rowClick', (...args) => log('row:', args));
+        grid.on('cellClick', (...args) => log('cell:', args));
+      }
+
+      window.onload = main;
+  </script>
  </body>
 </html>
--- a/pages/benchmark.md
+++ b/pages/benchmark.md
@ -1,7 +1,7 @@

  # Benchmark Data

-  ## Updated: 2023-02-21T13:59:14.016Z
+  ## Updated: 2023-02-21T16:46:36.390Z
  
  ### Submit data using WebUI extension: <https://github.com/vladmandic/sd-extension-system-info>

--- a/pages/lato-light.woff2
+++ b/pages/lato-light.woff2
--- a/pages/package.json
+++ b/pages/package.json
@ -0,0 +1,31 @@
+{
+  "name": "sd-extensions-system-info",
+  "version": "0.0.1",
+  "description": "",
+  "main": "benchmark-download.js",
+  "scripts": {
+    "start": "node benchmark-download.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vladmandic/sd-extension-system-info.git"
+  },
+  "bugs": {
+    "url": "https://github.com/vladmandic/sd-extension-system-info/issues"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "keywords": [],
+  "author": "Vladimir Mandic <mandic00@live.com>",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "^18.14.0",
+    "eslint": "^8.34.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-html": "^7.1.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-json": "^3.1.0",
+    "eslint-plugin-node": "^11.1.0"
+  }
+}
--- a/pages/roboto.ttf
+++ b/pages/roboto.ttf