feat(stage-web): new ui
This commit is contained in:
@@ -11,7 +11,7 @@ const router = useRouter()
|
||||
</button>
|
||||
<h1 relative>
|
||||
<div absolute left-0 top-0 translate-y="[-80%]">
|
||||
<span text="neutral-300 dark:neutral-800">Settings</span>
|
||||
<span text="neutral-300 dark:neutral-500">Settings</span>
|
||||
</div>
|
||||
<div text-3xl font-semibold>
|
||||
Models
|
||||
|
||||
@@ -7,25 +7,99 @@ const router = useRouter()
|
||||
<template>
|
||||
<div flex="~ row" items-center gap-2>
|
||||
<button @click="router.back()">
|
||||
<div i-solar:alt-arrow-left-line-duotone text-2xl />
|
||||
<div i-solar:alt-arrow-left-line-duotone text-xl />
|
||||
</button>
|
||||
<h1 relative>
|
||||
<div absolute left-0 top-0 translate-y="[-80%]">
|
||||
<span text="neutral-300 dark:neutral-800">Modules</span>
|
||||
<span text="neutral-300 dark:neutral-500">Modules</span>
|
||||
</div>
|
||||
<div text-3xl font-semibold>
|
||||
Consciousness
|
||||
</div>
|
||||
</h1>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>Provider</span>
|
||||
<div bg="neutral-100 dark:[rgba(0,0,0,0.3)]" rounded-xl p-4>
|
||||
<div flex="~ col gap-4">
|
||||
<div>
|
||||
<div>
|
||||
<span>OpenAI</span>
|
||||
<h2 text-2xl>
|
||||
Provider
|
||||
</h2>
|
||||
<div text="neutral-400 dark:neutral-400">
|
||||
<span>Select the suitable LLM provider for consciousness</span>
|
||||
</div>
|
||||
</div>
|
||||
<div max-w-full>
|
||||
<!--
|
||||
fieldset has min-width set to --webkit-min-container, in order to use over flow scroll,
|
||||
we need to set the min-width to 0.
|
||||
See also: https://stackoverflow.com/a/33737340
|
||||
-->
|
||||
<fieldset flex="~ row gap-4" :style="{ 'scrollbar-width': 'none' }" min-w-0 of-x-scroll scroll-smooth>
|
||||
<label
|
||||
bg="neutral-200 dark:neutral-800"
|
||||
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
|
||||
>
|
||||
<input type="radio" name="provider" value="provider-1">
|
||||
<div flex="~ col" min-h-16 w-full items-center justify-center>
|
||||
Provider 1
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
bg="neutral-200 dark:neutral-800"
|
||||
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
|
||||
>
|
||||
<input type="radio" name="provider" value="provider-1">
|
||||
<div flex="~ col" min-h-16 w-full items-center justify-center>
|
||||
Provider 1
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
bg="neutral-200 dark:neutral-800"
|
||||
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
|
||||
>
|
||||
<input type="radio" name="provider" value="provider-1">
|
||||
<div flex="~ col" min-h-16 w-full items-center justify-center>
|
||||
Provider 1
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
bg="neutral-200 dark:neutral-800"
|
||||
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
|
||||
>
|
||||
<input type="radio" name="provider" value="provider-1">
|
||||
<div flex="~ col" min-h-16 w-full items-center justify-center>
|
||||
Provider 1
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
bg="neutral-200 dark:neutral-800"
|
||||
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
|
||||
>
|
||||
<input type="radio" name="provider" value="provider-1">
|
||||
<div flex="~ col" min-h-16 w-full items-center justify-center>
|
||||
Provider 1
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
bg="neutral-200 dark:neutral-800"
|
||||
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
|
||||
>
|
||||
<input type="radio" name="provider" value="provider-1">
|
||||
<div flex="~ col" min-h-16 w-full items-center justify-center>
|
||||
Provider 1
|
||||
</div>
|
||||
</label>
|
||||
<label
|
||||
bg="neutral-200 dark:neutral-800"
|
||||
flex="~ col" block min-w-50 w-fit cursor-pointer items-start rounded-lg p-3 text-left
|
||||
>
|
||||
<input type="radio" name="provider" value="provider-1">
|
||||
<div flex="~ col" min-h-16 w-full items-center justify-center>
|
||||
Provider 1
|
||||
</div>
|
||||
</label>
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fixed bottom-0 right-0 z--1 text="neutral-100/80 dark:neutral-500/20">
|
||||
|
||||
@@ -100,7 +100,7 @@ const modulesList = computed<Module[]>(() => [
|
||||
</button>
|
||||
<h1 relative>
|
||||
<div absolute left-0 top-0 translate-y="[-80%]">
|
||||
<span text="neutral-300 dark:neutral-800">Settings</span>
|
||||
<span text="neutral-300 dark:neutral-500">Settings</span>
|
||||
</div>
|
||||
<div text-3xl font-semibold>
|
||||
Modules
|
||||
|
||||
@@ -118,7 +118,7 @@ const providersList = computed<ModelProvider[]>(() => [
|
||||
</button>
|
||||
<h1 relative>
|
||||
<div absolute left-0 top-0 translate-y="[-80%]">
|
||||
<span text="neutral-300 dark:neutral-800">Settings</span>
|
||||
<span text="neutral-300 dark:neutral-500">Settings</span>
|
||||
</div>
|
||||
<div text-3xl font-semibold>
|
||||
Providers
|
||||
|
||||
@@ -39,7 +39,7 @@ watch([apiKey, baseUrl], () => {
|
||||
</button>
|
||||
<h1 relative>
|
||||
<div absolute left-0 top-0 translate-y="[-80%]">
|
||||
<span text="neutral-300 dark:neutral-800">Provider</span>
|
||||
<span text="neutral-300 dark:neutral-500">Provider</span>
|
||||
</div>
|
||||
<div text-3xl font-semibold>
|
||||
OpenRouter
|
||||
|
||||
@@ -11,7 +11,7 @@ const router = useRouter()
|
||||
</button>
|
||||
<h1 relative>
|
||||
<div absolute left-0 top-0 translate-y="[-80%]">
|
||||
<span text="neutral-300 dark:neutral-800">Settings</span>
|
||||
<span text="neutral-300 dark:neutral-500">Settings</span>
|
||||
</div>
|
||||
<div text-3xl font-semibold>
|
||||
Themes
|
||||
|
||||
Reference in New Issue
Block a user