Update to 1.23.0 (#151)

# PR Checklist - [X] Did you check if it works normally in all models? *ignore this when it dosen't uses models* - [X] Did you check if it works normally in all of web, local and node hosted versions? if it dosen't, did you blocked it in those versions? - [X] Did you added a type def? # Description
2023-06-04 10:55:53 +09:00
parent d9fabd1156 c4b0943aef
commit 2dfa58557d
18 changed files with 585 additions and 143 deletions
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -8,7 +8,7 @@
  },
  "package": {
    "productName": "RisuAI",
-    "version": "1.22.4"
+    "version": "1.23.0"
  },
  "tauri": {
    "allowlist": {
--- a/src/lang/en.ts
+++ b/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."
@@ -297,5 +297,8 @@ export const languageEnglish = {
    talkness: "Talkativeness",
    active: "Active",
    loreRandomActivation: "Use Probability Condition",
-    activationProbability: "Probability"
+    activationProbability: "Probability",
+    shareCloud: "Share to RisuRealm",
+    hub: "RisuRealm",
+    tags: "Tags"
 }
--- a/src/lib/ChatScreens/DefaultChatScreen.svelte
+++ b/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">
-            <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>
+        <MainMenu />
    {:else}
        <div class="h-full w-full flex flex-col-reverse overflow-y-auto relative"  on:scroll={(e) => {
            //@ts-ignore
--- a/src/lib/ChatScreens/Suggestion.svelte
+++ b/src/lib/ChatScreens/Suggestion.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { requestChatData } from "src/ts/process/request";
    import { doingChat, type OpenAIChat } from "../../ts/process/index";
-    import { DataBase, type character } from "../../ts/storage/database";
+    import { DataBase, setDatabase, type character, type Message, type groupChat, type Database } from "../../ts/storage/database";
    import { selectedCharID } from "../../ts/stores";
    import { translate } from "src/ts/translator/translator";
    import { CopyIcon, LanguagesIcon, RefreshCcwIcon } from "lucide-svelte";
@@ -9,12 +9,14 @@
    import { language } from "src/lang";
    import { replacePlaceholders } from "../../ts/util";
    import { onDestroy } from 'svelte';
+    import { processScript } from "src/ts/process/scripts";
+    import { get } from "svelte/store";

    export let send: () => any;
    export let messageInput:(string:string) => any;
-    let suggestMessages = $DataBase.characters[$selectedCharID]?.chats[$DataBase.characters[$selectedCharID].chatPage]?.suggestMessages
+    let suggestMessages:string[] = $DataBase.characters[$selectedCharID]?.chats[$DataBase.characters[$selectedCharID].chatPage]?.suggestMessages
    let suggestMessagesTranslated:string[]
-    let toggleTranslate = $DataBase.autoTranslate
+    let toggleTranslate:boolean = $DataBase.autoTranslate
    let progress:boolean;
    let progressChatPage=-1;
    let abortController:AbortController;
@@ -45,9 +47,20 @@
            suggestMessages = []
        }
        if(!v && $selectedCharID > -1 && (!suggestMessages || suggestMessages.length === 0) && !progress){
-            let currentChar = $DataBase.characters[$selectedCharID] as character;
-            let messages = currentChar.chats[currentChar.chatPage].message;
-            let lastMessages = messages.slice(Math.max(messages.length - 10, 0));
+            let currentChar:character|groupChat = $DataBase.characters[$selectedCharID];
+            let messages:Message[] = []
+            
+            if(currentChar.type !== 'group'){
+                const firstMsg:string = currentChar.firstMsgIndex === -1 ? currentChar.firstMessage : currentChar.alternateGreetings[currentChar.firstMsgIndex]
+                messages.push({
+                    role: 'char',
+                    data: processScript(currentChar,
+                        replacePlaceholders(firstMsg, currentChar.name),
+                    'editprocess')
+                })
+            }
+            messages = [...messages, ...currentChar.chats[currentChar.chatPage].message];
+            let lastMessages:Message[] = messages.slice(Math.max(messages.length - 10, 0));
            if(lastMessages.length === 0)
                return
            const promptbody:OpenAIChat[] = [
@@ -58,7 +71,7 @@
            ,
            {
                role: 'user', 
-                content: lastMessages.map(b=>b.role+":"+b.data).reduce((a,b)=>a+','+b)
+                content: lastMessages.map(b=>(b.role==='char'? 'assistant' : 'user')+":"+b.data).reduce((a,b)=>a+','+b)
            }
            ]

@@ -68,11 +81,13 @@
            requestChatData({
                formated: promptbody,
                bias: {},
-                currentChar
+                currentChar : currentChar as character
            }, 'submodel', abortController.signal).then(rq2=>{
                if(rq2.type !== 'fail' && rq2.type !== 'streaming' && progress){
                    var suggestMessagesNew = rq2.result.split('\n').filter(msg => msg.startsWith('-')).map(msg => msg.replace('-','').trim())
-                    currentChar.chats[currentChar.chatPage].suggestMessages = suggestMessagesNew
+                    const db:Database = get(DataBase);
+                    db.characters[$selectedCharID].chats[currentChar.chatPage].suggestMessages = suggestMessagesNew
+                    setDatabase(db)
                    suggestMessages = suggestMessagesNew
                }
                progress = false
--- a/src/lib/Others/Help.svelte
+++ b/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} />
--- a/src/lib/Setting/Pages/BotSettings.svelte
+++ b/src/lib/Setting/Pages/BotSettings.svelte
@@ -147,7 +147,6 @@
    <span class="text-neutral-200">{language.globalNote} <Help key="globalNote"/></span>
    <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.globalNote}></textarea>
    <span class="text-gray-400 mb-6 text-sm">{tokens.globalNote} {language.tokens}</span>    
-    <span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>

    <span class="text-neutral-200">{language.maxContextSize}</span>
 {#if $DataBase.aiModel === 'gpt35'}
@@ -175,8 +174,9 @@
 <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl} placeholder="Leave blank to not replace url">
 <span class="text-neutral-200 mt-2">{language.submodel} {language.forceReplaceUrl} <Help key="forceUrl"/></span>
 <input class="text-neutral-200 p-2 bg-transparent input-text focus:bg-selected text-sm"bind:value={$DataBase.forceReplaceUrl2} placeholder="Leave blank to not replace url">
-<span class="text-neutral-200">{language.autoSuggest} <Help key="autoSuggest"/></span>
-<textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.autoSuggestPrompt}></textarea>
+<span class="text-neutral-200 mt-2">{language.autoSuggest} <Help key="autoSuggest"/></span>
+<textarea class="bg-transparent input-text mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={$DataBase.autoSuggestPrompt}></textarea>
+<span class="text-gray-400 mb-6 text-sm">{tokens.autoSuggest} {language.tokens}</span>

 {/if}

--- a/src/lib/Setting/Settings.svelte
+++ b/src/lib/Setting/Settings.svelte
@@ -25,7 +25,7 @@

 </script>
 <div class="h-full w-full flex justify-center setting-bg">
-    <div class="h-full max-w-screen-lg w-full flex">
+    <div class="h-full max-w-screen-lg w-full flex relative">
        {#if window.innerWidth >= 700 || selected === -1}
            <div class="flex h-full flex-col p-4 pt-8 bg-darkbg gap-2 overflow-y-auto relative"
                class:w-full={window.innerWidth < 700}>
@@ -135,7 +135,8 @@
                {:else if selected === 11}
                    <AccessibilitySettings/>
                {/if}
-                <button class="absolute top-2 right-2 hover:text-green-500" on:click={() => {
+            </div>
+            <button class="absolute top-2 right-2 hover:text-green-500 text-white" on:click={() => {
                if(window.innerWidth >= 700){
                    settingsOpen.set(false)
                }
@@ -145,7 +146,6 @@
            }}>
                <XCircleIcon />
            </button>            
-            </div>
        {/if}
    </div>
 </div>
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/src/lib/SideBars/CharConfig.svelte
@@ -14,13 +14,14 @@
    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";
+  import HubUpload from "../UI/HubUpload.svelte";

    let subMenu = 0
-    let subberMenu = 0
+    let openHubUpload = false
    let emos:[string, string][] = []
    let tokens = {
        desc: 0,
@@ -118,7 +119,7 @@
    <button class={subMenu === 1 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 1}}>
        <SmileIcon />
    </button>
-    <button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 3;subberMenu = 0}}>
+    <button class={subMenu === 3 ? 'text-gray-200' : 'text-gray-500'} on:click={() => {subMenu = 3}}>
        <BookIcon />
    </button>
    {#if currentChar.type === 'character'}
@@ -664,6 +665,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 () => {
+                openHubUpload = true
+            }} 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">{language.shareCloud} <Help key="experimental" /></button>
+        {/if}
+        {#if openHubUpload}
+            <HubUpload bind:char={currentChar.data} close={() => {openHubUpload=false}}/>
+        {/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>
--- a/src/lib/SideBars/Sidebar.svelte
+++ b/src/lib/SideBars/Sidebar.svelte
@@ -23,6 +23,7 @@
    PlusIcon,
    FolderIcon,
    FolderOpenIcon,
+    HomeIcon,
  } from "lucide-svelte";
  import {
    characterFormatUpdate,
@@ -51,18 +52,27 @@

  function createScratch() {
    reseter();
-    const cid = createNewCharacter();
-    selectedCharID.set(-1);
+    createNewCharacter();
+    let db = get(DataBase)
+    if(db.characters[db.characters.length-1]){
+        changeChar(db.characters.length-1)
+    }
  }
  function createGroup() {
    reseter();
-    const cid = createNewGroup();
-    selectedCharID.set(-1);
+    createNewGroup();
+    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) {
@@ -498,6 +508,12 @@
        }}><Settings /></BarIcon
      >
      <div class="mt-2"></div>
+      <BarIcon
+        onClick={() => {
+          reseter();
+          selectedCharID.set(-1)
+        }}><HomeIcon /></BarIcon>
+      <div class="mt-2"></div>
      <BarIcon
        onClick={() => {
          reseter();
@@ -509,8 +525,8 @@
 </div>
 <div
  class="setting-area flex w-96 flex-col overflow-y-auto overflow-x-hidden bg-darkbg p-6 text-gray-200"
-  class:flex-grow={$SizeStore.w <= 1000}
-  class:minw96={$SizeStore.w > 1000}
+  class:flex-grow={$SizeStore.w <= 1028}
+  class:minw96={$SizeStore.w > 1028}
 >
  <button
    class="flex w-full justify-end text-gray-200"
@@ -530,7 +546,6 @@
      <CharConfig />
    {/if}
  {:else if sideBarMode === 1}
-    <h2 class="title mt-2 text-xl font-bold">Create</h2>
    <button
      on:click={createScratch}
      class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-5 text-lg drop-shadow-lg hover:bg-selected"
@@ -549,16 +564,6 @@
    >
      {language.createGroup}
    </button>
-    <h2 class="title mt-4 text-xl font-bold">Edit</h2>
-    <button
-      on:click={() => {
-        editMode = !editMode;
-        $selectedCharID = -1;
-      }}
-      class="ml-2 mr-2 mt-2 flex items-center justify-center border-1 border-solid border-borderc p-3 drop-shadow-lg hover:bg-selected"
-    >
-      {language.editOrder}
-    </button>
  {/if}
 </div>

@@ -574,9 +579,6 @@
  .minw96 {
    min-width: 24rem; /* 384px */
  }
-  .title {
-    margin-bottom: 0.5rem;
-  }
  .editMode {
    min-width: 6rem;
  }
--- a/src/lib/UI/Hub.svelte
+++ b/src/lib/UI/Hub.svelte
@@ -0,0 +1,140 @@
+<script lang="ts">
+    import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
+    import { DownloadIcon, FlagIcon, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
+  import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
+
+    let openedData:null|{
+        name:string
+        desc: string
+        download: number,
+        id: string,
+        img: string
+    } = null
+
+    let charas:{
+        name:string
+        desc: string
+        download: number,
+        id: string,
+        img: string
+        tags: string[]
+    }[] = []
+
+    let search = ''
+    let menuOpen = false
+
+    async function getHub(){
+        charas = await getRisuHub({
+            search: search
+        })
+    }
+
+    getHub()
+
+
+</script>
+<div class="w-full flex justify-center mt-4 mb-3">
+    <div class="flex w-2xl max-w-full items-center">
+        <input class="flex-grow text-xl pl-3 pr-3 rounded-lg bg-darkbg h-16 min-w-0" placeholder="Search" bind:value={search}>
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={getHub}>
+            <SearchIcon />
+        </button>
+        <button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
+            menuOpen = true
+        }}>
+            <MenuIcon />
+        </button>
+    </div>
+</div>
+<div class="w-full flex gap-4 p-2 flex-wrap justify-center">
+    {#each charas as chara}
+        <button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={() => {
+            openedData = chara
+        }}>
+            <div class="flex gap-2 w-full">
+                <img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
+                <div class="flex flex-col flex-grow min-w-0">
+                    <span class="text-white text-lg min-w-0 max-w-full text-ellipsis whitespace-nowrap overflow-hidden text-start">{chara.name}</span>
+                    <span class="text-gray-400 text-xs min-w-0 max-w-full text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden text-start">{chara.desc}</span>
+                    <div class="flex flex-wrap">
+                        {#each chara.tags as tag, i}
+                            {#if i < 4}
+                                <div class="text-xs p-1 text-blue-400">{tag}</div>
+                            {:else if i === 4}
+                                <div class="text-xs p-1 text-blue-400">...</div>
+                            {/if}
+                        {/each}
+                    </div>
+                </div>
+            </div>
+        </button>
+    {/each}
+</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 gap-4">
+                <div class="flex flex-col">
+                    <img class="h-36 w-36 rounded-md object-top object-cover" 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" on:click|stopPropagation={async () => {
+                    const conf = await alertConfirm('Report this character?')
+                    if(conf){
+                        const report = await alertInput('Write a report text that would be sent to the admin')
+                        const da = await fetch(hubURL + '/hub/report', {
+                            method: "POST",
+                            body: JSON.stringify({
+                                id: openedData.id,
+                                report: report
+                            })
+                        })
+                        alertNormal(await da.text())
+                    }
+                }}>
+                    <FlagIcon />
+                </button>
+                <button class="text-gray-400 hover:text-green-500" on:click={() => {
+                    downloadRisuHub(openedData.id)
+                    openedData = null
+                }}>
+                    <DownloadIcon />
+                </button>
+            </div>
+        </div>
+    </div>
+
+{/if}
+
+{#if menuOpen}
+    <!-- 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={() => {
+        menuOpen = false
+    }}>
+        <div class="max-w-full bg-darkbg rounded-md flex flex-col gap-4 overflow-y-auto p-4">
+            <h1 class="font-bold text-2xl w-full">
+                <span>
+                    Menu
+                </span>
+                <button class="float-right text-gray-400 hover:text-green-500" on:click={() => {menuOpen = false}}>
+                    <XIcon />
+                </button>
+            </h1>
+            <div class=" mt-2 w-full border-t-2 border-t-bgcolor"></div>
+            <button class="w-full hover:bg-selected p-4" on:click|stopPropagation={async () => {
+                menuOpen = false
+                const id = await alertInput('Import ID')
+                downloadRisuHub(id)
+
+            }}>Import Character from ID</button>
+        </div>
+    </div>
+{/if}
--- a/src/lib/UI/HubUpload.svelte
+++ b/src/lib/UI/HubUpload.svelte
@@ -0,0 +1,65 @@
+<!-- svelte-ignore a11y-click-events-have-key-events -->
+<div  class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" on:click={close}>
+    <div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl" on:click|stopPropagation>
+        <h1 class="font-bold text-2xl w-full">
+            <span>
+                Share {char.name} to {language.hub}
+            </span>
+            <button class="float-right text-gray-400 hover:text-green-500" on:click={close}>
+                <XIcon />
+            </button>
+        </h1>
+        <div class="mb-2 mt-2 w-full border-t-2 border-t-bgcolor"></div>
+        <span class="text-neutral-200">{language.creatorNotes}</span>
+        <span class="text-gray-400 text-sm">A description that displays when you search and when you first open a bot.</span>
+        <span class="text-gray-400 text-sm">More than 20 characters.</span>
+        <textarea class="bg-transparent input-text mt-2 mb-2 text-gray-200 resize-none h-20 min-h-20 focus:bg-selected text-xs w-full" autocomplete="off" bind:value={char.creatorNotes}></textarea>
+        <span class="text-neutral-200">{language.tags}</span>
+        <span class="text-gray-400 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
+        <input class="text-neutral-200 mb-4 p-2 bg-transparent input-text focus:bg-selected" placeholder="" bind:value={tags} on:input={() => {
+            tags = tags.replace(/[^a-zA-Z,]/g, '').toLocaleLowerCase()
+        }}>
+        <div class="flex items-center flex-wrap">
+            <button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!privateMode} on:click={() => {privateMode = false}}>🌏 Public</button>
+            <button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={privateMode} on:click={() => {privateMode = true}}>🔒 Private</button>
+        </div>
+        <div class="flex items-center flex-wrap mt-2">
+            <button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!nsfwMode} on:click={() => {nsfwMode = false}}>🧑‍🧒‍🧒 Safe</button>
+            <button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={nsfwMode} on:click={() => {nsfwMode = true}}>🔞 NSFW</button>
+        </div>
+        {#if nsfwMode}
+            <span class="text-gray-400 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
+        {/if}
+        {#if privateMode}
+            <span class="text-gray-400 text-sm">Private characters can be removed from the server if there is only a few downloads.</span>
+        {/if}
+        <button on:click={async () => {
+            if(char.creatorNotes.length < 20){
+                alertError("Creator Notes must be longer than 20 characters")
+            }
+            else{
+                shareRisuHub(char, {
+                    privateMode: privateMode,
+                    nsfw: nsfwMode,
+                    tag: tags
+                })
+                close()
+            }
+        }} class="text-neutral-200 mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">{language.shareCloud}</button>
+    </div>
+</div>
+
+
+<script lang="ts">
+    import { XIcon } from "lucide-svelte";
+    import { language } from "src/lang";
+  import { alertError } from "src/ts/alert";
+  import { shareRisuHub } from "src/ts/characterCards";
+    import type { character } from "src/ts/storage/database";
+    export let close = () => {}
+    export let char:character
+    let tags=""
+    let privateMode = false
+    let nsfwMode = false
+
+</script>
--- a/src/lib/UI/MainMenu.svelte
+++ b/src/lib/UI/MainMenu.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { DataBase, appVer } from "src/ts/storage/database";
+  import GithubStars from "../Others/GithubStars.svelte";
+  import Hub from "./Hub.svelte";
+  import { sideBarStore } from "src/ts/stores";
+  import Help from "../Others/Help.svelte";
+  import { ArrowLeft, HomeIcon } from "lucide-svelte";
+  import { openURL } from "src/ts/storage/globalApi";
+  import { language } from "src/lang";
+  let openHub = false
+</script>
+<div class="h-full w-full flex flex-col overflow-y-auto items-center">
+    {#if !openHub}
+      <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 />
+    {/if}
+    <div class="w-full flex p-4 flex-col text-white max-w-4xl">
+      {#if !openHub}
+      <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+        <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+          openURL("https://github.com/kwaroran/RisuAI/wiki/RisuAI-Quick-Start")
+        }}>
+          <h1 class="text-2xl font-bold text-start">Quick Start</h1>
+          <span class="mt-2 text-gray-400 text-start">Simple Guide to start RisuAI</span>
+        </button>
+        <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+          openURL("https://github.com/kwaroran/RisuAI/wiki")
+        }}>
+          <h1 class="text-2xl font-bold text-start">Official Wiki</h1>
+          <span class="mt-2 text-gray-400 text-start">Official Wiki for RisuAI. anyone can see and anyone who has github account can edit.</span>
+        </button>
+        <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {sideBarStore.set(true)}}>
+          <h1 class="text-2xl font-bold text-start">Your Characters</h1>
+          <span class="mt-2 text-gray-400 text-start">Opens your character list. you can open with pressing arrow button in top left corner too.</span>
+        </button>
+        {#if $DataBase.useExperimental}
+          <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => (openHub = true)}>
+            <h1 class="text-2xl font-bold text-start">{language.hub} <Help key="experimental" /></h1>
+            <span class="mt-2 text-gray-400 text-start">Characters made and shared by the community</span>
+          </button>
+        {:else}
+          <button class="bg-darkbg rounded-md p-6 flex flex-col">
+            <h1 class="text-2xl font-bold text-start">Comming soon</h1>
+            <span class="mt-2 text-gray-400 text-start">More options comming soon</span>
+          </button>
+        {/if}
+      </div>
+      {:else}
+        <div class="flex items-center mt-4">
+          <button class="mr-2 text-gray-400 hover:text-green-500" on:click={() => (openHub = false)}>
+            <ArrowLeft/>
+          </button>
+          <h1 class="text-3xl font-bold">{language.hub} <Help key="experimental" /> </h1>
+        </div>
+        <Hub />
+      {/if}
+  </div>
+</div>
--- a/src/ts/characterCards.ts
+++ b/src/ts/characterCards.ts
@@ -1,5 +1,5 @@
 import { get } from "svelte/store"
-import { alertConfirm, alertError, alertNormal, alertSelect, alertStore } from "./alert"
+import { alertConfirm, alertError, alertMd, alertNormal, alertSelect, alertStore } from "./alert"
 import { DataBase, defaultSdDataFunc, type character, setDatabase, type customscript, type loreSettings, type loreBook } from "./storage/database"
 import { checkNullish, selectMultipleFile, selectSingleFile, sleep } from "./util"
 import { language } from "src/lang"
@@ -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,
@@ -426,7 +431,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array):Promise<boole
        loreSettings: loresettings,
        loreExt: loreExt,
        additionalData: {
-            tag: data.tags,
+            tag: data.tags ?? [],
            creator: data.creator,
            character_version: data.character_version
        },
@@ -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){
@@ -479,15 +482,15 @@ export async function exportSpecV2(char:character) {
        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,
+            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,
@@ -495,9 +498,9 @@ export async function exportSpecV2(char:character) {
                extensions: char.loreExt ?? {},
                entries: charBook
            },
-                tags: char.additionalData?.tag ?? [],
+            tags: char.tags ?? [],
            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,143 @@ export async function exportSpecV2(char:character) {
    }
 }

+export async function shareRisuHub(char:character, arg:{
+    nsfw: boolean,
+    privateMode:boolean
+    tag:string
+}) {
+    char = cloneDeep(char)
+
+    let tagList = arg.tag.split(',')
+    
+    if(arg.nsfw){
+        tagList.push("NSFW")
+    }
+    if(arg.privateMode){
+        tagList.push("private")
+    }
+    
+
+    let tags = tagList.filter((v, i) => {
+        return (!!v) && (tagList.indexOf(v) === i)
+    })
+    char.tags = tags
+
+
+    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{
+            alertMd(await da.text())
+        }
+    }
+    catch(e){
+        alertError(`${e}`)
+    }
+
+}
+
+export async function getRisuHub(arg?:{
+    search?:string
+}):Promise<{
+    name:string
+    desc: string
+    download: number,
+    id: string,
+    img: string
+    tags: string[]
+}[]> {
+    const da = await fetch(hubURL + '/hub/list', {
+        method: "POST",
+        body: JSON.stringify(arg ?? {})
+    })
+    if(da.status !== 200){
+        return []
+    }
+    console.log(da)
+    return da.json()
+}
+
+export async function downloadRisuHub(id: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 result = await res.json()
+    const data:CharacterCardV2 = result.card
+    const img:string = result.img
+
+    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 +730,7 @@ type CharacterCardV2 = {
        character_book?: CharacterBook
        tags: string[]
        creator: string
-        character_version: number
+        character_version: string
        extensions: {
            risuai?:{
                emotions?:[string, string][]
--- a/src/ts/characters.ts
+++ b/src/ts/characters.ts
@@ -280,14 +280,14 @@ export function characterFormatUpdate(index:number|character){
        cha.systemPrompt = cha.systemPrompt ?? ''
        cha.tags = cha.tags ?? []
        cha.creator = cha.creator ?? ''
-        cha.characterVersion = cha.characterVersion ?? 0
+        cha.characterVersion = cha.characterVersion ?? ''
        cha.personality = cha.personality ?? ''
        cha.scenario = cha.scenario ?? ''
        cha.firstMsgIndex = cha.firstMsgIndex ?? -1
        cha.additionalData = cha.additionalData ?? {
            tag: [],
            creator: '',
-            character_version: 0
+            character_version: ''
        }
        cha.voicevoxConfig = cha.voicevoxConfig ?? {
            SPEED_SCALE: 1,
@@ -356,7 +356,7 @@ export function createBlankChar():character{
        alternateGreetings:[],
        tags:[],
        creator:"",
-        characterVersion: 0,
+        characterVersion: '',
        personality:"",
        scenario:"",
        firstMsgIndex: -1,
--- a/src/ts/storage/database.ts
+++ b/src/ts/storage/database.ts
@@ -8,7 +8,7 @@ import { defaultAutoSuggestPrompt, defaultJailbreak, defaultMainPrompt } from '.

 export const DataBase = writable({} as any as Database)
 export const loadedStore = writable(false)
-export let appVer = '1.22.4'
+export let appVer = '1.23.0'

 export function setDatabase(data:Database){
    if(checkNullish(data.characters)){
@@ -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
--- a/src/ts/stores.ts
+++ b/src/ts/stores.ts
@@ -11,7 +11,7 @@ export const SizeStore = writable({
    w: 0,
    h: 0
 })
-export const sideBarStore = writable(true)
+export const sideBarStore = writable(false)
 export const selectedCharID = writable(-1)
 export const CharEmotion = writable({} as {[key:string]: [string, string, number][]})
 export const ViewBoxsize = writable({ width: 12 * 16, height: 12 * 16 }); // Default width and height in pixels
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -23,6 +23,8 @@ export default {
        '80p': '80%',
        '80vw': '80vw',
        '14': '3.5rem',
+        '24': '6rem',
+        '36': '9rem',
        '100vw': '100vw'
      },
      borderWidth: {
--- a/version.json
+++ b/version.json
@@ -1 +1 @@
-{"version":"1.22.4"}
+{"version":"1.23.0"}