initial commot

.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.eslintrc.cjs

@@ -0,0 +1,31 @@
+/** @type { import("eslint").Linter.FlatConfig } */
+module.exports = {
+	root: true,
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'plugin:svelte/recommended',
+		'prettier'
+	],
+	parser: '@typescript-eslint/parser',
+	plugins: ['@typescript-eslint'],
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020,
+		extraFileExtensions: ['.svelte']
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	},
+	overrides: [
+		{
+			files: ['*.svelte'],
+			parser: 'svelte-eslint-parser',
+			parserOptions: {
+				parser: '@typescript-eslint/parser'
+			}
+		}
+	]
+};

.gitignore

@@ -0,0 +1,12 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+.vercel
+.output
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*

.npmrc

@@ -0,0 +1 @@
+engine-strict=true

.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

.prettierrc

@@ -0,0 +1,8 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

Dockerfile

@@ -0,0 +1,26 @@
+# Dockerfile
+
+# Use an official Node.js runtime as the base image
+FROM node:18
+USER 1000
+
+# Set the working directory in the container
+WORKDIR /usr/src/app
+
+# Copy package.json and package-lock.json to the container
+COPY --chown=1000 package.json package-lock.json ./
+
+# Install dependencies
+RUN npm install
+
+# Copy the rest of the application files to the container
+COPY --chown=1000 . .
+
+# Build the Svelte Kit application for production
+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"]

README.md

@@ -0,0 +1,11 @@
+---
+title: Wip
+emoji: 👀
+colorFrom: purple
+colorTo: purple
+sdk: docker
+pinned: false
+license: mit
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

package.json

@@ -0,0 +1,41 @@
+{
+	"name": "loras-explorer",
+	"version": "0.0.1",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --check . && eslint .",
+		"format": "prettier --write ."
+	},
+	"devDependencies": {
+		"@fontsource/fira-mono": "^4.5.10",
+		"@neoconfetti/svelte": "^1.0.0",
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/kit": "^1.27.4",
+		"@types/cookie": "^0.5.1",
+		"@typescript-eslint/eslint-plugin": "^6.0.0",
+		"@typescript-eslint/parser": "^6.0.0",
+		"autoprefixer": "^10.4.16",
+		"eslint": "^8.28.0",
+		"eslint-config-prettier": "^9.0.0",
+		"eslint-plugin-svelte": "^2.30.0",
+		"postcss": "^8.4.32",
+		"prettier": "^3.0.0",
+		"prettier-plugin-svelte": "^3.0.0",
+		"sass": "^1.69.5",
+		"svelte": "^4.2.7",
+		"svelte-check": "^3.6.0",
+		"tailwindcss": "^3.3.6",
+		"tslib": "^2.4.1",
+		"typescript": "^5.0.0",
+		"vite": "^4.4.2"
+	},
+	"type": "module",
+	"dependencies": {
+		"@iconify/svelte": "^3.1.4",
+		"@sveltejs/adapter-node": "^1.3.1"
+	}
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

src/app.d.ts

@@ -0,0 +1,12 @@
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface Platform {}
+	}
+}
+
+export {};

src/app.html

@@ -0,0 +1,18 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link
+			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"
+			rel="stylesheet"
+		/>
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>

