Upload folder using huggingface_hub

README.md

@@ -1,12 +1,12 @@
+
 ---
-title: Super Html
-emoji: 🐢
-colorFrom: blue
-colorTo: purple
+title: super_html 
+emoji: 🔥
+colorFrom: indigo
+colorTo: indigo
 sdk: gradio
-sdk_version: 5.49.1
-app_file: app.py
+sdk_version: 6.0.0
+app_file: run.py
 pinned: false
+hf_oauth: true
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: super_html"]}, {"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", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\"\"\"\n", "    # Simple HTML usecase\n", "    This is the classic `gr.HTML` usecase where we just want to render some static HTML.\n", "    \"\"\")\n", "    simple_html = gr.HTML(\"<h1 style='color:purple;' id='simple'>Hello, World!</h1>\")\n", "\n", "    gr.Markdown(\"\"\"\n", "    # Templated HTML usecase\n", "    'value' can now be anything, and it can be used inside the `html_template` using `${value}` syntax.\n", "    Note that when used as output or input, `value` is just this specific value rather than the entire HTML.\n", "    \"\"\")\n", "    with gr.Row():\n", "        name1 = gr.Textbox(label=\"Name\")\n", "        templated_html = gr.HTML(\"\", html_template=\"<h1>Hello, {{value}}! ${value.length} letters</h1>\", elem_id=\"templated\")\n", "        name1.change(lambda x: x, inputs=name1, outputs=templated_html)\n", "\n", "    gr.Markdown(\"\"\"\n", "    # Additional Props\n", "    You are not limited to using `${value}` in the templates, you can add any number of custom tags to the template, and pass them to the component as keyword arguments. These props can be updated via python event listeners as well.\n", "    \"\"\")\n", "    with gr.Row():\n", "        templated_html_props = gr.HTML(\"John\", html_template=\"\"\"\n", "                            <h1 style=\"font-size: ${fontSize}px;\">Hello, ${value}!</h1>\n", "                \"\"\", fontSize=30, elem_id=\"props\")\n", "        slider = gr.Slider(10, 100, value=30, label=\"Font Size\")\n", "        slider.change(lambda x: gr.HTML(fontSize=x), inputs=slider, outputs=templated_html_props)\n", "\n", "    gr.Markdown(\"\"\"\n", "    # CSS Templating\n", "    We can also template CSS, which is automatically scoped to the component.\n", "    \"\"\")\n", "    with gr.Row():\n", "        name2 = gr.Textbox(label=\"Person\")\n", "        color = gr.ColorPicker(label=\"Text Color\", value=\"#00ff00\")\n", "        bold = gr.Checkbox(label=\"Bold Text\", value=True)\n", "        templated_html_css = gr.HTML([\"J\", \"o\", \"h\", \"n\"], html_template=\"\"\"\n", "                        <h1>Hello, ${value.join('')}!</h1>\n", "                        <ul>\n", "                          {{#each value}}\n", "                            <li>{{this}}</li>\n", "                          {{/each}}\n", "                        </ul>\n", "            \"\"\", css_template=\"\"\"\n", "            h1, li {\n", "                color: ${color};\n", "                font-weight: ${bold ? 'bold' : 'normal'};\n", "            }\n", "        \"\"\", color=\"green\", bold=True, elem_id=\"css\")\n", "    with gr.Row():\n", "        btn = gr.Button(\"Update HTML\")\n", "        btn_blue = gr.Button(\"Make HTML Blue\")\n", "    def update_templated_html_css(name, color, bold):\n", "        return gr.HTML(value=list(name), color=color, bold=bold)\n", "    btn.click(update_templated_html_css, inputs=[name2, color, bold], outputs=templated_html_css)\n", "    btn_blue.click(lambda: gr.HTML(color=\"blue\"), outputs=templated_html_css)\n", "\n", "    gr.Markdown(\"\"\"\n", "    # JS Prop Updates\n", "    We can now trigger events from gr.HTML using event listeners in `js_on_load`. This script has access to `element` which refers to the parent element, and `trigger(event_name)` or `trigger(event_name, event_data)`, which can be used to dispatch events.\n", "    \"\"\")\n", "\n", "    button_set = gr.HTML(\n", "        html_template=\"\"\"\n", "        <button id='A'>A</button>\n", "        <button id='B'>B</button>\n", "        <button id='C'>C</button>\n", "        \"\"\",\n", "        css_template=\"\"\"\n", "        button {\n", "            padding: 10px;\n", "            background-color: red;\n", "        }\n", "        \"\"\",\n", "        js_on_load=\"\"\"\n", "        const buttons = element.querySelectorAll('button');\n", "        buttons.forEach(button => {\n", "            button.addEventListener('click', () => {\n", "                trigger('click', {clicked: button.innerText});\n", "            });\n", "        });\n", "        \"\"\",\n", "        elem_id=\"button_set\"\n", "    )\n", "    clicked_box = gr.Textbox(label=\"Clicked\")\n", "\n", "    def on_button_click(evt: gr.EventData):\n", "        return evt.clicked\n", "    \n", "    button_set.click(on_button_click, outputs=clicked_box)\n", "\n", "    gr.Markdown(\"\"\"\n", "    # JS Prop Changes\n", "    You can also update `value` or any other prop of the component from JS using `props`, e.g., `props.value = \"new value\"` will update the `value` prop and re-render the HTML template.\n", "    \"\"\")    \n", "    form = gr.HTML(\n", "        html_template=\"\"\"\n", "        <input type=\"text\" value=\"${value}\" id=\"text-input\" />\n", "        <p>${value.length} letters</p>\n", "        <button class=\"submit\" style=\"display: ${valid ? 'block' : 'none'};\">submit</button>\n", "        <button class=\"clear\">clear</button>\n", "        \"\"\",\n", "        js_on_load=\"\"\"\n", "        const input = element.querySelector('input');\n", "        const submit_button = element.querySelector('button.submit');\n", "        const clear_button = element.querySelector('button.clear');\n", "        input.addEventListener('input', () => {\n", "            props.valid = input.value.length > 5;\n", "            props.value = input.value;\n", "        });\n", "        submit_button.addEventListener('click', () => {\n", "            trigger('submit');\n", "        });\n", "        clear_button.addEventListener('click', () => {\n", "            props.value = \"\";\n", "            props.valid = false;\n", "            trigger('clear');\n", "        });\n", "    \"\"\",\n", "    valid=False, elem_id=\"form\")\n", "    output_box = gr.Textbox(label=\"Output Box\")\n", "    form.submit(lambda x: x, form, outputs=output_box)\n", "    output_box.submit(lambda x: x, output_box, outputs=form)\n", "\n", "    gr.Markdown(\"\"\"\n", "    # Extending gr.HTML for new Components\n", "    You can create your own Components by extending the gr.HTML class.\n", "    \"\"\")\n", "    class ListComponent(gr.HTML):\n", "        def __init__(self, container=True, label=\"List\", **kwargs):\n", "            super().__init__(\n", "                html_template=\"\"\"\n", "                <h2>${label}</h2>\n", "                <ul>\n", "                    ${value.map(item => `<li>${item}</li>`).join('')}\n", "                </ul>\n", "                \"\"\",\n", "                container=container,\n", "                label=label,\n", "                **kwargs\n", "            )\n", "\n", "    ListComponent(label=\"Fruits\", value=[\"Apple\", \"Banana\", \"Cherry\"], elem_id=\"fruits\")\n", "    ListComponent(label=\"Vegetables\", value=[\"Carrot\", \"Broccoli\", \"Spinach\"], elem_id=\"vegetables\")\n", "\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

