Deploy gr.Workflow example

README.md

@@ -1,13 +1,21 @@
 ---
-title: Gr Workflow Concept D Space Node
-emoji: 🌍
-colorFrom: purple
-colorTo: blue
+title: Concept D · space node
+emoji: ✂️
+colorFrom: indigo
+colorTo: purple
 sdk: gradio
-sdk_version: 6.24.0
-python_version: '3.13'
+sdk_version: 6.22.0
 app_file: app.py
 pinned: false
+hf_oauth: true
+hf_oauth_scopes:
+  - inference-api
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ✂️ Concept D · space node
+
+A kind:"space" operator that calls another Gradio Space (background removal) via gradio_client.
+
+A live example from the blog **[Build anything with gr.Workflow](https://huggingface.co/blog)** — a visual, node-based AI pipeline builder built into Gradio.
+
+> This demo calls Hugging Face models/Spaces. Click **Sign in with Hugging Face** on the canvas before running so the model & space nodes run under your own token.

app.py

@@ -0,0 +1,63 @@
+"""
+Concept D — a SPACE node (call any Gradio Space on the Hub)
+==========================================================
+
+An operator with `kind: "space"` calls a Gradio Space's API. Set `space_id` and
+`endpoint` (its api_name, e.g. "/image"); inputs are passed POSITIONALLY in port
+order, and file inputs/outputs are handled for you. Find the endpoint + arg
+order on the Space's "Use via API" panel.
+
+Graph:  reference(image) → space background-removal (/image) → subject(image)
+
+The `/image` endpoint returns (original, cutout); the subject's output port uses
+`output_index: 1` to keep the cutout.
+
+Needs a token to RUN; imports and renders without one.
+
+Run it:   python concepts/d_space_node.py
+"""
+
+import json
+import os
+
+import gradio as gr
+
+GRAPH = {
+    "schema_version": "2",
+    "name": "Background Remover",
+    "references": [
+        {"id": "ref_img", "role": "reference", "label": "Image", "asset_type": "image",
+         "inputs": [{"id": "in", "label": "Image", "type": "image"}],
+         "outputs": [{"id": "out", "label": "Image", "type": "image"}],
+         "data": {}, "x": 60, "y": 120, "width": 220, "height": 150}
+    ],
+    "operators": [
+        {"id": "op_bg", "role": "operator", "kind": "space",
+         "space_id": "hf-applications/background-removal", "endpoint": "/image",
+         "label": "background-removal",
+         "inputs": [{"id": "in_image", "label": "Image", "type": "image", "required": True}],
+         "outputs": [{"id": "out_0", "label": "Cutout", "type": "image", "output_index": 1}],
+         "data": {}, "x": 340, "y": 120, "width": 240, "height": 120}
+    ],
+    "subjects": [
+        {"id": "sub_cut", "role": "subject", "label": "Cutout", "asset_type": "image",
+         "inputs": [{"id": "in", "label": "Cutout", "type": "image"}],
+         "outputs": [{"id": "out", "label": "Cutout", "type": "image"}],
+         "data": {}, "x": 640, "y": 120, "width": 240, "height": 220}
+    ],
+    "edges": [
+        {"id": "e1", "from_node_id": "ref_img", "from_port_id": "out",
+         "to_node_id": "op_bg", "to_port_id": "in_image", "type": "image"},
+        {"id": "e2", "from_node_id": "op_bg", "from_port_id": "out_0",
+         "to_node_id": "sub_cut", "to_port_id": "in", "type": "image"},
+    ],
+}
+
+GRAPH_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), "d_space_node.json")
+with open(GRAPH_PATH, "w", encoding="utf-8") as f:
+    json.dump(GRAPH, f, indent=2)
+
+demo = gr.Workflow(GRAPH_PATH)
+
+if __name__ == "__main__":
+    demo.launch()

d_space_node.json

@@ -0,0 +1 @@
+{"schema_version":"2","name":"Background Remover","references":[{"id":"ref_img","role":"reference","label":"Image","asset_type":"image","inputs":[{"id":"in","label":"Image","type":"image"}],"outputs":[{"id":"out","label":"Image","type":"image"}],"data":{},"x":60,"y":120,"width":220,"height":136}],"operators":[{"id":"op_bg","role":"operator","kind":"space","space_id":"hf-applications/background-removal","endpoint":"/image","label":"background-removal","inputs":[{"id":"in_image","label":"Image","type":"image","required":true}],"outputs":[{"id":"out_0","label":"Cutout","type":"image","output_index":1}],"data":{},"x":340,"y":120,"width":240,"height":136}],"subjects":[{"id":"sub_cut","role":"subject","label":"Cutout","asset_type":"image","inputs":[{"id":"in","label":"Cutout","type":"image"}],"outputs":[{"id":"out","label":"Cutout","type":"image"}],"data":{},"x":640,"y":120,"width":240,"height":107}],"edges":[{"id":"e1","from_node_id":"ref_img","from_port_id":"out","to_node_id":"op_bg","to_port_id":"in_image","type":"image"},{"id":"e2","from_node_id":"op_bg","from_port_id":"out_0","to_node_id":"sub_cut","to_port_id":"in","type":"image"}]}