{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: component_props"]}, {"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": ["# Downloading files from the demo repo\n", "import os\n", "!wget -q https://github.com/gradio-app/gradio/raw/main/demo/component_props/cheetah.jpg"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "from gradio.media import get_image\n", "\n", "with gr.Blocks() as demo:\n", "    a = gr.Number(value=5, minimum=0, maximum=10, label=\"Input A\", info=\"Enter a number between 0 and 10\")\n", "    output_a = gr.JSON(label=\"Output\", elem_id=\"output\")\n", "    with gr.Row():\n", "        show_value_btn = gr.Button(\"Show Value\")\n", "        double_btn = gr.Button(\"Double Value and Maximum\")\n", "        reset_btn = gr.Button(\"Reset\")\n", "\n", "    def process_with_props(x: gr.Number):\n", "        return {\n", "            \"value\": x.value,\n", "            \"maximum\": x.maximum,\n", "            \"minimum\": x.minimum,\n", "        }\n", "    show_value_btn.click(process_with_props, a, output_a)\n", "\n", "    def double_value_and_max(x: gr.Number):\n", "        x.maximum *= 2  # type: ignore\n", "        x.value = (x.value or 0) * 2\n", "        x.info = f\"Enter a number between 0 and {x.maximum}\"\n", "        return x\n", "\n", "    double_btn.click(double_value_and_max, a, a).then(\n", "        process_with_props, a, output_a\n", "    )\n", "\n", "    def reset(x: gr.Number):\n", "        x.maximum = 10\n", "        x.value = 5\n", "        x.info = \"Enter a number between 0 and 10\"\n", "        return x\n", "\n", "    reset_btn.click(reset, a, a).then(\n", "        process_with_props, a, output_a\n", "    )\n", "\n", "    # Image component demo\n", "    gr.Markdown(\"## Image Component Props\")\n", "    b = gr.Image(value=get_image(\"cheetah.jpg\"), label=\"Input Image\", width=300, height=300, type=\"filepath\")\n", "    output_b = gr.JSON(label=\"Image Props Output\", elem_id=\"image-output\")\n", "    with gr.Row():\n", "        show_image_props_btn = gr.Button(\"Show Image Props\")\n", "        change_image_size_btn = gr.Button(\"Change Image Size\")\n", "        reset_image_btn = gr.Button(\"Reset Image\")\n", "\n", "    def show_image_props(x: gr.Image):\n", "        return {\n", "            \"value\": x.value if x.value is None else str(x.value),\n", "            \"width\": x.width,\n", "            \"height\": x.height,\n", "            \"type\": x.type,\n", "        }\n", "    show_image_props_btn.click(show_image_props, b, output_b)\n", "\n", "    def change_image_size(x: gr.Image):\n", "        x.width = 400\n", "        x.height = 400\n", "        return x\n", "\n", "    change_image_size_btn.click(change_image_size, b, b).then(\n", "        show_image_props, b, output_b\n", "    )\n", "\n", "    def reset_image(x: gr.Image):\n", "        x.width = 300\n", "        x.height = 300\n", "        x.value = get_image(\"cheetah.jpg\")\n", "        return x\n", "\n", "    reset_image_btn.click(reset_image, b, b).then(\n", "        show_image_props, b, output_b\n", "    )\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}