IT/AI

Dialogflow - 9. React 클라이언트

루벤초이 2021. 4. 22. 20:40

Dialogflow 웹앱 시리즈입니다.

★Sample Code

지난 시간에는 React App을 Dialogflow와 바로 연결할 수 없어서 Node App을 구현했습니다.

오늘은 마지막으로 React App과 Node App을 음성으로 연동해 보겠습니다.

전체 시스템 구조

 

React App 생성

먼저 React 라이브러리 프로젝트를 만들고 브라우저의 마이크 입력을 받습니다.

필요한 노드 패키지를 설치(npm install)합니다.

  • socket.io-client: Node App 웹소켓에 연결하기 위한 패키지
  • socket.io-stream: 웹소켓 스트리밍을 위한 패키지
  • recordrtc: 마이크 입력을 오디오 스트리밍으로 뽑아주는 패키지
  • reactstrap/bootstrap: 세팅 화면 GUI 패키지

example/App.js

import React from 'react'
import DialogComponent from 'react-app'

const App = () => {
  return <DialogComponent showDetail={true} />
}

export default App

example$ npm install && npm start 실행하면 라이브러리를 호출하겠죠.

src/index.js

import React, { Fragment } from 'react'
import DialogflowHandler from './core/DialogflowHandler.js'
import 'bootstrap/dist/css/bootstrap.css';

const DialogComponent = (props) => {
  const [stream, setStream] = React.useState(undefined);

  React.useEffect(() => {
    if (props.stream) {
      setStream(stream);
    } else {
      const createStream = async () => {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
        setStream(stream);
      }
      createStream();
    }
  }, [])

  return (<>
    {stream ?
      <DialogflowHandler
        stream={stream}
        showDetail={props.showDetail}
      />
      :
      <p>waiting for microphone...</p>
    }
  </>
  )
}

export default DialogComponent;

마이크 입력 stream을 받아 DialogflowHandler에게 넘겨줍니다. 간혹 앱(example)에서 스트림을 넘겨주는 경우도 있을 것이므로 props로 스트림을 받지 않은 경우에만 입력을 받습니다. 이때, createStream을 새로 정의한 이유는 async/await를 사용하기 위함입니다.

src/DialogflowHandler.js

import io from 'socket.io-client';
import RecordRTC from 'recordrtc';
import SocketStream from 'socket.io-stream';
import React, { Fragment } from 'react';
import { Setting, LoadPref, StatusLog } from '../util/Util.js';
import { Button } from 'reactstrap';
import Status from './Status.js';


const DEFAULT_PORT = 8001;
const DEFAULT_HOSTNAME = '127.0.0.1';

