跟著 AI 學習 Angular

1. 跟著 AI 學習 Angular
黃升煌 Mike Huang
多奇數位創意有限公司
Angular GDE
活用 AI 讓你輕鬆快速掌握任何知識
for NYCU GDSC

2. About Me
黃升煌 Mike
● 著作
○打通 RxJS 任督二脈
●Title
○多奇數位創意有限公司
○Angular GDE
○Microsoft MVP
● Awards
○第 12 屆 iT 邦幫忙鐵人賽冠軍
○2019 iT 邦幫忙鐵人賽優選
○2018 iT 邦幫忙鐵人賽冠軍
https://github.com/wellwind
https://www.facebook.com/fullstackledder
https://fullstackladder.dev

3. 今天的主題是
Angular & AI

4. 我只想講 AI…
其實我根本不想跟你講 Angular

5. 跟著 AI 學習 Angular
黃升煌 Mike Huang
多奇數位創意有限公司
Angular GDE
活用 AI 讓你輕鬆快速掌握任何知識
for NYCU GDSC

6. 學 Angular 不如學 AI
學會了使用 AI，想學什麼還會困難嗎？
黃升煌 Mike Huang
多奇數位創意有限公司
Angular GDE
跟著 AI 學習 Angular
活用 AI 讓你輕鬆快速掌握任何知識
for NYCU GDSC

7. https://technews.tw/2023/02/10/chatgpt-google-bard-openai/

8. 簡介 ChatGPT
當紅 AI 工具
・基於 GPT 系列模型的聊天機器人
・具有對自然語言的深度理解與生成能力
・能與客戶進行對話，回答問題

9. GPT 運作原理
搞懂原理才不會亂用
・GPT 為 Generative Pre-trained Transformer 的縮寫
・預先學習大量的文本資料，產生出預測下一個單詞、句子等的模型
・目前訓練資料只到 2021/09 為止 (可以自行訓練)
・微調成可以處理各種自然語言的任務，如語言生成、文版分類、機器翻譯等

10. ChatGPT 使用模型
・目前 ChatGPT 主要使用 GPT-3.5 模型
・付費版可以「有限制」使用 GPT-4 模型
・ GPT-4 的訓練資料更多，且推理、語言能力更強
・ GPT-4 模型本身支援文字和圖片輸入 (ChatGPT 不支援)
GPT-3.5 vs GPT-4

11. 簡單來說，就是透過一個
「文字接龍」的模型，
來產生高質量的內容！

12. 文字接龍
天
氣
空
色
才
使
真
今天的

13. 文字接龍
天
氣
空
色
才
使
真
今天的
很乾爽
很美麗
很明亮

14. 如何訓練出文字接龍模型？
1. 數據收集：網絡上收集了大量的文字數據，包括百科全書、維基百科、新聞文章、小說等等。
2. 預訓練：使用「無監督學習」的技術，對大量文本數據進行預訓練。
3. 微調：完成預訓練後，使用微調（fine-tuning）方法，將模型應用於特定的自然語言任務中。

15. ChatGPT背後「血汗工廠」：時薪40、每小時標註2萬單詞，數據標註員有多慘？
任何新穎技術早期，都是血汗

16. 雖然我不想教你 Angular，但還是看看
如何投透過 AI 學習 Angular 吧！
Demo

17. Prompting Engineering
與 AI 對話不可不知的溝通方式

18. Prompt Engineering
・Prompt Engineering：自然語言模型優化輸出的工程
・以指導者的角度提供上下文，讓自然語言模型能夠更精準的知道你的要求
・提供「角色、任務和格式」可以讓回答更貼近需求
咒語工程
角色
提供前提
任務
說明目標
格式
期望結果

19. Prompt Engineering 案例
請針對以下程式碼進行
code review 並告訴我結果
程式碼 code review
請你扮演 C# 的專家，
針對以下程式碼，根據
「可讀性、效能與安全性」
進行 code review，並告訴我結果
更加明確描述需求

20. Prompt Engineering 案例
語言偵測
限定格式
舉例說明

21. 學習與人溝通，也要學習與 AI 溝通

22. 享受一下當老闆或主管那種
只出張嘴的快感吧！
學習與人溝通，也要學習與 AI 溝通

23. 其他 AI 工具介紹

24. Midjourney
・最強大的提示文字轉圖片工具
・需付費
https://www.midjourney.com/

25. Bing Image Creator
・微軟牌圖片產生器
・免費
https://www.bing.com/images/create

26. Bing Chat
・微軟牌 AI 聊天機器人
・需要安裝 Edge 瀏覽器
・具有連結網路搜尋功能

27. Google Bard
・Google 牌 AI 聊天機器人
・具有連結網路搜尋功能
・目前不支援中文
https://bard.google.com/

28. Chat GPT 指令大全
https://www.explainthis.io/zh-hant/chatgpt/posts

29. Gamma
給予目標、基本內容，即可自動透過 AI 產生文件、簡報
https://gamma.app
Tome
比較簡易的 AI 簡報產生器
https://beta.tome.app/

30. Open AI API
找不到想要的應用？自己串 API 吧！
https://platform.openai.com/docs/introduction

31. GitHub Copilot
・目前最強的 AI 程式碼撰寫輔助工具
・ 30 天免費試用
・學生免費 (應該)
GitHub Student Developer Pack
https://github.com/features/copilot

32. 如何用正確心態面對 AI？

33. AI 是否會取代我們的工作？

34. 會！！這是是遲早的事
不過現在還不會…吧

35. https://www.businesstoday.com.tw/article/category/183015/post/202303230039/

36. AI 不一定永遠是對的

37. 給你查網路，
總結出來的資料
依然還是錯的…

38. 澄清一下，
台灣有 3 位
Angular GDE

39. Bing Chat 一定
是故意答錯的…

40. 在 AI 取代我們之前
先學習出一張嘴 駕馭 AI 的能力！

41. Thank You & QA
黃升煌 Mike Huang
多奇數位創意有限公司
Angular GDE
for NYCU GDSC
https://github.com/wellwind
https://www.facebook.com/fullstackledder
https://fullstackladder.dev