Add reading function

src-tauri/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "1.2.1", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2.4", features = ["app-all", "fs-all", "http-all", "shell-open", "updater", "window-all"] }
+tauri = { version = "1.2.4", features = ["app-all", "dialog-save", "fs-all", "http-all", "shell-open", "updater", "window-all"] }
 tauri-plugin-store = { git = "https://github.com/tauri-apps/plugins-workspace", branch = "dev" }
 
 [features]

src-tauri/tauri.conf.json

@@ -13,6 +13,9 @@
     },
     "tauri": {
         "allowlist": {
+            "dialog": {
+                "save": true
+            },
             "shell": {
                 "open": true
             },

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) => {

src/Block.tsx

@@ -25,6 +25,7 @@ import 'github-markdown-css/github-markdown-light.css'
 import mila from 'markdown-it-link-attributes';
 import { useTranslation, getI18n } from 'react-i18next';
 import { Message, OpenAIRoleEnum, OpenAIRoleEnumType } from './types';
+import { Say } from "./Say";
 
 // copy button html content
 // join at markdown-it parsed
@@ -70,13 +71,13 @@ export interface Props {
     showTokenCount: boolean
     showModelName: boolean
     modelName: string
+    speech:string
     setMsg: (msg: Message) => void
     delMsg: () => void
     refreshMsg: () => void
     copyMsg: () => void
     quoteMsg: () => void
 }
-
 function _Block(props: Props) {
     const { t } = useTranslation()
     const { msg, setMsg } = props;
@@ -244,6 +245,7 @@ function _Block(props: Props) {
                                                     </IconButton>
                                                 )
                                         }
+                                        <Say {...props}/>
                                         <IconButton onClick={handleClick} size='large' color='primary'>
                                             <MoreVertIcon />
                                         </IconButton>
@@ -347,5 +349,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])
 }

src/Say.tsx

@@ -0,0 +1,149 @@
+import {useState} from "react";
+import {Message} from "@/src/types";
+import { dialog,fs as taurifs } from '@tauri-apps/api';
+import {Props} from "@/src/Block";
+import {IconButton,Checkbox} from "@mui/material";
+
+import VoiceOverOffIcon from "@mui/icons-material/VoiceOverOff";
+import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
+import {useTranslation} from "react-i18next";
+
+let currentmediaRecorder : MediaRecorder | null = null;
+let currentUtterance: SpeechSynthesisUtterance | null = null;
+let currentIndex: string = "-1";
+const synth = window.speechSynthesis;
+
+function blobPartToArrayBuffer(blobParts:BlobPart[]) {
+    return new Promise ((resolve, reject) => {
+        const fileReader = new FileReader();
+        fileReader.onload = () => {
+            resolve(fileReader.result);
+        };
+        fileReader.onerror = () => {
+            reject(fileReader.error);
+        };
+        fileReader.readAsArrayBuffer(new Blob(blobParts));
+    });
+}
+export function Say(props: Props) {
+    const { t } = useTranslation()
+    const [isSpeaking, setIsSpeaking] = useState(false)
+    const [checked, setChecked] = useState(false);
+    const { msg } = props;
+    const { speech } = props;
+
+    const handleSay = (msg:Message,speech:String|null) => {
+        if (currentUtterance && currentIndex !== "-1") {
+            synth.cancel();
+            if(currentmediaRecorder)currentmediaRecorder.stop();
+            currentmediaRecorder=null;
+            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;
+        if(checked) {
+            audioSave().then(() => {
+                synth.speak(utterance);
+                setIsSpeaking(true);
+                currentUtterance = utterance;
+                currentIndex = msg.id;
+            });
+        }else{
+            synth.speak(utterance);
+            setIsSpeaking(true);
+            currentUtterance = utterance;
+            currentIndex = msg.id;
+        }
+        utterance.onend = () => {
+            if(currentmediaRecorder)
+                currentmediaRecorder.stop();
+            currentmediaRecorder=null;
+            setIsSpeaking(false);
+            currentUtterance = null;
+            currentIndex = "-1";
+        }
+    };
+    const audioSave = async () => {
+        const options = {
+            defaultPath: 'audio.mp3',
+            filters: [{name: 'Audio Files', extensions: ['mp3']}]
+        };
+        let filename: string= options.defaultPath;
+        filename = await dialog.save(options) as string;
+        console.log('Selected file:', filename);
+        const constraints = {audio: true};
+        navigator.mediaDevices.getUserMedia(constraints)
+            .then(stream => {
+                const chunks: BlobPart[] | undefined = [];
+                const mediaRecorder = new MediaRecorder(stream);
+                currentmediaRecorder = mediaRecorder;
+                mediaRecorder.addEventListener('dataavailable', event => {
+                    chunks.push(event.data);
+                });
+
+                mediaRecorder.addEventListener('stop', () => {
+                    stream.getTracks().forEach(track => track.stop());
+                    if(filename!=null) {
+                        blobPartToArrayBuffer(chunks).then((data)=> {
+                            taurifs.writeBinaryFile(filename,
+                                data as ArrayBuffer);
+                        });
+                    }
+                });
+                mediaRecorder.start();
+                setTimeout(() => {
+                    mediaRecorder.stop();
+                    stream.getTracks().forEach(track => track.stop());
+                }, 1000*60*10);
+            })
+            .catch(error => {
+                console.error(error);
+            });
+    };
+
+    return (
+        isSpeaking
+        ?(
+            <IconButton onClick={()=> {
+                handleSay(msg,speech)
+            }} size='large' color='primary'>
+                <VoiceOverOffIcon fontSize='small' />
+            </IconButton>)
+        : (
+            <>
+                <IconButton onClick={()=>{
+                    handleSay(msg,speech)
+                }} size='large' color='primary'>
+                    <RecordVoiceOverIcon fontSize='small' />
+                </IconButton>
+                <Checkbox
+                    checked={checked}
+                    onChange={(event) => {
+                        setChecked(event.target.checked);
+                    }
+                }
+                    title={t('save audio to file') as string}
+                />
+            </>
+        )
+    );
+}

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)} />

src/i18n/locales/en/translation.json

@@ -2,6 +2,8 @@
   "settings": "Settings",
   "theme": "Theme",
   "openai api key": "OpenAI API Key",
+  "speech language": "Speech Language",
+  "save audio to file": "save audio to file",
   "show word count": "Show word count",
   "show estimated token count": "Show estimated token count",
   "proxy": "Proxy",

src/i18n/locales/zh-Hans/translation.json

@@ -2,6 +2,8 @@
   "settings": "设置",
   "theme": "主题",
   "openai api key": "OpenAI API 密钥",
+  "speech language": "语音语言",
+  "save audio to file": "保存声音文件",
   "show word count": "显示字数统计",
   "show estimated token count": "显示预估 Token 字数统计",
   "proxy": "代理",

src/i18n/locales/zh-Hant/translation.json

@@ -2,6 +2,8 @@
   "settings": "設定",
   "theme": "主題",
   "openai api key": "OpenAI API 金鑰",
+  "speech language": "言語語言",
+  "save audio to file": "保存聲音檔案",
   "show word count": "顯示字數",
   "show estimated token count": "顯示預估 Token 數",
   "proxy": "代理",

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",

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