본문으로 건너뛰기
버전: 1.4.x

개요

Demo web page

Demo web page에서는 AI Human Web SDK(js)'의 기능을 사용해볼수 있습니다. 여기(Link). 페이지의 오른쪽 상단에 아래와 같은 메뉴가 나오며, 이를 통해 SDK의 기능들을 둘러보십시오.

Demo web page 메뉴

각 메뉴의 구성은 아래와 같습니다.

  • QuickStart : 빠른 AIPlayer 시작
  • SDK Demo : AIPlayer 기능 예시
  • STT Demo : AIPlayer + Chatbot(PlayChat) 예시

샘플 Project

SDK 사이트에 제공된 샘플은 SDK의 기능을 보여주는 예입니다. 이를 통해 SDK가 실제로 어떻게 작동하는지 확인할 수 있습니다.

여기(link)에서 다운로드하십시오.



실행 방법

샘플 프로젝트는 node-express와 nextjs로 두 가지를 제공합니다. 먼저 샘플의 내용을 확인합니다.

Contents

zip file의 압축을 풀면, 다음과 같은 폴더가 생성됩니다.

Folder nameDescription
node-expresssample project 1
nextjssample project 2

폴더 안에는 다음과 같은 파일들이 있습니다.

FilenameDivisionDescription
generateJWT.jsServergenerate client token javascript
demo.htmlClientsdk demo html
demo.jsClientsdk demo javascript
demo.cssClientsdk demo css

nextjs 실행하기

샘플의 nextjs 폴더를 살펴봅니다.

1. 프로젝트 셋업를 통해, appId를 입력하고, userKey를 발급받습니다.

2. /nextjs/pages/api/generateJWT.js 파일을 수정합니다.

  • 아래와 같이 appId, userkey를 입력합니다.

3. /nextjs 디렉토리에서 아래의 명령어를 통해 서버을 실행합니다.

$ cd nextjs
$ npm install
$ npm run dev

4. 크롬 브라우저에서 http://localhost:3000에 접속합니다.

문제가 없다면, 아래와 같이 SDK DEMO가 실행됩니다.




node-express 실행하기

1. 프로젝트 셋업를 통해, appId를 입력하고, userKey를 발급받습니다.

2. /node-express/server/generateJWT.js 파일을 수정합니다.

  • 아래와 같이 appId, userkey를 입력합니다.

3. /node-express/server 디렉토리 위치에서 아래의 명령어를 통해 서버을 실행합니다.

$ cd node-express/server
$ npm install
$ npm start

4. 크롬 브라우저로 /node-express/client/quickStart.html 파일을 불러옵니다.