音声強化版PaPeRo i のマイクビーム設定調整用アプリ

 音声強化版PaPeRo i のおしゃべり機能APIには「本体マイクビーム設定」があり、ビーム幅(23~180度)、ビーム角度(-90~90度)を指定できます。この設定をグラフィカルに調整できるアプリを作成してみました。

アプリの機能

 アプリには以下の様な機能を実装する事にしました。

  1. マイクビーム幅やビーム角度を図形で表示して調整できるようにする
  2. パペロの首をビーム角度設定にあわせて動かせる様にする
  3. マイク音量も調整できるようにする
  4. 音声認識語を表示する

アプリの構成

 アプリは以下のような構成としました。

  1. Python/tornadoを使ったwebアプリ
  2. JavaScript/Canvas APIで描画
  3. PythonのプログラムとJavaScriptのプログラムがWebSocketで通信して動作する
  4. papebotserver(こちら末尾のリンクからダウンロードして下さい)前提のプログラムとする(=アプリはWindows PCなど外部でも動かせる)

マイクビーム設定の描画

 マイクビームの描画は、パペロ正面を画面の下向きとして、

  1. ビーム角度で直線を引く
  2. ビーム幅は扇形で表し、ビーム角度の直線と重ねて傾けて描画する
  3. 設定値の入力には普通のinputタグを利用する

としました。Canvas APIで図形を描画する場合、beginPath()から開始し、直線ならlineTo()、円弧はarc()といった関数で形を描き、線を引くのであればstroke()、塗りつぶすならfill()とします。扇形をビーム角度通りに傾けて描画するのには、始点終点をすべて計算する方法もありますが、より簡単な移動と回転の関数translate()とrotate()を利用する方法にしました。
htmlとJavaScriptによる描画処理の概略は下記の様になります。

html:

<html>
<head>
    <meta charset="UTF-8">
    <title>PapebotTune</title>
</head>
<body>
  <canvas id="theCanvas" width=480 height=320 style="border: 1px solid;">
  </canvas>
  <br>
  <label for="beamAngleRange">ビーム角度</label>
  <input type="range" id="beamAngleRange" min="-90" max="90" value="0">
  <input type="number" id="beamAngleNumber" min="-90" max="90">
  <br>
  <label for="beamWidthRange">ビーム幅</label>
  <input type="range" id="beamWidthRange" min="23" max="180" value="60">
  <input type="number" id="beamWidthNumber" min="23" max="180">
  <br>
  <label for="micVolumeRange">マイク音量</label>
  <input type="range" id="micVolumeRange" min="0" max="100" value="100">
  <input type="number" id="micVolumeNumber" min="0" max="100">
  <br>
  <label for="interlockChk">ビームの向きに首を動かす</label>
  <input type="checkbox" id="interlockChk">
  <br>
  <label for="recogPhraseTxt">認識フレーズ</label>
  <br>
  <textarea id="recogPhraseTxt" style="width: 90%; height: 40vh;">
  </textarea>
  <br>
  <button id="recogClearBtn">
      クリア
  </button>
</body>
<script src="paperoapp.js"></script>
<script src="tune.js"></script>
</html>

JavaScript:

var app = {};
// 初期化
var init = function() {
  app.theCanvas = document.getElementById('theCanvas');
  app.ctx = app.theCanvas.getContext('2d');
  app.figWidth = app.theCanvas.width;
  app.figHeight = app.theCanvas.height;
  app.originX = app.figWidth / 2;
  app.originY = app.figHeight / 3;
  app.lineLen = app.figHeight - app.originY - 5;
};

