gallery viewer

package-lock.json

@@ -30,6 +30,7 @@
 				"@types/node": "^20.11.2",
 				"@typescript-eslint/eslint-plugin": "^6.0.0",
 				"@typescript-eslint/parser": "^6.0.0",
+				"@zerodevx/svelte-toast": "^0.9.5",
 				"autoprefixer": "^10.4.16",
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^9.0.0",
@@ -3049,6 +3050,15 @@
 			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
 			"dev": true
 		},
+		"node_modules/@zerodevx/svelte-toast": {
+			"version": "0.9.5",
+			"resolved": "https://registry.npmjs.org/@zerodevx/svelte-toast/-/svelte-toast-0.9.5.tgz",
+			"integrity": "sha512-JLeB/oRdJfT+dz9A5bgd3Z7TuQnBQbeUtXrGIrNWMGqWbabpepBF2KxtWVhL2qtxpRqhae2f6NAOzH7xs4jUSw==",
+			"dev": true,
+			"peerDependencies": {
+				"svelte": "^3.57.0 || ^4.0.0"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.11.2",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.11.2.tgz",

package.json

@@ -21,6 +21,7 @@
 		"@types/node": "^20.11.2",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
+		"@zerodevx/svelte-toast": "^0.9.5",
 		"autoprefixer": "^10.4.16",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^9.0.0",

src/lib/components/UserIsLogged.svelte

@@ -15,7 +15,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
-  class="w-full cursor-pointer"
+  class="w-full cursor-pointer block"
   on:click={handleClick}
 >
   <div class:pointer-events-none={!user}>

src/lib/components/community/Card.svelte

@@ -1,15 +1,34 @@
 <script lang="ts">
-	import type { CommunityCard } from "$lib/type";
-  import Button from "$lib/components/Button.svelte";
   import { env } from "$env/dynamic/public";
-
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores"; 
+  
+	import type { CommunityCard } from "$lib/type";
+  import { galleryStore } from "$lib/stores/use-gallery";
 	import Reactions from "./reactions/Reactions.svelte";
 
   export let card: CommunityCard;
-  </script>
 
+  const handleClick = async () => {
+    const request = await fetch(`/api/community/${card?.id}`);
+    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()}`);
+  };
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y-click-events-have-key-events -->
 <div
   class="cursor-pointer group bg-neutral-700 rounded-xl h-[400px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-75 hover:brightness-100 z-[1] overflow-hidden"
+  on:click={handleClick}
 >
   <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden">
     <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('{env.PUBLIC_FILE_UPLOAD_DIR}/{card.image}');"></div>
@@ -19,11 +38,6 @@
       <p class="text-white font-semibold text-lg">{card.prompt}</p>
       <p class="text-white/75 font-regular text-base">{card.model.id}</p>
     </div>
-    <Button theme="light" size="md" href={`/generate?model=${card.model.id}`}>
-      Try it now
-    </Button>
-  </div>
-  <div class="flex items-center justify-start gap-2">
-    <Reactions reactions={card.reactions} gallery_id={card.id} />
   </div>
+  <Reactions reactions={card.reactions} gallery_id={card.id} />
 </div>

src/lib/components/community/reactions/Reaction.svelte

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import UserIsLogged from "$lib/components/UserIsLogged.svelte";
-
   export let emoji: string;
   export let count: number;
   export let gallery_id: string;
@@ -22,13 +20,11 @@
   }
 </script>
 
-<UserIsLogged>
-  <button
-    class="rounded-full bg-white text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-3 py-1 border border-white hover:bg-neutral-200 text-sm"
-    class:bg-opacity-60={!liked}
-    on:click={() => handleReaction(emoji)}
-  >
-    <span class="text-base">{emoji}</span>
-    {count}
-  </button>
-</UserIsLogged>
+<button
+  class="rounded-full bg-white text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-3 py-1 border border-white hover:bg-neutral-200 text-sm"
+  class:bg-opacity-60={!liked}
+  on:click={() => handleReaction(emoji)}
+>
+  <span class="text-base">{emoji}</span>
+  {count}
+</button>

src/lib/components/community/reactions/Reactions.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import type { ReactionType } from "$lib/type";
+  import type { ReactionType } from "$lib/type";
   import Add from "$lib/components/community/reactions/Add.svelte";
   import Reaction from "$lib/components/community/reactions/Reaction.svelte";
   import { get } from 'svelte/store';
   import { userStore } from "$lib/stores/use-user";
+  import UserIsLogged from "$lib/components/UserIsLogged.svelte";
 
   let user = get(userStore);
 
@@ -24,26 +25,30 @@
   $: groupedReactions = groupReactionsByEmoji(reactions);
 </script>
 
-{#each groupedReactions as reaction}
-  <Reaction
-    emoji={reaction.emoji}
-    count={reaction?.count}
-    liked={reaction?.liked}
-    {gallery_id}
-    onReact={(emoji, id, deleted) => {
-      if (deleted) {
-        reactions = reactions.filter((reaction) => reaction.id !== id);
-      } else {
+<UserIsLogged>
+  <div class="flex items-center justify-start gap-2">
+    {#each groupedReactions as reaction}
+      <Reaction
+        emoji={reaction.emoji}
+        count={reaction?.count}
+        liked={reaction?.liked}
+        {gallery_id}
+        onReact={(emoji, id, deleted) => {
+          if (deleted) {
+            reactions = reactions.filter((reaction) => reaction.id !== id);
+          } else {
+            reactions = [...reactions, { emoji, userId: user?.sub, galleryId: gallery_id, id }];
+          }
+        }}
+      />
+    {/each}
+    <Add
+      count={groupedReactions?.length}
+      reactions={groupedReactions}
+      {gallery_id}
+      onAdd={(emoji, id) => {
         reactions = [...reactions, { emoji, userId: user?.sub, galleryId: gallery_id, id }];
-      }
-    }}
-  />
-{/each}
-<Add
-  count={groupedReactions?.length}
-  reactions={groupedReactions}
-  {gallery_id}
-  onAdd={(emoji, id) => {
-    reactions = [...reactions, { emoji, userId: user?.sub, galleryId: gallery_id, id }];
-  }}
-/>
+      }}
+    />
+  </div>
+</UserIsLogged>

src/lib/components/community/viewer/Viewer.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+  import { clickoutside } from '@svelte-put/clickoutside';
+  import { goto } from "$app/navigation";
+  import { page } from "$app/stores"; 
+  import { get } from "svelte/store";
+  import { env } from "$env/dynamic/public";
+  import Icon from "@iconify/svelte";
+
+  import { galleryStore } from "$lib/stores/use-gallery";
+  import UserIsLogged from '$lib/components/UserIsLogged.svelte';
+	import Reactions from '../reactions/Reactions.svelte';
+	import Button from '$lib/components/Button.svelte';
+
+  let { open, gallery, previous, next } = get(galleryStore);
+  let loading = false;
+
+  galleryStore.subscribe((value) => {
+    open = value?.open;
+    gallery = value?.gallery;
+    previous = value?.previous;
+    next = value?.next;
+  });
+
+  const handleClose = () => {
+    galleryStore.update((value) => {
+      return {
+        ...value,
+        open: false,
+      };
+    });
+
+    $page.url.searchParams.delete('model');
+    goto(`?${$page.url.searchParams.toString()}`);
+  };
+
+  const handlePagination = async (id?: string) => {
+    if (!id) return;
+    loading = true;
+    const request = await fetch(`/api/community/${id}`);
+    const { gallery, next, previous } = await request.json();
+    galleryStore.set({
+      gallery,
+      open: true,
+      next,
+      previous
+    });
+    loading = false;
+    $page.url.searchParams.set('gallery', id);
+    goto(`?${$page.url.searchParams.toString()}`);
+  };
+</script>
+
+<div
+  class="w-full fixed top-0 left-0 h-full bg-black bg-opacity-50 z-40 backdrop-blur transition-all duration-100 p-6 lg:p-10 flex items-center justify-center"
+  class:opacity-0={!open}
+  class:pointer-events-none={!open}
+>
+  <div
+    class="mx-auto lg:h-2/3 w-full max-w-6xl bg-neutral-900 transition-all duration-200 grid grid-cols-1 lg:grid-cols-2 rounded-xl overflow-hidden"
+    class:translate-x-full={!open}
+    use:clickoutside on:clickoutside={handleClose}
+  >
+    {#if gallery?.id}
+      <img src={env.PUBLIC_FILE_UPLOAD_DIR}/{gallery?.image} alt={gallery?.prompt} class="w-full h-full object-cover" />
+      <div class="flex flex-col justify-between w-full">
+        <div class="w-full p-8">
+          <header class="w-full flex items-start justify-between">
+            <div class="flex items-center justify-start gap-4">
+              <img src={gallery?.user?.picture} class="w-12 h-12 rounded-full object-cover" alt={gallery?.user?.name} />
+              <div>
+                <p class="text-neutral-100 font-bold text-lg">
+                  {gallery?.user?.name}
+                </p>
+                <p class="text-neutral-400 text-sm">
+                  @{gallery?.user?.preferred_username}
+                </p>
+              </div>
+            </div>
+            <button on:click={handleClose}>
+              <Icon icon="carbon:close" class="w-6 h-6 text-white" />
+            </button>
+          </header>
+          <div class="mt-8 grid grid-cols-1 gap-5">
+            <Reactions reactions={gallery?.reactions} gallery_id={gallery.id} />
+            <div>
+              <a
+                href="/generate?model={gallery?.model?.id}"
+                class="flex items-center justify-start gap-4 rounded-lg cursor-pointer w-full text-left transition-all duration-200 hover:bg-neutral-950/50 p-3 -mx-3 group relative"
+              >
+                <img src={gallery?.model?.image} alt={gallery?.model?.title} class="w-14 h-14 rounded-lg object-cover" />
+                <div>
+                  <p class="text-neutral-200 text-base font-medium">{gallery?.model?.title}</p>
+                  <p class="text-neutral-400 text-sm">{gallery?.model?.id}</p>
+                </div>
+                <div class="rounded-full absolute top-1/2 -translate-y-1/2 text-neutral-100 w-8 h-8 right-4 bg-pink-500 flex items-center justify-center transition-all duration-200 group-hover:opacity-100 opacity-0">
+                  <Icon icon="tabler:arrow-up" class="w-5 h-5 transform rotate-45 font-bold" />
+                </div>
+              </a>
+            </div>
+            <div>
+              <p class="text-neutral-400 font-semibold text-xs uppercase">
+                Prompt
+              </p>
+              <p class="text-neutral-200 text-base font-medium mt-2">"{gallery?.prompt}"</p>
+            </div>
+          </div>
+        </div>
+        <footer class="border-t border-neutral-800 px-8 py-6 flex items-center justify-between">
+          <Button
+            size="lg"
+            theme="dark"
+            disabled={!previous}
+            loading={loading}
+            onClick={() => handlePagination(previous)}
+          >
+            Previous
+          </Button>
+          <Button
+            size="lg"
+            theme="light"
+            loading={loading}
+            disabled={!next}
+            onClick={() => handlePagination(next)}
+          >
+            Next
+          </Button>
+        </footer>
+      </div>
+    {/if}
+  </div>
+</div>

src/lib/components/generate/Response.svelte

@@ -39,8 +39,6 @@
     generation = value;
   })
 
-  $: console.log(generation);
-
   // create a ms countup depending on the generation time, to show the user how long it took to generate the image
   let ms = 0;
   let interval: any;
@@ -109,7 +107,7 @@
                 <p class="text-neutral-400 font-semibold text-xs uppercase">
                   Model selected
                 </p>
-                <div class="flex items-center justify-start gap-4 px-2 py-2.5 hover:bg-neutral-800/60 transition-all duration-200 rounded-lg cursor-pointer w-full text-left">
+                <div class="flex items-center justify-start gap-4 px-2 py-2.5 rounded-lg cursor-pointer w-full text-left">
                   <img src={generation?.form?.model.image} alt={generation?.form?.model.title} class="w-14 h-14 rounded-lg object-cover" />
                   <div>
                     <p class="text-neutral-200 text-base font-medium">{generation?.form?.model.title}</p>

src/lib/components/models/Card.svelte

@@ -10,7 +10,10 @@
   const handleClick = async () => {
     const request = await fetch(`/api/models/${card?.id?.replace("/", "@")}?full=true`);
     const { model } = await request.json();
-    modelStore.set(model);
+    modelStore.set({
+      model,
+      open: true
+    });
     $page.url.searchParams.set('model', card?.id);
     goto(`?${$page.url.searchParams.toString()}`);
   };

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

@@ -10,14 +10,20 @@
   import Comments from '$lib/components/models/drawer/comments/Comments.svelte';
 	import { env } from '$env/dynamic/public';
 
-  let data = get(modelStore);
+  let { open, model } = get(modelStore);
 
   modelStore.subscribe((value) => {
-    data = value;
+    open = value?.open;
+    model = value?.model;
   });
 
   const handleClose = () => {
-    modelStore.set(undefined);
+    modelStore.update((value) => {
+      return {
+        ...value,
+        open: false,
+      };
+    });
 
     $page.url.searchParams.delete('model');
     goto(`?${$page.url.searchParams.toString()}`);
@@ -26,30 +32,30 @@
 
 <div
   class="w-full fixed top-0 left-0 h-full bg-black bg-opacity-50 z-40 backdrop-blur transition-all duration-100"
-  class:opacity-0={!data?.id}
-  class:pointer-events-none={!data?.id}
+  class:opacity-0={!open}
+  class:pointer-events-none={!open}
 >
   <div
     class="ml-auto w-full max-w-3xl bg-neutral-950 h-full border-l border-neutral-800 transition-all duration-200 flex flex-col justify-between"
-    class:translate-x-full={!data?.id}
+    class:translate-x-full={!open}
     use:clickoutside on:clickoutside={handleClose}
   >
     <div class="p-8 overflow-auto">
       <header class="flex w-full justify-between items-start mb-6">
         <div class="flex items-center justify-start gap-3 lg:gap-6">
-          <img src={data?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-red-500" alt={data?.id} />
+          <img src={model?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-neutral-800 object-cover" alt={model?.id} />
           <div>
             <p class="text-white font-semibold text-lg lg:text-2xl mb-1 truncate">
-              {data?.title ?? data?.id}
+              {model?.title ?? model?.id}
             </p>
             <div class="justify-start items-center gap-2 flex">
               <div class="bg-red-500 bg-opacity-20 border border-red-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-bold text-xs">
                 <Icon icon="solar:heart-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-red-500" />
-                {data?.likes ?? 0}
+                {model?.likes ?? 0}
               </div>
               <div class="bg-blue-500 bg-opacity-20 border border-blue-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-bold text-xs">
                 <Icon icon="solar:download-square-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-blue-500" />
-                {data?.downloads ?? 0}
+                {model?.downloads ?? 0}
               </div>
             </div>
           </div>
@@ -59,11 +65,11 @@
         </button>
       </header>
       <main>
-        {#if data?.gallery && data?.gallery?.length > 0}
+        {#if model?.gallery && model?.gallery?.length > 0}
           <div>
             <p class="text-neutral-400 uppercase text-xs font-bold">Examples</p>
             <div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-5 mt-2">
-              {#each data?.gallery as example}
+              {#each model?.gallery as example}
                 <div class="w-full h-[120px] relative z-[1] mb-3 overflow-hidden">
                   <img src="{env.PUBLIC_FILE_UPLOAD_DIR}/{example.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt={example.prompt} />
                 </div>
@@ -75,11 +81,11 @@
     </div>
     <footer class="p-8 border-t border-neutral-900 bg-neutral-900/30">
       <p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
-        Commentaires ({data?.comments?.length ?? 0})
+        Commentaires ({model?.comments?.length ?? 0})
       </p>
-      {#if data?.id}
+      {#if model?.id}
         <UserIsLogged>
-          <Comments comments={data?.comments} model={data} />
+          <Comments comments={model?.comments} model={model} />
         </UserIsLogged>
       {/if}
     </footer>

src/lib/components/models/drawer/comments/Comments.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+  import { error } from "$lib/utils/toaster";
+
   import Button from "$lib/components/Button.svelte";
 	import type { ModelCard, CommentType } from "$lib/type";
   import Comment from "./Comment.svelte";
@@ -8,7 +10,6 @@
 
   let text = "";
   let loading = false;
-  let error: string | undefined = undefined;
 
   const handleSubmit = async () => {
     loading = true;
@@ -22,7 +23,7 @@
 
     const comment_response = await comment_request.json();
     if (comment_response.error) {
-      error = comment_response.error;
+      error(comment_response.error)
     } else {
       comments = [comment_response.comment, ...comments];
       text = "";

src/lib/stores/use-gallery.ts

@@ -0,0 +1,17 @@
+import { writable } from "svelte/store";
+
+import type { CommunityCard } from "$lib/type";
+
+interface Props {
+  open: boolean,
+  gallery: CommunityCard | undefined,
+  previous?: string,
+  next?: string,
+}
+
+export const galleryStore = writable<Props>({
+  open: false,
+  gallery: undefined,
+  previous: undefined,
+  next: undefined,
+});

src/lib/stores/use-model.ts

@@ -2,4 +2,12 @@ import { writable } from "svelte/store";
 
 import type { ModelCard } from "$lib/type";
 
-export const modelStore = writable<ModelCard | undefined>(undefined);
+interface Props {
+  open: boolean,
+  model: ModelCard | undefined
+}
+
+export const modelStore = writable<Props>({
+  open: false,
+  model: undefined
+});

src/lib/type.ts

@@ -10,6 +10,8 @@ export interface CommunityCard {
   id: string,
   model: ModelCard,
   prompt: string,
+  createdAt: Date,
+  user: UserType,
   image: string,
 }
 

src/lib/utils/toaster.ts

@@ -0,0 +1,19 @@
+import { toast } from '@zerodevx/svelte-toast'
+
+export const success = (message: string) => toast.push(message, {
+  theme: {
+    '--toastBackground': '#4caf50',
+    '--toastProgressBackground': '#81c784',
+    '--toastProgressAfterBackground': '#4caf50',
+    '--toastColor': '#fff',
+  }
+})
+
+export const error = (message: string) => toast.push(message, {
+  theme: {
+    '--toastBackground': '#f44336',
+    '--toastProgressBackground': '#e57373',
+    '--toastProgressAfterBackground': '#f44336',
+    '--toastColor': '#fff',
+  }
+})

src/routes/+layout.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { get } from "svelte/store";
 	import Icon from "@iconify/svelte";
+	import { SvelteToast } from '@zerodevx/svelte-toast'
 
 	import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
 	import "$lib/styles/tailwind.css"
@@ -23,6 +24,7 @@
 	<main id="app" class="flex-1 h-screen overflow-y-auto">
 		<slot />
 	</main>
+	<SvelteToast />
 	<Dialog {open} onClose={() => loginModalStore.set(false)}>
 		<div class="grid grid-cols-1 gap-7 text-center">
 			<Icon icon="fluent-emoji:sparkles" class="w-12 h-12 mx-auto" />

src/routes/+page.svelte

@@ -16,8 +16,6 @@
 
 	export let data
 
-	console.log(data)
-
 	let form = {
 		filter: "hotest",
 		search: "",

src/routes/+page.ts

@@ -4,7 +4,7 @@ export async function load({ fetch, url }) {
   let model;
 
   if (model_param) {
-    const model_request = await fetch(`/api/models/${model_param?.replace("/", "@")}`, {
+    const model_request = await fetch(`/api/models/${model_param?.replace("/", "@")}?full=true`, {
       method: "GET",
       headers: {
         "Content-Type": "application/json"

src/routes/api/community/[id]/+server.ts

@@ -0,0 +1,90 @@
+import { json, type RequestEvent } from '@sveltejs/kit';
+import prisma from '$lib/prisma';
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function GET({ params } : RequestEvent) {
+  const id = params.id;
+
+  const gallery = await prisma.gallery.findFirst({
+    where: {
+      id,
+    },
+    select: {
+      image: true,
+      id: true,
+      prompt: true,
+      createdAt: true,
+      user: {
+        select: {
+          id: true,
+          name: true,
+          sub: true,
+          picture: true,
+          preferred_username: true,
+        }
+      },
+      model: {
+        select: {
+          title: true,
+          image: true,
+          id: true,
+        }
+      },
+      reactions: {
+        select: {
+          id: true,
+          emoji: true,
+          userId: true,
+          user: {
+            select: {
+              id: true,
+              name: true,
+              sub: true,
+              picture: true,
+              preferred_username: true,
+            }
+          }
+        }
+      }
+    }
+  })
+
+  if (!gallery) {
+    return json({
+      error: {
+        token: "Gallery not found"
+      }
+    }, { status: 404 })
+  }
+
+  const next = await prisma.gallery.findFirst({
+    where: {
+      isPublic: true,
+      createdAt: {
+        lt: gallery.createdAt
+      }
+    },
+    select: {
+      id: true,
+    }
+  })
+
+  const previous = await prisma.gallery.findFirst({
+    where: {
+      isPublic: true,
+      createdAt: {
+        gt: gallery.createdAt
+      }
+    },
+    select: {
+      id: true,
+    }
+  })
+
+  return json({
+    gallery,
+    next: next ? next.id : undefined,
+    previous: previous ? previous.id : undefined,
+  })
+}

src/routes/api/models/[id]/comments/+server.ts

@@ -66,6 +66,18 @@ export async function POST({ cookies, request, params } : RequestEvent) {
           id
         }
       }
+    },
+    select: {
+      id: true,
+      text: true,
+      createdAt: true,
+      user: {
+        select: {
+          name: true,
+          picture: true,
+          sub: true,
+        }
+      }
     }
   })
 

src/routes/gallery/+page.svelte

@@ -8,6 +8,7 @@
 	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 GalleryViewer from "$lib/components/community/viewer/Viewer.svelte";
 	// import UserIsLogged from "$lib/components/UserIsLogged.svelte";
 
 	export let data
@@ -83,4 +84,5 @@
 		/>
 		<GoTop />
 	</div>
+	<GalleryViewer />
 </main>