[feat] new model selection screen

src/lib/UI/Arcodion.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+    export let name = ""
+    let open = false
+</script>
+
+<div class="flex flex-col">
+    <button class="hover:bg-selected px-6 py-2 text-lg" class:bg-selected={open} on:click={() => {
+        open = !open
+    }}>{name}</button>
+    {#if open}
+        <div class="flex flex-col bg-darkbg">
+            <slot></slot>
+        </div>
+    {/if}
+</div>

src/lib/UI/ModelList.svelte

@@ -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>
 
+{#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()}
-    <select class="bg-transparent input-text mt-2 mb-2 text-gray-200 appearance-none text-sm" value="">
+                    <button class="p-2">Loading...</button>
-        <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 $DataBase.plugins.length > 0}
-                <option value="custom" class="bg-darkbg appearance-none">Plugin</option>
-            {/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>            
+                        <button on:click={() => {changeModel("horde:::" + model)}} class="p-2 hover:text-green-500">{model.trim()}</button>
                     {/each}
-        </optgroup>
-    </select>
                 {/await}
+            </Arcodion>
+            {#if $DataBase.plugins.length > 0}
+                <button on:click={() => {changeModel('plugin')}} class="hover:bg-selected px-6 py-2 text-lg" >Plugin</button>
+            {/if}
+        </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>
+

src/ts/database.ts

@@ -4,6 +4,7 @@ import { changeLanguage } from '../lang';
 import type { RisuPlugin } from './process/plugins';
 import { saveAsset as saveImageGlobal } from './globalApi';
 import { cloneDeep } from 'lodash';
+import type { S } from '@tauri-apps/api/dialog-20ff401c';
 
 export const DataBase = writable({} as any as Database)
 export const loadedStore = writable(false)
@@ -386,6 +387,7 @@ export interface botPreset{
     forceReplaceUrl2:string
     promptPreprocess: boolean,
     bias: [string, number][]
+    koboldURL?: string
 }
 
 export interface Database{
@@ -486,6 +488,7 @@ export interface Database{
     globalscript: customscript[]
     sendWithEnter:boolean
     clickToEdit: boolean
+    koboldURL:string
 
 }
 
@@ -627,7 +630,9 @@ export function saveCurrentPreset(){
         forceReplaceUrl: db.forceReplaceUrl,
         forceReplaceUrl2: db.forceReplaceUrl2,
         promptPreprocess: db.promptPreprocess,
-        bias: db.bias
+        bias: db.bias,
+        koboldURL: db.koboldURL
+
     }
     db.botPresets = pres
     DataBase.set(db)
@@ -668,5 +673,6 @@ export function changeToPreset(id =0){
     db.promptPreprocess = newPres.promptPreprocess ?? db.promptPreprocess
     db.forceReplaceUrl2 = newPres.forceReplaceUrl2 ?? db.forceReplaceUrl2
     db.bias = newPres.bias ?? db.bias
+    db.koboldURL = newPres.koboldURL ?? db.koboldURL
     DataBase.set(db)
 }

src/ts/process/index.ts

@@ -241,7 +241,7 @@ export async function sendChat(chatProcessIndex = -1):Promise<boolean> {
     else{
         while(currentTokens > maxContextTokens){
             if(chats.length <= 1){
-                alertError(language.errors.toomuchtoken)
+                alertError(language.errors.toomuchtoken + "\n\nRequired Tokens: " + currentTokens)
 
                 return false
             }

src/ts/process/request.ts

@@ -418,6 +418,34 @@ export async function requestChatDataMain(arg:requestDataArgument, model:'model'
                 }
             }
         }
+        case "kobold":{
+            const proompt = stringlizeChat(formated, currentChar?.name ?? '')
+            const url = new URL(db.koboldURL)
+            url.pathname = '/generate'
+
+            const da = await fetch(url, {
+                method: "POST",
+                body: JSON.stringify({
+                    "prompt": proompt,
+                    "temperature": db.temperature,
+                    "top_p": 0.9
+                }),
+                headers: {
+                    "content-type": "application/json",
+                }
+            })
+
+            if(da.status !== 200){
+                return {
+                    type: "fail",
+                    result: await da.text(),
+                    noRetry: da.status >= 500
+                }
+            }
+
+            const data = await da.json()
+            return data.results[0].text
+        }
         default:{     
             if(aiModel.startsWith("horde:::")){
                 const proompt = stringlizeChat(formated, currentChar?.name ?? '')
@@ -432,8 +460,8 @@ export async function requestChatDataMain(arg:requestDataArgument, model:'model'
                         "frmtrmblln": false,
                         "frmtrmspch": false,
                         "frmttriminc": false,
-                        "max_context_length": 200,
+                        "max_context_length": db.maxContext + 100,
-                        "max_length": 20,
+                        "max_length": db.maxResponse,
                         "rep_pen": 3,
                         "rep_pen_range": 0,
                         "rep_pen_slope": 10,

src/ts/process/stringlize.ts

@@ -8,7 +8,7 @@ export function stringlizeChat(formated:OpenAIChat[], char:string = ''){
     let resultString:string[] = []
     for(const form of formated){
         if(form.role === 'system'){
-            resultString.push("system note: " + form.content)
+            resultString.push("system: " + form.content)
         }
         else if(form.name){
             resultString.push(form.name + ": " + form.content)
@@ -23,7 +23,7 @@ export function stringlizeChat(formated:OpenAIChat[], char:string = ''){
 export function unstringlizeChat(text:string, formated:OpenAIChat[], char:string = ''){
     console.log(text)
     let minIndex = -1
-    let chunks:string[] = ["system note:"]
+    let chunks:string[] = ["system note:", "system:"]
     if(char){
         chunks.push(`${char}:`)
     }