fix: STT node

[shaohuzhang1]

fix: STT node --bug=1062113 --user=张展玮 【应用】语音转文本节点，没有支持模型参数设置 https://www.tapd.cn/62980211/s/1778991

[f2c-ci-robot]

Adding the "do-not-merge/release-note-label-needed" label because no release-note block was detected, please follow our release note process to remove it.

Details

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes-sigs/prow repository.

[f2c-ci-robot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:

The full list of commands accepted by this bot can be found here.

Details

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[shaohuzhang1]

This code appears to be mostly syntactically correct, but it contains several areas that could benefit from improvements. Here are some suggestions:

1. Unused Imports:

   • MsgSuccess and t from '@/utils/message', along with '@/locales' should only be imported if used within their respective modules.

2. Unnecessary Variable Declaration:

   • The line {} seems unnecessary and can likely be removed.

3. Duplicate Route Parameter Usage:

   • There's a duplicate usage of route parameters in the comment: ${}) as any inside the onMounted hook. It might be better to use the new variable id directly unless there's a specific reason for this duplication.

4. Function Scope:

   • The function getSelectModel is defined after its usage. While not technically incorrect, it would generally be cleaner to place it at the beginning of functions where variables are declared before being used.

5. Code Readability and Structure:

   • Ensure proper indentation and spacing for readability. Adjust the line lengths to fit comfortably in an editor without wrapping them excessively.

Here is a revised version keeping these points in mind:

@@ -28,6 +28,15 @@
                   }}<span class="color-danger">*</span></span
                 >
               </div>
+              <el-button
+                type="primary"
+                link
+                @click="openSTTParamSettingDialog"
+                :disabled="!form_data.stt_model_id"
+                class="mr-4"
+              >
+                <AppIcon iconName="app-setting"></AppIcon>
+              </el-button>
             </div>
           </template>
           <ModelSelect
@@ -91,6 +100,7 @@
         </el-form-item>
       </el-form>
     </el-card>
+    <STTModeParamSettingDialog ref="STTModeParamSettingDialogRef" @refresh="refreshSTTForm" />
   </NodeContainer>
 </template>

<script lang="ts">
import {
  nextTick,
  watchEffect,
  defineComponent,
  PropType,
  reactive,
} from "vue";
import { cloneDeep } from 'lodash';
// ... other imports
import ModelSelect from './components/ModelSelect.vue';

export default defineComponent({
  components: {
    // Components
  },
  props: {
    nodeModel: Object as PropType<Node>,
  },
 setup(props) {
    const apiType = computed(() => {
      // ...
    });

    const route = useRouter();
    const id = computed((): string => route.params.id);

    // Refs
    const aiChatNodeFormRef = ref<FormElement>();
    const nodeCascaderRef = ref();
    const modelOptions = ref([]);
    
    // Reactive state
    const form = reactive({
      stt_model_id: "",
      is_result: true,
      audio_list: [],
      model_params_setting: {},
    });
    const form_data = computed(() => ({
      // Compute properties
    }));

    // Methods

    const openSTTParamSettingDialog = () => {
      // ...
    };

    const refreshSTTTForm = (data: any) => {
      // ...
    };

    // Fetching and setting initial data
    async function fetchData() {
      try {
        applicationInfo.data.data.config.is_voice_input_enabled &&
          loadSharedApi(apiType.value).listModels().then((res) => {
            console.log(res);
            modelOptions.value = res.models;
          });

        await nextTick(async () => {
          loadSharedApi(apiType.value).getModel(id.value).then(response => {
            let tmpData = response;

            if (
              props.nodeModel.settings?.voice_settings &&
              props.nodeModel.settings.voice_settings.stt_mode_param_setting && 
              !response.model_params_setting && 
              !!props.nodeModel.settings.voice_settings.stt_mode_param_setting.id
            ) {
              tmpData.model_params_setting =
                props.nodeModel.settings.voice_settings.stt_mode_param_setting;
              
              set(form, ["audio_list", "0"], "");
            }

            // Apply changes to the main form state using lodash deep copy
            applyChanges(tmpData);
          }, error => {
            console.error(`There was an error while trying to fetch models ${error}`);
          });
        }) 
      } catch(error) { console.error("Error fetching application configuration:", error); }
    }

    watchEffect(() => {
      if (!application.config.is_voice_input_enabled || props.nodeModel.disabled) return;

      fetchData();
    });

    const applyChanges = (tmpData: Config) => {
      // ...
    }

    return {
      applyChanges,
      aiChatNodeFormRef,
      getSelectModel,
      fetchModels,
      nodeCascaderRef,
      refreshSTTForm,
    };
  },
});
</script>

These adjustments improve code organization and consistency, ensuring readability and maintainability.

[shaohuzhang1]

The provided code is mostly well-structured, but here are a few improvements to address some potential issues:

1. Variable Naming Consistency: Ensure consistent naming conventions for variables throughout the function. For example, const res in one place should be renamed to match elsewhere.

2. Type Annotations: While TypeScript does not change variable type assignments based on value, adding explicit types where appropriate can help catch errors early.

3. Code Readability: Consider breaking down long lines of code into multiple lines with proper indentation for better readability.

4. Functionality Verification: Ensure that open method correctly processes the response and updates the UI accordingly.

Here's an improved version of the code incorporating these suggestions:

@@ -71,20 +71,28 @@
     .getModelParamsForm(model_id, loading)
     .then((ok: any) => {
       model_form_field.value = ok.data;
      
       const formattedData = ok.data.map(item =>
         ({
           [item.field]: item.show_default_value !== false ? item.default_value : undefined,
         })
       ).reduce((prev, curr) => ({ ...prev, ...curr }), {});

       if (model_setting_data) {
         Object.keys(model_setting_data).forEach(key => {
           if (!(key in formattedData)) {
             delete model_setting_data[key];
           }
         });
       }

       let updatedModelSettingData = { ...formattedData, ...model_setting_data };

       // Render dynamic form
       dynamicsFormRef.value?.render(model_form_field.value, updatedModelSettingData);
     });

Detailed Changes Made:

1. Renaming Variables:

   • Change res to formattedData consistently.

2. Added Comment Breaks to enhance readability.

These changes make the code more readable and maintainable while keeping it functional.