Spaces:
Runtime error
Runtime error
design improvements
Browse files
frontend/src/lib/ColorPalette.svelte
CHANGED
@@ -1,17 +1,29 @@
|
|
1 |
<script lang="ts">
|
2 |
import type { Color } from 'd3-color';
|
|
|
3 |
|
4 |
export let colors: Color[];
|
5 |
const n = colors.length;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
6 |
</script>
|
7 |
|
8 |
<div class="flex flex-col items-center">
|
9 |
<div class="flex bg-black">
|
10 |
{#each colors as color}
|
11 |
-
<div class="aspect-square">
|
12 |
<svg class="max-w-full" width="100" viewBox="0 0 50 50">
|
13 |
-
<rect x="0" y="0" width="50" height="50" fill={color.
|
14 |
</svg>
|
|
|
|
|
|
|
|
|
15 |
</div>
|
16 |
{/each}
|
17 |
</div>
|
|
|
1 |
<script lang="ts">
|
2 |
import type { Color } from 'd3-color';
|
3 |
+
import * as d3 from 'd3-color';
|
4 |
|
5 |
export let colors: Color[];
|
6 |
const n = colors.length;
|
7 |
+
function getLabelColor(c: Color): string {
|
8 |
+
const color = d3.hcl(c);
|
9 |
+
if (color.l > 50) {
|
10 |
+
return d3.hcl(color.h, color.c, 0).formatHex();
|
11 |
+
}
|
12 |
+
return d3.hcl(color.h, color.c, 100).formatHex();
|
13 |
+
}
|
14 |
</script>
|
15 |
|
16 |
<div class="flex flex-col items-center">
|
17 |
<div class="flex bg-black">
|
18 |
{#each colors as color}
|
19 |
+
<div class="aspect-square relative">
|
20 |
<svg class="max-w-full" width="100" viewBox="0 0 50 50">
|
21 |
+
<rect x="0" y="0" width="50" height="50" fill={color.formatHex()} />
|
22 |
</svg>
|
23 |
+
<span
|
24 |
+
class="absolute bottom-0 text-center text-xs pl-1 font-bold uppercase"
|
25 |
+
style="color:{getLabelColor(color)}">{color.formatHex()}</span
|
26 |
+
>
|
27 |
</div>
|
28 |
{/each}
|
29 |
</div>
|
frontend/src/lib/Palette.svelte
CHANGED
@@ -11,20 +11,19 @@
|
|
11 |
$: imageSrc = promptData.images[seletecdImage].imgURL;
|
12 |
</script>
|
13 |
|
14 |
-
<div class="grid grid-cols-
|
15 |
<blockquote
|
16 |
-
class="col-span-
|
17 |
title={prompt}
|
18 |
>
|
19 |
<p>{prompt}</p>
|
20 |
</blockquote>
|
21 |
-
|
22 |
-
<div class="row-start-2 col-span-3 flex items-center justify-center">
|
23 |
<ColorPalette {colors} />
|
24 |
</div>
|
25 |
-
<div class="row-start-2 col-
|
26 |
<div class="relative">
|
27 |
-
<img class="relative max-w-[100px]" src={imageSrc} alt={prompt} />
|
28 |
<div class="absolute flex justify-around w-full">
|
29 |
{#each promptData.images as image, i}
|
30 |
<button
|
@@ -38,12 +37,18 @@
|
|
38 |
</div>
|
39 |
</div>
|
40 |
</div>
|
41 |
-
|
42 |
-
|
43 |
-
|
44 |
-
|
45 |
-
|
46 |
-
|
47 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
48 |
</div>
|
49 |
</div>
|
|
|
11 |
$: imageSrc = promptData.images[seletecdImage].imgURL;
|
12 |
</script>
|
13 |
|
14 |
+
<div class="grid grid-cols-6 gap-3">
|
15 |
<blockquote
|
16 |
+
class="row-start-1 mx-auto col-span-6 italic font-semibold max-w-prose text-base text-center line-clamp-3 my-3"
|
17 |
title={prompt}
|
18 |
>
|
19 |
<p>{prompt}</p>
|
20 |
</blockquote>
|
21 |
+
<div class="row-start-3 md:row-start-2 col-span-6 md:col-span-4 flex items-center justify-center">
|
|
|
22 |
<ColorPalette {colors} />
|
23 |
</div>
|
24 |
+
<div class="row-start-2 col-span-6 md:col-span-2 flex justify-center pb-3">
|
25 |
<div class="relative">
|
26 |
+
<img class="relative max-w-[100px] w-full" src={imageSrc} alt={prompt} />
|
27 |
<div class="absolute flex justify-around w-full">
|
28 |
{#each promptData.images as image, i}
|
29 |
<button
|
|
|
37 |
</div>
|
38 |
</div>
|
39 |
</div>
|
40 |
+
<div class="row-start-4 col-span-6 md:col-span-2 md:col-start-5 flex justify-center">
|
41 |
+
<div class="flex justify-center items-center">
|
42 |
+
<button
|
43 |
+
class="bg-black text-white border-2 dark:border-white border-black rounded-2xl ml-2 px-2 py-2 shadow-sm text-xs font-bold focus:outline-none focus:border-gray-400"
|
44 |
+
>
|
45 |
+
Remix
|
46 |
+
</button>
|
47 |
+
<button
|
48 |
+
class="bg-black text-white border-2 dark:border-white border-black rounded-2xl ml-2 px-2 py-2 shadow-sm text-xs font-bold focus:outline-none focus:border-gray-400"
|
49 |
+
>
|
50 |
+
Copy
|
51 |
+
</button>
|
52 |
+
</div>
|
53 |
</div>
|
54 |
</div>
|
frontend/src/routes/+page.svelte
CHANGED
@@ -67,7 +67,7 @@
|
|
67 |
return;
|
68 |
case 'estimation':
|
69 |
const { msg, rank, queue_size } = data;
|
70 |
-
$loadingState =
|
71 |
break;
|
72 |
case 'process_generating':
|
73 |
$loadingState = data.success ? 'Generating' : 'Error';
|
@@ -111,11 +111,11 @@
|
|
111 |
}
|
112 |
</script>
|
113 |
|
114 |
-
<div class="max-w-screen-
|
115 |
<div class="relative">
|
116 |
-
<form class="grid grid-cols-
|
117 |
<input
|
118 |
-
class="disabled:opacity-50 col-span-4
|
119 |
placeholder="A photo of a beautiful sunset in San Francisco"
|
120 |
type="text"
|
121 |
name="prompt"
|
@@ -123,7 +123,7 @@
|
|
123 |
disabled={$isLoading}
|
124 |
/>
|
125 |
<button
|
126 |
-
class="disabled:opacity-50
|
127 |
on:click|preventDefault={() => generatePalette(prompt)}
|
128 |
disabled={$isLoading}
|
129 |
>
|
@@ -139,6 +139,7 @@
|
|
139 |
<div class="pt-5">
|
140 |
{#each promptsData as promptData}
|
141 |
<Pallette {promptData} />
|
|
|
142 |
{/each}
|
143 |
</div>
|
144 |
{/if}
|
|
|
67 |
return;
|
68 |
case 'estimation':
|
69 |
const { msg, rank, queue_size } = data;
|
70 |
+
$loadingState = `On queue ${rank}/${queue_size}`;
|
71 |
break;
|
72 |
case 'process_generating':
|
73 |
$loadingState = data.success ? 'Generating' : 'Error';
|
|
|
111 |
}
|
112 |
</script>
|
113 |
|
114 |
+
<div class="max-w-screen-md mx-auto px-3 py-8 relative z-0">
|
115 |
<div class="relative">
|
116 |
+
<form class="grid grid-cols-6" on:submit|preventDefault={() => generatePalette(prompt)}>
|
117 |
<input
|
118 |
+
class="text-sm disabled:opacity-50 col-span-4 md:col-span-5 italic dark:placeholder:text-black placeholder:text-white text-white dark:text-black placeholder:text-opacity-40 dark:bg-white bg-slate-900 border-2 border-black rounded-2xl px-2 shadow-sm focus:outline-none focus:border-gray-400 focus:ring-1 "
|
119 |
placeholder="A photo of a beautiful sunset in San Francisco"
|
120 |
type="text"
|
121 |
name="prompt"
|
|
|
123 |
disabled={$isLoading}
|
124 |
/>
|
125 |
<button
|
126 |
+
class="disabled:opacity-50 col-span-2 md:col-span-1 dark:bg-white dark:text-black border-2 border-black rounded-2xl ml-2 px-2 py-2 text-xs shadow-sm font-bold focus:outline-none focus:border-gray-400"
|
127 |
on:click|preventDefault={() => generatePalette(prompt)}
|
128 |
disabled={$isLoading}
|
129 |
>
|
|
|
139 |
<div class="pt-5">
|
140 |
{#each promptsData as promptData}
|
141 |
<Pallette {promptData} />
|
142 |
+
<div class="border-b border-gray-200 py-2" />
|
143 |
{/each}
|
144 |
</div>
|
145 |
{/if}
|