diff --git a/package-lock.json b/package-lock.json index 47436a294..08ffed738 100644 --- a/package-lock.json +++ b/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" + } } } } diff --git a/package.json b/package.json index d30048eda..1c6a170c2 100644 --- a/package.json +++ b/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": { diff --git a/public/scripts/extensions/expressions/index.js b/public/scripts/extensions/expressions/index.js index 594e33bc2..14141dce1 100644 --- a/public/scripts/extensions/expressions/index.js +++ b/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 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'); - } + await handleFileUpload('/upload_sprite', formData); // 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) {

You are in offline mode. Click on the image below to set the expression.

+
+ +

Hint: Create new folder in the public/characters/ folder and name it as the name of the character. Put images with expressions there. File names should follow the pattern: [expression_label].[image_format]

-
+
+ + +
`; $('#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); diff --git a/public/scripts/extensions/expressions/style.css b/public/scripts/extensions/expressions/style.css index 979a5d083..819ad9cd4 100644 --- a/public/scripts/extensions/expressions/style.css +++ b/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; diff --git a/server.js b/server.js index 2e7314303..f6ae145bd 100644 --- a/server.js +++ b/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 resp = await fetch(url); + const url = generateRequestUrl(text, { to: lang }); - if (!resp.ok) { - throw new Error(resp.statusText); - } + https.get(url, (resp) => { + let data = ''; - const result = normaliseResponse(await resp.json()); - console.log('Translated text: ' + result.text); - return response.send(result.text); - } catch (err) { + resp.on('data', (chunk) => { + data += chunk; + }); + + 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); + }); + } + }); + }); +}