Merge branch 'staging' into qr-context

public/index.html

@@ -8,6 +8,7 @@
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="darkreader-lock">
     <meta name="robots" content="noindex, nofollow" />
+    <link rel="manifest" href="/manifest.json">
     <link href="webfonts/NotoSans/stylesheet.css" rel="stylesheet">
     <!-- fontawesome webfonts-->
     <link href="css/fontawesome.css" rel="stylesheet">

public/manifest.json

@@ -0,0 +1,30 @@
+{
+    "name": "SillyTavern",
+    "short_name": "SillyTavern",
+    "start_url": "/",
+    "display": "standalone",
+    "theme_color": "#202124",
+    "background_color": "#202124",
+    "icons": [
+        {
+            "src": "img/apple-icon-57x57.png",
+            "sizes": "57x57",
+            "type": "image/png"
+        },
+        {
+            "src": "img/apple-icon-72x72.png",
+            "sizes": "72x72",
+            "type": "image/png"
+        },
+        {
+            "src": "img/apple-icon-114x114.png",
+            "sizes": "114x114",
+            "type": "image/png"
+        },
+        {
+            "src": "img/apple-icon-144x144.png",
+            "sizes": "144x144",
+            "type": "image/png"
+        }
+    ]
+}

public/scripts/extensions/shared.js

@@ -23,7 +23,7 @@ export async function getMultimodalCaption(base64Img, prompt) {
     const compressionLimit = 2 * 1024 * 1024;
     if (extension_settings.caption.multimodal_api === 'openrouter' && base64Bytes > compressionLimit) {
         const maxSide = 1024;
-        base64Img = await createThumbnail(base64Img, maxSide, maxSide);
+        base64Img = await createThumbnail(base64Img, maxSide, maxSide, 'image/jpeg');
     }
 
     const apiResult = await fetch('/api/openai/caption-image', {

public/scripts/utils.js

@@ -973,9 +973,10 @@ export function loadFileToDocument(url, type) {
  * @param {string} dataUrl The data URL encoded data of the image.
  * @param {number} maxWidth The maximum width of the thumbnail.
  * @param {number} maxHeight The maximum height of the thumbnail.
+ * @param {string} [type='image/jpeg'] The type of the thumbnail.
  * @returns {Promise<string>} A promise that resolves to the thumbnail data URL.
  */
-export function createThumbnail(dataUrl, maxWidth, maxHeight) {
+export function createThumbnail(dataUrl, maxWidth, maxHeight, type = 'image/jpeg') {
     return new Promise((resolve, reject) => {
         const img = new Image();
         img.src = dataUrl;
@@ -1000,7 +1001,7 @@ export function createThumbnail(dataUrl, maxWidth, maxHeight) {
             ctx.drawImage(img, 0, 0, thumbnailWidth, thumbnailHeight);
 
             // Convert the canvas to a data URL and resolve the promise
-            const thumbnailDataUrl = canvas.toDataURL('image/jpeg');
+            const thumbnailDataUrl = canvas.toDataURL(type);
             resolve(thumbnailDataUrl);
         };