Move caption extension settings into template

d1b533cbfa01f78950e1073c0b1c3905df0dcccd

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: d31eb639dce3237f073362dd56b3cfe01158d510
2 files changed, +95 -95Ignore whitespace
public/scripts/extensions/caption/index.js+5 -95
@@ -1,5 +1,5 @@
11import { getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
22import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules, renderExtensionTemplateAsync } from '../../extensions.js';
33import { callPopup, getRequestHeaders, saveSettingsDebounced, substituteParams } from '../../../script.js';
44import { getMessageTimeStamp } from '../../RossAscends-mods.js';
55import { SECRET_KEYS, secret_state } from '../../secrets.js';
@@ -334,7 +334,7 @@ async function captionCommandCallback(args, prompt) {
334334 });
335335}
336336
337337jQuery(async function () {
338338 function addSendPictureButton() {
339339 const sendButton = $(`
340340 <div id="send_picture" class="list-group-item flex-container flexGap5">
@@ -399,102 +399,12 @@ jQuery(function () {
399399 saveSettingsDebounced();
400400 });
401401 }
402402 async function addSettings() {
403- const html = `
403+ const html = await renderExtensionTemplateAsync('caption', 'settings');
404- <div class="caption_settings">
405- <div class="inline-drawer">
406- <div class="inline-drawer-toggle inline-drawer-header">
407- <b>Image Captioning</b>
408- <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
409- </div>
410- <div class="inline-drawer-content">
411- <label for="caption_source">Source</label>
412- <select id="caption_source" class="text_pole">
413- <option value="local">Local</option>
414- <option value="multimodal">Multimodal (OpenAI / Anthropic / llama / Google)</option>
415- <option value="extras">Extras</option>
416- <option value="horde">Horde</option>
417- </select>
418- <div id="caption_multimodal_block" class="flex-container wide100p">
419- <div class="flex1 flex-container flexFlowColumn flexNoGap">
420- <label for="caption_multimodal_api">API</label>
421- <select id="caption_multimodal_api" class="flex1 text_pole">
422- <option value="anthropic">Anthropic</option>
423- <option value="custom">Custom (OpenAI-compatible)</option>
424- <option value="google">Google MakerSuite</option>
425- <option value="koboldcpp">KoboldCpp</option>
426- <option value="llamacpp">llama.cpp</option>
427- <option value="ollama">Ollama</option>
428- <option value="openai">OpenAI</option>
429- <option value="openrouter">OpenRouter</option>
430- <option value="ooba">Text Generation WebUI (oobabooga)</option>
431- </select>
432- </div>
433- <div class="flex1 flex-container flexFlowColumn flexNoGap">
434- <label for="caption_multimodal_model">Model</label>
435- <select id="caption_multimodal_model" class="flex1 text_pole">
436- <option data-type="openai" value="gpt-4-vision-preview">gpt-4-vision-preview</option>
437- <option data-type="openai" value="gpt-4-turbo">gpt-4-turbo</option>
438- <option data-type="openai" value="gpt-4o">gpt-4o</option>
439- <option data-type="anthropic" value="claude-3-opus-20240229">claude-3-opus-20240229</option>
440- <option data-type="anthropic" value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</option>
441- <option data-type="anthropic" value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
442- <option data-type="google" value="gemini-pro-vision">gemini-pro-vision</option>
443- <option data-type="google" value="gemini-1.5-flash-latest">gemini-1.5-flash-latest</option>
444- <option data-type="openrouter" value="openai/gpt-4-vision-preview">openai/gpt-4-vision-preview</option>
445- <option data-type="openrouter" value="openai/gpt-4o">openai/gpt-4o</option>
446- <option data-type="openrouter" value="openai/gpt-4-turbo">openai/gpt-4-turbo</option>
447- <option data-type="openrouter" value="haotian-liu/llava-13b">haotian-liu/llava-13b</option>
448- <option data-type="openrouter" value="fireworks/firellava-13b">fireworks/firellava-13b</option>
449- <option data-type="openrouter" value="anthropic/claude-3-haiku">anthropic/claude-3-haiku</option>
450- <option data-type="openrouter" value="anthropic/claude-3-sonnet">anthropic/claude-3-sonnet</option>
451- <option data-type="openrouter" value="anthropic/claude-3-opus">anthropic/claude-3-opus</option>
452- <option data-type="openrouter" value="anthropic/claude-3-haiku:beta">anthropic/claude-3-haiku:beta</option>
453- <option data-type="openrouter" value="anthropic/claude-3-sonnet:beta">anthropic/claude-3-sonnet:beta</option>
454- <option data-type="openrouter" value="anthropic/claude-3-opus:beta">anthropic/claude-3-opus:beta</option>
455- <option data-type="openrouter" value="nousresearch/nous-hermes-2-vision-7b">nousresearch/nous-hermes-2-vision-7b</option>
456- <option data-type="openrouter" value="google/gemini-pro-vision">google/gemini-pro-vision</option>
457- <option data-type="openrouter" value="google/gemini-flash-1.5">google/gemini-flash-1.5</option>
458- <option data-type="openrouter" value="liuhaotian/llava-yi-34b">liuhaotian/llava-yi-34b</option>
459- <option data-type="ollama" value="ollama_current">[Currently selected]</option>
460- <option data-type="ollama" value="bakllava:latest">bakllava:latest</option>
461- <option data-type="ollama" value="llava:latest">llava:latest</option>
462- <option data-type="llamacpp" value="llamacpp_current">[Currently loaded]</option>
463- <option data-type="ooba" value="ooba_current">[Currently loaded]</option>
464- <option data-type="koboldcpp" value="koboldcpp_current">[Currently loaded]</option>
465- <option data-type="custom" value="custom_current">[Currently selected]</option>
466- </select>
467- </div>
468- <label data-type="openai,anthropic,google" class="checkbox_label flexBasis100p" for="caption_allow_reverse_proxy" title="Allow using reverse proxy if defined and valid.">
469- <input id="caption_allow_reverse_proxy" type="checkbox" class="checkbox">
470- Allow reverse proxy
471- </label>
472- <div class="flexBasis100p m-b-1">
473- <small><b>Hint:</b> Set your API keys and endpoints in the 'API Connections' tab first.</small>
474- </div>
475- </div>
476- <div id="caption_prompt_block">
477- <label for="caption_prompt">Caption Prompt</label>
478- <textarea id="caption_prompt" class="text_pole" rows="1" placeholder="&lt; Use default &gt;">${PROMPT_DEFAULT}</textarea>
479- <label class="checkbox_label margin-bot-10px" for="caption_prompt_ask" title="Ask for a custom prompt every time an image is captioned.">
480- <input id="caption_prompt_ask" type="checkbox" class="checkbox">
481- Ask every time
482- </label>
483- </div>
484- <label for="caption_template">Message Template <small>(use <code>{{caption}}</code> macro)</small></label>
485- <textarea id="caption_template" class="text_pole" rows="2" placeholder="&lt; Use default &gt;">${TEMPLATE_DEFAULT}</textarea>
486- <label class="checkbox_label margin-bot-10px" for="caption_refine_mode">
487- <input id="caption_refine_mode" type="checkbox" class="checkbox">
488- Edit captions before saving
489- </label>
490- </div>
491- </div>
492- </div>
493- `;
494404 $('#extensions_settings2').append(html);
495405 }
496406
497407 await addSettings();
498408 addPictureSendForm();
499409 addSendPictureButton();
500410 setImageIcon();
public/scripts/extensions/caption/settings.html+90 -0
@@ -0,0 +1,90 @@
1+
2+<div class="caption_settings">
3+ <div class="inline-drawer">
4+ <div class="inline-drawer-toggle inline-drawer-header">
5+ <b>Image Captioning</b>
6+ <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
7+ </div>
8+ <div class="inline-drawer-content">
9+ <label for="caption_source">Source</label>
10+ <select id="caption_source" class="text_pole">
11+ <option value="local">Local</option>
12+ <option value="multimodal">Multimodal (OpenAI / Anthropic / llama / Google)</option>
13+ <option value="extras">Extras</option>
14+ <option value="horde">Horde</option>
15+ </select>
16+ <div id="caption_multimodal_block" class="flex-container wide100p">
17+ <div class="flex1 flex-container flexFlowColumn flexNoGap">
18+ <label for="caption_multimodal_api">API</label>
19+ <select id="caption_multimodal_api" class="flex1 text_pole">
20+ <option value="anthropic">Anthropic</option>
21+ <option value="custom">Custom (OpenAI-compatible)</option>
22+ <option value="google">Google MakerSuite</option>
23+ <option value="koboldcpp">KoboldCpp</option>
24+ <option value="llamacpp">llama.cpp</option>
25+ <option value="ollama">Ollama</option>
26+ <option value="openai">OpenAI</option>
27+ <option value="openrouter">OpenRouter</option>
28+ <option value="ooba">Text Generation WebUI (oobabooga)</option>
29+ </select>
30+ </div>
31+ <div class="flex1 flex-container flexFlowColumn flexNoGap">
32+ <label for="caption_multimodal_model">Model</label>
33+ <select id="caption_multimodal_model" class="flex1 text_pole">
34+ <option data-type="openai" value="gpt-4-vision-preview">gpt-4-vision-preview</option>
35+ <option data-type="openai" value="gpt-4-turbo">gpt-4-turbo</option>
36+ <option data-type="openai" value="gpt-4o">gpt-4o</option>
37+ <option data-type="anthropic" value="claude-3-opus-20240229">claude-3-opus-20240229</option>
38+ <option data-type="anthropic" value="claude-3-sonnet-20240229">claude-3-sonnet-20240229</option>
39+ <option data-type="anthropic" value="claude-3-haiku-20240307">claude-3-haiku-20240307</option>
40+ <option data-type="google" value="gemini-pro-vision">gemini-pro-vision</option>
41+ <option data-type="google" value="gemini-1.5-flash-latest">gemini-1.5-flash-latest</option>
42+ <option data-type="openrouter" value="openai/gpt-4-vision-preview">openai/gpt-4-vision-preview</option>
43+ <option data-type="openrouter" value="openai/gpt-4o">openai/gpt-4o</option>
44+ <option data-type="openrouter" value="openai/gpt-4-turbo">openai/gpt-4-turbo</option>
45+ <option data-type="openrouter" value="haotian-liu/llava-13b">haotian-liu/llava-13b</option>
46+ <option data-type="openrouter" value="fireworks/firellava-13b">fireworks/firellava-13b</option>
47+ <option data-type="openrouter" value="anthropic/claude-3-haiku">anthropic/claude-3-haiku</option>
48+ <option data-type="openrouter" value="anthropic/claude-3-sonnet">anthropic/claude-3-sonnet</option>
49+ <option data-type="openrouter" value="anthropic/claude-3-opus">anthropic/claude-3-opus</option>
50+ <option data-type="openrouter" value="anthropic/claude-3-haiku:beta">anthropic/claude-3-haiku:beta</option>
51+ <option data-type="openrouter" value="anthropic/claude-3-sonnet:beta">anthropic/claude-3-sonnet:beta</option>
52+ <option data-type="openrouter" value="anthropic/claude-3-opus:beta">anthropic/claude-3-opus:beta</option>
53+ <option data-type="openrouter" value="nousresearch/nous-hermes-2-vision-7b">nousresearch/nous-hermes-2-vision-7b</option>
54+ <option data-type="openrouter" value="google/gemini-pro-vision">google/gemini-pro-vision</option>
55+ <option data-type="openrouter" value="google/gemini-flash-1.5">google/gemini-flash-1.5</option>
56+ <option data-type="openrouter" value="liuhaotian/llava-yi-34b">liuhaotian/llava-yi-34b</option>
57+ <option data-type="ollama" value="ollama_current">[Currently selected]</option>
58+ <option data-type="ollama" value="bakllava:latest">bakllava:latest</option>
59+ <option data-type="ollama" value="llava:latest">llava:latest</option>
60+ <option data-type="llamacpp" value="llamacpp_current">[Currently loaded]</option>
61+ <option data-type="ooba" value="ooba_current">[Currently loaded]</option>
62+ <option data-type="koboldcpp" value="koboldcpp_current">[Currently loaded]</option>
63+ <option data-type="custom" value="custom_current">[Currently selected]</option>
64+ </select>
65+ </div>
66+ <label data-type="openai,anthropic,google" class="checkbox_label flexBasis100p" for="caption_allow_reverse_proxy" title="Allow using reverse proxy if defined and valid.">
67+ <input id="caption_allow_reverse_proxy" type="checkbox" class="checkbox">
68+ Allow reverse proxy
69+ </label>
70+ <div class="flexBasis100p m-b-1">
71+ <small><b>Hint:</b> Set your API keys and endpoints in the 'API Connections' tab first.</small>
72+ </div>
73+ </div>
74+ <div id="caption_prompt_block">
75+ <label for="caption_prompt">Caption Prompt</label>
76+ <textarea id="caption_prompt" class="text_pole" rows="1" placeholder="&lt; Use default &gt;">${PROMPT_DEFAULT}</textarea>
77+ <label class="checkbox_label margin-bot-10px" for="caption_prompt_ask" title="Ask for a custom prompt every time an image is captioned.">
78+ <input id="caption_prompt_ask" type="checkbox" class="checkbox">
79+ Ask every time
80+ </label>
81+ </div>
82+ <label for="caption_template">Message Template <small>(use <code>&lcub;&lcub;caption&rcub;&rcub;</code> macro)</small></label>
83+ <textarea id="caption_template" class="text_pole" rows="2" placeholder="&lt; Use default &gt;">${TEMPLATE_DEFAULT}</textarea>
84+ <label class="checkbox_label margin-bot-10px" for="caption_refine_mode">
85+ <input id="caption_refine_mode" type="checkbox" class="checkbox">
86+ Edit captions before saving
87+ </label>
88+ </div>
89+ </div>
90+</div>