run.py

@@ -0,0 +1,152 @@
+import gradio as gr
+
+
+with gr.Blocks() as demo:
+    gr.Markdown("""
+    # Simple HTML usecase
+    This is the classic `gr.HTML` usecase where we just want to render some static HTML.
+    """)
+    simple_html = gr.HTML("<h1 style='color:purple;' id='simple'>Hello, World!</h1>")
+
+    gr.Markdown("""
+    # Templated HTML usecase
+    'value' can now be anything, and it can be used inside the `html_template` using `${value}` syntax.
+    Note that when used as output or input, `value` is just this specific value rather than the entire HTML.
+    """)
+    with gr.Row():
+        name1 = gr.Textbox(label="Name")
+        templated_html = gr.HTML("", html_template="<h1>Hello, {{value}}! ${value.length} letters</h1>", elem_id="templated")
+        name1.change(lambda x: x, inputs=name1, outputs=templated_html)
+
+    gr.Markdown("""
+    # Additional Props
+    You are not limited to using `${value}` in the templates, you can add any number of custom tags to the template, and pass them to the component as keyword arguments. These props can be updated via python event listeners as well.
+    """)
+    with gr.Row():
+        templated_html_props = gr.HTML("John", html_template="""
+                            <h1 style="font-size: ${fontSize}px;">Hello, ${value}!</h1>
+                """, fontSize=30, elem_id="props")
+        slider = gr.Slider(10, 100, value=30, label="Font Size")
+        slider.change(lambda x: gr.HTML(fontSize=x), inputs=slider, outputs=templated_html_props)
+
+    gr.Markdown("""
+    # CSS Templating
+    We can also template CSS, which is automatically scoped to the component.
+    """)
+    with gr.Row():
+        name2 = gr.Textbox(label="Person")
+        color = gr.ColorPicker(label="Text Color", value="#00ff00")
+        bold = gr.Checkbox(label="Bold Text", value=True)
+        templated_html_css = gr.HTML(["J", "o", "h", "n"], html_template="""
+                        <h1>Hello, ${value.join('')}!</h1>
+                        <ul>
+                          {{#each value}}
+                            <li>{{this}}</li>
+                          {{/each}}
+                        </ul>
+            """, css_template="""
+            h1, li {
+                color: ${color};
+                font-weight: ${bold ? 'bold' : 'normal'};
+            }
+        """, color="green", bold=True, elem_id="css")
+    with gr.Row():
+        btn = gr.Button("Update HTML")
+        btn_blue = gr.Button("Make HTML Blue")
+    def update_templated_html_css(name, color, bold):
+        return gr.HTML(value=list(name), color=color, bold=bold)
+    btn.click(update_templated_html_css, inputs=[name2, color, bold], outputs=templated_html_css)
+    btn_blue.click(lambda: gr.HTML(color="blue"), outputs=templated_html_css)
+
+    gr.Markdown("""
+    # JS Prop Updates
+    We can now trigger events from gr.HTML using event listeners in `js_on_load`. This script has access to `element` which refers to the parent element, and `trigger(event_name)` or `trigger(event_name, event_data)`, which can be used to dispatch events.
+    """)
+
+    button_set = gr.HTML(
+        html_template="""
+        <button id='A'>A</button>
+        <button id='B'>B</button>
+        <button id='C'>C</button>
+        """,
+        css_template="""
+        button {
+            padding: 10px;
+            background-color: red;
+        }
+        """,
+        js_on_load="""
+        const buttons = element.querySelectorAll('button');
+        buttons.forEach(button => {
+            button.addEventListener('click', () => {
+                trigger('click', {clicked: button.innerText});
+            });
+        });
+        """,
+        elem_id="button_set"
+    )
+    clicked_box = gr.Textbox(label="Clicked")
+
+    def on_button_click(evt: gr.EventData):
+        return evt.clicked
+    
+    button_set.click(on_button_click, outputs=clicked_box)
+
+    gr.Markdown("""
+    # JS Prop Changes
+    You can also update `value` or any other prop of the component from JS using `props`, e.g., `props.value = "new value"` will update the `value` prop and re-render the HTML template.
+    """)    
+    form = gr.HTML(
+        html_template="""
+        <input type="text" value="${value}" id="text-input" />
+        <p>${value.length} letters</p>
+        <button class="submit" style="display: ${valid ? 'block' : 'none'};">submit</button>
+        <button class="clear">clear</button>
+        """,
+        js_on_load="""
+        const input = element.querySelector('input');
+        const submit_button = element.querySelector('button.submit');
+        const clear_button = element.querySelector('button.clear');
+        input.addEventListener('input', () => {
+            props.valid = input.value.length > 5;
+            props.value = input.value;
+        });
+        submit_button.addEventListener('click', () => {
+            trigger('submit');
+        });
+        clear_button.addEventListener('click', () => {
+            props.value = "";
+            props.valid = false;
+            trigger('clear');
+        });
+    """,
+    valid=False, elem_id="form")
+    output_box = gr.Textbox(label="Output Box")
+    form.submit(lambda x: x, form, outputs=output_box)
+    output_box.submit(lambda x: x, output_box, outputs=form)
+
+    gr.Markdown("""
+    # Extending gr.HTML for new Components
+    You can create your own Components by extending the gr.HTML class.
+    """)
+    class ListComponent(gr.HTML):
+        def __init__(self, container=True, label="List", **kwargs):
+            super().__init__(
+                html_template="""
+                <h2>${label}</h2>
+                <ul>
+                    ${value.map(item => `<li>${item}</li>`).join('')}
+                </ul>
+                """,
+                container=container,
+                label=label,
+                **kwargs
+            )
+
+    ListComponent(label="Fruits", value=["Apple", "Banana", "Cherry"], elem_id="fruits")
+    ListComponent(label="Vegetables", value=["Carrot", "Broccoli", "Spinach"], elem_id="vegetables")
+
+
+
+if __name__ == "__main__":
+    demo.launch()