Skip to content

fix: tts node and stt node add warning #1953

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
wxg0103 merged 1 commit into from
Dec 31, 2024
Merged

fix: tts node and stt node add warning #1953

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 6 additions & 1 deletion ui/src/workflow/nodes/speech-to-text-node/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ import { app } from '@/main'
import useStore from '@/stores'
import NodeCascader from '@/workflow/common/NodeCascader.vue'
import type { FormInstance } from 'element-plus'

const { model } = useStore()

const {
Expand All @@ -156,8 +157,12 @@ const modelOptions = ref<any>(null)
const providerOptions = ref<Array<Provider>>([])

const aiChatNodeFormRef = ref<FormInstance>()
const nodeCascaderRef = ref()
const validate = () => {
return aiChatNodeFormRef.value?.validate().catch((err) => {
return Promise.all([
nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
aiChatNodeFormRef.value?.validate()
]).catch((err: any) => {
return Promise.reject({ node: props.nodeModel, errMessage: err })
})
}
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Dec 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The provided code is mostly correct, but there are a few improvements that can be made:

  1. Avoid Using Await with Promise.all: The use of await inside the catch block will prevent further execution after an error. Replace it with .then() to continue processing.

  2. Ensure Cascader Validations: Ensure that cascader validations handle cases where the reference might not exist (as it does now).

Here's the revised version of the code:

@@ -145,6 +145,7 @@ import { app } from '@/main'
 import useStore from '@/stores'
 import NodeCascader from '@/workflow/common/NodeCascader.vue'
 import type { FormInstance } from 'element-plus'

+import { onMounted, ref } from 'vue';
+
 const { model } = useStore();

 // Assuming props.nodeModel exists
 const modelOptions = ref<any[]>([]);
 const providerOptions = ref<Array<Provider>>([]);

 const aiChatNodeFormRef = ref<FormInstance>();
+const nodeCascaderRef = ref(null); // Initialize as null

// Assume this function initializes the form and cascade components
function initializeFormAndCascade() {
  onMounted(() => {
    if (nodeCascaderRef.value) {
      nodeCascaderRef.value.resetFields();
    }
    
    if (aiChatNodeFormRef.value) {
      aiChatNodeFormRef.value.clearValidate()
    }
  });
}

const validate = () => {
  return new Promise((resolve) => {
    Promise.all([
        nodeCascaderRef.value ? nodeCascaderRef.value.validate() : "",
        aiChatNodeFormRef.value?.validate(e => resolve(!e))
    ])
    .catch(err => reject({ node: props.nodeModel, errMessage: err }))
  })
}

Key Changes:

  • Await Removal: Replaced async/await syntax with traditional promises using new Promise.
  • Null Initialization: Initialized nodeCascaderRef as null. This ensures we don't rely on optional chaining (?) unnecessarily and avoids potential runtime errors.
  • Initialization Hook: Added a setup function called initializeFormAndCascade, which uses Vue's onMounted hook to ensure that any necessary initialization logic runs once the component has mounted.

This should address most performance concerns and improve stability.

Expand Down
6 changes: 5 additions & 1 deletion ui/src/workflow/nodes/text-to-speech-node/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,8 +172,12 @@ const modelOptions = ref<any>(null)
const providerOptions = ref<Array<Provider>>([])

const aiChatNodeFormRef = ref<FormInstance>()
const nodeCascaderRef = ref()
const validate = () => {
return aiChatNodeFormRef.value?.validate().catch((err) => {
return Promise.all([
nodeCascaderRef.value ? nodeCascaderRef.value.validate() : Promise.resolve(''),
aiChatNodeFormRef.value?.validate()
]).catch((err: any) => {
return Promise.reject({ node: props.nodeModel, errMessage: err })
})
}
Copy link
Contributor Author

@shaohuzhang1 shaohuzhang1 Dec 31, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There are no critical errors in the provided code. However, I suggest adding error handling to ensure that the nodeCascader validation does not prevent the form from being validated at all. Here’s an optimized version:

const modelOptions = ref<any>(null);
const providerOptions = ref<Array<Provider>>([]);

const aiChatNodeFormRef = ref<FormInstance>();
const nodeCascaderRef = ref();

function validate(): Promise<{ message?: string }> {
  return Promise.race([
    (async () => await (nodeCascaderRef.value && nodeCascaderRef.value.validate()))(),
    (async () => await (aiChatNodeFormRef.value && aiChatNodeFormRef.value.validate()))()
  ])
  .catch((err) => ({ message: err }));
}

Key Changes:

  1. Error Handling: Used .catch((err) => ({ message: err })) to handle any errors and provide a consistent response format.
  2. Promise.all with Race Condition: Utilized Promise.race() to ensure that if either validator fails, it is caught quickly without impacting the other.
  3. Async/Await Simplification: Slightly simplified the promise chaining for better readability.

This approach ensures that both validators run concurrently, but stops execution on the first successful result or the first error encountered.

Expand Down
Loading