ここでは、エンドユーザーから取得する画像をGoogle Cloud Vision API（https://cloud.google.com/vision）にアップロードし、データを受信するロジックを実装する方法を学習します。
まず、http inノードをFlowにドラッグします。
http inノードを2回クリックし、プロパティタブを開きます。
メソッドプロパティを POSTに設定する。
前のセクションのhtmlで定義したフォームの actionプロパティがこのサブロケーションに設定されているので、ユーザーはURLを/uploadpretty に設定する必要があります。
また、Accept file uploads?チェックボックスをチェックすると、ウェブソケットにファイルをアップロードすることができなくなります。
関数ノードをワークスペースにドラッグし、[post] /uploadprettyノードに配線します。このノードは、Google Cloud Vision API(https://cloud.google.com/vision) にアップロードできるように、アップロードされた画像をBase64(https://developer.mozilla.org/en-US/docs/Glossary/Base64) に変換する役割を担います。
関数ノードを2回クリックして、そのプロパティタブを開きます。
toBase64にリネームしてください。
関数］ボックスに次のコードを貼り付けます。
msg.payload = msg.req.files[0].buffer.toString('base64');return msg;
このコードは、アップロードされた最初の画像を収集し、エンコードされたBase64文字列にバッファリングする役割を担っています。
これで実行フローは3つのブランチに分かれることになる。
最初のブランチは、エンドユーザーのクライアントに、サブミットアクションが成功したかどうかを示すステータス メッセージを 返す責任を負います。
2番目のブランチは、ペイロードをフォーマットし、画像をGoogle Cloud Vision API（https://cloud.google.com/vision）にアップロードし、前のセクションで作成したページを更新します。後者の部分は、 ウェブソケットアウトノードを作成することによって行われます。
3つ目のブランチは、エンドポイントに渡されたすべてのリクエストをリスニングし、それをデバッグメッセージに変えます。
なお、これらのブランチはすべて、エンドユーザーがウェブサイトに画像をアップロードする際に実行されます。
まず、ワークスペースにhttp responseノードをドラッグして、toBase64ノードに配線します。
ここで、関数ノードをワークスペースにドラッグし、同様にtoBase64ノードに配線します。
フォーマットペイロードに改名する。
関数］ボックスに、次のコードを貼り付けます。
msg.image64 = msg.payload;msg.payload = { requests: [ { image: { content: msg.payload }, features: [ { maxResults: 5, type: "LABEL_DETECTION" } ] } ]}return msg;
このコードは、画像をmsg.payload変数に渡すことと、検出されたLABEL_DETECTION 機能(https://cloud.google.com/vision/docs/labels) の数を5件の結果に制限することを担当します。
http requestノードをワークスペースにドラッグして、format payloadノードに配線します。このノードは、Google Cloud Vision API(https://cloud.google.com/vision) にペイロードを接続して送信し、API から取得したデータを担当するJSON オブジェクトを返す役割を担います。
http リクエストノードを2回クリックし、プロパティタブを開きます。
メソッドを POSTに設定します。
URLを https://vision.googleapis.com/v1/images:annotate?key={KEY} と設定します。{KEY}はGoogle Cloud Vision API Key(https://cloud.google.com/vision/docs/setup) に対応します。
変更 パースされた JSON オブジェクトに 戻ります 。
Google APIにリネームしてください。
別の関数ノードをワークスペースにドラッグして、Google APIノードに配線する。このノードは、Google Cloud Vision API(https://cloud.google.com/vision) から返されたデータを戻り値の配列に渡し、シリアライズされた JSON 文字列に変換して、websocket outノードに渡せるようにする役割を果たします。これによって、ユーザーが画像をアップロードすると、ページが自動的にアップロードされるようになります。
関数ノードを2回クリックして、そのプロパティタブを開きます。
ノードの名前を「Trim Response」に変更します。
関数］ボックスに次のコードを貼り付けます。
var retArray = []for( var i in msg.payload.responses[0].labelAnnotations ){ let desc = msg.payload.responses[0].labelAnnotations[i].description let score = msg.payload.responses[0].labelAnnotations[i].score let thisObj = { desc: desc, score: score } retArray.push(thisObj)}msg.payload = { result: retArray, resultJSON: JSON.stringify(retArray, null, '\t')}msg.payload = msg.payload.resultJSONreturn msg
ワークスペースに ウェブソケットアウトノードをドラッグし、それを トリムレスポンスノードに配線します。このノードは、イベント・リスナーを設定する役割を果たし、そのリスナーは
ウェブソケットアウトノードを2回クリックして、そのプロパティタブを開きます。
Add new websocket-listener…の右側にあるEditボタンをクリックします。
ウェブソケットのパスを/ws/google-vision-complex に設定します。
このウェブソケットを使用できるフローをAI 画像 認識フローのみに設定します。
Addボタンをクリックして、変更を保存します。その後、Doneボタンをクリックして、このノードの設定を終了します。
最後に、ワークスペースにデバッグノードを追加し、toBase64ノードに配線します。
デバッグノードを2回クリックし、プロパティタブを開きます。
その出力を完全な msg オブジェクトとして設定します。
最後に、[Deploy]ボタンをクリックして変更をコミットします。ワークフローは以下の画像のようになるはずです。
以上です。これでこのフローの例は終わりです。これで、自分のNode-REDインスタンスに定義したサブロケーションに移動してテストすることができます。私の場合は、https://paulo.app.openiap.io/google-vision-complex。試してみてください。