Spaces:
Running
Running
Commit
·
e71d24a
0
Parent(s):
initial commot
Browse files- .eslintignore +13 -0
- .eslintrc.cjs +31 -0
- .gitignore +12 -0
- .npmrc +1 -0
- .prettierignore +13 -0
- .prettierrc +8 -0
- Dockerfile +26 -0
- README.md +11 -0
- package-lock.json +0 -0
- package.json +41 -0
- postcss.config.js +6 -0
- src/app.d.ts +12 -0
- src/app.html +18 -0
- src/lib/components/Button.svelte +60 -0
- src/lib/components/fields/Radio.svelte +26 -0
- src/lib/components/sidebar/Menu.svelte +14 -0
- src/lib/components/sidebar/Sidebar.svelte +40 -0
- src/lib/styles/tailwind.css +8 -0
- src/lib/type.ts +6 -0
- src/routes/+layout.svelte +11 -0
- src/routes/+page.svelte +73 -0
- src/routes/generate/+page.svelte +8 -0
- src/routes/models/+page.svelte +8 -0
- static/favicon.png +0 -0
- static/robots.txt +3 -0
- svelte.config.js +23 -0
- tailwind.config.js +12 -0
- tsconfig.json +18 -0
- vite.config.ts +6 -0
.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 |
+
});
|