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 @@
1import { getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';1import { getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
2import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules } from '../../extensions.js';2import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules, renderExtensionTemplateAsync } from '../../extensions.js';
3import { callPopup, getRequestHeaders, saveSettingsDebounced, substituteParams } from '../../../script.js';3import { callPopup, getRequestHeaders, saveSettingsDebounced, substituteParams } from '../../../script.js';
4import { getMessageTimeStamp } from '../../RossAscends-mods.js';4import { getMessageTimeStamp } from '../../RossAscends-mods.js';
5import { SECRET_KEYS, secret_state } from '../../secrets.js';5import { SECRET_KEYS, secret_state } from '../../secrets.js';
@@ -334,7 +334,7 @@ async function captionCommandCallback(args, prompt) {
334 });334 });
335}335}
336336
337jQuery(function () {337jQuery(async function () {
338 function addSendPictureButton() {338 function addSendPictureButton() {
339 const sendButton = $(`339 const sendButton = $(`
340 <div id="send_picture" class="list-group-item flex-container flexGap5">340 <div id="send_picture" class="list-group-item flex-container flexGap5">
@@ -399,102 +399,12 @@ jQuery(function () {
399 saveSettingsDebounced();399 saveSettingsDebounced();
400 });400 });
401 }401 }
402 function addSettings() {402 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 `;
494 $('#extensions_settings2').append(html);404 $('#extensions_settings2').append(html);
495 }405 }
496406
497 addSettings();407 await addSettings();
498 addPictureSendForm();408 addPictureSendForm();
499 addSendPictureButton();409 addSendPictureButton();
500 setImageIcon();410 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>