【MLN】Visual Blocks for ML

by 高橋かずひと

Slide 1

Slide 1 text

Visual Blocks for ML MLN 2023/06/24

Slide 2

Slide 2 text

Who am I ? Name Twitter：KzhtTkhs ：高橋かずひと所属：サイバーエージェント AI事業本部行政DX Div GovTech開発センター仕事：画像処理兼なんでも屋その他：Axross寄稿やインディーゲーム開発のお手伝いしています

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Image-Processing-Node-Editor 特徴・高橋自作のノードエディタ形式の画像処理アプリ・ノードをドラッグ& ドロップで接続できる・各処理を視覚化しながら処理を試すことが出来る・OSS(Apache-2.0 license )

Slide 5

Slide 5 text

0. Overview

Slide 6

Slide 6 text

Visual Blocks for ML とは特徴・Google製のノーコードのグラフエディター・ノードをドラッグ& ドロップで接続できる・MLワークフローのプロトタイプを視覚化しながら試すことが出来る・Web上で動作するデモと Colaboratoryで動くパッケージがある https://visualblocks.withgoogle.com/ より引用

Slide 7

Slide 7 text

Visual Blocks for ML とは https://visualblocks.withgoogle.com/ より引用注意点・Google製ではあるが、正式にサポートされている Google製品ではない・このプロダクトの関心を測ることを目的とした実験的なリリース・長期的なメンテナンスの保証はない ※現時点で既にGitHubの更新はあまり活発ではない…… 正確に言うとコア部分がパブリックに開発されていないので状況が謎

Slide 8

Slide 8 text

1. Input node

Slide 9

Slide 9 text

Visual Blocks for ML：Inputノード・Input image ・Input text ・Live camera

Slide 10

Slide 10 text

Visual Blocks for ML：Inputノード・Input image ・Input text ・Live camera ・静止画を入力・デフォルトでいくつかのテスト画像・アップロードも可能

Slide 11

Slide 11 text

Visual Blocks for ML：Inputノード・Input image ・Input text ・Live camera ・テキスト入力が出来る・他ノードと組み合わせて重畳表示や APIの入力に

Slide 12

Slide 12 text

Visual Blocks for ML：Inputノード・Input image ・Input text ・Live camera ・Webカメラを入力画像として利用・( 現時点では ) カメラの切り替えは不可

Slide 13

Slide 13 text

2. Effect node

Slide 14

Slide 14 text

Visual Blocks for ML：Effectノード・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker

Slide 15

Slide 15 text

Visual Blocks for ML：Effectノード・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・2つの画像を合成・複数の合成モード・テキストの重畳表示

Slide 16

Slide 16 text

Visual Blocks for ML：Effectノード・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・以下の画像処理を実行輝度、コントラスト、クロップ、リサイズ、シアー、回転、ブラーノイズ付与

Slide 17

Slide 17 text

Visual Blocks for ML：Effectノード・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・Code editorで作成した任意のシェーダーコードを実行

Slide 18

Slide 18 text

Visual Blocks for ML：Effectノード・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・テキスト処理を行う - テキストの結合 - テキストの置換 - Mustacheテンプレート

Slide 19

Slide 19 text

Visual Blocks for ML：Effectノード・Image Mixer ・Image processor ・Shader processing ・Text processer ・Virtual sticker ・画像と顔のランドマーク座標を用いて、画像のオーバーレイ表示を行う

Slide 20

Slide 20 text

3. Model node

Slide 21

Slide 21 text

Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat

Slide 22

Slide 22 text

・人物や（一部の）動物を切り抜いたマスクを取得する Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat

Slide 23

Slide 23 text

・顔検出結果（バウンディングボックス、キーポイント）を取得する Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat

Slide 24

Slide 24 text

・顔のランドマーク検出結果を取得する Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat

Slide 25

Slide 25 text

・ハンドジェスチャーを検出する（エラー出る😇 Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat

Slide 26

Slide 26 text

・手のキーポイント検出結果を取得する Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat

Slide 27

Slide 27 text

・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

Slide 28

Slide 28 text

・物体検出結果を取得する（モデル不明。 MobileNet-SSDLite？） Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat

Slide 29

Slide 29 text

・PaLMチャットを実行する ※要APIキー Visual Blocks for ML：Modelノード① ・Body segmentation ・Face detection ・Face landmark ・Gesture Recognition ・Hand pose detection ・Mobilenet ・Object detection ・PaLM Chat

Slide 30

Slide 30 text

Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator

Slide 31

Slide 31 text

Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・PaLMによる文章生成を行う ※要APIキー

Slide 32

Slide 32 text

Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・セグメンテーション＋深度推定結果を取得する

Slide 33

Slide 33 text

Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・姿勢推定結果を取得する

Slide 34

Slide 34 text

Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・入力テキストが有害なテキストかクラス分類を行う

Slide 35

Slide 35 text

Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・TensorFlow-Hub等の TFJSモデルを実行する ※前処理・後処理はTensor 操作用ノードで実施する

Slide 36

Slide 36 text

Visual Blocks for ML：Modelノード② ・Portrait depth ・Pose landmark ・Text Toxicity ・TFJS model runner ・TFLite model runner ・PaLM Text Generator ・TensorFlow-Hub等の TFLiteモデルを実行する ※前処理・後処理はTensor 操作用ノードで実施する