export default class DialogflowHandler extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            status: Status.INITIALIZING,
            dfAddress: LoadPref('dfAddress', DEFAULT_HOSTNAME),
            dfPort: LoadPref('dfPort', DEFAULT_PORT),
            reload: false,
            log: undefined
        }
    }

    componentDidMount() {
        this.connect();
    }

    connect = () => {
        let url = "http://" + this.state.dfAddress + ':' + this.state.dfPort;
        console.log("connect: url=" + url);

        this.socket = io.connect(url, { 'reconnection': true });
        this.socket.on('connect', () => this.setState({ status: Status.IDLE }));
        this.socket.on('disconnect', () => this.setState({ status: Status.UNAVAILABLE }));
        this.socket.on('connect_error', (err) => this.setState({ status: Status.UNAVAILABLE }));
        this.socket.on('results', this.onDialogflowResult);
    }

    startDialogflowByAudioStream = () => {
        if (this.state.status !== Status.IDLE) {
            this.onDialogflowResult(undefined, "Dialogflow is busy - " + this.state.status);
            return;
        }

        this.setState({ status: Status.LISTENING });
        this.recorder = RecordRTC(this.props.stream, {
            type: 'audio',
            mimeType: 'audio/webm',
            sampleRate: 44100,
            desiredSampRate: 16000,
            recorderType: RecordRTC.StereoAudioRecorder,
            numberOfAudioChannels: 1,
            disableLogs: true,
            timeSlice: 3000,
            ondataavailable: b => {
                console.log("onDataAvailable...");
                let stream = SocketStream.createStream();
                SocketStream(this.socket).emit('stream', stream, {
                    name: 'stream.wav',
                    size: b.size
                }, this.props.includeTTSAudioData);
                SocketStream.createBlobReadStream(b).pipe(stream);
            }
        })
        this.recorder.startRecording();
    }

    onDialogflowResult = (response, err = undefined) => {
        console.log("onDialogflowResult():", response, err);

        try {
            this.recorder.stopRecording();
        } catch (err) {
            // this.setState({ log: "Error stop recording" });
        }

        this.setState({ status: Status.IDLE });

        try {
            console.log("Intent: ", response.queryResult.intent);
            if (response.queryResult.intent === null) {
                this.setState({ log: 'response is null', status: Status.IDLE })
                return;
            }

            let log = "Q: " + response.queryResult.queryText + "  A:"
                + (response.queryResult.fulfillmentText !== '' ? response.queryResult.fulfillmentText :
                    "[Intent]" + response.queryResult.intent.displayName);
            console.log(log);
            this.setState({ log: log });
        } catch (err) {
            console.log(err);
            this.setState({ log: "Error while parsing response" });
        }
    };

    render() {
        return (<>
            {this.props.showDetail &&
                <>
                    <StatusLog status={this.state.status} log={this.state.log} />
                    <Button color="primary" onClick={() => this.startDialogflowByAudioStream()} style={{ margin: "1em" }}>
                        Start Dialogflow
                    </Button>
                    {this.state.reload && <Button color="danger" onClick={() => window.location.reload()}>Reload required</Button>}
                </>
            }
            <div style={{ width: '90%', margin: 'auto' }}>
                <Setting
                    title={'Google Dialogflow'}
                    subtitle={(((this.state.status !== Status.UNAVAILABLE && this.state.status !== Status.INITIALIZING)
                        ? 'connected to ' : 'disconnected from ') + this.state.dfAddress + ':' + this.state.dfPort)}
                    items={[
                        { key: 'dfAddress', title: 'DF Host', defVal: this.state.dfAddress, callback: () => this.setState({ reload: true }) },
                        { key: 'dfPort', title: 'DF Port', defVal: this.state.dfPort, callback: () => this.setState({ reload: true }) }
                    ]}
                />
                <div style={{ margin: '1em' }}>
                    <iframe
                        allow="microphone;"
                        width="350"
                        height="430"
                        src="https://console.dialogflow.com/api-client/demo/embedded/ee3a2cad-4346-436e-aeb0-e19379dd2966">
                    </iframe>
                </div>
            </div>
        </>);
    }
}

컴포넌트가 시작되면 웹소켓(socket.io-client) 연결을 시도합니다. 웹소켓 주소와 포트는 설정 화면으로 localStorage에 저장하도록 구현했습니다. Start Dialogflow 버튼을 누르면 RecordRTC를 통해 마이크 입력을 스트림으로 내보내고(ondataavailable) 이를 SocketStream으로 Node App 웹소켓으로 스트리밍합니다. Node App에 수신부를 구현해야겠죠. 아래 섹션에서 설명합니다.

 

결과를 받으면 onDialogflowResult에서 결과를 출력합니다. 코드는 길어도 구성은 간단하죠?

결과 화면

결과 화면에 덤으로 지난 시간에 봤던 Dialogflow Integrations Web Demo <iframe>도 넣었습니다.

화면 구성 GUI 컴포넌트들은 util/Util.js로 분리해뒀으니 관심있으신 분은 소스를 참고하세요.

 

자, 그런데 이대로 실행하면 웹소켓 서버가 없어서 연결이 실패합니다.

이제 Node App에 웹소켓 수신부를 구현해 봅시다.

 

Tip>

여담이지만, 이렇게 React/Node 앱을 여러 개 작업할 때는 Visual Studio Code의 워크스페이스 기능을 사용하면 편리합니다.

