PyScriptでOpenCVを使って
Webで画像処理AI

Pycon mini 東海（11:35 ～ 12:00）
高橋 かずひと

Who am I ?




Name：高橋かずひと

Work ：画像処理系プログラマ
　　　　最近は久々に音声系の処理も

Other：インディーゲーム開発の
　　　　お手伝いなども


X　　　：@KzhtTkhs

GitHub：@Kazuhito00

Who am I ?














　　　　　　X　　　：@KzhtTkhs

　　　　　　GitHub：@Kazuhito00

PyScriptとは



Webブラウザ上でPythonコードを実行できるフレームワーク

  • Anaconda, Inc. CEO兼共同創設者 Peter Wang氏が
    PyCon US 2022の基調講演で発表
  • 世界で一番普及しているプラットフォーム（Web）で
    Pythonを手軽に実行できるようにすることが目的
  • 現在も開発は続いていて、2～3か月毎の更新があり
    2025/11/08時点の最新バージョンは 2025.10.3

PyScriptとは



PyScript は 2種のインタプリタ (Python ランタイム) をサポート
→ブラウザ上で Wasm ランタイムが起動し、その上で Python
　インタプリタが動作（ブラウザ内のサンドボックス環境で動作）

  • Pyodide：CPythonをWebAssembly/Emscriptenに移植したもの
  • MicroPython：より軽量な Python 実装のWebAssembly版を利用

PyScriptとは


  • Pyodide：CPythonをWebAssembly/Emscriptenに移植したもの
    →標準の Python／豊富なパッケージ（NumPy、Pandas など）を
    　サポートするが、MicroPythonと比較すると少々重い
  • MicroPython：より軽量な Python 実装のWebAssembly版を利用
    軽量、読み込み・起動が速いが、パッケージ数や標準ライブラリは限定的
    モバイルやリソース制約のある環境に向く

PyScriptとは


外部関数インターフェース（FFI）を用いたブラウザアクセス

  • PythonからDOM操作やWeb API操作が可能
  • PythonからJavaScriptへのアクセスだけではなく、
    JavaScriptからPythonへのアクセスも可能
  • MicroPythonを利用する場合は、Pyodideに比べて制限あり

デモ：Hello World（HTML単一ファイル）





　　　　　　　　　　　　　　PyScript出始めの時に触った方からしたら、書き方が変わっていてちょっと違和感あるかも
　　　　　　　　　　　　　　※たまに破壊的変更があり、latest指定は非推奨（バージョン固定で読み込むことを推奨）

デモ：Hello World（ファイル分割）





　　　　　　　　　　　　　　Hello World以外にも様々な実装例が公開されているので、
　　　　　　　　　　　　　　気になる方は https://docs.pyscript.net/2025.10.3/examples/ を参照ください

デモ：Tic Tac Toe





　　　　　　　　　　　　　　参考URL：https://pyscript.com/@examples/tic-tac-toe/latest

デモ：Folium geographical data





　　　　　　　　　　　　　　参考URL：https://pyscript.com/@examples/folium/latest

PythonでAIを用いた画像処理やるには？


以下のパッケージが使えるとうれしい

  • NumPy（多次元配列と数値演算を扱うライブラリ）
  • OpenCV（コンピュータビジョン用ライブラリ）
  • Pillow（画像処理用ライブラリ）
  • TensorFlow（Google製 機械学習ライブラリ）
  • PyTorch（Meta製 機械学習ライブラリ）
  • ONNX Runtime（機械学習モデルを共通フォーマットで利用可能なランタイム）

対応パッケージ一覧


PyScript で使えるパッケージは Pyodide 対応のパッケージ

※厳密にいうと純粋 Python か WASM にビルド済みのパッケージ
※MicroPythonは異なるため、本資料では対象外


　　　　　　　　　　　参考URL：https://pyodide.org/en/stable/usage/packages-in-pyodide.html

PythonでAIを用いた画像処理やるには？


以下のパッケージが使えるとうれしい

  • ⭕ NumPy（多次元配列と数値演算を扱うライブラリ）
  • ⭕ OpenCV（コンピュータビジョン用ライブラリ）
  • ⭕ Pillow（画像処理用ライブラリ）
  • ❌ TensorFlow（Google製 機械学習ライブラリ）
  • ❌ PyTorch（Meta製 機械学習ライブラリ）
  • ❌ ONNX Runtime（機械学習モデルを共通フォーマットで利用可能なランタイム）

解決案: OpenCV DNNモジュール


OpenCV DNNモジュールとは

  • OpenCVに組み込まれた深層学習推論エンジン

特徴

  • TensorFlow、PyTorch、Caffeなどのモデルを読み込み可能
  • ONNX形式のモデルを読み込み可能
  • PyScriptでも利用可能

