【MLN】Visual Blocks for ML

Transcript

1. Visual Blocks for ML MLN 2023/06/24
2. Who am I ? Name Twitter：KzhtTkhs ：高橋かずひと 所属 ：サイバーエージェント AI事業本部 行政DX Div GovTech開発センター 仕事 ：画像処理 兼 なんでも屋 その他：Axross寄稿や インディーゲーム開発の お手伝いしています
3. Who am I ? Name Twitter：KzhtTkhs ：高橋かずひと 所属 ：サイバーエージェント AI事業本部 行政DX Div GovTech開発センター 仕事 ：画像処理 兼 なんでも屋 その他：Axross寄稿や インディーゲーム開発の お手伝いしています
4. Image-Processing-Node-Editor 特徴 ・高橋自作のノードエディタ 形式の画像処理アプリ ・ノードをドラッグ& ドロップで接続できる ・各処理を視覚化しながら 処理を試すことが出来る ・OSS(Apache-2.0 license )
5. 0. Overview
6. Visual Blocks for ML とは 特徴 ・Google製のノーコード のグラフエディター ・ノードをドラッグ& ドロップで接続できる ・MLワークフローの プロトタイプを視覚化 しながら試すことが出来る ・Web上で動作するデモと Colaboratoryで動く パッケージがある https://visualblocks.withgoogle.com/ より引用
7. Visual Blocks for ML とは https://visualblocks.withgoogle.com/ より引用 注意点 ・Google製ではあるが、 正式にサポートされている Google製品ではない ・このプロダクトの関心を 測ることを目的とした 実験的なリリース ・長期的なメンテナンスの 保証はない ※現時点で既にGitHubの更新はあまり活発ではない…… 正確に言うとコア部分がパブリックに開発されていないので状況が謎
8. 1. Input node
9. Visual Blocks for ML：Inputノード ・Input image ・Input text ・Live camera
10. Visual Blocks for ML：Inputノード ・Input image ・Input text ・Live camera ・静止画を入力 ・デフォルトで いくつかの テスト画像 ・アップロード も可能
11. Visual Blocks for ML：Inputノード ・Input image ・Input text ・Live camera ・テキスト入力 が出来る ・他ノードと 組み合わせて 重畳表示や APIの入力に
12. Visual Blocks for ML：Inputノード ・Input image ・Input text ・Live camera ・Webカメラを 入力画像と して利用 ・( 現時点では ) カメラの切り 替えは不可
13. 2. Effect node
14. Visual Blocks for ML：Effectノード ・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker
15. Visual Blocks for ML：Effectノード ・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・2つの画像を合成 ・複数の合成モード ・テキストの重畳表示
16. Visual Blocks for ML：Effectノード ・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・以下の画像処理を実行 輝度、コントラスト、 クロップ、リサイズ、 シアー、回転、ブラー ノイズ付与
17. Visual Blocks for ML：Effectノード ・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・Code editorで作成した 任意のシェーダーコード を実行
18. Visual Blocks for ML：Effectノード ・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・テキスト処理を行う - テキストの結合 - テキストの置換 - Mustacheテンプレート
19. Visual Blocks for ML：Effectノード ・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・画像と顔のランドマーク 座標を用いて、画像の オーバーレイ表示を行う
20. 3. Model node
21. Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat
22. ・人物や（一部の）動物を 切り抜いたマスクを 取得する Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat
23. ・顔検出結果（バウンディ ングボックス、キーポイン ト）を取得する Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat
24. ・顔のランドマーク検出結 果を取得する Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat
25. ・ハンドジェスチャーを検 出する（エラー出る😇 Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat
26. ・手のキーポイント検出結 果を取得する Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat
27. ・Mobilenet（v1 or v2） を用いてクラス分類結果を 取得する Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat
28. ・物体検出結果を取得する （モデル不明。 MobileNet-SSDLite？） Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat
29. ・PaLMチャットを実行する ※要APIキー Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat
30. Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator
31. Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・PaLMによる文章生成を 行う ※要APIキー
32. Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・セグメンテーション＋ 深度推定結果を取得する
33. Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・姿勢推定結果を取得する
34. Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・入力テキストが有害な テキストかクラス分類を 行う
35. Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・TensorFlow-Hub等の TFJSモデルを実行する ※前処理・後処理はTensor 操作用ノードで実施する
36. Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・TensorFlow-Hub等の TFLiteモデルを実行する ※前処理・後処理はTensor 操作用ノードで実施する
37. 4. Output node
38. Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer
39. Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・深度推定結果と画像から 3D画像を表示する
40. Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・物体検出などのバウンディ ングボックスを画像に重畳表 示する
41. Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・クラス分類結果を表示する
42. Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・Tailwind CSSを用いた 簡易なHTMLを表示する
43. Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・複数画像を並べて 比較表示する
44. Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・画像を表示する URL指定での画像表示や 複数並べての表示も可能 ※複数表示出来ると、Image comparisonとの 差別化がイマイチ……
45. Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer
46. Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・姿勢推定結果などの キーポイントと画像を 用いて可視化する
47. Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・セグメンテーションなどの マスクを用いて 切り抜いた画像を表示する
48. Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・深度推定結果を擬似カラー で表示する
49. Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・Tensorを画像に変換する
50. Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・Tensorの値を表示する
51. 5. Tensor node
52. Visual Blocks for ML：Tensorノード ・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification
53. Visual Blocks for ML：Tensorノード ・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・Tensorの型を変換する
54. Visual Blocks for ML：Tensorノード ・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・Tensorのクロップ、 リサイズを実行する
55. Visual Blocks for ML：Tensorノード ・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・画像に対し前処理を 実行してTensorへ変換する - リサイズ - 正規化
56. Visual Blocks for ML：Tensorノード ・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・最小値、最大値を指定して 値の範囲をリマップする
57. Visual Blocks for ML：Tensorノード ・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・Tensor[]に対し、 インデックスを指定して Tensorを取得する
58. Visual Blocks for ML：Tensorノード ・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・Tensor型のクラス分類の 出力を「Classification viewer」で表示できる形に 変換する
59. 6. MISC node
60. Visual Blocks for ML：MISCノード ・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param
61. Visual Blocks for ML：MISCノード ・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・コードを記述するノード ・言語は自由 ・このノード単体では動作 せず、 Shader processing などに接続して使用
62. Visual Blocks for ML：MISCノード ・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・Web APIを実行した結果を 取得する
63. Visual Blocks for ML：MISCノード ・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・指定URLの内容を iframeとして埋め込む
64. Visual Blocks for ML：MISCノード ・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・画像のサイズを取得し json形式で出力する
65. Visual Blocks for ML：MISCノード ・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・入力されたデータを ログ出力する
66. Visual Blocks for ML：MISCノード ・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・文字列選択リストを 生成し、選択されている 文字列を出力する
67. Visual Blocks for ML：MISCノード ・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・文字列を範囲選択し、 選択した内容を出力する
68. Visual Blocks for ML：MISCノード ・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・指定URLのURLパラメータ を抽出して出力する ※うまく動かない……調査中
69. 7. Colaboratory
70. Visual Blocks for ML：Colaboratory ・Colaboratory 向けに visualblocks と言うパッケージが提供されている https://colab.research.google.com/github/google/visualblocks/blob/main/examples/quick_start_style_transfer.ipynb より引用
71. Visual Blocks for ML：Colaboratory ・Webデモとの大きな違いは、Generic関数を定義しブロックに登録できること
72. Visual Blocks for ML：Colaboratory
73. Visual Blocks for ML：Colaboratory
74. 8. 作例
75. https://github.com/google/visualblocks/tree/main/pipelines/ より引用 その他にも多くの作例が掲載されている
76. https://github.com/google/visualblocks/tree/main/pipelines/ より引用 その他にも多くの作例が掲載されている
77. ご清聴ありがとうございました🙂