enzostvs HF Staff commited on
Commit
e71d24a
·
0 Parent(s):

initial commot

Browse files
.eslintignore ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .DS_Store
2
+ node_modules
3
+ /build
4
+ /.svelte-kit
5
+ /package
6
+ .env
7
+ .env.*
8
+ !.env.example
9
+
10
+ # Ignore files for PNPM, NPM and YARN
11
+ pnpm-lock.yaml
12
+ package-lock.json
13
+ yarn.lock
.eslintrc.cjs ADDED
@@ -0,0 +1,31 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /** @type { import("eslint").Linter.FlatConfig } */
2
+ module.exports = {
3
+ root: true,
4
+ extends: [
5
+ 'eslint:recommended',
6
+ 'plugin:@typescript-eslint/recommended',
7
+ 'plugin:svelte/recommended',
8
+ 'prettier'
9
+ ],
10
+ parser: '@typescript-eslint/parser',
11
+ plugins: ['@typescript-eslint'],
12
+ parserOptions: {
13
+ sourceType: 'module',
14
+ ecmaVersion: 2020,
15
+ extraFileExtensions: ['.svelte']
16
+ },
17
+ env: {
18
+ browser: true,
19
+ es2017: true,
20
+ node: true
21
+ },
22
+ overrides: [
23
+ {
24
+ files: ['*.svelte'],
25
+ parser: 'svelte-eslint-parser',
26
+ parserOptions: {
27
+ parser: '@typescript-eslint/parser'
28
+ }
29
+ }
30
+ ]
31
+ };
.gitignore ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .DS_Store
2
+ node_modules
3
+ /build
4
+ /.svelte-kit
5
+ /package
6
+ .env
7
+ .env.*
8
+ !.env.example
9
+ .vercel
10
+ .output
11
+ vite.config.js.timestamp-*
12
+ vite.config.ts.timestamp-*
.npmrc ADDED
@@ -0,0 +1 @@
 
 
1
+ engine-strict=true
.prettierignore ADDED
@@ -0,0 +1,13 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ .DS_Store
2
+ node_modules
3
+ /build
4
+ /.svelte-kit
5
+ /package
6
+ .env
7
+ .env.*
8
+ !.env.example
9
+
10
+ # Ignore files for PNPM, NPM and YARN
11
+ pnpm-lock.yaml
12
+ package-lock.json
13
+ yarn.lock
.prettierrc ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "useTabs": true,
3
+ "singleQuote": true,
4
+ "trailingComma": "none",
5
+ "printWidth": 100,
6
+ "plugins": ["prettier-plugin-svelte"],
7
+ "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
8
+ }
Dockerfile ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ # Dockerfile
2
+
3
+ # Use an official Node.js runtime as the base image
4
+ FROM node:18
5
+ USER 1000
6
+
7
+ # Set the working directory in the container
8
+ WORKDIR /usr/src/app
9
+
10
+ # Copy package.json and package-lock.json to the container
11
+ COPY --chown=1000 package.json package-lock.json ./
12
+
13
+ # Install dependencies
14
+ RUN npm install
15
+
16
+ # Copy the rest of the application files to the container
17
+ COPY --chown=1000 . .
18
+
19
+ # Build the Svelte Kit application for production
20
+ RUN npm run build
21
+
22
+ # Expose the application port (assuming your app runs on port 3000)
23
+ EXPOSE 3000
24
+
25
+ # Run the application in production mode
26
+ CMD ["node", "build"]
README.md ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ ---
2
+ title: Wip
3
+ emoji: 👀
4
+ colorFrom: purple
5
+ colorTo: purple
6
+ sdk: docker
7
+ pinned: false
8
+ license: mit
9
+ ---
10
+
11
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
package-lock.json ADDED
The diff for this file is too large to render. See raw diff
 
