はじめての Go * WASM * OCR

Transcript

1. はじめての Go * WASM * OCR 新宿御苑.wasm 2025. 02. 28
2. 2 自己紹介 Sugar Sato (@satoIsSugar) • 2023年 BuySell Technologies入社 • 基盤チーム (Portal/Account/Approval) ◦ アソシエイトマネージャー ◦ PjM ◦ プレイングマネージャー • Go / Angular / Serverless • 熱帯植物 ◦ ビカクシダ • 猫 ◦ Lambda (♀ 2才)
3. 3 プロダクト群「バイセルリユースプラットフォーム Cosmos」の開発が進行中 リユースに必要なすべての機能を提供する 「リユースプラットフォーム Cosmos」の開発が進行中です。 Cosmosを活用して、バイセルグループ全体での業務効率改善やデータドリブン経営の深化を目指しています。 リユースプラットフォーム Cosmos 自社開発のリユース特化業務基幹システムでありサービス群の集合体 買取申込 買取・査定 在庫管理 販売 多様なチャネルで収益最大化 CRM -顧客対応- 買取種別に応じた最適なシステム構築 Visit -訪問買取 - Store -店舗買取 - Promas -商材マスタ - Appraisal -専門査定 - Stock -在庫管理 - EXS -販売管理 - Core -会員管理- Portal -データ利用- Pocket -データ基盤- 買取 専門チームによる真贋・査定と連携 査定 申込 効率的な顧客対応 在庫 在庫管理の最適・効率化 販売 データ 各事業プロセスにある データを一元管理 ：基幹システム
4. Go が好きだ〜！ でも WASM はよくわからん...
5. ということで OCR 機能を作りつつ入門するぞ！
6. 01　アーキテクチャ 02　機能・技術ポイント 03　デモ 04　ほんとはやりたかったこと 05　まとめ 目次 Index
7. アーキテクチャ 01
8. まず、できたものはこちらです github.com/sgash708/wasm-ocr-example
9. 9 アーキテクチャ
10. 10 アーキテクチャ データフロー 画像入力 → WASM 処理 → Tesseract.js → 結果表示
11. 11 アーキテクチャ 画像処理ロジック Base64でデータ受け渡し
12. 機能・技術ポイント 02
13. 13 機能・技術ポイント • 画像前処理 ◦ グレースケール変換 ◦ 二値化処理（閾値調整機能） • 多言語 OCR ◦ 日本語と英語の同時認識対応 ◦ Tesseract.js による文字認識 機能
14. 14 機能・技術ポイント • Go WebAssembly の仕組み ◦ JavaScript への橋渡し ◦ コンパイルと実行フロー • 画像処理 ◦ グレースケール変換 ◦ 二値化処理（閾値調整機能） • Tesseract.js との連携 技術ポイント
15. 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の仕組み
16. 16 • グレースケール変換 ◦ Go 標準の image パッケージを活用 ◦ オリジナル画像の各ピクセルをグレースケールに変換 ◦ 画素ごとに輝度値に変換する処理 機能・技術ポイント 画像処理
17. 17 機能・技術ポイント 画像処理 • 二値化処理 ◦ 閾値によるシンプルな二値化処理 ◦ 閾値より明るい画素は白（255）に、暗い画素は黒（0）に ◦ UI から閾値を動的に調整可能
18. 18 機能・技術ポイント • WebWorker ベースの非同期処理 • 日本語と英語の言語モデル併用 • 処理の進行状況をリアルタイムで表示 Tesseract.jsとの連携
19. デモ 03
20. 20 デモ
21. とりあえず動くものはできた🙌
22. ほんとはやりたかったこと 04
23. 23 ほんとはやりたかったこと • Go 1.24 の新機能を活用した WASM 連携の改善 ◦ syscall/js を使わずシンプルな記述へ ◦ よりクリーンなコード構造と型安全性の向上 • otiai10/gosseract の導入 ◦ Tesseract のオプションを Go から直接制御 ◦ より高度な OCR 設定（ PSM, OEM 制御）の実装 • 前処理フィルターの追加（ノイズ除去、コントラスト強化） • OCR 精度向上 今後の展望
24. 24 ほんとはやりたかったこと • Go 1.24連載始まります&os.Root、WASMの最新のまとめ Go 1.24 の新機能を活用した WASM 連携の改善
25. 25 ほんとはやりたかったこと • 特徴 ◦ otiai10/gosseract ◦ > Golang OCR package, by using Tesseract C++ library. • OCR 機能を BE で隠蔽したい ◦ JavaScript はシンプルに Go のコード呼ぶだけになる otiai10/gosseract の導入
26. 26 ほんとはやりたかったこと OCR 精度向上 • 文字以外も認識されている • 単語が切れている
27. まとめ 05
28. 28 まとめ Go * WebAssembly の可能性を感じられた • 初めてまともにハンズオン ◦ Pros ▪ 画面で動く Go のコードに感動 • TinyGo やフレームワークなどを用いて物作りしてみたい ◦ Cons ▪ デバッグしにくさを若干感じた • js で完結しておけばもっと開発しやすかったのでは？(ﾄﾎﾎ ▪ デッドロックになやむこともあった
29. wasm なんもわからん...
30. Thank You
31. 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