[feat] inlay images

src/lib/ChatScreens/DefaultChatScreen.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Suggestion from './Suggestion.svelte';
-    import { CameraIcon, DatabaseIcon, DicesIcon, GlobeIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, RefreshCcwIcon, ReplyIcon, Send, StepForwardIcon } from "lucide-svelte";
+    import { CameraIcon, DatabaseIcon, DicesIcon, GlobeIcon, ImagePlusIcon, LanguagesIcon, Laugh, MenuIcon, MicOffIcon, RefreshCcwIcon, ReplyIcon, Send, StepForwardIcon } from "lucide-svelte";
     import { CurrentCharacter, CurrentChat, CurrentUsername, selectedCharID, CurrentUserIcon, CurrentShowMemoryLimit,CurrentSimpleCharacter } from "../../ts/stores";
     import Chat from "./Chat.svelte";
     import { DataBase, type Message, type character, type groupChat } from "../../ts/storage/database";
@@ -21,6 +21,7 @@
     import { downloadFile } from 'src/ts/storage/globalApi';
     import { runTrigger } from 'src/ts/process/triggers';
     import { v4 } from 'uuid';
+  import { postInlayImage } from 'src/ts/image';
 
     let messageInput:string = ''
     let messageInputTranslate:string = ''
@@ -590,6 +591,19 @@
                         <span class="ml-2">{language.screenshot}</span>
                     </div>
 
+                    {#if $DataBase.inlayImage}
+                        <div class="flex items-center cursor-pointer hover:text-green-500 transition-colors" on:click={async () => {
+                            const imgid = await postInlayImage()
+                            if(imgid){
+                                messageInput += imgid
+                                updateInputSizeAll()
+                            }
+                        }}>
+                            <ImagePlusIcon />
+                            <span class="ml-2">{language.postImage}</span>
+                        </div>
+                    {/if}
+
 
                     <div class={"flex items-center cursor-pointer "+ ($DataBase.useAutoSuggestions ? 'text-green-500':'lg:hover:text-green-500')} on:click={async () => {
                         $DataBase.useAutoSuggestions = !$DataBase.useAutoSuggestions

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -8,6 +8,7 @@
     import TextInput from "src/lib/UI/GUI/TextInput.svelte";
     import SelectInput from "src/lib/UI/GUI/SelectInput.svelte";
   import OptionInput from "src/lib/UI/GUI/OptionInput.svelte";
+  import Help from "src/lib/Others/Help.svelte";
 
 </script>
 <h2 class="text-2xl font-bold mt-2">{language.advancedSettings}</h2>
@@ -35,6 +36,14 @@
     <OptionInput value="old">Tauri</OptionInput>
 </SelectInput>
 
+<span class="text-textcolor mt-4">GPT Vision Quality</span>
+{#if $DataBase.inlayImage}
+    <SelectInput bind:value={$DataBase.gptVisionQuality}>
+        <OptionInput value="low">Low</OptionInput>
+        <OptionInput value="high">High</OptionInput>
+    </SelectInput>
+{/if}
+
 <div class="flex items-center mt-4">
     <Check bind:check={$DataBase.useSayNothing} name={language.sayNothing}/>
 </div>
@@ -56,6 +65,19 @@
 <div class="flex items-center mt-4">
     <Check bind:check={$DataBase.autofillRequestUrl} name="Autofill Request URL"/>
 </div>
+<div class="flex items-center mt-4">
+    <Check bind:check={$DataBase.newOAIHandle} name="New OpenAI Handling"/>
+</div>
+<div class="flex items-center mt-4">
+    <Check bind:check={$DataBase.putUserOpen} name="Put OAI Random User">
+        <Help key="experimental"/><Help key="oaiRandomUser"/>
+    </Check>
+</div>
+<div class="flex items-center mt-4">
+    <Check bind:check={$DataBase.inlayImage} name="Inlay Image Feature">
+        <Help key="experimental"/><Help key="inlayImages"/>
+    </Check>
+</div>
 <button
     on:click={async () => {
         alertMd(getRequestLog())

src/lib/UI/GUI/CheckInput.svelte

@@ -34,6 +34,6 @@
         {/if}
     </span>
     {#if !hiddenName}
-        <span>{name}</span>
+        <span>{name}<slot /></span>
     {/if}
 </label>

src/lib/UI/ModelList.svelte

@@ -103,6 +103,8 @@
                 <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_32k')}}>GPT-4 32K</button>
                 {#if openAdv}
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_1106')}}>GPT-4 Turbo 1106</button>
+                    <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gptvi4_1106')}}>GPT-4 Turbo 1106 Vision</button>
+
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_0301')}}>GPT-4 0301</button>
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_0613')}}>GPT-4 0613</button>
                     <button class="p-2 hover:text-green-500" on:click={() => {changeModel('gpt4_32k_0613')}}>GPT-4 32K 0613</button>