mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[feat] new model selection screen

Browse Source
This commit is contained in:
kwaroran
2023-05-26 20:23:45 +09:00
parent cf9ae31a26
commit 4903a88131
7 changed files with 123 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
src/lib/UI/ModelList.svelte
View File

@@ -1,32 +1,74 @@
<script lang="ts">
import { DataBase } from "src/ts/database";
import { isTauri } from "src/ts/globalApi";
import { getHordeModels } from "src/ts/horde/getModels";
import Arcodion from "./Arcodion.svelte";
import { language } from "src/lang";
export let value = ""
let openOptions = false
function getModelName(name:string){
switch(name){
case "gpt35":
return "GPT-3.5 Turbo"
case "gpt4":
return "GPT-4"
case "palm2":
return "PaLM2"
case "textgen_webui":
return "Oobabooga WebUI"
case "kobold":
return "Kobold"
case "custom":
return "Plugin"
default:
if(name.startsWith("horde:::")){
return name.replace(":::", " ")
}
return ''
}
}
function changeModel(name:string){
value = name
openOptions = false
}
</script>
{#await getHordeModels()}
<select class="bg-transparent input-text mt-2 mb-2 text-gray-200 appearance-none text-sm" value="">
<option value="" class="bg-darkbg appearance-none">Loading...</option>
</select>
{:then models}
<select class="bg-transparent input-text mt-2 mb-2 text-gray-200 appearance-none text-sm" bind:value>
<optgroup class="bg-darkbg appearance-none" label="OpenAI">
<option value="gpt35" class="bg-darkbg appearance-none">OpenAI GPT-3.5</option>
<option value="gpt4" class="bg-darkbg appearance-none">OpenAI GPT-4</option>
</optgroup>
<optgroup class="bg-darkbg appearance-none" label="Other Providers">
<option value="palm2" class="bg-darkbg appearance-none">Google Palm2</option>
<option value="textgen_webui" class="bg-darkbg appearance-none">Text Generation WebUI</option>
{#if openOptions}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="fixed top-0 w-full h-full left-0 bg-black bg-opacity-50 z-50 flex justify-center items-center" on:click={() => {
openOptions = false
}}>
<div class="w-96 max-w-full max-h-full overflow-y-auto overflow-x-hidden bg-bgcolor p-4 flex flex-col" on:click|stopPropagation>
<h1 class="font-bold text-xl">{language.model}</h1>
<div class="border-t-1 border-y-selected mt-1 mb-1"></div>
<Arcodion name="OpenAI GPT">
<button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt35')}}>GPT-3.5 Turbo</button>
<button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4')}}>GPT-4</button>
</Arcodion>
<button class="hover:bg-selected px-6 py-2 text-lg" on:click={() => {changeModel('textgen_webui')}}>Oobabooga WebUI</button>
<button class="hover:bg-selected px-6 py-2 text-lg" on:click={() => {changeModel('palm2')}}>Google PaLM2</button>
<button class="hover:bg-selected px-6 py-2 text-lg" on:click={() => {changeModel('kobold')}}>Kobold</button>
<Arcodion name="Horde">
{#await getHordeModels()}
<button class="p-2">Loading...</button>
{:then models}
{#each models as model}
<button on:click={() => {changeModel("horde:::" + model)}} class="p-2 hover:text-green-500">{model.trim()}</button>
{/each}
{/await}
</Arcodion>
{#if $DataBase.plugins.length > 0}
<option value="custom" class="bg-darkbg appearance-none">Plugin</option>
<button on:click={() => {changeModel('plugin')}} class="hover:bg-selected px-6 py-2 text-lg" >Plugin</button>
{/if}
</optgroup>
<optgroup class="bg-darkbg appearance-none" label="Horde">
{#each models as model}
<option value={"horde:::" + model} class="bg-darkbg appearance-none">{model}</option>
{/each}
</optgroup>
</select>
{/await}
</div>
</div>
{/if}
<button on:click={() => {openOptions = true}}
class="mt-4 drop-shadow-lg p-3 flex justify-center items-center ml-2 mr-2 rounded-lg bg-selected mb-4">
{getModelName(value)}
</button>