[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";
@@ -664,6 +664,14 @@
             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,10 +449,8 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
 
 }
 
-export async function exportSpecV2(char:character) {
-    let img = await readImage(char.image)
 
-    try{
+async function createBaseV2(char:character) {
     
     let charBook:charBookEntry[] = []
     for(const lore of char.globalLore){
@@ -497,7 +500,7 @@ export async function exportSpecV2(char:character) {
             },
             tags: char.additionalData?.tag ?? [],
             creator: char.additionalData?.creator ?? '',
-                character_version: char.additionalData?.character_version ?? 0,
+            character_version: `${char.additionalData?.character_version}` ?? '',
             extensions: {
                 risuai: {
                     emotions: char.emotionImages,
@@ -511,8 +514,17 @@ export async function exportSpecV2(char:character) {
             }
         }
     }
+    console.log(card)
+    return card
+}
 
 
+export async function exportSpecV2(char:character) {
+    let img = await readImage(char.image)
+
+    try{
+        const card = await createBaseV2(char)
+
         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({
@@ -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: {