Hugging Face's logo

Spaces:
CVPR
/
drawings-to-human
Build error

App Files Community
1
drawings-to-human / static /index.html
radames's picture
radames HF staff
static fix base path
05486b3 unverified
raw history blame contribute delete
No virus
22.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="/static/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>
<meta http-equiv="content-security-policy" content="">
<link rel="stylesheet" href="/static/_app/immutable/assets/pages/__layout.svelte-cc9dd261.css">
<link rel="stylesheet" href="/static/_app/immutable/assets/pages/index.svelte-7bf249dc.css">
<link rel="modulepreload" href="/static/_app/immutable/start-62e3dfe2.js">
<link rel="modulepreload" href="/static/_app/immutable/chunks/index-bcf2726a.js">
<link rel="modulepreload" href="/static/_app/immutable/chunks/paths-d3bcbd10.js">
<link rel="modulepreload" href="/static/_app/immutable/pages/__layout.svelte-d07d8fed.js">
<link rel="modulepreload" href="/static/_app/immutable/pages/index.svelte-b5d75a5f.js">
</head>
<body class="dark:bg-[rgb(11,15,25)] bg-white dark:text-white text-black">
<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><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>
<form><h4 class="font-bold mt-6 mb-2 leading-6 my-3">Set the Brush Type</h4>
<div class="colors svelte-1oy4poo" name="colors"><div class="snap-always snap-start"><input name="color" type="radio" id="color-0" value="0" class="svelte-1oy4poo">
<label for="color-0" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(0,0,0)"></rect></svg>
<span class="svelte-1oy4poo">background</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-1" value="1" class="svelte-1oy4poo">
<label for="color-1" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(255,140,0)"></rect></svg>
<span class="svelte-1oy4poo">bag</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-2" value="2" class="svelte-1oy4poo">
<label for="color-2" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(255,255,0)"></rect></svg>
<span class="svelte-1oy4poo">belt</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-3" value="3" class="svelte-1oy4poo">
<label for="color-3" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(255,250,205)"></rect></svg>
<span class="svelte-1oy4poo">dress</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-4" value="4" class="svelte-1oy4poo">
<label for="color-4" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(130,165,180)"></rect></svg>
<span class="svelte-1oy4poo">earrings</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-5" value="5" class="svelte-1oy4poo">
<label for="color-5" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(0,100,0)"></rect></svg>
<span class="svelte-1oy4poo">eyeglass</span></label>
</div><div class="snap-always snap-start"><input name="color" checked type="radio" id="color-6" value="6" class="svelte-1oy4poo">
<label for="color-6" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(16,78,139)"></rect></svg>
<span class="svelte-1oy4poo">face</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-7" value="7" class="svelte-1oy4poo">
<label for="color-7" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(245,222,179)"></rect></svg>
<span class="svelte-1oy4poo">footwear</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-8" value="8" class="svelte-1oy4poo">
<label for="color-8" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(213,140,88)"></rect></svg>
<span class="svelte-1oy4poo">gloves</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-9" value="9" class="svelte-1oy4poo">
<label for="color-9" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(255,0,0)"></rect></svg>
<span class="svelte-1oy4poo">hair</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-10" value="10" class="svelte-1oy4poo">
<label for="color-10" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(127,255,212)"></rect></svg>
<span class="svelte-1oy4poo">headwear</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-11" value="11" class="svelte-1oy4poo">
<label for="color-11" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(70,130,180)"></rect></svg>
<span class="svelte-1oy4poo">leggings</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-12" value="12" class="svelte-1oy4poo">
<label for="color-12" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(90,140,90)"></rect></svg>
<span class="svelte-1oy4poo">necklace</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-13" value="13" class="svelte-1oy4poo">
<label for="color-13" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(50,205,50)"></rect></svg>
<span class="svelte-1oy4poo">neckwear</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-14" value="14" class="svelte-1oy4poo">
<label for="color-14" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(220,220,220)"></rect></svg>
<span class="svelte-1oy4poo">outer</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-15" value="15" class="svelte-1oy4poo">
<label for="color-15" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(211,211,211)"></rect></svg>
<span class="svelte-1oy4poo">pants</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-16" value="16" class="svelte-1oy4poo">
<label for="color-16" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(50,205,174)"></rect></svg>
<span class="svelte-1oy4poo">ring</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-17" value="17" class="svelte-1oy4poo">
<label for="color-17" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(185,210,205)"></rect></svg>
<span class="svelte-1oy4poo">rompers</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-18" value="18" class="svelte-1oy4poo">
<label for="color-18" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(144,238,144)"></rect></svg>
<span class="svelte-1oy4poo">skin</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-19" value="19" class="svelte-1oy4poo">
<label for="color-19" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(250,235,215)"></rect></svg>
<span class="svelte-1oy4poo">skirt</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-20" value="20" class="svelte-1oy4poo">
<label for="color-20" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(160,140,88)"></rect></svg>
<span class="svelte-1oy4poo">socks</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-21" value="21" class="svelte-1oy4poo">
<label for="color-21" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(225,141,151)"></rect></svg>
<span class="svelte-1oy4poo">tie</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-22" value="22" class="svelte-1oy4poo">
<label for="color-22" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(255,250,250)"></rect></svg>
<span class="svelte-1oy4poo">top</span></label>
</div><div class="snap-always snap-start"><input name="color" type="radio" id="color-23" value="23" class="svelte-1oy4poo">
<label for="color-23" class="svelte-1oy4poo"><svg width="20" height="20" viewBox="0 0 20 20" class="svelte-1oy4poo"><rect x="0" y="0" width="20" height="20" fill="rgb(50,155,250)"></rect></svg>
<span class="svelte-1oy4poo">wrist wearing</span></label>
</div></div>
<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Set the Brush Size</h4>
<div class="brush svelte-1oy4poo"><input value="10" min="1" max="50" step="1" name="brush" type="range">
<label class="pl-2 svelte-1oy4poo" for="brush">40</label></div>
</form>
<div><h4 class="font-bold mt-6 mb-2 my-6 leading-6">Select a Template</h4>
<form class="svelte-1gwcbp"><div class="samples svelte-1gwcbp"><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-0" value="0" class="svelte-1gwcbp">
<label for="sample-0" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Skirts-id_00004406-02_7_additional_segm.png" alt="/samples/WOMEN-Skirts-id_00004406-02_7_additional_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-1" value="1" class="svelte-1gwcbp">
<label for="sample-1" class="svelte-1gwcbp"><img src="/static/samples/MEN-Pants-id_00002565-02_1_front_segm.png" alt="/samples/MEN-Pants-id_00002565-02_1_front_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-2" value="2" class="svelte-1gwcbp">
<label for="sample-2" class="svelte-1gwcbp"><img src="/static/samples/MEN-Pants-id_00005213-02_4_full_segm.png" alt="/samples/MEN-Pants-id_00005213-02_4_full_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-3" value="3" class="svelte-1gwcbp">
<label for="sample-3" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Blouses_Shirts-id_00002356-02_4_full_segm.png" alt="/samples/WOMEN-Blouses_Shirts-id_00002356-02_4_full_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-4" value="4" class="svelte-1gwcbp">
<label for="sample-4" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Blouses_Shirts-id_00004090-03_7_additional_segm.png" alt="/samples/WOMEN-Blouses_Shirts-id_00004090-03_7_additional_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-5" value="5" class="svelte-1gwcbp">
<label for="sample-5" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Cardigans-id_00000853-01_2_side_segm.png" alt="/samples/WOMEN-Cardigans-id_00000853-01_2_side_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-6" value="6" class="svelte-1gwcbp">
<label for="sample-6" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Cardigans-id_00000899-02_1_front_segm.png" alt="/samples/WOMEN-Cardigans-id_00000899-02_1_front_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-7" value="7" class="svelte-1gwcbp">
<label for="sample-7" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Cardigans-id_00006462-02_7_additional_segm.png" alt="/samples/WOMEN-Cardigans-id_00006462-02_7_additional_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-8" value="8" class="svelte-1gwcbp">
<label for="sample-8" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Dresses-id_00000021-05_1_front_segm.png" alt="/samples/WOMEN-Dresses-id_00000021-05_1_front_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-9" value="9" class="svelte-1gwcbp">
<label for="sample-9" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Dresses-id_00002430-04_1_front_segm.png" alt="/samples/WOMEN-Dresses-id_00002430-04_1_front_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-10" value="10" class="svelte-1gwcbp">
<label for="sample-10" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Dresses-id_00002966-01_7_additional_segm.png" alt="/samples/WOMEN-Dresses-id_00002966-01_7_additional_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-11" value="11" class="svelte-1gwcbp">
<label for="sample-11" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Dresses-id_00007332-01_3_back_segm.png" alt="/samples/WOMEN-Dresses-id_00007332-01_3_back_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-12" value="12" class="svelte-1gwcbp">
<label for="sample-12" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Graphic_Tees-id_00007242-01_4_full_segm.png" alt="/samples/WOMEN-Graphic_Tees-id_00007242-01_4_full_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-13" value="13" class="svelte-1gwcbp">
<label for="sample-13" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Jackets_Coats-id_00005263-06_1_front_segm.png" alt="/samples/WOMEN-Jackets_Coats-id_00005263-06_1_front_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-14" value="14" class="svelte-1gwcbp">
<label for="sample-14" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Jackets_Coats-id_00006296-05_7_additional_segm.png" alt="/samples/WOMEN-Jackets_Coats-id_00006296-05_7_additional_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-15" value="15" class="svelte-1gwcbp">
<label for="sample-15" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Rompers_Jumpsuits-id_00004575-02_1_front_segm.png" alt="/samples/WOMEN-Rompers_Jumpsuits-id_00004575-02_1_front_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-16" value="16" class="svelte-1gwcbp">
<label for="sample-16" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Sweaters-id_00004667-01_4_full_segm.png" alt="/samples/WOMEN-Sweaters-id_00004667-01_4_full_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-17" value="17" class="svelte-1gwcbp">
<label for="sample-17" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Tees_Tanks-id_00001620-02_4_full_segm.png" alt="/samples/WOMEN-Tees_Tanks-id_00001620-02_4_full_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-18" value="18" class="svelte-1gwcbp">
<label for="sample-18" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Tees_Tanks-id_00005288-01_2_side_segm.png" alt="/samples/WOMEN-Tees_Tanks-id_00005288-01_2_side_segm.png" class="svelte-1gwcbp"></label>
</div><div class="snap-always snap-start"><input type="radio" name="samples" id="sample-19" value="19" class="svelte-1gwcbp">
<label for="sample-19" class="svelte-1gwcbp"><img src="/static/samples/WOMEN-Tees_Tanks-id_00006566-04_4_full_segm.png" alt="/samples/WOMEN-Tees_Tanks-id_00006566-04_4_full_segm.png" class="svelte-1gwcbp"></label>
</div></div></form>
</div>
<div class="drawings py-3 -mx-3 svelte-237ry5"><div><div class="relative overflow-clip"><canvas class="canvas svelte-1k5plc8" width="256" height="512"></canvas>
<canvas class="brush svelte-1k5plc8" width="10" height="10"></canvas>
<span class="label svelte-1k5plc8">face</span>
<button class="absolute bottom-0 left-0 p-3" disabled><svg xmlns="http://www.w3.org/2000/svg" width="20" viewBox="0 0 512 512" class=""><path fill="white" stroke="black" stroke-width="30" d="M480 256c0 123.4-100.5 223.9-223.9 223.9c-48.84 0-95.17-15.58-134.2-44.86c-14.12-10.59-16.97-30.66-6.375-44.81c10.59-14.12 30.62-16.94 44.81-6.375c27.84 20.91 61 31.94 95.88 31.94C344.3 415.8 416 344.1 416 256s-71.69-159.8-159.8-159.8c-37.46 0-73.09 13.49-101.3 36.64l45.12 45.14c17.01 17.02 4.955 46.1-19.1 46.1H35.17C24.58 224.1 16 215.5 16 204.9V59.04c0-24.04 29.07-36.08 46.07-19.07l47.6 47.63C149.9 52.71 201.5 32.11 256.1 32.11C379.5 32.11 480 132.6 480 256z"></path></svg></button></div>
</div>
<div class="relative overflow-clip flex flex-col justify-center items-center w-full h-full">
</div>
</div>
<button class="svelte-237ry5">Generate Human
</button>
<button disabled class="svelte-237ry5">Save Result
</button>
<form><h4 class="font-bold mt-6 mb-2 my-6 leading-6">Texture Description</h4>
<div class="sections svelte-uoay71"><select name="texture0" class="svelte-uoay71"><option disabled selected value="upper clothing texture">upper clothing texture</option><option value="pure color">pure color</option>`<option value="stripe/spline">stripe/spline</option>`<option value="plaid/lattice">plaid/lattice</option>`<option value="floral">floral</option>`<option value="denim">denim</option>`</select><select name="texture1" class="svelte-uoay71"><option disabled selected value="lower clothing texture">lower clothing texture</option><option value="pure color">pure color</option>`<option value="stripe/spline">stripe/spline</option>`<option value="plaid/lattice">plaid/lattice</option>`<option value="floral">floral</option>`<option value="denim">denim</option>`</select><select name="texture2" class="svelte-uoay71"><option disabled selected value="outer clothing texture">outer clothing texture</option><option value="pure color">pure color</option>`<option value="stripe/spline">stripe/spline</option>`<option value="plaid/lattice">plaid/lattice</option>`<option value="floral">floral</option>`<option value="denim">denim</option>`</select></div>
<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Random Seed</h4>
<input type="Number" name="seed" placeholder="Integer Seed" class="svelte-uoay71" value="861014016">
<button class="svelte-uoay71">Random
</button>
<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Sample Steps</h4>
<div class="flex"><input type="range" name="steps" min="10" max="300" step="1" class="svelte-uoay71" value="10">
<label class="pl-2 svelte-uoay71" for="steps">10</label></div>
</form>
</div>
<script type="module" data-sveltekit-hydrate="1lpy11h">
import { start } from "/static/_app/immutable/start-62e3dfe2.js";
start({
target: document.querySelector('[data-sveltekit-hydrate="1lpy11h"]').parentNode,
paths: {"base":"/static","assets":"/static"},
session: {},
route: true,
spa: false,
trailing_slash: "never",
hydrate: {
status: 200,
error: null,
nodes: [0, 2],
params: {},
routeId: ""
}
});
</script>
</body>
</html>