Upload sprites as ZIP archive

package-lock.json

@@ -41,7 +41,8 @@
                 "uniqolor": "^1.1.0",
                 "webp-converter": "2.3.2",
                 "ws": "^8.13.0",
-                "yargs": "^17.7.1"
+                "yargs": "^17.7.1",
+                "yauzl": "^2.10.0"
             },
             "bin": {
                 "sillytavern": "server.js"
@@ -816,6 +817,14 @@
                 "ieee754": "^1.1.13"
             }
         },
+        "node_modules/buffer-crc32": {
+            "version": "0.2.13",
+            "resolved": "https://registry.npmjs.org/buffer-crc32/-/buffer-crc32-0.2.13.tgz",
+            "integrity": "sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==",
+            "engines": {
+                "node": "*"
+            }
+        },
         "node_modules/buffer-equal": {
             "version": "0.0.1",
             "license": "MIT",
@@ -1297,6 +1306,14 @@
                 "reusify": "^1.0.4"
             }
         },
+        "node_modules/fd-slicer": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/fd-slicer/-/fd-slicer-1.1.0.tgz",
+            "integrity": "sha512-cE1qsB/VwyQozZ+q1dGxR8LBYNZeofhEdUNGSMbQD3Gw2lAzX9Zb3uIU6Ebc/Fmyjo9AWWfnn0AUCHqtevs/8g==",
+            "dependencies": {
+                "pend": "~1.2.0"
+            }
+        },
         "node_modules/file-type": {
             "version": "16.5.4",
             "license": "MIT",
@@ -2227,6 +2244,11 @@
                 "url": "https://github.com/sponsors/Borewit"
             }
         },
+        "node_modules/pend": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/pend/-/pend-1.2.0.tgz",
+            "integrity": "sha512-F3asv42UuXchdzt+xXqfW1OGlVBe+mxa2mqI0pg5yAHZPvFmY3Y6drSf/GQ1A86WgWEN9Kzh/WrgKa6iGcHXLg=="
+        },
         "node_modules/phin": {
             "version": "2.9.3",
             "license": "MIT"
@@ -3322,6 +3344,15 @@
             "engines": {
                 "node": ">=12"
             }
+        },
+        "node_modules/yauzl": {
+            "version": "2.10.0",
+            "resolved": "https://registry.npmjs.org/yauzl/-/yauzl-2.10.0.tgz",
+            "integrity": "sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==",
+            "dependencies": {
+                "buffer-crc32": "~0.2.3",
+                "fd-slicer": "~1.1.0"
+            }
         }
     }
 }

package.json

@@ -32,7 +32,8 @@
         "uniqolor": "^1.1.0",
         "webp-converter": "2.3.2",
         "ws": "^8.13.0",
