svelte frontend

.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+venv/

Makefile

@@ -0,0 +1,11 @@
+install-node:
+	./install-node.sh
+build-client:
+	cd frontend && npm install && npm run build && rm -rf ../static && cp -r build/ ../static/
+build-dev:
+	cd frontend && npm install && NODE_ENV=development npm run build && rm -rf ../static 2>&1 && cp -rv build/ ../static/
+run-dev:
+	FLASK_ENV=development python app.py
+run-prod:
+	python app.py
+build-all: run-prod

README.md

@@ -3,8 +3,10 @@ title: Drawings to Human
 emoji: ✍️🧍🏽‍♀️🧍🏻
 colorFrom: blue
 colorTo: blue
-sdk: static
+sdk: gradio
+sdk_version: 3.0.24
 pinned: false
+app_file: main.py
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,18 @@
+import os
+from flask import Flask
+
+
+app = Flask(__name__, static_url_path='/static')
+
+mode = os.environ.get('FLASK_ENV', 'production')
+dev = mode == 'development'
+
+
+@app.route('/')
+def index():
+    return app.send_static_file('index.html')
+
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0',  port=int(
+        os.environ.get('PORT', 7860)), debug=True, use_reloader=dev)

frontend/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

frontend/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

frontend/.gitignore

@@ -0,0 +1,11 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+venv/

frontend/.npmrc

@@ -0,0 +1 @@
+engine-strict=true

frontend/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

frontend/.prettierrc

@@ -0,0 +1,6 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100
+}

frontend/README.md

@@ -0,0 +1,38 @@
+# create-svelte
+
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+
+## Creating a project
+
+If you're seeing this, you've probably already done this step. Congrats!
+
+```bash
+# create a new project in the current directory
+npm init svelte
+
+# create a new project in my-app
+npm init svelte my-app
+```
+
+## Developing
+
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
+
+```bash
+npm run dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
+```
+
+## Building
+
+To create a production version of your app:
+
+```bash
+npm run build
+```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

frontend/package.json

@@ -0,0 +1,43 @@
+{
+	"name": "drawings-to-human",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"package": "svelte-kit package",
+		"preview": "svelte-kit preview",
+		"prepare": "svelte-kit sync",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
+		"format": "prettier --write --plugin-search-dir=. ."
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^1.0.0-next.34",
+		"@sveltejs/kit": "next",
+		"@tailwindcss/typography": "^0.5.2",
+		"@types/cookie": "^0.5.1",
+		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/parser": "^5.27.0",
+		"autoprefixer": "^10.4.7",
+		"eslint": "^8.16.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.14",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
+		"svelte": "^3.46.0",
+		"svelte-check": "^2.7.1",
+		"svelte-preprocess": "^4.10.7",
+		"tailwindcss": "^3.1.4",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"@fontsource/fira-mono": "^4.5.0",
+		"cookie": "^0.4.1",
+		"nanoid": "^4.0.0",
+		"px-brush": "^1.0.1"
+	}
+}

frontend/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/src/app.css

@@ -0,0 +1,10 @@
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@100;200;300;400;500;600;700;800&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	html {
+		font-family: 'Open Sans', sans-serif;
+	}
+}

frontend/src/app.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	interface Locals {
+		userid: string;
+	}
+
+	// interface Platform {}
+
+	// interface Session {}
+
+	// interface Stuff {}
+}

frontend/src/app.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
+		%sveltekit.head%
+	</head>
+	<body class="dark:bg-[rgb(11,15,25)] bg-white dark:text-white text-black">
+		%sveltekit.body%
+	</body>
+</html>

frontend/src/data.ts

