{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: html_custom_event"]}, {"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", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"# Custom Event Demo\\nPress any key to see it displayed below.\")\n", "\n", "    keyboard = gr.HTML(\n", "        js_on_load=\"\"\"\n", "        document.addEventListener('keydown', (e) => {\n", "            trigger('keypress', {key: e.key});\n", "        });\n", "        \"\"\",\n", "    )\n", "\n", "    textbox = gr.Textbox(label=\"Key pressed\")\n", "\n", "    def get_key(evt_data: gr.EventData):\n", "        return evt_data.key\n", "\n", "    keyboard.keypress(get_key, None, textbox)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}