Add client-side image encoding in visualizer

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## v0.8.0
+
+- Add support for WASM codec-compare-gen in-browser encoding in visualizer.html.
+
 ## v0.7.3
 
 - Fix RD-curve and two-batch view links.

README.md

@@ -40,6 +40,7 @@ From the project root directory, install the project's dependencies:
 
 ```sh
 npm install
+npm run prebuild_wasm
 ```
 
 ### Development

package.json

@@ -1,11 +1,12 @@
 {
   "name": "codec_compare",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "Codec performance comparison tool",
   "publisher": "Google LLC",
   "author": "Yannis Guyon",
   "license": "Apache-2.0",
   "scripts": {
+    "prebuild_wasm": "./prebuild_wasm.sh",
     "dev": "vite --open",
     "build": "vite build",
     "postbuild": "./postbuild.sh",
@@ -21,11 +22,13 @@
     "jasmine-core": "^5.13.0",
     "typescript": "^6.0.3",
     "vite": "^8.0.10",
-    "web-test-runner-jasmine": "^0.1.5"
+    "web-test-runner-jasmine": "^0.1.5",
+    "errorstacks": "2.4.1"
   },
   "dependencies": {
     "@material/web": "^2.4.1",
     "lit": "^3.3.2",
-    "plotly.js-dist": "^3.5.1"
+    "plotly.js-dist": "^3.5.1",
+    "safevalues": "^1.2.0"
   }
 }

prebuild_wasm.sh

@@ -0,0 +1,36 @@
+#!/bin/bash
+
+# Copyright 2026 Google LLC
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     https://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+set -eux
+
+if [[ "$#" -ge 1 ]]; then
+  # Existing source directory is passed as an argument.
+  SOURCE_DIR="${1}"
+else
+  # Clone the source directory from head to a temporary directory.
+  SOURCE_DIR="$(mktemp -d)"
+  git clone https://github.com/webmproject/codec-compare-gen.git "${SOURCE_DIR}"
+fi
+
+BUILD_DIR="${SOURCE_DIR}/build_WASM"
+
+/bin/bash "${SOURCE_DIR}/wasm/build.sh" \
+  "${SOURCE_DIR}" \
+  "${BUILD_DIR}" \
+  OFF
+
+cp "${BUILD_DIR}/codec_wasm_bin.js" assets/
+cp "${BUILD_DIR}/codec_wasm_bin.wasm" assets/

src/codec_compare.ts

@@ -259,7 +259,7 @@ export class CodecCompare extends LitElement {
           </p>
 
           <p id="credits">
-            Codec Compare version 0.7.3<br>
+            Codec Compare version 0.8.0<br>
             <a href="https://github.com/webmproject/codec-compare">
               Sources on GitHub
             </a>