[feat] realm upload and search

src/lang/en.ts

@@ -299,5 +299,6 @@ export const languageEnglish = {
     loreRandomActivation: "Use Probability Condition",
     activationProbability: "Probability",
     shareCloud: "Share to RisuRealm",
-    hub: "RisuRealm"
+    hub: "RisuRealm",
+    tags: "Tags"
 }

src/lib/SideBars/CharConfig.svelte

@@ -17,10 +17,11 @@
     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 { 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'}
@@ -665,12 +666,12 @@
         }} 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 () => {
+            <button on:click={async () => {
-            const cha = $DataBase.characters[$selectedCharID]
+                openHubUpload = true
-            if(cha.type !== 'group'){
+            }} 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>
-                shareRisuHub(cha)
+        {/if}
-            }
+        {#if openHubUpload}
-        }} 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>
+            <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}

src/lib/UI/Hub.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { downloadRisuHub, getRisuHub, hubURL } from "src/ts/characterCards";
-    import Help from "../Others/Help.svelte";
+    import { DownloadIcon, FlagIcon, SearchIcon } from "lucide-svelte";
-    import { DownloadIcon, FlagIcon } from "lucide-svelte";
+  import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
 
     let openedData:null|{
         name:string
@@ -11,21 +11,58 @@
         img: string
     } = null
 
+    let charas:{
+        name:string
+        desc: string
+        download: number,
+        id: string,
+        img: string
+        tags: string[]
+    }[] = []
+
+    let search = ''
+
+    async function getHub(){
+        charas = await getRisuHub({
+            search: search
+        })
+    }
+
+    getHub()
+
+
 </script>
-<div class="w-full flex gap-4 p-2 flex-wrap">
+<div class="w-full flex justify-center mt-4">
-    {#await getRisuHub() then charas}
+    <div class="flex w-2xl max-w-full">
-        {#each charas as chara}
+        <input class="flex-grow text-xl pl-3 pr-3 mb-3 rounded-lg bg-darkbg h-16 min-w-0" placeholder="Search" bind:value={search}>
-            <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={() => {
+        <button class="bg-darkbg h-16 w-16 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={getHub}>
-                openedData = chara
+            <SearchIcon />
-            }}>
+        </button>
-                <div class="flex flex-col">
+    </div>
-                    <img class="h-36 w-36 rounded-md" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
+</div>
-                    <span class="text-white text-lg max-w-36 text-ellipsis whitespace-nowrap overflow-hidden">{chara.name}</span>
+<div class="w-full flex gap-4 p-2 flex-wrap justify-center">
-                    <span class="text-gray-400 text-xs max-w-36 text-ellipsis break-words max-h-8 whitespace-nowrap overflow-hidden">{chara.desc}</span>
+    {#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>
-            </button>
+            </div>
-        {/each}
+        </button>
-    {/await}
+    {/each}
 </div>
 
 
@@ -37,13 +74,26 @@
         <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}>
+                    <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">
+                <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={() => {

src/lib/UI/HubUpload.svelte

@@ -0,0 +1,62 @@
+<!-- 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 Child poronography would be banned.</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>

src/ts/characterCards.ts

@@ -431,7 +431,7 @@ async function importSpecv2(card:CharacterCardV2, img?:Uint8Array, mode?:'hub'|'
         loreSettings: loresettings,
         loreExt: loreExt,
         additionalData: {
-            tag: data.tags,
+            tag: data.tags ?? [],
             creator: data.creator,
             character_version: data.character_version
         },
@@ -482,15 +482,15 @@ async function createBaseV2(char:character) {
         spec_version: "2.0",
         data: {
             name: char.name,
-            description: char.desc,
+            description: char.desc ?? '',
-            personality: char.personality,
+            personality: char.personality ?? '',
-            scenario: char.scenario,
+            scenario: char.scenario ?? '',
-            first_mes: char.firstMessage,
+            first_mes: char.firstMessage ?? '',
-            mes_example: char.exampleMessage,
+            mes_example: char.exampleMessage ?? '',
-            creator_notes: char.creatorNotes,
+            creator_notes: char.creatorNotes ?? '',
-            system_prompt: char.systemPrompt,
+            system_prompt: char.systemPrompt ?? '',
-            post_history_instructions: char.replaceGlobalNote,
+            post_history_instructions: char.replaceGlobalNote ?? '',
-            alternate_greetings: char.alternateGreetings,
+            alternate_greetings: char.alternateGreetings ?? [],
             character_book: {
                 scan_depth: char.loreSettings?.scanDepth,
                 token_budget: char.loreSettings?.tokenBudget,
@@ -498,7 +498,7 @@ async function createBaseV2(char:character) {
                 extensions: char.loreExt ?? {},
                 entries: charBook
             },
-            tags: char.additionalData?.tag ?? [],
+            tags: char.tags ?? [],
             creator: char.additionalData?.creator ?? '',
             character_version: `${char.additionalData?.character_version}` ?? '',
             extensions: {
@@ -575,7 +575,29 @@ export async function exportSpecV2(char:character) {
     }
 }
 
-export async function shareRisuHub(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{
@@ -594,6 +616,8 @@ export async function shareRisuHub(char:character) {
         }
 
         
+
+        
         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({
@@ -628,22 +652,24 @@ export async function shareRisuHub(char:character) {
 
 }
 
-export async function getRisuHub():Promise<{
+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({
+        body: JSON.stringify(arg ?? {})
-
-        })
     })
     if(da.status !== 200){
         return []
     }
+    console.log(da)
     return da.json()
 }
 

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,