diff --git a/client/graphpaper-inline/src/App.svelte b/client/graphpaper-inline/src/App.svelte index 7aee50b09..8f1481e92 100644 --- a/client/graphpaper-inline/src/App.svelte +++ b/client/graphpaper-inline/src/App.svelte @@ -4,248 +4,218 @@ This has bidirectional communication between the guidance server (usually Jupyte For upcoming features, we won't be able to send all details over the wire, and will need to operate on client request. --> - graphpaper - + graphpaper + - - + +
- + + +
+ +
\ No newline at end of file diff --git a/client/graphpaper-inline/src/StitchHandler.svelte b/client/graphpaper-inline/src/StitchHandler.svelte index fdc7058c4..dee57c3e1 100644 --- a/client/graphpaper-inline/src/StitchHandler.svelte +++ b/client/graphpaper-inline/src/StitchHandler.svelte @@ -1,29 +1,41 @@ diff --git a/client/graphpaper-inline/src/metrics.ts b/client/graphpaper-inline/src/metrics.ts new file mode 100644 index 000000000..7a8104dbf --- /dev/null +++ b/client/graphpaper-inline/src/metrics.ts @@ -0,0 +1,69 @@ +// Metrics and their definitions. + +import type { MetricDef } from './interfaces'; + +export const metricDefs: Record = { + 'status': { + name: 'status', + units: '', + description: 'Determines whether engine is running, completed or in error.', + isScalar: true, + precision: 0 + }, + 'cpu': { + name: 'cpu', + units: '%', + description: 'Average utilization across CPU cores.', + isScalar: false, + precision: 1 + }, + 'gpu': { + name: 'gpu', + units: '%', + description: 'Average utilization across GPUs.', + isScalar: false, + precision: 1 + }, + 'ram': { + name: 'ram', + units: 'GB', + description: 'Utilization of RAM.', + isScalar: true, + precision: 1 + }, + 'vram': { + name: 'vram', + units: 'GB', + description: 'Utilization of video RAM.', + isScalar: true, + precision: 1 + }, + 'wall time': { + name: 'wall time', + units: 's', + description: 'Time taken from initial display to engine completion.', + isScalar: true, + precision: 1 + }, + 'avg latency': { + name: 'avg latency', + units: 'ms', + description: 'Average roundtrip latency per token', + isScalar: true, + precision: 0 + }, + 'consumed': { + name: 'consumed', + units: 'tkn', + description: 'Total tokens consumed by language model.', + isScalar: true, + precision: 0 + }, + 'token reduction': { + name: 'token reduction', + units: '%', + description: 'Total tokens consumed by language model divided by total tokens.', + isScalar: true, + precision: 0 + } +}; diff --git a/client/graphpaper-inline/src/stitch.ts b/client/graphpaper-inline/src/stitch.ts index 3abcffe93..aec6d9c46 100644 --- a/client/graphpaper-inline/src/stitch.ts +++ b/client/graphpaper-inline/src/stitch.ts @@ -96,7 +96,7 @@ export interface MetricMessage extends GuidanceMessage { } export interface StitchMessage { - type: "resize" | "clientmsg" | "kernelmsg", + type: "resize" | "clientmsg" | "kernelmsg" | "state" | "init_state", content: any } @@ -157,4 +157,5 @@ export function isTokensMessage(o: GuidanceMessage | undefined | null): o is Tok export const kernelmsg = writable(undefined); export const clientmsg = writable(undefined); +export const state = writable(undefined); diff --git a/guidance/resources/graphpaper-inline.html b/guidance/resources/graphpaper-inline.html index 4d108f32c..5741e4055 100644 --- a/guidance/resources/graphpaper-inline.html +++ b/guidance/resources/graphpaper-inline.html @@ -9,8 +9,8 @@ diff --git a/packages/python/stitch/examples/introduction.ipynb b/packages/python/stitch/examples/introduction.ipynb index b6e992f47..caadb476b 100644 --- a/packages/python/stitch/examples/introduction.ipynb +++ b/packages/python/stitch/examples/introduction.ipynb @@ -9,7 +9,7 @@ }, { "cell_type": "code", - "execution_count": null, + "execution_count": 1, "metadata": {}, "outputs": [], "source": [ @@ -18,18 +18,39 @@ }, { "cell_type": "code", - "execution_count": null, + "execution_count": 2, "metadata": {}, - "outputs": [], + "outputs": [ + { + "data": { + "application/vnd.jupyter.widget-view+json": { + "model_id": "b05706653924451ab8c6464f439f4a4e", + "version_major": 2, + "version_minor": 0 + }, + "text/plain": [ + "StitchWidget(initial_height='auto', initial_width='100%', srcdoc='\\n\\n\n\n
\nMESSAGE: \n
\n\n\n", + "state": "Wow, a change!" + } + }, + "c8d8410bc496453882680ff0fb8f6d0d": { + "model_module": "@jupyter-widgets/base", + "model_module_version": "2.0.0", + "model_name": "LayoutModel", + "state": {} + } + }, + "version_major": 2, + "version_minor": 0 + } } }, "nbformat": 4, diff --git a/packages/python/stitch/package.json b/packages/python/stitch/package.json index 1302e5c7d..6593e60d6 100644 --- a/packages/python/stitch/package.json +++ b/packages/python/stitch/package.json @@ -1,6 +1,6 @@ { "name": "@guidance-ai/stitch", - "version": "0.1.2", + "version": "0.1.4", "description": "Bidirectional comms for Jupyter and JavaScript.", "keywords": [ "jupyter", diff --git a/packages/python/stitch/pyproject.toml b/packages/python/stitch/pyproject.toml index f80c30146..b390b4747 100644 --- a/packages/python/stitch/pyproject.toml +++ b/packages/python/stitch/pyproject.toml @@ -37,7 +37,7 @@ classifiers = [ dependencies = [ "ipywidgets>=8.0.0", ] -version = "0.1.2" +version = "0.1.4" [project.optional-dependencies] docs = [ diff --git a/packages/python/stitch/src/widget.ts b/packages/python/stitch/src/widget.ts index 79922e720..feab972bc 100644 --- a/packages/python/stitch/src/widget.ts +++ b/packages/python/stitch/src/widget.ts @@ -28,6 +28,7 @@ export class StitchModel extends DOMWidgetModel { initial_height: '1px', initial_width: '1px', initial_border: '0', + state: '', }; } @@ -48,6 +49,8 @@ export class StitchView extends DOMWidgetView { private _iframe: HTMLIFrameElement; render() { + // console.log('stitch:render'); + // Create sandboxed frame const iframe = document.createElement('iframe'); iframe.sandbox.add('allow-scripts'); @@ -58,16 +61,20 @@ export class StitchView extends DOMWidgetView { iframe.style.display = 'block'; this._iframe = iframe; - // Send first kernelmsg on load. + // Initialization steps when model is ready. const refreshTimeMs = 100; - const sendKernelMsgOnReady = () => { + const initOnReady = () => { if (this.model.isNew()) { - window.setTimeout(sendKernelMsgOnReady, refreshTimeMs); + window.setTimeout(initOnReady, refreshTimeMs); } else { + // Send init state if needed. + this.emit_init_state(); + // Send first kernelmsg on load. this.kernelmsg_changed(); + // console.log('stitch:is_new'); } }; - window.setTimeout(sendKernelMsgOnReady, refreshTimeMs); + window.setTimeout(initOnReady, refreshTimeMs); // Add callback for forwarding messages from client to kernel const model = this.model; @@ -79,6 +86,9 @@ export class StitchView extends DOMWidgetView { } else if (win === event.source && event.data.type === 'resize') { iframe.style.height = event.data.content.height; iframe.style.width = event.data.content.width; + } else if (win === event.source && event.data.type === 'state') { + model.set('state', event.data.content); + model.save_changes(); } }; window.addEventListener('message', recvFromClient); @@ -93,6 +103,21 @@ export class StitchView extends DOMWidgetView { this.model.on('change:srcdoc', this.srcdoc_changed, this); } + emit_init_state() { + const state = this.model.get('state'); + if (state === '') { + // console.log('stitch:empty init state'); + return; + } + const winmsg = { + type: 'init_state', + content: state, + }; + + // console.log('stitch:state'); + this._iframe.contentWindow?.postMessage(winmsg, '*'); + } + kernelmsg_changed() { // Forward message from kernel to client const kernelmsg = this.model.get('kernelmsg'); diff --git a/packages/python/stitch/stitch/_frontend.py b/packages/python/stitch/stitch/_frontend.py index 3372665b9..52c994ed3 100644 --- a/packages/python/stitch/stitch/_frontend.py +++ b/packages/python/stitch/stitch/_frontend.py @@ -9,4 +9,4 @@ """ module_name = "@guidance-ai/stitch" -module_version = "^0.1.1" +module_version = "^0.1.4" diff --git a/packages/python/stitch/stitch/_version.py b/packages/python/stitch/stitch/_version.py index a1d2aa186..a4cb6c21e 100644 --- a/packages/python/stitch/stitch/_version.py +++ b/packages/python/stitch/stitch/_version.py @@ -4,5 +4,5 @@ # Copyright (c) Guidance Contributors. # Distributed under the terms of the Modified BSD License. -version_info = (0, 1, 2) +version_info = (0, 1, 4) __version__ = ".".join(map(str, version_info)) diff --git a/packages/python/stitch/stitch/stitch.py b/packages/python/stitch/stitch/stitch.py index 66ebc29ab..b69499191 100644 --- a/packages/python/stitch/stitch/stitch.py +++ b/packages/python/stitch/stitch/stitch.py @@ -29,3 +29,6 @@ class StitchWidget(DOMWidget): initial_height = Unicode("1px").tag(sync=True) initial_width = Unicode("1px").tag(sync=True) initial_border = Unicode("0").tag(sync=True) + + # NOTE(nopdive): Should we sync or not? There are overheads when we deal with bandwidth on real time applications. + state = Unicode("").tag(sync=True) \ No newline at end of file