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', 'mpg'];

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

 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, '', base64Formatextension);
             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, 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 base64DatafileBase64 = 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 = 10242048;
         base64Img = await createThumbnail(base64Img, maxSide, maxSide, 'image/jpeg');
 +    } else if (!safeMimeTypes.includes(mimeType)) {
 +        base64Img = await createThumbnail(base64Img, null, null);
+    }
     const proxyUrl = useReverseProxy ? oai_settings.reverse_proxy : '';

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

             chat_completion_sources.MISTRALAI,
             chat_completion_sources.VERTEXAI,
         ];
 -        if (compressImageSources.includes(oai_settings.chat_completion_source)) {
         const sizeThreshold = 2 * 1024 * 1024;
         const dataSize = image.length * 0.75;
 -            const maxSide = 1024;
 +        const safeMimeTypes = ['image/jpeg', 'image/png', 'image/webp'];
 -            if (dataSize > sizeThreshold) {
 +        const mimeType = image?.split(';')?.[0]?.split(':')?.[1];
 -                image = await createThumbnail(image, maxSide);
 +        if (compressImageSources.includes(oai_settings.chat_completion_source) && dataSize > sizeThreshold) {
 -            }
 +            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+28 -14 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} characterNamesubFolder - The character name to determine the sub-directory for saving.
  * @param {string} extfileName - The name of the file extensionto forsave the image (e.g., 'jpg',as 'png',(without 'webp'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, characterNamesubFolder, filename = ''fileName, extextension) {
 -    // 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: dataURLbase64Data,
         ch_nameformat: characterNameextension,
 -        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;
+            }
 +            // Do not upscale if image is already smaller than max dimensions
 +            if (img.width <= maxWidth && img.height <= maxHeight) {
 +                thumbnailWidth = img.width;
 +                thumbnailHeight = img.height;
 +            } else {
                 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+11 -9 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
 +    try {
             if (!request.body || !request.body.image) {
 +            return response.status(400).send({ error: 'No data provided' });
 +        }
++
 +        const { image, format } = request.body;
++
 +        if (!image) {
             return response.status(400).send({ error: 'No image data provided' });
+        }
 -    try {
 +        const validFormat = MEDIA_EXTENSIONS.includes(format);
 -        // Extracting the base64 data and the image format
 -        const splitParts = request.body.image.split(',');
 -        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);
         if (!validFormat) {
             return response.status(400).send({ error: 'Invalid image format' });
+        }

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