dbe01110 · permissionBRICK/SillyTavern

public/scripts/chats.js+3 -1 Viewed

     extractTextFromOffice,
     download,
     getFileText,
+    getFileExtension,
 } from './utils.js';
 import { extension_settings, renderExtensionTemplateAsync, saveMetadataDebounced } from './extensions.js';
 import { POPUP_RESULT, POPUP_TYPE, Popup, callGenericPopup } from './popup.js';

         const fileNamePrefix = `${Date.now()}_${slug}`;
         const fileBase64 = await getBase64Async(file);
         let base64Data = fileBase64.split(',')[1];
-        const extension = file.name.substring((file.name.lastIndexOf('.') + file.name.length) % file.name.length + 1);
+        const extension = getFileExtension(file);
         // If file is image
         if (file.type.startsWith('image/')) {

     } catch (error) {
         console.error('Could not upload file', error);
+        toastr.error(t`Either the file is corrupted or its format is not supported.`, t`Could not upload the file`);
     } finally {
         $('#file_form').trigger('reset');
+    }

public/scripts/constants.js+1 -1 Viewed

  * Common video file extensions. Should be the same as supported by Gemini.
  * https://ai.google.dev/gemini-api/docs/video-understanding#supported-formats
  */
-export const VIDEO_EXTENSIONS = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', '3gp', 'mkv'];
+export const VIDEO_EXTENSIONS = ['mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', '3gp', 'mkv', 'mpg'];

public/scripts/extensions/caption/index.js+3 -3 Viewed

-import { ensureImageFormatSupported, getBase64Async, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
+import { ensureImageFormatSupported, getBase64Async, getFileExtension, isTrueBoolean, saveBase64AsFile } from '../../utils.js';
 import { getContext, getApiUrl, doExtrasFetch, extension_settings, modules, renderExtensionTemplateAsync } from '../../extensions.js';
 import { appendMediaToMessage, eventSource, event_types, getRequestHeaders, saveChatConditional, saveSettingsDebounced, substituteParamsExtended } from '../../../script.js';
 import { getMessageTimeStamp } from '../../RossAscends-mods.js';

         setSpinnerIcon();
         const context = getContext();
         const fileData = await getBase64Async(await ensureImageFormatSupported(file));
-        const base64Format = fileData.split(',')[0].split(';')[0].split('/')[1];
+        const extension = getFileExtension(file);
         const base64Data = fileData.split(',')[1];
         const { caption } = await doCaptionRequest(base64Data, fileData, prompt);
         if (!quiet) {
-            const imagePath = await saveBase64AsFile(base64Data, context.name2, '', base64Format);
+            const imagePath = await saveBase64AsFile(base64Data, context.name2, '', extension);
             await sendCaptionedMessage(caption, imagePath);
+        }
         return caption;

public/scripts/extensions/gallery/index.js+6 -21 Viewed

     animation_easing,
 } from '../../../script.js';
 import { groups, selected_group } from '../../group-chats.js';
