add structuration page

src/lib/components/community/Card.svelte

@@ -19,17 +19,7 @@
   let loading = false;
 
   const handleClick = async () => {
-    const request = await fetch(`/api/community/${card?.id}?${new URLSearchParams(form)}`);
-    const { gallery, next, previous } = await request.json();
-    galleryStore.set({
-      gallery,
-      open: true,
-      next,
-      previous
-    });
-
-    $page.url.searchParams.set('gallery', card?.id);
-    goto(`?${$page.url.searchParams.toString()}`);
+    goto(`/gallery/${card?.id}`);
   };
 
   const handleDelete = async (id: string) => {

src/lib/components/community/drawer/Drawer.svelte

@@ -28,8 +28,7 @@
       };
     });
 
-    $page.url.searchParams.delete('model');
-    await goto(`?${$page.url.searchParams.toString()}`);
+    await goto(`/gallery`);
     await invalidate(url => url.pathname.includes("/api/models"));
   };
   
@@ -47,9 +46,7 @@
   };
   const handleClickModel = (id?: string) => {
     if (!id) return;
-    $page.url.searchParams.set('model', id);
-    $page.url.searchParams.delete('gallery');
-    goto(`/?${$page.url.searchParams.toString()}`);
+    goto(`/models/${id}`);
   };
 </script>
 

src/lib/components/models/Card.svelte

@@ -8,12 +8,10 @@
 	import { userStore } from "$lib/stores/use-user";
 
   export let card: ModelCard;
-  export let onClick: (modelId: string) => void;
 
   const handleClick = async () => {
     $page.url.searchParams.set('model', card?.id);
-    goto(`?${$page.url.searchParams.toString()}`);
-    onClick(card?.id);
+    goto(`/models/${card?.id}`);
   };
 
   const publish = async () => {

src/lib/components/models/drawer/Drawer.svelte

@@ -28,8 +28,7 @@
       };
     });
 
-    $page.url.searchParams.delete('model');
-    await goto(`?${$page.url.searchParams.toString()}`);
+    await goto(`/models`);
     await invalidate(url => url.pathname.includes("/api/models"));
   };
   

src/routes/+page.server.ts

@@ -0,0 +1,6 @@
+import { redirect } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export async function load() {
+  throw redirect(302, "/models")
+}

