From d1b533cbfa01f78950e1073c0b1c3905df0dcccd Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Fri, 7 Jun 2024 02:25:42 +0300
Subject: [PATCH] Move caption extension settings into template

---
 public/scripts/extensions/caption/index.js    | 100 +-----------------
 .../scripts/extensions/caption/settings.html  |  90 ++++++++++++++++
 2 files changed, 95 insertions(+), 95 deletions(-)
 create mode 100644 public/scripts/extensions/caption/settings.html

diff --git a/public/scripts/extensions/caption/index.js b/public/scripts/extensions/caption/index.js
index 7cdae323..c1ba2904 100644
--- a/public/scripts/extensions/caption/index.js
+++ b/public/scripts/extensions/caption/index.js
@@ -1,5 +1,5 @@
 import { getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
-import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules } from '../../extensions.js';
+import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules, renderExtensionTemplateAsync } from '../../extensions.js';
 import { callPopup, getRequestHeaders, saveSettingsDebounced, substituteParams } from '../../../script.js';
 import { getMessageTimeStamp } from '../../RossAscends-mods.js';
 import { SECRET_KEYS, secret_state } from '../../secrets.js';
@@ -334,7 +334,7 @@ async function captionCommandCallback(args, prompt) {
     });
 }
 
-jQuery(function () {
+jQuery(async function () {
     function addSendPictureButton() {
         const sendButton = $(`
         <div id="send_picture" class="list-group-item flex-container flexGap5">
@@ -399,102 +399,12 @@ jQuery(function () {
             saveSettingsDebounced();
         });
     }
-    function addSettings() {
-        const html = `
-        <div class="caption_settings">
-            <div class="inline-drawer">
-                <div class="inline-drawer-toggle inline-drawer-header">
-                    <b>Image Captioning</b>
-                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
-                </div>
-                <div class="inline-drawer-content">
-                    <label for="caption_source">Source</label>
-                    <select id="caption_source" class="text_pole">
-                        <option value="local">Local</option>
-                        <option value="multimodal">Multimodal (OpenAI / Anthropic / llama / Google)</option>
-                        <option value="extras">Extras</option>
-                        <option value="horde">Horde</option>
-                    </select>
-                    <div id="caption_multimodal_block" class="flex-container wide100p">
-                        <div class="flex1 flex-container flexFlowColumn flexNoGap">
-                            <label for="caption_multimodal_api">API</label>
-                            <select id="caption_multimodal_api" class="flex1 text_pole">
-                                <option value="anthropic">Anthropic</option>
-                                <option value="custom">Custom (OpenAI-compatible)</option>
-                                <option value="google">Google MakerSuite</option>
-                                <option value="koboldcpp">KoboldCpp</option>
-                                <option value="llamacpp">llama.cpp</option>
-                                <option value="ollama">Ollama</option>
-                                <option value="openai">OpenAI</option>
-                                <option value="openrouter">OpenRouter</option>
-                                <option value="ooba">Text Generation WebUI (oobabooga)</option>
-                            </select>
-                        </div>
-                        <div class="flex1 flex-container flexFlowColumn flexNoGap">
-                            <label for="caption_multimodal_model">Model</label>
-                            <select id="caption_multimodal_model" class="flex1 text_pole">
-                                <option data-type="openai" value="gpt-4-vision-preview">gpt-4-vision-preview</option>
-                                <option data-type="openai" value="gpt-4-turbo">gpt-4-turbo</option>
-                                <option data-type="openai" value="gpt-4o">gpt-4o</option>
-                                <option data-type="anthropic" value="claude-3-opus-20240229">claude-3-opus-20240229</option>
-                                <option data-type="anthropic" value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</option>
-                                <option data-type="anthropic" value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
-                                <option data-type="google" value="gemini-pro-vision">gemini-pro-vision</option>
-                                <option data-type="google" value="gemini-1.5-flash-latest">gemini-1.5-flash-latest</option>
-                                <option data-type="openrouter" value="openai/gpt-4-vision-preview">openai/gpt-4-vision-preview</option>
-                                <option data-type="openrouter" value="openai/gpt-4o">openai/gpt-4o</option>
-                                <option data-type="openrouter" value="openai/gpt-4-turbo">openai/gpt-4-turbo</option>
-                                <option data-type="openrouter" value="haotian-liu/llava-13b">haotian-liu/llava-13b</option>
-                                <option data-type="openrouter" value="fireworks/firellava-13b">fireworks/firellava-13b</option>
-                                <option data-type="openrouter" value="anthropic/claude-3-haiku">anthropic/claude-3-haiku</option>
-                                <option data-type="openrouter" value="anthropic/claude-3-sonnet">anthropic/claude-3-sonnet</option>
-                                <option data-type="openrouter" value="anthropic/claude-3-opus">anthropic/claude-3-opus</option>
-                                <option data-type="openrouter" value="anthropic/claude-3-haiku:beta">anthropic/claude-3-haiku:beta</option>
-                                <option data-type="openrouter" value="anthropic/claude-3-sonnet:beta">anthropic/claude-3-sonnet:beta</option>
-                                <option data-type="openrouter" value="anthropic/claude-3-opus:beta">anthropic/claude-3-opus:beta</option>
-                                <option data-type="openrouter" value="nousresearch/nous-hermes-2-vision-7b">nousresearch/nous-hermes-2-vision-7b</option>
-                                <option data-type="openrouter" value="google/gemini-pro-vision">google/gemini-pro-vision</option>
-                                <option data-type="openrouter" value="google/gemini-flash-1.5">google/gemini-flash-1.5</option>
-                                <option data-type="openrouter" value="liuhaotian/llava-yi-34b">liuhaotian/llava-yi-34b</option>
-                                <option data-type="ollama" value="ollama_current">[Currently selected]</option>
-                                <option data-type="ollama" value="bakllava:latest">bakllava:latest</option>
-                                <option data-type="ollama" value="llava:latest">llava:latest</option>
-                                <option data-type="llamacpp" value="llamacpp_current">[Currently loaded]</option>
-                                <option data-type="ooba" value="ooba_current">[Currently loaded]</option>
-                                <option data-type="koboldcpp" value="koboldcpp_current">[Currently loaded]</option>
-                                <option data-type="custom" value="custom_current">[Currently selected]</option>
-                            </select>
-                        </div>
-                        <label data-type="openai,anthropic,google" class="checkbox_label flexBasis100p" for="caption_allow_reverse_proxy" title="Allow using reverse proxy if defined and valid.">
-                            <input id="caption_allow_reverse_proxy" type="checkbox" class="checkbox">
-                            Allow reverse proxy
-                        </label>
-                        <div class="flexBasis100p m-b-1">
-                            <small><b>Hint:</b> Set your API keys and endpoints in the 'API Connections' tab first.</small>
-                        </div>
-                    </div>
-                    <div id="caption_prompt_block">
-                        <label for="caption_prompt">Caption Prompt</label>
-                        <textarea id="caption_prompt" class="text_pole" rows="1" placeholder="&lt; Use default &gt;">${PROMPT_DEFAULT}</textarea>
-                        <label class="checkbox_label margin-bot-10px" for="caption_prompt_ask" title="Ask for a custom prompt every time an image is captioned.">
-                            <input id="caption_prompt_ask" type="checkbox" class="checkbox">
-                            Ask every time
-                        </label>
-                    </div>
-                    <label for="caption_template">Message Template <small>(use <code>{{caption}}</code> macro)</small></label>
-                    <textarea id="caption_template" class="text_pole" rows="2" placeholder="&lt; Use default &gt;">${TEMPLATE_DEFAULT}</textarea>
-                    <label class="checkbox_label margin-bot-10px" for="caption_refine_mode">
-                        <input id="caption_refine_mode" type="checkbox" class="checkbox">
-                        Edit captions before saving
-                    </label>
-                </div>
-            </div>
-        </div>
-        `;
+    async function addSettings() {
+        const html = await renderExtensionTemplateAsync('caption', 'settings');
         $('#extensions_settings2').append(html);
     }
 
-    addSettings();
+    await addSettings();
     addPictureSendForm();
     addSendPictureButton();
     setImageIcon();
diff --git a/public/scripts/extensions/caption/settings.html b/public/scripts/extensions/caption/settings.html
new file mode 100644
index 00000000..ee07d938
--- /dev/null
+++ b/public/scripts/extensions/caption/settings.html
@@ -0,0 +1,90 @@
+
+<div class="caption_settings">
+    <div class="inline-drawer">
+        <div class="inline-drawer-toggle inline-drawer-header">
+            <b>Image Captioning</b>
+            <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
+        </div>
+        <div class="inline-drawer-content">
+            <label for="caption_source">Source</label>
+            <select id="caption_source" class="text_pole">
+                <option value="local">Local</option>
+                <option value="multimodal">Multimodal (OpenAI / Anthropic / llama / Google)</option>
+                <option value="extras">Extras</option>
+                <option value="horde">Horde</option>
+            </select>
+            <div id="caption_multimodal_block" class="flex-container wide100p">
+                <div class="flex1 flex-container flexFlowColumn flexNoGap">
+                    <label for="caption_multimodal_api">API</label>
+                    <select id="caption_multimodal_api" class="flex1 text_pole">
+                        <option value="anthropic">Anthropic</option>
+                        <option value="custom">Custom (OpenAI-compatible)</option>
+                        <option value="google">Google MakerSuite</option>
+                        <option value="koboldcpp">KoboldCpp</option>
+                        <option value="llamacpp">llama.cpp</option>
+                        <option value="ollama">Ollama</option>
+                        <option value="openai">OpenAI</option>
+                        <option value="openrouter">OpenRouter</option>
+                        <option value="ooba">Text Generation WebUI (oobabooga)</option>
+                    </select>
+                </div>
+                <div class="flex1 flex-container flexFlowColumn flexNoGap">
+                    <label for="caption_multimodal_model">Model</label>
+                    <select id="caption_multimodal_model" class="flex1 text_pole">
+                        <option data-type="openai" value="gpt-4-vision-preview">gpt-4-vision-preview</option>
+                        <option data-type="openai" value="gpt-4-turbo">gpt-4-turbo</option>
+                        <option data-type="openai" value="gpt-4o">gpt-4o</option>
+                        <option data-type="anthropic" value="claude-3-opus-20240229">claude-3-opus-20240229</option>
+                        <option data-type="anthropic" value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</option>
+                        <option data-type="anthropic" value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
+                        <option data-type="google" value="gemini-pro-vision">gemini-pro-vision</option>
+                        <option data-type="google" value="gemini-1.5-flash-latest">gemini-1.5-flash-latest</option>
+                        <option data-type="openrouter" value="openai/gpt-4-vision-preview">openai/gpt-4-vision-preview</option>
+                        <option data-type="openrouter" value="openai/gpt-4o">openai/gpt-4o</option>
+                        <option data-type="openrouter" value="openai/gpt-4-turbo">openai/gpt-4-turbo</option>
+                        <option data-type="openrouter" value="haotian-liu/llava-13b">haotian-liu/llava-13b</option>
+                        <option data-type="openrouter" value="fireworks/firellava-13b">fireworks/firellava-13b</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-haiku">anthropic/claude-3-haiku</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-sonnet">anthropic/claude-3-sonnet</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-opus">anthropic/claude-3-opus</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-haiku:beta">anthropic/claude-3-haiku:beta</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-sonnet:beta">anthropic/claude-3-sonnet:beta</option>
+                        <option data-type="openrouter" value="anthropic/claude-3-opus:beta">anthropic/claude-3-opus:beta</option>
+                        <option data-type="openrouter" value="nousresearch/nous-hermes-2-vision-7b">nousresearch/nous-hermes-2-vision-7b</option>
+                        <option data-type="openrouter" value="google/gemini-pro-vision">google/gemini-pro-vision</option>
+                        <option data-type="openrouter" value="google/gemini-flash-1.5">google/gemini-flash-1.5</option>
+                        <option data-type="openrouter" value="liuhaotian/llava-yi-34b">liuhaotian/llava-yi-34b</option>
+                        <option data-type="ollama" value="ollama_current">[Currently selected]</option>
+                        <option data-type="ollama" value="bakllava:latest">bakllava:latest</option>
+                        <option data-type="ollama" value="llava:latest">llava:latest</option>
+                        <option data-type="llamacpp" value="llamacpp_current">[Currently loaded]</option>
+                        <option data-type="ooba" value="ooba_current">[Currently loaded]</option>
+                        <option data-type="koboldcpp" value="koboldcpp_current">[Currently loaded]</option>
+                        <option data-type="custom" value="custom_current">[Currently selected]</option>
+                    </select>
+                </div>
+                <label data-type="openai,anthropic,google" class="checkbox_label flexBasis100p" for="caption_allow_reverse_proxy" title="Allow using reverse proxy if defined and valid.">
+                    <input id="caption_allow_reverse_proxy" type="checkbox" class="checkbox">
+                    Allow reverse proxy
+                </label>
+                <div class="flexBasis100p m-b-1">
+                    <small><b>Hint:</b> Set your API keys and endpoints in the 'API Connections' tab first.</small>
+                </div>
+            </div>
+            <div id="caption_prompt_block">
+                <label for="caption_prompt">Caption Prompt</label>
+                <textarea id="caption_prompt" class="text_pole" rows="1" placeholder="&lt; Use default &gt;">${PROMPT_DEFAULT}</textarea>
+                <label class="checkbox_label margin-bot-10px" for="caption_prompt_ask" title="Ask for a custom prompt every time an image is captioned.">
+                    <input id="caption_prompt_ask" type="checkbox" class="checkbox">
+                    Ask every time
+                </label>
+            </div>
+            <label for="caption_template">Message Template <small>(use <code>&lcub;&lcub;caption&rcub;&rcub;</code> macro)</small></label>
+            <textarea id="caption_template" class="text_pole" rows="2" placeholder="&lt; Use default &gt;">${TEMPLATE_DEFAULT}</textarea>
+            <label class="checkbox_label margin-bot-10px" for="caption_refine_mode">
+                <input id="caption_refine_mode" type="checkbox" class="checkbox">
+                Edit captions before saving
+            </label>
+        </div>
+    </div>
+</div>