src/lib/components/Button.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+import { goto } from '$app/navigation';
+	import Icon from "@iconify/svelte";
+
+  export let theme: "light" | "dark" | "blue" | "pink"  = "light";
+  export let size: "md" | "lg" = "md";
+  export let href: string | undefined = undefined;
+  export let icon: string | undefined = undefined;
+  export let iconPosition: "left" | "right" = "left";
+  export let disabled: boolean = false;
+  export let loading: boolean = false;
+  export let onClick: () => void = () => {};
+
+  const handleClick = async () => {
+    if (href) {
+      goto(href);
+      return
+    }
+    if (disabled || loading) return;
+    onClick();
+  };
+
+</script>
+
+<button on:click={handleClick} class="button {theme} {size}">
+  {#if icon && iconPosition === "left"}
+    <Icon icon={icon} class="w-[20px] h-[20px]" />
+  {/if}
+  <!-- {#if loading}
+    <Icon icon="akar-icons:circle" class="w-5 h-5 animate-spin" />
+  {/if} -->
+  <slot />
+  {#if icon && iconPosition === "right"}
+    <Icon icon={icon} class="w-[20px] h-[20px]" />
+  {/if}
+</button>
+
+<style lang="scss">
+  .button {
+    @apply rounded-full outline-none border font-medium flex items-center justify-center gap-1.5 transition-all duration-200 cursor-pointer;
+    &.lg {
+      @apply px-6 py-3 text-base;
+    }
+    &.md {
+      @apply px-5 py-2 text-sm;
+    }
+    &.light {
+      @apply bg-white text-neutral-900 border-white;
+    }
+    &.pink {
+      @apply bg-pink-500 text-white border-pink-500;
+    }
+    &.dark {
+      @apply bg-neutral-900 border-neutral-800 text-neutral-300;
+    }
+    &:hover {
+      @apply brightness-125
+    }
+  }
+</style>

src/lib/components/fields/Radio.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import type { OptionRadio } from "$lib/type";
+  import Icon from "@iconify/svelte";
+
+  export let value: string;
+  export let options: Array<OptionRadio> = [];
+  export let onChange: (value: string) => void = () => {};
+
+  const handleClick = (value: string) => {
+    onChange(value);
+  };
+</script>
+
+<div class="w-full flex items-center justify-start">
+  {#each options as option}
+    <button
+      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"}`}
+      on:click={() => handleClick(option.value)}
+    >
+      {#if option.icon && option.iconColor}
+        <Icon icon={option.icon} class="w-4 h-4 {option.value === value && option.iconColor}" />
+      {/if}
+      {option.label}
+    </button>
+  {/each}
+</div>

src/lib/components/sidebar/Menu.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { page } from '$app/stores';
+
+  export let href: string;
+
+
+  $: active_class = $page.url.pathname === href ? 'bg-neutral-900 !border-neutral-800' : '';
+</script>
+
+<li>
+  <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}">
+    <slot />
+  </a>
+</li>

src/lib/components/sidebar/Sidebar.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import Icon from "@iconify/svelte"
+	import Menu from "./Menu.svelte";
+
+  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",
+  }]
+</script>
+
+<aside class="bg-neutral-950 h-screen border-r border-neutral-800 w-full max-w-[344px]">
+  <header class="text-white px-8 pb-8 pt-10 text-xl tracking-wider font-semibold">
+    LoRA Studio
+  </header>
+  <div class="px-4">
+    <ul class="grid grid-cols-1 gap-2">
+      {#each menus as menu}
+        <Menu href={menu.href}>
+          <Icon icon={menu.icon} class="w-5 h-5" />
+          {menu.label}
+        </Menu>
+        
+      {/each}
+    </ul>
+    <hr class="border-neutral-800/50 mt-10 mx-4">
+    <Menu href="https://huggingface.co/">
+      <Icon icon="ph:question-fill" class="w-5 h-5" />
+      Help
+    </Menu>
+  </div>
+</aside>

src/lib/styles/tailwind.css

@@ -0,0 +1,8 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html, body {
+  @apply bg-black overflow-hidden h-screen;
+  font-family: "DM Sans", "sans-serif";
+}

src/lib/type.ts

@@ -0,0 +1,6 @@
+export interface OptionRadio {
+  label: string;
+  value: string;
+  icon?: string
+  iconColor?: string
+}

src/routes/+layout.svelte

@@ -0,0 +1,11 @@
+<script>
+	import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
+import "$lib/styles/tailwind.css"
+</script>
+
+<div class="app flex items-start">
+	<Sidebar />
+	<main class="px-10 pt-12 pb-12 flex-1 h-screen overflow-auto">
+		<slot />
+	</main>
+</div>

src/routes/+page.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+	import Button from "$lib/components/Button.svelte";
+	import Radio from "$lib/components/fields/Radio.svelte";
+	import Icon from "@iconify/svelte";
+
+	let form = {
+		filter: "likes"
+	}
+
+	const filter_options = [
+		{
+			label: "Most Liked",
+			value: "likes",
+			icon: "lucide:heart",
+			iconColor: "text-red-500"
+		},
+		{
+			label: "New",
+			value: "new",
+			icon: "lucide:zap",
+			iconColor: "text-yellow-500"
+		},
+	];
+
+</script>
+
+<svelte:head>
+	<title>Community Gallery</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={filter_options} value="{form.filter}" onChange={(filter) => form = {...form, filter }} />
+	<div class="flex items-center justify-end gap-5 w-full">
+		<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>
+<div class="mx-auto grid grid-cols-5 gap-5 mt-8 lg:mt-10">
+	{#each Array(40) as _, i}
+		<div
+			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"
+			style="
+				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');
+			"
+		>
+			<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">
+				<p class="text-white font-semibold text-base">A mini hamster in a wheat field</p>
+				<p class="text-white/75 font-regular text-sm">LoRA model name</p>
+			</div>
+			<div class="flex items-center justify-start gap-2">
+				<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">
+					<span>❤️</span>
+					12
+				</div>
+				<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">
+					<span>🤩</span>
+					56
+				</div>
+				<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">
+					<span>⭐</span>
+					32
+				</div>
+				<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">
+					<Icon icon="fluent:emoji-add-16-regular" class="w-5 h-5" />
+				</div>
+			</div>
+		</div>
+	{/each}
+</div>

src/routes/generate/+page.svelte

@@ -0,0 +1,8 @@
+<svelte:head>
+	<title>Generate your Image</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<h1 class="text-white font-semibold text-2xl">
+  Generate your Image
+</h1>

src/routes/models/+page.svelte

@@ -0,0 +1,8 @@
+<svelte:head>
+	<title>Explore models</title>
+	<meta name="description" content="Svelte demo app" />
+</svelte:head>
+
+<h1 class="text-white font-semibold text-2xl">
+  Explore models
+</h1>

static/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

svelte.config.js

@@ -0,0 +1,23 @@
+import adapter from '@sveltejs/adapter-auto';
+import adapterNode from '@sveltejs/adapter-node';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: [vitePreprocess()],
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: process.env.NODE_ENV === 'development' ? adapter({
+			out: 'build',
+		}) : adapterNode({
+			out: 'build',
+		}),
+	},
+};
+
+export default config;

tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./src/**/*.{html,js,svelte,ts}'],
+  theme: {
+    fontFamily: {
+      sans: ['DM Sans', 'IBM Plex Mono'],
+    },
+    extend: {},
+  },
+  plugins: [],
+}
+

tsconfig.json

@@ -0,0 +1,18 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"moduleResolution": "bundler"
+	}
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

vite.config.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+});