Visual Studio Code 워크스페이스

우분투에서 작업한다면 Terminator도 추천합니다. 여러개 터미널을 띄어야 할 때 아주 유용합니다.

 

Node App 웹 소켓

먼저 엔트리 포인트를 수정해봅시다. 지난 번에 텍스트 기반의 테스트 코드를 구현했는데, 앞으로 변경점이 많을 수 있으니 확장성을 고려해서 구조를 잡습니다.

코드 확장을 고려한 Node App 구조

컴포넌트별로 소스들을 src/ 폴더 안에 두고 command line으로 분기하도록 index.js에 yargs를 사용했습니다. 앞으로는 src/에 컴포넌트가 추가되면, .command를 추가하면 되겠죠. 단, GOOGLE_APPLICATION_CREDENTIALS를 임시로 export하고 싶은 경우에는 package.json에 분기 코드를 함께 기재합니다.

 "scripts": {
    "start": "GOOGLE_APPLICATION_CREDENTIALS='./rubenchoi-gcp.json' node index.js",
    "test": "GOOGLE_APPLICATION_CREDENTIALS='./rubenchoi-gcp.json' node index.js test"
  },

src/DialogflowNodeApp.js

'use strict';

const projectID = 'newagent-tdyh'
const encoding = 'LINEAR16';
const sampleRateHertz = 16000;
const languageCode = 'ko-KR';
const singleUtterance = true;
const interimResults = true;
const OUTPUT_AUDIO_ENCODING = 'OUTPUT_AUDIO_ENCODING_LINEAR_16';

const express = require('express');
const app = express();
const path = require('path');
const util = require('util');
const uuid = require('uuid');
const { struct } = require('pb-util');

const dflow = require('dialogflow').v2beta1;

const { Transform, pipeline } = require('stream');
const socketIoStream = require('socket.io-stream');
const pump = util.promisify(pipeline);


const initServer = (port) => {
    let server = require('http').createServer(app);
    const io = require('socket.io')(server, {
        cors: {
            origin: '*',
        }
    });
    server.listen(port, () => console.log("server waiting for " + port));
    io.on('connection', (client) => start(client));
}

const start = (client) => {
    socketIoStream(client).on('stream', (stream, data, includeAudioData) => {
        const filename = path.basename(data.name);
        stream.pipe(fs.createWriteStream(filename));
        detectIntentStream(stream, (results) => {
            client.emit('results', results);
        }, includeAudioData)
    });
}

const detectIntentStream = async (audio, callback, includeAudioData) => {
    console.log("Detecting Intent Stream : start " + (includeAudioData && "w/audio"));
    const sessionClient = new dflow.SessionsClient();
    const stream = sessionClient.streamingDetectIntent()
        .on('data', (data) => {
            if (!data.recognitionResult) {
                console.log('Intent detected!');
                callback(data);
            }
        })
        .on('error', (err) => console.log(err))
        .on('end', () => console.log("===> ended"));

    const request = {
        session: sessionClient.sessionPath(projectID, uuid.v4()),
        queryInput: {
            audioConfig: {
                sampleRateHertz: sampleRateHertz,
                encoding: encoding,
                languageCode: languageCode
            },
            singleUtterance: singleUtterance
        },
        outputAudioConfig: includeAudioData ? { audioEncoding: OUTPUT_AUDIO_ENCODING, } : undefined
    }

    stream.write(request);
    await pump(audio, new Transform({
        objectMode: true,
        transform: (obj, _, next) => {
            next(null, {
                inputAudio: obj,
                outputAudioConfig: { audioEncoding: 'OUTPUT_AUDIO_ENCODING_LINEAR_16' }
            });
        }
    }), stream);
}

class DialogflowNodeApp {
    constructor(port) {
        initServer(port);
    }
}

module.exports = (port) => {
    return new DialogflowNodeApp(port);
}

