add user validation

package-lock.json

@@ -11,6 +11,8 @@
 				"@iconify/svelte": "^3.1.4",
 				"@prisma/client": "^5.7.1",
 				"@sveltejs/adapter-node": "^1.3.1",
+				"cookie": "^0.6.0",
+				"js-cookie": "^3.0.5",
 				"svelte-infinite-scroll": "^2.0.1"
 			},
 			"devDependencies": {
@@ -20,6 +22,7 @@
 				"@sveltejs/enhanced-img": "^0.1.7",
 				"@sveltejs/kit": "^1.27.4",
 				"@types/cookie": "^0.5.1",
+				"@types/js-cookie": "^3.0.6",
 				"@typescript-eslint/eslint-plugin": "^6.0.0",
 				"@typescript-eslint/parser": "^6.0.0",
 				"autoprefixer": "^10.4.16",
@@ -1346,6 +1349,14 @@
 				"vite": "^4.0.0"
 			}
 		},
+		"node_modules/@sveltejs/kit/node_modules/cookie": {
+			"version": "0.5.0",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+			"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/@sveltejs/vite-plugin-svelte": {
 			"version": "2.5.3",
 			"resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-2.5.3.tgz",
@@ -1393,6 +1404,12 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
 			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
 		},
+		"node_modules/@types/js-cookie": {
+			"version": "3.0.6",
+			"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
+			"integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
+			"dev": true
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.15",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
@@ -2019,9 +2036,9 @@
 			"dev": true
 		},
 		"node_modules/cookie": {
-			"version": "0.5.0",
-			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
-			"integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
+			"version": "0.6.0",
+			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.6.0.tgz",
+			"integrity": "sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==",
 			"engines": {
 				"node": ">= 0.6"
 			}
@@ -2893,6 +2910,14 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
+		"node_modules/js-cookie": {
+			"version": "3.0.5",
+			"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
+			"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
+			"engines": {
+				"node": ">=14"
+			}
+		},
 		"node_modules/js-yaml": {
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",

package.json

@@ -17,6 +17,7 @@
 		"@sveltejs/enhanced-img": "^0.1.7",
 		"@sveltejs/kit": "^1.27.4",
 		"@types/cookie": "^0.5.1",
+		"@types/js-cookie": "^3.0.6",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
 		"autoprefixer": "^10.4.16",
@@ -40,6 +41,8 @@
 		"@iconify/svelte": "^3.1.4",
 		"@prisma/client": "^5.7.1",
 		"@sveltejs/adapter-node": "^1.3.1",
+		"cookie": "^0.6.0",
+		"js-cookie": "^3.0.5",
 		"svelte-infinite-scroll": "^2.0.1"
 	}
 }

prisma/migrations/20240104145615_init/migration.sql

@@ -1,25 +0,0 @@
-/*
-  Warnings:
-
-  - You are about to drop the column `downloads` on the `Model` table. All the data in the column will be lost.
-  - You are about to drop the column `image` on the `Model` table. All the data in the column will be lost.
-  - You are about to drop the column `likes` on the `Model` table. All the data in the column will be lost.
-  - You are about to drop the column `title` on the `Model` table. All the data in the column will be lost.
-  - You are about to drop the column `trigger_word` on the `Model` table. All the data in the column will be lost.
-  - You are about to drop the column `weights` on the `Model` table. All the data in the column will be lost.
-
-*/
--- RedefineTables
-PRAGMA foreign_keys=OFF;
-CREATE TABLE "new_Model" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "repo" TEXT NOT NULL,
-    "isPublic" BOOLEAN NOT NULL DEFAULT false
-);
-INSERT INTO "new_Model" ("createdAt", "id", "isPublic", "repo") SELECT "createdAt", "id", "isPublic", "repo" FROM "Model";
-DROP TABLE "Model";
-ALTER TABLE "new_Model" RENAME TO "Model";
-CREATE UNIQUE INDEX "Model_repo_key" ON "Model"("repo");
-PRAGMA foreign_key_check;
-PRAGMA foreign_keys=ON;

