Spaces:
Running
on
CPU Upgrade
Running
on
CPU Upgrade
File size: 3,251 Bytes
1c0590e b1a4d81 17aecfb b1a4d81 1c0590e b1a4d81 1c0590e b1a4d81 17aecfb b1a4d81 17aecfb b1a4d81 1c0590e 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 116 |
<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 = {
repo: '',
title: '',
image: '',
}
let error = {
repo: '',
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 {
console.log('Success:', data);
error = {
repo: '',
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.repo}
placeholder="{`${user.preferred_username}/`}"
prefix="huggingface.co/"
onChange={(value) => model.repo = value}
/>
{#if error.repo}
<p class="text-xs text-red-500 mt-1">
{error.repo}
</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> |