[feat] realm upload and search

2023-06-04 05:58:58 +09:00
parent 20a58e5f06
commit de1c338f9a
6 changed files with 186 additions and 46 deletions
--- a/src/lang/en.ts
+++ b/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"
 }
--- a/src/lib/SideBars/CharConfig.svelte
+++ b/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 () => {
-            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">{language.shareCloud} <Help key="experimental" /></button>
+            <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}
--- a/src/lib/UI/Hub.svelte
+++ b/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 } from "lucide-svelte";
+    import { DownloadIcon, FlagIcon, SearchIcon } 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">
-    {#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 class="w-full flex justify-center mt-4">
+    <div class="flex w-2xl max-w-full">
+        <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 h-16 w-16 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={getHub}>
+            <SearchIcon />
+        </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>
-            </button>
-        {/each}
-    {/await}
+            </div>
+        </button>
+    {/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={() => {
--- a/src/lib/UI/HubUpload.svelte
+++ b/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>
--- a/src/ts/characterCards.ts
+++ b/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,
-            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,
@@ -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()
 }

--- 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,