backup

Author: ylxmf2005

package-lock.json

@@ -139,6 +139,34 @@ function General({ onSave, onCancel }: GeneralProps): JSX.Element {
         onChange={(value) => handleSettingChange("baseUrl", value)}
         placeholder="Enter Base URL"
       />
+
+      <InputField
+        label={t("settings.general.imageCompressionQuality")}
+        value={settings.imageCompressionQuality.toString()}
+        onChange={(value) => {
+          const quality = parseFloat(value as string);
+          if (!Number.isNaN(quality) && quality >= 0.1 && quality <= 1.0) {
+            handleSettingChange("imageCompressionQuality", quality);
+          } else if (value === "") {
+            handleSettingChange("imageCompressionQuality", settings.imageCompressionQuality);
+          }
+        }}
+        placeholder={t("settings.general.imageCompressionQualityPlaceholder")}
+      />
+
+      <InputField
+        label={t("settings.general.imageMaxWidth")}
+        value={settings.imageMaxWidth.toString()}
+        onChange={(value) => {
+          const maxWidth = parseInt(value as string, 10);
+          if (!Number.isNaN(maxWidth) && maxWidth > 0) {
+            handleSettingChange("imageMaxWidth", maxWidth);
+          } else if (value === "") {
+            handleSettingChange("imageMaxWidth", settings.imageMaxWidth);
+          }
+        }}
+        placeholder={t("settings.general.imageMaxWidthPlaceholder")}
+      />
     </Stack>
   );
 }

src/renderer/src/components/sidebar/setting/general.tsx