Slide 37

Slide 37 text

4. Output node

Slide 38

Slide 38 text

Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer

Slide 39

Slide 39 text

Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・深度推定結果と画像から 3D画像を表示する

Slide 40

Slide 40 text

Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・物体検出などのバウンディングボックスを画像に重畳表示する

Slide 41

Slide 41 text

Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・クラス分類結果を表示する

Slide 42

Slide 42 text

Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・Tailwind CSSを用いた簡易なHTMLを表示する

Slide 43

Slide 43 text

Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・複数画像を並べて比較表示する

Slide 44

Slide 44 text

Visual Blocks for ML：Outputノード① ・3D Phote ・Bounding box visualizer ・Classification Viewer ・HTML viewer ・Image comparison ・Image viewer ・画像を表示する URL指定での画像表示や複数並べての表示も可能 ※複数表示出来ると、Image comparisonとの差別化がイマイチ……

Slide 45

Slide 45 text

Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer

Slide 46

Slide 46 text

Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・姿勢推定結果などのキーポイントと画像を用いて可視化する

Slide 47

Slide 47 text

Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・セグメンテーションなどのマスクを用いて切り抜いた画像を表示する

Slide 48

Slide 48 text

Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・深度推定結果を擬似カラーで表示する

Slide 49

Slide 49 text

Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・Tensorを画像に変換する

Slide 50

Slide 50 text

Visual Blocks for ML：Outputノード② ・Landmark visualizer ・Mask visualizer ・Tensor to depthmap ・Tensor to image ・Tensor viewer ・Tensorの値を表示する

Slide 51

Slide 51 text

5. Tensor node

Slide 52

Slide 52 text

Visual Blocks for ML：Tensorノード・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification

Slide 53

Slide 53 text

Visual Blocks for ML：Tensorノード・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・Tensorの型を変換する

Slide 54

Slide 54 text

Visual Blocks for ML：Tensorノード・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・Tensorのクロップ、リサイズを実行する

Slide 55

Slide 55 text

Visual Blocks for ML：Tensorノード・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・画像に対し前処理を実行してTensorへ変換する - リサイズ - 正規化

Slide 56

Slide 56 text

Visual Blocks for ML：Tensorノード・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・最小値、最大値を指定して値の範囲をリマップする

Slide 57

Slide 57 text

Visual Blocks for ML：Tensorノード・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・Tensor[]に対し、インデックスを指定して Tensorを取得する

Slide 58

Slide 58 text

Visual Blocks for ML：Tensorノード・Convert tensor type ・Crop and resize ・Preprocess image ・Remap value range ・Tensor picker ・Tensor to classification ・Tensor型のクラス分類の出力を「Classification viewer」で表示できる形に変換する

Slide 59

Slide 59 text

6. MISC node

Slide 60

Slide 60 text

Visual Blocks for ML：MISCノード・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param

Slide 61

Slide 61 text

Visual Blocks for ML：MISCノード・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・コードを記述するノード・言語は自由・このノード単体では動作せず、 Shader processing などに接続して使用

Slide 62

Slide 62 text

Visual Blocks for ML：MISCノード・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・Web APIを実行した結果を取得する

Slide 63

Slide 63 text

Visual Blocks for ML：MISCノード・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・指定URLの内容を iframeとして埋め込む

Slide 64

Slide 64 text

Visual Blocks for ML：MISCノード・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・画像のサイズを取得し json形式で出力する

Slide 65

Slide 65 text

Visual Blocks for ML：MISCノード・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・入力されたデータをログ出力する

Slide 66

Slide 66 text

Visual Blocks for ML：MISCノード・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・文字列選択リストを生成し、選択されている文字列を出力する

Slide 67

Slide 67 text

Visual Blocks for ML：MISCノード・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・文字列を範囲選択し、選択した内容を出力する

Slide 68

Slide 68 text

Visual Blocks for ML：MISCノード・Code editor ・Custom API ・Embed webcite ・Get image size ・Logger ・String picker ・Text selector ・Url Param ・指定URLのURLパラメータを抽出して出力する ※うまく動かない……調査中

Slide 69

Slide 69 text

7. Colaboratory

Slide 70

Slide 70 text

Visual Blocks for ML：Colaboratory ・Colaboratory 向けに visualblocks と言うパッケージが提供されている https://colab.research.google.com/github/google/visualblocks/blob/main/examples/quick_start_style_transfer.ipynb より引用

Slide 71

Slide 71 text

Visual Blocks for ML：Colaboratory ・Webデモとの大きな違いは、Generic関数を定義しブロックに登録できること

Slide 72

Slide 72 text

Visual Blocks for ML：Colaboratory

Slide 73

Slide 73 text

Visual Blocks for ML：Colaboratory

Slide 74

Slide 74 text

8. 作例

Slide 75

Slide 75 text

https://github.com/google/visualblocks/tree/main/pipelines/ より引用その他にも多くの作例が掲載されている

Slide 76

Slide 76 text

https://github.com/google/visualblocks/tree/main/pipelines/ より引用その他にも多くの作例が掲載されている

Slide 77

Slide 77 text

ご清聴ありがとうございました🙂