prisma/migrations/20240104153500_init/migration.sql

@@ -1,2 +0,0 @@
--- AlterTable
-ALTER TABLE "Model" ADD COLUMN "image" TEXT;

prisma/migrations/20240104154419_init/migration.sql

@@ -1,25 +0,0 @@
-/*
-  Warnings:
-
-  - Added the required column `title` to the `Model` table without a default value. This is not possible if the table is not empty.
-  - Made the column `image` on table `Model` required. This step will fail if there are existing NULL values in that column.
-
-*/
--- RedefineTables
-PRAGMA foreign_keys=OFF;
-CREATE TABLE "new_Model" (
-    "id" TEXT NOT NULL PRIMARY KEY,
-    "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
-    "repo" TEXT NOT NULL,
-    "title" TEXT NOT NULL,
-    "image" TEXT NOT NULL,
-    "likes" INTEGER,
-    "downloads" INTEGER,
-    "isPublic" BOOLEAN NOT NULL DEFAULT false
-);
-INSERT INTO "new_Model" ("createdAt", "id", "image", "isPublic", "repo") SELECT "createdAt", "id", "image", "isPublic", "repo" FROM "Model";
-DROP TABLE "Model";
-ALTER TABLE "new_Model" RENAME TO "Model";
-CREATE UNIQUE INDEX "Model_repo_key" ON "Model"("repo");
-PRAGMA foreign_key_check;
-PRAGMA foreign_keys=ON;

prisma/migrations/{20240104143521_init → 20240104191224_init}/migration.sql

