Form layout

.gitignore

@@ -38,7 +38,6 @@ demo/files/*.mp4
 *.bak
 workspace.code-workspace
 *.h5
-.vscode/
 
 # log files
 .pnpm-debug.log

demo/fake_gan_complex/run.py

@@ -0,0 +1,43 @@
+# This demo needs to be run from the repo folder.
+# python demo/fake_gan/run.py
+import random
+import time
+
+import gradio as gr
+
+
+def fake_gan(*args):
+    time.sleep(1)
+    image = random.choice(
+        [
+            "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
+            "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80",
+            "https://images.unsplash.com/photo-1542909168-82c3e7fdca5c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8aHVtYW4lMjBmYWNlfGVufDB8fDB8fA%3D%3D&w=1000&q=80",
+            "https://images.unsplash.com/photo-1546456073-92b9f0a8d413?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80",
+            "https://images.unsplash.com/photo-1601412436009-d964bd02edbc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=464&q=80",
+        ]
+    )
+    return image
+
+
+demo = gr.Interface(
+    fn=fake_gan,
+    inputs=[
+        gr.Image(label="Initial Image (optional)"),
+        gr.Markdown("**Parameters**"),
+        gr.Slider(25, minimum=0, maximum=50, label="TV_scale (for smoothness)"),
+        gr.Slider(25, minimum=0, maximum=50, label="Range_Scale (out of range RBG)"),
+        gr.Number(label="Respacing"),
+        gr.Markdown("**Parameters Two**"),
+        gr.Slider(25, minimum=0, maximum=50, label="Range_Scale (out of range RBG)"),
+        gr.Number(label="Respacing"),
+        gr.Markdown("**Parameters Three**"),
+        gr.Textbox(label="Respacing"),
+    ],
+    outputs=gr.Image(label="Generated Image"),
+    title="FD-GAN",
+    description="This is a fake demo of a GAN. In reality, the images are randomly chosen from Unsplash.",
+)
+
+if __name__ == "__main__":
+    demo.launch()

ui/.prettierignore

@@ -3,3 +3,4 @@ pnpm-workspace.yaml
 packages/app/dist/**
 pnpm-lock.yaml
 packages/plot/src/Plot.svelte
+**/.svelte-kit/**

ui/packages/app/src/Render.svelte

@@ -37,6 +37,48 @@
 				.map((rule) => rule[0] + ": " + rule[1])
 				.join("; ")
 		: null;
+
+	const forms = [
+		"textbox",
+		"number",
+		"slider",
+		"checkbox",
+		"checkboxgroup",
+		"radio",
+		"dropdown"
+	];
+
+	function get_types(i) {
+		const current = children[i]?.id && instance_map[children[i].id];
+		const next = children[i + 1]?.id && instance_map[children[i + 1].id];
+		const prev = children[i - 1]?.id && instance_map[children[i - 1].id];
+
+		return {
+			current: current?.type && forms.includes(current.type),
+			next: next?.type && forms.includes(next.type),
+			prev: prev?.type && forms.includes(prev.type)
+		};
+	}
+
+	if (children) {
+		children.forEach((c, i) => {
+			get_form_context(c, i);
+		});
+	}
+
+	function get_form_context(node, i) {
+		const { current, next, prev } = get_types(i);
+
+		if (current && next && prev) {
+			node.props.form_position = "mid";
+		} else if (current && next && !prev) {
+			node.props.form_position = "first";
+		} else if (current && prev && !next) {
+			node.props.form_position = "last";
+		} else if (current && !prev && !next) {
+			node.props.form_position = "single";
+		}
+	}
 </script>
 
 <svelte:component

ui/packages/app/src/components/Checkbox/Checkbox.svelte

@@ -6,8 +6,16 @@
 	export let style: string = "";
 	export let label: string = "Checkbox";
 	export let mode: "static" | "dynamic";
+	export let form_position: "first" | "last" | "mid" | "single" = "single";
 
 	if (default_value) value = default_value;
 </script>
 
-<Checkbox {style} {label} bind:value on:change disabled={mode === "static"} />
+<Checkbox
+	{form_position}
+	{style}
+	{label}
+	bind:value
+	on:change
+	disabled={mode === "static"}
+/>

ui/packages/app/src/components/CheckboxGroup/CheckboxGroup.svelte

@@ -8,11 +8,13 @@
 	export let mode: "static" | "dynamic";
 	export let style: string = "";
 	export let label: string = "Checkbox Group";
+	export let form_position: "first" | "last" | "mid" | "single" = "single";
 
 	if (default_value) value = default_value;
 </script>
 
 <CheckboxGroup
+	{form_position}
 	bind:value
 	{choices}
 	{style}

ui/packages/app/src/components/Column/Column.svelte

@@ -6,6 +6,10 @@
 	if (default_value) value = default_value;
 </script>
 
-<div {style} class:hidden={!value} class="flex flex-1 flex-col gap-2 relative">
+<div
+	{style}
+	class:hidden={!value}
+	class="flex flex-1 flex-col gr-gap gr-form-gap relative"
+>
 	<slot />
 </div>

ui/packages/app/src/components/Dropdown/Dropdown.svelte

@@ -5,13 +5,15 @@
 	export let default_value: string = "";
 	export let style: string = "";
 	export let choices: Array<string>;
+	export let form_position: "first" | "last" | "mid" | "single" = "single";
 
 	export let mode: "static" | "dynamic";
 
 	if (default_value) value = default_value;
 </script>
 
 <Dropdown
+	{form_position}
 	bind:value
 	{style}
 	{choices}

ui/packages/app/src/components/Number/Number.svelte

@@ -4,6 +4,7 @@
 	export let label: string = "Number";
 	export let value: number = 0;
 	export let default_value: number;
+	export let form_position: "first" | "last" | "mid" | "single" = "single";
 
 	export let style: string = "";
 
@@ -13,6 +14,7 @@
 </script>
 
 <Number
+	{form_position}
 	bind:value
 	{label}
 	{style}

ui/packages/app/src/components/Radio/Radio.svelte

@@ -7,11 +7,13 @@
 	export let style: string = "";
 	export let choices: Array<string> = [];
 	export let mode: "static" | "dynamic";
+	export let form_position: "first" | "last" | "mid" | "single" = "single";
 
 	if (default_value) value = default_value;
 </script>
 
 <Radio
+	{form_position}
 	bind:value
 	{label}
 	{style}

ui/packages/app/src/components/Slider/Slider.svelte

@@ -11,11 +11,13 @@
 	export let maximum: number;
 	export let step: number;
 	export let mode: "static" | "dynamic";
+	export let form_position: "first" | "last" | "mid" | "single" = "single";
 
 	if (default_value) value = default_value;
 </script>
 
 <Range
+	{form_position}
 	bind:value
 	{label}
 	{style}

ui/packages/app/src/components/StatusTracker/Loader.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+	import { spring } from "svelte/motion";
+
+	const top = spring([0, 0]);
+	const bottom = spring([0, 0]);
+
+	let dismounted: boolean;
+
+	function animate(): Promise<void> {
+		return new Promise(async (res) => {
+			await Promise.all([top.set([125, 140]), bottom.set([-125, -140])]);
+
+			await Promise.all([top.set([-125, 140]), bottom.set([125, -140])]);
+
+			await Promise.all([top.set([-125, 0]), bottom.set([125, -0])]);
+
+			await Promise.all([top.set([125, 0]), bottom.set([-125, 0])]);
+
+			res();
+		});
+	}
+
+	async function run() {
+		await animate();
+		console.log(dismounted);
+		if (!dismounted) run();
+	}
+
+	async function loading() {}
+
+	onMount(async () => {
+		await Promise.all([top.set([125, 0]), bottom.set([-125, 0])]);
+
+		run();
+		return () => (dismounted = true);
+	});
+</script>
+
+<div class="m-12" style="transform: translateY(3rem)">
+	<svg
+		class="text-xl"
+		width="7em"
+		height="7em"
+		viewBox="-1200 -1200 3000 3000"
+		fill="none"
+		xmlns="http://www.w3.org/2000/svg"
+	>
+		<g style="transform: translate({$top[0]}px, {$top[1]}px);">
+			<path
+				d="M255.926 0.754768L509.702 139.936V221.027L255.926 81.8465V0.754768Z"
+				fill="#FF7C00"
+				fill-opacity="0.4"
+			/>
+			<path
+				d="M509.69 139.936L254.981 279.641V361.255L509.69 221.55V139.936Z"
+				fill="#FF7C00"
+			/>
+			<path
+				d="M0.250138 139.937L254.981 279.641V361.255L0.250138 221.55V139.937Z"
+				fill="#FF7C00"
+				fill-opacity="0.4"
+			/>
+			<path
+				d="M255.923 0.232622L0.236328 139.936V221.55L255.923 81.8469V0.232622Z"
+				fill="#FF7C00"
+			/>
+		</g>
+		<g style="transform: translate({$bottom[0]}px, {$bottom[1]}px);">
+			<path
+				d="M255.926 141.5L509.702 280.681V361.773L255.926 222.592V141.5Z"
+				fill="#FF7C00"
+				fill-opacity="0.4"
+			/>
+			<path
+				d="M509.69 280.679L254.981 420.384V501.998L509.69 362.293V280.679Z"
+				fill="#FF7C00"
+			/>
+			<path
+				d="M0.250138 280.681L254.981 420.386V502L0.250138 362.295V280.681Z"
+				fill="#FF7C00"
+				fill-opacity="0.4"
+			/>
+			<path
+				d="M255.923 140.977L0.236328 280.68V362.294L255.923 222.591V140.977Z"
+				fill="#FF7C00"
+			/>
+		</g>
+	</svg>
+</div>

ui/packages/app/src/components/Textbox/Textbox.svelte

@@ -9,13 +9,15 @@
 	export let style: string = "";
 	export let lines: number;
 	export let placeholder: string = "";
+	export let form_position: "first" | "last" | "mid" | "single" = "single";
 
 	export let mode: "static" | "dynamic";
 
 	if (default_value) value = default_value;
 </script>
 
 <TextBox
+	{form_position}
 	bind:value
 	{label}
 	{style}