@@ -0,0 +1,69 @@
+import type { Color } from './types';
+
+export const COLOR_LIST: Color[] = [
+	{ color: [0, 0, 0], label: 'background' },
+	{ color: [255, 140, 0], label: 'bag' },
+	{ color: [255, 255, 0], label: 'belt' },
+	{ color: [255, 250, 205], label: 'dress' },
+	{ color: [130, 165, 180], label: 'earrings' },
+	{ color: [0, 100, 0], label: 'eyeglass' },
+	{ color: [16, 78, 139], label: 'face' },
+	{ color: [245, 222, 179], label: 'footwear' },
+	{ color: [213, 140, 88], label: 'gloves' },
+	{ color: [255, 0, 0], label: 'hair' },
+	{ color: [127, 255, 212], label: 'headwear' },
+	{ color: [70, 130, 180], label: 'leggings' },
+	{ color: [90, 140, 90], label: 'necklace' },
+	{ color: [50, 205, 50], label: 'neckwear' },
+	{ color: [220, 220, 220], label: 'outer' },
+	{ color: [211, 211, 211], label: 'pants' },
+	{ color: [50, 205, 174], label: 'ring' },
+	{ color: [185, 210, 205], label: 'rompers' },
+	{ color: [144, 238, 144], label: 'skin' },
+	{ color: [250, 235, 215], label: 'skirt' },
+	{ color: [160, 140, 88], label: 'socks' },
+	{ color: [225, 141, 151], label: 'tie' },
+	{ color: [255, 250, 250], label: 'top' },
+	{ color: [50, 155, 250], label: 'wrist wearing' }
+];
+
+// export const API = 'https://hf.space/embed/radames/Text2Human-API';
+export const API = 'https://hf.space/embed/CVPR/Text2Human';
+
+export const IMAGES_LIST = [
+	'/samples/MEN-Pants-id_00002565-02_1_front_segm.png',
+	'/samples/MEN-Pants-id_00005213-02_4_full_segm.png',
+	'/samples/WOMEN-Blouses_Shirts-id_00002356-02_4_full_segm.png',
+	'/samples/WOMEN-Blouses_Shirts-id_00004090-03_7_additional_segm.png',
+	'/samples/WOMEN-Cardigans-id_00000853-01_2_side_segm.png',
+	'/samples/WOMEN-Cardigans-id_00000899-02_1_front_segm.png',
+	'/samples/WOMEN-Cardigans-id_00006462-02_7_additional_segm.png',
+	'/samples/WOMEN-Dresses-id_00000021-05_1_front_segm.png',
+	'/samples/WOMEN-Dresses-id_00002430-04_1_front_segm.png',
+	'/samples/WOMEN-Dresses-id_00002966-01_7_additional_segm.png',
+	'/samples/WOMEN-Dresses-id_00007332-01_3_back_segm.png',
+	'/samples/WOMEN-Graphic_Tees-id_00007242-01_4_full_segm.png',
+	'/samples/WOMEN-Jackets_Coats-id_00005263-06_1_front_segm.png',
+	'/samples/WOMEN-Jackets_Coats-id_00006296-05_7_additional_segm.png',
+	'/samples/WOMEN-Rompers_Jumpsuits-id_00004575-02_1_front_segm.png',
+	'/samples/WOMEN-Skirts-id_00006761-01_1_front_segm.png',
+	'/samples/WOMEN-Sweaters-id_00004667-01_4_full_segm.png',
+	'/samples/WOMEN-Tees_Tanks-id_00001620-02_4_full_segm.png',
+	'/samples/WOMEN-Tees_Tanks-id_00005288-01_2_side_segm.png',
+	'/samples/WOMEN-Tees_Tanks-id_00006566-04_4_full_segm.png'
+];
+
+
+export const SECTIONS = [
+    "lower clothing texture",
+    "upper clothing texture",
+    "outer clothing texture"
+  ];
+
+export const TEXTURES = [
+    "pure color",
+    "stripe/spline",
+    "plaid/lattice",
+    "floral",
+    "denim"
+  ];

