fix dockerfile

Dockerfile

@@ -17,10 +17,10 @@ RUN npm install
 COPY --chown=1000 . .
 
 # Build the Svelte Kit application for production
-RUN npm run build
+# RUN npm run build
 
 # Expose the application port (assuming your app runs on port 3000)
 EXPOSE 3000
 
-# Run the application in production mode
-CMD ["node", "build"]
+# Start the application
+ENTRYPOINT ["/usr/src/app/entrypoint.sh"]

entrypoint.sh

@@ -0,0 +1,2 @@
+#!/bin/bash
+npm run build && npx prisma generate && npx prisma migrate deploy && npx prisma db push && npm start

package-lock.json

@@ -10,6 +10,7 @@
 			"dependencies": {
 				"@iconify/svelte": "^3.1.4",
 				"@prisma/client": "^5.7.1",
+				"@svelte-put/clickoutside": "^3.0.1",
 				"@sveltejs/adapter-node": "^1.3.1",
 				"cookie": "^0.6.0",
 				"js-cookie": "^3.0.5",
@@ -1281,6 +1282,11 @@
 			"resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
 			"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
 		},
+		"node_modules/@svelte-put/clickoutside": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/@svelte-put/clickoutside/-/clickoutside-3.0.1.tgz",
+			"integrity": "sha512-RhuRmD2RpXF63Mb48DxKkgqIPQ458TnL8M1m6HqtnPh5/g5p+PKIn/L2SPs1s9us2Kn02Y1/txHhOSYbVi6Z2Q=="
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-2.1.1.tgz",

package.json

