https://github.com/ibelem/webnn-code-generator
Generate Web Neural Network (WebNN) API vanilla JavaScript code from ONNX, TensorFlow Lite, or other models
https://github.com/ibelem/webnn-code-generator
Last synced: 11 months ago
JSON representation
Generate Web Neural Network (WebNN) API vanilla JavaScript code from ONNX, TensorFlow Lite, or other models
- Host: GitHub
- URL: https://github.com/ibelem/webnn-code-generator
- Owner: ibelem
- Created: 2025-05-12T05:07:47.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-12T07:01:53.000Z (12 months ago)
- Last Synced: 2025-06-12T08:19:50.018Z (12 months ago)
- Language: JavaScript
- Homepage: https://ibelem.github.io/webnn-code-generator/
- Size: 30.1 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-webnn - WebNN Code Generator - by Belem Zhang (Tools / WebNN Model-to-Code Conversion)
README
# WebNN Code Generator
Visit [https://ibelem.github.io/webnn-code-generator/](https://ibelem.github.io/webnn-code-generator/)
## Overview
The [WebNN Code Generator](https://github.com/ibelem/webnn-code-generator/) offers a user-friendly web interface for generating WebNN-compatible JavaScript code. The tool supports various model formats (ONNX, TensorFlow Lite, or others) and generates optimized code for browser-based machine learning inference.
### 🔒 Client-Side Processing Only
All model conversion and code generation processes execute entirely within your browser, ensuring your intellectual property remains private and secure as no model data is transmitted to or stored on cloud servers.
## Workflow
The conversion process involves two complementary tools:
1. [WebNN Netron](https://ibelem.github.io/netron/) - Extracts model structure and weights
2. [WebNN Code Generator](https://ibelem.github.io/webnn-code-generator/) - Generates WebNN JavaScript code
## Step-by-Step Guide
### Step 1: Extract Model Components
1. Navigate to [WebNN Netron](https://ibelem.github.io/netron/)
2. Click the **"Open Model..."** button
3. Select your model file (`.onnx`, `.tflite`, or other supported formats)
4. Once loaded, download the required files:
- Click **"Graph and Weights"** button → Download `graph.json`, `weights_nchw.bin` and `weights_nhwc.bin`
### Step 2: Generate WebNN Code
1. Open [WebNN Code Generator](https://ibelem.github.io/webnn-code-generator/)
2. Upload the extracted files:
- Choose **"Graph"** → Select `graph.json`
- Choose **"Weights"** → Select `weights_nchw.bin` and `weights_nhwc.bin`
### Step 3: Configure Dynamic Dimensions (if needed)
If your model contains symbolic dimensions, you'll see a **"Set free dimension overrides"** section:
1. Enter specific values for each dynamic dimension
2. This resolves variables like batch size or input dimensions to concrete values
3. See [symbolic dimensions documentation](https://webnn.io/en/learn/tutorials/onnx-runtime/free-dimension-overrides) for details
### Step 4: Generate and Download
1. Click **"Generate WebNN Code"**
2. Click **"Download Code Files"** to receive:
- Generated JavaScript file with WebNN implementation
- `index.html` test file for validation
3. Put the `weights_nchw.bin` and `weights_nhwc.bin` downloaded from [WebNN Netron](https://ibelem.github.io/netron/) together with `.js` and `index.html` in the same folder
## Testing Your Generated Code
### Security Requirements
WebNN requires a [secure context](https://developer.mozilla.org/en-US/docs/Web/Security/Secure_Contexts) to function. Valid environments include:
- `https://` URLs
- `http://localhost` or `http://127.0.0.1`
- Local development servers
### Local Testing
Start a local HTTP server to test your generated code:
```bash
# Install http-server if needed
npm install -g http-server
# Start server in your project directory
http-server
# Navigate to http://localhost:8080 in your browser
```
Open the generated `index.html` file in your browser to validate the conversion.