[fix] image compression

src/lang/cn.ts

@@ -308,4 +308,5 @@ export const languageChinese = {
     recent: '最新',
     downloads: '下载量',
     trending: "热度",
+    imageCompression: "图像压缩"
 }

src/lang/en.ts

@@ -311,6 +311,7 @@ export const languageEnglish = {
     enterMessageForTranslateToEnglish: "Enter Message for Translate to English",
     recent: 'Recent',
     downloads: 'Downloads',
-    trending: "Trending"
+    trending: "Trending",
+    imageCompression: "Image Compression"
 
 }

src/lang/ko.ts

@@ -281,4 +281,6 @@ export const languageKorean = {
     useChatCopy: "채팅 메시지 복사 사용",
     autoTranslateInput: "입력 자동 번역",
     enterMessageForTranslateToEnglish: "영어로 번역할 메시지를 입력해주세요",
+    imageCompression: "이미지 압축"
+
 }

src/lib/Setting/Pages/AdvancedSettings.svelte

@@ -53,6 +53,10 @@
     <Check bind:check={$DataBase.showUnrecommended}/>
     <span>{language.showUnrecommended}</span>
 </div>
+<div class="flex items-center mt-4">
+    <Check bind:check={$DataBase.imageCompression}/>
+    <span>{language.imageCompression}</span>
+</div>
 <div class="flex items-center mt-4">
     <Check bind:check={$DataBase.useExperimental}/>
     <span>{language.useExperimental}</span>

src/ts/characterCards.ts

@@ -11,6 +11,7 @@ import { characterFormatUpdate } from "./characters"
 import { checkCharOrder, downloadFile, readImage, saveAsset } from "./storage/globalApi"
 import { cloneDeep } from "lodash"
 import { selectedCharID } from "./stores"
+import { convertImage } from "./parser"
 
 export const hubURL = import.meta.env.DEV ? "http://127.0.0.1:8787" : "https://sv.risuai.xyz"
 
@@ -532,7 +533,7 @@ export async function exportSpecV2(char:character) {
                     msg: `Loading... (Adding Emotions ${i} / ${card.data.extensions.risuai.emotions.length})`
                 })
                 const rData = await readImage(card.data.extensions.risuai.emotions[i][1])
-                char.emotionImages[i][1] = Buffer.from(rData).toString('base64')
+                char.emotionImages[i][1] = Buffer.from(await convertImage(rData)).toString('base64')
             }
         }
 
@@ -544,7 +545,7 @@ export async function exportSpecV2(char:character) {
                     msg: `Loading... (Adding Additional Assets ${i} / ${card.data.extensions.risuai.additionalAssets.length})`
                 })
                 const rData = await readImage(card.data.extensions.risuai.additionalAssets[i][1])
-                char.additionalAssets[i][1] = Buffer.from(rData).toString('base64')
+                char.additionalAssets[i][1] = Buffer.from(await convertImage(rData)).toString('base64')
             }
         }
     
@@ -611,7 +612,7 @@ export async function shareRisuHub(char:character, arg:{
                 })
                 const data = card.data.extensions.risuai.emotions[i][1]
                 const rData = await readImage(data)
-                resources.push([data, Buffer.from(rData).toString('base64')])
+                resources.push([data, Buffer.from(await convertImage(rData)).toString('base64')])
             }
         }
 
@@ -626,7 +627,7 @@ export async function shareRisuHub(char:character, arg:{
                 })
                 const data = card.data.extensions.risuai.additionalAssets[i][1]
                 const rData = await readImage(data)
-                resources.push([data, Buffer.from(rData).toString('base64')])
+                resources.push([data, Buffer.from(await convertImage(rData)).toString('base64')])
             }
         }
 

src/ts/parser.ts

@@ -1,8 +1,9 @@
 import DOMPurify from 'isomorphic-dompurify';
 import showdown from 'showdown';
-import type { character, groupChat } from './storage/database';
+import { DataBase, type character, type groupChat } from './storage/database';
 import { getFileSrc } from './storage/globalApi';
 import { processScript } from './process/scripts';
