Google Speech-Text с React - PullRequest
Новая
       20

Google Speech-Text с React

2 голосов
/ 30 января 2020

Я работаю над простым текстовым веб-приложением, у меня уже есть работающий серверный код nodejs и простая страница реакции, но я понятия не имею, как их склеить, я пытался реализуйте различные странные вещи, и либо приложение реагирования не получает никаких данных в ответ, либо возникает ошибка 500.

Я хотел бы реализовать функцию stop () для рекордера после получения транскрипции от Google, так как настроен на прослушивание только коротких команд, но единственным решением, которое я мог реализовать, была функция setTimeout, которая не совсем то, что я хотел.

РЕДАКТИРОВАТЬ: я решил проблему с остановкой рекордера после получения команды и это работает довольно хорошо, однако, любые улучшения приветствуются. Решение было довольно простым, я просто изменил порог с нуля до 0,5, thresholdEnd: 0.5. Все еще не решен интерфейс для этого express приложения.

РЕДАКТИРОВАТЬ 2: Забавно, я случайно обнаружил этот материал , и это именно то, что я хотел ... Так много усилий, просто чтобы найти это удивительное и очень простое решение, особенно если вы будете следовать этой средней статье .

Кто-нибудь может мне помочь, пожалуйста?

Код на стороне сервера: 

'use strict';

const express = require('express');
const app = express();
const port = 3002;

const cors = require('cors')

// Node-Record-lpcm16
const recorder = require('node-record-lpcm16');

// Imports the Google Cloud client library
const speech = require('@google-cloud/speech');

function speechFunction() {
    const encoding = 'LINEAR16';
    const sampleRateHertz = 16000;
    const languageCode = 'en-US';
    const command_and_search = 'command_and_search';
    const keywords = ['turn on', 'turn off', 'turn it on', 'turn it off'];

    const request = {
        config: {
            encoding: encoding,
            sampleRateHertz: sampleRateHertz,
            languageCode: languageCode,
            model: command_and_search,
            speech_contexts: keywords
        },
        singleUtterance: true,
        interimResults: false // If you want interim results, set this to true
    };


    // Creates a client
    const client = new speech.SpeechClient();

    // Create a recognize stream
    const recognizeStream = client
    .streamingRecognize(request)
    .on('error', console.error)
    .on('data', data =>
        // process.stdout.write(
        console.log(    
        data.results[0] && data.results[0].alternatives[0]
            ? `Transcription: ${data.results[0].alternatives[0].transcript}\n`
            : `\n\nReached transcription time limit, press Ctrl+C\n`
        )
    );

    // Start recording and send the microphone input to the Speech API
    recorder
    .record({
        sampleRateHertz: sampleRateHertz,
        threshold: 0, //silence threshold
        recordProgram: 'rec', // Try also "arecord" or "sox"
        silence: '5.0', //seconds of silence before ending
        endOnSilence: true,
        thresholdEnd: 0.5
    })
    .stream()
    .on('error', console.error)
    .pipe(recognizeStream);

    console.log('Listening, press Ctrl+C to stop.');
    // [END micStreamRecognize]
}

app.use(cors());

app.use('/api/speech-to-text/',function(req, res){
    speechFunction(function(err, result){
        if (err) {
            console.log('Error retrieving transcription: ', err);
            res.status(500).send('Error 500');
            return;
        }
        res.send(result);
    })
});

// app.use('/api/speech-to-text/', function(req, res) {
//     res.speechFunction();
// });

// app.get('/speech', (req, res) => res.speechFunction);

app.listen(port, () => {
    console.log(`Listening on port: ${port}, at http://localhost:${port}/`);
});

Реакция 

import React, { Component } from 'react';
import './App.css';

class App extends Component {

  constructor() {
    super()
    this.state = {
    }
  }

  onListenClick() {
    fetch('http://localhost:3002/api/speech-to-text/')
      .then(function(response) {
        console.log(response);
        this.setState({text: response});
      })
      .catch(function(error) {
        console.log(error);
      });
  }

  render() {
    return (
      <div className="App">
        <button onClick={this.onListenClick.bind(this)}>Start</button>
        <div style={{fontSize: '40px'}}>{this.state.text}</div>
      </div>
    );
  }
}

export default App;

1 Ответ

0 голосов
/ 05 мая 2020

Замените код onListenClick () следующим 

async onListenClick(){
const response= await axios.get('http://localhost:3002/api/speech-to-text/')
console.log(response)
this.setState(text:response.data)
}

Я пытаюсь выяснить, как остановить API Google, нажав кнопку. Но приведенный выше код принесет данные о реакции

...