Upload video bg via converter extension

d05373cdd2e8fbce1b3a71895ea3fa437e6047ac

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

Parents: d50698861aff7bfa213883a484789ef53ce02c03

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, image/bmp">
+                                <input type="file" id="add_bg_button" name="avatar" accept="image/*, video/*">
                                 <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+42 -3 Viewed

 import { Fuse } from '../lib.js';
 import { callPopup, chat_metadata, eventSource, event_types, generateQuietPrompt, getCurrentChatId, getRequestHeaders, getThumbnailUrl, saveSettingsDebounced } from '../script.js';
-import { saveMetadataDebounced } from './extensions.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';

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

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

+    }
     const formData = new FormData(form);
+    await convertFileIfVideo(formData);
     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('Click here to install the Video Background Loader extension', '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('Preparing video for upload...', '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) {
+        toastMessage.remove();
+        console.error('Error converting video to animated webp:', error);
+        toastr.error('Error converting video to animated webp');
+    }
+}
+/**
  * Uploads a background to the server
  * @param {FormData} formData
  */