rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Upload sprites as ZIP archive

Browse Source
This commit is contained in:
SillyLossy
2023-05-29 02:28:09 +03:00
parent 3b72be402e
commit 584394ded0
5 changed files with 222 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
package-lock.json generated
View File

@ -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"
}
}
}
}

3
package.json
View File

@ -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": {

80
public/scripts/extensions/expressions/index.js
View File

@ -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) {
<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);

8
public/scripts/extensions/expressions/style.css
View File

@ -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;

128
server.js
View File

@ -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);
if (!resp.ok) {
throw new Error(resp.statusText);
}
https.get(url, (resp) => {
let data = '';
const result = normaliseResponse(await resp.json());
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);
} catch (err) {
});
}).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);
});
}
});
});
}