public/scripts/extensions/caption/settings.html

<div class="caption_settings">
    <div class="inline-drawer">
        <div class="inline-drawer-toggle inline-drawer-header">
            <b data-i18n="Image Captioning">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" data-i18n="Source">Source</label>
            <select id="caption_source" class="text_pole">
                <option value="local" data-i18n="Local">Local</option>
                <option value="multimodal" data-i18n="Multimodal (OpenAI / Anthropic / llama / Google)">Multimodal (OpenAI / Anthropic / llama / Google)</option>
                <option value="extras" data-i18n="Extras">Extras</option>
                <option value="horde" data-i18n="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" data-i18n="API">API</label>
                    <select id="caption_multimodal_api" class="flex1 text_pole">
                        <option value="zerooneai">01.AI (Yi)</option>
                        <option value="anthropic">Anthropic</option>
                        <option value="custom" data-i18n="Custom (OpenAI-compatible)">Custom (OpenAI-compatible)</option>
                        <option value="google">Google AI Studio</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" data-i18n="Text Generation WebUI (oobabooga)">Text Generation WebUI (oobabooga)</option>
                        <option value="vllm">vLLM</option>
                    </select>
                </div>
                <div class="flex1 flex-container flexFlowColumn flexNoGap">
                    <label for="caption_multimodal_model" data-i18n="Model">Model</label>
                    <select id="caption_multimodal_model" class="flex1 text_pole">
                        <option data-type="zerooneai" value="yi-vision">yi-vision</option>
                        <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="openai" value="gpt-4o-mini">gpt-4o-mini</option>
                        <option data-type="openai" value="chatgpt-4o-latest">chatgpt-4o-latest</option>
                        <option data-type="anthropic" value="claude-3-5-sonnet-20240620">claude-3-5-sonnet-20240620</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="google" value="gemini-1.5-pro-latest">gemini-1.5-pro-latest</option>
                        <option data-type="google" value="gemini-1.5-pro-exp-0801">gemini-1.5-pro-exp-0801</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="openai/gpt-4o-mini">openai/gpt-4o-mini</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.5-sonnet">anthropic/claude-3.5-sonnet</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.5-sonnet:beta">anthropic/claude-3.5-sonnet:beta</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" data-i18n="currently_selected">[Currently selected]</option>
                        <option data-type="ollama" value="bakllava">bakllava</option>
                        <option data-type="ollama" value="llava">llava</option>
                        <option data-type="ollama" value="llava-llama3">llava-llama3</option>
                        <option data-type="ollama" value="llava-phi3">llava-phi3</option>
                        <option data-type="ollama" value="moondream">moondream</option>
                        <option data-type="llamacpp" value="llamacpp_current" data-i18n="currently_loaded">[Currently loaded]</option>
                        <option data-type="ooba" value="ooba_current" data-i18n="currently_loaded">[Currently loaded]</option>
                        <option data-type="koboldcpp" value="koboldcpp_current" data-i18n="currently_loaded">[Currently loaded]</option>
                        <option data-type="vllm" value="vllm_current" data-i18n="currently_selected">[Currently selected]</option>
                        <option data-type="custom" value="custom_current" data-i18n="currently_selected">[Currently selected]</option>
                    </select>
                </div>
                <div data-type="ollama">
                    The model must be downloaded first! Do it with the <code>ollama pull</code> command or <a href="#" id="caption_ollama_pull">click here</a>.
                </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">
                    <span data-i18n="Allow reverse proxy">Allow reverse proxy</span>
                </label>
                <div class="flexBasis100p m-b-1">
                    <small><b data-i18n="Hint:">Hint:</b> <span data-i18n="Set your API keys and endpoints in the 'API Connections' tab first.">Set your API keys and endpoints in the 'API Connections' tab first.</span></small>
                </div>
            </div>
            <div id="caption_prompt_block">
                <label for="caption_prompt" data-i18n="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">
                    <span data-i18n="Ask every time">Ask every time</span>
                </label>
            </div>
            <label for="caption_template"><span data-i18n="Message Template">Message Template</span> <small><span data-i18n="(use _space">(use </span> <code>&lcub;&lcub;caption&rcub;&rcub;</code> <span data-i18n="macro)">macro)</span></small></label>
            <textarea id="caption_template" class="text_pole" rows="2" placeholder="&lt; Use default &gt;">{{TEMPLATE_DEFAULT}}</textarea>
            <label class="checkbox_label" for="caption_auto_mode">
                <input id="caption_auto_mode" type="checkbox" class="checkbox">
                <span data-i18n="Automatically caption images">Automatically caption images</span>
                <i class="fa-solid fa-info-circle" title="Automatically caption images when they are pasted into the chat or attached to messages."></i>
            </label>
            <label class="checkbox_label margin-bot-10px" for="caption_refine_mode">
                <input id="caption_refine_mode" type="checkbox" class="checkbox">
                <span data-i18n="Edit captions before saving">Edit captions before saving</span>
            </label>
        </div>
    </div>
</div>