Ошибка при использовании "pyttsx3" с "react-speech-recognition"

Error in text-to-speech: run loop already started

Backend Code

Frontend Code

import React, { useState } from 'react';
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition';
import 'regenerator-runtime/runtime';


const VoiceBot = () => {

  const [userQuestion,setUserQuestion] = useState('')
  const [response, setResponse] = useState('');
  const { transcript, listening, resetTranscript } = useSpeechRecognition();

  if (!SpeechRecognition.browserSupportsSpeechRecognition()) {
    return <div>Your browser does not support speech recognition.</div>;
  }

  const startListening = () => SpeechRecognition.startListening({ continuous: true });
  const stopListening = () => {
    SpeechRecognition.stopListening();
    sendTranscript(transcript);
    resetTranscript();
  };

  const sendTranscript = async (text) => {
    try {
      const response = await fetch('http://localhost:8000/api/voice/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ query: text }),
        
      });
     
      const data = await response.json();
      
      setUserQuestion(data.query);
      setResponse(data.response);
     
    } catch (error) {
      console.error('Error:', error);
    }
  };

  return (
    <div className="container mx-auto p-4">
      <h2 className="text-2xl font-bold mb-4">Voice Bot</h2>
      <p className="mb-4">Press the buttons to start and stop recording, and send the transcript to the backend.</p>

      <div className="mb-4">
        <button
          className="bg-green-500 text-white px-4 py-2 rounded mr-2"
          onClick={startListening}
          disabled={listening}
        >
          Start Recording
        </button>
        <button
          className="bg-red-500 text-white px-4 py-2 rounded"
          onClick={stopListening}
          disabled={!listening}
        >
          Stop Recording
        </button>
      </div>

      <div className="transcript p-4 border border-gray-300 rounded mb-4">
        <h3 className="text-xl font-bold">Transcript</h3>
        <p>{transcript}</p>
      </div>


      <div className="response p-4 border border-gray-300 rounded">
        <h3 className="text-xl font-bold">User: </h3>
        <p>{userQuestion}</p>
        <h3 className="text-xl font-bold">Server:</h3>
        <p>{response}</p>
      </div>
    </div>
  );
};

export default VoiceBot;

Я пытаюсь разработать пользовательский голосовой помощник с помощью React & DJango. В качестве векторной БД используется FAISS. Оба фронтенда & бэкенда работают отлично. frontend. Когда я нажимаю на кнопку "остановить запись", голосовой вывод отправляется на бэкенд. Когда я ввожу правильный запрос, генерируется правильный результат, но голосовая часть не работает, как я ожидал.

Вернуться на верх