+import { get } from 'svelte/store';
 
 const convertor = new showdown.Converter({
     simpleLineBreaks: true,
@@ -66,3 +67,102 @@ export function parseMarkdownSafe(data:string) {
 export async function hasher(data:Uint8Array){
     return Buffer.from(await crypto.subtle.digest("SHA-256", data)).toString('hex');
 }
+
+export async function convertImage(data:Uint8Array) {
+    if(!get(DataBase).imageCompression){
+        return data
+    }
+    const type = checkImageType(data)
+    if(type !== 'Unknown' && type !== 'WEBP' && type !== 'AVIF'){
+        if(type === 'PNG' && isAPNG(data)){
+            return data
+        }
+
+        console.log('converting')
+        return await resizeAndConvert(data)
+    }
+    return data
+}
+
+async function resizeAndConvert(imageData: Uint8Array): Promise<Buffer> {
+    return new Promise((resolve, reject) => {
+        const base64Image = 'data:image/png;base64,' + Buffer.from(imageData).toString('base64');
+        const image = new Image();
+        image.onload = () => {
+            URL.revokeObjectURL(base64Image);
+
+            // Create a canvas
+            const canvas = document.createElement('canvas');
+            const context = canvas.getContext('2d');
+            if (!context) {
+                throw new Error('Unable to get 2D context');
+            }
+
+            // Compute the new dimensions while maintaining aspect ratio
+            let { width, height } = image;
+            if (width > 3000 || height > 3000) {
+                const aspectRatio = width / height;
+                if (width > height) {
+                    width = 3000;
+                    height = Math.round(width / aspectRatio);
+                } else {
+                    height = 3000;
+                    width = Math.round(height * aspectRatio);
+                }
+            }
+
+            // Resize and draw the image to the canvas
+            canvas.width = width;
+            canvas.height = height;
+            context.drawImage(image, 0, 0, width, height);
+
+            // Try to convert to WebP
+            let base64 = canvas.toDataURL('image/webp', 90);
+
+            // If WebP is not supported, convert to JPEG
+            if (base64.indexOf('data:image/webp') != 0) {
+                base64 = canvas.toDataURL('image/jpeg', 90);
+            }
+
+            // Convert it to Uint8Array
+            const array = Buffer.from(base64.split(',')[1], 'base64');
+            resolve(array);
+        };
+        image.src = base64Image;
+    });
+}
+
+type ImageType = 'JPEG' | 'PNG' | 'GIF' | 'BMP' | 'AVIF' | 'WEBP' | 'Unknown';
+
+function checkImageType(arr:Uint8Array):ImageType {
+    const isJPEG = arr[0] === 0xFF && arr[1] === 0xD8 && arr[arr.length-2] === 0xFF && arr[arr.length-1] === 0xD9;
+    const isPNG = arr[0] === 0x89 && arr[1] === 0x50 && arr[2] === 0x4E && arr[3] === 0x47 && arr[4] === 0x0D && arr[5] === 0x0A && arr[6] === 0x1A && arr[7] === 0x0A;
+    const isGIF = arr[0] === 0x47 && arr[1] === 0x49 && arr[2] === 0x46 && arr[3] === 0x38 && (arr[4] === 0x37 || arr[4] === 0x39) && arr[5] === 0x61;
+    const isBMP = arr[0] === 0x42 && arr[1] === 0x4D;
+    const isAVIF = arr[4] === 0x66 && arr[5] === 0x74 && arr[6] === 0x79 && arr[7] === 0x70 && arr[8] === 0x61 && arr[9] === 0x76 && arr[10] === 0x69 && arr[11] === 0x66;
+    const isWEBP = arr[0] === 0x52 && arr[1] === 0x49 && arr[2] === 0x46 && arr[3] === 0x46 && arr[8] === 0x57 && arr[9] === 0x45 && arr[10] === 0x42 && arr[11] === 0x50;
+
+    if (isJPEG) return "JPEG";
+    if (isPNG) return "PNG";
+    if (isGIF) return "GIF";
+    if (isBMP) return "BMP";
+    if (isAVIF) return "AVIF";
+    if (isWEBP) return "WEBP";
+    return "Unknown";
+}
+
+function isAPNG(pngData: Uint8Array): boolean {
+    const pngSignature = [0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A];
+    const acTL = [0x61, 0x63, 0x54, 0x4C];
+  
+    if (!pngData.slice(0, pngSignature.length).every((v, i) => v === pngSignature[i])) {
+      throw new Error('Invalid PNG data');
+    }
+  
+    for (let i = pngSignature.length; i < pngData.length - 12; i += 4) {
+      if (pngData.slice(i + 4, i + 8).every((v, j) => v === acTL[j])) {
+        return true;
+      }
+    }
+    return false;
+}  

src/ts/storage/database.ts

@@ -257,6 +257,9 @@ export function setDatabase(data:Database){
     if(checkNullish(data.autoSuggestPrompt)){
         data.autoSuggestPrompt = defaultAutoSuggestPrompt
     }
+    if(checkNullish(data.imageCompression)){
+        data.imageCompression = true
+    }
 
     changeLanguage(data.language)
     DataBase.set(data)
@@ -505,6 +508,7 @@ export interface Database{
     useChatCopy:boolean,
     novellistAPI:string,
     useAutoTranslateInput:boolean
+    imageCompression:boolean
 }
 
 interface hordeConfig{