paiza開発日誌

IT/Webエンジニア向け総合求人・学習サービス「paiza」(https://paiza.jp ギノ株式会社)の開発者が開発の事、プログラミングネタ、ITエンジニアの転職などについて書いています。

JavaScriptで開発された至高のAI・機械学習Webアプリ7選

f:id:paiza:20181031104855j:plain
どうも、まさとらん(@0310lan)です!

今回は、人気のAI・機械学習などを活用したWebアプリのなかで、JavaScriptによって開発されたプロジェクトだけを厳選してご紹介しようと思います!

ご紹介するWebアプリはすべてブラウザからすぐに試せる「サンプルデモ」があり、どのように開発されているのかを確認できる「ソースコード」も合わせてリンクを張っています。

AI・機械学習などにご興味のある方は、ぜひ参考にしてみてください!

なお、paizaラーニングでは、11/1(木)までの期間限定で、声優の上坂すみれさんがナレーションを務める「Python×AI・機械学習入門編」を全編無料公開しています。

 

■AIによるインタラクティブなドラムシーケンサー!

Deep Drum

f:id:paiza:20181031105022j:plain

ディープラーニングを音楽や絵画などの芸術分野で活用できるように研究しているプロジェクト「Magenta」のJavaScript版ライブラリとTone.jsを利用して作られたドラムシーケンサーです。

「Magenta」はGoogleの人工知能部門である「Google Brain」チームによって研究が進められているオープンソースのプロジェクトで、今回利用しているモデルはMIDIファイルを読み込んで機械学習をすることによりAIがドラムパターンやメロディなどを生成してくれるようになります。


この「Deep Drum」ではすでに公開されているモデルを利用することで、誰でも簡単にドラム・ベース・メロディを組み合わせた音源を作成できるようになっているのが特徴です。

f:id:paiza:20181031105049j:plain

複数のパターンを作成して組み合わせることが可能で、1つのパターン内でコード進行を設定するとAIがメロディパートを生成してくれます。

また、オプションでドラムやメロディの抑揚を制御したり、テンポやスイングなど細かい調整もできるように設計されています。

もちろん音源もピアノ・シンセサイザー・ギターなどいくつか用意されているので、複雑な楽曲も簡単に作れるように工夫されています。


ちなみにですが、同じ「Magenta」プロジェクトの1つである「メロディモデル」を活用したピアノの自動演奏をしてくれるプロダクトも公開されています。
 

Performance RNN

f:id:paiza:20181031105202j:plain

AIが機械学習によって生成した美しいメロディでピアノを自動演奏してくれるのですが、抑揚や譜割の密度などのパラメータを変化させるとリアルタイムに演奏が変わっていくのは驚きです。


<参考リンク>

 

■手描きイラストから写真を生成するAI画像変換!

Pix2Pix

f:id:paiza:20181031105420j:plain

「pix2pix」というディープラーニングで画像を学習させる技術があるのですが、これをTensorflow.jsを使ってブラウザ上から誰でも利用できるように作られたのがこちらのWebアプリです!

上の画像を見て分かるように、簡単な靴の線画を描くだけで右側にリアルな写真が生成されているわけです。

これは「靴」のモデルを利用しているのですが、それぞれ生成したい目的の写真に合わせたモデルがいくつか用意されています。


例えば、複雑な「風景」のモデルであれば、色によって対象物を判別できるようになっています。

f:id:paiza:20181031105455j:plain

上の例だと、「空」「海」「船(オブジェクト)」などを色によって分けており、それを元にして画像を生成しています。


また、「顔」のモデルを利用すると簡単な目・鼻・口などのパーツを描くだけでリアルな人物像が生成されます。

f:id:paiza:20181031105522j:plain

いずれもブラウザ上ですぐに試すことができるので、ぜひみなさんも気軽にチャレンジしてみてください!

描き方次第では、ユニークな風景画や人物を生み出すことができるので面白いですよ。


<参考リンク>

 

■映像に映る手の動きを認識して遊ぶPONGゲーム!

ML PONG

f:id:paiza:20181031105716j:plain

パドルを操作して動いているボールを跳ね返し合う対戦ゲームといえば「PONG」ゲームが有名ですが、このパドルの操作をPCカメラに映る手や顔の動きで制御するのがこのゲームの面白いところです。


ゲームが始まると、最初に指示された手のカタチをカメラにかざすことで、AIが学習をしてくれます。

f:id:paiza:20181031105735j:plain

両方の手を学習させることで、2つのパドルを自分で操作できるようになります。

なおかつ、顔の動きや舌をだしたりすることでゲームをスタートさせることも可能です。


実際にプレイしている様子は、以下の動画でチェックできます!

このゲームは、「p5ML」というdeeplearn.jsをベースにしたライブラリを利用して開発されており、GPUを使った高速な処理を実現しているのが特徴です。


<参考リンク>

 

■絵文字と同じモノを現実世界で探せるAIスマホカメラ!

EMOJI SCAVENGER HUNT

f:id:paiza:20181031110037j:plain

スマホのカメラに映る対象物を認識できるGoogleの学習モデルを活用し、Tensorflow.jsでスマホのブラウザから軽快に動作するように作られたWebアプリです。

面白いのは指示された「絵文字」と同じ対象物を現実世界から探し出して認識させるとポイントが得られるというゲーミフィケーションになっているところです。


例えば、以下のように「手」の絵文字が指定されたら、スマホのカメラで現実世界の自分の手を見せればポイントをゲットできます。

f:id:paiza:20181031110102j:plain

他にも、「靴」「デスク」「時計」…など、さまざまな絵文字が出題されるので、それと同じモノを現実世界で探して認識させていくわけです。


実際にプレイしているようすは以下の動画でチェックできます!

また、GitHubのページでは独自のモデルを構築する方法も解説されているので、ご興味ある方はぜひ挑戦してみてください!


<参考リンク>

 

■2枚の画像を組み合わせて新しい画像を生み出すAI!

Fast Style Transfer

f:id:paiza:20181031110244j:plain

画像に対して別の画像をスタイルとして組み合わせることで、2枚の画像がほどよくミックスされた新しい画像を生成してくれるWebアプリです。

これはJavaScriptで機械学習を活用したプログラミングを簡単に実現できる「ml5.js」を利用しており、事前に訓練されたモデルをベースにして新しいモデルを素早く訓練することができるAPIが提供されています。


例えば、「モナリザ」の画像に別の画像でスタイリングしてみましょう!

f:id:paiza:20181031110317j:plain


すると、こうなります!

f:id:paiza:20181031110335j:plain

スタイルとして設定した画像のエッセンスがほどよくミックスされているのが分かります。


このように、さまざまな画像を組み合わせることで非常にユニークな画像を生成できるのが面白いところでしょう。

f:id:paiza:20181031110401j:plain

ちなみに、実装で使われている「ml5.js」は公式サイトに詳細なチュートリアルが用意されているので、初めての機械学習アプリを開発する方でも簡単に始められるようになっています。


<参考リンク>

 

■カメラに映る人物の動きを特定できるAIポーズ認識!

Move Mirror

f:id:paiza:20181031110629j:plain

PCカメラの前に立ってさまざまなポーズをすると、そのポーズとピッタリ一致する画像を表示してくれるWebアプリです。

これは目・鼻・肩・ひざ…など16のパーツを認識させて、人間がどのようなポーズになっているかを特定できるように訓練された学習モデル「PoseNet」を活用したプロダクトです。


デモを試してみると、ポーズを決めた瞬間にリアルタイムで8万枚の画像からピッタリ一致するモノを表示できているのが分かります。

f:id:paiza:20181031110812j:plain

実際にはバックグラウンドで膨大な処理をしているのですが、Tensorflow.jsによってブラウザ内で処理が完結しており動作も軽快です。


実際にどのようにプレイできるのかは以下の動画でチェックできます!

ちなみに、PoseNetモデルは単純なscriptタグの追加ですぐにでもJavaScriptプログラムによって開発できるのでオススメです!


<参考リンク>

 

■動画でプログラミングが学べるpaizaラーニング


動画でプログラミングが学べるpaizaラーニングでは、Python、Java、C言語、C#、PHP、Ruby、SQL、JavaScript、HTML/CSSなど、プログラミング初心者でも動画で学べる入門レッスンを公開しています。

期間限定で無料公開中の「Python×AI・機械学習入門編」はこちらから

Python入門編」「C#入門編」「JavaScript入門編」「ITエンジニアの就活準備編」といった人気講座も完全無料となっておりますので、プログラミングを学びたい方・ITエンジニアを目指したい方はぜひごらんください。
 

■まとめ

今回は、AI・機械学習を活用したJavaScriptプロダクトについてまとめてご紹介してみました。

なかでも個人的には、記事内でご紹介した「Magenta」プロジェクトやTensorflow.jsなどのオープンソースプロジェクトがJavaScriptの可能性を非常に高めているような気がしています。

みなさんも気になったプロジェクトがあれば、ぜひGitHubのソースコードもチェックしてどのように構築されているのかを参考にしてみてください!



 

paizaラーニング」では、未経験者でもブラウザさえあれば、今すぐプログラミングの基礎が動画で学べるレッスンを多数公開しております。

詳しくはこちら

paizaラーニング

そしてpaizaでは、Webサービス開発企業などで求められるコーディング力や、テストケースを想定する力などが問われるプログラミングスキルチェック問題も提供しています。

スキルチェックに挑戦した人は、その結果によってS・A・B・C・D・Eの6段階のランクを取得できます。必要なスキルランクを取得すれば、書類選考なしで企業の求人に応募することも可能です。「自分のプログラミングスキルを客観的に知りたい」「スキルを使って転職したい」という方は、ぜひチャレンジしてみてください。

詳しくはこちら

paizaのスキルチェック





※このブログで紹介しているキャンペーンやイベント、およびサイト内の情報については、すべて記事公開時の情報となります。閲覧されたタイミングによっては状況が変わっている場合もございますのでご了承ください。

ITプログラマー・エンジニア転職・就活・学習のpaiza

プログラミング入門講座|paizaラーニング

PHP入門編Ruby入門編Python入門編Java入門編JavaScript入門編C言語入門編C#入門編アルゴリズム入門編

エンジニアのためのプログラミング転職サイト|paiza転職

プログラミング スキルチェックエンジニア求人一覧

未経験からエンジニアを目指す人の転職サイト|EN:TRY

プログラミング スキルチェックエンジニア未経験可求人一覧

エンジニアを目指す学生の就活サイト|paiza新卒

プログラミング スキルチェックエンジニア求人一覧

ブラウザを開くだけで エディタ、Webサーバ、DB等の開発環境が整う|PaizaCloud