Add echo cancellation toggle in UI and update project dependencies

- Implement `echoCancel` toggle in the settings store and Welcome view.
- Add echo cancellation switch to the submission form.
- Rename project to `VoiceDialogue` in `package.json`.
- Update Pinia, Vue, Vite, and other frontend dependencies.

frontend/package.json

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c21edb05647a0a642fafa82eb17c27c83b4cedcc03cda590eb0e16200a8e3ac4
-size 1218
+oid sha256:f33821c7f31c395ea13fb858f87561c2e01f75eadfb9c07c8036b76ea7875750
+size 1213

frontend/src/stores/config.ts

@@ -1,4 +1,3 @@
-
 import { defineStore } from 'pinia';
 
 
@@ -10,6 +9,7 @@ export const useSettingsStore  = defineStore({
             role: '',
             language: 'zh',
             sider_open: true,
+            echoCancel: true,
         }
     },
     actions: {

frontend/src/views/Welcome/index.vue

@@ -42,10 +42,11 @@ const startAudioChat = async () => {
             headers: {
                 'Content-Type': 'application/json',
             },
-            body: null
+            body: JSON.stringify({
+                enable_echo_cancellation: echoCancel.value
+            })
         });
         if (!response.ok) {
-
             throw new Error(`HTTP error! status: ${response.status}`);
         }
         const data = await response.json();
@@ -70,8 +71,10 @@ const handleCancel = () => {
 const handleSubmit = async () => {
     console.log('Selected Language:', language.value);
     console.log('Selected Role:', role.value);
+    console.log('Echo Cancel:', echoCancel.value);
     settingsStore.$state.language = language.value;
     settingsStore.$state.role = role.value || '';
+    settingsStore.$state.echoCancel = echoCancel.value;
 
     await pushConfig(settingsStore.$state.role);
 };
@@ -134,6 +137,8 @@ const languageOptions = {
 };
 const role = ref<string>(settingsStore.$state.role || '');
 const roles = reactive([])
+const echoCancel = ref<boolean>(settingsStore.$state.echoCancel ?? true);
+
 const radioStyle = reactive({
     display: 'flex',
     height: '48px',
@@ -155,6 +160,10 @@ const fetchTTSRoles = async () => {
             // @ts-ignore
             roles.splice(0, data.length, ...data.models)
             console.log('Fetched TTS Roles:', roles);
+            
+            if (data.current_model_id) {
+                role.value = data.current_model_id;
+            }
         }
     } catch (error) {
         console.error('Error fetching TTS roles:', error);
@@ -169,6 +178,10 @@ const fetchASRLanguages = async () => {
             // @ts-ignore
             languages.splice(0, languages.length, ...data.languages);
             console.log('Fetched ASR Languages:', data.languages);
+            
+            if (data.current_asr_language) {
+                language.value = data.current_asr_language;
+            }
         }
     } catch (error) {
         console.error('Error fetching ASR languages:', error);
@@ -218,6 +231,14 @@ const toggleSider = () => {
                 <a-button key="back" @click="handleCancel">Cancel</a-button>
                 <a-button key="submit" type="primary" :loading="modalLoading" @click="handleSubmit">Submit</a-button>
             </template>
+            <div class="languages">
+                <div class="echo-cancel-item">
+                    <div style="display: flex; justify-content: space-between; align-items: center;">
+                        <p style="margin: 0;">Enable Echo Cancellation:</p>
+                        <a-switch v-model:checked="echoCancel" />
+                    </div>
+                </div>
+            </div>
             <div class="languages">
                 <div class="language-item">
                     <p>Select Language:</p>