@@ -222,7 +222,7 @@ export function VADProvider({ children }: { children: React.ReactNode }) {
     if (autoStopMicRef.current) {
       stopMic();
     } else {
-      console.log('Auto stop mic is on, keeping mic active');
+      console.log('Auto stop mic is OFF, keeping mic active');
     }
 
     setPreviousTriggeredProbability(0);

src/renderer/src/context/vad-context.tsx

@@ -9,6 +9,11 @@ import { useSwitchCharacter } from '@/hooks/utils/use-switch-character';
 import { useConfig } from '@/context/character-config-context';
 import i18n from 'i18next';
 
+export const IMAGE_COMPRESSION_QUALITY_KEY = 'appImageCompressionQuality';
+export const DEFAULT_IMAGE_COMPRESSION_QUALITY = 0.8;
+export const IMAGE_MAX_WIDTH_KEY = 'appImageMaxWidth';
+export const DEFAULT_IMAGE_MAX_WIDTH = 1080;
+
 interface GeneralSettings {
   language: string[]
   customBgUrl: string
@@ -19,6 +24,8 @@ interface GeneralSettings {
   wsUrl: string
   baseUrl: string
   showSubtitle: boolean
+  imageCompressionQuality: number;
+  imageMaxWidth: number;
 }
 
 interface UseGeneralSettingsProps {
@@ -33,6 +40,28 @@ interface UseGeneralSettingsProps {
   onCancel?: (callback: () => void) => () => void
 }
 
+const loadInitialCompressionQuality = (): number => {
+  const storedQuality = localStorage.getItem(IMAGE_COMPRESSION_QUALITY_KEY);
+  if (storedQuality) {
+    const quality = parseFloat(storedQuality);
+    if (!Number.isNaN(quality) && quality >= 0.1 && quality <= 1.0) {
+      return quality;
+    }
+  }
+  return DEFAULT_IMAGE_COMPRESSION_QUALITY;
+};
+
+const loadInitialImageMaxWidth = (): number => {
+  const storedMaxWidth = localStorage.getItem(IMAGE_MAX_WIDTH_KEY);
+  if (storedMaxWidth) {
+    const maxWidth = parseInt(storedMaxWidth, 10);
+    if (!Number.isNaN(maxWidth) && maxWidth > 0) {
+      return maxWidth;
+    }
+  }
+  return DEFAULT_IMAGE_MAX_WIDTH;
+};
+
 export const useGeneralSettings = ({
   bgUrlContext,
   confName,
@@ -75,6 +104,8 @@ export const useGeneralSettings = ({
     wsUrl: wsUrl || defaultWsUrl,
     baseUrl: baseUrl || defaultBaseUrl,
     showSubtitle,
+    imageCompressionQuality: loadInitialCompressionQuality(),
+    imageMaxWidth: loadInitialImageMaxWidth(),
   };
 
   const [settings, setSettings] = useState<GeneralSettings>(initialSettings);
@@ -97,7 +128,9 @@ export const useGeneralSettings = ({
     if (settings.language && settings.language[0] && settings.language[0] !== i18n.language) {
       i18n.changeLanguage(settings.language[0]);
     }
-  }, [settings]);
+    localStorage.setItem(IMAGE_COMPRESSION_QUALITY_KEY, settings.imageCompressionQuality.toString());
+    localStorage.setItem(IMAGE_MAX_WIDTH_KEY, settings.imageMaxWidth.toString());
+  }, [settings, bgUrlContext, baseUrl, onWsUrlChange, onBaseUrlChange, setShowSubtitle]);
 
   useEffect(() => {
     if (confName) {

src/renderer/src/hooks/sidebar/setting/use-general-settings.ts

@@ -1,9 +1,16 @@
+/* eslint-disable operator-assignment */
 /* eslint-disable object-shorthand */
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useCamera } from '@/context/camera-context';
 import { useScreenCaptureContext } from '@/context/screen-capture-context';
 import { toaster } from "@/components/ui/toaster";
+import {
+  IMAGE_COMPRESSION_QUALITY_KEY,
+  DEFAULT_IMAGE_COMPRESSION_QUALITY,
+  IMAGE_MAX_WIDTH_KEY,
+  DEFAULT_IMAGE_MAX_WIDTH,
+} from '@/hooks/sidebar/setting/use-general-settings';
 
 // Add type definition for ImageCapture
 declare class ImageCapture {
@@ -23,6 +30,28 @@ export function useMediaCapture() {
   const { stream: cameraStream } = useCamera();
   const { stream: screenStream } = useScreenCaptureContext();
 
+  const getCompressionQuality = useCallback(() => {
+    const storedQuality = localStorage.getItem(IMAGE_COMPRESSION_QUALITY_KEY);
+    if (storedQuality) {
+      const quality = parseFloat(storedQuality);
+      if (!Number.isNaN(quality) && quality >= 0.1 && quality <= 1.0) {
+        return quality;
+      }
+    }
+    return DEFAULT_IMAGE_COMPRESSION_QUALITY;
+  }, []);
+
+  const getImageMaxWidth = useCallback(() => {
+    const storedMaxWidth = localStorage.getItem(IMAGE_MAX_WIDTH_KEY);
+    if (storedMaxWidth) {
+      const maxWidth = parseInt(storedMaxWidth, 10);
+      if (!Number.isNaN(maxWidth) && maxWidth > 0) {
+        return maxWidth;
+      }
+    }
+    return DEFAULT_IMAGE_MAX_WIDTH;
+  }, []);
+
   const captureFrame = useCallback(async (stream: MediaStream | null, source: 'camera' | 'screen') => {
     if (!stream) {
       console.warn(`No ${source} stream available`);
@@ -39,16 +68,25 @@ export function useMediaCapture() {
     try {
       const bitmap = await imageCapture.grabFrame();
       const canvas = document.createElement('canvas');
-      canvas.width = bitmap.width;
-      canvas.height = bitmap.height;
+      let { width, height } = bitmap;
+
+      const maxWidth = getImageMaxWidth();
+      if (width > maxWidth) {
+        height = (maxWidth / width) * height;
+        width = maxWidth;
+      }
+
+      canvas.width = width;
+      canvas.height = height;
       const ctx = canvas.getContext('2d');
       if (!ctx) {
         console.error('Failed to get canvas context');
         return null;
       }
 
       ctx.drawImage(bitmap, 0, 0);
-      return canvas.toDataURL('image/jpeg', 0.8);
+      const quality = getCompressionQuality();
+      return canvas.toDataURL('image/jpeg', quality);
     } catch (error) {
       console.error(`Error capturing ${source} frame:`, error);
       toaster.create({
@@ -58,7 +96,7 @@ export function useMediaCapture() {
       });
       return null;
     }
-  }, [t]);
+  }, [t, getCompressionQuality, getImageMaxWidth]);
 
   const captureAllMedia = useCallback(async () => {
     const images: ImageData[] = [];