Upload folder using huggingface_hub

README.md

@@ -1,12 +1,12 @@
+
 ---
-title: Mcp Image App
-emoji: 🏢
-colorFrom: gray
-colorTo: gray
+title: mcp_image_app 
+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: mcp_image_app"]}, {"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 tempfile\n", "from PIL import Image\n", "import numpy as np\n", "\n", "\n", "@gr.mcp.tool(\n", "    _meta={\n", "        \"openai/outputTemplate\": \"ui://widget/app.html\",\n", "        \"openai/resultCanProduceWidget\": True,\n", "        \"openai/widgetAccessible\": True,\n", "    }\n", ")\n", "\n", "def power_law_image(input_path: str, gamma: float = 0.5) -> str:\n", "    \"\"\"\n", "    Applies a power-law (gamma) transformation to an image file and saves\n", "    the result to a temporary file.\n", "\n", "    Args:\n", "        input_path (str): Path to the input image.\n", "        gamma (float): Power-law exponent. <1 brightens, >1 darkens.\n", "\n", "    Returns:\n", "        str: Path to the saved temporary output image.\n", "    \"\"\"\n", "    img = Image.open(input_path).convert(\"RGB\")\n", "    arr = np.array(img, dtype=np.float32) / 255.0\n", "    arr = np.power(arr, gamma)\n", "    arr = np.clip(arr * 255, 0, 255).astype(np.uint8)\n", "    out_img = Image.fromarray(arr)\n", "\n", "    tmp_file = tempfile.NamedTemporaryFile(delete=False, suffix=\".png\")\n", "    out_img.save(tmp_file.name)\n", "    tmp_file.close()\n", "\n", "    return tmp_file.name\n", "\n", "\n", "@gr.mcp.resource(\"ui://widget/app.html\", mime_type=\"text/html+skybridge\")\n", "def app_html():\n", "    visual = \"\"\"\n", "    <style>\n", "        #image-container {\n", "            position: relative;\n", "            display: inline-block;\n", "            max-width: 100%;\n", "        }\n", "        #image-display {\n", "            max-width: 100%;\n", "            height: auto;\n", "            display: block;\n", "            border-radius: 8px;\n", "        }\n", "        #brighten-btn {\n", "            position: absolute;\n", "            bottom: 16px;\n", "            right: 26px;\n", "            padding: 12px 24px;\n", "            background: #1a1a1a;\n", "            color: white;\n", "            border: none;\n", "            border-radius: 8px;\n", "            font-weight: 600;\n", "            cursor: pointer;\n", "            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n", "        }\n", "        #brighten-btn:hover {\n", "            background: #000000;\n", "        }\n", "    </style>\n", "    <div id=\"image-container\">\n", "        <img id=\"image-display\" alt=\"Processed image\" />\n", "        <button id=\"brighten-btn\">Brighten</button>\n", "    </div>\n", "    <script>\n", "        const imageEl = document.getElementById('image-display');\n", "        const btnEl = document.getElementById('brighten-btn');\n", "\n", "        function extractImageUrl(data) {\n", "            if (data?.text?.startsWith('Image URL: ')) {\n", "                return data.text.substring('Image URL: '.length).trim();\n", "            }\n", "            if (data?.content) {\n", "                for (const item of data.content) {\n", "                    if (item.type === 'text' && item.text?.startsWith('Image URL: ')) {\n", "                        return item.text.substring('Image URL: '.length).trim();\n", "                    }\n", "                }\n", "            }\n", "        }\n", "\n", "        function render() {\n", "            const url = extractImageUrl(window.openai?.toolOutput);\n", "            if (url) imageEl.src = url;\n", "        }\n", "\n", "        async function brightenImage() {\n", "            btnEl.disabled = true;\n", "            btnEl.textContent = 'Brightening...';\n", "            const result = await window.openai.callTool('power_law_image', {\n", "                input_path: imageEl.src\n", "            });\n", "            const newUrl = extractImageUrl(result);\n", "            if (newUrl) imageEl.src = newUrl;\n", "            btnEl.disabled = false;\n", "            btnEl.textContent = 'Brighten';\n", "        }\n", "\n", "        btnEl.addEventListener('click', brightenImage);\n", "        window.addEventListener(\"openai:set_globals\", (event) => {\n", "            if (event.detail?.globals?.toolOutput) render();\n", "        }, { passive: true });\n", "\n", "        render();\n", "    </script>\n", "    \"\"\"\n", "    return visual\n", "\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            original_image = gr.Image(label=\"Original Image\", type=\"filepath\")\n", "            btn = gr.Button(\"Brighten Image\")\n", "        with gr.Column():\n", "            output_image = gr.Image(label=\"Output Image\", type=\"filepath\")\n", "            html = gr.Code(language=\"html\", max_lines=20)\n", "\n", "    btn.click(power_law_image, inputs=original_image, outputs=original_image)\n", "    btn.click(app_html, outputs=html)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch(mcp_server=True, share=True)\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

run.py

@@ -0,0 +1,134 @@
+import gradio as gr
+import tempfile
+from PIL import Image
+import numpy as np
+
+
+@gr.mcp.tool(
+    _meta={
+        "openai/outputTemplate": "ui://widget/app.html",
+        "openai/resultCanProduceWidget": True,
+        "openai/widgetAccessible": True,
+    }
+)
+
+def power_law_image(input_path: str, gamma: float = 0.5) -> str:
+    """
+    Applies a power-law (gamma) transformation to an image file and saves
+    the result to a temporary file.
+
+    Args:
+        input_path (str): Path to the input image.
+        gamma (float): Power-law exponent. <1 brightens, >1 darkens.
+
+    Returns:
+        str: Path to the saved temporary output image.
+    """
+    img = Image.open(input_path).convert("RGB")
+    arr = np.array(img, dtype=np.float32) / 255.0
+    arr = np.power(arr, gamma)
+    arr = np.clip(arr * 255, 0, 255).astype(np.uint8)
+    out_img = Image.fromarray(arr)
+
+    tmp_file = tempfile.NamedTemporaryFile(delete=False, suffix=".png")
+    out_img.save(tmp_file.name)
+    tmp_file.close()
+
+    return tmp_file.name
+
+
+@gr.mcp.resource("ui://widget/app.html", mime_type="text/html+skybridge")
+def app_html():
+    visual = """
+    <style>
+        #image-container {
+            position: relative;
+            display: inline-block;
+            max-width: 100%;
+        }
+        #image-display {
+            max-width: 100%;
+            height: auto;
+            display: block;
+            border-radius: 8px;
+        }
+        #brighten-btn {
+            position: absolute;
+            bottom: 16px;
+            right: 26px;
+            padding: 12px 24px;
+            background: #1a1a1a;
+            color: white;
+            border: none;
+            border-radius: 8px;
+            font-weight: 600;
+            cursor: pointer;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+        }
+        #brighten-btn:hover {
+            background: #000000;
+        }
+    </style>
+    <div id="image-container">
+        <img id="image-display" alt="Processed image" />
+        <button id="brighten-btn">Brighten</button>
+    </div>
+    <script>
+        const imageEl = document.getElementById('image-display');
+        const btnEl = document.getElementById('brighten-btn');
+
+        function extractImageUrl(data) {
+            if (data?.text?.startsWith('Image URL: ')) {
+                return data.text.substring('Image URL: '.length).trim();
+            }
+            if (data?.content) {
+                for (const item of data.content) {
+                    if (item.type === 'text' && item.text?.startsWith('Image URL: ')) {
+                        return item.text.substring('Image URL: '.length).trim();
+                    }
+                }
+            }
+        }
+
+        function render() {
+            const url = extractImageUrl(window.openai?.toolOutput);
+            if (url) imageEl.src = url;
+        }
+
+        async function brightenImage() {
+            btnEl.disabled = true;
+            btnEl.textContent = 'Brightening...';
+            const result = await window.openai.callTool('power_law_image', {
+                input_path: imageEl.src
+            });
+            const newUrl = extractImageUrl(result);
+            if (newUrl) imageEl.src = newUrl;
+            btnEl.disabled = false;
+            btnEl.textContent = 'Brighten';
+        }
+
+        btnEl.addEventListener('click', brightenImage);
+        window.addEventListener("openai:set_globals", (event) => {
+            if (event.detail?.globals?.toolOutput) render();
+        }, { passive: true });
+
+        render();
+    </script>
+    """
+    return visual
+
+
+with gr.Blocks() as demo:
+    with gr.Row():
+        with gr.Column():
+            original_image = gr.Image(label="Original Image", type="filepath")
+            btn = gr.Button("Brighten Image")
+        with gr.Column():
+            output_image = gr.Image(label="Output Image", type="filepath")
+            html = gr.Code(language="html", max_lines=20)
+
+    btn.click(power_law_image, inputs=original_image, outputs=original_image)
+    btn.click(app_html, outputs=html)
+
+if __name__ == "__main__":
+    demo.launch(mcp_server=True, share=True)