Slide 1

Slide 1 text

はじめての Go * WASM * OCR 新宿御苑.wasm 2025. 02. 28

Slide 2

Slide 2 text

2 自己紹介 Sugar Sato (@satoIsSugar) ● 2023年 BuySell Technologies入社 ● 基盤チーム (Portal/Account/Approval) ○ アソシエイトマネージャー ○ PjM ○ プレイングマネージャー ● Go / Angular / Serverless ● 熱帯植物 ○ ビカクシダ ● 猫 ○ Lambda (♀ 2才)

Slide 3

Slide 3 text

3 プロダクト群「バイセルリユースプラットフォーム Cosmos」の開発が進行中 リユースに必要なすべての機能を提供する 「リユースプラットフォーム Cosmos」の開発が進行中です。 Cosmosを活用して、バイセルグループ全体での業務効率改善やデータドリブン経営の深化を目指しています。 リユースプラットフォーム Cosmos 自社開発のリユース特化業務基幹システムでありサービス群の集合体 買取申込 買取・査定 在庫管理 販売 多様なチャネルで収益最大化 CRM -顧客対応- 買取種別に応じた最適なシステム構築 Visit -訪問買取 - Store -店舗買取 - Promas -商材マスタ - Appraisal -専門査定 - Stock -在庫管理 - EXS -販売管理 - Core -会員管理- Portal -データ利用- Pocket -データ基盤- 買取 専門チームによる真贋・査定と連携 査定 申込 効率的な顧客対応 在庫 在庫管理の最適・効率化 販売 データ 各事業プロセスにある データを一元管理 :基幹システム

Slide 4

Slide 4 text

Go が好きだ〜! でも WASM はよくわからん...

Slide 5

Slide 5 text

ということで OCR 機能を作りつつ入門するぞ!

Slide 6

Slide 6 text

01 アーキテクチャ 02 機能・技術ポイント 03 デモ 04 ほんとはやりたかったこと 05 まとめ 目次 Index

Slide 7

Slide 7 text

アーキテクチャ 01

Slide 8

Slide 8 text

まず、できたものはこちらです github.com/sgash708/wasm-ocr-example

Slide 9

Slide 9 text

9 アーキテクチャ

Slide 10

Slide 10 text

10 アーキテクチャ データフロー 画像入力 → WASM 処理 → Tesseract.js → 結果表示

Slide 11

Slide 11 text

11 アーキテクチャ 画像処理ロジック Base64でデータ受け渡し

Slide 12

Slide 12 text

機能・技術ポイント 02

Slide 13

Slide 13 text

13 機能・技術ポイント ● 画像前処理 ○ グレースケール変換 ○ 二値化処理(閾値調整機能) ● 多言語 OCR ○ 日本語と英語の同時認識対応 ○ Tesseract.js による文字認識 機能

Slide 14

Slide 14 text

14 機能・技術ポイント ● Go WebAssembly の仕組み ○ JavaScript への橋渡し ○ コンパイルと実行フロー ● 画像処理 ○ グレースケール変換 ○ 二値化処理(閾値調整機能) ● Tesseract.js との連携 技術ポイント

Slide 15

Slide 15 text

15 ● JavaScript への橋渡し ○ syscall/js パッケージを使用して JavaScript と連携 ○ Go を JavaScript から呼び出せるようにグローバルに登録 ● コンパイルと実行フロー ○ Go Code → GOOS=js GOARCH=wasm go build → main.wasm → wasm_exec.js → Browser ○ wasm_exec.js = Go ランタイムの JavaScript ラッパー ○ ブラウザの WebAssembly API を通じて Go を実行 ○ JavaScript と Go 間でのデータの受け渡し 機能・技術ポイント Go WebAssemblyの仕組み

Slide 16

Slide 16 text

16 ● グレースケール変換 ○ Go 標準の image パッケージを活用 ○ オリジナル画像の各ピクセルをグレースケールに変換 ○ 画素ごとに輝度値に変換する処理 機能・技術ポイント 画像処理

Slide 17

Slide 17 text

17 機能・技術ポイント 画像処理 ● 二値化処理 ○ 閾値によるシンプルな二値化処理 ○ 閾値より明るい画素は白(255)に、暗い画素は黒(0)に ○ UI から閾値を動的に調整可能

Slide 18

Slide 18 text

18 機能・技術ポイント ● WebWorker ベースの非同期処理 ● 日本語と英語の言語モデル併用 ● 処理の進行状況をリアルタイムで表示 Tesseract.jsとの連携

Slide 19

Slide 19 text

デモ 03

Slide 20

Slide 20 text

20 デモ

Slide 21

Slide 21 text

とりあえず動くものはできた🙌

Slide 22

Slide 22 text

ほんとはやりたかったこと 04

Slide 23

Slide 23 text

23 ほんとはやりたかったこと ● Go 1.24 の新機能を活用した WASM 連携の改善 ○ syscall/js を使わずシンプルな記述へ ○ よりクリーンなコード構造と型安全性の向上 ● otiai10/gosseract の導入 ○ Tesseract のオプションを Go から直接制御 ○ より高度な OCR 設定( PSM, OEM 制御)の実装 ● 前処理フィルターの追加(ノイズ除去、コントラスト強化) ● OCR 精度向上 今後の展望

Slide 24

Slide 24 text

24 ほんとはやりたかったこと ● Go 1.24連載始まります&os.Root、WASMの最新のまとめ Go 1.24 の新機能を活用した WASM 連携の改善

Slide 25

Slide 25 text

25 ほんとはやりたかったこと ● 特徴 ○ otiai10/gosseract ○ > Golang OCR package, by using Tesseract C++ library. ● OCR 機能を BE で隠蔽したい ○ JavaScript はシンプルに Go のコード呼ぶだけになる otiai10/gosseract の導入

Slide 26

Slide 26 text

26 ほんとはやりたかったこと OCR 精度向上 ● 文字以外も認識されている ● 単語が切れている

Slide 27

Slide 27 text

まとめ 05

Slide 28

Slide 28 text

28 まとめ Go * WebAssembly の可能性を感じられた ● 初めてまともにハンズオン ○ Pros ■ 画面で動く Go のコードに感動 ● TinyGo やフレームワークなどを用いて物作りしてみたい ○ Cons ■ デバッグしにくさを若干感じた ● js で完結しておけばもっと開発しやすかったのでは?(トホホ ■ デッドロックになやむこともあった

Slide 29

Slide 29 text

wasm なんもわからん...

Slide 30

Slide 30 text

Thank You

Slide 31

Slide 31 text

31 引用 ● https://github.com/sgash708/wasm-ocr-example ● https://go.dev/blog/wasmexport ● https://zenn.dev/monicle/articles/b43dae1a9fb847 ● https://github.com/otiai10/gosseract ● https://github.com/schwarzkopfb/tesseract-ocr/blob/master/docs.md#tesseractrecognize source-options-callback--promise ● https://future-architect.github.io/articles/20250127a/#WASM%E3%83%AA%E3%82%A2 %E3%82%AF%E3%82%BF%E3%83%BC%E3%83%A2%E3%82%B8%E3%83%A5%E3%83% BC%E3%83%AB%E3%82%92JS%E3%81%8B%E3%82%89%E5%91%BC%E3%81%B3%E5% 87%BA%E3%81%99