-import { loadFileToDocument, delay, getBase64Async, getSanitizedFilename } from '../../utils.js';
+import { loadFileToDocument, delay, getBase64Async, getSanitizedFilename, saveBase64AsFile, getFileExtension } from '../../utils.js';
 import { loadMovingUIState } from '../../power-user.js';
 import { dragElement } from '../../RossAscends-mods.js';
 import { SlashCommandParser } from '../../slash-commands/SlashCommandParser.js';

 async function uploadFile(file, url) {
     try {
         // Convert the file to a base64 string
-        const base64Data = await getBase64Async(file);
+        const fileBase64 = await getBase64Async(file);
+        const base64Data = fileBase64.split(',')[1];
+        const extension = getFileExtension(file);
+        const path = await saveBase64AsFile(base64Data, url, '', extension);
-        // Create the payload
+        toastr.success(t`File uploaded successfully. Saved at: ${path}`);
-        const payload = {
-            image: base64Data,
-            ch_name: url,
-        };
-        const response = await fetch('/api/images/upload', {
-            method: 'POST',
-            headers: getRequestHeaders(),
-            body: JSON.stringify(payload),
-        });
-        if (!response.ok) {
-            throw new Error(`HTTP error! Status: ${response.status}`);
-        }
-        const result = await response.json();
-        toastr.success(t`File uploaded successfully. Saved at: ${result.path}`);
     } catch (error) {
         console.error('There was an issue uploading the file:', error);

public/scripts/extensions/shared.js+6 -2 Viewed

     const isVllm = extension_settings.caption.multimodal_api === 'vllm';
     const base64Bytes = base64Img.length * 0.75;
     const compressionLimit = 2 * 1024 * 1024;
+    const safeMimeTypes = ['image/jpeg', 'image/png', 'image/webp'];
+    const mimeType = base64Img?.split(';')?.[0]?.split(':')?.[1];
     const thumbnailNeeded = ['google', 'openrouter', 'mistral', 'groq', 'vertexai'].includes(extension_settings.caption.multimodal_api);
     if ((thumbnailNeeded && base64Bytes > compressionLimit) || isOoba || isKoboldCpp) {
-        const maxSide = 1024;
+        const maxSide = 2048;
-        base64Img = await createThumbnail(base64Img, maxSide, maxSide, 'image/jpeg');
+        base64Img = await createThumbnail(base64Img, maxSide, maxSide);
+    } else if (!safeMimeTypes.includes(mimeType)) {
+        base64Img = await createThumbnail(base64Img, null, null);
+    }
     const proxyUrl = useReverseProxy ? oai_settings.reverse_proxy : '';

public/scripts/openai.js+9 -7 Viewed

             chat_completion_sources.MISTRALAI,
             chat_completion_sources.VERTEXAI,
         ];
-        if (compressImageSources.includes(oai_settings.chat_completion_source)) {
+        const sizeThreshold = 2 * 1024 * 1024;
-            const sizeThreshold = 2 * 1024 * 1024;
+        const dataSize = image.length * 0.75;
-            const dataSize = image.length * 0.75;
+        const safeMimeTypes = ['image/jpeg', 'image/png', 'image/webp'];
-            const maxSide = 1024;
+        const mimeType = image?.split(';')?.[0]?.split(':')?.[1];
-            if (dataSize > sizeThreshold) {
+        if (compressImageSources.includes(oai_settings.chat_completion_source) && dataSize > sizeThreshold) {
-                image = await createThumbnail(image, maxSide);
+            const maxSide = 2048;
-            }
+            image = await createThumbnail(image, maxSide, maxSide);
+        } else if (!safeMimeTypes.includes(mimeType)) {
+            image = await createThumbnail(image, null, null);
+        }
         return image;
+    }

public/scripts/utils.js+31 -17 Viewed

  * Sends a base64 encoded image to the backend to be saved as a file.
+ *
  * @param {string} base64Data - The base64 encoded image data.
- * @param {string} characterName - The character name to determine the sub-directory for saving.
+ * @param {string} subFolder - The character name to determine the sub-directory for saving.
- * @param {string} ext - The file extension for the image (e.g., 'jpg', 'png', 'webp').
+ * @param {string} fileName - The name of the file to save the image as (without extension).
+ * @param {string} extension - The file extension for the image (e.g., 'jpg', 'png', 'webp').
+ *
  * @returns {Promise<string>} - Resolves to the saved image's path on the server.
  *                              Rejects with an error if the upload fails.
  */
-export async function saveBase64AsFile(base64Data, characterName, filename = '', ext) {
+export async function saveBase64AsFile(base64Data, subFolder, fileName, extension) {
-    // Construct the full data URL
-    const format = ext; // Extract the file extension (jpg, png, webp)
-    const dataURL = `data:image/${format};base64,${base64Data}`;
     // Prepare the request body
     const requestBody = {
-        image: dataURL,
+        image: base64Data,
-        ch_name: characterName,
+        format: extension,
-        filename: String(filename).replace(/\./g, '_'),
+        ch_name: subFolder,
+        filename: String(fileName).replace(/\./g, '_'),
     };
     // Send the data URL to your backend using fetch
     const response = await fetch('/api/images/upload', {
         method: 'POST',
+        headers: getRequestHeaders(),
         body: JSON.stringify(requestBody),
-        headers: {
-            ...getRequestHeaders(),
-            'Content-Type': 'application/json',
-        },
     });
     // If the response is successful, get the saved image path from the server's response

+}
 /**
+ * Gets the file extension from a File object.
+ * @param {File} file The file to get the extension from
+ * @returns {string} The file extension of the given file
+ */
+export function getFileExtension(file) {
+    return file.name.substring((file.name.lastIndexOf('.') + file.name.length) % file.name.length + 1).toLowerCase().trim();
+}
+/**
  * Loads either a CSS or JS file and appends it to the appropriate document section.
+ *
  * @param {string} url - The URL of the file to be loaded.

                 maxHeight = img.height;
+            }
-            if (img.width > img.height) {
+            // Do not upscale if image is already smaller than max dimensions
-                thumbnailHeight = maxWidth / aspectRatio;
+            if (img.width <= maxWidth && img.height <= maxHeight) {
+                thumbnailWidth = img.width;
+                thumbnailHeight = img.height;
             } else {
-                thumbnailWidth = maxHeight * aspectRatio;
+                if (img.width > img.height) {
+                    thumbnailHeight = maxWidth / aspectRatio;
+                } else {
+                    thumbnailWidth = maxHeight * aspectRatio;
+                }
+            }
             // Set the canvas dimensions and draw the resized image
             canvas.width = thumbnailWidth;
             canvas.height = thumbnailHeight;
+            ctx.imageSmoothingEnabled = true;
+            ctx.imageSmoothingQuality = 'high';
+            ctx.fillStyle = 'white';
+            ctx.fillRect(0, 0, thumbnailWidth, thumbnailHeight);
             ctx.drawImage(img, 0, 0, thumbnailWidth, thumbnailHeight);
             // Convert the canvas to a data URL and resolve the promise

src/constants.js+23 -0 Viewed

     WARN: 2,
     ERROR: 3,
 };
+/**
+ * An array of supported media file extensions.
+ * This is used to validate file uploads and ensure that only supported media types are processed.
+ */
+export const MEDIA_EXTENSIONS = [
+    'bmp',
+    'png',
+    'jpg',
+    'webp',
+    'jpeg',
+    'jfif',
+    'gif',
+    'mp4',
+    'avi',
+    'mov',
+    'wmv',
+    'flv',
+    'webm',
+    '3gp',
+    'mkv',
+    'mpg',
+];

src/endpoints/images.js+13 -11 Viewed

 import sanitize from 'sanitize-filename';
 import { clientRelativePath, removeFileExtension, getImages, isPathUnderParent } from '../util.js';
+import { MEDIA_EXTENSIONS } from '../constants.js';
 /**
  * Ensure the directory for the provided file path exists.

  * @returns {Object} response - The response object containing the path where the image was saved.
  */
 router.post('/upload', async (request, response) => {
-    // Check for image data
-    if (!request.body || !request.body.image) {
-        return response.status(400).send({ error: 'No image data provided' });
-    }
     try {
-        // Extracting the base64 data and the image format
+        if (!request.body) {
-        const splitParts = request.body.image.split(',');
+            return response.status(400).send({ error: 'No data provided' });
-        const format = splitParts[0].split(';')[0].split('/')[1];
+        }
-        const base64Data = splitParts[1];
-        const validFormat = ['png', 'jpg', 'webp', 'jpeg', 'gif', 'mp4', 'avi', 'mov', 'wmv', 'flv', 'webm', '3gp', 'mkv'].includes(format);
+        const { image, format } = request.body;
+        if (!image) {
+            return response.status(400).send({ error: 'No image data provided' });
+        }
+        const validFormat = MEDIA_EXTENSIONS.includes(format);
         if (!validFormat) {
             return response.status(400).send({ error: 'Invalid image format' });
+        }

+        }
         ensureDirectoryExistence(pathToNewFile);
-        const imageBuffer = Buffer.from(base64Data, 'base64');
+        const imageBuffer = Buffer.from(image, 'base64');
         await fs.promises.writeFile(pathToNewFile, new Uint8Array(imageBuffer));
         response.send({ path: clientRelativePath(request.user.directories.root, pathToNewFile) });
     } catch (error) {