-        "yargs": "^17.7.1"
+        "yargs": "^17.7.1",
+        "yauzl": "^2.10.0"
     },
     "overrides": {
         "parse-bmfont-xml": {

public/scripts/extensions/expressions/index.js

@@ -348,6 +348,29 @@ function onClickExpressionImage() {
         setExpression(name, expression, true);
     }
 }
+async function handleFileUpload(url, formData) {
+    try {
+        const data = await jQuery.ajax({
+            type: "POST",
+            url: url,
+            data: formData,
+            beforeSend: function () { },
+            cache: false,
+            contentType: false,
+            processData: false,
+        });
+
+        // Refresh sprites list
+        const name = formData.get('name');
+        delete spriteCache[name];
+        await validateImages(name);
+
+        return data;
+    } catch (error) {
+        toastr.error('Failed to upload image');
+    }
+}
+
 async function onClickExpressionUpload(event) {
     // Prevents the expression from being set
     event.stopPropagation();
@@ -367,23 +390,7 @@ async function onClickExpressionUpload(event) {
         formData.append('label', id);
         formData.append('avatar', file);
 
-        try {
+        await handleFileUpload('/upload_sprite', formData);
-            await jQuery.ajax({
-                type: "POST",
-                url: "/upload_sprite",
-                data: formData,
-                beforeSend: function () { },
-                cache: false,
-                contentType: false,
-                processData: false,
-            });
-
-            // Refresh sprites list
-            delete spriteCache[name];
-            await validateImages(name);
-        } catch (error) {
-            toastr.error('Failed to upload image');
-        }
 
         // Reset the input
         e.target.form.reset();
@@ -395,6 +402,33 @@ async function onClickExpressionUpload(event) {
         .trigger('click');
 }
 
+async function onClickExpressionUploadPackButton() {
+    const name = $('#image_list').data('name');
+
+    const handleFileUploadChange = async (e) => {
+        const file = e.target.files[0];
+
+        if (!file) {
+            return;
+        }
+
+        const formData = new FormData();
+        formData.append('name', name);
+        formData.append('avatar', file);
+
+        const { count } = await handleFileUpload('/upload_sprite_pack', formData);
+        toastr.success(`Uploaded ${count} image(s) for ${name}`);
+
+        // Reset the input
+        e.target.form.reset();
+    };
+
+    $('#expression_upload_pack')
+        .off('change')
+        .on('change', handleFileUploadChange)
+        .trigger('click');
+}
+
 async function onClickExpressionDelete(event) {
     // Prevents the expression from being set
     event.stopPropagation();
@@ -446,16 +480,26 @@ async function onClickExpressionDelete(event) {
                 <div class="inline-drawer-content">
                     <p class="offline_mode">You are in offline mode. Click on the image below to set the expression.</p>
                     <div id="image_list"></div>
+                    <div class="expression_buttons">
+                        <div id="expression_upload_pack_button" class="menu_button">
+                            <i class="fa-solid fa-file-zipper"></i>
+                            <span>Upload sprite pack (ZIP)</span>
+                        </div>
+                    </div>
                     <p class="hint"><b>Hint:</b> <i>Create new folder in the <b>public/characters/</b> folder and name it as the name of the character.
                     Put images with expressions there. File names should follow the pattern: <tt>[expression_label].[image_format]</tt></i></p>
                     <label for="expressions_show_default"><input id="expressions_show_default" type="checkbox">Show default images (emojis) if missing</label>
                 </div>
             </div>
-            <form><input type="file" id="expression_upload" name="expression_upload" accept="image/*" hidden></form>
+            <form>
+                <input type="file" id="expression_upload_pack" name="expression_upload_pack" accept="application/zip" hidden>
+                <input type="file" id="expression_upload" name="expression_upload" accept="image/*" hidden>
+            </form>
         </div>
         `;
         $('#extensions_settings').append(html);
         $('#expressions_show_default').on('input', onExpressionsShowDefaultInput);
+        $('#expression_upload_pack_button').on('click', onClickExpressionUploadPackButton);
         $('#expressions_show_default').prop('checked', extension_settings.expressions.showDefault).trigger('input');
         $(document).on('click', '.expression_list_item', onClickExpressionImage);
         $(document).on('click', '.expression_list_upload', onClickExpressionUpload);

public/scripts/extensions/expressions/style.css

@@ -131,6 +131,14 @@ img.expression.default {
     margin-left: 0px !important;
 }
 
+.expression_buttons .menu_button {
+    width: fit-content;
+    display: flex;
+    gap: 10px;
+    align-items: baseline;
+    flex-direction: row;
+}
+
 @media screen and (max-width:1200px) {
     div.expression {
         display: none;

server.js

@@ -88,6 +88,7 @@ const ai_horde = new AIHorde({
     client_agent: getVersion()?.agent || 'SillyTavern:UNKNOWN:Cohee#1207',
 });
 const ipMatching = require('ip-matching');
+const yauzl = require('yauzl');
 
 const Client = require('node-rest-client').Client;
 const client = new Client();
@@ -3044,21 +3045,24 @@ app.post('/google_translate', jsonParser, async (request, response) => {
 
     console.log('Input text: ' + text);
 
-    try {
+    const url = generateRequestUrl(text, { to: lang });
-        const url = generateRequestUrl(text, { to: lang });
-        const resp = await fetch(url);
 
-        if (!resp.ok) {
+    https.get(url, (resp) => {
-            throw new Error(resp.statusText);
+        let data = '';
-        }
 
-        const result = normaliseResponse(await resp.json());
+        resp.on('data', (chunk) => {
-        console.log('Translated text: ' + result.text);
+            data += chunk;
-        return response.send(result.text);
+        });
-    } catch (err) {
+
+        resp.on('end', () => {
+            const result = normaliseResponse(JSON.parse(data));
+            console.log('Translated text: ' + result.text);
+            return response.send(result.text);
+        });
+    }).on("error", (err) => {
         console.log("Translation error: " + err.message);
         return response.sendStatus(500);
-    }
+    });
 });
 
 app.post('/delete_sprite', jsonParser, async (request, response) => {
@@ -3093,6 +3097,53 @@ app.post('/delete_sprite', jsonParser, async (request, response) => {
     }
 });
 
+app.post('/upload_sprite_pack', urlencodedParser, async (request, response) => {
+    const file = request.file;
+    const name = request.body.name;
+
+    if (!file || !name) {
+        return response.sendStatus(400);
+    }
+
+    try {
+        const spritesPath = path.join(directories.characters, name);
+
+        // Create sprites folder if it doesn't exist
+        if (!fs.existsSync(spritesPath)) {
+            fs.mkdirSync(spritesPath);
+        }
+
+        // Path to sprites is not a directory. This should never happen.
+        if (!fs.statSync(spritesPath).isDirectory()) {
+            return response.sendStatus(404);
+        }
+
+        const spritePackPath = path.join("./uploads/", file.filename);
+        const sprites = await getImageBuffers(spritePackPath);
+        const files = fs.readdirSync(spritesPath);
+
+        for (const [filename, buffer] of sprites) {
+            // Remove existing sprite with the same label
+            const existingFile = files.find(file => path.parse(file).name === path.parse(filename).name);
+
+            if (existingFile) {
+                fs.rmSync(path.join(spritesPath, existingFile));
+            }
+
+            // Write sprite buffer to disk
+            const pathToSprite = path.join(spritesPath, filename);
+            fs.writeFileSync(pathToSprite, buffer);
+        }
+
+        // Remove uploaded ZIP file
+        fs.rmSync(spritePackPath);
+        return response.send({ count: sprites.length });
+    } catch (error) {
+        console.error(error);
+        return response.sendStatus(500);
+    }
+});
+
 app.post('/upload_sprite', urlencodedParser, async (request, response) => {
     const file = request.file;
     const label = request.body.label;
@@ -3105,16 +3156,16 @@ app.post('/upload_sprite', urlencodedParser, async (request, response) => {
     try {
         const spritesPath = path.join(directories.characters, name);
 
-        // Path to sprites is not a directory. This should never happen.
-        if (!fs.statSync(spritesPath).isDirectory()) {
-            return response.sendStatus(404);
-        }
-
         // Create sprites folder if it doesn't exist
         if (!fs.existsSync(spritesPath)) {
             fs.mkdirSync(spritesPath);
         }
 
+        // Path to sprites is not a directory. This should never happen.
+        if (!fs.statSync(spritesPath).isDirectory()) {
+            return response.sendStatus(404);
+        }
+
         const files = fs.readdirSync(spritesPath);
 
         // Remove existing sprite with the same label
@@ -3159,3 +3210,54 @@ function readSecret(key) {
     const secrets = JSON.parse(fileContents);
     return secrets[key];
 }
+
+async function getImageBuffers(zipFilePath) {
+    return new Promise((resolve, reject) => {
+        // Check if the zip file exists
+        if (!fs.existsSync(zipFilePath)) {
+            reject(new Error('File not found'));
+            return;
+        }
+
+        const imageBuffers = [];
+
+        yauzl.open(zipFilePath, { lazyEntries: true }, (err, zipfile) => {
+            if (err) {
+                reject(err);
+            } else {
+                zipfile.readEntry();
+                zipfile.on('entry', (entry) => {
+                    const mimeType = mime.lookup(entry.fileName);
+                    if (mimeType && mimeType.startsWith('image/') && !entry.fileName.startsWith('__MACOSX')) {
+                        console.log(`Extracting ${entry.fileName}`);
+                        zipfile.openReadStream(entry, (err, readStream) => {
+                            if (err) {
+                                reject(err);
+                            } else {
+                                const chunks = [];
+                                readStream.on('data', (chunk) => {
+                                    chunks.push(chunk);
+                                });
+
+                                readStream.on('end', () => {
+                                    imageBuffers.push([path.parse(entry.fileName).base, Buffer.concat(chunks)]);
+                                    zipfile.readEntry(); // Continue to the next entry
+                                });
+                            }
+                        });
+                    } else {
+                        zipfile.readEntry(); // Continue to the next entry
+                    }
+                });
+
+                zipfile.on('end', () => {
+                    resolve(imageBuffers);
+                });
+
+                zipfile.on('error', (err) => {
+                    reject(err);
+                });
+            }
+        });
+    });
+}