refacto whole models system

package-lock.json

@@ -19,6 +19,7 @@
 				"desm": "^1.3.1",
 				"express": "^4.18.2",
 				"js-cookie": "^3.0.5",
+				"moment": "^2.30.1",
 				"svelte-infinite-scroll": "^2.0.1"
 			},
 			"devDependencies": {
@@ -5250,6 +5251,14 @@
 				"mkdirp": "bin/cmd.js"
 			}
 		},
+		"node_modules/moment": {
+			"version": "2.30.1",
+			"resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+			"integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+			"engines": {
+				"node": "*"
+			}
+		},
 		"node_modules/mri": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",

package.json

@@ -52,6 +52,7 @@
 		"desm": "^1.3.1",
 		"express": "^4.18.2",
 		"js-cookie": "^3.0.5",
+		"moment": "^2.30.1",
 		"svelte-infinite-scroll": "^2.0.1"
 	}
 }

prisma/schema.prisma

@@ -13,7 +13,6 @@ datasource db {
 model Model {
   id              String    @id
   createdAt       DateTime  @default(now())
-  title           String
   image           String
   likes           Int?
   downloads       Int?

src/lib/components/Button.svelte

@@ -3,7 +3,7 @@
 	import Icon from "@iconify/svelte";
 	import Loading from './Loading.svelte';
 
-  export let theme: "light" | "dark" | "blue" | "pink"  = "light";
+  export let theme: "light" | "dark" | "blue" | "pink" | "red"  = "light";
   export let size: "md" | "lg" = "md";
   export let href: string | undefined = undefined;
   export let icon: string | undefined = undefined;
@@ -73,6 +73,9 @@
     &.dark {
       @apply bg-neutral-900 border-neutral-800 text-neutral-300;
     }
+    &.red {
+      @apply bg-red-500 text-white border-red-500;
+    }
     &:hover {
       @apply brightness-125
     }

src/lib/components/community/Card.svelte

@@ -45,7 +45,7 @@
   on:click={handleClick}
 >
   <div class="w-full h-full absolute top-0 left-0 -z-[1] rounded-xl overflow-hidden" class:!brightness-50={loading}>
-    <img class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110" src="/api/images/{card.image}" alt="{card.prompt}" />
+    <img class="w-full h-full bg-center bg-cover transition-all duration-200 group-hover:scale-110 object-cover" src="/api/images/{card.image}" alt="{card.prompt}" />
     <div class="bg-gradient-to-b from-transparent via-black/50 to-black/70 absolute h-[100px] bottom-0 left-0 w-full"></div>
   </div>
   <div class="group-hover:opacity-100 opacity-0 translate-y-full group-hover:translate-y-0 transition-all duration-200 flex flex-col gap-4 w-full">

src/lib/components/models/Card.svelte

@@ -1,35 +1,64 @@
 <script lang="ts">
-  import { modelStore } from "$lib/stores/use-model";
 	import type { ModelCard } from "$lib/type";
 	import Icon from "@iconify/svelte";
   import { goto } from "$app/navigation";
   import { page } from "$app/stores"; 
+	import Button from "$lib/components/Button.svelte";
+	import { success } from "$lib/utils/toaster";
 
   export let card: ModelCard;
 
+  let visible = true;
+
   const handleClick = async () => {
-    // const request = await fetch(`/api/models/${card?.id?.replace("/", "@")}?full=true`);
-    // const { model } = await request.json();
-    // modelStore.set({
-    //   model,
-    //   open: true
-    // });
     $page.url.searchParams.set('model', card?.id);
     goto(`?${$page.url.searchParams.toString()}`);
   };
+
+  const publish = async () => {
+    const request = await fetch(`/api/models/${card.id.replace("/", "@")}`, {
+      method: "POST",
+    });
+    const response = await request.json();
+    if (response.success) {
+      card.isPublic = true;
+      success("Model published successfully!");
+    }
+  };
+
+  const remove = async () => {
+    const request = await fetch(`/api/models/${card.id.replace("/", "@")}`, {
+      method: "DELETE",
+    });
+    const response = await request.json();
+    if (response.success) {
+      visible = false;
+      success("Model deleted successfully!");
+    }
+  };
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <!-- svelte-ignore a11y-click-events-have-key-events -->
+{#if visible}
 <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-90 hover:brightness-100 z-[1]"
   on:click={handleClick}
 >
   <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}" />
+    <img src="{card.image}" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt="{card?.id}" />
+    {#if !card.isPublic}
+      <div
+        class="absolute flex items-center justify-between bottom-0 left-0 w-full p-5 bg-neutral-900/30"
+        on:click={e => e.stopPropagation()}
+      >
+        <Button theme="red" onClick={remove}>Delete</Button>
+        <Button theme="blue" icon="icon-park-solid:check-one" onClick={publish}>Publish</Button>
+      </div>
+    {/if}
   </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?.id}</p>
+    <p class="text-white font-semibold text-base mb-1 truncate">{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" />
@@ -41,4 +70,5 @@
       </div>
     </div>
   </div>
-</div>
+</div>
+{/if}

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

@@ -51,8 +51,8 @@
   {#if value}
     <div class="flex items-center justify-between gap-4">
       <div class="flex items-center justify-start gap-3">
-        <img src={value.image} alt={value.title} class="w-6 h-6 rounded-lg object-cover" />
-        <p class="text-neutral-200 text-base font-medium">{value.title}</p>
+        <img src={value.image} alt={value.id} class="w-6 h-6 rounded-lg object-cover" />
+        <p class="text-neutral-200 text-base font-medium">{value.id}</p>
       </div>
       <button on:click={() => onChange(null)}>
         <Icon icon="maki:cross" class="w-4 h-4 text-neutral-500 transition-all duration-200 cursor-pointer" />

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

@@ -10,9 +10,9 @@
   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"
   on:click={onClick}
 >
-  <img src={model.image} alt={model.title} class="w-14 h-14 rounded-lg object-cover" />
+  <img src={model.image} alt={model.id} 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-200 text-base font-medium">{model.id}</p>
     <p class="text-neutral-400 text-sm">{model.id}</p>
   </div>
 </button>

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

@@ -56,7 +56,7 @@
             <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">
-                {model?.title ?? model?.id}
+                {model?.id}
               </p>
               <a href="https://huggingface.co/{model?.id}" target="_blank" class="text-neutral-400 underline hover:text-neutral-300 flex items-center justify-start gap-1">
                 <Icon icon="iconamoon:link-external-fill" class="w-4 h-4" /> 
@@ -75,7 +75,8 @@
               {model?.likes ?? 0}
             </div>
             <a
-            href="https://huggingface.co/{model?.id}/tree/main"
+              href="https://huggingface.co/{model?.id}/tree/main"
+              target="_blank"
               class="bg-blue-500 bg-opacity-20 border border-blue-500 hover:bg-opacity-60 transition-all duration-200 md:px-4 md:py-2 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 md:gap-2 font-medium text-sm md:text-base"
             >
               <Icon icon="solar:download-square-bold" class="lg:w-5 lg:h-5 w-4 h-4 text-blue-500" />

src/lib/components/sidebar/Sidebar.svelte

@@ -26,7 +26,6 @@
     window.location.href = "/";
   }
 
-  // sveltekit close sidebar on route change
   if (browser) {
     page.subscribe((value) => {
       if (isOpen) handleClick();
@@ -69,7 +68,12 @@
       <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-lg font-semibold">
+            {user.name}
+            {#if user?.is_admin}
+              <span class="text-yellow-400 bg-yellow-500 bg-opacity-20 rounded-lg px-2 py-1 text-xs font-semibold ml-1">HF Staff</span>
+            {/if}
+          </p>
           <p class="text-sm leading-none text-neutral-400">{user.preferred_username}</p>
         </div>
       </div>

src/lib/stores/use-user.ts

@@ -6,16 +6,4 @@ export const userStore = writable<any>(null);
 
 export const openWindowLogin = async () => {
   window.open("/api/auth/login", "_blank");
-};
-
-// export const loginFromCode = async (code: string) => {
-//   const request = await fetch(`/api/auth`, {
-//     method: "POST",
-//     body: JSON.stringify({ code }),
-//   });
-//   const { ok, token } = await request.json();
-//   if (ok) {
-//     cookies.set("hf_access_token", token, { expires: 1, domain: process.env.SPACE_HOST });
-//     window.location.reload();
-//   }
-// };
+};

src/lib/type.ts

@@ -16,12 +16,12 @@ export interface CommunityCard {
 }
 
 export interface ModelCard {
-  title: string,
   id: string,
   likes: number,
   downloads: number,
   image: string,
   instance_prompt?: string,
+  isPublic: boolean,
   gallery?: CommunityCard[],
   comments?: CommentType[],
   infos?: {

src/routes/+page.ts

@@ -3,7 +3,6 @@ import { modelStore } from "$lib/stores/use-model";
 export async function load({ fetch, url }) {
   const model_param = url.searchParams.get("model")
 
-
   if (model_param) {
     const model_request = await fetch(`/api/models/${model_param?.replace("/", "@")}?full=true`, {
       method: "GET",

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

@@ -1,5 +1,6 @@
 import { json, type RequestEvent } from '@sveltejs/kit';
 import prisma from '$lib/prisma';
+import { env } from '$env/dynamic/private';
 
 /** @type {import('./$types').RequestHandler} */
 
@@ -60,6 +61,9 @@ export async function GET(request : RequestEvent) {
   }
 
   return json({
-    user
+    user: {
+      ...user,
+      is_admin: env.SECRET_HF_ADMIN.includes(user.sub)
+    }
   })
 }

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

@@ -1,9 +1,22 @@
 import { json, type RequestEvent } from '@sveltejs/kit';
 import prisma from '$lib/prisma';
+import { env } from '$env/dynamic/private';
+
+import { tokenIsAvailable } from '$lib/utils';
 
 /** @type {import('./$types').RequestHandler} */
 
 export async function GET(request : RequestEvent) {
+  const token = request.cookies.get('hf_access_token')
+  let IS_ADMIN = !!token
+
+  if (token) {
+    const user = await tokenIsAvailable(token)
+    if (user) {
+      IS_ADMIN = env.SECRET_HF_ADMIN.includes(user.sub)
+    }
+  }
+
   const page = parseInt(request.url.searchParams.get('page') || '0')
   const filter = request.url.searchParams.get('filter') || 'hotest'
   const search = request.url.searchParams.get('search') || ''
@@ -11,9 +24,8 @@ export async function GET(request : RequestEvent) {
 
   const cards = await prisma.model.findMany({
     where: {
-      isPublic: true,
+      ...(IS_ADMIN ? {} : { isPublic: true }),
       OR: [
-        { title: { contains: search } },
         { id: { contains: search } },
       ]
     },
@@ -26,9 +38,8 @@ export async function GET(request : RequestEvent) {
 
   const total_reposId = await prisma.model.count({
     where: {
-      isPublic: true,
+      ...(IS_ADMIN ? {} : { isPublic: true }),
       OR: [
-        { title: { contains: search } },
         { id: { contains: search } },
       ]
     },

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

@@ -1,6 +1,7 @@
 import { json, type RequestEvent } from '@sveltejs/kit';
 import { env } from '$env/dynamic/private'
 import prisma from '$lib/prisma';
+import { tokenIsAvailable } from '$lib/utils';
 
 /** @type {import('./$types').RequestHandler} */
 
@@ -18,7 +19,6 @@ export async function GET({ url, params } : RequestEvent) {
       likes: true,
       downloads: true,
       image: true,
-      title: true,
       instance_prompt: true,
       gallery: {
         select: {
@@ -54,7 +54,6 @@ export async function GET({ url, params } : RequestEvent) {
     } : {
       instance_prompt: true,
       image: true,
-      title: true,
       id: true,
     }
   })
@@ -90,3 +89,98 @@ export async function GET({ url, params } : RequestEvent) {
     }
   })
 }
+
+export async function POST({ params, cookies } : RequestEvent) {
+  const token = cookies.get('hf_access_token')
+  if (!token) {
+    return json({
+      error: {
+        token: "Token is required"
+      }
+    }, { status: 401 })
+  }
+
+  const user = await tokenIsAvailable(token)
+  if (!user || !env.SECRET_HF_ADMIN.includes(user.sub)) {
+    return json({
+      error: {
+        token: "Wrong castle fam :^)"
+      }
+    }, { status: 401 })
+  }
+
+  const id = params.id?.replace("@", "/")
+
+  const model = await prisma.model.findFirst({
+    where: {
+      id,
+    }
+  })
+
+  if (!model) {
+    return json({
+      error: {
+        token: "Model not found"
+      }
+    }, { status: 404 })
+  }
+
+  await prisma.model.update({
+    where: {
+      id,
+    },
+    data: {
+      isPublic: true,
+    }
+  })
+
+  return json({
+    success: true
+  })
+}
+
+export async function DELETE({ params, cookies } : RequestEvent) {
+  const token = cookies.get('hf_access_token')
+  if (!token) {
+    return json({
+      error: {
+        token: "Token is required"
+      }
+    }, { status: 401 })
+  }
+
+  const user = await tokenIsAvailable(token)
+  if (!user || !env.SECRET_HF_ADMIN.includes(user.sub)) {
+    return json({
+      error: {
+        token: "Wrong castle fam :^)"
+      }
+    }, { status: 401 })
+  }
+
+  const id = params.id?.replace("@", "/")
+
+  const model = await prisma.model.findFirst({
+    where: {
+      id,
+    }
+  })
+
+  if (!model) {
+    return json({
+      error: {
+        token: "Model not found"
+      }
+    }, { status: 404 })
+  }
+
+  await prisma.model.delete({
+    where: {
+      id,
+    }
+  })
+
+  return json({
+    success: true
+  })
+}

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

@@ -56,7 +56,6 @@ export async function POST({ request, fetch, cookies }) {
     data: {
       id: model.id,
       image: model.image,
-      title: model.title,
       likes: data.likes,
       downloads: data.downloads,
       isPublic: false,

src/routes/api/{bulk-create-models → scrap-models}/+server.ts

@@ -1,6 +1,7 @@
 /** @type {import('./$types').RequestHandler} */
 
 import { json } from '@sveltejs/kit';
+// import moment from 'moment';
 import prisma from '$lib/prisma';
 import { env } from '$env/dynamic/private'
 
@@ -13,39 +14,48 @@ export async function POST({ request }) {
     }, { status: 401 });
   }
 
-  const { models } = await request.json();
+  const response = await fetch(`https://huggingface.co/api/models?limit=5000&filter=lora%2Cdiffusers&sort=createdAt&full=true&config=true`)
+  const responseData = await response.json();
 
-  const cards = await Promise.all(models.map(async (model: Record<string, string>) => {
-    const res = await fetch(`https://huggingface.co/api/models/${model.repo}`, {
-      headers: {
-        "Authorization": `Bearer ${env.SECRET_HF_TOKEN}`
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let index = 0;
+  for (const model of responseData) {
+    if (index % 50 === 0) {
+      await new Promise(resolve => setTimeout(resolve, 4000));
+    }
+
+    const hasReadme = model?.siblings?.find((sibling: Record<string, string>) => sibling?.rfilename === "README.md")
+    if (hasReadme) {
+      const readmeRes = await fetch(`https://huggingface.co/${model.id}/raw/main/README.md`)
+      const readme = await readmeRes.text().catch(() => null)
+      if (!readme) {
+        continue
+      }
+      const imageRegex = /!\[.*\]\((.*)\)/
+      const image = readme.match(imageRegex)?.[1]
+
+      if (!image) {
+        continue
       }
-    })
-    const data = await res.json();
-    const mergedData = {
-      image: model.image,
-      id: model.repo,
-      title: model.title,
-      likes: data.likes,
-      instance_prompt: data?.cardData?.instance_prompt ?? null,
-      downloads: data.downloads,
+      if (image.startsWith("http")) model.image = image
+      else if (image.includes(model.id)) {
+        const path = image.split("/")
+        model.image = `https://huggingface.co/${model.id}/raw/main/${path[path.length - 1]}`
+      }
+      else model.image = `https://huggingface.co/${model.id}/raw/main/${image.replace("./", "")}`
     }
-    return mergedData
-  }
-  ))
 
-  for (const model of cards) {
     await prisma.model.create({
       data: {
         id: model.id,
         image: model.image,
-        title: model.title,
         likes: model.likes,
-        instance_prompt: model.instance_prompt,
         downloads: model.downloads,
-        isPublic: true,
+        isPublic: false,
       }
-    })
+    }).catch(() => {})
+
+    index++
   }
 
   const total_items = await prisma.model.count()

vite.config.ts

@@ -7,10 +7,4 @@ export default defineConfig({
 		enhancedImages(),
 		sveltekit(),
 	],
-	// server: {
-	// 	fs: {
-	// 		strict: false,
-	// 		allow: [".."],
-	// 	},
-	// }
 });