@@ -3,10 +3,8 @@ CREATE TABLE "Model" (
     "id" TEXT NOT NULL PRIMARY KEY,
     "createdAt" DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
     "repo" TEXT NOT NULL,
-    "title" TEXT,
-    "trigger_word" TEXT,
+    "title" TEXT NOT NULL,
     "image" TEXT,
-    "weights" TEXT,
     "likes" INTEGER,
     "downloads" INTEGER,
     "isPublic" BOOLEAN NOT NULL DEFAULT false

prisma/schema.prisma

@@ -11,14 +11,15 @@ datasource db {
 }
 
 model Model {
-  id        String   @id @default(uuid())
-  createdAt DateTime @default(now())
-  repo      String   @unique
-  title     String
+  id         String   @id @default(uuid())
+  createdAt  DateTime @default(now())
+  repo       String   @unique
+  title      String
   // trigger_word String?
-  image     String
+  image      String
   // weights      String?
-  likes     Int?
-  downloads Int?
-  isPublic  Boolean  @default(false)
+  likes      Int?
+  downloads  Int?
+  isPublic   Boolean  @default(false)
+  hf_user_id String?
 }

src/lib/components/Button.svelte

@@ -6,6 +6,7 @@ import { goto } from '$app/navigation';
   export let size: "md" | "lg" = "md";
   export let href: string | undefined = undefined;
   export let icon: string | undefined = undefined;
+  export let target: "_blank" | "_self" | undefined = undefined;
   export let iconPosition: "left" | "right" = "left";
   export let disabled: boolean = false;
   export let loading: boolean = false;
@@ -13,7 +14,8 @@ import { goto } from '$app/navigation';
 
   const handleClick = async () => {
     if (href) {
-      goto(href);
+      if (target) window.open(href, target);
+      else goto(href);
       return
     }
     if (disabled || loading) return;

src/lib/components/GoTop.svelte

@@ -7,15 +7,24 @@
     element?.scrollTo({ top: 0, behavior: 'smooth' });
   }
 
-  // WIP display only if scroll > 0 dynamically
-  $: visible = browser ? (document?.getElementById('app') as HTMLElement)?.scrollTop > 0 : false;
+  let visible = false;
+
+  if (browser) {
+    const element = document.getElementById('app');
+    element?.addEventListener('scroll', () => {
+      const scroll = element?.scrollTop ?? 0;
+      visible = scroll > 100;
+    });
+  }
+
 </script>
 
 <button
-  class="rounded-full h-12 w-12 bg-white shadow-lg brightness-90 transition-all duration-200 hover:brightness-110 fixed bottom-8 right-8 flex items-center justify-center text-indigo-500 z-10"
+  class="rounded-full text-sm text-neutral-950 font-semibold px-3 py-1 bg-white shadow-lg brightness-90 transition-all duration-200 hover:brightness-110 fixed bottom-8 right-8 flex items-center gap-1.5 justify-center z-10"
   class:opacity-0={!visible}
   class:pointer-events-none={!visible}
   on:click={goTop}
->
-  <Icon icon="foundation:arrow-up" class="w-8 h-8" />
+  >
+  <Icon icon="foundation:arrow-up" class="w-4 h-4" />
+  Go back to top
 </button>

src/lib/components/community/Card.svelte

@@ -4,7 +4,6 @@
 	import type { CommunityCard } from "$lib/type";
 
   export let card: CommunityCard;
-
 </script>
 
 <div
@@ -21,6 +20,6 @@
     {#each card.reactions as reaction}
       <Reaction emoji={reaction.emoji} count={reaction?.users?.length} />
     {/each}
-    <Add />
+    <Add count={card?.reactions?.length} />
   </div>
 </div>

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

@@ -3,6 +3,8 @@
 	import Icon from "@iconify/svelte";
   import { REACTION_EMOJIS } from "$lib/utils";
 
+  export let count: number;
+
   let isOpen: boolean = false;
   $: uuid = Math.random().toString(36).substring(7);
 
@@ -30,12 +32,12 @@
     <Icon icon="fluent:emoji-add-16-regular" class="w-5 h-5" />
   </button>
   <div
-    class="opacity-0 pointer-events-none absolute left-0 top-0 max-w-max flex items-center justify-center bg-white px-4 py-1 rounded-full gap-0 text-2xl -translate-y-[calc(100%+8px)] -translate-x-1/2"
+    class={`opacity-0 pointer-events-none absolute max-w-max flex items-center justify-center bg-white px-1 py-1 rounded-full gap-0 text-xl ${count > 0 ? "-translate-y-[calc(100%+8px)] -translate-x-1/2 left-0 top-0" : "right-0 translate-x-[calc(100%+8px)]"}`}
     class:opacity-100={isOpen}
     class:pointer-events-auto={isOpen}
   >
     {#each REACTION_EMOJIS as emoji}
-      <div class="w-9 h-9 hover:bg-neutral-200 rounded-full text-center flex items-center justify-center">{emoji}</div>
+      <div class="w-8 h-8 hover:bg-neutral-200 rounded-full text-center flex items-center justify-center">{emoji}</div>
     {/each}
   </div>
 </div>

src/lib/components/models/Card.svelte

@@ -14,7 +14,7 @@
     <!-- <div class="w-full h-full bg-center bg-cover rounded-lg bg-neutral-800 relative" style=""> -->
      <!-- <Loading /> -->
     <!-- </div> -->
-    <img src="{card.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center" alt="{card?.title}" />
+    <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">
         Try it now

src/lib/components/models/Submit.svelte

@@ -1,12 +1,59 @@
 <script>
+  import { get } from 'svelte/store';
+  import { userStore } from "$lib/stores/use-user";
+
 	import Input from "$lib/components/fields/Input.svelte";
 	import Button from "$lib/components/Button.svelte";
 
+  let user = get(userStore);
+  let model = {
+    repo: 'enzostvs/hair-colorrr',
+    title: 'testt',
+    image: 'dewdwedd',
+  }
+  let error = {
+    repo: '',
+    title: '',
+    image: ''
+  }
+
+  const handleSubmit = async () => {
+    fetch('/api/models/submit', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(model),
+    })
+    .then(response => response.json())
+    .then(data => {
+      if (data.error) {
+        error = data.error;
+      } else {
+        console.log('Success:', data);
+        error = {
+          repo: '',
+          title: '',
+          image: ''
+        }
+      }
+    })
+  }
 </script>
 <div class="grid grid-cols-1 gap-8">
-  <p class="bg-yellow-500/40 rounded-full text-xs text-yellow-400 px-3 py-1 font-semibold max-w-max">
-    You need to be logged in to submit a model.
-  </p>
+  {#if user?.picture}
+    <div class="flex items-center justify-start gap-3">
+      <img src={user.picture} alt="User avatar" class="w-8 h-8 rounded-full border border-white inline-block" />
+      <div class="w-full text-left text-white">
+        <p class="text-base font-semibold">{user.name}</p>
+        <p class="text-xs leading-none text-neutral-400">{user.preferred_username}</p>
+      </div>
+    </div>
+  {:else}
+    <p class="bg-yellow-500/40 rounded-full text-xs text-yellow-400 px-3 py-1 font-semibold max-w-max">
+      You need to be logged in to submit a model.
+    </p>
+  {/if}
   <header>
     <p class="text-white font-semibold text-lg">
       Submit a Model
@@ -17,16 +64,52 @@
   </header>
   <main class="grid grid-cols-1 gap-6">
     <div>
-      <p class="text-xs uppercase text-neutral-400 font-semibold mb-2">HuggingFace model URL</p>
-      <Input placeholder="enzostvs/hair-color" prefix="huggingface.co/" />
+      <p class="text-xs uppercase text-neutral-400 font-semibold mb-2">
+        HuggingFace model URL
+        <span class="text-red-500">*</span>
+      </p>
+      <Input
+        value={model.repo}
+        placeholder="enzostvs/hair-color"
+        prefix="huggingface.co/"
+        onChange={(value) => model.repo = value}
+      />
+      {#if error.repo}
+        <p class="text-xs text-red-500 mt-1">
+          {error.repo}
+        </p>
+      {/if}
+    </div>
+    <div>
+      <p class="text-xs uppercase text-neutral-400 font-semibold mb-2">
+        Title
+        <span class="text-red-500">*</span>
+      </p>
+      <Input
+        value={model.title}
+        placeholder="Simpson style"
+        onChange={(value) => model.title = value}
+      />
     </div>
     <div>
-      <p class="text-xs uppercase text-neutral-400 font-semibold mb-2">Title</p>
-      <Input placeholder="Simpson style" />
+      <p class="text-xs uppercase text-neutral-400 font-semibold mb-2">
+        Thumbnail image
+        <span class="text-red-500">*</span>
+      </p>
+      <Input
+        value={model.image}
+        placeholder="https://"
+        onChange={(value) => model.image = value}
+      />
+      {#if error.image}
+        <p class="text-xs text-red-500 mt-1">
+          {error.image}
+        </p>
+      {/if}
     </div>
   </main>
   <footer class="flex items-center justify-end gap-3">
     <Button theme="dark" size="md">Cancel</Button>
-    <Button theme="blue" size="md">Submit</Button>
+    <Button theme="blue" size="md" onClick={handleSubmit}>Submit</Button>
   </footer>
 </div>

src/lib/components/sidebar/Menu.svelte

@@ -3,7 +3,6 @@
 
   export let href: string;
 
-
   $: active_class = $page.url.pathname === href ? 'bg-neutral-900 !border-neutral-800' : '';
 </script>
 

src/lib/components/sidebar/Sidebar.svelte

@@ -1,10 +1,15 @@
 <script lang="ts">
+  import cookies from 'js-cookie';
   import Icon from "@iconify/svelte"
+  import { get } from 'svelte/store';
+  import { userStore } from "$lib/stores/use-user";
+	import { SIDEBAR_MENUS } from "$lib/utils";
+  import HFLogo from "$lib/assets/hf-logo.svg";
 
 	import Menu from "./Menu.svelte";
-  import HFLogo from "$lib/assets/hf-logo.svg";
 
   let isOpen = false;
+  let user = get(userStore);
 
   const handleClick = () => {
     const app = document.getElementById("app");
@@ -14,19 +19,10 @@
     isOpen = !isOpen;
   }
 
-  const menus = [{
-    icon: "solar:gallery-bold-duotone",
-    label: "Gallery",
-    href: "/",
-  }, {
-    icon: "uim:cube",
-    label: "Models",
-    href: "/models",
-  }, {
-    icon: "fluent:glance-horizontal-sparkles-16-filled",
-    label: "Generate",
-    href: "/generate",
-  }]
+  const logout = async () => {
+    cookies.remove("hf_access_token");
+    window.location.href = "/";
+  }
 </script>
 
 <button class="bg-transparent absolute top-10 right-8 cursor-pointer xl:hidden" on:click="{handleClick}">
@@ -39,7 +35,7 @@
     </header>
     <div class="px-4">
       <ul class="grid grid-cols-1 gap-2">
-        {#each menus as menu}
+        {#each SIDEBAR_MENUS as menu}
           <Menu href={menu.href}>
             <Icon icon={menu.icon} class="w-5 h-5" />
             {menu.label}
@@ -54,8 +50,23 @@
       </Menu>
     </div>
   </div>
-  <footer class="text-white text-center text-base pb-8 px-8 flex items-center justify-center gap-2 cursor-pointer">
-    <img src={HFLogo} alt="Hugging Face logo" class="w-8 h-8 inline-block" />
-    <u>Sign in with Hugging Face</u>
-  </footer>
+  {#if user?.picture}
+    <footer class="text-white text-center text-base pb-8 px-8 flex items-center justify-between gap-4">
+      <div class="flex items-center justify-start gap-4">
+        <img src={user.picture} alt="User avatar" class="w-10 h-10 rounded-full border-2 border-white inline-block" />
+        <div class="w-full text-left">
+          <p class="text-lg font-semibold">{user.name}</p>
+          <p class="text-sm leading-none text-neutral-400">{user.preferred_username}</p>
+        </div>
+      </div>
+      <button on:click={logout}>
+        <Icon icon="solar:logout-2-bold" class="text-red-500 hover:text-red-400 w-7 h-7" />
+      </button>
+    </footer>
+  {:else}
+    <footer class="text-white text-center text-base pb-8 px-8 flex items-center justify-center gap-2 cursor-pointer">
+      <img src={HFLogo} alt="Hugging Face logo" class="w-8 h-8 inline-block" />
+      <u>Sign in with Hugging Face</u>
+    </footer>
+  {/if}
 </aside>

src/lib/stores/use-user.ts

@@ -0,0 +1,4 @@
+import { writable } from "svelte/store";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const userStore = writable<any>(null);

src/lib/utils/index.ts

@@ -28,4 +28,30 @@ export const MODELS_FILTER_OPTIONS = [
     icon: "ph:fire-bold",
     iconColor: "text-orange-500"
   },
-];
+];
+
+export const SIDEBAR_MENUS = [{
+  icon: "solar:gallery-bold-duotone",
+  label: "Gallery",
+  href: "/",
+}, {
+  icon: "uim:cube",
+  label: "Models",
+  href: "/models",
+}, {
+  icon: "fluent:glance-horizontal-sparkles-16-filled",
+  label: "Generate",
+  href: "/generate",
+}]
+
+export const tokenIsAvailable = async (token: string) => {
+  const userRequest = await fetch("https://huggingface.co/oauth/userinfo", {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  })
+
+  const user = await userRequest.clone().json().catch(() => ({}));
+  return !!user?.sub
+}

src/routes/+layout.server.ts

@@ -0,0 +1,10 @@
+export async function load({ fetch }) {
+  const response = await fetch("/api/@me", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+  const user = await response.json()
+  return user
+}

src/routes/+layout.svelte

@@ -1,6 +1,10 @@
 <script>
 	import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
 	import "$lib/styles/tailwind.css"
+	import { userStore } from "$lib/stores/use-user";
+
+	export let data;
+	userStore.set(data.user);
 </script>
 
 <div class="flex items-start">

src/routes/api/@me/+server.ts

@@ -0,0 +1,34 @@
+import { json, type RequestEvent } from '@sveltejs/kit';
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function GET(request : RequestEvent) {
+  if (!request.cookies.get('hf_access_token')) {
+    return json({
+      error: {
+        token: "You must be logged"
+      }
+    }, { status: 401 })
+  }
+
+  const response = await fetch("https://huggingface.co/oauth/userinfo", {
+    method: "GET",
+    headers: {
+      Authorization: `Bearer ${request.cookies.get('hf_access_token')}`,
+    },
+  })
+
+  const user = await response.clone().json().catch(() => ({}));
+
+  if (!user?.sub) {
+    return json({
+      error: {
+        token: "Token is invalid"
+      }
+    }, { status: 401 })
+  }
+
+  return json({
+    user
+  })
+}

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

@@ -8,7 +8,6 @@ import prisma from '$lib/prisma';
 // 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'
   const search = request.url.searchParams.get('search') || ''
@@ -28,7 +27,15 @@ export async function GET(request : RequestEvent) {
     take: 20,
   })
 
-  const total_reposId = await prisma.model.count()
+  const total_reposId = await prisma.model.count({
+    where: {
+      isPublic: true,
+      OR: [
+        { title: { contains: search } },
+        { repo: { contains: search } },
+      ]
+    },
+  })
 
   const hasError = false
   if (hasError) {

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

@@ -0,0 +1,69 @@
+import { json } from '@sveltejs/kit';
+import prisma from '$lib/prisma';
+
+import { tokenIsAvailable } from '$lib/utils';
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function POST({ request, fetch, cookies }) {
+  const model = await request.json();
+
+  const token = cookies.get('hf_access_token')
+  if (!token) {
+    return json({
+      error: {
+        token: "You must be logged"
+      }
+    }, { status: 401 })
+  }
+
+  const is_token_available = await tokenIsAvailable(token)
+  if (!is_token_available) {
+    return json({
+      error: {
+        token: "Invalid token"
+      }
+    }, { status: 401 })
+  }
+  
+  // get model on hugging face
+  const res = await fetch(`https://huggingface.co/api/models/${model.repo}`)
+  const data = await res.json();
+
+  if (data?.error) {
+    return json({
+      error: {
+        repo: "Model not found on Hugging Face"
+      }
+    }, { status: 404 })
+  }
+
+  // check model.image is valid url and is an image
+  const imageRes = await fetch(model.image)
+  const imageBlob = await imageRes.blob()
+  const isImage = imageBlob.type.startsWith("image/")
+  const isValidUrl = imageRes.status === 200
+
+  if (!isImage || !isValidUrl) {
+    return json({
+      error: {
+        image: "Invalid image url"
+      }
+    }, { status: 400 })
+  }
+
+  await prisma.model.create({
+    data: {
+      repo: model.repo,
+      image: model.image,
+      title: model.title,
+      likes: data.likes,
+      downloads: data.downloads,
+      isPublic: false,
+    }
+  })
+
+  return json({
+    success: true
+  })
+}

src/routes/models/+page.svelte

@@ -58,7 +58,7 @@
 <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 icon="ic:round-plus" theme="dark" size="lg">Create</Button>
+		<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"
@@ -69,7 +69,7 @@
 		</Button>
 	</div>
 	<div class="items-center justify-end gap-3 flex lg:hidden">
-		<Button icon="ic:round-plus" theme="dark" size="md">Create</Button>
+		<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"