Merge pull request #3803 from SillyTavern/ffmpeg-videobg Upload video bg via converter extension

df07fa8c940507b92f0a10a6c01960eab98e333a

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

Signed

Parents: 636ecef28a4bf2ce3b93e585a9f9cde3623732c8 573ada296ecae9b59da6cfb69b406227ee3950ff

public/global.d.ts+11 -0 Viewed

      * @param provider Translation provider
      */
     async function translate(text: string, lang: string, provider: string = null): Promise<string>;
++
 +    interface ConvertVideoArgs {
 +        buffer: Uint8Array;
 +        name: string;
 +    }
++
 +    /**
 +     * Converts a video file to an animated WebP format using FFmpeg.
 +     * @param args - The arguments for the conversion function.
 +     */
 +    function convertVideoToAnimatedWebp(args: ConvertVideoArgs): Promise<Uint8Array>;
+}

public/index.html+1 -1 Viewed

                     <div id="bg_menu_content" class="bg_list">
                         <form id="form_bg_download" class="bg_example no-border no-shadow" action="javascript:void(null);" method="post" enctype="multipart/form-data">
                             <label class="input-file">
                                 <input type="file" id="add_bg_button" name="avatar" accept="image/png, image/jpeg, image/jpg, image/gif*, imagevideo/bmp*">
                                 <div class="bg_example no-border no-shadow add_bg_but" style="background-image: url('/img/addbg3.png');"></div>
                             </label>
                         </form>

public/scripts/backgrounds.js+73 -25 Viewed

 import { Fuse } from '../lib.js';
 import { callPopup, chat_metadata, eventSource, event_types, generateQuietPrompt, getCurrentChatId, getRequestHeaders, getThumbnailUrl, saveSettingsDebounced } from '../script.js';
 import { openThirdPartyExtensionMenu, saveMetadataDebounced } from './extensions.js';
 import { SlashCommand } from './slash-commands/SlashCommand.js';
 import { SlashCommandParser } from './slash-commands/SlashCommandParser.js';
 import { flashHighlight, stringFormat } from './utils.js';

@@ -78,7 +78,7 @@ function getChatBackgroundsList() {
78	78	}
79	79
80	80	function getBackgroundPath(fileUrl) {
81	81	return `backgrounds/${encodeURIComponent(fileUrl)}`;
82	82	}
83	83
84	84	function highlightLockedBackground() {

     const formData = new FormData();
     formData.set('avatar', file);
     await uploadBackground(formData);
     const list = chat_metadata[LIST_METADATA_KEY] || [];
     const index = list.indexOf(bgNames.oldBg);

     });
+}
 async function onBackgroundUploadSelected() {
     const form = $('#form_bg_download').get(0);
     if (!(form instanceof HTMLFormElement)) {

+    }
     const formData = new FormData(form);
     uploadBackgroundawait convertFileIfVideo(formData);
 +    await uploadBackground(formData);
     form.reset();
+}
 /**
 + * Converts a video file to an animated webp format if the file is a video.
 + * @param {FormData} formData
 + * @returns {Promise<void>}
 + */
 +async function convertFileIfVideo(formData) {
 +    const file = formData.get('avatar');
 +    if (!(file instanceof File)) {
 +        return;
 +    }
 +    if (!file.type.startsWith('video/')) {
 +        return;
 +    }
 +    if (typeof globalThis.convertVideoToAnimatedWebp !== 'function') {
 +        toastr.warning(t`Click here to install the Video Background Loader extension`, t`Video background uploads require a downloadable add-on`, {
 +            timeOut: 0,
 +            extendedTimeOut: 0,
 +            onclick: () => openThirdPartyExtensionMenu('https://github.com/SillyTavern/Extension-VideoBackgroundLoader'),
 +        });
 +        return;
 +    }
++
 +    let toastMessage = jQuery();
 +    try {
 +        toastMessage = toastr.info(t`Preparing video for upload. This may take several minutes.`, t`Please wait`, { timeOut: 0, extendedTimeOut: 0 });
 +        const sourceBuffer = await file.arrayBuffer();
 +        const convertedBuffer = await globalThis.convertVideoToAnimatedWebp({ buffer: new Uint8Array(sourceBuffer), name: file.name });
 +        const convertedFileName = file.name.replace(/\.[^/.]+$/, '.webp');
 +        const convertedFile = new File([convertedBuffer], convertedFileName, { type: 'image/webp' });
 +        formData.set('avatar', convertedFile);
 +        toastMessage.remove();
 +    } catch (error) {
 +        formData.delete('avatar');
 +        toastMessage.remove();
 +        console.error('Error converting video to animated webp:', error);
 +        toastr.error(t`Error converting video to animated webp`);
 +    }
 +}
++
 +/**
  * Uploads a background to the server
  * @param {FormData} formData
  */
 async function uploadBackground(formData) {
 -    jQuery.ajax({
 +    try {
 -        type: 'POST',
 +        if (!formData.has('avatar')) {
 -        url: '/api/backgrounds/upload',
 +            console.log('No file provided. Background upload cancelled.');
 -        data: formData,
 +            return;
 -        beforeSend: function () {
 +        }
 -        },
++
 -        cache: false,
 +        const headers = getRequestHeaders();
 -        contentType: false,
 +        delete headers['Content-Type'];
 -        processData: false,
++
 -        success: async function (bg) {
 +        const response = await fetch('/api/backgrounds/upload', {
 -            setBackground(bg, generateUrlParameter(bg, false));
 +            method: 'POST',
 -            await getBackgrounds();
 +            headers: headers,
 -            highlightNewBackground(bg);
 +            body: formData,
 -        },
 +            cache: 'no-cache',
 -        error: function (jqXHR, exception) {
 +        });
 -            console.log(exception);
++
 -            console.log(jqXHR);
 +        if (!response.ok) {
 -        },
 +            throw new Error('Failed to upload background');
 -    });
 +        }
++
 +        const bg = await response.text();
 +        setBackground(bg, generateUrlParameter(bg, false));
 +        await getBackgrounds();
 +        highlightNewBackground(bg);
 +    } catch (error) {
 +        console.error('Error uploading background:', error);
 +    }
+}
 /**