Skip to content

fix: show error message for tts model params not correct #1955

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
liuruibin merged 1 commit into from
Dec 31, 2024
Merged

fix: show error message for tts model params not correct #1955

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
8 changes: 7 additions & 1 deletion ui/src/components/ai-chat/component/operation-button/ChatOperationButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@ import { useRoute } from 'vue-router'
import { copyClick } from '@/utils/clipboard'
import applicationApi from '@/api/application'
import { datetimeFormat } from '@/utils/time'
import { MsgError } from '@/utils/message'

const route = useRoute()
const {
Expand Down Expand Up @@ -197,7 +198,12 @@ const playAnswerText = (text: string) => {
}
applicationApi
.postTextToSpeech((props.applicationId as string) || (id as string), { text: text }, loading)
.then((res: any) => {
.then(async (res: any) => {
if (res.type === 'application/json') {
const text = await res.text()
MsgError(text)
return
}
// 假设我们有一个 MP3 文件的字节数组
// 创建 Blob 对象
const blob = new Blob([res], { type: 'audio/mp3' })
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 looks generally clean and well-structured for its functionalities. However, there are a few improvements and optimizations that can be suggested:

  1. Type Casting: Ensure type casting is used consistently throughout the code to avoid runtime errors.

    const id = prop.id as unknown; // Use as unknown if `prop` is not guaranteed to have an `id` property

  2. Async/Await Handling: For asynchronous operations like file fetching, it's better to explicitly handle promises and avoid relying on chaining.

    // Assuming applicationApi.postTextToSpeech returns a promise
async function playAnswerText(text: string) {
  try {
    const response = await applicationApi.postMessageToSpeech((props.applicationId as string) || (id as string), { text });
    
    if (response.status === 400 && response.headers['content-type'] !== 'application/json') {
      MsgError('Invalid request.');
      return;
    }

    // Process the response depending on its content type
    if (response.data.fileUrl) {
      // Handle file URL
    } else if (response.data.mp3Data) {
      // Convert mp3 data to audio element
    }
  } catch (error) {
    console.error('Error during speech synthesis:', error);
    msgError(error.message);
  }
}

  3. Comments and Documentation: Adding comments and documentation can help maintainability of the codebase.

    /**
 * Plays the given answer text using the speech synthesizer API.
 * Handles JSON responses differently from other types of responses.
 *
 * @param text The text to be synthesized.
 */
async function playAnswerText(text: string) {
  // Your implementation here...
}

  4. Error Logging: Consider adding logging mechanisms to record errors effectively, especially when dealing with network requests or unexpected behavior.

  5. Input Validation: Validate inputs before making API calls to prevent bugs caused by invalid data.

By applying these recommendations, the code will become more robust, readable, and maintainable.

Expand Down
8 changes: 7 additions & 1 deletion ui/src/components/ai-chat/component/operation-button/LogOperationButton.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ import EditMarkDialog from '@/views/log/component/EditMarkDialog.vue'
import { datetimeFormat } from '@/utils/time'
import applicationApi from '@/api/application'
import { useRoute } from 'vue-router'
import { MsgError } from '@/utils/message'

const route = useRoute()
const {
Expand Down Expand Up @@ -177,7 +178,12 @@ const playAnswerText = (text: string) => {
}
applicationApi
.postTextToSpeech(id || (props.applicationId as string), { text: text }, loading)
.then((res: any) => {
.then(async (res: any) => {
if (res.type === 'application/json') {
const text = await res.text()
MsgError(text)
return
}
// 假设我们有一个 MP3 文件的字节数组
// 创建 Blob 对象
const blob = new Blob([res], { type: 'audio/mp3' })
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 is one main issue in the provided code snippet:

  1. Potential Memory Leak with MsgError: If a network request fails or returns an unexpected response that still contains HTML/XML content, the MsgError function might attempt to parse it, leading to unnecessary memory allocations.

  2. Optimization: Since you are using await res.text() when the response type is JSON, consider checking the contentType header of the response before attempting to read body content as text. This can prevent unnecessary conversions and improve performance.

  3. Code Structure Review:

    const playAnswerText = (text: string) => {
  if (!response || !response.ok) {
    console.error('Network Error:', error);
    return;
  }
  
  switch (response.headers.get('Content-Type')) {
    case 'application/json':
      const jsonData = await response.json();
      displayJsonData(jsonData); // Your custom handling for JSON data
      break;
    default:
      downloadFileFromResponse(response);
      break;
  }
}

### Suggested Changes:
- **Avoid Parsing Non-JSON Responses:** Before converting non-JSON responses to strings (`async res.text()`) check the response's Content-Type Header.
 
 **Updated Code Snippet:**

 ```typescript
 playAnswerText(text: string) {
   try {
     applicationApi.postTextToSpeech(
       id || props.applicationId,
       { text },
       false
     )
       .then(async (res) => {
         switch (res.status) {
           case 200:
             if (!res.headers.has('content-type') || /json$/.test(res.headers get('content-type'))) {
               const responseData = await res.json(); // Attempt to parse json even without specific MIME types.
                 ... handle json response ...
             } else {
                 ... process other content-types if needed...
             }
             // Continue normal execution after successful parsing
             ......
             
            // Downloading file from response if necessary.
            const url = window.URL.createObjectURL(new Blob([res]));
            const link = document.createElement("a");
            link.style.display = "none";
            link.href = url;
            link.download = "downloadedFile.mp3"; // Specify appropriate filename here.
            
            document.body.appendChild(link);
            link.click();

            window.URL.revokeObjectURL(url);

             break;

           case 4XX:
           case 5XX:
             const message = await res.text();
              MsgError(message);
             break;

           default:
             break; // Other status codes that you may need to handle appropriately.
         }
      
         
       })
       .catch(error => {
         console.error('Failed POST', error.message);
          MsgError(`Error ${error.message}`);
       });
     
       
   } catch (parseErr) {
     console.log(parseErr);
      MsgError(`Parse Error: ${parseErr}`);

Summary:

The suggested changes address the memory leak risk by checking and dealing with non-json responses carefully, preventing unnecessary attempts at parsing them into text. Additionally, proper logging and clear separation between error states are maintained throughout the processing flow.

Expand Down
Loading