or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

code-completion.mdevent-streaming.mdfile-system.mdhttp-client.mdindex.mdnetwork-utilities.mdpackage-management.mdsvelte-integration.mdworker-management.md
tile.json

tessl/npm-gradio--wasm

WebAssembly support for Gradio applications enabling Python code execution in the browser through Pyodide integration

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@gradio/wasm@0.18.x

To install, run

npx @tessl/cli install tessl/npm-gradio--wasm@0.18.0

index.mddocs/

@gradio/wasm

@gradio/wasm provides WebAssembly support for Gradio applications by enabling Python code execution in the browser through Pyodide integration. It offers a WorkerProxy class that manages web workers for running Python code, WebAssembly-based server-sent events for real-time communication, and cross-origin worker support for enhanced security.

Package Information

  • Package Name: @gradio/wasm
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @gradio/wasm

Core Imports

import { WorkerProxy, WasmWorkerEventSource } from "@gradio/wasm";

Svelte integration:

import { 
  setWorkerProxyContext, 
  getWorkerProxyContext, 
  should_proxy_wasm_src,
  resolve_wasm_src,
  DownloadLink 
} from "@gradio/wasm/svelte";

Network utilities:

import { FAKE_LITE_HOST, is_self_host } from "@gradio/wasm/network";

For CommonJS:

const { WorkerProxy, WasmWorkerEventSource } = require("@gradio/wasm");

Basic Usage

import { WorkerProxy } from "@gradio/wasm";

// Create a worker proxy for Python execution
const worker = new WorkerProxy({
  gradioWheelUrl: "https://example.com/gradio.whl",
  gradioClientWheelUrl: "https://example.com/gradio_client.whl",
  files: {},
  requirements: ["numpy", "pandas"],
  sharedWorkerMode: false
});

// Wait for initialization
worker.addEventListener("initialization-completed", () => {
  console.log("Worker ready!");
});

// Run Python code
await worker.runPythonCode(`
import numpy as np
data = np.array([1, 2, 3, 4, 5])
print(f"Mean: {np.mean(data)}")
`);

// Handle output
worker.addEventListener("stdout", (event) => {
  console.log("Python output:", event.data);
});

// Clean up
worker.terminate();

Architecture

@gradio/wasm is built around several key components:

  • Worker Management: WorkerProxy class manages web workers (both dedicated and shared) for isolated Python execution
  • Communication Layer: Message-based communication system with typed interfaces for worker interactions
  • HTTP Integration: ASGI-compliant HTTP request/response handling for web application integration
  • Event Streaming: WebAssembly-based server-sent events implementation for real-time communication
  • Svelte Integration: Context management and components for seamless Svelte framework integration
  • File System: Virtual file system operations within the worker environment

Capabilities

Worker Management

Core functionality for managing WebAssembly workers that execute Python code through Pyodide. Handles initialization, code execution, and cleanup.

class WorkerProxy extends EventTarget {
  constructor(options: WorkerProxyOptions);
  runPythonCode(code: string): Promise<void>;
  runPythonFile(path: string): Promise<void>;
  postMessageAsync<T>(msg: InMessage): Promise<T>;
  terminate(): void;
}

interface WorkerProxyOptions {
  gradioWheelUrl: string;
  gradioClientWheelUrl: string;
  files: Record<string, EmscriptenFile | EmscriptenFileUrl>;
  requirements: string[];
  sharedWorkerMode: boolean;
}

Worker Management

HTTP Client

ASGI-compliant HTTP request handling through the WebAssembly worker. Enables web applications to make HTTP requests processed by Python code.

interface HttpRequest {
  method: "GET" | "POST" | "PUT" | "DELETE";
  path: string;
  query_string: string;
  headers: Record<string, string>;
  body?: Uint8Array | ReadableStream<Uint8Array> | null;
}

interface HttpResponse {
  status: number;
  headers: Record<string, string>;
  body: Uint8Array;
}

HTTP Client

Event Streaming

WebAssembly-based server-sent events implementation for real-time communication between the browser and Python code.

class WasmWorkerEventSource {
  constructor(workerProxy: WorkerProxy, url: URL);
  readonly readyState: number;
  readonly url: URL;
  onopen: ((ev: Event) => any) | undefined;
  onmessage: ((ev: MessageEvent) => any) | undefined;
  onerror: ((ev: Event) => any) | undefined;
  close(): void;
}

Event Streaming

File System Operations

Virtual file system operations within the worker environment for managing files and data.

writeFile(path: string, data: string | ArrayBufferView, opts?: Record<string, unknown>): Promise<void>;
renameFile(oldPath: string, newPath: string): Promise<void>;
unlink(path: string): Promise<void>;

File System Operations

Package Management

Python package installation and management within the WebAssembly environment.

install(requirements: string[]): Promise<void>;

Package Management

Code Completion

Python code completion functionality using Jedi for development environments.

interface CodeCompletionRequest {
  code: string;
  line: number;
  column: number;
}

interface CodeCompletion {
  label: string;
  type: string;
  docstring: string;
  completion_prefix_length: number;
}

type CodeCompletionResponse = CodeCompletion[];

Code Completion

Svelte Integration

Svelte framework integration with context management and specialized components for WebAssembly worker integration.

function setWorkerProxyContext(workerProxy: WorkerProxy): void;
function getWorkerProxyContext(): WorkerProxy | undefined;
function should_proxy_wasm_src(src: string | undefined | null): boolean;
function resolve_wasm_src(src: string | undefined | null): Promise<string | undefined | null>;

Svelte Integration

Network Utilities

Network-related utilities for host validation and URL processing in Gradio Lite applications.

const FAKE_LITE_HOST = "lite.local";
function is_self_host(url: URL): boolean;

Network Utilities

Types

Core type definitions used across the package:

interface EmscriptenFile {
  data: string | ArrayBufferView;
  opts?: Record<string, unknown>;
}

interface EmscriptenFileUrl {
  url: string;
  opts?: Record<string, unknown>;
}

type ASGIScope = Record<string, unknown>;