// 描画
var updateFig = function() {
  var angle = -document.getElementById('beamAngleRange').value / 180 * Math.PI;

  // clear
  app.ctx.clearRect(0, 0, app.figWidth, app.figHeight);

  // move for rotate
  app.ctx.translate(app.originX, app.originY);
  app.ctx.rotate(angle);

  // draw width
  app.ctx.strokeStyle = '#2e8b57';
  app.ctx.fillStyle = '#98fb98';
  app.ctx.lineWidth = 1;
  var wa = (document.getElementById('beamWidthRange').value / 2) / 180 * Math.PI;
  var rx = app.lineLen * Math.sin(wa);
  var ry = app.lineLen * Math.cos(wa);
  app.ctx.beginPath();
  app.ctx.arc(0, 0, app.lineLen, Math.PI/2 - wa, Math.PI/2 + wa);
  app.ctx.lineTo(0, 0);
  app.ctx.closePath();
  app.ctx.stroke();
  app.ctx.fill();

  // draw angle line
  app.ctx.strokeStyle = '#2e8b57';
  app.ctx.lineWidth = 4;
  app.ctx.beginPath();
  app.ctx.moveTo(0, 0);
  app.ctx.lineTo(0, app.lineLen);
  app.ctx.stroke();

  // return for rotate
  app.ctx.rotate(-angle);
  app.ctx.translate(-app.originX, -app.originY);
};

動作確認

(1) Tinker Board S上でpapebotserverを実行してください。

Tinker Board S:

$ python3 papebotserver.py

(2) PCなど任意のホストでpapebottune.pyを実行してください。

実行ホスト:

$ python3 papebottune.py

(3) ブラウザで
実行ホストのIPアドレス:8888/tune.html
を開いてください。

画面で設定値を変更すると、Tinker Board Sにpapebotのログが出力され、意図通りに動作していることが分かります。

(ビーム幅を最小にしてビーム角度を右90度に設定した場合)

ログ:

2019-12-18 10:42:13,610 INFO -1225580016.papebotcom._proc_set_papero_micarray_beam ServerPapebot width=23, angle=-90
2019-12-18 10:42:13,610 INFO -1225580016.papebotcom.set_papero_micarray_beam PapebotCallbacker
2019-12-18 10:42:13,612 INFO -1269083024.papebotcom._proc_set_papero_micarray_beam PapebotCallbacker width=23, angle=-90
2019-12-18 10:42:13,612 INFO -1269083024.papebot.log Set codama beam width: 23 -> 0.2
2019-12-18 10:42:13,645 INFO -1269083024.papebot.log Set codama beam angle: -90 -> 0.9999999999991198
...
2019-12-18 10:43:21,717 INFO -1225580016.papebotcom._proc_set_papero_micarray_beam ServerPapebot width=23, angle=10
2019-12-18 10:43:21,717 INFO -1225580016.papebotcom.set_papero_micarray_beam PapebotCallbacker
2019-12-18 10:43:21,718 INFO -1269083024.papebotcom._proc_set_papero_micarray_beam PapebotCallbacker width=23, angle=10
2019-12-18 10:43:21,719 INFO -1269083024.papebot.log Set codama beam width: 23 -> 0.2
2019-12-18 10:43:21,745 INFO -1269083024.papebot.log Set codama beam angle: 10 -> -0.17364803248493946

また、音声強化版パペロのTinker Board Sでは
/home/pb/misc/codama/codama-doc/utils
に本動作を確認できるツールが置かれており、以下の様にしてマイクビーム設定が反映されていることを確認できました。

$ sudo ./codama_usb BEAMANGLE
$ sudo ./codama_usb BEAMWIDTH

なおこれは試作機の場合です。量産機ではコマンドがcodama_i2cとなります。

実際に会社の事務所の環境で動かしてみた結果ですが、

  1. マイク音量は少し下げただけでも認識率が落ちるばかりで、実質最大で使う以外なさそう
  2. ビーム角度とビーム幅を変えても音声認識動作への影響が感じられない

という結果となりました。これは試作機のためなのかもしれませんが、展示会場などバックグラウンドノイズが大きい環境ではまた違う結果になるかもしれないので、機会を見つけて試してみたいと思います。

ソースはこちらからダウンロードできます。


0