frontend/src/lib/BrushSelector.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	import { COLOR_LIST } from '../data';
+	import type { Brush, RGB } from '../types';
+	import { selectedBrush } from '$lib/store';
+
+	const STARTCOLORID = 6;
+	const { color, label } = COLOR_LIST[STARTCOLORID];
+
+	let brushColor: RGB = `rgb(${color.join(',')})` as RGB;
+	let brushSize: number = 40;
+	$selectedBrush = {
+		color: brushColor,
+		size: brushSize,
+		label
+	};
+	const submit = async (e: Event) => {
+		const target = e.target as HTMLInputElement;
+		if (target.name === 'color') {
+			const selectedId = parseInt(target.value);
+			const { color, label } = COLOR_LIST[selectedId];
+			brushColor = `rgb(${color.join(',')})` as RGB;
+			$selectedBrush = {
+				color: brushColor,
+				size: brushSize,
+				label
+			};
+		} else if (target.name === 'brush') {
+			brushSize = parseInt(target.value);
+			$selectedBrush = {
+				color: brushColor,
+				size: brushSize,
+				label
+			};
+		}
+	};
+</script>
+
+<form on:input={submit}>
+	<h4 class="font-bold mt-6 mb-2 leading-6 my-3">Set the Brush Type</h4>
+	<div class="colors" name="colors">
+		{#each COLOR_LIST as color, id}
+			<div class="snap-always snap-start">
+				<input name="color" checked={id == STARTCOLORID} type="radio" id="color-{id}" value={id} />
+				<label for="color-{id}">
+					<svg width="20" height="20" viewBox="0 0 20 20">
+						<rect x="0" y="0" width="20" height="20" fill="rgb({color.color.join(',')})" /></svg
+					>
+					<span>{color.label}</span>
+				</label>
+			</div>
+		{/each}
+	</div>
+	<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Set the Brush Size</h4>
+	<div class="brush">
+		<input value="10" min="1" max="50" step="1" name="brush" type="range" />
+		<label class="pl-2" for="brush">{$selectedBrush.size}</label>
+	</div>
+</form>
+
+<style lang="postcss" scoped>
+	.colors {
+		@apply grid grid-cols-2 sm:grid-cols-3 gap-2 max-h-[9rem] sm:max-h-[none] overflow-scroll snap-y snap-mandatory;
+	}
+	.colors span {
+		@apply ml-2;
+	}
+	.colors svg {
+		@apply block;
+	}
+	input[type='radio'] {
+		@apply opacity-0 w-0 h-0 absolute hidden;
+	}
+	input[type='radio']:active ~ label {
+	}
+	input[type='radio']:checked ~ label {
+		@apply outline outline-2 outline-yellow-500;
+	}
+	label {
+		@apply cursor-pointer flex transition-all duration-200 ease-in-out whitespace-nowrap
+			hover:outline outline-offset-[-2px] outline-2 outline-yellow-500;
+	}
+	.brush {
+		@apply flex;
+	}
+</style>

frontend/src/lib/DrawingCanvas.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+	import PxBrush from 'px-brush';
+	import { onMount } from 'svelte';
+	import type { Brush } from '../types';
+	import { selectedBrush, selectedImageBlob, currentCanvas } from '$lib/store';
+
+	let canvas: HTMLCanvasElement;
+	let brush: HTMLCanvasElement;
+
+	let brushCtx: CanvasRenderingContext2D;
+	let ctx: CanvasRenderingContext2D;
+	let pxBrush: PxBrush;
+	let startPosition: { x: number; y: number } = { x: 0, y: 0 };
+
+	$: {
+		if (brushCtx && $selectedBrush) {
+			setBrush($selectedBrush);
+			brush.style.top = `${10 + $selectedBrush.size / 2}px`;
+			brush.style.left = `${10 + $selectedBrush.size / 2}px`;
+		}
+	}
+	$: {
+		if ($selectedImageBlob) {
+			drawImage(ctx, $selectedImageBlob);
+		}
+	}
+	onMount(() => {
+		ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+		brushCtx = brush.getContext('2d') as CanvasRenderingContext2D;
+		window.devicePixelRatio = 1;
+		pxBrush = new PxBrush(canvas);
+		$currentCanvas = canvas;
+		clearCanvas(ctx);
+	});
+
+	const drawImage = (ctx: CanvasRenderingContext2D, blob: Blob) => {
+		const img = new Image();
+		img.onload = function () {
+			ctx.drawImage(img, 0, 0, ctx.canvas.width, ctx.canvas.height);
+		};
+		img.src = URL.createObjectURL(blob);
+	};
+
+	let mouseDown: boolean = false;
+	function pointerEnter() {
+		// brush.hidden = false;
+	}
+	function pointerOut() {
+		brush.style.top = `${10 + $selectedBrush.size / 2}px`;
+		brush.style.left = `${10 + $selectedBrush.size / 2}px`;
+		mouseDown = false;
+	}
+	function pointerDown(e: MouseEvent) {
+		mouseDown = true;
+		startPosition = getPosition(canvas, e);
+		pxBrush.draw({
+			from: startPosition,
+			to: startPosition,
+			size: $selectedBrush.size,
+			color: $selectedBrush.color
+		});
+	}
+	function pointerMove(e: MouseEvent) {
+		const position = getPosition(canvas, e);
+		brush.style.top = `${position.y}px`;
+		brush.style.left = `${position.x}px`;
+		if (!mouseDown) {
+			return;
+		}
+		pxBrush.draw({
+			from: startPosition,
+			to: position,
+			size: $selectedBrush.size,
+			color: $selectedBrush.color
+		});
+		startPosition = position;
+	}
+	function getPosition(canvas: HTMLCanvasElement, event: MouseEvent) {
+		const rect = canvas.getBoundingClientRect();
+		return {
+			x: event.clientX - rect.left,
+			y: event.clientY - rect.top
+		};
+	}
+	function setBrush(sBrush: Brush) {
+		const { size, color } = sBrush;
+		brush.width = size;
+		brush.height = size;
+		// brushCtx.clearRect(0, 0, brush.width, brush.height);
+		// brushCtx.beginPath();
+		brushCtx.fillStyle = color;
+		brushCtx.arc(size / 2, size / 2, size / 2, 0, 2 * Math.PI);
+		brushCtx.fill();
+	}
+
+	function clearCanvas(ctx: CanvasRenderingContext2D) {
+		ctx.fillStyle = '000';
+		ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
+		ctx.fill();
+	}
+</script>
+
+<div class="inline-block relative overflow-clip">
+	<canvas
+		bind:this={canvas}
+		class="canvas"
+		width="256"
+		height="512"
+		on:touchmove={(e) => e.preventDefault()}
+		on:pointerenter={pointerEnter}
+		on:pointerup={pointerOut}
+		on:pointerleave={pointerOut}
+		on:pointercancel={pointerOut}
+		on:pointerout={pointerOut}
+		on:pointermove={pointerMove}
+		on:pointerdown={pointerDown}
+	/>
+	<canvas bind:this={brush} class="brush" width="10" height="10" />
+	<span class="label">{$selectedBrush?.label} </span>
+</div>
+
+<style lang="postcss" scoped>
+	.canvas {
+		@apply box-border z-0 border dark:border-gray-300 border-gray-500 aspect-[256/512];
+	}
+	.brush {
+		@apply z-10 absolute pointer-events-none -translate-x-1/2 -translate-y-1/2;
+	}
+	.label {
+		@apply px-2 text-base z-20 absolute top-0 left-0 pointer-events-none text-white select-none;
+		color: white;
+		font-weight: bolder;
+		-webkit-text-stroke: 1px black;
+		-webkit-text-fill-color: white;
+	}
+</style>

frontend/src/lib/ParamsSelector.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { SECTIONS, TEXTURES } from '../data';
+	import { selectedParams, generateHuman } from '$lib/store';
+	import type { FormElements } from '../types';
+	import { randomSeed } from '$lib/utils';
+	const submit = () => {
+		const elements: FormElements = form.elements as FormElements;
+		$selectedParams = {
+			texture: `${elements.texture0.value},${elements.texture1.value},${elements.texture2.value}`,
+			seed: BigInt(elements.seed.value),
+			steps: parseInt(elements.steps.value)
+		};
+	};
+
+	let form: HTMLFormElement;
+	let seed: bigint = $selectedParams.seed;
+	let sampleSteps: number = $selectedParams.steps;
+</script>
+
+<form bind:this={form} on:input={submit}>
+	<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Texture Description</h4>
+	<div class="sections">
+		{#each SECTIONS as section, i}
+			<select name="texture{i}" disabled={$generateHuman === true}>
+				<option disabled selected>{section}</option>
+				{#each TEXTURES as texture}
+					<option value={texture}>{texture}</option>`
+				{/each}
+			</select>
+		{/each}
+	</div>
+	<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Random Seed</h4>
+	<input
+		bind:value={seed}
+		type="Number"
+		name="seed"
+		placeholder="Integer Seed"
+		disabled={$generateHuman === true}
+	/>
+	<button on:click|preventDefault={() => (seed = randomSeed())} disabled={$generateHuman === true}>
+		Random
+	</button>
+	<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Sample Steps</h4>
+	<div class="flex">
+		<input
+			bind:value={sampleSteps}
+			type="range"
+			name="steps"
+			min="10"
+			max="300"
+			step="1"
+			disabled={$generateHuman === true}
+		/>
+		<label class="pl-2" for="steps">{sampleSteps}</label>
+	</div>
+</form>
+
+<style lang="postcss" scoped>
+	.sections {
+		@apply flex sm:flex-row flex-col gap-1 sm:gap-3;
+	}
+	select,
+	button,
+	input {
+		@apply p-1 disabled:opacity-50 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
+	}
+	input:disabled + label {
+		@apply opacity-50;
+	}
+	input {
+		@apply pl-3;
+	}
+</style>

frontend/src/lib/ResultCanvas.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	let canvas: HTMLCanvasElement;
+	import { API } from '../data';
+	import { nanoid } from 'nanoid';
+	import type { Params } from '../types';
+
+	import {
+		selectedParams,
+		generateHuman,
+		currentCanvas,
+		resultImage,
+		saveResult
+	} from '$lib/store';
+
+	$: (async () => {
+		if ($generateHuman) {
+			const results = await predict($currentCanvas.toDataURL(), $selectedParams);
+			if (results) {
+				$resultImage = results.data[0];
+			}
+			$generateHuman = false;
+		}
+	})();
+
+	$: (async () => {
+		if ($saveResult) {
+			const results = await saveImage($resultImage);
+			$saveResult = false;
+		}
+	})();
+
+	let predictStatus: string = '';
+	async function saveImage(base64Image: string) {
+		return new Promise((resolve, reject) => {
+			try {
+				const a = document.createElement('a');
+				a.download = `sucess-${Date.now()}.png`;
+				a.target = '_self';
+				a.onclick = async (e) => {
+					if (a.href) {
+						URL.revokeObjectURL(a.href);
+					}
+					a.href = base64Image;
+				};
+				a.click();
+				resolve(null);
+				console.log('Downloading image.');
+			} catch (err) {
+				reject();
+			}
+		});
+	}
+	async function predict(base64Image: string, { texture, steps, seed }: Params) {
+		const session = nanoid(11);
+		let hash, queue_position;
+		let b = 0;
+		predictStatus = 'Generating';
+		const controller = new AbortController();
+		// invalidation.then(() => {
+		// 	controller.abort();
+		// });
+		await fetch(API + '/api/queue/push/', {
+			signal: controller.signal,
+			headers: { 'Content-Type': 'application/json' },
+			method: 'POST',
+			body: JSON.stringify({
+				fn_index: 2,
+				data: [base64Image, texture, steps, Number(seed)],
+				action: 'predict',
+				session_hash: session
+			})
+		})
+			.then(async (res) => {
+				const data = await res.json();
+				({ hash, queue_position } = data);
+			})
+			.catch((err) => {
+				console.log(err);
+			});
+
+		let timeout = 0;
+		let status, data;
+		while (status !== 'QUEUED' || status !== 'PENDING') {
+			try {
+				const resp = await fetch(API + '/api/queue/status/', {
+					signal: controller.signal,
+					headers: { 'Content-Type': 'application/json' },
+					method: 'POST',
+					body: JSON.stringify({ hash: hash })
+				});
+				if (resp.status != 200) {
+					break;
+				}
+				({ status, data } = await resp.json());
+				if (status === 'QUEUED') {
+					predictStatus = `Queue ${data}/${queue_position}`;
+				} else if (status === 'PENDING') {
+					predictStatus = 'Pending';
+				} else if (status === 'FAILED') {
+					predictStatus = 'Failed';
+					break;
+				} else if (status === 'COMPLETE') {
+					predictStatus = 'Complete';
+					break;
+				}
+				await new Promise((resolve) => setTimeout(resolve, 1000));
+			} catch (error) {
+				console.log(error);
+				break;
+			}
+		}
+		return data;
+	}
+</script>
+
+{#if $resultImage}
+	<div class="inline-block relative overflow-clip">
+		<img class="image" alt="Generative Human Result" src={$resultImage} width="256" height="512" />
+	</div>
+{/if}
+
+<style lang="postcss" scoped>
+	.image {
+		@apply max-w-none box-border z-0 border dark:border-gray-300 border-gray-500 aspect-[256/512];
+	}
+</style>

frontend/src/lib/TemplateGallery.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	import { IMAGES_LIST } from '../data';
+	import { selectedImageBlob, generateHuman } from '$lib/store';
+	import { base } from '$app/paths';
+
+	const submit = async (e: Event) => {
+		e.preventDefault();
+		const src = IMAGES_LIST[parseInt((e.target as HTMLInputElement).value)];
+		if (src) {
+			const blob = await fetch(base + src).then((res) => res.blob());
+			$selectedImageBlob = blob;
+		}
+	};
+</script>
+
+<div>
+	<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Select a Template</h4>
+	<form on:input={submit}>
+		<div class="samples ">
+			{#each IMAGES_LIST as file_name, id}
+				<div class="snap-always snap-start">
+					<input
+						type="radio"
+						name="samples"
+						id="sample-{id}"
+						value={id}
+						disabled={$generateHuman === true}
+					/>
+					<label for="sample-{id}">
+						<img src={base + file_name} alt={file_name} />
+					</label>
+				</div>
+			{/each}
+		</div>
+	</form>
+</div>
+
+<style lang="postcss" scoped>
+	form {
+		@apply overflow-hidden w-full;
+	}
+	.samples {
+		@apply flex overflow-x-scroll flex-nowrap snap-x snap-mandatory gap-1 scrollbar-hide;
+	}
+	input[type='radio'] {
+		@apply disabled:opacity-50 opacity-0 w-0 h-0 absolute hidden;
+	}
+	input[type='radio']:active ~ label {
+	}
+	input[type='radio']:checked ~ label {
+		@apply outline outline-2 outline-yellow-500;
+	}
+	input[type='radio']:disabled + label {
+		@apply opacity-50;
+	}
+	label {
+		@apply cursor-pointer flex transition-all duration-200 ease-in-out
+			hover:outline outline-offset-[-2px] outline-2 outline-yellow-500;
+	}
+	img {
+		@apply max-h-24 max-w-none;
+	}
+</style>

frontend/src/lib/store.ts

@@ -0,0 +1,16 @@
+import { writable } from 'svelte/store';
+import type { Brush, Params } from '../types';
+import { randomSeed } from '$lib/utils';
+
+export const resultImage = writable<string>();
+export const currentCanvas = writable<HTMLCanvasElement>();
+export const selectedImageBlob = writable<Blob>();
+export const selectedBrush = writable<Brush>();
+export const selectedParams = writable<Params>({
+	texture: '',
+	seed: randomSeed(),
+	steps: 10
+});
+
+export const generateHuman = writable<boolean>(false);
+export const saveResult = writable<boolean>(false);

frontend/src/lib/utils.ts

@@ -0,0 +1,3 @@
+export function randomSeed() {
+	return BigInt(13248873089935215612 & (((1 << 63) - 1) * Math.random()));
+}

frontend/src/routes/__layout.svelte

@@ -0,0 +1,5 @@
+<script>
+	import '../app.css';
+</script>
+
+<slot />

frontend/src/routes/index.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+	import TemplateGallery from '$lib/TemplateGallery.svelte';
+	import BrushSelector from '$lib/BrushSelector.svelte';
+	import ParamSelector from '$lib/ParamsSelector.svelte';
+	import DrawingCanvas from '$lib/DrawingCanvas.svelte';
+	import ResultCanvas from '$lib/ResultCanvas.svelte';
+	import { generateHuman, saveResult, resultImage } from '$lib/store';
+
+	let results = false;
+</script>
+
+<div class="max-w-screen-md mx-auto px-3 py-5 relative z-0">
+	<article class="prose dark:prose-invert">
+		<h1>Drawings to Human</h1>
+		<p>
+			This is an unofficial drawing tool to explore the generative human generator <a
+				href="https://github.com/yumingj/Text2Human"
+				target="_blank"><span>Text2Human</span></a
+			>. Please check all the model features on this
+			<a href="https://huggingface.co/spaces/CVPR/Text2Human" target="_blank">Space</a>.
+		</p>
+		<small>
+			<h4 id="thanks-to">Thanks to</h4>
+			<p>
+				Authors: <a href="https://yumingj.github.io/" target="_blank">Yuming Jiang</a>,
+				<a href="https://williamyang1991.github.io/" target="_blank">Shuai Yang</a>,
+				<a href="http://haonanqiu.com/" target="_blank">Haonan Qiu</a>,
+				<a href="https://wywu.github.io/" target="_blank">Wayne Wu</a>,
+				<a href="https://www.mmlab-ntu.com/person/ccloy/" target="_blank">Chen Change Loy</a>
+				and <a href="https://liuziwei7.github.io/" target="_blank">Ziwei Liu</a><br />
+			</p>
+			<p>
+				<a href="https://huggingface.co/hysts" target="_blank">@hysts</a> for the original Space implementation
+			</p>
+		</small>
+		<details open>
+			<summary class="cursor-pointer"> <small>More</small> </summary>
+			<p>
+				The backend is powered by a <a href="https://gradio.app/" target="_blank">Gradio</a>
+				application running on
+				<a href="https://huggingface.co/spaces/CVPR/Text2Human" target="_blank">Spaces</a>. You can
+				also check the source code and clone it locally if you want:
+			</p>
+
+			<p>
+				<code class="block whitespace-pre overflow-x-scroll">
+					git clone https://huggingface.co/spaces/CVPR/Text2Human
+				</code>
+			</p>
+		</details>
+	</article>
+	<BrushSelector />
+	<TemplateGallery />
+	<div class="drawings py-3">
+		<DrawingCanvas />
+		<!-- {#if results} -->
+		<ResultCanvas />
+		<!-- {/if} -->
+	</div>
+	<button
+		on:click|preventDefault={() => ($generateHuman = true)}
+		disabled={$generateHuman === true}
+	>
+		Generate Human
+	</button>
+	<button
+		on:click|preventDefault={() => ($saveResult = true)}
+		disabled={$saveResult === true || !$resultImage}
+	>
+		Save Result
+	</button>
+	<ParamSelector />
+</div>
+
+<style lang="postcss" scoped>
+	.drawings {
+		@apply grid grid-cols-1 sm:grid-cols-2 place-items-center;
+	}
+	button {
+		@apply p-1 disabled:opacity-50 bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500;
+	}
+</style>

frontend/src/types.ts

@@ -0,0 +1,24 @@
+export interface Color {
+	color: number[];
+	label: string;
+}
+export type RGB = `rgb(${number},${number},${number})`;
+export interface Brush {
+	color: RGB;
+	size: number;
+	label: string;
+}
+
+export interface Params {
+	texture: string;
+	seed: bigint;
+	steps: number;
+}
+
+export interface FormElements extends HTMLCollection {
+	seed: HTMLInputElement;
+	steps: HTMLInputElement;
+	texture0: HTMLInputElement;
+	texture1: HTMLInputElement;
+	texture2: HTMLInputElement;
+}

frontend/static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow: