implement html output, fix log scaling in charts (#218)

To clarify all of the UI changes here, there was a previous version of
the UI that worked with an older version of guidellm and the code used
to generate the html report provided the UI with a different data
format. Most of the UI changes here are needed to get things up to date
with the current version of guidellm and how the html reporting logic
generates data.

There are a few specific changes in these files to get logarithmic
scaling working which I found was broken after making these changes, in
hindsight I would have split these out into another PR:
src/ui/lib/components/Charts/DashedLine/DashedLine.component.tsx
src/ui/lib/components/Charts/DashedLine/helpers.ts
src/ui/lib/components/Charts/MetricLine/MetricLine.component.tsx
tests/ui/unit/components/Charts/DashedLine/helpers.test.ts

There were a few other tiny bug fixes as well.

---------

Signed-off-by: dalthecow <[email protected]>
Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Samuel Monson <[email protected]>
Co-authored-by: Mark Kurtz <[email protected]>
Co-authored-by: Copilot <[email protected]>

Author: 5 people

.github/workflows/development.yml

@@ -246,6 +246,11 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Set up Node.js 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
       - name: Check if UI-related files changed
         id: check-changes
         run: |
@@ -276,7 +281,7 @@ jobs:
           echo "pr_number=${PR_NUMBER}" >> $GITHUB_OUTPUT
 
           # Set asset prefix and base path with PR number
-          ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/pr/${PR_NUMBER}
+          ASSET_PREFIX=https://blog.vllm.ai/guidellm/ui/pr/${PR_NUMBER}
           USE_MOCK_DATA=true
           BASE_PATH=/ui/pr/${PR_NUMBER}
           GIT_SHA=${{ github.sha }}
@@ -303,7 +308,7 @@ jobs:
         if: steps.check-changes.outputs.should_build == 'true'
         id: deploy
         run: |
-          DEPLOY_URL=https://neuralmagic.github.io/guidellm/ui/pr/${{ steps.build.outputs.pr_number }}
+          DEPLOY_URL=https://blog.vllm.ai/guidellm/ui/pr/${{ steps.build.outputs.pr_number }}
           echo "url=${DEPLOY_URL}" >> $GITHUB_OUTPUT
 
       - name: Find PR comment

.github/workflows/main.yml

@@ -205,7 +205,7 @@ jobs:
           export $(grep -v '^#' .env.development | xargs)
 
           # Set asset prefix and base path with PR number
-          ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/dev
+          ASSET_PREFIX=https://blog.vllm.ai/guidellm/ui/dev
           BASE_PATH=/ui/dev
           GIT_SHA=${{ github.sha }}
           export ASSET_PREFIX=${ASSET_PREFIX}

.github/workflows/nightly.yml

@@ -226,7 +226,7 @@ jobs:
           export $(grep -v '^#' .env.staging | xargs)
 
           # Set asset prefix and base path with git tag
-          ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/nightly
+          ASSET_PREFIX=https://blog.vllm.ai/guidellm/ui/nightly
           BASE_PATH=/ui/nightly
           GIT_SHA=${{ github.sha }}
           export ASSET_PREFIX=${ASSET_PREFIX}

.github/workflows/release-candidate.yml

@@ -216,7 +216,7 @@ jobs:
           export $(grep -v '^#' .env.staging | xargs)
 
           # Set asset prefix and base path with git tag
-          ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/release/${TAG}
+          ASSET_PREFIX=https://blog.vllm.ai/guidellm/ui/release/${TAG}
           BASE_PATH=/ui/release/${TAG}
           GIT_SHA=${{ github.sha }}
           export ASSET_PREFIX=${ASSET_PREFIX}
@@ -270,7 +270,7 @@ jobs:
           export $(grep -v '^#' .env.staging | xargs)
 
           # Set asset prefix and base path with git tag
-          ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/release/latest
+          ASSET_PREFIX=https://blog.vllm.ai/guidellm/ui/release/latest
           BASE_PATH=/ui/release/latest
           GIT_SHA=${{ github.sha }}
           export ASSET_PREFIX=${ASSET_PREFIX}

.github/workflows/release.yml

@@ -215,7 +215,7 @@ jobs:
           export $(grep -v '^#' .env.production | xargs)
 
           # Set asset prefix and base path with git tag
-          ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/${TAG}
+          ASSET_PREFIX=https://blog.vllm.ai/guidellm/ui/${TAG}
           BASE_PATH=/ui/${TAG}
           GIT_SHA=${{ github.sha }}
           export ASSET_PREFIX=${ASSET_PREFIX}
@@ -269,7 +269,7 @@ jobs:
           export $(grep -v '^#' .env.production | xargs)
 
           # Set asset prefix and base path with git tag
-          ASSET_PREFIX=https://neuralmagic.github.io/guidellm/ui/latest
+          ASSET_PREFIX=https://blog.vllm.ai/guidellm/ui/latest
           BASE_PATH=/ui/latest
           GIT_SHA=${{ github.sha }}
           export ASSET_PREFIX=${ASSET_PREFIX}

.gitignore

@@ -6,6 +6,7 @@ src/guidellm/version.py
 benchmarks.json
 benchmarks.yaml
 benchmarks.csv
+benchmarks.html
 
 # Byte-compiled / optimized / DLL files
 __pycache__/
@@ -227,4 +228,5 @@ src/ui/next-env.d.ts
 !tsconfig.*.json
 !src/ui/lib
 !src/ui/public/manifest.json
+!src/ui/serve.json
 .eslintcache

DEVELOPING.md

@@ -267,6 +267,16 @@ Reference [https://www.npmjs.com/package/jest-runner-groups](jest-runner-groups)
  */
 ```
 
+### 🧪 UI Development Notes
+
+During development, it can be helpful to view sample data. We include a sample benchmark run wired into the Redux store under:
+
+```
+src/ui/lib/store/[runInfo/workloadDetails/benchmarks]WindowData.ts
+```
+
+In the future this will be replaced by a configurable untracked file for dev use.
+
 ### Logging
 
 Logging is useful for learning how GuideLLM works and finding problems.

README.md

@@ -157,9 +157,43 @@ The `guidellm benchmark` command is used to run benchmarks against a generative
 
 GuideLLM UI is a companion frontend for visualizing the results of a GuideLLM benchmark run.
 
-### 🛠 Running the UI
+### 🛠 Generating an HTML report with a benchmark run
 
-The UI is a WIP, check more recent PRs for the latest updates
+1. Use the Hosted Build (Recommended for Most Users)
+
+This is preconfigured. The latest stable version of the hosted UI (https://blog.vllm.ai/guidellm/ui/latest) will be used to build the local html file.
+
+Open benchmarks.html in your browser and you're done—no setup required.
+
+2. Build and Serve the UI Locally (For Development) This option is useful if:
+
+- You are actively developing the UI
+
+- You want to test changes to the UI before publishing
+
+- You want full control over how the report is displayed
+
+```bash
+npm install
+npm run build
+npm run serve
+```
+
+This will start a local server (e.g., at http://localhost:3000). Then set the Environment to LOCAL before running your benchmarks.
+
+```bash
+export GUIDELLM__ENV=local
+```
+
+Then you can execute your run.
+
+Set the output to benchmarks.html for your run:
+
+```bash
+--output-path=benchmarks.html
+```
+
+Alternatively load a saved run using the from-file command and also set the output to benchmarks.html
 
 ## Resources