File size: 2,481 Bytes
2606dde cf7ac8d 2606dde fe5e801 2606dde cf7ac8d 2606dde cf7ac8d 2606dde 12c3a5a 2606dde cf7ac8d 2606dde |
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 |
<script lang="ts">
import { createEventDispatcher } from "svelte";
import Modal from "$lib/components/Modal.svelte";
import CarbonClose from "~icons/carbon/close";
import CarbonCheckmark from "~icons/carbon/checkmark-filled";
import ModelCardMetadata from "./ModelCardMetadata.svelte";
import type { Model } from "$lib/types/Model";
import type { LayoutData } from "../../routes/$types";
import { enhance } from "$app/forms";
import { base } from "$app/paths";
export let settings: LayoutData["settings"];
export let models: Array<Model>;
let selectedModelId = settings.activeModel;
const dispatch = createEventDispatcher<{ close: void }>();
</script>
<Modal width="max-w-lg" on:close>
<form
action="{base}/settings"
method="post"
use:enhance={() => {
dispatch("close");
}}
class="flex w-full flex-col gap-5 p-6"
>
{#each Object.entries(settings).filter(([k]) => k !== "activeModel") as [key, val]}
<input type="hidden" name={key} value={val} />
{/each}
<div class="flex items-start justify-between text-xl font-semibold text-gray-800">
<h2>Models</h2>
<button type="button" class="group" on:click={() => dispatch("close")}>
<CarbonClose class="text-gray-900 group-hover:text-gray-500" />
</button>
</div>
<div class="space-y-4">
{#each models as model}
<div
class="rounded-xl border border-gray-100 {model.id === selectedModelId
? 'bg-gradient-to-r from-yellow-200/40 via-yellow-500/10'
: ''}"
>
<label class="group flex cursor-pointer p-3" on:change aria-label={model.displayName}>
<input
type="radio"
class="sr-only"
name="activeModel"
value={model.id}
bind:group={selectedModelId}
/>
<span>
<span class="text-md block font-semibold leading-tight text-gray-800"
>{model.displayName}</span
>
{#if model.description}
<span class="text-xs text-[#9FA8B5]">{model.description}</span>
{/if}
</span>
<CarbonCheckmark
class="-mr-1 -mt-1 ml-auto shrink-0 text-xl {model.id === selectedModelId
? 'text-yellow-400'
: 'text-transparent group-hover:text-gray-200'}"
/>
</label>
<ModelCardMetadata {model} />
</div>
{/each}
</div>
<button
type="submit"
class="mt-2 rounded-full bg-black px-5 py-2 text-lg font-semibold text-gray-100 ring-gray-400 ring-offset-1 transition-colors hover:ring"
>
Apply
</button>
</form>
</Modal>
|