ml5.jsのチュートリアルがcorsでエラーになる

どうもこんにちは。ランニング犬おじさんです。

ひょんなことより、機械学習をかじることになりました。 どうせやるならしっかり噛りたい派なので、ml5.jsのチュートリアルあるから始めると早速コケたので備忘録です。

結論

open index.html などで単純にブラウザでhtmlファイルを表示すると、corsエラーで画像が取得できないので、serve などのwebサーバーを使う。

ml5.jsのチュートリアル

試そうとしたのはこちらのチュートリアルです。

Introduction to ml5.js

CDN経由で、ml5のパッケージを取得して、 images/bird.png の画像分類を行うというシンプルなもの。

チュートリアル通りに行うと、

p5.min.js:3 Fetch API cannot load `${画像のパス}` URL scheme must be "http" or "https" for CORS request.

とのこと、 index.htmlと bird.png のオリジンが違う？ため、chromeのセキュリティ機能によって画像が取得できていない模様。

改善策

serve (node)を使う。

vercel/serve: Static file serving and directory listing

// グローバルにインストール
npm install -g serve
// チュートリアルのディレクトリにて
serve -p 3000

として、serveサーバーを立ち上げ　localhost:3000 へアクセス。 index.htmlにも bird.pngどちらもオリジンが localhost となり、無事に画像分類ができました。