feat: scaffold FloorPlan custom component, add Python backend

floorplan/.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

floorplan/README.md

@@ -0,0 +1,10 @@
+
+# gradio_floorplan
+A Custom Gradio component.
+
+## Example usage
+
+```python
+import gradio as gr
+from gradio_floorplan import FloorPlan
+```

floorplan/backend/gradio_floorplan/__init__.py

@@ -0,0 +1,4 @@
+
+from .floorplan import FloorPlan
+
+__all__ = ['FloorPlan']

floorplan/backend/gradio_floorplan/floorplan.py

@@ -0,0 +1,126 @@
+from __future__ import annotations
+import copy
+from typing import TYPE_CHECKING
+from gradio.components.base import Component
+
+if TYPE_CHECKING:
+    from gradio.components import Timer
+
+
+_DEFAULTS = {
+    "corners": [[50, 50], [550, 50], [550, 450], [50, 450]],
+    "furnitures": [
+        {
+            "object": "Sofa",
+            "localisation": [150, 100, 250, 300],
+            "description": "3-seat sofa",
+        },
+        {
+            "object": "Table",
+            "localisation": [300, 200, 380, 400],
+            "description": "Coffee table",
+        },
+    ],
+}
+
+
+class FloorPlan(Component):
+    """
+    A Gradio component that renders an interactive SVG floor plan.
+
+    Input/Output value shape:
+        {
+            "corners": [[x, y], ...],
+            "furnitures": [
+                {
+                    "object": str,
+                    "localisation": [ymin, xmin, ymax, xmax],
+                    "description": str,
+                },
+                ...
+            ]
+        }
+    """
+
+    EVENTS = ["change"]
+
+    def __init__(
+        self,
+        value: dict | None = None,
+        *,
+        label: str | None = None,
+        info: str | None = None,
+        every: "Timer | float | None" = None,
+        show_label: bool | None = None,
+        container: bool = True,
+        scale: int | None = None,
+        min_width: int = 160,
+        interactive: bool | None = None,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+    ):
+        super().__init__(
+            value=value,
+            label=label,
+            info=info,
+            every=every,
+            show_label=show_label,
+            container=container,
+            scale=scale,
+            min_width=min_width,
+            interactive=interactive,
+            visible=visible,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+        )
+
+    def preprocess(self, payload: dict | None) -> dict | None:
+        """Pass the value dict through to the Python function unchanged."""
+        return payload
+
+    def postprocess(self, value: dict | None) -> dict | None:
+        """Pass the dict from Python through to the frontend unchanged."""
+        return value
+
+    def api_info(self) -> dict:
+        return {
+            "type": "object",
+            "properties": {
+                "corners": {
+                    "type": "array",
+                    "items": {
+                        "type": "array",
+                        "items": {"type": "integer"},
+                        "minItems": 2,
+                        "maxItems": 2,
+                    },
+                },
+                "furnitures": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "properties": {
+                            "object": {"type": "string"},
+                            "localisation": {
+                                "type": "array",
+                                "items": {"type": "integer"},
+                                "minItems": 4,
+                                "maxItems": 4,
+                            },
+                            "description": {"type": "string"},
+                        },
+                        "required": ["object", "localisation", "description"],
+                    },
+                },
+            },
+            "required": ["corners", "furnitures"],
+        }
+
+    def example_value(self) -> dict:
+        return copy.deepcopy(_DEFAULTS)
+
+    def example_payload(self) -> dict:
+        return copy.deepcopy(_DEFAULTS)

floorplan/backend/tests/test_floorplan.py