@@ -40,6 +40,7 @@
 	"dependencies": {
 		"@iconify/svelte": "^3.1.4",
 		"@prisma/client": "^5.7.1",
+		"@svelte-put/clickoutside": "^3.0.1",
 		"@sveltejs/adapter-node": "^1.3.1",
 		"cookie": "^0.6.0",
 		"js-cookie": "^3.0.5",

src/lib/components/models/Card.svelte

@@ -2,21 +2,16 @@
 	import type { ModelCard } from "$lib/type";
 	import Button from "$lib/components/Button.svelte";
 	import Icon from "@iconify/svelte";
-	import Loading from "../Loading.svelte";
 
   export let card: ModelCard;
-
 </script>
 <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-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 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">
+      <Button theme="light" size="md" href={`/generate?model=${card.repo}`}>
         Try it now
       </Button>
     </div>

src/lib/components/models/Submit.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
   import { get } from 'svelte/store';
   import { userStore } from "$lib/stores/use-user";
 
@@ -6,10 +6,11 @@
 	import Button from "$lib/components/Button.svelte";
 
   let user = get(userStore);
+  export let onClose: () => void;
   let model = {
-    repo: 'enzostvs/hair-colorrr',
-    title: 'testt',
-    image: 'dewdwedd',
+    repo: '',
+    title: '',
+    image: '',
   }
   let error = {
     repo: '',
@@ -70,7 +71,7 @@
       </p>
       <Input
         value={model.repo}
-        placeholder="enzostvs/hair-color"
+        placeholder="{`${user.preferred_username}/`}"
         prefix="huggingface.co/"
         onChange={(value) => model.repo = value}
       />
@@ -109,7 +110,7 @@
     </div>
   </main>
   <footer class="flex items-center justify-end gap-3">
-    <Button theme="dark" size="md">Cancel</Button>
+    <Button theme="dark" size="md" onClick={onClose}>Cancel</Button>
     <Button theme="blue" size="md" onClick={handleSubmit}>Submit</Button>
   </footer>
 </div>

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

@@ -0,0 +1,98 @@
+<script lang="ts">
+  import { clickoutside } from '@svelte-put/clickoutside';
+	import type { ModelCard } from "$lib/type";
+	import Icon from "@iconify/svelte";
+	import Item from "./Item.svelte";
+
+  export let defaultModels: ModelCard[] = [];
+  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;
+
+  const handleSearch = (event: any) => {
+    search = event.target.value;
+    if (search.length >= 3) {
+      open = true;
+      onSearch();
+    } else {
+      models = []
+    }
+  }
+
+  const onSearch = async () => {
+    const request = await fetch(`/api/models?search=${search}`);
+    const response = await request.json();
+
+    if (response?.cards && response?.cards.length > 0) {
+      models = response.cards;
+    } else {
+      models = [];
+    }
+  }
+
+  const handleClickOutside = (event: any) => {
+    if (event.target === event.currentTarget) {
+      open = false;
+    }
+  }
+
+</script>
+
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="w-full bg-neutral-900 rounded-xl border border-neutral-800 p-4 text-neutral-500 focus-within:border-neutral-700 transition-all duration-200 relative"
+  use:clickoutside on:clickoutside={() => open = false}
+  on:click={handleClickOutside}
+>
+  {#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>
+      </div>
+      <button on:click={() => onChange(null)}>
+        <Icon icon="maki:cross" class="w-4 h-4 text-neutral-500 transition-all duration-200 cursor-pointer" />
+      </button>
+    </div>
+    {:else}
+    <div class="flex items-center justify-start gap-2 group">
+      <Icon icon="lucide:search" class="w-5 h-5 text-neutral-500 group-focus-within:text-neutral-100 transition-all duration-200" />
+      <input
+        value={search}
+        type="text"
+        class="w-full bg-transparent text-neutral-200 placeholder:text-neutral-500 outline-none"
+        placeholder="Search a model"
+        on:focus={() => open = true}
+        on:input={handleSearch}
+      />
+    </div>
+  {/if}
+  <div
+    class="w-full absolute bottom-0 left-0 p-2 bg-neutral-900 rounded-xl translate-y-[calc(100%+12px)] border border-neutral-800 transition-all duration-200 z-10"
+    class:opacity-0="{!open}"
+    class:pointer-events-none="{!open}"
+  > 
+    {#if search?.length >= 3}
+      {#if models?.length > 0}
+        {#each models as model}
+          <Item model={model} onClick={() => onChange(model)} />
+        {/each}
+      {:else}
+        <div class="flex items-center justify-center flex-col gap-2 p-3">
+          <Icon icon="bxs:sad" class="w-12 h-12 text-neutral-500 transition-all duration-200" />
+          <p class="text-neutral-500 text-base">No models found</p>
+        </div>
+      {/if}
+    {:else}
+      {#each defaultModels as model}
+        <Item model={model} onClick={() => onChange(model)} />
+      {/each}
+    {/if}
+  </div>
+</div>

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import type { ModelCard } from "$lib/type";
+	
+  export let model: ModelCard;
+  export let onClick: () => void;
+
+</script>
+
+<button
+  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" />
+  <div>
+    <p class="text-neutral-200 text-base font-medium">{model.title}</p>
+    <p class="text-neutral-400 text-sm">{model.repo}</p>
+  </div>
+</button>

src/lib/components/sidebar/Sidebar.svelte

@@ -26,7 +26,7 @@
 </script>
 
 <button class="bg-transparent absolute top-10 right-8 cursor-pointer xl:hidden" on:click="{handleClick}">
-  <Icon icon="{isOpen ? "mdi:hamburger-remove" : "mdi:hamburger-minus"}" class="w-7 h-7 text-white" />
+  <Icon icon="{isOpen ? "mdi:hamburger-remove" : "mdi:hamburger-plus"}" class="w-7 h-7 text-white" />
 </button>
 <aside class="bg-neutral-950 h-screen border-r border-neutral-800 w-full max-w-[344px] absolute -translate-x-full xl:translate-x-0 transition-all duration-200 xl:relative z-20 xl:z-0 flex flex-col justify-between" class:translate-x-0={isOpen}>
   <div class="w-full">

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

@@ -11,6 +11,7 @@ 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') || ''
+  const limit = parseInt(request.url.searchParams.get('limit') || '20')
 
   const cards = await prisma.model.findMany({
     where: {
@@ -23,8 +24,8 @@ export async function GET(request : RequestEvent) {
     orderBy: {
       ...(filter === 'hotest' ? { downloads: 'desc' } : { likes: 'desc' })
     },
-    skip: 20 * page,
-    take: 20,
+    skip: limit * page,
+    take: limit,
   })
 
   const total_reposId = await prisma.model.count({

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

@@ -0,0 +1,26 @@
+import { json, type RequestEvent } from '@sveltejs/kit';
+import prisma from '$lib/prisma';
+
+/** @type {import('./$types').RequestHandler} */
+
+export async function GET(request : RequestEvent) {
+  const repo = request.params.repo?.replace("@", "/")
+
+  const model = await prisma.model.findFirst({
+    where: {
+      repo
+    }
+  })
+
+  if (!model) {
+    return json({
+      error: {
+        token: "Model params is required"
+      }
+    }, { status: 401 })
+  }
+
+  return json({
+    model
+  })
+}

src/routes/generate/+page.svelte

@@ -3,6 +3,36 @@
 	<meta name="description" content="Svelte demo app" />
 </svelte:head>
 
-<h1 class="text-white font-semibold text-2xl">
-  Generate your Image
-</h1>
+<script lang="ts">
+	import Autocomplete from "$lib/components/models/autocomplete/Autocomplete.svelte";
+
+	export let data
+
+	let form = {
+		model: data?.model ?? null,
+		prompt: ""
+	}
+</script>
+
+<div class="flex items-start w-full h-full gap-16">
+	<div class="w-full">
+		<h1 class="text-white font-semibold text-2xl">
+			Start generating
+		</h1>
+		<div class="mt-5 grid grid-cols-1 gap-5">
+			<div>
+				<p class="text-neutral-300 mb-2.5 text-base">Models</p>
+				<Autocomplete
+					value={form?.model}
+					defaultModels={data?.models?.cards}
+					onChange={(model) => form.model = model}
+				/>
+			</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>

src/routes/generate/+page.ts

@@ -0,0 +1,32 @@
+export async function load({ url, fetch }) {
+  let model_parameter = url.searchParams.get("model")
+
+  let model = null;
+
+  if (model_parameter) {
+    model_parameter = model_parameter?.replace("/", "@")
+  
+    const model_request = await fetch(`/api/models/${model_parameter}`, {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json"
+      }
+    })
+  
+    model = await model_request.json()
+  }
+
+
+  const models_request = await fetch("/api/models?page=0&filter=likes&limit=5", {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json"
+    }
+  })
+  const models = await models_request.json()
+
+  return {
+    model: model?.model,
+    models
+  }
+}

src/routes/models/+page.svelte

@@ -50,7 +50,7 @@
 </svelte:head>
 
 <Dialog open={submitModelDialog} onClose={() => submitModelDialog = false}>
-	<SubmitModel />
+	<SubmitModel onClose={() => submitModelDialog = false} />
 </Dialog>
 <h1 class="text-white font-semibold text-2xl">
   Explore Models ({data.total_items})