課題

  • まだまだ絶賛開発中であり、他ライブラリで動作するモデルが
    DNNモジュールでは動作しないことが(多々)ある。。。

OpenCV DNNモジュール使い方概要



　　　　　　　　　　　参考URL：https://docs.opencv.org/4.11.0/d6/d0f/group__dnn.html

PyScriptのメディアデバイス取り扱い



　　　　　　　　　　　参考URL：https://docs.pyscript.net/2025.3.1/user-guide/media

デモ：YOLOv9-Wholebody28 物体検出





　　　　　　　　　　　モデル取得元：https://github.com/PINTO0309/PINTO_model_zoo/tree/main/468_YOLOv9-Wholebody28-Refine

課題：メモリリーク問題


今どきのモデルにしては、ちょっと推論遅くねえ？

と思った方、あなたの直感は惜しいです🐤


推論自体はそんなに遅くないです。
ただ、キャンバスへの反映が数百ms前後かかっており、
そこで遅くなっています。

課題：メモリリーク問題


データコピーは create_proxy() を使用すると早いが、
メモリリークの問題が解決できず、今回のデモでは代替の遅い処理で妥協

課題：メモリリーク問題


公式ドキュメントのFAQには、以下のような注意喚起がある

  • create_proxy機能に関して
    長時間動かす・コールバックを扱うときに、
    不要になった参照を解放しないとメモリリークが起こり得る
  • 「PythonからJS／DOMへの参照」や
    「JSからPythonへのコールバック」 の構造において
    不要参照が残存しメモリリークが起こり得る

参考URL：https://docs.pyscript.net/2025.10.3/faq/

まとめ


　
  • PyScriptとは
    　Webブラウザ上でのPython実行フレームワーク
    　PyodideとMicroPythonの2種類をサポート
  • 利用可能パッケージ
    　利用するインタプリタに依存するため、少々制限あり
  • AI画像処理について
    　（Pyodideでは）NumPy、OpenCV、Pillowは利用可能だが
    　TensorFlow、PyTorch、ONNXは未対応
    　そのため、OpenCV DNNモジュールを利用するなど工夫が必要

まとめ


　
  • メディアデバイスやデータの取り扱い
    　メディアデバイスの取り扱いなど、Python⇔JS、JS⇔Python
    　相互にデータやAPIのやりとりが可能
  • 課題
    　相互にデータをやりとりする都合上、大きなデータを利用する場合
    　メモリリークなどケアが必要な個所もある


ブラウザでPythonが動いて、GitHub Pagesなどで公開しやすくて面白い
※個人の感想です

当日の質疑応答


　
  • Q．PythonのWASIのTierを上げる議論がありましたが、
    　　PyScriptで追加が予定されている他のWASMなどはありますか？
    A．SPyと言う静的型付けのPython風インタプリタが
    　　研究検討されている模様
  • Q．Pyodideを利用しています。
    　　Pyodideと比べた時のPyScriptの推しポイントを教えてください
    A．Pyodideに比べてHTMLやpyファイルに
    　　書きやすいように設計されており、ファイル分割などもしやすい
  • Q．OpenCV DNNモジュールは機械学習推論用のモジュールですか？
    A．OpenCVに含まれる推論専用のモジュールです。
    　　　　　他ライブラリ(TensorFlow/PyTorchなど)で
    　　　　　学習したモデルを読み込みます。

補足資料：Pyodide/MicroPython 切り替え



<script> の type で指定

<!-- Pyodide で実行 -->
<script type="py">
  print("Hello from Pyodide")
</script>

<!-- MicroPython で実行 -->
<script type="mpy">
  print("Hello from MicroPython")
</script>

補足資料：想定ユースケース



  • 教育、学習用途
  • ホビー・プロトタイプ用途
  • デモ、ドキュメンテーションなどの共有用途
  • （限定的な）業務用途
    → ダラスの犯罪統計ダッシュボードをPyScriptで作成した事例あり
    　 https://crimede-coder.com/graphs/Dallas_Dashboard
  • クライアント（ブラウザ）上でデータ処理を行い、サーバ負荷を下げるという応用案　※Anaconda, Inc.フォーラムに投稿された議論内容

OpenCV DNNモジュールで動作するモデル


OpenCV Zoo and Benchmark は安牌

※OpenCV DNN 用に調整されたモデルを収集しているModel Zoo


　　　　　　　　　　　　　　参考URL：https://github.com/opencv/opencv_zoo

PINTO model zoo


PINTO氏が園長をしている動物園(Model Zoo)

様々なモデルをONNXなどのフォーマットに変換して収録（2025/11/7時点で470のモデル）


　　　　　　　　　　　参考URL：https://github.com/PINTO0309/PINTO_model_zoo