@@ -0,0 +1,52 @@
+import copy
+from gradio_floorplan import FloorPlan
+
+
+SAMPLE_CORNERS = [[50, 50], [550, 50], [550, 450], [50, 450]]
+SAMPLE_FURNITURES = [
+    {"object": "Sofa", "localisation": [150, 100, 250, 300], "description": "3-seat sofa"},
+    {"object": "Table", "localisation": [300, 200, 380, 400], "description": "Coffee table"},
+]
+SAMPLE_VALUE = {"corners": SAMPLE_CORNERS, "furnitures": SAMPLE_FURNITURES}
+
+
+def test_postprocess_returns_dict():
+    comp = FloorPlan()
+    result = comp.postprocess(SAMPLE_VALUE)
+    assert result is not None
+    assert result["corners"] == SAMPLE_CORNERS
+    assert len(result["furnitures"]) == 2
+
+
+def test_postprocess_none():
+    comp = FloorPlan()
+    assert comp.postprocess(None) is None
+
+
+def test_preprocess_passes_through_unchanged():
+    comp = FloorPlan()
+    payload = copy.deepcopy(SAMPLE_VALUE)
+    result = comp.preprocess(payload)
+    assert result == payload
+
+
+def test_preprocess_none():
+    comp = FloorPlan()
+    assert comp.preprocess(None) is None
+
+
+def test_example_value_shape():
+    comp = FloorPlan()
+    ex = comp.example_value()
+    assert "corners" in ex
+    assert "furnitures" in ex
+    assert len(ex["corners"]) >= 3
+    assert len(ex["furnitures"]) >= 1
+
+
+def test_example_value_returns_independent_copies():
+    comp = FloorPlan()
+    a = comp.example_value()
+    b = comp.example_value()
+    a["corners"].append([999, 999])
+    assert [999, 999] not in b["corners"], "example_value must return a deep copy"

floorplan/demo/app.py

@@ -0,0 +1,17 @@
+
+import gradio as gr
+from gradio_floorplan import FloorPlan
+
+
+example = FloorPlan().example_value()
+
+demo = gr.Interface(
+    lambda x:x,
+    FloorPlan(),  # interactive version of your component
+    FloorPlan(),  # static version of your component
+    # examples=[[example]],  # uncomment this line to view the "example version" of your component
+)
+
+
+if __name__ == "__main__":
+    demo.launch()

floorplan/frontend/Example.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	export let value: string | null;
+	export let type: "gallery" | "table";
+	export let selected = false;
+
+	let size: number;
+	let el: HTMLDivElement;
+
+	function set_styles(element: HTMLElement, el_width: number): void {
+		element.style.setProperty(
+			"--local-text-width",
+			`${el_width && el_width < 150 ? el_width : 200}px`
+		);
+		element.style.whiteSpace = "unset";
+	}
+
+	function truncate_text(text: string | null, max_length = 60): string {
+		if (!text) return "";
+		const str = String(text);
+		if (str.length <= max_length) return str;
+		return str.slice(0, max_length) + "...";
+	}
+
+	onMount(() => {
+		set_styles(el, size);
+	});
+</script>
+
+<div
+	bind:clientWidth={size}
+	bind:this={el}
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{truncate_text(value)}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+
+	div {
+		overflow: hidden;
+		min-width: var(--local-text-width);
+
+		white-space: nowrap;
+	}
+</style>

floorplan/frontend/Index.svelte