src/routes/gallery/+layout.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import { browser } from "$app/environment";
+	import InfiniteScroll from "svelte-infinite-scroll";
+
+	import Button from "$lib/components/Button.svelte";
+	import Card from "$lib/components/community/Card.svelte";
+	import Input from "$lib/components/fields/Input.svelte";
+	import Radio from "$lib/components/fields/Radio.svelte";
+	import { COMMUNITY_FILTER_OPTIONS } from "$lib/utils/index.js";
+	import GoTop from "$lib/components/GoTop.svelte";
+	import GalleryDrawer from "$lib/components/community/drawer/Drawer.svelte";
+	import { userStore } from "$lib/stores/use-user";
+	import { onMount } from "svelte";
+	import type { CommunityCard } from "$lib/type";
+
+	let data: {
+		cards: CommunityCard[],
+		total_items: number,
+	} = {
+		cards: [],
+		total_items: 0,
+	}
+
+	let form = {
+		filter: "new",
+		page: "0",
+		search: ""
+	}
+
+	onMount(() => {
+		refetch(false);
+	});
+
+	$: elementScroll = browser ? document?.getElementById('app') : undefined;
+
+	const handleFetchMore = async () => {
+		form = {...form, page: (Number(form.page) + 1).toString()};
+		refetch(true);
+	}
+	const handleChangeFilter = async (filter: string) => {
+		form = { ...form, filter, page: (0).toString()};
+		refetch(false)
+	}
+	let timeout: any;
+	const handleChangeSearch = async (search: string) => {
+		clearTimeout(timeout);
+		form = { ...form, search, page: (0).toString()};
+		timeout = setTimeout(() => refetch(false), 500);
+	}
+
+	const refetch = async (add: boolean) => {
+		const request = await fetch(`/api/community?${new URLSearchParams(form)}`);
+		const response = await request.json();
+		if (add) data = {...data, cards: [...data.cards, ...response.cards ]};
+		else data = response;
+	}
+</script>
+
+<svelte:head>
+	<title>Community Gallery</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<main class="px-6 py-10 lg:px-10 lg:py-12">
+	<h1 class="text-white font-semibold text-2xl">
+		Community Gallery ({data.total_items})
+	</h1>
+	<div class="flex items-start sm:items-center justify-between mt-5 flex-col sm:flex-row gap-5 sm:justify-between">
+		<Radio options={COMMUNITY_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
+		<div class="items-center justify-end gap-5 hidden lg:flex">
+			<!-- <UserIsLogged> -->
+			<Button icon="ic:round-plus" disabled={true} theme="dark" size="lg">Upload own Image</Button>
+			<!-- </UserIsLogged> -->
+			<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
+		</div>
+		<div class="items-center justify-end gap-3 flex lg:hidden">
+			<!-- <UserIsLogged> -->
+			<Button icon="ic:round-plus" disabled={true} theme="dark" size="md">Upload own Image</Button>
+			<!-- </UserIsLogged> -->
+			<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="md">Generate</Button>
+		</div>
+	</div>
+	<div class="mt-5 max-w-sm">
+		<Input value={form.search} placeholder="Search an image" onChange={handleChangeSearch} />
+	</div>
+	<!-- mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5 gap-5 mt-8 lg:mt-10 -->
+	<div class="mx-auto flex flex-wrap gap-5 mt-8 lg:mt-10 justify-center md:justify-start">
+		{#each data.cards as card}
+			<Card card={card} form={form} displayDelete={$userStore?.is_admin} />
+		{/each}
+		<InfiniteScroll
+			elementScroll="{elementScroll ?? undefined}"
+			threshold={100}
+			hasMore={data.total_items > data.cards.length}
+			on:loadMore={handleFetchMore}
+		/>
+		<GoTop />
+	</div>
+	<GalleryDrawer form={form} />
+	<slot />
+</main>

src/routes/gallery/+page.svelte

@@ -1,101 +1,3 @@
-<script lang="ts">
-	import { browser } from "$app/environment";
-	import InfiniteScroll from "svelte-infinite-scroll";
-
-	import Button from "$lib/components/Button.svelte";
-	import Card from "$lib/components/community/Card.svelte";
-	import Input from "$lib/components/fields/Input.svelte";
-	import Radio from "$lib/components/fields/Radio.svelte";
-	import { COMMUNITY_FILTER_OPTIONS } from "$lib/utils/index.js";
-	import GoTop from "$lib/components/GoTop.svelte";
-	import GalleryDrawer from "$lib/components/community/drawer/Drawer.svelte";
-	import { userStore } from "$lib/stores/use-user";
-	import { onMount } from "svelte";
-	import type { CommunityCard } from "$lib/type";
-
-	let data: {
-		cards: CommunityCard[],
-		total_items: number,
-	} = {
-		cards: [],
-		total_items: 0,
-	}
-
-	let form = {
-		filter: "new",
-		page: "0",
-		search: ""
-	}
-
-	onMount(() => {
-		refetch(false);
-	});
-
-	$: elementScroll = browser ? document?.getElementById('app') : undefined;
-
-	const handleFetchMore = async () => {
-		form = {...form, page: (Number(form.page) + 1).toString()};
-		refetch(true);
-	}
-	const handleChangeFilter = async (filter: string) => {
-		form = { ...form, filter, page: (0).toString()};
-		refetch(false)
-	}
-	let timeout: any;
-	const handleChangeSearch = async (search: string) => {
-		clearTimeout(timeout);
-		form = { ...form, search, page: (0).toString()};
-		timeout = setTimeout(() => refetch(false), 500);
-	}
-
-	const refetch = async (add: boolean) => {
-		const request = await fetch(`/api/community?${new URLSearchParams(form)}`);
-		const response = await request.json();
-		if (add) data = {...data, cards: [...data.cards, ...response.cards ]};
-		else data = response;
-	}
-</script>
-
-<svelte:head>
-	<title>Community Gallery</title>
-	<meta name="description" content="Svelte demo app" />
-</svelte:head>
-
-<main class="px-6 py-10 lg:px-10 lg:py-12">
-	<h1 class="text-white font-semibold text-2xl">
-		Community Gallery ({data.total_items})
-	</h1>
-	<div class="flex items-start sm:items-center justify-between mt-5 flex-col sm:flex-row gap-5 sm:justify-between">
-		<Radio options={COMMUNITY_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
-		<div class="items-center justify-end gap-5 hidden lg:flex">
-			<!-- <UserIsLogged> -->
-			<Button icon="ic:round-plus" disabled={true} theme="dark" size="lg">Upload own Image</Button>
-			<!-- </UserIsLogged> -->
-			<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
-		</div>
-		<div class="items-center justify-end gap-3 flex lg:hidden">
-			<!-- <UserIsLogged> -->
-			<Button icon="ic:round-plus" disabled={true} theme="dark" size="md">Upload own Image</Button>
-			<!-- </UserIsLogged> -->
-			<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="md">Generate</Button>
-		</div>
-	</div>
-	<div class="mt-5 max-w-sm">
-		<Input value={form.search} placeholder="Search an image" onChange={handleChangeSearch} />
-	</div>
-	<!-- mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5 gap-5 mt-8 lg:mt-10 -->
-	<div class="mx-auto flex flex-wrap gap-5 mt-8 lg:mt-10 justify-center md:justify-start">
-		{#each data.cards as card}
-			<Card card={card} form={form} displayDelete={$userStore?.is_admin} />
-		{/each}
-		<InfiniteScroll
-			elementScroll="{elementScroll ?? undefined}"
-			threshold={100}
-			hasMore={data.total_items > data.cards.length}
-			on:loadMore={handleFetchMore}
-		/>
-		<GoTop />
-	</div>
-	<!-- <GalleryViewer form={form} /> -->
-	<GalleryDrawer form={form} />
-</main>
+<div>
+  <slot />
+</div>

src/routes/gallery/[id]/+page.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { galleryStore } from "$lib/stores/use-gallery.js";
+	import { onMount } from "svelte";
+  export let data;
+
+
+  onMount(() => {
+    console.log(data)
+    galleryStore.set({
+      gallery: data.gallery,
+      open: true,
+      next: data.next,
+      previous: data.previous
+    });
+  });
+</script>

src/routes/gallery/[id]/+page.ts

@@ -0,0 +1,29 @@
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, fetch }) {
+  const { id } = params;
+
+  // const request = await fetch(`/api/community/${card?.id}?${new URLSearchParams(form)}`);
+    // const { gallery, next, previous } = await request.json();
+
+  const model_request = await fetch(`/api/community/${id}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+  const data = await model_request?.clone().json().catch(() => null);
+
+  const { gallery, next, previous } = data;
+
+  if (!gallery) {
+    return error(404, 'Not found');
+  }
+
+  return {
+    gallery,
+    next,
+    previous
+  }
+}

src/routes/{+page.svelte → models/+layout.svelte}

@@ -2,7 +2,6 @@
 	import { browser } from "$app/environment";
 	import InfiniteScroll from "svelte-infinite-scroll";
 	import { page } from "$app/stores";
-	import { modelStore } from "$lib/stores/use-model";
 
 	import { goto } from "$app/navigation";
 	import Button from "$lib/components/Button.svelte";
@@ -37,7 +36,7 @@
 	onMount(() => {
 		refetch(false);
 		if ($page.url.searchParams.get('model')) {
-			getModel($page.url.searchParams.get('model') as string);
+			// getModel($page.url.searchParams.get('model') as string);
 		}
 	});
 
@@ -76,31 +75,14 @@
 			data.total_items = response.total_items;
 		}
 	}
-
-	const getModel = async (modelId: string) => {
-		const model_request = await fetch(`/api/models/${modelId?.replace("/", "@")}?full=true`, {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json"
-      }
-    })
-    const data = await model_request?.clone().json().catch(() => null);
-    modelStore.set({
-      model: data?.model ?? null,
-      open: true
-    });
-	}
 </script>
 
 <svelte:head>
 	<title>Explore Models</title>
-	<meta name="description" content="Svelte demo app" />
+	<meta name="description" content="Explore the LoRa models to find the perfect one!" />
 </svelte:head>
 
 <main class="px-6 py-10 lg:px-10 lg:py-12">
-	<Dialog open={submitModelDialog} onClose={() => submitModelDialog = false}>
-		<SubmitModel onClose={() => submitModelDialog = false} />
-	</Dialog>
 	<Drawer onSearch={handleChangeSearch} />
 	<h1 class="text-white font-semibold text-2xl">
 		Explore Models ({data?.total_items ?? 0})
@@ -135,17 +117,15 @@
 		</div>
 		<div class="items-center justify-end gap-3 flex lg:hidden">
 			<Button href="https://huggingface.co/new/stable-diffusion-lora" target="_blank" icon="ic:round-plus" theme="dark" size="md">Create</Button>
-			<!-- <UserIsLogged> -->
-				<Button
+			<Button
 					icon="octicon:upload-16"
 					theme="blue"
+					target="_blank"
+					href="https://huggingface.co/spaces/multimodalart/civitai-to-hf"
 					size="md"
-					disabled={true}
-					onClick={() => submitModelDialog = true}
 				>
-					Upload model
+					Migrate
 				</Button>
-			<!-- </UserIsLogged> -->
 		</div>
 	</div>
 	<div class="mt-5 max-w-sm">
@@ -153,7 +133,7 @@
 	</div>
 	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-4 gap-5 mt-8 lg:mt-10">
 		{#each data.models as card}
-			<Card card={card} onClick={getModel} />
+			<Card card={card} />
 		{/each}
 		{#if data.models.length === 0}
 			<p class="text-neutral-400 text-left w-full">No models found</p>
@@ -166,4 +146,5 @@
 		/>
 		<GoTop />
 	</div>
+	<slot />
 </main>

src/routes/models/+page.svelte

@@ -0,0 +1,3 @@
+<div>
+  <slot />
+</div>

src/routes/models/[userId]/+page.svelte

@@ -0,0 +1,3 @@
+<div>
+  <slot />
+</div>

src/routes/models/[userId]/[slug]/+page.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { modelStore } from "$lib/stores/use-model";
+	import { onMount } from "svelte";
+  export let data;
+
+
+  onMount(() => {
+    modelStore.set({
+      model: data ? data.model : null,
+      open: true
+    });
+  });
+</script>

src/routes/models/[userId]/[slug]/+page.ts

@@ -0,0 +1,20 @@
+import { error } from '@sveltejs/kit';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, fetch }) {
+  const { userId, slug } = params;
+
+  const model_request = await fetch(`/api/models/${userId + "@" + slug}?full=true`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+  const data = await model_request?.clone().json().catch(() => null);
+
+  if (!data?.model) {
+    return error(404, 'Not found');
+  }
+
+  return data
+}