Hugging Face's logo

Spaces:
rgres
/
Drawing2Sat
Runtime error

App Files Community
Drawing2Sat
File size: 12,541 Bytes 
ec3efd7
 
 
 
 
 
 
 
b7b124d
 
e131ab5
ec3efd7
 
b7b124d
 
ec3efd7
b7b124d
ec3efd7
 
 
b7b124d
ec3efd7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b7b124d
 
 
ec3efd7
 
 
 
 
 
 
b7b124d
ec3efd7
 
b7b124d
ec3efd7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b7b124d
 
 
 
 
ec3efd7
 
e131ab5
b7b124d
ec3efd7
 
b7b124d
 
ec3efd7
 
 
 
e131ab5
 
ec3efd7
e131ab5
ec3efd7
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
 
<!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-b67cf61d.css">
	<link rel="stylesheet" href="/static/_app/immutable/assets/pages/index.svelte-f2b33456.css">
	<link rel="modulepreload" href="/static/_app/immutable/start-98e2fb1a.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-f5a1b718.js">
	<link rel="modulepreload" href="/static/_app/immutable/pages/index.svelte-23c1124b.js">
	</head>
	<body class="">
		


<div class="max-w-screen-md mx-auto px-3 py-5 relative z-0"><article class="prose"><h1>Drawing to Map</h1></article>
	<form><h4 class="font-bold mt-6 mb-2 leading-6 my-3">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(219,14,154)"></rect></svg>
					<span class="svelte-1oy4poo">building</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(147,142,123)"></rect></svg>
					<span class="svelte-1oy4poo">pervious surface</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(248,12,0)"></rect></svg>
					<span class="svelte-1oy4poo">impervious surface</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(169,113,1)"></rect></svg>
					<span class="svelte-1oy4poo">bare soil</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(21,83,174)"></rect></svg>
					<span class="svelte-1oy4poo">water</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(25,74,38)"></rect></svg>
					<span class="svelte-1oy4poo">coniferous</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(70,228,131)"></rect></svg>
					<span class="svelte-1oy4poo">deciduous</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(243,166,13)"></rect></svg>
					<span class="svelte-1oy4poo">brushwood</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(102,0,130)"></rect></svg>
					<span class="svelte-1oy4poo">vineyard</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(85,255,0)"></rect></svg>
					<span class="svelte-1oy4poo">herbaceous vegetation</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(255,243,13)"></rect></svg>
					<span class="svelte-1oy4poo">agricultural land</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(228,223,124)"></rect></svg>
					<span class="svelte-1oy4poo">plowed land</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(61,230,235)"></rect></svg>
					<span class="svelte-1oy4poo">swimming pool</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(255,255,255)"></rect></svg>
					<span class="svelte-1oy4poo">snow</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(138,179,160)"></rect></svg>
					<span class="svelte-1oy4poo">clear cut</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(107,113,79)"></rect></svg>
					<span class="svelte-1oy4poo">mixed</span></label>
			</div></div>
	<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Brush Size</h4>
	<div class="brush svelte-1oy4poo"><input value="10" min="1" max="150" step="1" name="brush" type="range">
		<label class="pl-2 svelte-1oy4poo" for="brush">40</label></div>
</form>
	<div class="drawings py-3 -mx-3 svelte-1sy339h"><div><div class="relative overflow-clip"><canvas class="canvas svelte-vhujxn" width="512" height="512"></canvas>
		<canvas class="brush svelte-vhujxn" width="10" height="10"></canvas>
		<span class="label svelte-vhujxn">deciduous</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="green svelte-1sy339h">Generate Map
	</button>

	<button disabled class="svelte-1sy339h">Save Result
	</button>

	<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/example0.png" alt="/samples/example0.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/example1.png" alt="/samples/example1.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/example2.png" alt="/samples/example2.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/example3.png" alt="/samples/example3.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/example4.png" alt="/samples/example4.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/example5.png" alt="/samples/example5.png" class="svelte-1gwcbp"></label>
				</div></div></form>
</div>

	<form><h4 class="font-bold mt-6 mb-2 my-6 leading-6">Prompt</h4>
	<input name="prompt" placeholder="Aerial view of ..., France."  style="width: 500px;" class="svelte-7to72y" value="Aerial view of rue des Lilas, Toulouse, Haute-Garonne, France">

	<h4 class="font-bold mt-6 mb-2 my-6 leading-6">Modifier</h4>
	<input name="modifier" placeholder="High resolution satellite image"  style="width: 500px;" class="svelte-7to72y" value="High resolution satellite image, 4K, ultra detailed">
	<select name="presets"  class="svelte-7to72y"><option disabled selected value="preset">preset</option><option value="High resolution satellite image, 4K, ultra detailed">Realistic</option>`<option value="Colorful lego bricks">Lego brick</option>`<option value="Black and white paper pencil drawing">Pencil</option>`<option value="Oil on canvas painting">Painting</option>`</select>

	<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-7to72y" value="381681664">
	<button  class="svelte-7to72y">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="30" step="1"  class="svelte-7to72y" value="20">
		<label class="pl-2 svelte-7to72y" for="steps">20</label></div>
</form>
</div>


		<script type="module" data-sveltekit-hydrate="1mohz4s">
		import { start } from "/static/_app/immutable/start-98e2fb1a.js";
		start({
			target: document.querySelector('[data-sveltekit-hydrate="1mohz4s"]').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>