코드는 길어도 내용은 간단합니다. 이 컴포넌트가 호출되면 initServer()에서 8001 포트에 웹소켓 연결을 기다립니다. React 앱에서 연결이 되면 start(client)를 통해 client를 스트림으로 감싸고 파이프라인으로 Dialogflow API인 detectIntentStream()에 스트림을 넘겨줍니다.

 

요청 파라미터는 지난번 텍스트 기반과 동일하고요, 다만 outputAudioConfig에 audioEncoding 옵션을 주면 응답에 TTS 오디오 정보가 함께 옵니다. 즉, 앱에서 Dialogflow TTS 응답을 재생할 수 있습니다. (물론 TTS 생성에 필요한 시간이 더 걸리겠죠.)

 

실행

준비 완료! 실행해 봅시다. 먼저 Node App을 실행합니다. nodejs-app$ npm start

Node App 실행 화면

React App을 실행하면서 로그 확인을 위해 개발자 모드(F12)를 켭시다.   

 

react-app/examples$ npm start

Start Dialogflow 버튼을 누르고 마이크에 "오늘 날씨 어때?"를 외치면,

React App 결과 화면

와우, 음성으로 Dialogflow와 대화했군요!

이제 당신은 당신만의 챗봇을 만들고 대화를 해봤습니다.

 

마치며

지금까지 Dialogflow 개념을 이해하고 실습을 통해 웹앱/챗봇에서 음성/텍스트로 Dialogflow API로 대화를 진행하는 부분을 학습했습니다. 또한 Dialogflow Fulfillment와 Webhook을 통해 외부 서버와 커뮤니케이션할 수 있는 포괄적인 시스템을 만들어봤지요.

여기까지 이해했다면 Dialogflow 활용 시스템을 설계/개발할 준비가 됐다고 볼 수 있겠습니다.

 

앞으로 더 살펴봐야 할 것은 첫째, Dialogflow 인텐트나 컨텍스트 등을 강화하고 Knowledge 등을 활용해서 엔진을 더욱 튼튼히 하는 부분과 둘째, 앱에서 Dialogflow의 응답을 분석하고 다음 액션을 취하는 등의 fulfillment 프로그래밍 영역이 있습니다. 또한 TTS와 연동하는 부분도 필요하겠죠.

 

전자는 도메인에 따라 디자인이 천차만별일 수 있으므로 함께 살펴보기 애매한 부분이지만,

후자는 웹앱 사용자 관점에서 대화의 성능을 높일 수 있는 부분이므로 새로운 튜토리얼로 다루도록 하겠습니다.

 

Notice

2021년 4월 30일자로 날씨 API 연동이 실제 기상청 API 서비스와 연동되어 위에서 소개한 코드 및 결과가 변동되었습니다.  자세한 내용을 아래 페이지를 참고하세요.

업데이트 결과 (실제 기상청 API 연결)

References

 

 

Dialogflow & Conversational AI blog by Google Developer Advocate Lee Boonstra

Conversational AI Blog of Google Developer Advocate & Applied AI Engineer Lee Boonstra. Writes about Dialogflow, Chatbots, NLP and AI in Contact Centers.

www.leeboonstra.dev

 

 

스트리밍 입력의 오디오를 텍스트로 변환  |  Cloud Speech-to-Text 문서  |  Google Cloud

이 섹션은 마이크에서의 입력과 같은 스트리밍 오디오를 텍스트로 변환하는 방법을 설명합니다. 스트리밍 음성 인식을 사용하면 오디오를 Speech-to-Text로 스트리밍하고 오디오가 처리됨에 따라

cloud.google.com

 

728x90
반응형

'IT > AI' 카테고리의 다른 글

TensorFlow.js - Face Detection for React App  (0) 2021.05.06
Dialogflow Advanced 01. 기상청 날씨 API 연동  (5) 2021.04.29
Dialogflow - 8. Node.js 클라이언트  (0) 2021.04.21
Dialogflow - 7. 챗봇 클라이언트  (0) 2021.04.21
Dialogflow - 6. 클라이언트  (0) 2021.04.20

'IT/AI'의 다른글

  • 현재글Dialogflow - 9. React 클라이언트

관련글

댓글

티스토리툴바