refacto models + community

package-lock.json

@@ -8,6 +8,7 @@
 			"name": "loras-explorer",
 			"version": "0.0.1",
 			"dependencies": {
+				"@huggingface/hub": "^0.12.3-oauth",
 				"@iconify/svelte": "^3.1.4",
 				"@prisma/client": "^5.7.1",
 				"@svelte-put/clickoutside": "^3.0.1",
@@ -486,6 +487,17 @@
 			"integrity": "sha512-bxUnRP8xptGRo8YXeY073DSpfK74XpSb0ZyRNpHV9WvLnJ7TwPOjZll8hTMin7zLC6iOp59pDZ8EQDj1gzgAQQ==",
 			"dev": true
 		},
+		"node_modules/@huggingface/hub": {
+			"version": "0.12.3-oauth",
+			"resolved": "https://registry.npmjs.org/@huggingface/hub/-/hub-0.12.3-oauth.tgz",
+			"integrity": "sha512-9LE4Ded2VsjQTK/rxsIF/nvhkxs1UE+lcpNpuBxnTGNpaVzbO6HIlAtbThgNenKPplRt1iDkn82AQYBco1QHug==",
+			"dependencies": {
+				"hash-wasm": "^4.9.0"
+			},
+			"engines": {
+				"node": ">=18"
+			}
+		},
 		"node_modules/@humanwhocodes/config-array": {
 			"version": "0.11.13",
 			"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz",
@@ -2719,6 +2731,11 @@
 				"node": ">=8"
 			}
 		},
+		"node_modules/hash-wasm": {
+			"version": "4.11.0",
+			"resolved": "https://registry.npmjs.org/hash-wasm/-/hash-wasm-4.11.0.tgz",
+			"integrity": "sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ=="
+		},
 		"node_modules/hasown": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",

package.json

@@ -38,6 +38,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@huggingface/hub": "^0.12.3-oauth",
 		"@iconify/svelte": "^3.1.4",
 		"@prisma/client": "^5.7.1",
 		"@svelte-put/clickoutside": "^3.0.1",

prisma/migrations/20240104191224_init/migration.sql

@@ -1,14 +0,0 @@
--- CreateTable
-CREATE TABLE "Model" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "repo" TEXT NOT NULL,
-    "title" TEXT NOT NULL,
-    "image" TEXT,
-    "likes" INTEGER,
-    "downloads" INTEGER,
-    "isPublic" BOOLEAN NOT NULL DEFAULT false
-);
-
--- CreateIndex
-CREATE UNIQUE INDEX "Model_repo_key" ON "Model"("repo");

prisma/migrations/20240111171434_/migration.sql

@@ -0,0 +1,31 @@
+-- CreateTable
+CREATE TABLE "Model" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "title" TEXT NOT NULL,
+    "image" TEXT NOT NULL,
+    "likes" INTEGER,
+    "downloads" INTEGER,
+    "isPublic" BOOLEAN NOT NULL DEFAULT false,
+    "hf_user_id" TEXT
+);
+
+-- CreateTable
+CREATE TABLE "Gallery" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "hf_user_id" TEXT,
+    "prompt" TEXT NOT NULL,
+    "image" TEXT NOT NULL,
+    "modelId" TEXT NOT NULL,
+    CONSTRAINT "Gallery_modelId_fkey" FOREIGN KEY ("modelId") REFERENCES "Model" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+
+-- CreateTable
+CREATE TABLE "Reaction" (
+    "id" TEXT NOT NULL PRIMARY KEY,
+    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "emoji" TEXT NOT NULL,
+    "hf_user_id" TEXT,
+    "galleryId" TEXT,
+    CONSTRAINT "Reaction_galleryId_fkey" FOREIGN KEY ("galleryId") REFERENCES "Gallery" ("id") ON DELETE SET NULL ON UPDATE CASCADE
+);

prisma/schema.prisma

@@ -11,15 +11,33 @@ datasource db {
 }
 
 model Model {
-  id         String   @id @default(uuid())
-  createdAt  DateTime @default(now())
-  repo       String   @unique
+  id         String    @id
+  createdAt  DateTime  @default(now())
   title      String
-  // trigger_word String?
   image      String
-  // weights      String?
   likes      Int?
   downloads  Int?
-  isPublic   Boolean  @default(false)
+  isPublic   Boolean   @default(false)
+  hf_user_id String?
+  Gallery    Gallery[]
+}
+
+model Gallery {
+  id         String     @id @default(uuid())
   hf_user_id String?
+  createdAt  DateTime   @default(now())
+  prompt     String
+  image      String
+  reactions  Reaction[]
+  model      Model      @relation(fields: [modelId], references: [id])
+  modelId    String
+}
+
+model Reaction {
+  id         String   @id @default(uuid())
+  createdAt  DateTime @default(now())
+  emoji      String
+  hf_user_id String
+  Gallery    Gallery? @relation(fields: [galleryId], references: [id])
+  galleryId  String?
 }

src/lib/components/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import { goto } from '$app/navigation';
 	import Icon from "@iconify/svelte";
+	import Loading from './Loading.svelte';
 
   export let theme: "light" | "dark" | "blue" | "pink"  = "light";
   export let size: "md" | "lg" = "md";
