Upload folder using huggingface_hub

README.md

@@ -1,12 +1,12 @@
+
 ---
-title: Html Server Functions
-emoji: 👁
-colorFrom: green
-colorTo: blue
+title: html_server_functions 
+emoji: 🔥
+colorFrom: indigo
+colorTo: indigo
 sdk: gradio
 sdk_version: 6.7.0
-app_file: app.py
+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: html_server_functions"]}, {"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 os\n", "\n", "import gradio as gr\n", "\n", "\n", "def list_files(path):\n", "    try:\n", "        return os.listdir(path)\n", "    except (FileNotFoundError, PermissionError) as e:\n", "        return [f\"Error: {e}\"]\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    gr.Markdown(\n", "        \"# Server Functions Demo\\nClick 'Load Files' to list files in the directory.\"\n", "    )\n", "    filetree = gr.HTML(\n", "        value=os.path.abspath(''),\n", "        html_template=\"\"\"\n", "            <div>\n", "                <p>Directory: <strong>${value}</strong></p>\n", "                <div class='tree'></div>\n", "                <button class='load-btn'>Load Files</button>\n", "            </div>\n", "        \"\"\",\n", "        js_on_load=\"\"\"\n", "            const loadBtn = element.querySelector('.load-btn');\n", "            const tree = element.querySelector('.tree');\n", "            loadBtn.addEventListener('click', async () => {\n", "                const files = await server.list_files(props.value);\n", "                tree.innerHTML = '';\n", "                files.forEach(file => {\n", "                    const fileEl = document.createElement('div');\n", "                    fileEl.textContent = file;\n", "                    tree.appendChild(fileEl);\n", "                });\n", "            });\n", "        \"\"\",\n", "        server_functions=[list_files],\n", "    )\n", "\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

run.py

@@ -0,0 +1,44 @@
+import os
+
+import gradio as gr
+
+
+def list_files(path):
+    try:
+        return os.listdir(path)
+    except (FileNotFoundError, PermissionError) as e:
+        return [f"Error: {e}"]
+
+
+with gr.Blocks() as demo:
+    gr.Markdown(
+        "# Server Functions Demo\nClick 'Load Files' to list files in the directory."
+    )
+    filetree = gr.HTML(
+        value=os.path.dirname(__file__),
+        html_template="""
+            <div>
+                <p>Directory: <strong>${value}</strong></p>
+                <div class='tree'></div>
+                <button class='load-btn'>Load Files</button>
+            </div>
+        """,
+        js_on_load="""
+            const loadBtn = element.querySelector('.load-btn');
+            const tree = element.querySelector('.tree');
+            loadBtn.addEventListener('click', async () => {
+                const files = await server.list_files(props.value);
+                tree.innerHTML = '';
+                files.forEach(file => {
+                    const fileEl = document.createElement('div');
+                    fileEl.textContent = file;
+                    tree.appendChild(fileEl);
+                });
+            });
+        """,
+        server_functions=[list_files],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()