@@ -0,0 +1,112 @@
+<svelte:options accessors={true} />
+
+<script lang="ts">
+	import type { SimpleTextboxProps, SimpleTextboxEvents } from "./types";
+	import { Gradio } from "@gradio/utils";
+	import { BlockTitle } from "@gradio/atoms";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import { tick } from "svelte";
+
+	const props = $props();
+	const gradio = new Gradio<SimpleTextboxEvents, SimpleTextboxProps>(props);
+
+	let el: HTMLTextAreaElement | HTMLInputElement;
+	const container = true;
+	let old_value = $state(gradio.props.value);
+
+	async function handle_keypress(e: KeyboardEvent): Promise<void> {
+		await tick();
+		if (e.key === "Enter") {
+			e.preventDefault();
+			gradio.dispatch("submit");
+		}
+	}
+
+	$effect(() => {
+		if (old_value != gradio.props.value) {
+			old_value = gradio.props.value;
+			gradio.dispatch("change");
+		}
+	});
+</script>
+
+<Block
+	visible={gradio.shared.visible}
+	elem_id={gradio.shared.elem_id}
+	elem_classes={gradio.shared.elem_classes}
+	scale={gradio.shared.scale}
+	min_width={gradio.shared.min_width}
+	allow_overflow={false}
+	padding={true}
+	rtl={gradio.props.rtl}
+>
+	{#if gradio.shared.loading_status}
+		<StatusTracker
+			autoscroll={gradio.shared.autoscroll}
+			i18n={gradio.i18n}
+			{...gradio.shared.loading_status}
+			on_clear_status={() =>
+				gradio.dispatch("clear_status", gradio.shared.loading_status)}
+		/>
+	{/if}
+
+	<label class:container>
+		<BlockTitle show_label={gradio.shared.show_label} info={undefined}
+			>{gradio.shared.label}</BlockTitle
+		>
+
+		<input
+			data-testid="textbox"
+			type="text"
+			class="scroll-hide"
+			bind:value={gradio.props.value}
+			bind:this={el}
+			placeholder={gradio.props.placeholder}
+			disabled={!gradio.shared.interactive}
+			dir={gradio.props.rtl ? "rtl" : "ltr"}
+			on:input={() => gradio.dispatch("input")}
+			on:keypress={handle_keypress}
+		/>
+	</label>
+</Block>
+
+<style>
+	label {
+		display: block;
+		width: 100%;
+	}
+
+	input {
+		display: block;
+		position: relative;
+		outline: none !important;
+		box-shadow: var(--input-shadow);
+		background: var(--input-background-fill);
+		padding: var(--input-padding);
+		width: 100%;
+		color: var(--body-text-color);
+		font-weight: var(--input-text-weight);
+		font-size: var(--input-text-size);
+		line-height: var(--line-sm);
+		border: none;
+	}
+	.container > input {
+		border: var(--input-border-width) solid var(--input-border-color);
+		border-radius: var(--input-radius);
+	}
+	input:disabled {
+		-webkit-text-fill-color: var(--body-text-color);
+		-webkit-opacity: 1;
+		opacity: 1;
+	}
+
+	input:focus {
+		box-shadow: var(--input-shadow-focus);
+		border-color: var(--input-border-color-focus);
+	}
+
+	input::placeholder {
+		color: var(--input-placeholder-color);
+	}
+</style>

floorplan/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

floorplan/frontend/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "gradio_floorplan",
+  "version": "0.3.37",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "exports": {
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.22.2",
+    "@gradio/icons": "0.15.1",
+    "@gradio/statustracker": "0.12.5",
+    "@gradio/utils": "0.12.0",
+    "svelte": "^5.48.0"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.16.0"
+  },
+  "peerDependencies": {
+    "svelte": "^5.48.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/gradio-app/gradio.git",
+    "directory": "js/simpletextbox"
+  }
+}

floorplan/frontend/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"verbatimModuleSyntax": true
+	},
+	"exclude": ["node_modules", "dist", "./gradio.config.js"]
+}

floorplan/frontend/types.ts

@@ -0,0 +1,14 @@
+import type { LoadingStatus } from "@gradio/statustracker";
+
+export interface SimpleTextboxProps {
+	value: string;
+	placeholder: string;
+	rtl: boolean;
+}
+
+export interface SimpleTextboxEvents {
+	change: never;
+	submit: never;
+	input: never;
+	clear_status: LoadingStatus;
+}

floorplan/pyproject.toml

@@ -0,0 +1,59 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_floorplan"
+version = "0.0.1"
+description = "Python library for easily interacting with trained machine learning models"
+readme = "README.md"
+license = "Apache-2.0"
+requires-python = ">=3.10"
+authors = [{ name = "YOUR NAME", email = "YOUREMAIL@domain.com" }]
+keywords = [
+  "gradio-custom-component",
+  "gradio-template-SimpleTextbox"
+]
+# Add dependencies here
+dependencies = ["gradio>=6.0,<7.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  'Operating System :: OS Independent',
+  'Programming Language :: Python :: 3',
+  'Programming Language :: Python :: 3 :: Only',
+  'Programming Language :: Python :: 3.8',
+  'Programming Language :: Python :: 3.9',
+  'Programming Language :: Python :: 3.10',
+  'Programming Language :: Python :: 3.11',
+  'Topic :: Scientific/Engineering',
+  'Topic :: Scientific/Engineering :: Artificial Intelligence',
+  'Topic :: Scientific/Engineering :: Visualization',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_floorplan/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_floorplan"]
+
+[dependency-groups]
+dev = [
+    "pytest>=9.0.2",
+]