fix: enhance vad logic and settings

- Move AI interruption from onSpeechStart to onSpeechRealStart for better accuracy
- Save/restore AI state around speech detection to prevent misfire disruption
- Add bilingual misfire messages explaining voice too brief + troubleshooting tips
-Implement help icons for technical VAD parameters (thresholds, frames)

Author: ylxmf2005

package-lock.json

@@ -31,7 +31,7 @@
     "@electron-toolkit/preload": "^3.0.1",
     "@electron-toolkit/utils": "^3.0.0",
     "@emotion/react": "^11.14.0",
-    "@ricky0123/vad-web": "^0.0.22",
+    "@ricky0123/vad-web": "^0.0.24",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "electron-updater": "^6.1.7",
@@ -41,6 +41,7 @@
     "i18next-browser-languagedetector": "^8.0.5",
     "i18next-scanner": "^4.6.0",
     "next-themes": "^0.4.4",
+    "onnxruntime-web": "1.14.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-i18next": "^15.5.1",

package.json

@@ -96,18 +96,18 @@ app.whenReady().then(() => {
     return false;
   });
 
-  if (process.env.NODE_ENV === "development") {
-    globalShortcut.register("F12", () => {
-      const window = windowManager.getWindow();
-      if (!window) return;
-
-      if (window.webContents.isDevToolsOpened()) {
-        window.webContents.closeDevTools();
-      } else {
-        window.webContents.openDevTools();
-      }
-    });
-  }
+  // if (process.env.NODE_ENV === "development") {
+  //   globalShortcut.register("F12", () => {
+  //     const window = windowManager.getWindow();
+  //     if (!window) return;
+
+  //     if (window.webContents.isDevToolsOpened()) {
+  //       window.webContents.closeDevTools();
+  //     } else {
+  //       window.webContents.openDevTools();
+  //     }
+  //   });
+  // }
 
   setupIPC();
 

src/main/index.ts

@@ -61,6 +61,7 @@ function ASR({ onSave, onCancel }: ASRProps): JSX.Element {
 
       <NumberField
         label={t('settings.asr.positiveSpeechThreshold')}
+        help={t('settings.asr.positiveSpeechThresholdDesc')}
         value={localSettings.positiveSpeechThreshold}
         onChange={(value) => handleInputChange('positiveSpeechThreshold', value)}
         min={1}
@@ -69,6 +70,7 @@ function ASR({ onSave, onCancel }: ASRProps): JSX.Element {
 
       <NumberField
         label={t('settings.asr.negativeSpeechThreshold')}
+        help={t('settings.asr.negativeSpeechThresholdDesc')}
         value={localSettings.negativeSpeechThreshold}
         onChange={(value) => handleInputChange('negativeSpeechThreshold', value)}
         min={0}
@@ -77,6 +79,7 @@ function ASR({ onSave, onCancel }: ASRProps): JSX.Element {
 
       <NumberField
         label={t('settings.asr.redemptionFrames')}
+        help={t('settings.asr.redemptionFramesDesc')}
         value={localSettings.redemptionFrames}
         onChange={(value) => handleInputChange('redemptionFrames', value)}
         min={1}

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

@@ -1,9 +1,12 @@
 /* eslint-disable react/require-default-props */
+import { useState } from 'react';
 import {
-  Text, Input, NumberInput, createListCollection,
+  Text, Input, NumberInput, createListCollection, Flex, Box,
 } from '@chakra-ui/react';
+import { HiQuestionMarkCircle } from 'react-icons/hi';
 import { Field } from '@/components/ui/field';
 import { Switch } from '@/components/ui/switch';
+import { Tooltip } from '@/components/ui/tooltip';
 import {
   SelectContent,
   SelectItem,
@@ -13,6 +16,43 @@ import {
 } from '@/components/ui/select';
 import { settingStyles } from './setting-styles';
 
+// Help Icon Component
+interface HelpIconProps {
+  content: string;
+}
+
+function HelpIcon({ content }: HelpIconProps): JSX.Element {
+  const [isHovering, setIsHovering] = useState(false);
+
+  const handleMouseEnter = () => setIsHovering(true);
+  const handleMouseLeave = () => setIsHovering(false);
+
+  return (
+    <Tooltip
+      showArrow
+      content={
+        <Text fontSize="sm" maxW="300px" lineHeight="1.4">
+          {content}
+        </Text>
+      }
+      open={isHovering}
+    >
+      <Box
+        as={HiQuestionMarkCircle}
+        color="gray.400"
+        _hover={{ color: 'gray.600' }}
+        cursor="help"
+        w="16px"
+        h="16px"
+        ml="2"
+        transition="color 0.2s"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      />
+    </Tooltip>
+  );
+}
+
 // Common Props Types
 interface SelectFieldProps {
   label: string
@@ -30,12 +70,14 @@ interface NumberFieldProps {
   max?: number
   step?: number
   allowMouseWheel?: boolean
+  help?: string
 }
 
 interface SwitchFieldProps {
   label: string
   checked: boolean
   onChange: (checked: boolean) => void
+  help?: string
 }
 
 interface InputFieldProps {
@@ -87,11 +129,17 @@ export function NumberField({
   max,
   step,
   allowMouseWheel,
+  help,
 }: NumberFieldProps): JSX.Element {
   return (
     <Field
       {...settingStyles.common.field}
-      label={<Text {...settingStyles.common.fieldLabel}>{label}</Text>}
+      label={
+        <Flex align="center">
+          <Text {...settingStyles.common.fieldLabel}>{label}</Text>
+          {help && <HelpIcon content={help} />}
+        </Flex>
+      }
     >
       <NumberInput.Root
         {...settingStyles.common.numberInput.root}
@@ -112,11 +160,16 @@ export function NumberField({
   );
 }
 
-export function SwitchField({ label, checked, onChange }: SwitchFieldProps): JSX.Element {
+export function SwitchField({ label, checked, onChange, help }: SwitchFieldProps): JSX.Element {
   return (
     <Field
       {...settingStyles.common.field}
-      label={<Text {...settingStyles.common.fieldLabel}>{label}</Text>}
+      label={
+        <Flex align="center">
+          <Text {...settingStyles.common.fieldLabel}>{label}</Text>
+          {help && <HelpIcon content={help} />}
+        </Flex>
+      }
     >
       <Switch
         {...settingStyles.common.switch}