package.json ADDED
@@ -0,0 +1,41 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "name": "loras-explorer",
3
+ "version": "0.0.1",
4
+ "scripts": {
5
+ "dev": "vite dev",
6
+ "build": "vite build",
7
+ "preview": "vite preview",
8
+ "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
9
+ "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
10
+ "lint": "prettier --check . && eslint .",
11
+ "format": "prettier --write ."
12
+ },
13
+ "devDependencies": {
14
+ "@fontsource/fira-mono": "^4.5.10",
15
+ "@neoconfetti/svelte": "^1.0.0",
16
+ "@sveltejs/adapter-auto": "^2.0.0",
17
+ "@sveltejs/kit": "^1.27.4",
18
+ "@types/cookie": "^0.5.1",
19
+ "@typescript-eslint/eslint-plugin": "^6.0.0",
20
+ "@typescript-eslint/parser": "^6.0.0",
21
+ "autoprefixer": "^10.4.16",
22
+ "eslint": "^8.28.0",
23
+ "eslint-config-prettier": "^9.0.0",
24
+ "eslint-plugin-svelte": "^2.30.0",
25
+ "postcss": "^8.4.32",
26
+ "prettier": "^3.0.0",
27
+ "prettier-plugin-svelte": "^3.0.0",
28
+ "sass": "^1.69.5",
29
+ "svelte": "^4.2.7",
30
+ "svelte-check": "^3.6.0",
31
+ "tailwindcss": "^3.3.6",
32
+ "tslib": "^2.4.1",
33
+ "typescript": "^5.0.0",
34
+ "vite": "^4.4.2"
35
+ },
36
+ "type": "module",
37
+ "dependencies": {
38
+ "@iconify/svelte": "^3.1.4",
39
+ "@sveltejs/adapter-node": "^1.3.1"
40
+ }
41
+ }
postcss.config.js ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ export default {
2
+ plugins: {
3
+ tailwindcss: {},
4
+ autoprefixer: {},
5
+ },
6
+ }
src/app.d.ts ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ // See https://kit.svelte.dev/docs/types#app
2
+ // for information about these interfaces
3
+ declare global {
4
+ namespace App {
5
+ // interface Error {}
6
+ // interface Locals {}
7
+ // interface PageData {}
8
+ // interface Platform {}
9
+ }
10
+ }
11
+
12
+ export {};
src/app.html ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!doctype html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <link rel="icon" href="%sveltekit.assets%/favicon.png" />
6
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
7
+ %sveltekit.head%
8
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
9
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
10
+ <link
11
+ href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,[email protected],100;9..40,200;9..40,300;9..40,400;9..40,500;9..40,600;9..40,700;9..40,800;9..40,900;9..40,1000&family=IBM+Plex+Mono:wght@300;400;500&family=Inter:wght@100;300;500;700&family=Poppins:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700;800;900&display=swap"
12
+ rel="stylesheet"
13
+ />
14
+ </head>
15
+ <body data-sveltekit-preload-data="hover">
16
+ <div style="display: contents">%sveltekit.body%</div>
17
+ </body>
18
+ </html>
src/lib/components/Button.svelte ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import { goto } from '$app/navigation';
3
+ import Icon from "@iconify/svelte";
4
+
5
+ export let theme: "light" | "dark" | "blue" | "pink" = "light";
6
+ export let size: "md" | "lg" = "md";
7
+ export let href: string | undefined = undefined;
8
+ export let icon: string | undefined = undefined;
9
+ export let iconPosition: "left" | "right" = "left";
10
+ export let disabled: boolean = false;
11
+ export let loading: boolean = false;
12
+ export let onClick: () => void = () => {};
13
+
14
+ const handleClick = async () => {
15
+ if (href) {
16
+ goto(href);
17
+ return
18
+ }
19
+ if (disabled || loading) return;
20
+ onClick();
21
+ };
22
+
23
+ </script>
24
+
25
+ <button on:click={handleClick} class="button {theme} {size}">
26
+ {#if icon && iconPosition === "left"}
27
+ <Icon icon={icon} class="w-[20px] h-[20px]" />
28
+ {/if}
29
+ <!-- {#if loading}
30
+ <Icon icon="akar-icons:circle" class="w-5 h-5 animate-spin" />
31
+ {/if} -->
32
+ <slot />
33
+ {#if icon && iconPosition === "right"}
34
+ <Icon icon={icon} class="w-[20px] h-[20px]" />
35
+ {/if}
36
+ </button>
37
+
38
+ <style lang="scss">
39
+ .button {
40
+ @apply rounded-full outline-none border font-medium flex items-center justify-center gap-1.5 transition-all duration-200 cursor-pointer;
41
+ &.lg {
42
+ @apply px-6 py-3 text-base;
43
+ }
44
+ &.md {
45
+ @apply px-5 py-2 text-sm;
46
+ }
47
+ &.light {
48
+ @apply bg-white text-neutral-900 border-white;
49
+ }
50
+ &.pink {
51
+ @apply bg-pink-500 text-white border-pink-500;
52
+ }
53
+ &.dark {
54
+ @apply bg-neutral-900 border-neutral-800 text-neutral-300;
55
+ }
56
+ &:hover {
57
+ @apply brightness-125
58
+ }
59
+ }
60
+ </style>
src/lib/components/fields/Radio.svelte ADDED
@@ -0,0 +1,26 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import type { OptionRadio } from "$lib/type";
3
+ import Icon from "@iconify/svelte";
4
+
5
+ export let value: string;
6
+ export let options: Array<OptionRadio> = [];
7
+ export let onChange: (value: string) => void = () => {};
8
+
9
+ const handleClick = (value: string) => {
10
+ onChange(value);
11
+ };
12
+ </script>
13
+
14
+ <div class="w-full flex items-center justify-start">
15
+ {#each options as option}
16
+ <button
17
+ class={`transition-all duration-200 rounded-full px-4 py-2.5 flex items-center justify-center gap-2 text-sm ${option.value === value ? "bg-neutral-800/60 text-white" : "text-neutral-400"}`}
18
+ on:click={() => handleClick(option.value)}
19
+ >
20
+ {#if option.icon && option.iconColor}
21
+ <Icon icon={option.icon} class="w-4 h-4 {option.value === value && option.iconColor}" />
22
+ {/if}
23
+ {option.label}
24
+ </button>
25
+ {/each}
26
+ </div>
src/lib/components/sidebar/Menu.svelte ADDED
@@ -0,0 +1,14 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import { page } from '$app/stores';
3
+
4
+ export let href: string;
5
+
6
+
7
+ $: active_class = $page.url.pathname === href ? 'bg-neutral-900 !border-neutral-800' : '';
8
+ </script>
9
+
10
+ <li>
11
+ <a href={href} class="transition-all duration-200 w-full flex items-center justify-start text-neutral-200 rounded-xl text-base font-regular px-5 py-3.5 gap-2.5 border border-transparent {active_class}">
12
+ <slot />
13
+ </a>
14
+ </li>
src/lib/components/sidebar/Sidebar.svelte ADDED
@@ -0,0 +1,40 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import Icon from "@iconify/svelte"
3
+ import Menu from "./Menu.svelte";
4
+
5
+ const menus = [{
6
+ icon: "solar:gallery-bold-duotone",
7
+ label: "Gallery",
8
+ href: "/",
9
+ }, {
10
+ icon: "uim:cube",
11
+ label: "Models",
12
+ href: "/models",
13
+ }, {
14
+ icon: "fluent:glance-horizontal-sparkles-16-filled",
15
+ label: "Generate",
16
+ href: "/generate",
17
+ }]
18
+ </script>
19
+
20
+ <aside class="bg-neutral-950 h-screen border-r border-neutral-800 w-full max-w-[344px]">
21
+ <header class="text-white px-8 pb-8 pt-10 text-xl tracking-wider font-semibold">
22
+ LoRA Studio
23
+ </header>
24
+ <div class="px-4">
25
+ <ul class="grid grid-cols-1 gap-2">
26
+ {#each menus as menu}
27
+ <Menu href={menu.href}>
28
+ <Icon icon={menu.icon} class="w-5 h-5" />
29
+ {menu.label}
30
+ </Menu>
31
+
32
+ {/each}
33
+ </ul>
34
+ <hr class="border-neutral-800/50 mt-10 mx-4">
35
+ <Menu href="https://huggingface.co/">
36
+ <Icon icon="ph:question-fill" class="w-5 h-5" />
37
+ Help
38
+ </Menu>
39
+ </div>
40
+ </aside>
src/lib/styles/tailwind.css ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ @tailwind base;
2
+ @tailwind components;
3
+ @tailwind utilities;
4
+
5
+ html, body {
6
+ @apply bg-black overflow-hidden h-screen;
7
+ font-family: "DM Sans", "sans-serif";
8
+ }
src/lib/type.ts ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ export interface OptionRadio {
2
+ label: string;
3
+ value: string;
4
+ icon?: string
5
+ iconColor?: string
6
+ }
src/routes/+layout.svelte ADDED
@@ -0,0 +1,11 @@
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script>
2
+ import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
3
+ import "$lib/styles/tailwind.css"
4
+ </script>
5
+
6
+ <div class="app flex items-start">
7
+ <Sidebar />
8
+ <main class="px-10 pt-12 pb-12 flex-1 h-screen overflow-auto">
9
+ <slot />
10
+ </main>
11
+ </div>
src/routes/+page.svelte ADDED
@@ -0,0 +1,73 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <script lang="ts">
2
+ import Button from "$lib/components/Button.svelte";
3
+ import Radio from "$lib/components/fields/Radio.svelte";
4
+ import Icon from "@iconify/svelte";
5
+
6
+ let form = {
7
+ filter: "likes"
8
+ }
9
+
10
+ const filter_options = [
11
+ {
12
+ label: "Most Liked",
13
+ value: "likes",
14
+ icon: "lucide:heart",
15
+ iconColor: "text-red-500"
16
+ },
17
+ {
18
+ label: "New",
19
+ value: "new",
20
+ icon: "lucide:zap",
21
+ iconColor: "text-yellow-500"
22
+ },
23
+ ];
24
+
25
+ </script>
26
+
27
+ <svelte:head>
28
+ <title>Community Gallery</title>
29
+ <meta name="description" content="Svelte demo app" />
30
+ </svelte:head>
31
+
32
+ <h1 class="text-white font-semibold text-2xl">
33
+ Community Gallery
34
+ </h1>
35
+ <div class="flex items-center justify-between mt-5">
36
+ <Radio options={filter_options} value="{form.filter}" onChange={(filter) => form = {...form, filter }} />
37
+ <div class="flex items-center justify-end gap-5 w-full">
38
+ <Button icon="ic:round-plus" theme="dark" size="lg">Upload own Image</Button>
39
+ <Button icon="fluent:glance-horizontal-sparkles-16-filled" href="/generate" theme="pink" size="lg">Generate</Button>
40
+ </div>
41
+ </div>
42
+ <div class="mx-auto grid grid-cols-5 gap-5 mt-8 lg:mt-10">
43
+ {#each Array(40) as _, i}
44
+ <div
45
+ class="cursor-pointer group overflow-hidden bg-neutral-700 rounded-xl h-[310px] relative flex items-start justify-between flex-col p-5 bg-cover bg-center transition-all duration-200 brightness-75 hover:brightness-100"
46
+ style="
47
+ background-image: url('https://images.unsplash.com/photo-1682687220015-186f63b8850a?q=80&w=4075&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
48
+ "
49
+ >
50
+ <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">
51
+ <p class="text-white font-semibold text-base">A mini hamster in a wheat field</p>
52
+ <p class="text-white/75 font-regular text-sm">LoRA model name</p>
53
+ </div>
54
+ <div class="flex items-center justify-start gap-2">
55
+ <div class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white">
56
+ <span>❤️</span>
57
+ 12
58
+ </div>
59
+ <div class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white">
60
+ <span>🤩</span>
61
+ 56
62
+ </div>
63
+ <div class="rounded-full bg-white text-sm text-neutral-800 font-bold flex items-center justify-start gap-1.5 px-2.5 py-1 border border-white">
64
+ <span>⭐</span>
65
+ 32
66
+ </div>
67
+ <div class="rounded-full text-sm text-white/80 hover:text-white font-bold flex items-center justify-start gap-1.5 px-1.5 py-1 border border-dashed border-white/80 hover:border-white">
68
+ <Icon icon="fluent:emoji-add-16-regular" class="w-5 h-5" />
69
+ </div>
70
+ </div>
71
+ </div>
72
+ {/each}
73
+ </div>
src/routes/generate/+page.svelte ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ <svelte:head>
2
+ <title>Generate your Image</title>
3
+ <meta name="description" content="Svelte demo app" />
4
+ </svelte:head>
5
+
6
+ <h1 class="text-white font-semibold text-2xl">
7
+ Generate your Image
8
+ </h1>
src/routes/models/+page.svelte ADDED
@@ -0,0 +1,8 @@
 
 
 
 
 
 
 
 
 
1
+ <svelte:head>
2
+ <title>Explore models</title>
3
+ <meta name="description" content="Svelte demo app" />
4
+ </svelte:head>
5
+
6
+ <h1 class="text-white font-semibold text-2xl">
7
+ Explore models
8
+ </h1>
static/favicon.png ADDED
static/robots.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ # https://www.robotstxt.org/robotstxt.html
2
+ User-agent: *
3
+ Disallow:
svelte.config.js ADDED
@@ -0,0 +1,23 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ import adapter from '@sveltejs/adapter-auto';
2
+ import adapterNode from '@sveltejs/adapter-node';
3
+ import { vitePreprocess } from '@sveltejs/kit/vite';
4
+
5
+ /** @type {import('@sveltejs/kit').Config} */
6
+ const config = {
7
+ // Consult https://kit.svelte.dev/docs/integrations#preprocessors
8
+ // for more information about preprocessors
9
+ preprocess: [vitePreprocess()],
10
+
11
+ kit: {
12
+ // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
13
+ // If your environment is not supported or you settled on a specific environment, switch out the adapter.
14
+ // See https://kit.svelte.dev/docs/adapters for more information about adapters.
15
+ adapter: process.env.NODE_ENV === 'development' ? adapter({
16
+ out: 'build',
17
+ }) : adapterNode({
18
+ out: 'build',
19
+ }),
20
+ },
21
+ };
22
+
23
+ export default config;
tailwind.config.js ADDED
@@ -0,0 +1,12 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /** @type {import('tailwindcss').Config} */
2
+ export default {
3
+ content: ['./src/**/*.{html,js,svelte,ts}'],
4
+ theme: {
5
+ fontFamily: {
6
+ sans: ['DM Sans', 'IBM Plex Mono'],
7
+ },
8
+ extend: {},
9
+ },
10
+ plugins: [],
11
+ }
12
+
tsconfig.json ADDED
@@ -0,0 +1,18 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ {
2
+ "extends": "./.svelte-kit/tsconfig.json",
3
+ "compilerOptions": {
4
+ "allowJs": true,
5
+ "checkJs": true,
6
+ "esModuleInterop": true,
7
+ "forceConsistentCasingInFileNames": true,
8
+ "resolveJsonModule": true,
9
+ "skipLibCheck": true,
10
+ "sourceMap": true,
11
+ "strict": true,
12
+ "moduleResolution": "bundler"
13
+ }
14
+ // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
15
+ //
16
+ // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
17
+ // from the referenced tsconfig.json - TypeScript does not merge them in
18
+ }
vite.config.ts ADDED
@@ -0,0 +1,6 @@
 
 
 
 
 
 
 
1
+ import { sveltekit } from '@sveltejs/kit/vite';
2
+ import { defineConfig } from 'vite';
3
+
4
+ export default defineConfig({
5
+ plugins: [sveltekit()],
6
+ });