Add convertion tool

src/lib/Playground/PlaygroundMenu.svelte

@@ -10,8 +10,11 @@
     import { characterFormatUpdate, createBlankChar } from "src/ts/characters";
     import { get } from "svelte/store";
     import { DataBase, setDatabase, type character } from "src/ts/storage/database";
-  import PlaygroundImageGen from "./PlaygroundImageGen.svelte";
-  import PlaygroundParser from "./PlaygroundParser.svelte";
+    import PlaygroundImageGen from "./PlaygroundImageGen.svelte";
+    import PlaygroundParser from "./PlaygroundParser.svelte";
+    import ToolConvertion from "./ToolConvertion.svelte";
+
+    let easterEggTouch = 0
 
     const playgroundChat = () => {
         let db = get(DataBase)
@@ -81,6 +84,24 @@
             }}>
                 <h1 class="text-2xl font-bold text-start">Parser</h1>
             </button>
+            <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+                PlaygroundStore.set(101)
+            }}>
+                <h1 class="text-2xl font-bold text-start">{language.promptConvertion}</h1>
+            </button>
+            <button class="bg-darkbg rounded-md p-6 flex flex-col transition-shadow hover:ring-1" on:click={() => {
+                easterEggTouch += 1
+            }}>
+                <h1 class="text-2xl font-bold text-start">
+                    {#if easterEggTouch <= 10}
+                        🤗 Coming soon
+                    {:else if easterEggTouch <= 30}
+                        🤗 Still coming soon
+                    {:else if easterEggTouch <= 50}
+                        😇 Really soon
+                    {/if}
+                </h1>
+            </button>
         </div>
     {:else}
         {#if $SizeStore.w < 1024}
@@ -114,6 +135,9 @@
             {#if $PlaygroundStore === 8}
                 <PlaygroundParser/>
             {/if}  
+            {#if $PlaygroundStore === 101}
+                <ToolConvertion/>
+            {/if}  
         </div>
     {/if}
 </div>

src/lib/Playground/ToolConvertion.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    import { language } from "src/lang";
+    import Button from "../UI/GUI/Button.svelte";
+    import { selectMultipleFile } from "src/ts/util";
+    import { detectPromptJSONType, promptConvertion } from "src/ts/process/prompt";
+
+    let files: { name: string, content: string, type:string }[] = []
+
+    const addFile = async () => {
+        const selFiles = await selectMultipleFile(['json'])
+
+        for(let i = 0; i < selFiles.length; i++) {
+            const file = selFiles[i]
+            const text = new TextDecoder().decode(file.data)
+            files.push({
+                name: file.name,
+                content: text,
+                type: detectPromptJSONType(text),
+            })
+        }
+
+        console.log(files)
+        files = files
+
+    }
+</script>
+
+<h2 class="text-4xl text-textcolor my-6 font-black relative">{language.promptConvertion}</h2>
+<span class="text-textcolor2">{language.convertionStep1}</span>
+
+<div class="border border-darkborderc flex flex-col rounded-md p-4 gap-2">
+    {#each files as file, i}
+        <div class="flex justify-between items-center">
+            <div class="flex items-center justify-start">
+                {#if file.type !== 'NOTSUPPORTED'}
+                    <span class="bg-blue-500 rounded-md text-white mr-2 font-bold px-2 py-1">{file.type}</span>
+                {:else}
+                    <span class="bg-red-500 rounded-md text-white mr-2 font-bold px-2 py-1">NOTSUPPORTED</span>
+                {/if}
+                <span>{file.name}</span>
+            </div>
+            <Button>Delete</Button>
+        </div>
+    {/each}
+    <Button on:click={addFile}>Add</Button>
+</div>
+<Button className="mt-6" on:click={() => {
+    promptConvertion(files)
+}}>Run</Button>