Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,215 Bytes
1c0590e b1a4d81 17aecfb b1a4d81 1c0590e b1a4d81 eb29a95 1c0590e b1a4d81 eb29a95 b1a4d81 eb29a95 b1a4d81 17aecfb b1a4d81 d85eddb b1a4d81 17aecfb b1a4d81 eb29a95 d85eddb b1a4d81 eb29a95 b1a4d81 eb29a95 b1a4d81 eb29a95 b1a4d81 17aecfb b1a4d81 17aecfb 1c0590e b1a4d81 17aecfb |
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 |
<script lang="ts">
import { get } from 'svelte/store';
import { userStore } from "$lib/stores/use-user";
import Input from "$lib/components/fields/Input.svelte";
import Button from "$lib/components/Button.svelte";
let user = get(userStore);
export let onClose: () => void;
let model = {
id: '',
title: '',
image: '',
}
let error = {
id: '',
title: '',
image: ''
}
const handleSubmit = async () => {
fetch('/api/models/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(model),
})
.then(response => response.json())
.then(data => {
if (data.error) {
error = data.error;
} else {
error = {
id: '',
title: '',
image: ''
}
}
})
}
</script>
<div class="grid grid-cols-1 gap-8">
{#if user?.picture}
<div class="flex items-center justify-start gap-3">
<img src={user.picture} alt="User avatar" class="w-8 h-8 rounded-full border border-white inline-block" />
<div class="w-full text-left text-white">
<p class="text-base font-semibold">{user?.name}</p>
<p class="text-xs leading-none text-neutral-400">{user?.preferred_username}</p>
</div>
</div>
{:else}
<p class="bg-yellow-500/40 rounded-full text-xs text-yellow-400 px-3 py-1 font-semibold max-w-max">
You need to be logged in to submit a model.
</p>
{/if}
<header>
<p class="text-white font-semibold text-lg">
Submit a Model
</p>
<p class="text-neutral-300 text-base mt-1">
Submit a model to the LoRA Studio. You can submit a model by providing a link to the model.
</p>
</header>
<main class="grid grid-cols-1 gap-6">
<div>
<p class="text-xs uppercase text-neutral-400 font-semibold mb-2">
HuggingFace model URL
<span class="text-red-500">*</span>
</p>
<Input
value={model.id}
placeholder="{`${user?.preferred_username ?? 'enzostvs'}/`}"
prefix="huggingface.co/"
onChange={(value) => model.id = value}
/>
{#if error.id}
<p class="text-xs text-red-500 mt-1">
{error.id}
</p>
{/if}
</div>
<div>
<p class="text-xs uppercase text-neutral-400 font-semibold mb-2">
Title
<span class="text-red-500">*</span>
</p>
<Input
value={model.title}
placeholder="Simpson style"
onChange={(value) => model.title = value}
/>
</div>
<div>
<p class="text-xs uppercase text-neutral-400 font-semibold mb-2">
Thumbnail image
<span class="text-red-500">*</span>
</p>
<Input
value={model.image}
placeholder="https://"
onChange={(value) => model.image = value}
/>
{#if error.image}
<p class="text-xs text-red-500 mt-1">
{error.image}
</p>
{/if}
</div>
</main>
<footer class="flex items-center justify-end gap-3">
<Button theme="dark" size="md" onClick={onClose}>Cancel</Button>
<Button theme="blue" size="md" onClick={handleSubmit}>Submit</Button>
</footer>
</div> |