Spaces:
Runtime error
Runtime error
fix to new gradio api, re-enable mutiples
Browse files- frontend/src/lib/Palette.svelte +6 -5
- frontend/src/lib/utils.ts +10 -3
- frontend/src/routes/+page.svelte +22 -21
frontend/src/lib/Palette.svelte
CHANGED
@@ -8,10 +8,11 @@
|
|
8 |
|
9 |
export let promptData: ColorsPrompt;
|
10 |
|
11 |
-
|
12 |
-
$: colors = promptData.images[0].colors.map((e) => d3.rgb(e));
|
13 |
-
$: imageSrc = promptData.images[0].imgURL;
|
14 |
|
|
|
|
|
|
|
15 |
let isCopying = false;
|
16 |
|
17 |
async function copyStringToClipboard(text: string) {
|
@@ -46,7 +47,7 @@
|
|
46 |
src={imageSrc}
|
47 |
alt={prompt}
|
48 |
/>
|
49 |
-
|
50 |
{#each promptData.images as image, i}
|
51 |
<button
|
52 |
class="{seletecdImage === i
|
@@ -56,7 +57,7 @@
|
|
56 |
on:mousemove={() => (seletecdImage = i)}
|
57 |
/>
|
58 |
{/each}
|
59 |
-
</div>
|
60 |
</div>
|
61 |
</div>
|
62 |
<div
|
|
|
8 |
|
9 |
export let promptData: ColorsPrompt;
|
10 |
|
11 |
+
let seletecdImage = 0;
|
|
|
|
|
12 |
|
13 |
+
$: prompt = promptData.prompt;
|
14 |
+
$: colors = promptData.images[seletecdImage].colors.map((e) => d3.rgb(e));
|
15 |
+
$: imageSrc = promptData.images[seletecdImage].imgURL;
|
16 |
let isCopying = false;
|
17 |
|
18 |
async function copyStringToClipboard(text: string) {
|
|
|
47 |
src={imageSrc}
|
48 |
alt={prompt}
|
49 |
/>
|
50 |
+
<div class="absolute flex justify-around w-full">
|
51 |
{#each promptData.images as image, i}
|
52 |
<button
|
53 |
class="{seletecdImage === i
|
|
|
57 |
on:mousemove={() => (seletecdImage = i)}
|
58 |
/>
|
59 |
{/each}
|
60 |
+
</div>
|
61 |
</div>
|
62 |
</div>
|
63 |
<div
|
frontend/src/lib/utils.ts
CHANGED
@@ -51,7 +51,7 @@ export function extractPalette(
|
|
51 |
img.onload = async () => {
|
52 |
const w = img.width;
|
53 |
const h = img.height;
|
54 |
-
const canvas
|
55 |
canvas.width = w;
|
56 |
canvas.height = h;
|
57 |
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
@@ -60,8 +60,15 @@ export function extractPalette(
|
|
60 |
const pixelArray = createPixelArray(imageData.data, w * h, quality);
|
61 |
const cmap = quantize(pixelArray, colorCount);
|
62 |
const colors: number[][] = cmap.palette();
|
|
|
|
|
|
|
|
|
|
|
63 |
|
64 |
-
const imgBlob: Blob = await new Promise((
|
|
|
|
|
65 |
const colorsRGB = colors.map((color) => d3.rgb(...(color as [number, number, number])));
|
66 |
resolve({
|
67 |
colors: sortColors(colorsRGB),
|
@@ -108,4 +115,4 @@ function slugify(text: string) {
|
|
108 |
.replace(/\-\-+/g, '-')
|
109 |
.replace(/^-+/, '')
|
110 |
.replace(/-+$/, '');
|
111 |
-
}
|
|
|
51 |
img.onload = async () => {
|
52 |
const w = img.width;
|
53 |
const h = img.height;
|
54 |
+
const canvas = document.createElement('canvas');
|
55 |
canvas.width = w;
|
56 |
canvas.height = h;
|
57 |
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
|
|
|
60 |
const pixelArray = createPixelArray(imageData.data, w * h, quality);
|
61 |
const cmap = quantize(pixelArray, colorCount);
|
62 |
const colors: number[][] = cmap.palette();
|
63 |
+
const tempCanvas = document.createElement('canvas');
|
64 |
+
tempCanvas.width = w / 5;
|
65 |
+
tempCanvas.height = h / 5;
|
66 |
+
const tempCtx = tempCanvas.getContext('2d') as CanvasRenderingContext2D;
|
67 |
+
tempCtx.drawImage(img, 0, 0, w, h, 0, 0, w / 5, h / 5);
|
68 |
|
69 |
+
const imgBlob: Blob = await new Promise((_resolve) =>
|
70 |
+
tempCanvas.toBlob(_resolve, 'image/jpeg', 0.8)
|
71 |
+
);
|
72 |
const colorsRGB = colors.map((color) => d3.rgb(...(color as [number, number, number])));
|
73 |
resolve({
|
74 |
colors: sortColors(colorsRGB),
|
|
|
115 |
.replace(/\-\-+/g, '-')
|
116 |
.replace(/^-+/, '')
|
117 |
.replace(/-+$/, '');
|
118 |
+
}
|
frontend/src/routes/+page.svelte
CHANGED
@@ -61,22 +61,17 @@
|
|
61 |
if (!_prompt || $isLoading == true) return;
|
62 |
$loadingState = 'Pending';
|
63 |
$isLoading = true;
|
64 |
-
const
|
|
|
65 |
const payload = {
|
66 |
fn_index: 2,
|
67 |
-
data: [
|
68 |
-
|
69 |
-
_prompt,
|
70 |
-
1,
|
71 |
-
40,
|
72 |
-
7.5,
|
73 |
-
Number(randomSeed())
|
74 |
-
]
|
75 |
};
|
76 |
const websocket = new WebSocket(PUBLIC_WS_ENDPOINT);
|
77 |
-
websocket.onopen = async function (event) {
|
78 |
-
|
79 |
-
};
|
80 |
websocket.onclose = (evt) => {
|
81 |
if (!evt.wasClean) {
|
82 |
$loadingState = 'Error';
|
@@ -133,20 +128,26 @@
|
|
133 |
const nsfwColors = ['#040404', '#B7B7B7', '#565656', '#747474', '#6C6C6C'];
|
134 |
|
135 |
const colorImages = [];
|
|
|
136 |
for (const base64img of images) {
|
137 |
const { colors, imgBlob } = await extractPalette(base64img);
|
138 |
if (
|
139 |
-
colors.map((color) => color.formatHex().toUpperCase()).every((c) => nsfwColors.includes(c))
|
140 |
) {
|
141 |
-
|
142 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
143 |
}
|
144 |
-
|
145 |
-
|
146 |
-
|
147 |
-
|
148 |
-
|
149 |
-
colorImages.push(colorsImage);
|
150 |
}
|
151 |
return colorImages;
|
152 |
}
|
|
|
61 |
if (!_prompt || $isLoading == true) return;
|
62 |
$loadingState = 'Pending';
|
63 |
$isLoading = true;
|
64 |
+
const sessionHash = crypto.randomUUID();
|
65 |
+
|
66 |
const payload = {
|
67 |
fn_index: 2,
|
68 |
+
data: [_prompt],
|
69 |
+
session_hash: sessionHash
|
|
|
|
|
|
|
|
|
|
|
|
|
70 |
};
|
71 |
const websocket = new WebSocket(PUBLIC_WS_ENDPOINT);
|
72 |
+
// websocket.onopen = async function (event) {
|
73 |
+
// websocket.send(JSON.stringify({ hash: sessionHash }));
|
74 |
+
// };
|
75 |
websocket.onclose = (evt) => {
|
76 |
if (!evt.wasClean) {
|
77 |
$loadingState = 'Error';
|
|
|
128 |
const nsfwColors = ['#040404', '#B7B7B7', '#565656', '#747474', '#6C6C6C'];
|
129 |
|
130 |
const colorImages = [];
|
131 |
+
let isNSFW = false;
|
132 |
for (const base64img of images) {
|
133 |
const { colors, imgBlob } = await extractPalette(base64img);
|
134 |
if (
|
135 |
+
!colors.map((color) => color.formatHex().toUpperCase()).every((c) => nsfwColors.includes(c))
|
136 |
) {
|
137 |
+
const url = await uploadImage(imgBlob, _prompt);
|
138 |
+
const colorsImage: ColorsImage = {
|
139 |
+
colors,
|
140 |
+
imgURL: url
|
141 |
+
};
|
142 |
+
colorImages.push(colorsImage);
|
143 |
+
} else {
|
144 |
+
isNSFW = true;
|
145 |
}
|
146 |
+
}
|
147 |
+
|
148 |
+
if (colorImages.length === 0 && isNSFW) {
|
149 |
+
console.error('Possible NSFW image');
|
150 |
+
throw new Error('Possible NSFW image');
|
|
|
151 |
}
|
152 |
return colorImages;
|
153 |
}
|