feat: add new realm system

src/lib/SideBars/CharConfig.svelte

@@ -30,7 +30,7 @@
     import { updateInlayScreen } from "src/ts/process/inlayScreen";
     import { registerOnnxModel } from "src/ts/process/transformers";
     import MultiLangInput from "../UI/GUI/MultiLangInput.svelte";
-  import { shareRealmCard } from "src/ts/realm";
+    import RealmFrame from "../UI/Realm/RealmFrame.svelte";
     
 
     let subMenu = 0
@@ -846,8 +846,7 @@
                     return
                 }
                 if(await alertTOS()){
-                    // openHubUpload = true
+                    openHubUpload = true
-                    shareRealmCard()
                 }
             }} className="mt-2">
                 {#if currentChar.data.realmId}
@@ -859,7 +858,8 @@
         {/if}
 
         {#if openHubUpload}
-            <RealmUpload bind:char={currentChar.data} close={() => {openHubUpload=false}}/>
+            <!-- <RealmUpload bind:char={currentChar.data} close={() => {openHubUpload=false}}/> -->
+            <RealmFrame close={() => {openHubUpload=false}}/>
         {/if}
     {:else}
         {#if currentChar.data.chats[currentChar.data.chatPage].supaMemoryData && currentChar.data.chats[currentChar.data.chatPage].supaMemoryData.length > 4 || currentChar.data.supaMemory}

src/lib/UI/Realm/RealmFrame.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { alertMd } from "src/ts/alert";
+    import { shareRealmCardData } from "src/ts/realm";
+    import { DataBase } from "src/ts/storage/database";
+    import { CurrentCharacter } from "src/ts/stores";
+    import { sleep } from "src/ts/util";
+    import { onDestroy, onMount } from "svelte";
+
+    export let close: () => void
+    let iframe: HTMLIFrameElement = null
+    const tk = $DataBase?.account?.token;
+    const id = $DataBase?.account?.id
+    let loadingStage = 0
+    let pongGot = false
+
+    const pmfunc = (e:MessageEvent) => {
+        if(e.data.type === 'filedata' && e.data.success){
+            loadingStage = 2
+        }
+        if(e.data.type === 'pong'){
+            pongGot = true
+        }
+        if(e.data.type === 'close'){
+            close()
+        }
+        if(e.data.type === 'success'){
+            alertMd('## Upload Success\n\nYour character has been uploaded to Realm successfully.')
+            if($CurrentCharacter.type === 'character'){
+                loadingStage = 0
+                $CurrentCharacter.realmId = e.data.id
+            }
+            close()
+        }
+    }
+
+    const waitPing = async () => {
+        if(iframe){
+            while(!pongGot){
+                iframe.contentWindow.postMessage({
+                    type: 'ping'
+                }, '*')
+                await sleep(300)
+            }
+        }
+    }
+
+    onMount(async () => {
+        window.addEventListener('message', pmfunc)
+
+        const data = await shareRealmCardData()
+
+        if(iframe){
+            await waitPing()
+            loadingStage = 1
+            iframe.contentWindow.postMessage({
+                type: 'filedata',
+                buf: [data.data, data.name]
+            }, '*', [data.data, data.name])
+        }
+    })
+
+    const getUrl = () => {
+        let url = `https://realm.risuai.net/upload?token=${tk}&token_id=${id}`
+        if($CurrentCharacter.type === 'character' && $CurrentCharacter.realmId){
+            url += `&edit=${$CurrentCharacter.realmId}&edit-type=normal`
+        }
+        url += '#noLayout'
+        return url
+    }
+
+    onDestroy(() => {
+        window.removeEventListener('message', pmfunc)
+    })
+</script>
+
+<div class="top-0 left-0 z-50 fixed w-full h-full flex flex-col justify-center items-center text-textcolor bg-white">
+    <div class="bg-darkbg border-b border-b-darkborderc w-full flex p-2">
+        <h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis">Upload to Realm</h1>
+        <button class="text-textcolor text-lg hover:text-red-500 ml-auto" on:click={close}>&times;</button>
+    </div>
+    {#if loadingStage < 1}
+    <div class="w-full flex justify-center items-center p-4 flex-1">
+        <div class="loadmove"/>
+    </div>
+    {/if}
+    <iframe bind:this={iframe}
+        src={getUrl()}
+        title="upload" class="w-full flex-1" class:hidden={loadingStage < 1}
+    />
+</div>

src/lib/UI/Realm/RealmMain.svelte

@@ -120,7 +120,7 @@
 {/if}
 
 {#if openedData}
-    <RealmPopUp bind:openedData={openedData} />
+    <!-- <RealmPopUp bind:openedData={openedData} /> -->
 {/if}
 
 

src/ts/realm.ts

@@ -16,11 +16,20 @@ window.addEventListener("message", (event) => {
     }
 });
 
-export async function shareRealmCard() {
+export async function shareRealmCardData():Promise<{ name: ArrayBuffer; data: ArrayBuffer; }> {
     const char = structuredClone(get(CurrentCharacter)) as character
+    const trimedName = char.name.replace(/[^a-zA-Z0-9]/g, '') || 'character';
     const writer = new VirtualWriter()
+    const namebuf = new TextEncoder().encode(trimedName + '.png')
     await exportSpecV2(char, 'png', {writer: writer})
-    openRealm(char.name, writer.buf.buffer)
+    alertStore.set({
+        type: 'none',
+        msg: ''
+    })
+    return {
+        name: namebuf.buffer,
+        data: writer.buf.buffer.buffer
+    }
 }
 
 export async function openRealm(name:string,data:ArrayBuffer) {
@@ -29,5 +38,4 @@ export async function openRealm(name:string,data:ArrayBuffer) {
     const trimedName = name.replace(/[^a-zA-Z0-9]/g, '') || 'character';
     const filedata = encodeURIComponent(Buffer.from(data).toString('base64')) + `&${trimedName}.png`;
     const url = `https://realm.risuai.net/upload?token=${tk}&token_id=${id}#filedata=${filedata}`
-    window.open(url, '_blank')
 }