Fix Gemini multimodal with JPG images Fixes #2763

8bb964515a2daf75c2d93c2e45a5dee909dd29f6

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

4 files changed, +33 -13Showing whitespace changes
public/scripts/extensions/shared.js+1 -6
@@ -20,7 +20,7 @@ export async function getMultimodalCaption(base64Img, prompt) {
2020
2121 throwIfInvalidModel(useReverseProxy);
2222
2323 const noPrefix = ['google', 'ollama', 'llamacpp'].includes(extension_settings.caption.multimodal_api);
2424
2525 if (noPrefix && base64Img.startsWith('data:image/')) {
2626 base64Img = base64Img.split(',')[1];
@@ -28,7 +28,6 @@ export async function getMultimodalCaption(base64Img, prompt) {
2828
2929 // OpenRouter has a payload limit of ~2MB. Google is 4MB, but we love democracy.
3030 // Ooba requires all images to be JPEGs. Koboldcpp just asked nicely.
31- const isGoogle = extension_settings.caption.multimodal_api === 'google';
3231 const isOllama = extension_settings.caption.multimodal_api === 'ollama';
3332 const isLlamaCpp = extension_settings.caption.multimodal_api === 'llamacpp';
3433 const isCustom = extension_settings.caption.multimodal_api === 'custom';
@@ -40,10 +39,6 @@ export async function getMultimodalCaption(base64Img, prompt) {
4039 if ((['google', 'openrouter'].includes(extension_settings.caption.multimodal_api) && base64Bytes > compressionLimit) || isOoba || isKoboldCpp) {
4140 const maxSide = 1024;
4241 base64Img = await createThumbnail(base64Img, maxSide, maxSide, 'image/jpeg');
43-
44- if (isGoogle) {
45- base64Img = base64Img.split(',')[1];
46- }
4742 }
4843
4944 const proxyUrl = useReverseProxy ? oai_settings.reverse_proxy : '';
public/scripts/openai.js+26 -3
@@ -47,6 +47,7 @@ import { SECRET_KEYS, secret_state, writeSecret } from './secrets.js';
4747
4848import { getEventSourceStream } from './sse-stream.js';
4949import {
50+ createThumbnail,
5051 delay,
5152 download,
5253 getBase64Async,
@@ -2440,15 +2441,14 @@ class Message {
24402441 if (!response.ok) throw new Error('Failed to fetch image');
24412442 const blob = await response.blob();
24422443 image = await getBase64Async(blob);
2443- if (oai_settings.chat_completion_source === chat_completion_sources.MAKERSUITE) {
2444- image = image.split(',')[1];
2445- }
24462444 } catch (error) {
24472445 console.error('Image adding skipped', error);
24482446 return;
24492447 }
24502448 }
24512449
2450+ image = await this.compressImage(image);
2451+
24522452 const quality = oai_settings.inline_image_quality || default_settings.inline_image_quality;
24532453 this.content = [
24542454 { type: 'text', text: textContent },
@@ -2464,6 +2464,29 @@ class Message {
24642464 }
24652465 }
24662466
2467+ /**
2468+ * Compress an image if it exceeds the size threshold for the current chat completion source.
2469+ * @param {string} image Data URL of the image.
2470+ * @returns {Promise<string>} Compressed image as a Data URL.
2471+ */
2472+ async compressImage(image) {
2473+ if ([chat_completion_sources.OPENROUTER, chat_completion_sources.MAKERSUITE].includes(oai_settings.chat_completion_source)) {
2474+ const sizeThreshold = 2 * 1024 * 1024;
2475+ const dataSize = image.length * 0.75;
2476+ const maxSide = 1024;
2477+ if (dataSize > sizeThreshold) {
2478+ image = await createThumbnail(image, maxSide);
2479+ }
2480+ }
2481+ return image;
2482+ }
2483+
2484+ /**
2485+ * Get the token cost of an image.
2486+ * @param {string} dataUrl Data URL of the image.
2487+ * @param {string} quality String representing the quality of the image. Can be 'low', 'auto', or 'high'.
2488+ * @returns
2489+ */
24672490 async getImageTokenCost(dataUrl, quality) {
24682491 if (quality === 'low') {
24692492 return Message.tokensPerImage;
src/endpoints/google.js+2 -2
@@ -22,8 +22,8 @@ router.post('/caption-image', jsonParser, async (request, response) => {
2222 { text: request.body.prompt },
2323 {
2424 inlineData: {
25- mimeType: 'image/png', // It needs to specify a MIME type in data if it's not a PNG
25+ mimeType: mimeType,
26- data: mimeType === 'image/png' ? base64Data : request.body.image,
26+ data: base64Data,
2727 },
2828 }],
2929 }],
src/prompt-converters.js+4 -2
@@ -335,10 +335,12 @@ function convertGooglePrompt(messages, model, useSysPrompt = false, charName = '
335335 if (part.type === 'text') {
336336 parts.push({ text: part.text });
337337 } else if (part.type === 'image_url' && isMultimodal) {
338+ const mimeType = part.image_url.url.split(';')[0].split(':')[1];
339+ const base64Data = part.image_url.url.split(',')[1];
338340 parts.push({
339341 inlineData: {
340342 mimeType: 'image/png'mimeType,
341343 data: part.image_url.urlbase64Data,
342344 },
343345 });
344346 hasImage = true;