Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,631 Bytes
d6da254 83d9f5e 83deba1 d6da254 83deba1 d6da254 83d9f5e d6da254 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
<script lang="ts">
import { clickoutside } from '@svelte-put/clickoutside';
import { goto } from "$app/navigation";
import { page } from "$app/stores";
import { get } from "svelte/store";
import Icon from "@iconify/svelte";
import { modelStore } from "$lib/stores/use-model";
import UserIsLogged from '$lib/components/UserIsLogged.svelte';
import Comments from '$lib/components/models/drawer/comments/Comments.svelte';
let data = get(modelStore);
modelStore.subscribe((value) => {
data = value;
});
const handleClose = () => {
modelStore.set(undefined);
$page.url.searchParams.delete('model');
goto(`?${$page.url.searchParams.toString()}`);
};
</script>
<div
class="w-full fixed top-0 left-0 h-full bg-black bg-opacity-50 z-40 backdrop-blur transition-all duration-100"
class:opacity-0={!data?.id}
class:pointer-events-none={!data?.id}
>
<div
class="ml-auto w-full max-w-3xl bg-neutral-950 h-full border-l border-neutral-800 transition-all duration-200 flex flex-col justify-between"
class:translate-x-full={!data?.id}
use:clickoutside on:clickoutside={handleClose}
>
<div class="p-8 overflow-auto">
<header class="flex w-full justify-between items-start mb-6">
<div class="flex items-center justify-start gap-3 lg:gap-6">
<img src={data?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-red-500" alt={data?.id} />
<div>
<p class="text-white font-semibold text-lg lg:text-2xl mb-1 truncate">
{data?.title ?? data?.id}
</p>
<div class="justify-start items-center gap-2 flex">
<div class="bg-red-500 bg-opacity-20 border border-red-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-bold text-xs">
<Icon icon="solar:heart-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-red-500" />
{data?.likes ?? 0}
</div>
<div class="bg-blue-500 bg-opacity-20 border border-blue-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-bold text-xs">
<Icon icon="solar:download-square-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-blue-500" />
{data?.downloads ?? 0}
</div>
</div>
</div>
</div>
<button on:click={handleClose}>
<Icon icon="carbon:close" class="w-6 h-6 text-white cursor-pointer" />
</button>
</header>
<main>
{#if data?.gallery && data?.gallery?.length > 0}
<div>
<p class="text-neutral-400 uppercase text-xs font-bold">Examples</p>
<div class="grid grid-cols-3 md:grid-cols-5 lg:grid-cols-6 gap-5 mt-2">
{#each data?.gallery as example}
<div class="w-full h-[120px] relative z-[1] mb-3 overflow-hidden">
<img src="https://huggingface.co/datasets/enzostvs/loras-studio/resolve/main/{example.image}?expose=true'" class="w-full h-full bg-center bg-cover rounded-lg object-cover object-center bg-neutral-800" alt={example.prompt} />
</div>
{/each}
</div>
</div>
{/if}
</main>
</div>
<footer class="p-8 border-t border-neutral-900 bg-neutral-900/30">
<p class="font-semibold text-neutral-100 text-base lg:text-lg mb-6">
Commentaires ({data?.comments?.length ?? 0})
</p>
{#if data?.id}
<UserIsLogged>
<Comments comments={data?.comments} model={data} />
</UserIsLogged>
{/if}
</footer>
</div>
</div> |