Execution Workspace UI
Relevant source files
The following files were used as context for generating this wiki page:
The Execution Workspace UI serves as the primary control center within Olive Studio for building, validating, and running Microsoft Olive model optimization recipes. It provides a visual interface for developers to transition from raw model configurations to hardware-optimized binaries through a guided multi-step pipeline.
The workspace integrates real-time log streaming via Server-Sent Events (SSE), visual recipe graph editing, and comprehensive validation checks to ensure that optimization passes are compatible with the selected hardware execution providers. It acts as the final stage of the user workflow, following model source definition and hardware target selection.
Sources: src/App.tsx:54-72, src/components/features/ExecutionWorkspace.tsx:55-75, ABOUT.md
Workspace Core Components
The Execution Workspace is organized into several functional cards and overlays that manage the lifecycle of an optimization job.
Component Overview
| Component | Responsibility |
|---|---|
| Recipe Preview | Toggles between a visual Graph Flow, raw JSON code, Browser Test, and Benchmark views. |
| Active Draft | Displays execution controls (Execute Live, Queue), validation status, and live optimization logs. |
| Export Overlay | Facilitates downloading the generated Olive JSON recipe or copying it to the clipboard. |
| OWR Export Bundle | Specifically packages configurations for ONNX Runtime Web and Mobile deployments. |
| VRAM Estimate | Provides real-time memory guidance based on the current recipe and hardware probe results. |
Sources: src/components/features/ExecutionWorkspace.tsx:545-560, src/components/features/ExecutionWorkspace.tsx:825-840, src/components/features/ExecutionWorkspace.tsx:112-140
Optimization Execution Flow
Execution in the workspace is a two-phase process: recipe generation and process execution. The UI utilizes buildRecipeFromState to construct a valid Olive configuration based on user selections in previous panels.
Sequence of Execution
The following diagram illustrates the sequence from the user clicking "Execute Live" to receiving real-time logs from the backend.
The workspace utilizes a liveSourceRef to manage the EventSource connection, ensuring that logs are appended to the UI as they arrive and that the connection is closed gracefully upon completion.
Sources: src/components/features/ExecutionWorkspace.tsx:613-685, ORIGINAL_REQUEST.md:27-38
Recipe Management and Validation
The UI maintains high technical accuracy by validating recipes against the Olive schema and checking for provider conflicts before execution is permitted.
Validation States
- Critical: Issues that block execution (e.g., trying to run NVIDIA-specific quantization on a CPU provider).
- Advisories/Warnings: Non-blocking suggestions regarding optimization efficiency or potential runtime issues.
- Schema Validity: Checks the structural integrity of the generated JSON against the official Olive requirements.
Sources: src/components/features/ExecutionWorkspace.tsx:595-611, src/lib/aiWorkspaceContext.ts:133-149
Recipe Visualization
The Workspace provides multiple views to inspect the workflow:
- Graph Flow: Uses a visual representation of pass nodes and operation edges.
- JSON Code: A direct view of the raw configuration sent to the backend.
- Browser Test: An environment for validating the model's inference behavior within the app.
Sources: src/components/features/ExecutionWorkspace.tsx:75-85, src/components/features/ExecutionWorkspace.tsx:780-820
OWR (ONNX Runtime Web/Mobile) Export
A specialized feature of the Execution Workspace is the ability to generate deployment bundles for edge environments. This system dynamically constructs initialization code (JavaScript for Web, Kotlin for Mobile) based on the current model architecture and quantization settings.
Export Configuration Parameters
| Parameter | Values | Impact |
|---|---|---|
| Platform | Web, Mobile | Determines code boilerplate (JS vs Kotlin) and EP selection. |
| Threads | 1, 2, 4, 8 | Configures intra_op_num_threads in the ORT session. |
| VRAM Mode | Performance, Memory | Toggles between WebGPU/WASM and execution provider priorities. |
Sources: src/components/features/ExecutionWorkspace.tsx:112-250, src/components/features/ExecutionWorkspace.tsx:440-470
Implementation Details
The following code snippet demonstrates the implementation of the SSE log handler within the workspace:
// src/components/features/ExecutionWorkspace.tsx:645-660
const evtSource = new EventSource(`/api/olive/stream/${jobId}`);
liveSourceRef.current = evtSource;
evtSource.onmessage = (e) => {
try {
const payload = JSON.parse(e.data);
if (payload.line) {
setExecutionLogs((prev) => [...prev, payload.line]);
}
} catch { /* ignore */ }
};
evtSource.addEventListener("done", (e: MessageEvent) => {
const exitCode = JSON.parse(e.data)?.exitCode ?? 0;
setExecutionStatus(exitCode === 0 ? "completed" : "failed");
setIsRunning(false);
evtSource.close();
});
Sources: src/components/features/ExecutionWorkspace.tsx:643-665
The Execution Workspace UI acts as a bridge between the user's high-level optimization goals and the low-level CLI execution of Microsoft Olive, providing the necessary feedback loops for successful model deployment.