[feat] basic risuhub

src/lang/en.ts

@@ -65,7 +65,7 @@ export const languageEnglish = {
                 + "\n\n- $(name)\n\n    - inserts the named group"
                 + "\n\nIf OUT starts with **@@**, it doesn't replaces the string, but instead does a special effect if matching string founds."
                 + "\n\n- @@emo (emotion name)\n\n    - if character is Emotion Images mode, sets (emotion name) as emotion and prevents default.",
-        experimental: "This is a experimental setting. it might be unstable.",
+        experimental: "This is a experimental feature. it might be unstable.",
         oogaboogaURL: "If your WebUI supports older version of api, your url should look *like https:.../run/textgen*\n\n"
                 + "If your WebUI supports newVersion of api, your url should look like *https://.../api/v1/generate* and use the api server as host, and add --api to arguments.",
         exampleMessage: "Example conversations that effects output of the character. it dosen't uses tokens permanently."

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -3,9 +3,9 @@
     import { DatabaseIcon, DicesIcon, LanguagesIcon, MenuIcon, MicOffIcon, PowerIcon, RefreshCcwIcon, ReplyIcon, Send } from "lucide-svelte";
     import { selectedCharID } from "../../ts/stores";
     import Chat from "./Chat.svelte";
-    import { DataBase, appVer, type Message, type character } from "../../ts/storage/database";
+    import { DataBase, type Message } from "../../ts/storage/database";
     import { getCharImage } from "../../ts/characters";
-    import { doingChat, sendChat, type OpenAIChat } from "../../ts/process/index";
+    import { doingChat, sendChat } from "../../ts/process/index";
     import { findCharacterbyId, messageForm, sleep } from "../../ts/util";
     import { language } from "../../lang";
     import { translate } from "../../ts/translator/translator";
@@ -13,9 +13,9 @@
     import sendSound from '../../etc/send.mp3'
     import {cloneDeep} from 'lodash'
     import { processScript } from "src/ts/process/scripts";
-    import GithubStars from "../Others/GithubStars.svelte";
     import CreatorQuote from "./CreatorQuote.svelte";
     import { stopTTS } from "src/ts/process/tts";
+    import MainMenu from '../UI/MainMenu.svelte';
 
     let messageInput = ''
     let openMenu = false
@@ -186,11 +186,7 @@
     openMenu = false
 }}>
     {#if $selectedCharID < 0}
-        <div class="h-full w-full flex flex-col overflow-y-auto items-center">
+        <MainMenu />
-            <h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
-            <h3 class="text-gray-500 mt-1">Version {appVer}</h3>
-            <GithubStars />
-        </div>
     {:else}
         <div class="h-full w-full flex flex-col-reverse overflow-y-auto relative"  on:scroll={(e) => {
             //@ts-ignore

src/lib/Others/Help.svelte

@@ -4,7 +4,9 @@
     alertMd(language.help[key])
 }}>
     {#if key === "experimental"}
-        <FlaskConicalIcon size={14} />
+        <div class="text-red-500 hover:text-green-500">
+            <FlaskConicalIcon size={16} />
+        </div>
     {:else if unrecommended}
         <div class="text-red-500 hover:text-green-500">
             <AlertTriangle size={14} />

src/lib/SideBars/CharConfig.svelte

@@ -14,7 +14,7 @@
     import {isEqual, cloneDeep} from 'lodash'
     import Help from "../Others/Help.svelte";
     import RegexData from "./RegexData.svelte";
-    import { exportChar } from "src/ts/characterCards";
+    import { exportChar, shareRisuHub } from "src/ts/characterCards";
     import { getElevenTTSVoices, getWebSpeechTTSVoices, getVOICEVOXVoices } from "src/ts/process/tts";
     import { checkCharOrder } from "src/ts/storage/globalApi";
   import { addGroupChar, rmCharFromGroup } from "src/ts/process/group";
@@ -663,7 +663,15 @@
         <button on:click={async () => {
             exportChar($selectedCharID)
         }} class="text-neutral-200 mt-6 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">{language.exportCharacter}</button>
-    
+
+        {#if $DataBase.useExperimental}
+        <button on:click={async () => {
+            const cha = $DataBase.characters[$selectedCharID]
+            if(cha.type !== 'group'){
+                shareRisuHub(cha)
+            }
+        }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-500 transition-colors cursor-pointer">Upload Hub (experimental)</button>
+        {/if}
     {:else}
         {#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4}
             <span class="text-neutral-200">{language.SuperMemory}</span>

src/lib/SideBars/Sidebar.svelte

@@ -51,18 +51,27 @@
 
   function createScratch() {
     reseter();
-    const cid = createNewCharacter();
+    createNewCharacter();
-    selectedCharID.set(-1);
+    let db = get(DataBase)
+    if(db.characters[db.characters.length-1]){
+        changeChar(db.characters.length-1)
+    }
   }
   function createGroup() {
     reseter();
-    const cid = createNewGroup();
+    createNewGroup();
-    selectedCharID.set(-1);
+    let db = get(DataBase)
+    if(db.characters[db.characters.length-1]){
+        changeChar(db.characters.length-1)
+    }
   }
   async function createImport() {
     reseter();
     await importCharacter();
-    selectedCharID.set(-1);
+    let db = get(DataBase)
+    if(db.characters[db.characters.length-1]){
+        changeChar(db.characters.length-1)
+    }
   }
 
   function changeChar(index: number) {

src/lib/UI/Hub.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
+    import Help from "../Others/Help.svelte";
+    import { DownloadIcon, FlagIcon } from "lucide-svelte";
+
+    let openedData:null|{
+        name:string
+        desc: string
+        download: number,
+        id: string,
+        img: string
+    } = null
+
+</script>
+<h1 class="text-3xl font-bold mt-4">Shared Characters <Help key="experimental" /> </h1>
+<div class="w-full flex gap-4 p-2 flex-wrap">
+    {#await getRisuHub() then charas}
+        {#each charas as chara}
+            <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative sm:w-44 w-full items-center" on:click={() => {
+                openedData = chara
+            }}>
+                <div class="flex flex-col">
+                    <img class="h-36 w-36 rounded-md" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
+                    <span class="text-white text-lg max-w-36 text-ellipsis whitespace-nowrap overflow-hidden">{chara.name}</span>
+                    <span class="text-gray-400 text-xs max-w-36 text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden">{chara.desc}</span>
+                </div>
+            </button>
+        {/each}
+    {/await}
+</div>
+
+
+{#if openedData}
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center" on:click={() => {
+        openedData = null
+    }}>
+        <div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto">
+            <div class="w-full flex flex-wrap gap-4">
+                <div class="flex flex-col">
+                    <img class="h-36 w-36 rounded-md" alt={openedData.name} src={`${hubURL}/resource/` + openedData.img}>
+                    <h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis mt-4">{openedData.name}</h1>
+                </div>
+                <span class="text-gray-400 break-words text-base">{openedData.desc}</span>
+            </div>
+            <div class="flex flex-row-reverse gap-2">
+                <button class="text-gray-400 hover:text-red-500">
+                    <FlagIcon />
+                </button>
+                <button class="text-gray-400 hover:text-green-500" on:click={() => {
+                    downloadRisuHub(openedData.id ,openedData.img)
+                    openedData = null
+                }}>
+                    <DownloadIcon />
+                </button>
+            </div>
+        </div>
+    </div>
+
+{/if}

src/lib/UI/MainMenu.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { appVer } from "src/ts/storage/database";
+  import GithubStars from "../Others/GithubStars.svelte";
+  import Hub from "./Hub.svelte";
+
+</script>
+<div class="h-full w-full flex flex-col overflow-y-auto items-center">
+    <h2 class="text-4xl text-white mb-0 mt-6 font-black">RisuAI</h2>
+    <h3 class="text-gray-500 mt-1">Version {appVer}</h3>
+    <GithubStars />
+  <div class="w-full flex p-4 flex-col text-2xl text-white">
+    <Hub />
+  </div>
+</div>

src/ts/characterCards.ts

@@ -10,7 +10,9 @@ import { PngMetadata } from "./exif"
 import { characterFormatUpdate } from "./characters"
 import { checkCharOrder, downloadFile, readImage, saveAsset } from "./storage/globalApi"
 import { cloneDeep } from "lodash"
+import { selectedCharID } from "./stores"
 
+export const hubURL = import.meta.env.DEV ? "http://127.0.0.1:8787" : "https://sv.risuai.xyz"
 
 export async function importCharacter() {
     try {
@@ -200,7 +202,7 @@ function convertOldTavernAndJSON(charaData:OldTavernChar, imgp:string|undefined
         alternateGreetings:[],
         tags:[],
         creator:"",
-        characterVersion: 0,
+        characterVersion: '',
         personality: charaData.personality ?? '',
         scenario:charaData.scenario ?? '',
         firstMsgIndex: -1,
@@ -307,10 +309,13 @@ export async function exportChar(charaID:number) {
 }
 
 
-async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boolean>{
+async function importSpecv2(card:CharacterCardV2, img?:Uint8Array, mode?:'hub'|'normal'):Promise<boolean>{
     if(!card ||card.spec !== 'chara_card_v2'){
         return false
     }
+    if(!mode){
+        mode = 'normal'
+    }
 
     const data = card.data
     const im = img ? await saveAsset(PngMetadata.filter(img)) : undefined
@@ -333,7 +338,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
                     msg: `Loading... (Getting Emotions ${i} / ${risuext.emotions.length})`
                 })
                 await sleep(10)
-                const imgp = await saveAsset(Buffer.from(risuext.emotions[i][1], 'base64'))
+                const imgp = await saveAsset(mode === 'hub' ? (await getHubResources(risuext.emotions[i][1])) : Buffer.from(risuext.emotions[i][1], 'base64'))
                 emotions.push([risuext.emotions[i][0],imgp])
             }
         }
@@ -344,7 +349,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
                     msg: `Loading... (Getting Assets ${i} / ${risuext.additionalAssets.length})`
                 })
                 await sleep(10)
-                const imgp = await saveAsset(Buffer.from(risuext.additionalAssets[i][1], 'base64'))
+                const imgp = await saveAsset(mode === 'hub' ? (await getHubResources(risuext.additionalAssets[i][1])) :Buffer.from(risuext.additionalAssets[i][1], 'base64'))
                 extAssets.push([risuext.additionalAssets[i][0],imgp])
             }
         }
@@ -418,7 +423,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
         alternateGreetings:data.alternate_greetings ?? [],
         tags:data.tags ?? [],
         creator:data.creator ?? '',
-        characterVersion: data.character_version ?? 0,
+        characterVersion: `${data.character_version}` ?? '',
         personality:data.personality ?? '',
         scenario:data.scenario ?? '',
         firstMsgIndex: -1,
@@ -444,74 +449,81 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
 
 }
 
+
+async function createBaseV2(char:character) {
+    
+    let charBook:charBookEntry[] = []
+    for(const lore of char.globalLore){
+        let ext:{
+            risu_case_sensitive?: boolean;
+            risu_activationPercent?: number
+        } = cloneDeep(lore.extentions ?? {})
+
+        let caseSensitive = ext.risu_case_sensitive ?? false
+        ext.risu_activationPercent = lore.activationPercent
+
+        charBook.push({
+            keys: lore.key.split(',').map(r => r.trim()),
+            secondary_keys: lore.selective ? lore.secondkey.split(',').map(r => r.trim()) : undefined,
+            content: lore.content,
+            extensions: ext,
+            enabled: true,
+            insertion_order: lore.insertorder,
+            constant: lore.alwaysActive,
+            selective:lore.selective,
+            name: lore.comment,
+            comment: lore.comment,
+            case_sensitive: caseSensitive,
+        })
+    }
+
+    const card:CharacterCardV2 = {
+        spec: "chara_card_v2",
+        spec_version: "2.0",
+        data: {
+            name: char.name,
+            description: char.desc,
+            personality: char.personality,
+            scenario: char.scenario,
+            first_mes: char.firstMessage,
+            mes_example: char.exampleMessage,
+            creator_notes: char.creatorNotes,
+            system_prompt: char.systemPrompt,
+            post_history_instructions: char.replaceGlobalNote,
+            alternate_greetings: char.alternateGreetings,
+            character_book: {
+                scan_depth: char.loreSettings?.scanDepth,
+                token_budget: char.loreSettings?.tokenBudget,
+                recursive_scanning: char.loreSettings?.recursiveScanning,
+                extensions: char.loreExt ?? {},
+                entries: charBook
+            },
+            tags: char.additionalData?.tag ?? [],
+            creator: char.additionalData?.creator ?? '',
+            character_version: `${char.additionalData?.character_version}` ?? '',
+            extensions: {
+                risuai: {
+                    emotions: char.emotionImages,
+                    bias: char.bias,
+                    viewScreen: char.viewScreen,
+                    customScripts: char.customscript,
+                    utilityBot: char.utilityBot,
+                    sdData: char.sdData,
+                    additionalAssets: char.additionalAssets
+                }
+            }
+        }
+    }
+    console.log(card)
+    return card
+}
+
+
 export async function exportSpecV2(char:character) {
     let img = await readImage(char.image)
 
     try{
-
+        const card = await createBaseV2(char)
-        let charBook:charBookEntry[] = []
-        for(const lore of char.globalLore){
-            let ext:{
-                risu_case_sensitive?: boolean;
-                risu_activationPercent?: number
-            } = cloneDeep(lore.extentions ?? {})
-
-            let caseSensitive = ext.risu_case_sensitive ?? false
-            ext.risu_activationPercent = lore.activationPercent
-
-            charBook.push({
-                keys: lore.key.split(',').map(r => r.trim()),
-                secondary_keys: lore.selective ? lore.secondkey.split(',').map(r => r.trim()) : undefined,
-                content: lore.content,
-                extensions: ext,
-                enabled: true,
-                insertion_order: lore.insertorder,
-                constant: lore.alwaysActive,
-                selective:lore.selective,
-                name: lore.comment,
-                comment: lore.comment,
-                case_sensitive: caseSensitive,
-            })
-        }
-
-        const card:CharacterCardV2 = {
-            spec: "chara_card_v2",
-            spec_version: "2.0",
-            data: {
-                name: char.name,
-                description: char.desc,
-                personality: char.personality,
-                scenario: char.scenario,
-                first_mes: char.firstMessage,
-                mes_example: char.exampleMessage,
-                creator_notes: char.creatorNotes,
-                system_prompt: char.systemPrompt,
-                post_history_instructions: char.replaceGlobalNote,
-                alternate_greetings: char.alternateGreetings,
-                character_book: {
-                    scan_depth: char.loreSettings?.scanDepth,
-                    token_budget: char.loreSettings?.tokenBudget,
-                    recursive_scanning: char.loreSettings?.recursiveScanning,
-                    extensions: char.loreExt ?? {},
-                    entries: charBook
-                },
-                tags: char.additionalData?.tag ?? [],
-                creator: char.additionalData?.creator ?? '',
-                character_version: char.additionalData?.character_version ?? 0,
-                extensions: {
-                    risuai: {
-                        emotions: char.emotionImages,
-                        bias: char.bias,
-                        viewScreen: char.viewScreen,
-                        customScripts: char.customscript,
-                        utilityBot: char.utilityBot,
-                        sdData: char.sdData,
-                        additionalAssets: char.additionalAssets
-                    }
-                }
-            }
-        }
-
 
         if(card.data.extensions.risuai.emotions && card.data.extensions.risuai.emotions.length > 0){
             for(let i=0;i<card.data.extensions.risuai.emotions.length;i++){
@@ -563,6 +575,115 @@ export async function exportSpecV2(char:character) {
     }
 }
 
+export async function shareRisuHub(char:character) {
+    let img = await readImage(char.image)
+
+    try{
+        const card = await createBaseV2(char)
+        let resources:[string,string][] = []
+        if(card.data.extensions.risuai.emotions && card.data.extensions.risuai.emotions.length > 0){
+            for(let i=0;i<card.data.extensions.risuai.emotions.length;i++){
+                alertStore.set({
+                    type: 'wait',
+                    msg: `Loading... (Adding Emotions ${i} / ${card.data.extensions.risuai.emotions.length})`
+                })
+                const data = card.data.extensions.risuai.emotions[i][1]
+                const rData = await readImage(data)
+                resources.push([data, Buffer.from(rData).toString('base64')])
+            }
+        }
+
+        
+        if(card.data.extensions.risuai.additionalAssets && card.data.extensions.risuai.additionalAssets.length > 0){
+            for(let i=0;i<card.data.extensions.risuai.additionalAssets.length;i++){
+                alertStore.set({
+                    type: 'wait',
+                    msg: `Loading... (Adding Additional Assets ${i} / ${card.data.extensions.risuai.additionalAssets.length})`
+                })
+                const data = card.data.extensions.risuai.additionalAssets[i][1]
+                const rData = await readImage(data)
+                resources.push([data, Buffer.from(rData).toString('base64')])
+            }
+        }
+
+        const da = await fetch(hubURL + '/hub/upload', {
+            method: "POST",
+            body: JSON.stringify({
+                card: card,
+                img: Buffer.from(img).toString('base64'),
+                resources: resources
+            })
+        })
+
+        if(da.status !== 200){
+            alertError(await da.text())
+        }
+        else{
+            alertNormal("Successfuly Uploaded")
+        }
+    }
+    catch(e){
+        alertError(`${e}`)
+    }
+
+}
+
+export async function getRisuHub():Promise<{
+    name:string
+    desc: string
+    download: number,
+    id: string,
+    img: string
+}[]> {
+    const da = await fetch(hubURL + '/hub/list', {
+        method: "POST",
+        body: JSON.stringify({
+
+        })
+    })
+    if(da.status !== 200){
+        return []
+    }
+    return da.json()
+}
+
+export async function downloadRisuHub(id:string, img:string) {
+    alertStore.set({
+        type: "wait",
+        msg: "Downloading..."
+    })
+    const res = await fetch(hubURL + '/hub/get', {
+        method: "POST",
+        body: JSON.stringify({
+            id: id
+        })
+    })
+    if(res.status !== 200){
+        alertError(await res.text())
+    }
+
+    const data:CharacterCardV2 = await res.json()
+
+    await importSpecv2(data, await getHubResources(img), 'hub')
+    checkCharOrder()
+    let db = get(DataBase)
+    if(db.characters[db.characters.length-1]){
+        const index = db.characters.length-1
+        characterFormatUpdate(index);
+        selectedCharID.set(index);
+    }
+
+}
+
+export async function getHubResources(id:string) {
+    const res = await fetch(`${hubURL}/resource/${id}`)
+    if(res.status !== 200){
+        throw (await res.text())
+    }
+    return Buffer.from(await (res).arrayBuffer())
+}
+
+
 
 type CharacterCardV2 = {
     spec: 'chara_card_v2'
@@ -581,7 +702,7 @@ type CharacterCardV2 = {
         character_book?: CharacterBook
         tags: string[]
         creator: string
-        character_version: number
+        character_version: string
         extensions: {
             risuai?:{
                 emotions?:[string, string][]

src/ts/storage/database.ts

@@ -311,7 +311,7 @@ export interface character{
     alternateGreetings:string[]
     tags:string[]
     creator:string
-    characterVersion: number
+    characterVersion: string
     personality:string
     scenario:string
     firstMsgIndex:number
@@ -320,7 +320,7 @@ export interface character{
     additionalData?: {
         tag?:string[]
         creator?:string
-        character_version?:number
+        character_version?:string
     }
     ttsMode?:string
     ttsSpeech?:string

tailwind.config.js

@@ -23,6 +23,8 @@ export default {
         '80p': '80%',
         '80vw': '80vw',
         '14': '3.5rem',
+        '24': '6rem',
+        '36': '9rem',
         '100vw': '100vw'
       },
       borderWidth: {