Spaces:
Running
Running
File size: 5,080 Bytes
d6da254 83d9f5e 83deba1 d6da254 c5a4bec 644d65a d6da254 f05d33c d6da254 f05d33c d6da254 f05d33c 83deba1 d6da254 644d65a f05d33c 644d65a d6da254 644d65a d6da254 644d65a d6da254 644d65a d6da254 644d65a d6da254 644d65a d6da254 644d65a 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 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
<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';
import { env } from '$env/dynamic/public';
import Button from '$lib/components/Button.svelte';
let { open, model } = get(modelStore);
modelStore.subscribe((value) => {
open = value?.open;
model = value?.model;
});
const handleClose = () => {
modelStore.update((value) => {
return {
...value,
open: false,
};
});
$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-0 backdrop-blur transition-all duration-100"
class:opacity-0={!open}
class:pointer-events-none={!open}
class:!z-40={open}
>
{#if open}
<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"
use:clickoutside on:clickoutside={handleClose}
>
<div class="p-8 overflow-auto">
<header class="flex w-full justify-between items-start mb-6 pr-6">
<div class="flex items-center justify-start gap-3 lg:gap-6">
<img src={model?.image} class="lg:w-16 lg:h-16 w-12 h-12 rounded-xl bg-neutral-800 object-cover" alt={model?.id} />
<div>
<p class="text-white font-semibold text-lg lg:text-2xl mb-1 truncate">
{model?.title ?? model?.id}
</p>
<a href="https://huggingface.co/{model?.id}" class="text-neutral-400 underline hover:text-blue-00 flex items-center justify-start gap-1">
<Icon icon="iconamoon:link-external-fill" class="w-4 h-4" />
View on HuggingFace
</a>
</div>
</div>
<button on:click={handleClose}>
<Icon icon="carbon:close" class="w-6 h-6 text-white cursor-pointer" />
</button>
</header>
<main>
<div class="justify-start items-center gap-4 flex mb-6">
<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-medium text-sm">
<Icon icon="solar:heart-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-red-500" />
{model?.likes ?? 0}
</div>
<a
href="/"
class="bg-blue-500 bg-opacity-20 border border-blue-500 hover:bg-opacity-60 transition-all duration-200 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm"
>
<Icon icon="solar:download-square-bold" class="lg:w-4 lg:h-4 w-3 h-3 text-blue-500" />
View files
</a>
<a
href="/generate?model={model?.id}"
class="bg-pink-500 bg-opacity-20 hover:bg-opacity-60 transition-all duration-200 border border-pink-500 px-3 py-1.5 rounded-full text-neutral-100 flex items-center justify-center gap-1 font-medium text-sm"
>
<Icon icon="fluent:glance-horizontal-sparkles-16-filled" class="lg:w-4 lg:h-4 w-3 h-3 text-pink-500" />
Generate
</a>
</div>
{#if model?.gallery && model?.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 model?.gallery as example}
<div class="w-full h-[120px] relative z-[1] mb-3 overflow-hidden">
<img src="{env.PUBLIC_FILE_UPLOAD_DIR}/{example.image}" 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>
{:else}
<div class="bg-neutral-900 rounded-lg p-8 text-center">
<p class="text-neutral-400 font-base">No generation examples available for this model</p>
<a href="/generate?model={model?.id}" class="text-neutral-100 underline">
Generate the first one
</a>
</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 ({model?.comments?.length ?? 0})
</p>
{#if model?.id}
<UserIsLogged>
<Comments comments={model?.comments} model={model} />
</UserIsLogged>
{/if}
</footer>
</div>
{/if}
</div> |