運用網頁共通平台創作數位內容

透過網頁體驗及開發 AI

陳信嘉

shinjia168@gmail.com

LINE ID: shinjia168

貝多芬《第十號交響曲》

Source: https://technews.tw/2021/10/10/ai-completes-beethoven-symphony-no10/

在網頁上體驗 AI 應用

在網頁上開發 AI 應用

上課前的準備

• 電腦瀏覽器 (Chrome)

• Webcam 攝影機

• 耳機或喇叭

• -------------------------------

• 挪出桌面空間，直接進網址進行體驗

在網頁上體驗 AI 應用

Part I

繪圖

Quick Draw

限時塗鴉

一種讓您挑戰畫某物的遊戲

例如 一個甜甜圈，讓神經網路猜測你在畫什麼

https://quickdraw.withgoogle.com/​

繪圖

AutoDraw

自動繪圖

人人都能快速畫圖

只要簡單的幾筆，AI 能找出類似的圖案

https://www.autodraw.com/

繪圖

Draw Together

Draw Together with a Neural Network

只要簡單幾筆，其餘交給 AI

https://magenta.tensorflow.org/assets/sketch_rnn_demo/index.html​

繪圖

Pix2Pix

手繪圖產生圖像照片

你畫一隻貓，模型會為你生成照片

但很可能是一隻令人毛骨悚然的貓

https://affinelayer.com/pixsrv/​

繪圖

Handwriting generate

手寫文字生成

利用 RNN 神經網路

讓電腦自動生成一段文字的手寫文字

http://www.cs.toronto.edu/~graves/handwriting.html​

繪圖生成

網站有問題

文字

Semantris

語義接近詞比對

根據電腦給的詞，自由輸入一個 "相關" 的詞

可以玩遊戲，也可以練英文

https://research.google.com/semantris/

文字遊戲

Cyborg Writer

機器人作家

寫一段文字，AI 將接續把後面文章完成

可以是莎士比亞或川普拜登的文筆

https://cyborg.tenso.rs/​

文字

Rap Lyrics Generating

Rap 饒舌歌詞產生器

輸入一個開場白，AI 會生成歌曲的其餘部分

https://deepbeat.org/​

文字

Talk to Books

自然語言提問題

有時搜索引擎無法回答的問題……

就是 Talk to Books 的用武之地

在讀過 100,000 本書之後，它能給出一些答案

https://books.google.com/talktobooks/

自然語言

音樂

Performance RNN

動態生成音樂

本範例需要有 MIDI 設備連接

https://magenta.tensorflow.org/demos/performance_rnn/index.html​

音樂

https://magenta.tensorflow.org/performance-rnn

Drum Machine

打鼓機器

可以製造無限循環的節奏

https://experiments.withgoogle.com/ai/drum-machine/view/​

音樂

AI Duet

AI 鋼琴二重奏

自己和 AI 即興彈奏的音樂

https://experiments.withgoogle.com/ai/ai-duet/view/​

音樂

Semi-Conductor

指揮 AI 管弦樂隊

通過瀏覽器指揮自己的管弦樂隊

移動手臂及姿態來改變音樂的速度、音量和樂器

https://semiconductor.withgoogle.com/

音樂

影像辨識

Thing Transfer

https://thing-translator.appspot.com/​

物件辨識

物件辨識

將圖像 (包含 camera) 進行種類的辨識

Rock Paper Scissors

剪刀．石頭．布

和 AI 猜拳

使用攝影機擷取手的影像進行辨識

https://tenso.rs/demos/rock-paper-scissors/​

遊戲

Head Controlled Pacman

頭部控制小精靈

轉動頭部，控制小精靈的上下左右移動

小心脖子不要扭到了！

https://jeeliz.com/demos/faceFilter/demos/pacman/​

遊戲

Whack a Mole

打鼴鼠

好像和 “打鼴鼠” 沒有直接的關係

要移動鼻子到指定的點，難度還會增加

https://vibertthio.com/posenet-whack-a-mole/​

遊戲

人臉

Face emotion

情緒表情分類

傳入圖像 (攝影機部份有問題)

可以分辨出臉部的情緒表情

https://brendansudol.com/writing/tfjs-emotions

表情辨識

人臉產生器

https://thispersondoesnotexist.com/​

圖像生成

This Person Does Not Exist

假以亂真的人臉

圖像生成

AttnGAN

http://t2i.cvalenzuelab.com/

圖像生成

Image generation machine

輸入文字描述即可繪製出一幅畫

Style-transfer

https://tenso.rs/demos/fast-neural-style/​

圖像生成

藝術風格轉換

內容與風格的融合

Deepart.io

https://deepart.io/

圖像生成

藝術風格轉換

上傳內容圖片，選擇風格

即可產生新風格的內容圖片

Jeeliz

https://jeeliz.com/sunglasses/

AR

AR 太陽眼鏡

AR (擴增實境) 的技術內包含了 AI 的人臉偵測

這裡有一系列人臉偵測應用的範例

在網頁上開發 AI 應用

Part II

兩階段：學習與預測

p5.js + ml5.js

互動科技創意藝術 + AI

機器學習模型導入

p5.js

ml5.js

繪圖視覺程式開發

https://p5js.org/​

p5.js

線上編輯程式

語法參考手冊

p5.js 實際操作

畫圓、顯示圖片、隨機亂數、滑鼠互動

https://ml5js.org/​

ml5.js

ml5.js 實際操作

• 載入模型
• imageClassfier
  • 圖片辨識
  • 影像辦識
• soundClassifier
  • Teachable Machine
  • 聲音辨識

更多的應用範例

https://runwayml.com/

Professional video editing powered by machine learning — all on the web.

CREATE IMPOSSIBLE VIDEO

RUNAWAY ML

https://www.tensorflow.org/js?hl=zh-tw​

TensorFlow for Javascript

............