Skip to content

Commit

Permalink
JS client take 2 (#3388)
Browse files Browse the repository at this point in the history 
* start

* change api

* integrate into gradio

* log

* try this

* format

* changes

* format

* fix css

* fix file
  • Loading branch information
@pngwn
pngwn authored Mar 7, 2023
1 parent 47d6231 commit fddf376
Show file tree
Hide file tree
Showing 33 changed files with 1,057 additions and 1,146 deletions.
Binary file modified demo/all_demos/tmp.zip
View file
Binary file not shown.
2 changes: 1 addition & 1 deletion demo/stream_frames/run.ipynb
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: stream_frames"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "def flip(im):\n", " return np.flipud(im)\n", "\n", "demo = gr.Interface(\n", " flip, \n", " gr.Image(source=\"webcam\", streaming=True), \n", " \"image\",\n", " live=True\n", ")\n", "if __name__ == \"__main__\":\n", " demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: stream_frames"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "def flip(im):\n", " return np.flipud(im)\n", "\n", "demo = gr.Interface(\n", " flip, \n", " gr.Image(source=\"webcam\", streaming=True), \n", " \"image\",\n", " live=True\n", ")\n", "if __name__ == \"__main__\":\n", " demo.launch()\n", " "]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
3 changes: 2 additions & 1 deletion demo/stream_frames/run.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,5 @@ def flip(im):
live=True
)
if __name__ == "__main__":
demo.launch()
demo.launch()

1 change: 1 addition & 0 deletions ui/packages/app/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@
"@gradio/button": "workspace:^0.0.1",
"@gradio/chart": "workspace:^0.0.1",
"@gradio/chatbot": "workspace:^0.0.1",
"@gradio/client": "workspace:^0.0.1",
"@gradio/file": "workspace:^0.0.1",
"@gradio/form": "workspace:^0.0.1",
"@gradio/gallery": "workspace:^0.0.1",
Expand Down
170 changes: 92 additions & 78 deletions ui/packages/app/src/Blocks.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script lang="ts">
import { tick } from "svelte";
import { _ } from "svelte-i18n";
import type { client } from "@gradio/client";
import { component_map } from "./components/directory";
import {
Expand All @@ -15,7 +16,6 @@
LayoutNode,
Documentation
} from "./components/types";
import type { fn as api_fn } from "./api";
import { setupi18n } from "./i18n";
import Render from "./Render.svelte";
import { ApiDocs } from "./api_docs/";
Expand All @@ -26,12 +26,10 @@
setupi18n();
export let root: string;
export let fn: ReturnType<typeof api_fn>;
export let components: Array<ComponentMeta>;
export let layout: LayoutNode;
export let dependencies: Array<Dependency>;
export let enable_queue: boolean;
export let title: string = "Gradio";
export let analytics_enabled: boolean = false;
export let target: HTMLElement;
Expand All @@ -41,6 +39,7 @@
export let control_page_title = false;
export let app_mode: boolean;
export let theme: string;
export let app: Awaited<ReturnType<typeof client>>;
let loading_status = create_loading_status_store();
Expand Down Expand Up @@ -210,14 +209,43 @@
});
});
function handle_update(data: any, fn_index: number) {
const outputs = dependencies[fn_index].outputs;
data.forEach((value: any, i: number) => {
if (
typeof value === "object" &&
value !== null &&
value.__type__ === "update"
) {
for (const [update_key, update_value] of Object.entries(value)) {
if (update_key === "__type__") {
continue;
} else {
instance_map[outputs[i]].props[update_key] = update_value;
}
}
rootNode = rootNode;
} else {
instance_map[outputs[i]].props.value = value;
}
});
}
app.on("data", ({ data, fn_index }) => {
handle_update(data, fn_index);
});
app.on("status", ({ fn_index, ...status }) => {
loading_status.update({ ...status, fn_index });
});
function set_prop<T extends ComponentMeta>(obj: T, prop: string, val: any) {
if (!obj?.props) {
obj.props = {};
}
obj.props[prop] = val;
rootNode = rootNode;
}
let handled_dependencies: Array<number[]> = [];
async function handle_mount() {
Expand Down Expand Up @@ -259,45 +287,36 @@
outputs.every((v) => instance_map?.[v].instance) &&
inputs.every((v) => instance_map?.[v].instance)
) {
const req = fn({
action: "predict",
backend_fn,
frontend_fn,
payload: {
fn_index: i,
data: inputs.map((id) => instance_map[id].props.value)
},
queue: queue === null ? enable_queue : queue,
queue_callback: handle_update,
loading_status: loading_status,
cancels
});
cancels &&
cancels.forEach((fn_index) => {
app.cancel("/predict", fn_index);
});
function handle_update(output: any) {
output.data.forEach((value: any, i: number) => {
if (
typeof value === "object" &&
value !== null &&
value.__type__ === "update"
) {
for (const [update_key, update_value] of Object.entries(
value
)) {
if (update_key === "__type__") {
continue;
} else {
instance_map[outputs[i]].props[update_key] = update_value;
}
}
rootNode = rootNode;
let payload = {
fn_index: i,
data: inputs.map((id) => instance_map[id].props.value)
};
if (frontend_fn) {
frontend_fn(
payload.data.concat(
outputs.map((id) => instance_map[id].props.value)
)
).then((v: []) => {
if (backend_fn) {
payload.data = v;
make_prediction();
} else {
instance_map[outputs[i]].props.value = value;
handle_update(v, i);
}
});
} else {
if (backend_fn) {
make_prediction();
}
}
if (!(queue === null ? enable_queue : queue)) {
req.then(handle_update);
function make_prediction() {
app.predict("/predict", payload);
}
handled_dependencies[i] = [-1];
Expand All @@ -308,53 +327,48 @@
.forEach(([id, { instance }]: [number, ComponentMeta]) => {
if (handled_dependencies[i]?.includes(id) || !instance) return;
instance?.$on(trigger, () => {
if (loading_status.get_status_for_fn(i) === "pending") {
const current_status = loading_status.get_status_for_fn(i);
if (
current_status === "pending" ||
current_status === "generating"
) {
return;
}
// page events
const req = fn({
action: "predict",
backend_fn,
frontend_fn,
payload: {
fn_index: i,
data: inputs.map((id) => instance_map[id].props.value)
},
output_data: outputs.map((id) => instance_map[id].props.value),
queue: queue === null ? enable_queue : queue,
queue_callback: handle_update,
loading_status: loading_status,
cancels
});
if (!(queue === null ? enable_queue : queue)) {
req.then(handle_update);
if (cancels) {
cancels.forEach((fn_index) => {
app.cancel("/predict", fn_index);
});
}
});
function handle_update(output: any) {
output.data.forEach((value: any, i: number) => {
if (
typeof value === "object" &&
value !== null &&
value.__type__ === "update"
) {
for (const [update_key, update_value] of Object.entries(
value
)) {
if (update_key === "__type__") {
continue;
} else {
instance_map[outputs[i]].props[update_key] = update_value;
}
let payload = {
fn_index: i,
data: inputs.map((id) => instance_map[id].props.value)
};
if (frontend_fn) {
frontend_fn(
payload.data.concat(
outputs.map((id) => instance_map[id].props.value)
)
).then((v: []) => {
if (backend_fn) {
payload.data = v;
make_prediction();
} else {
handle_update(v, i);
}
rootNode = rootNode;
} else {
instance_map[outputs[i]].props.value = value;
});
} else {
if (backend_fn) {
make_prediction();
}
});
}
}
function make_prediction() {
app.predict("/predict", payload);
}
});
if (!handled_dependencies[i]) handled_dependencies[i] = [];
handled_dependencies[i].push(id);
Expand Down
Loading

0 comments on commit fddf376

Please sign in to comment.