@@ -24,16 +25,22 @@ import { goto } from '$app/navigation';
 
 </script>
 
-<button on:click={handleClick} class="button {theme} {size}">
+<button on:click={handleClick} class="button {theme} {size} relative whitespace-nowrap" class:!bg-neutral-400={loading} class:!border-neutral-400={loading}>
   {#if icon && iconPosition === "left"}
-    <Icon icon={icon} class="w-[20px] h-[20px]" />
+    <p class:opacity-0={loading}>
+      <Icon icon={icon} class="w-[20px] h-[20px]" />
+    </p>
   {/if}
-  <!-- {#if loading}
-    <Icon icon="akar-icons:circle" class="w-5 h-5 animate-spin" />
-  {/if} -->
-  <slot />
+  {#if loading}
+    <Loading />
+  {/if}
+  <p class:opacity-0={loading}>
+    <slot />
+  </p>
   {#if icon && iconPosition === "right"}
-    <Icon icon={icon} class="w-[20px] h-[20px]" />
+    <p class:opacity-0={loading}>
+      <Icon icon={icon} class="w-[20px] h-[20px]" />
+    </p>
   {/if}
 </button>
 

src/lib/components/Loading.svelte

@@ -1,6 +1,6 @@
-<div class="absolute left-0 top-0 w-full h-full flex items-center justify-center flex-col">
+<div class="absolute left-0 top-0 w-full h-full flex items-center justify-center flex-col gap-3">
   <svg
-    class="animate-spin -ml-1 mr-3 h-8 w-8 text-white"
+    class="animate-spin h-8 w-8 text-white"
     xmlns="http://www.w3.org/2000/svg"
     fill="none"
     viewBox="0 0 24 24"

src/lib/components/community/Card.svelte

@@ -1,25 +1,25 @@
 <script lang="ts">
-	import Reaction from "$lib/components/community/reactions/Reaction.svelte";
 	import Add from "$lib/components/community/reactions/Add.svelte";
 	import type { CommunityCard } from "$lib/type";
+	import Reactions from "./reactions/Reactions.svelte";
 
   export let card: CommunityCard;
-</script>
+  </script>
 
 <div
   class="cursor-pointer group bg-neutral-700 rounded-xl h-[310px] relative flex items-start justify-between flex-col p-5 transition-all duration-200 brightness-75 hover:brightness-100 z-[1]"
 >
   <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('{card.image}');"></div>
+    <div class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 " style="background-image: url('https://huggingface.co/datasets/enzostvs/loras-studio/resolve/main/{card.image}?expose=true');"></div>
   </div>
-  <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 opacity-0 group-hover:opacity-100">
+  <div class="bg-black/40 backdrop-blur-sm border border-white/30 rounded-lg px-6 py-3 text-white transition-all duration-200 opacity-0 group-hover:opacity-100 w-full">
     <p class="text-white font-semibold text-base">{card.prompt}</p>
-    <p class="text-white/75 font-regular text-sm">{card.model_name}</p>
+    <p class="text-white/75 font-regular text-sm">{card.model.id}</p>
   </div>
   <div class="flex items-center justify-start gap-2">
-    {#each card.reactions as reaction}
-      <Reaction emoji={reaction.emoji} count={reaction?.users?.length} />
-    {/each}
+    {#if card.reactions.length > 0}
+      <Reactions reactions={card.reactions} />
+    {/if}
     <Add count={card?.reactions?.length} />
   </div>
 </div>

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

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { ReactionType } from "$lib/type";
+  import Reaction from "$lib/components/community/reactions/Reaction.svelte";
+
+  export let reactions: ReactionType[] = [];
+
+  const groupReactionsByEmoji = (reactions: ReactionType[]) => {
+    const grouped = new Set(reactions.map((reaction) => reaction.emoji));
+    return Array.from(grouped).map((emoji) => {
+      return {
+        emoji,
+        count: reactions.filter((reaction) => reaction.emoji === emoji).length,
+      };
+    });
+  };
+
+  const groupedReactions = groupReactionsByEmoji(reactions);
+</script>
+
+{#each groupedReactions as reaction}
+  <Reaction emoji={reaction.emoji} count={reaction?.count} />
+{/each}

src/lib/components/fields/Textarea.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  export let placeholder: string = "Search";
+  export let value: string = "";
+  export let onChange: (value: string) => void = () => {};
+
+  const handleChange = (event: any) => {
+    const target = event.target as HTMLInputElement;
+    onChange(target.value as string);
+  }
+</script>
+
+<textarea
+  {value}
+  {placeholder}
+  rows="5"
+  class="bg-neutral-900 border border-neutral-800 rounded-lg text-neutral-200 text-base outline-none border-none placeholder:text-neutral-500 w-full px-4 py-3"
+  on:input={handleChange}
+/>

src/lib/components/generate/Banner.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Banner from "$lib/assets/banner.webp";
+  import Sparkles from "$lib/assets/sparkles.svg";
+	import Button from "$lib/components/Button.svelte";
+</script>
+
+<div class="w-full rounded-xl mb-8 relative p-6 xl:p-8 flex flex-col xl:flex-row items-start xl:items-center justify-between gap-4 ring-4 ring-white/20">
+  <div
+    class="bg-cover bg-center brightness-75 absolute left-0 top-0 h-full w-full rounded-xl"
+    style={`
+      background-image: url(${Banner});
+      background-position: 0% 0%;
+    `}
+  />
+  <div>
+    <p class="text-xl xl:text-2xl font-extrabold text-white drop-shadow">
+      Share with community!
+    </p>
+    <p class="text-base font-medium text-white drop-shadow mt-1">
+      Once you generate an image, you can share it with the community!
+      <span class="hidden xl:block">
+        You can also see what others have generated, and like their images.
+      </span>
+    </p>
+  </div>
+  <Button href="/gallery">
+    See gallery
+  </Button>
+  <img src={Sparkles} alt="" class="absolute -top-4 -left-2 w-8 object-contain brightness-200 grayscale" />
+  <img src={Sparkles} alt="" class="absolute -rotate-180 -right-4 -bottom-2 w-8 object-contain brightness-200 grayscale" />
+</div>

src/lib/components/generate/Response.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	import Button from "../Button.svelte";
+
+  export let response: string | ArrayBuffer | null = '';
+  export let form: { model: any, inputs: string };
+
+  let loading: boolean = false;
+  let already_saved: boolean = false;
+
+  const saveImage = () => {
+		const link = document.createElement('a');
+		link.href = response as string;
+		link.download = `${form?.inputs?.slice(0, 20)}.png`;
+		document.body.appendChild(link);
+		link.click();
+		document.body.removeChild(link);
+	}
+
+  const share = () => {
+    if (loading) return;
+    loading = true;
+    fetch(`/api/generate/share`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({ image: response, generation: form })
+    }).then(() => {
+      loading = false;
+      already_saved = true;
+    })
+  }
+
+</script>
+
+<div class="w-full border-l border-neutral-800 h-full col-span-2" class:!border-black={!response}>
+  {#if response}
+    {#if typeof response === "string"}
+      <img src={response} alt="Generation" class="w-full mx-auto object-contain" />
+      <div class="p-8 w-full">
+        <div class="w-full flex items-center justify-end gap-4">
+          <Button size="lg" theme="light" icon="material-symbols:save" iconPosition="right" onClick={saveImage}>Save</Button>
+          <Button
+            size="lg"
+            theme="blue"
+            icon="bxs:share"
+            iconPosition="right"
+            loading={loading}
+            disabled={loading || already_saved}
+            onClick={share}
+          >
+            {#if already_saved}
+              Shared!
+            {:else}
+              Share with community
+            {/if}
+          </Button>
+        </div>
+        <p class="text-neutral-500 text-sm text-right mt-2.5">
+          All images not shared with the community are deleted right after generation.
+          <br>
+          Your informations are not shared with anyone.
+        </p>
+        {#if form}
+          <div class="mt-6 grid grid-cols-1 gap-4">
+            <div>
+              <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">
+                <img src={form?.model.image} alt={form?.model.title} class="w-14 h-14 rounded-lg object-cover" />
+                <div>
+                  <p class="text-neutral-200 text-base font-medium">{form?.model.title}</p>
+                  <p class="text-neutral-400 text-sm">{form?.model.id}</p>
+                </div>
+              </div>
+            </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">"{form.inputs}"</p>
+            </div>
+          </div>
+        {/if}
+      </div>
+    {:else}
+      <div>
+        error displayed.
+      </div>
+    {/if}
+  {/if}
+</div>

src/lib/components/models/Card.svelte

@@ -8,16 +8,16 @@
 <div
   class="w-full cursor-pointer group bg-neutral-900 rounded-xl relative flex items-start justify-between flex-col p-3 border border-neutral-800 transition-all duration-200 brightness-75 hover:brightness-100 z-[1]"
 >
-  <div class="w-full h-[270px] relative z-[1] mb-3 overflow-hidden">
+  <div class="w-full h-[350px] relative z-[1] mb-3 overflow-hidden">
     <img src="{card.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt="{card?.title}" />
     <div class="group-hover:opacity-100 opacity-0 translate-x-full group-hover:translate-x-0 transition-all duration-200 absolute right-3 bottom-3">
-      <Button theme="light" size="md" href={`/generate?model=${card.repo}`}>
+      <Button theme="light" size="md" href={`/generate?model=${card.id}`}>
         Try it now
       </Button>
     </div>
   </div>
   <div class="flex items-center justify-between w-full gap-4 py-1">
-    <p class="text-white font-semibold text-base mb-1 truncate">{card?.title ?? card?.repo}</p>
+    <p class="text-white font-semibold text-base mb-1 truncate">{card?.title ?? card?.id}</p>
     <div class="flex items-center justify-end gap-3">
       <div class="text-white text-sm flex items-center justify-end gap-1.5">
         <Icon icon="solar:heart-bold" class="w-5 h-5 text-red-500" />

src/lib/components/models/Submit.svelte

@@ -8,12 +8,12 @@
   let user = get(userStore);
   export let onClose: () => void;
   let model = {
-    repo: '',
+    id: '',
     title: '',
     image: '',
   }
   let error = {
-    repo: '',
+    id: '',
     title: '',
     image: ''
   }
@@ -33,7 +33,7 @@
       } else {
         console.log('Success:', data);
         error = {
-          repo: '',
+          id: '',
           title: '',
           image: ''
         }
@@ -70,14 +70,14 @@
         <span class="text-red-500">*</span>
       </p>
       <Input
-        value={model.repo}
+        value={model.id}
         placeholder="{`${user?.preferred_username ?? 'enzostvs'}/`}"
         prefix="huggingface.co/"
-        onChange={(value) => model.repo = value}
+        onChange={(value) => model.id = value}
       />
-      {#if error.repo}
+      {#if error.id}
         <p class="text-xs text-red-500 mt-1">
-          {error.repo}
+          {error.id}
         </p>
       {/if}
     </div>

src/lib/components/models/autocomplete/Autocomplete.svelte

@@ -8,8 +8,6 @@
   export let onChange: (model: ModelCard | null) => void;
   export let value: ModelCard | null = null;
 
-  console.log(value)
-
   let models: ModelCard[] = [];
   let search: string = "";
   let open: boolean = false;
@@ -81,7 +79,13 @@
     {#if search?.length >= 3}
       {#if models?.length > 0}
         {#each models as model}
-          <Item model={model} onClick={() => onChange(model)} />
+          <Item
+            model={model}
+            onClick={() => {
+              open = false;
+              onChange(model)
+            }}
+          />
         {/each}
       {:else}
         <div class="flex items-center justify-center flex-col gap-2 p-3">
@@ -91,7 +95,13 @@
       {/if}
     {:else}
       {#each defaultModels as model}
-        <Item model={model} onClick={() => onChange(model)} />
+        <Item
+          model={model}
+          onClick={() => {
+            open = false;
+            onChange(model)
+          }}
+        />
       {/each}
     {/if}
   </div>

src/lib/components/models/autocomplete/Item.svelte

@@ -13,6 +13,6 @@
   <img src={model.image} alt={model.title} class="w-14 h-14 rounded-lg object-cover" />
   <div>
     <p class="text-neutral-200 text-base font-medium">{model.title}</p>
-    <p class="text-neutral-400 text-sm">{model.repo}</p>
+    <p class="text-neutral-400 text-sm">{model.id}</p>
   </div>
 </button>

src/lib/type.ts

@@ -8,20 +8,22 @@ export interface OptionRadio {
 export interface CommunityCard {
   reactions: ReactionType[],
   id: string,
-  model_name: string,
+  model: ModelCard,
   prompt: string,
   image: string,
 }
 
 export interface ModelCard {
   title: string,
-  repo: string,
+  id: string,
   likes: number,
   downloads: number,
   image: string,
 }
 
 export interface ReactionType {
+  id: string
+  hf_user_id: string;
   emoji: string
-  users: string[]
+  galleryId: string
 }

src/lib/utils/index.ts

@@ -30,14 +30,14 @@ export const MODELS_FILTER_OPTIONS = [
   },
 ];
 
-export const SIDEBAR_MENUS = [{
-  icon: "solar:gallery-bold-duotone",
-  label: "Gallery",
-  href: "/",
-}, {
+export const SIDEBAR_MENUS = [ {
   icon: "uim:cube",
   label: "Models",
-  href: "/models",
+  href: "/",
+}, {
+  icon: "solar:gallery-bold-duotone",
+  label: "Gallery",
+  href: "/gallery",
 }, {
   icon: "fluent:glance-horizontal-sparkles-16-filled",
   label: "Generate",

src/lib/utils/uploader.ts

@@ -0,0 +1,32 @@
+import { uploadFile } from "@huggingface/hub";
+import type { RepoDesignation, Credentials } from "@huggingface/hub";
+import { env } from '$env/dynamic/private'
+
+const TOTAL_FOLDERS = 10
+// const MAX_IMAGES_PER_FOLDER = 10_000
+
+export const UploaderDataset = async (blob: Blob, name: string) => {
+  const repo: RepoDesignation = { type: "dataset", name: "enzostvs/loras-studio" };
+  const credentials: Credentials = { accessToken: env.SECRET_HF_TOKEN as string };
+  
+  const folder_key = Math.floor(Math.random() * TOTAL_FOLDERS)
+  const formatted_name = name.replace(/[^a-zA-Z0-9]/g, "-")
+  const path = `images-${folder_key}/${formatted_name}.png`
+
+  try {
+    await uploadFile({
+      repo,
+      credentials,
+      file:
+        {
+          path,
+          content: blob,
+        },
+    })
+    return { path, ok: true }
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } catch (e: any) {
+    console.error(e)
+    return { ok: false }
+  }
+}

src/routes/+layout.server.ts

@@ -6,5 +6,5 @@ export async function load({ fetch }) {
     }
   })
   const user = await response.json()
-  return user
+  return { user }
 }

src/routes/+layout.svelte

@@ -9,7 +9,7 @@
 
 <div class="flex items-start">
 	<Sidebar />
-	<main id="app" class="px-6 py-10 lg:px-10 lg:py-12 flex-1 h-screen overflow-y-auto">
+	<main id="app" class="flex-1 h-screen overflow-y-auto">
 		<slot />
 	</main>
 </div>

src/routes/+page.svelte

@@ -1,62 +1,100 @@
 <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 Card from "$lib/components/models/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 { MODELS_FILTER_OPTIONS } from "$lib/utils/index.js";
 	import GoTop from "$lib/components/GoTop.svelte";
+	import Dialog from "$lib/components/dialog/Dialog.svelte";
+	import SubmitModel from "$lib/components/models/Submit.svelte";
 
-	export let data;
+	export let data
 
 	let form = {
-		filter: "likes",
+		filter: "hotest",
+		search: "",
 		page: "0",
 	}
+	let submitModelDialog = false;
 
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;
 
-	const fetchMore = async () => {
+	const handleFetchMore = async () => {
 		form = {...form, page: (Number(form.page) + 1).toString()};
-		const request = await fetch(`/api/community?${new URLSearchParams(form)}`);
+		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/models?${new URLSearchParams(form)}`);
 		const response = await request.json();
-		data = {...data, cards: [...data.cards, ...response.cards ]};
+		if (add) data = {...data, cards: [...data.cards, ...response.cards ]};
+		else data = response;
 	}
 </script>
 
 <svelte:head>
-	<title>Community Gallery</title>
+	<title>Explore Models</title>
 	<meta name="description" content="Svelte demo app" />
 </svelte:head>
 
-<h1 class="text-white font-semibold text-2xl">
-  Community Gallery
-</h1>
-<div class="flex items-center justify-between mt-5">
-	<Radio options={COMMUNITY_FILTER_OPTIONS} value="{form.filter}" onChange={(filter) => form = {...form, filter }} />
-	<div class="items-center justify-end gap-5 hidden lg:flex">
-		<Button icon="ic:round-plus" theme="dark" size="lg">Upload own Image</Button>
-		<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
+<main class="px-6 py-10 lg:px-10 lg:py-12">
+	<Dialog open={submitModelDialog} onClose={() => submitModelDialog = false}>
+		<SubmitModel onClose={() => submitModelDialog = false} />
+	</Dialog>
+	<h1 class="text-white font-semibold text-2xl">
+		Explore Models ({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={MODELS_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
+		<div class="items-center justify-end gap-5 hidden lg:flex">
+			<Button href="https://huggingface.co/new/stable-diffusion-lora" target="_blank" icon="ic:round-plus" theme="dark" size="lg">Create</Button>
+			<Button
+				icon="octicon:upload-16"
+				theme="blue"
+				size="lg"
+				onClick={() => submitModelDialog = true}
+			>
+				Upload model
+			</Button>
+		</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>
+			<Button
+				icon="octicon:upload-16"
+				theme="blue"
+				size="md"
+				onClick={() => submitModelDialog = true}
+			>
+				Upload model
+			</Button>
+		</div>
+	</div>
+	<div class="mt-5 max-w-sm">
+		<Input value={form.search} placeholder="Search a model" onChange={handleChangeSearch} />
 	</div>
-	<div class="items-center justify-end gap-3 flex lg:hidden">
-		<Button icon="ic:round-plus" theme="dark" size="md">Upload own Image</Button>
-		<Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="md">Generate</Button>
+	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-5 gap-5 mt-8 lg:mt-10">
+		{#each data.cards as card}
+			<Card card={card} />
+		{/each}
+		<InfiniteScroll
+			elementScroll="{elementScroll ?? undefined}"
+			threshold={100}
+			hasMore={data.total_items > data.cards.length}
+			on:loadMore={handleFetchMore}
+		/>
+		<GoTop />
 	</div>
-</div>
-<div class="mt-5 max-w-sm">
-	<Input placeholder="Filter by prompt, model..." />
-</div>
-<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-5 gap-5 mt-8 lg:mt-10">
-	{#each data.cards as card}
-		<Card card={card} />
-	{/each}
-	<InfiniteScroll
-		elementScroll="{elementScroll ?? undefined}"
-		threshold={100}
-		hasMore={data.total_items > data.cards.length}
-		on:loadMore={fetchMore}
-	/>
-	<GoTop />
-</div>
+
+</main>

src/routes/+page.ts

@@ -1,5 +1,5 @@
 export async function load({ fetch }) {
-  const response = await fetch("/api/community?page=1", {
+  const response = await fetch("/api/models?page=0&filter=hotest", {
     method: "GET",
     headers: {
       "Content-Type": "application/json"

src/routes/api/bulk-create-models/+server.ts

@@ -1,16 +1,13 @@
+/** @type {import('./$types').RequestHandler} */
+
 import { json } from '@sveltejs/kit';
 import prisma from '$lib/prisma';
-// import { env } from '$env/dynamic/private'
-
-// import jsonData from "$lib/utils/loras.json";
-// import type { ModelCard } from '$lib/type';
-
-/** @type {import('./$types').RequestHandler} */
+import { env } from '$env/dynamic/private'
 
 export async function POST({ request }) {
   const headers = Object.fromEntries(request.headers.entries());
 
-  if (headers["x-hf-token"] !== process.env.HF_TOKEN) {
+  if (headers["x-hf-token"] !== env.SECRET_HF_TOKEN) {
     return Response.json({
       message: "Wrong castle fam :^)"
     }, { status: 401 });
@@ -19,11 +16,11 @@ export async function POST({ request }) {
   const { models } = await request.json();
 
   const cards = await Promise.all(models.map(async (model: Record<string, string>) => {
-    const res = await fetch(`https://huggingface.co/api/models/${model.repo}`)
+    const res = await fetch(`https://huggingface.co/api/models/${model.id}`)
     const data = await res.json();
     const mergedData = {
       image: model.image,
-      repo: model.repo,
+      id: model.repo,
       title: model.title,
       likes: data.likes,
       downloads: data.downloads,
@@ -35,7 +32,7 @@ export async function POST({ request }) {
   for (const model of cards) {
     await prisma.model.create({
       data: {
-        repo: model.repo,
+        id: model.id,
         image: model.image,
         title: model.title,
         likes: model.likes,

src/routes/api/community/+server.ts

@@ -1,22 +1,47 @@
-import { error, json, type RequestEvent } from '@sveltejs/kit';
-// import { env } from '$env/dynamic/private'
-
-import jsonData from "$lib/cards.json";
+import { json, type RequestEvent } from '@sveltejs/kit';
+import prisma from '$lib/prisma';
 
 /** @type {import('./$types').RequestHandler} */
 
 export async function GET(request : RequestEvent) {
-  const hasError = false
-  
   const page = parseInt(request.url.searchParams.get('page') || '0')
-  if (hasError) {
-    return error(500, 'Internal Server Error')
-  }
+  const filter = request.url.searchParams.get('filter') || 'new'
+  const search = request.url.searchParams.get('search') || ''
+  const limit = parseInt(request.url.searchParams.get('limit') || '20')
+
+  const cards = await prisma.gallery.findMany({
+    where: {
+      OR: [
+        { prompt: { contains: search } },
+      ]
+    },
+    orderBy: {
+      ...(filter === 'new' ? {
+        createdAt: 'desc'
+      } : {}
+      )
+    },
+    select: {
+      reactions: true,
+      id: true,
+      prompt: true,
+      image: true,
+      model: true,
+    },
+    skip: limit * page,
+    take: limit,
+  })
 
-  const cards = jsonData.slice(page * 25, page * 25 + 25)
+  const total_reposId = await prisma.gallery.count({
+    where: {
+      OR: [
+        { prompt: { contains: search } },
+      ]
+    },
+  })
 
   return json({
     cards,
-    total_items: jsonData.length,
+    total_items: total_reposId
   })
 }

src/routes/api/generate/+server.ts

@@ -0,0 +1,55 @@
+/** @type {import('./$types').RequestHandler} */
+
+import { json, type RequestEvent } from '@sveltejs/kit';
+import { env } from '$env/dynamic/private'
+
+export async function POST({ request } : RequestEvent) {
+  const generation = await request.json()
+
+  if (!generation?.model?.id) {
+    return json({
+      error: {
+        token: "A model id is required"
+      }
+    }, { status: 400 })
+  }
+
+  if (!generation?.inputs) {
+    return json({
+      error: {
+        token: "An inputs is required"
+      }
+    }, { status: 400 })
+  }
+
+  const response = await fetch(env.SECRET_INFERENCE_API_URL + "/models/" + generation?.model?.id, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${env.SECRET_HF_TOKEN}`,
+      'Content-Type': 'application/json',
+      ['x-use-cache']: "0"
+    },
+    body: JSON.stringify(generation),
+  })
+  .then((res) => res.blob())
+  .then((blob) => blob)
+  .catch((error) => {
+    return {
+      error: error.message,
+    }
+  })
+
+  if ("error" in response) {
+    return json({
+      error: {
+        token: response.error
+      }
+    }, { status: 400 })
+  }
+
+  return new Response(response, {
+    headers: {
+      'Content-Type': 'image/png',
+    },
+  })
+}

src/routes/api/generate/share/+server.ts

@@ -0,0 +1,68 @@
+/** @type {import('./$types').RequestHandler} */
+
+import { UploaderDataset } from '$lib/utils/uploader';
+import { json, type RequestEvent } from '@sveltejs/kit';
+
+import prisma from '$lib/prisma';
+
+export async function POST({ request } : RequestEvent) {
+  const { generation, image } = await request.json()
+
+  if (!generation?.model?.id) {
+    return json({
+      error: {
+        token: "A model id is required"
+      }
+    }, { status: 400 })
+  }
+
+  if (!generation?.inputs) {
+    return json({
+      error: {
+        token: "An inputs is required"
+      }
+    }, { status: 400 })
+  }
+
+  const blob = await fetch(image)
+    .then((res) => res.blob())
+    .then((blob) => blob)
+    .catch((error) => {
+      return json({
+        error: error.message,
+      }, { status: 400 })
+    })
+
+  const success: {
+    ok: boolean,
+    path?: string | undefined
+  } = await UploaderDataset(blob as Blob, generation.inputs)
+
+  if (!success.ok) {
+    return json({
+      error: {
+        token: "Error uploading image"
+      }
+    }, { status: 400 })
+  }
+  
+  const gallery = prisma.gallery.create({
+    data: {
+      image: success.path as string,
+      prompt: generation.inputs,
+      model: {
+        connect: {
+          id: generation.model.id
+        }
+      },
+    }
+  })
+  .catch((error) => {
+    console.log(error)
+  })
+
+  return json({
+    message: "Successfully generated image",
+    gallery
+  })
+}

src/routes/api/models/+server.ts

@@ -1,12 +1,8 @@
-import { error, json, type RequestEvent } from '@sveltejs/kit';
+import { json, type RequestEvent } from '@sveltejs/kit';
 import prisma from '$lib/prisma';
 
 /** @type {import('./$types').RequestHandler} */
 
-// TODO
-// run hooks to update each model by repo using hugging face api.
-// refer to bulk-create-models +server.ts for example
-
 export async function GET(request : RequestEvent) {
   const page = parseInt(request.url.searchParams.get('page') || '0')
   const filter = request.url.searchParams.get('filter') || 'hotest'
@@ -18,7 +14,7 @@ export async function GET(request : RequestEvent) {
       isPublic: true,
       OR: [
         { title: { contains: search } },
-        { repo: { contains: search } },
+        { id: { contains: search } },
       ]
     },
     orderBy: {
@@ -33,16 +29,11 @@ export async function GET(request : RequestEvent) {
       isPublic: true,
       OR: [
         { title: { contains: search } },
-        { repo: { contains: search } },
+        { id: { contains: search } },
       ]
     },
   })
 
-  const hasError = false
-  if (hasError) {
-    return error(500, 'Internal Server Error')
-  }
-
   return json({
     cards,
     total_items: total_reposId

src/routes/api/models/{[repo] → [id]}/+server.ts

@@ -4,11 +4,11 @@ import prisma from '$lib/prisma';
 /** @type {import('./$types').RequestHandler} */
 
 export async function GET(request : RequestEvent) {
-  const repo = request.params.repo?.replace("@", "/")
+  const id = request.params.id?.replace("@", "/")
 
   const model = await prisma.model.findFirst({
     where: {
-      repo
+      id
     }
   })
 

src/routes/api/models/submit/+server.ts

@@ -27,13 +27,13 @@ export async function POST({ request, fetch, cookies }) {
   }
   
   // get model on hugging face
-  const res = await fetch(`https://huggingface.co/api/models/${model.repo}`)
+  const res = await fetch(`https://huggingface.co/api/models/${model.id}`)
   const data = await res.json();
 
   if (data?.error) {
     return json({
       error: {
-        repo: "Model not found on Hugging Face"
+        id: "Model not found on Hugging Face"
       }
     }, { status: 404 })
   }
@@ -54,7 +54,7 @@ export async function POST({ request, fetch, cookies }) {
 
   await prisma.model.create({
     data: {
-      repo: model.repo,
+      id: model.id,
       image: model.image,
       title: model.title,
       likes: data.likes,

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

@@ -1,23 +1,21 @@
 <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/models/Card.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 { MODELS_FILTER_OPTIONS } from "$lib/utils/index.js";
+	import { COMMUNITY_FILTER_OPTIONS } from "$lib/utils/index.js";
 	import GoTop from "$lib/components/GoTop.svelte";
-	import Dialog from "$lib/components/dialog/Dialog.svelte";
-	import SubmitModel from "$lib/components/models/Submit.svelte";
 
-	export let data;
+	export let data
 
 	let form = {
-		filter: "hotest",
-		search: "",
+		filter: "new",
 		page: "0",
+		search: ""
 	}
-	let submitModelDialog = false;
 
 	$: elementScroll = browser ? document?.getElementById('app') : undefined;
 
@@ -37,7 +35,7 @@
 	}
 
 	const refetch = async (add: boolean) => {
-		const request = await fetch(`/api/models?${new URLSearchParams(form)}`);
+		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;
@@ -45,53 +43,38 @@
 </script>
 
 <svelte:head>
-	<title>Explore Models</title>
+	<title>Community Gallery</title>
 	<meta name="description" content="Svelte demo app" />
 </svelte:head>
 
-<Dialog open={submitModelDialog} onClose={() => submitModelDialog = false}>
-	<SubmitModel onClose={() => submitModelDialog = false} />
-</Dialog>
-<h1 class="text-white font-semibold text-2xl">
-  Explore Models ({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={MODELS_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
-	<div class="items-center justify-end gap-5 hidden lg:flex">
-		<Button href="https://huggingface.co/new" target="_blank" icon="ic:round-plus" theme="dark" size="lg">Create</Button>
-		<Button
-			icon="octicon:upload-16"
-			theme="blue"
-			size="lg"
-			onClick={() => submitModelDialog = true}
-		>
-			Submit model
-		</Button>
+<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-center justify-between mt-5">
+		<Radio options={COMMUNITY_FILTER_OPTIONS} value="{form.filter}" onChange={handleChangeFilter} />
+		<div class="items-center justify-end gap-5 hidden lg:flex">
+			<Button icon="ic:round-plus" theme="dark" size="lg">Upload own Image</Button>
+			<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">
+			<Button icon="ic:round-plus" theme="dark" size="md">Upload own Image</Button>
+			<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>
-	<div class="items-center justify-end gap-3 flex lg:hidden">
-		<Button href="https://huggingface.co/new" target="_blank" icon="ic:round-plus" theme="dark" size="md">Create</Button>
-		<Button
-			icon="octicon:upload-16"
-			theme="blue"
-			size="md"
-			onClick={() => submitModelDialog = true}
-		>
-			Submit model
-		</Button>
+	<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-5 gap-5 mt-8 lg:mt-10">
+		{#each data.cards as card}
+			<Card card={card} />
+		{/each}
+		<InfiniteScroll
+			elementScroll="{elementScroll ?? undefined}"
+			threshold={100}
+			hasMore={data.total_items > data.cards.length}
+			on:loadMore={handleFetchMore}
+		/>
+		<GoTop />
 	</div>
-</div>
-<div class="mt-5 max-w-sm">
-	<Input value={form.search} placeholder="Search a model" onChange={handleChangeSearch} />
-</div>
-<div class="mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 2xl:grid-cols-5 gap-5 mt-8 lg:mt-10">
-	{#each data.cards as card}
-		<Card card={card} />
-	{/each}
-	<InfiniteScroll
-		elementScroll="{elementScroll ?? undefined}"
-		threshold={100}
-		hasMore={data.total_items > data.cards.length}
-		on:loadMore={handleFetchMore}
-	/>
-	<GoTop />
-</div>
+</main>

src/routes/{models → gallery}/+page.ts

@@ -1,5 +1,5 @@
 export async function load({ fetch }) {
-  const response = await fetch("/api/models?page=0&filter=hotest", {
+  const response = await fetch("/api/community?page=0&filter=hotest", {
     method: "GET",
     headers: {
       "Content-Type": "application/json"

src/routes/generate/+page.svelte

@@ -4,22 +4,63 @@
 </svelte:head>
 
 <script lang="ts">
+	import Button from "$lib/components/Button.svelte";
+	import Textarea from "$lib/components/fields/Textarea.svelte";
+	import Banner from "$lib/components/generate/Banner.svelte";
+	import Response from "$lib/components/generate/Response.svelte";
 	import Autocomplete from "$lib/components/models/autocomplete/Autocomplete.svelte";
 
 	export let data
 
+	let loading: boolean = false;
+  let response: string | ArrayBuffer | null = '';
+
 	let form = {
 		model: data?.model ?? null,
-		prompt: ""
+		inputs: "",
+		parameters: {
+			negative_prompt: ""
+		}
+	}
+
+	const handleSubmit = async () => {
+		if (loading) return
+    loading = true
+
+		const request = await fetch(`/api/generate`, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json"
+			},
+			body: JSON.stringify(form)
+		});
+		const blob = await request?.clone()?.blob()
+
+		if (blob) {
+      const reader = new FileReader()
+      reader.readAsDataURL(blob)
+      reader.onloadend = () => {
+        const base64data = reader.result
+        response = base64data
+      }
+    }
+
+    const res = await request.clone().json().catch(() => ({}))
+    if (res) {
+      response = res
+    }
+
+    loading = false
 	}
 </script>
 
-<div class="flex items-start w-full h-full gap-16">
-	<div class="w-full">
+<main class="grid grid-cols-5 w-full h-full gap-10">
+	<div class="w-full px-6 py-10 lg:px-10 lg:py-12 col-span-3">
+		<Banner />
 		<h1 class="text-white font-semibold text-2xl">
 			Start generating
 		</h1>
-		<div class="mt-5 grid grid-cols-1 gap-5">
+		<div class="mt-5 grid grid-cols-1 gap-6">
 			<div>
 				<p class="text-neutral-300 mb-2.5 text-base">Models</p>
 				<Autocomplete
@@ -28,11 +69,34 @@
 					onChange={(model) => form.model = model}
 				/>
 			</div>
+			<div>
+				<p class="text-neutral-300 mb-2.5 text-base">Prompt</p>
+				<Textarea
+					value={form?.inputs}
+					placeholder="Aerial photography of a desert through autumn forests, with vibrant red and orange foliage"
+					onChange={(inputs) => form.inputs = inputs}
+				/>
+			</div>
+			<div>
+				<p class="text-neutral-300 mb-2.5 text-base">Negative Prompt</p>
+				<Textarea
+					value={form?.parameters?.negative_prompt}
+					placeholder="Write your negative prompt here"
+					onChange={(negative_prompt) => form.parameters.negative_prompt = negative_prompt}
+				/>
+			</div>
+			<div class="flex justify-end">
+				<Button
+					icon="fluent:glance-horizontal-sparkles-16-filled"
+					theme="pink"
+					size="lg"
+					{loading}
+					onClick={handleSubmit}
+				>
+					Generate
+				</Button>
+			</div>
 		</div>
 	</div>
-	<div class="w-full bg-neutral-100 rounded-2xl h-full p-8">
-		<p class="text-neutral-900 font-semibold text-xl">
-			Result of your generation
-		</p>
-	</div>
-</div>
+	<Response response={response} form={form} />
+</main>