EmpathAPI × Reactで簡易実装

EmpathでApplication Engineerをしています。
Android Engineerと言っていたのですが、ここ最近Android以外をやることのほうが多く、Application Engineerと言うようにしてみました。

Empathは音声感情解析AIというものを作っていて、詳しくはWebサイトから確認できます。

Reactとは書きましたが、そこまで深く触れないのであしからず。

#Empath APIとは
EmpathではSDKとAPIを提供しており、そのうちのAPIはフリーで月300コールまで無料で使える手軽に試せるようになっています。
(登録ページ)

仕様に則ったwavファイルを投げると、感情解析結果がすぐに返ってくるという便利なものです。

仕様書は登録するとダウンロードできるので詳しくはそちらを確認してもらえるとよいです。
ざっくりとした仕様だけ書くと、下記のようになっています。

・ PCM WAVE形式、16bitであること
・ データサイズが1.9MB以下であること
・ フォーマットがPCM_FLOAT、PCM_SIGNED、PCM_UNSIGNED のいずれかであること
・ 録音時間が5.0秒未満であること
・ サンプリング周波数が11025Hzであること
・ チャンネル数が1(モノラル)であること 

#使用したもの

• Empath API(音声感情解析)
• React(JavaScript Library)
• axios(HTTPクライアント)
• Audacity(録音用)

##React
もはや説明のいらないほどのものとなりました。
Facebookが作ったJavaScriptのView Libraryです。
弊社でも取り入れているところもあります。
一応リンクだけ載せておきます。React公式ページ

今回はReactである必要は全くありませんが、自分自身が直近で使っていたので、そのまま環境等を使うためにReactにしただけです。
とりあえずAPIの動作を見るだけであれば、環境設定は簡単なのでよい部分もあります。

##axios
PromiseベースのHTTPクライアントです。
axios github

##Audacity
弊社の音響エンジニアに教えてもらったソフトです。
今回API仕様に則った音声を録音するのに便利です。
Audacity公式ページ

#セットアップ
##EmpathAPI
登録ページにアクセスし、画面下部のお申込みはこちらから新規登録をします。

利用規約や

個人情報取り扱い同意書をよく読み同意し

次へ
メールとパスワードを設定します。

メールが届いたら、本登録をします。
先程設定したパスワードを入力します。

必要情報を入力します。

プランを選びます。今回はフリープランの音声ファイルを保存するプランでいきます。

マイページが作成されるので、画面上からAPI Keyを発行します。

APIの準備はこれで整いました。

##Audacity
アプリを使ってEmpathAPIに則ったwav形式で録音します。
本来はこの録音あたりも記事に書ければいいんですが、長くなるのでまたの機会にします。

アプリ起動後、このような画面になります。
画面左端に 音声トラック▼ とプルダウンであるので、こちらから仕様通りの録音フォーマット（11025Hz, PCM 16bit, モノラル）に変更します。

この設定で5秒以下の音声を録音し、メニューからwavで書き出します。
解析用の音声はこちらを使います。

##React
公式が提供している簡易セットアップを使っていきます。Node.jsがインストール前提です。

###create-react-appをInstall
npm install -g create-react-app
このコマンドのみです。

###PJ作成
empath-testという名前でPJを作成します。 create-react-app empath-test
作成したディレクトリに移動し
cd empath-test
起動する
npm start
下記のようにお手軽に作成できます。

###Httpクライアントのインストール
axiosをインストールしておきます。
npm install axios
だけでOKです。

#実装
諸々準備が整いましたので、いよいよ実装していきます。
簡易版ですので、App.jsを書き換えていきます。

まずは取得したEmpathAPI keyと、URLをconstに置いておきます。

const server = 'https://api.webempath.net/v2/analyzeWav';
const key = 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX';

constractorにローカルStateを初期化します。
今回は保持するのはUploadするFileのみです。

this.state = {
  file: undefined,
};

View周りはシンプルにします。
Fileを開くinputとAnalyzeを開始するButtonのみの配置です。

  <input id="file"
    type="file"
    onChange={(e) => this.onChangeFile(e)} />

  <button onClick={this.handleClick.bind(this)}>
    Analyze
  </button>

実行すると下記のようにボタンが表示されました。

ファイルを読み込まれたときのイベントは下記の様に処理し、ファイルをstateに保持します。

  onChangeFile(e) {
    e.stopPropagation();
    e.preventDefault();
    var tmp = e.target.files[0];
    this.setState({ file: tmp });
  }

Analyzeボタンをクリックしたときのイベントにparam用のFormDataをセットします。

var formData = new FormData(form);
    formData.append('apikey', key);
    formData.append('wav', this.state.file);

あとはaxiosで送るだけです。
結果はAlertで表示するだけです。

   axios.post(server, formData, {
      headers: {
        'content-type': 'multipart/form-data',
      },
    }).then((res) => {
      var data = res.data;
      alert("(error" + data.error + ", calm:" + data.calm + ", anger:"
      + data.anger + ", joy:" + data.joy + ", sorrow:" + data.sorrow
      + ", energy" + data.energy + ")");
    }).catch(console.error);

実行します。
ファイル選択し、Analyzeボタンをクリックすると・・・

結果が出ました。

calm=>平常
anger=>怒り
joy=>喜び
sorrow=>悲しみ
energy=>元気度

が数値化されます。

元気度低いですね・・・
記事書き終わったところで休憩にしたほうがよさそうですね。。。