handle selected_index prop change for gallery

This commit is contained in:
pngwn 2023-11-03 12:52:32 +00:00
parent ac4f2bcded
commit 0f3d3e136a
3 changed files with 14 additions and 2 deletions

View File

@ -1 +1 @@
{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gallery_selections"]}, {"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", "with gr.Blocks() as demo:\n", " imgs = gr.State()\n", " gallery = gr.Gallery()\n", "\n", " def generate_images():\n", " images = []\n", " for _ in range(9):\n", " image = np.ones((100, 100, 3), dtype=np.uint8) * np.random.randint(\n", " 0, 255, 3\n", " ) # image is a solid single color\n", " images.append(image)\n", " return images, images\n", "\n", " demo.load(generate_images, None, [gallery, imgs])\n", "\n", " with gr.Row():\n", " selected = gr.Number(show_label=False)\n", " darken_btn = gr.Button(\"Darken selected\")\n", "\n", " def get_select_index(evt: gr.SelectData):\n", " return evt.index\n", "\n", " gallery.select(get_select_index, None, selected)\n", "\n", " def darken_img(imgs, index):\n", " index = int(index)\n", " imgs[index] = np.round(imgs[index] * 0.8).astype(np.uint8)\n", " return imgs, imgs\n", "\n", " darken_btn.click(darken_img, [imgs, selected], [imgs, gallery])\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: gallery_selections"]}, {"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", "with gr.Blocks() as demo:\n", " imgs = gr.State()\n", " gallery = gr.Gallery(allow_preview=False)\n", "\n", " def deselect_images():\n", " return gr.Gallery(selected_index=None)\n", "\n", " def generate_images():\n", " images = []\n", " for _ in range(9):\n", " image = np.ones((100, 100, 3), dtype=np.uint8) * np.random.randint(\n", " 0, 255, 3\n", " ) # image is a solid single color\n", " images.append(image)\n", " return images, images\n", "\n", " demo.load(generate_images, None, [gallery, imgs])\n", "\n", " with gr.Row():\n", " selected = gr.Number(show_label=False)\n", " darken_btn = gr.Button(\"Darken selected\")\n", " deselect_button = gr.Button(\"Deselect\")\n", "\n", " deselect_button.click(deselect_images, None, gallery)\n", "\n", " def get_select_index(evt: gr.SelectData):\n", " return evt.index\n", "\n", " gallery.select(get_select_index, None, selected)\n", "\n", " def darken_img(imgs, index):\n", " index = int(index)\n", " imgs[index] = np.round(imgs[index] * 0.8).astype(np.uint8)\n", " return imgs, imgs\n", "\n", " darken_btn.click(darken_img, [imgs, selected], [imgs, gallery])\n", "\n", "if __name__ == \"__main__\":\n", " demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

View File

@ -3,7 +3,10 @@ import numpy as np
with gr.Blocks() as demo:
imgs = gr.State()
gallery = gr.Gallery()
gallery = gr.Gallery(allow_preview=False)
def deselect_images():
return gr.Gallery(selected_index=None)
def generate_images():
images = []
@ -19,6 +22,9 @@ with gr.Blocks() as demo:
with gr.Row():
selected = gr.Number(show_label=False)
darken_btn = gr.Button("Darken selected")
deselect_button = gr.Button("Deselect")
deselect_button.click(deselect_images, None, gallery)
def get_select_index(evt: gr.SelectData):
return evt.index

View File

@ -9,6 +9,7 @@
import type { LoadingStatus } from "@gradio/statustracker";
import { StatusTracker } from "@gradio/statustracker";
import type { FileData } from "@gradio/client";
import { createEventDispatcher } from "svelte";
export let loading_status: LoadingStatus;
export let show_label: boolean;
@ -40,7 +41,12 @@
select: SelectData;
share: ShareData;
error: string;
prop_change: Record<string, any>;
}>;
const dispatch = createEventDispatcher();
$: selected_index, dispatch("prop_change", { selected_index });
</script>
<Block