Spaces:
Runtime error
Runtime error
simple pagination
Browse files
frontend/src/lib/ArrowLeft.svelte
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<svg
|
2 |
+
class="mr-1.5"
|
3 |
+
xmlns="http://www.w3.org/2000/svg"
|
4 |
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
5 |
+
aria-hidden="true"
|
6 |
+
focusable="false"
|
7 |
+
role="img"
|
8 |
+
width="1em"
|
9 |
+
height="1em"
|
10 |
+
preserveAspectRatio="xMidYMid meet"
|
11 |
+
viewBox="0 0 32 32"
|
12 |
+
><path d="M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z" fill="currentColor" /></svg
|
13 |
+
>
|
frontend/src/lib/ArrowRight.svelte
ADDED
@@ -0,0 +1,13 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<svg
|
2 |
+
class="ml-1.5 transform rotate-180"
|
3 |
+
xmlns="http://www.w3.org/2000/svg"
|
4 |
+
xmlns:xlink="http://www.w3.org/1999/xlink"
|
5 |
+
aria-hidden="true"
|
6 |
+
focusable="false"
|
7 |
+
role="img"
|
8 |
+
width="1em"
|
9 |
+
height="1em"
|
10 |
+
preserveAspectRatio="xMidYMid meet"
|
11 |
+
viewBox="0 0 32 32"
|
12 |
+
><path d="M10 16L20 6l1.4 1.4l-8.6 8.6l8.6 8.6L20 26z" fill="currentColor" /></svg
|
13 |
+
>
|
frontend/src/routes/+page.svelte
CHANGED
@@ -5,13 +5,15 @@
|
|
5 |
import { isLoading, loadingState } from '$lib/store';
|
6 |
import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
|
7 |
import Pallette from '$lib/Palette.svelte';
|
|
|
|
|
8 |
|
9 |
const apiUrl =
|
10 |
PUBLIC_DEV_MODE === 'DEV'
|
11 |
? 'http://localhost:7860'
|
12 |
: '/embed/huggingface-projects/color-palette-generator-sd';
|
13 |
|
14 |
-
let promptsData: ColorsPrompt[];
|
15 |
let prompt: string;
|
16 |
let promptInputEl: HTMLElement;
|
17 |
|
@@ -26,14 +28,33 @@
|
|
26 |
async function fetchData() {
|
27 |
const palettes = await fetch(apiUrl + '/data').then((d) => d.json());
|
28 |
if (!promptsData || palettes?.length > promptsData?.length) {
|
29 |
-
promptsData = sortData(palettes)
|
30 |
}
|
31 |
}
|
32 |
|
33 |
$: promptsTotal = promptsData?.length || null;
|
34 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
35 |
function sortData(_promptData: ColorsPrompt[]) {
|
36 |
-
return _promptData
|
|
|
|
|
|
|
37 |
}
|
38 |
async function savePaletteDB(colorPrompt: ColorsPrompt) {
|
39 |
try {
|
@@ -221,13 +242,54 @@
|
|
221 |
<div class="grow border-b border-gray-200" />
|
222 |
</div>
|
223 |
|
224 |
-
{#if
|
225 |
<div>
|
226 |
-
{#each
|
227 |
<Pallette {promptData} on:remix={remix} />
|
228 |
<div class="border-b border-gray-200 py-2" />
|
229 |
{/each}
|
230 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
231 |
{/if}
|
232 |
</div>
|
233 |
|
|
|
5 |
import { isLoading, loadingState } from '$lib/store';
|
6 |
import { PUBLIC_WS_ENDPOINT, PUBLIC_DEV_MODE } from '$env/static/public';
|
7 |
import Pallette from '$lib/Palette.svelte';
|
8 |
+
import ArrowRight from '$lib/ArrowRight.svelte';
|
9 |
+
import ArrowLeft from '$lib/ArrowLeft.svelte';
|
10 |
|
11 |
const apiUrl =
|
12 |
PUBLIC_DEV_MODE === 'DEV'
|
13 |
? 'http://localhost:7860'
|
14 |
: '/embed/huggingface-projects/color-palette-generator-sd';
|
15 |
|
16 |
+
let promptsData: ColorsPrompt[] = [];
|
17 |
let prompt: string;
|
18 |
let promptInputEl: HTMLElement;
|
19 |
|
|
|
28 |
async function fetchData() {
|
29 |
const palettes = await fetch(apiUrl + '/data').then((d) => d.json());
|
30 |
if (!promptsData || palettes?.length > promptsData?.length) {
|
31 |
+
promptsData = sortData(palettes);
|
32 |
}
|
33 |
}
|
34 |
|
35 |
$: promptsTotal = promptsData?.length || null;
|
36 |
|
37 |
+
let page: number = 0;
|
38 |
+
const maxPerPage: number = 10;
|
39 |
+
$: totalPages = Math.ceil(promptsData?.length / maxPerPage) || 0;
|
40 |
+
$: promptsDataPage = [...promptsData].slice(page * maxPerPage, (page + 1) * maxPerPage);
|
41 |
+
let pagesLinks: number[] = [];
|
42 |
+
$: if (totalPages) {
|
43 |
+
const pagesNums = Array(totalPages)
|
44 |
+
.fill([])
|
45 |
+
.map((_, i) => ({ value: i, label: i + 1 }));
|
46 |
+
pagesLinks = pagesNums
|
47 |
+
.slice(0, 3)
|
48 |
+
.concat([{ value: -1, label: '...' }])
|
49 |
+
.concat(pagesNums.length > 3 ? pagesNums.slice(-1) : []);
|
50 |
+
console.log(pagesLinks);
|
51 |
+
}
|
52 |
+
|
53 |
function sortData(_promptData: ColorsPrompt[]) {
|
54 |
+
return _promptData
|
55 |
+
.sort((a, b) => b.id - a.id)
|
56 |
+
.map((p) => p.data)
|
57 |
+
.filter((d) => d.images.length > 0);
|
58 |
}
|
59 |
async function savePaletteDB(colorPrompt: ColorsPrompt) {
|
60 |
try {
|
|
|
242 |
<div class="grow border-b border-gray-200" />
|
243 |
</div>
|
244 |
|
245 |
+
{#if promptsDataPage}
|
246 |
<div>
|
247 |
+
{#each promptsDataPage as promptData}
|
248 |
<Pallette {promptData} on:remix={remix} />
|
249 |
<div class="border-b border-gray-200 py-2" />
|
250 |
{/each}
|
251 |
</div>
|
252 |
+
<nav role="navigation">
|
253 |
+
<ul
|
254 |
+
class="items-center sm:justify-center space-x-2 select-none w-full flex justify-center mt-6 mb-4"
|
255 |
+
>
|
256 |
+
<li />
|
257 |
+
<li>
|
258 |
+
<a
|
259 |
+
on:click|preventDefault={() => {
|
260 |
+
page = page - 1 < 0 ? 0 : page - 1;
|
261 |
+
// window.scrollTo(0, 0);
|
262 |
+
// if ('parentIFrame' in window) {
|
263 |
+
// window.parentIFrame.scrollTo(0, promptInputEl.offsetTop);
|
264 |
+
// }
|
265 |
+
}}
|
266 |
+
class="px-2.5 py-1 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center rounded-lg"
|
267 |
+
href="#"
|
268 |
+
><ArrowLeft /> Previous
|
269 |
+
</a>
|
270 |
+
</li>
|
271 |
+
<li class="text-sm">
|
272 |
+
<span class="inline-block min-w-[3ch] text-right">{page + 1} </span>/<span
|
273 |
+
class="inline-block min-w-[3ch]"
|
274 |
+
>{totalPages}
|
275 |
+
</span>
|
276 |
+
</li>
|
277 |
+
<li>
|
278 |
+
<a
|
279 |
+
on:click|preventDefault={() => {
|
280 |
+
page = page + 1 >= totalPages - 1 ? totalPages - 1 : page + 1;
|
281 |
+
// window.scrollTo(0, 0);
|
282 |
+
// if ('parentIFrame' in window) {
|
283 |
+
// window.parentIFrame.scrollTo(0, promptInputEl.offsetTop);
|
284 |
+
// }
|
285 |
+
}}
|
286 |
+
class="px-2.5 py-1 hover:bg-gray-50 dark:hover:bg-gray-800 flex items-center rounded-lg"
|
287 |
+
href="#"
|
288 |
+
>Next <ArrowRight />
|
289 |
+
</a>
|
290 |
+
</li>
|
291 |
+
</ul>
|
292 |
+
</nav>
|
293 |
{/if}
|
294 |
</div>
|
295 |
|