Gemini: Add image request settings (#4838) * Gemini: Add image request settings * Allow aspect ratio for 2.5 flash

2eba10fa7f8fcf8f2783a6cdd85ec269b237412f

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

Signed

Parents: 38f6b9a119a2fdb2384fa178cba63fc629f6b9a5

public/css/toggle-dependent.css+4 -0 Viewed

     filter: grayscale(0.5);
     cursor: not-allowed;
+}
+#request_images_block:has(#openai_request_images:not(:checked)) #request_images_settings {
+    display: none;
+}

public/index.html+32 -1 Viewed

                                             </div>
                                         </div>
                                     </div>
-                                    <div class="range-block" data-source="makersuite,vertexai">
+                                    <div id="request_images_block" class="range-block" data-source="makersuite,vertexai">
                                         <label for="openai_request_images" class="checkbox_label widthFreeExpand">
                                             <input id="openai_request_images" type="checkbox" />
                                             <span>

                                                 Incompatible with the following features: function calling, web search, system prompt.
                                             </em>
                                         </div>
+                                        <div id="request_images_settings" class="flex-container wide100p textAlignCenter">
+                                            <div class="flex1">
+                                                <label for="request_image_resolution">
+                                                    <small data-i18n="Resolution">Resolution</small>
+                                                </label>
+                                                <select id="request_image_resolution" class="text_pole">
+                                                    <option value="">Auto</option>
+                                                    <option value="1K">1K</option>
+                                                    <option value="2K">2K</option>
+                                                    <option value="4K">4K</option>
+                                                </select>
+                                            </div>
+                                            <div class="flex1">
+                                                <label for="request_image_aspect_ratio">
+                                                    <small data-i18n="Aspect Ratio">Aspect Ratio</small>
+                                                </label>
+                                                <select id="request_image_aspect_ratio" class="text_pole">
+                                                    <option value="">Auto</option>
+                                                    <option value="1:1">1:1</option>
+                                                    <option value="9:16">9:16</option>
+                                                    <option value="16:9">16:9</option>
+                                                    <option value="3:4">3:4</option>
+                                                    <option value="4:3">4:3</option>
+                                                    <option value="3:2">3:2</option>
+                                                    <option value="2:3">2:3</option>
+                                                    <option value="5:4">5:4</option>
+                                                    <option value="4:5">4:5</option>
+                                                    <option value="21:9">21:9</option>
+                                                </select>
+                                            </div>
+                                        </div>
                                     </div>
                                     <div class="range-block" data-source="deepseek,aimlapi,openrouter,custom,claude,xai,makersuite,vertexai,pollinations,moonshot,mistralai,fireworks,cometapi,electronhub,azure_openai,nanogpt,zai">
                                         <label for="openai_show_thoughts" class="checkbox_label widthFreeExpand">

public/scripts/openai.js+16 -0 Viewed

     n: ['#n_openai', 'n', false, false],
     bypass_status_check: ['#openai_bypass_status_check', 'bypass_status_check', true, true],
     request_images: ['#openai_request_images', 'request_images', true, false],
+    request_image_aspect_ratio: ['#request_image_aspect_ratio', 'request_image_aspect_ratio', false, false],
+    request_image_resolution: ['#request_image_resolution', 'request_image_resolution', false, false],
     azure_base_url: ['#azure_base_url', 'azure_base_url', false, true],
     azure_deployment_name: ['#azure_deployment_name', 'azure_deployment_name', false, true],
     azure_api_version: ['#azure_api_version', 'azure_api_version', false, true],

     verbosity: verbosity_levels.auto,
     enable_web_search: false,
     request_images: false,
+    request_image_aspect_ratio: '',
+    request_image_resolution: '',
     seed: -1,
     n: 1,
     bind_preset_to_connection: true,

         'reasoning_effort': getReasoningEffort(),
         'enable_web_search': Boolean(oai_settings.enable_web_search),
         'request_images': Boolean(oai_settings.request_images),
+        'request_image_resolution': String(oai_settings.request_image_resolution),
+        'request_image_aspect_ratio': String(oai_settings.request_image_aspect_ratio),
         'custom_prompt_post_processing': oai_settings.custom_prompt_post_processing,
         'verbosity': getVerbosity(),
     };

         saveSettingsDebounced();
     });
+    $('#request_image_resolution').on('input', function () {
+        oai_settings.request_image_resolution = String($(this).val());
+        saveSettingsDebounced();
+    });
+    $('#request_image_aspect_ratio').on('input', function () {
+        oai_settings.request_image_aspect_ratio = String($(this).val());
+        saveSettingsDebounced();
+    });
     if (!CSS.supports('field-sizing', 'content')) {
         $(document).on('input', '#openai_settings .autoSetHeight', function () {
             resetScrollHeight($(this));

src/endpoints/backends/chat-completions.js+13 -0 Viewed

     const requestImages = Boolean(request.body.request_images);
     const reasoningEffort = String(request.body.reasoning_effort);
     const includeReasoning = Boolean(request.body.include_reasoning);
+    const aspectRatio = String(request.body.request_image_aspect_ratio);
+    const imageSize = String(request.body.request_image_resolution);
     const isGemma = model.includes('gemma');
     const isLearnLM = model.includes('learnlm');

         ];
         const isThinkingConfigModel = m => (/^gemini-2.5-(flash|pro)/.test(m) && !/-image(-preview)?$/.test(m)) || (/^gemini-3-pro/.test(m));
+        const isImageSizeModel = m => /^gemini-3/.test(m);
         const noSearchModels = [
             'gemini-2.0-flash-lite',

+        }
         const enableImageModality = requestImages && imageGenerationModels.includes(model);
+        const enableImageConfig = enableImageModality && (aspectRatio || imageSize);
         if (enableImageModality) {
             generationConfig.responseModalities = ['text', 'image'];
+            if (enableImageConfig) {
+                generationConfig.imageConfig = {};
+                if (imageSize && isImageSizeModel(model)) {
+                    generationConfig.imageConfig.imageSize = imageSize;
+                }
+                if (aspectRatio) {
+                    generationConfig.imageConfig.aspectRatio = aspectRatio;
+                }
+            }
+        }
         const useSystemPrompt = !enableImageModality && !isGemma && request.body.use_sysprompt;