Add reading function

Bin-Huang · nufeng1999 · Apr 6, 2023 · Apr 7, 2023 · Apr 7, 2023 · Apr 6, 2023
commit 8fc0effcec6f609de1adc6b666e856b5dc2e580e
diff --git a/src/App.tsx b/src/App.tsx
@@ -373,6 +373,7 @@ function Main() {
                                         showWordCount={store.settings.showWordCount || false}
                                         showTokenCount={store.settings.showTokenCount || false}
                                         showModelName={store.settings.showModelName || false}
+                                        speech={store.settings.speech || ''}
                                         modelName={store.currentSession.model}
                                         setMsg={(updated) => {
                                             store.currentSession.messages = store.currentSession.messages.map((m) => {

diff --git a/src/Block.tsx b/src/Block.tsx
@@ -16,6 +16,8 @@ import CheckIcon from '@mui/icons-material/Check';
 import EditIcon from '@mui/icons-material/Edit';
 import { styled, alpha } from '@mui/material/styles';
 import RefreshIcon from '@mui/icons-material/Refresh';
+import VoiceOverOffIcon from '@mui/icons-material/VoiceOverOff';
+import RecordVoiceOverIcon from '@mui/icons-material/RecordVoiceOver';
 import StopIcon from '@mui/icons-material/Stop';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -70,18 +72,24 @@ export interface Props {
     showTokenCount: boolean
     showModelName: boolean
     modelName: string
+    speech:string
     setMsg: (msg: Message) => void
     delMsg: () => void
     refreshMsg: () => void
     copyMsg: () => void
     quoteMsg: () => void
 }
 
+let currentUtterance: SpeechSynthesisUtterance | null = null;
+let currentIndex: string = "-1";
 function _Block(props: Props) {
     const { t } = useTranslation()
     const { msg, setMsg } = props;
+    const { speech } = props;
     const [isHovering, setIsHovering] = useState(false)
     const [isEditing, setIsEditing] = useState(false)
+    const [isSpeaking, setIsSpeaking] = useState(false)
+    const synth = window.speechSynthesis;
 
     // for debounce each render when 'props.msg' change
     const renderTimer = useRef<NodeJS.Timeout>();
@@ -114,6 +122,43 @@ function _Block(props: Props) {
         setAnchorEl(null);
     };
 
+    const handleSay = () => {
+        if (currentUtterance && currentIndex !== "-1") {
+            synth.cancel();
+            setIsSpeaking(false);
+            if (msg.id === currentIndex) {
+                currentUtterance = null;
+                currentIndex = "-1";
+                return;
+            }
+        }
+        const txt = msg.content?.trim() || ''
+        if (!txt) return;
+        const utterance = new SpeechSynthesisUtterance(txt);
+        const voices = speechSynthesis.getVoices();
+        // "speech_lang": "Microsoft Yaoyao - Chinese (Simplified, PRC)",
+        // "Microsoft Xiaoxiao Online (Natural) - Chinese (Mainland)"
+        let voice = voices.find(voice => voice.name === speech);
+        if (!voice) {
+            voice = voices.find(voice => voice.lang === 'zh-CN');
+        }
+        utterance.voice=voice?voice:null;
+        currentIndex = msg.id;
+        // utterance.lang = voice.lang;
+        // utterance.volume = 1;
+        // utterance.rate = 0.8;
+        // utterance.pitch = 1;
+        synth.speak(utterance);
+        setIsSpeaking(true);
+        currentUtterance = utterance;
+        currentIndex = msg.id;
+        utterance.onend = () => {
+            setIsSpeaking(false);
+            currentUtterance = null;
+            currentIndex = "-1";
+        }
+    };
+
     // stop action
     const onStop = useCallback(() => {
         msg?.cancel?.();
@@ -244,6 +289,22 @@ function _Block(props: Props) {
                                                     </IconButton>
                                                 )
                                         }
+                                        {
+                                            isSpeaking
+                                                ?(
+                                                    <IconButton onClick={()=>{
+                                                        handleSay()
+                                                    }} size='large' color='primary'>
+                                                        <VoiceOverOffIcon fontSize='small' />
+                                                    </IconButton>)
+                                                : (
+                                                    <IconButton onClick={()=>{
+                                                        handleSay()
+                                                    }} size='large' color='primary'>
+                                                        <RecordVoiceOverIcon fontSize='small' />
+                                                    </IconButton>
+                                                )
+                                        }
                                         <IconButton onClick={handleClick} size='large' color='primary'>
                                             <MoreVertIcon />
                                         </IconButton>
@@ -347,5 +408,5 @@ const StyledMenu = styled((props: MenuProps) => (
 export default function Block(props: Props) {
     return useMemo(() => {
         return <_Block {...props} />
-    }, [props.msg, props.showWordCount, props.showTokenCount, props.showModelName, props.modelName])
+    }, [props.msg, props.showWordCount, props.showTokenCount, props.showModelName, props.modelName, props.speech])
 }
diff --git a/src/SettingWindow.tsx b/src/SettingWindow.tsx
@@ -34,6 +34,7 @@ interface Props {
 export default function SettingWindow(props: Props) {
     const { t } = useTranslation()
     const [settingsEdit, setSettingsEdit] = React.useState<Settings>(props.settings);
+    const [vlist, setVoices] = React.useState<any[]>([]);
     const handleRepliesTokensSliderChange = (event: Event, newValue: number | number[], activeThumb: number) => {
         if (newValue === 8192) {
             setSettingsEdit({ ...settingsEdit, maxTokens: 'inf' });
@@ -98,6 +99,19 @@ export default function SettingWindow(props: Props) {
         setMode(newMode);
     }
 
+    React.useEffect(() => {
+        speechSynthesis.addEventListener('voiceschanged', () => {
+
+            const voices = speechSynthesis.getVoices();
+            voices.forEach((voice) => {
+                console.log(voice.name); // 输出语音的名称
+            })
+            // console.log(voices);
+            setVoices(voices);
+        });
+        setVoices(speechSynthesis.getVoices());
+    },[]);
+
     // @ts-ignore
     // @ts-ignore
     return (
@@ -130,6 +144,22 @@ export default function SettingWindow(props: Props) {
                         ))}
                     </Select>
                 </FormControl>
+                <FormControl fullWidth variant="outlined" margin="dense">
+                    <InputLabel htmlFor="speech-select">{t('speech language')}</InputLabel>
+                    <Select
+                        label="speech"
+                        id="speech-select"
+                        value={settingsEdit.speech}
+                        onChange={(e) => {
+                            setSettingsEdit({ ...settingsEdit, speech: e.target.value });
+                        }}>
+                        {vlist.map((voice) => (
+                            <MenuItem key={voice.voiceURI} value={voice.voiceURI}>
+                                {voice.name} {': '}
+                            </MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
                 <FormControl sx={{ flexDirection: 'row', alignItems: 'center', paddingTop: 1, paddingBottom: 1 }}>
                     <span style={{ marginRight: 10 }}>{t('theme')}</span>
                     <ThemeChangeButton value={settingsEdit.theme} onChange={theme => changeModeWithPreview(theme)} />

diff --git a/src/i18n/locales/en/translation.json b/src/i18n/locales/en/translation.json
@@ -2,6 +2,7 @@
   "settings": "Settings",
   "theme": "Theme",
   "openai api key": "OpenAI API Key",
+  "speech language": "Speech Language",
   "show word count": "Show word count",
   "show estimated token count": "Show estimated token count",
   "proxy": "Proxy",

diff --git a/src/i18n/locales/zh-Hans/translation.json b/src/i18n/locales/zh-Hans/translation.json
@@ -2,6 +2,7 @@
   "settings": "设置",
   "theme": "主题",
   "openai api key": "OpenAI API 密钥",
+  "speech language": "语音语言",
   "show word count": "显示字数统计",
   "show estimated token count": "显示预估 Token 字数统计",
   "proxy": "代理",

diff --git a/src/i18n/locales/zh-Hant/translation.json b/src/i18n/locales/zh-Hant/translation.json
@@ -2,6 +2,7 @@
   "settings": "設定",
   "theme": "主題",
   "openai api key": "OpenAI API 金鑰",
+  "speech language": "言語語言",
   "show word count": "顯示字數",
   "show estimated token count": "顯示預估 Token 數",
   "proxy": "代理",

diff --git a/src/store.ts b/src/store.ts
@@ -11,6 +11,7 @@ import { useTranslation } from "react-i18next";
 export function getDefaultSettings(): Settings {
     return {
         openaiKey: '',
+        speech: '',
         apiHost: 'https://api.openai.com',
         model: "gpt-3.5-turbo",
         maxContextSize: "4000",

diff --git a/src/types.ts b/src/types.ts
@@ -32,6 +32,7 @@ export function createSession(modelName: string, name: string = "Untitled"): Ses
 
 export interface Settings {
     openaiKey: string
+    speech: string
     apiHost: string
     model: string
     maxContextSize: string