自 LLM 誕生的新 UX 模式，如何在現有軟體服務整合 copilot

Slide 1

Slide 1 text

自 LLM 誕生的新 UX 模式如何在現有軟體服務整合 copilot Kewang, Funliday

Slide 2

Slide 2 text

Kewang ● 王慕羣 Kewang ● JavaScript / Java ● PostgreSQL / MongoDB / Elasticsearch / HBase ● Git / DevOps ● 熱愛開源 Linkedin Linkedin kewangtw kewangtw SlideShare SlideShare kewang kewang Gmail Gmail cpckewang cpckewang Facebook Facebook Kewang 的資訊進化論 Kewang 的資訊進化論 devopsday taipei devopsday taipei '17 '17 hadoopcon hadoopcon '14 '15 '14 '15 jcconf jcconf '16 '17 '18 '16 '17 '18 GitHub GitHub kewang kewang Funliday Funliday kewang kewang modernweb modernweb '18 '19 '20 '21 '18 '19 '20 '21 coscup coscup '20 '21 '20 '21 mopcon mopcon '14 '20 '22 '14 '20 '22 webconf webconf '23 '23

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

4 主題開始

Slide 5

Slide 5 text

5 大家都愛用 GitHub Copilot

Slide 6

Slide 6 text

6 大家都愛用 GitHub Copilot 或是 Cursor

Slide 7

Slide 7 text

7 但今天不講 GitHub Copilot

Slide 8

Slide 8 text

8 今天內容

Slide 9

Slide 9 text

9 今天內容 ● 跟 GitHub Copilot 完全無關

Slide 10

Slide 10 text

10 今天內容 ● 跟 GitHub Copilot 完全無關 ● 只講如何整合 Copilot 到你開發的軟體

Slide 11

Slide 11 text

11 今天內容 ● 跟 GitHub Copilot 完全無關 ● 只講如何整合 Copilot 到你開發的軟體 ● Message Queue 及 Socket.IO 必備

Slide 12

Slide 12 text

12 先介紹一下 Funliday

Slide 13

Slide 13 text

13 先介紹一下 Funliday 沒有要業配

Slide 14

Slide 14 text

14 Funliday

Slide 15

Slide 15 text

15 Funliday ● 專用於出遊

Slide 16

Slide 16 text

16 Funliday ● 專用於出遊 ● 可以即時更新

Slide 17

Slide 17 text

17 Funliday ● 專用於出遊 ● 可以即時更新 ● 可以共享行程

Slide 18

Slide 18 text

18 Funliday ● 專用於出遊 ● 可以即時更新 ● 可以共享行程

Slide 19

Slide 19 text

19 DEMO

Slide 20

Slide 20 text

20 使用者遇到的問題

Slide 21

Slide 21 text

21 使用者遇到的問題 ● 不知道怎麼改停留時間

Slide 22

Slide 22 text

22 使用者遇到的問題 ● 不知道怎麼改停留時間 ● 不知道怎麼改交通方式

Slide 23

Slide 23 text

23 使用者遇到的問題 ● 不知道怎麼改停留時間 ● 不知道怎麼改交通方式 ● 不知道怎麼移動景點

Slide 24

Slide 24 text

24 使用者遇到的問題 ● 不知道怎麼改停留時間 ● 不知道怎麼改交通方式 ● 不知道怎麼移動景點 ● 不知道 ... 等

Slide 25

Slide 25 text

25 使用者遇到的問題 ● 不知道怎麼改停留時間 ● 不知道怎麼改交通方式 ● 不知道怎麼移動景點 ● 不知道 ... 等使用者一般不看 coachmark

Slide 26

Slide 26 text

26 Funliday Copilot

Slide 27

Slide 27 text

27 Copilot

Slide 28

Slide 28 text

28 Copilot ● 幫助使用者更有效率地完成任務

Slide 29

Slide 29 text

29 Copilot ● 幫助使用者更有效率地完成任務 ● 運用 AI 來分析使用者的行為、需求和上下文，提供即時建議或自動化部分任務

Slide 30

Slide 30 text

30 Copilot ● 幫助使用者更有效率地完成任務 ● 運用 AI 來分析使用者的行為、需求和上下文，提供即時建議或自動化部分任務 ● 為了簡化流程或減少使用者的工作負擔

Slide 31

Slide 31 text

31 Funliday Copilot 更改出發時間

Slide 32

Slide 32 text

32 Funliday Copilot 更改停留時間

Slide 33

Slide 33 text

33 DEMO

Slide 34

Slide 34 text

34 最高原則

Slide 35

Slide 35 text

35 最高原則 ● 在目前畫面上的所有功能都要可以做到

Slide 36

Slide 36 text

36 最高原則 ● 在目前畫面上的所有功能都要可以做到 ● 如果沒辦法做到，要能回饋給使用者

Slide 37

Slide 37 text

37 發現新功能

Slide 38

Slide 38 text

38 發現新功能 ● 功能開發時，很自然就想到的拖拉天數功能

Slide 39

Slide 39 text

39 發現新功能 ● 功能開發時，很自然就想到的拖拉天數功能

Slide 40

Slide 40 text

40 發現新功能 ● 功能開發時，很自然就想到的拖拉天數功能 ● 與 Copilot 對話過程中，發現天數交換很重要，就新增了天數交換

Slide 41

Slide 41 text

41 發現新功能

Slide 42

Slide 42 text

42 發現新功能 ● 幫我把第三天移到第五天後面

Slide 43

Slide 43 text

43 發現新功能 ● 幫我把第三天移到第五天後面 ● 幫我把第三天跟第五天交換

Slide 44

Slide 44 text

Slide 45

Slide 45 text

45 技術實作

Slide 46

Slide 46 text

46 先來看張圖

Slide 47

Slide 47 text

Slide 48

Slide 48 text

Slide 49

Slide 49 text

49 分享一些實作要注意的地方

Slide 50

Slide 50 text

50 要注意喔

Slide 51

Slide 51 text

51 要注意喔 ● LLM

Slide 52

Slide 52 text

52 要注意喔 ● LLM – Function call

Slide 53

Slide 53 text

53 要注意喔 ● LLM – Function call – Shift system prompt

Slide 54

Slide 54 text

54 要注意喔 ● LLM – Function call – Shift system prompt – 自定義 context

Slide 55

Slide 55 text

55 要注意喔 ● LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check

Slide 56

Slide 56 text

56 要注意喔 ● LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check ● Socket.IO

Slide 57

Slide 57 text

57 要注意喔 ● LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check ● Socket.IO – client 要能分辨 copilot

Slide 58

Slide 58 text

58 要注意喔 ● LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check ● Socket.IO – client 要能分辨 copilot – emit 要分開發送

Slide 59

Slide 59 text

59 要注意喔 ● LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check ● Socket.IO – client 要能分辨 copilot – emit 要分開發送 ● 支援多動作

Slide 60

Slide 60 text

60 Function call

Slide 61

Slide 61 text

61 Function call 取得特定地點的溫度

Slide 62

Slide 62 text

62 Function call 幫景點加上別名

Slide 63

Slide 63 text

63 Shift system prompt

Slide 64

Slide 64 text

64 Shift system prompt no. role prompt 1 system (base) 你是行程規劃 copilot, blahblah

Slide 65

Slide 65 text

65 Shift system prompt no. role prompt 1 system (base) 你是行程規劃 copilot, blahblah 2 system (context) {"context":{"pois":[{"id":123,"name":" 鼎泰豐 "}, {"id":456,"name":" 晴空塔 "}]}}

Slide 66

Slide 66 text

66 Shift system prompt no. role prompt 1 system (base) 你是行程規劃 copilot, blahblah 2 system (context) {"context":{"pois":[{"id":123,"name":" 鼎泰豐 "}, {"id":456,"name":" 晴空塔 "}]}} 3 user 幫我把鼎泰豐標示為午餐

Slide 67

Slide 67 text

67 Shift system prompt no. role prompt 1 system (base) 你是行程規劃 copilot, blahblah 2 system (context) {"context":{"pois":[{"id":123,"name":" 鼎泰豐 "}, {"id":456,"name":" 晴空塔 "}]}} 3 user 幫我把鼎泰豐標示為午餐 4 assistant {"id":"call_id_test","arguments": {"id":123,"name":" 鼎泰豐 ","alias":" 午餐 "}}

Slide 68

Slide 68 text

68 Shift system prompt no. role prompt 1 system (base) 你是行程規劃 copilot, blahblah 2 system (context) {"context":{"pois":[{"id":123,"name":" 鼎泰豐 "}, {"id":456,"name":" 晴空塔 "}]}} 3 user 幫我把鼎泰豐標示為午餐 4 assistant {"id":"call_id_test","arguments": {"id":123,"name":" 鼎泰豐 ","alias":" 午餐 "}} 5 tool*n {"id":"call_id_test","content":"{\"success\":true}"}

Slide 69

Slide 69 text

69 Shift system prompt no. role prompt 1 system (base) 你是行程規劃 copilot, blahblah 2 system (context) {"context":{"pois":[{"id":123,"name":" 鼎泰豐 "}, {"id":456,"name":" 晴空塔 "}]}} 3 user 幫我把鼎泰豐標示為午餐 4 assistant {"id":"call_id_test","arguments": {"id":123,"name":" 鼎泰豐 ","alias":" 午餐 "}} 5 tool*n {"id":"call_id_test","content":"{\"success\":true}"} 6 assistant 已成功為您把鼎泰豐標示為午餐

Slide 70

Slide 70 text

70 Shift system prompt no. role prompt 3 user 幫我把鼎泰豐標示為午餐 4 assistant {"id":"call_id_test","arguments": {"id":123,"name":" 鼎泰豐 ","alias":" 午餐 "}} 5 tool*n {"id":"call_id_test","content":"{\"success\":true}"} 6 assistant 已成功為您把鼎泰豐標示為午餐

Slide 71

Slide 71 text

71 Shift system prompt no. role prompt 3 user 幫我把鼎泰豐標示為午餐 4 assistant {"id":"call_id_test","arguments": {"id":123,"name":" 鼎泰豐 ","alias":" 午餐 "}} 5 tool*n {"id":"call_id_test","content":"{\"success\":true}"} 6 assistant 已成功為您把鼎泰豐標示為午餐 7 system (base) 你是行程規劃 copilot, blahblah

Slide 72

Slide 72 text

72 Shift system prompt no. role prompt 3 user 幫我把鼎泰豐標示為午餐 4 assistant {"id":"call_id_test","arguments": {"id":123,"name":" 鼎泰豐 ","alias":" 午餐 "}} 5 tool*n {"id":"call_id_test","content":"{\"success\":true}"} 6 assistant 已成功為您把鼎泰豐標示為午餐 7 system (base) 你是行程規劃 copilot, blahblah 8 system (context) {"context":{"pois":[{"id":123,"name":" 鼎泰豐 ","alias":" 午餐 "},{"id":456,"name":" 晴空塔 "}]}}

Slide 73

Slide 73 text

73 Shift system prompt no. role prompt 3 user 幫我把鼎泰豐標示為午餐 4 assistant {"id":"call_id_test","arguments": {"id":123,"name":" 鼎泰豐 ","alias":" 午餐 "}} 5 tool*n {"id":"call_id_test","content":"{\"success\":true}"} 6 assistant 已成功為您把鼎泰豐標示為午餐 7 system (base) 你是行程規劃 copilot, blahblah 8 system (context) {"context":{"pois":[{"id":123,"name":" 鼎泰豐 ","alias":" 午餐 "},{"id":456,"name":" 晴空塔 "}]}} 9 user 幫我把晴空塔刪掉

Slide 74

Slide 74 text

74 自定義 context

Slide 75

Slide 75 text

75 自定義 context ● 畫面上的所有內容都要做為 context

Slide 76

Slide 76 text

76 自定義 context ● 畫面上的所有內容都要做為 context ● API 回傳的內容 != 畫面上的內容

Slide 77

Slide 77 text

77 自定義 context

Slide 78

Slide 78 text

78 自定義 context

Slide 79

Slide 79 text

79 Context useless

Slide 80

Slide 80 text

80 Context useless ● 2024/10/22 ： claude 公佈 computer use

Slide 81

Slide 81 text

81 Context useless ● 2024/10/22 ： claude 公佈 computer use ● 不久的將來連自行定義 context 都不用了

Slide 82

Slide 82 text

82 Context useless ● 2024/10/22 ： claude 公佈 computer use ● 不久的將來連自行定義 context 都不用了 – 將來快到了 ...

Slide 83

Slide 83 text

83 支援多動作

Slide 84

Slide 84 text

84 支援多動作 ● 使用 Function call 可一次萃取多個任務

Slide 85

Slide 85 text

85 支援多動作 ● 使用 Function call 可一次萃取多個任務 ● 後端同時回傳多個任務給前端

Slide 86

Slide 86 text

86 支援多動作 ● 使用 Function call 可一次萃取多個任務 ● 後端同時回傳多個任務給前端 ● 後端難度：同時支援新舊版的前端，同時回傳一個或多個任務

Slide 87

Slide 87 text

87 支援多動作 ● 使用 Function call 可一次萃取多個任務 ● 後端同時回傳多個任務給前端 ● 後端難度：同時支援新舊版的前端，同時回傳一個或多個任務 ● 前端難度：從原本 1 個任務，變成 n 個任務， UIUX 的挑戰變高

Slide 88

Slide 88 text

88 結論

Slide 89

Slide 89 text

89 結論

Slide 90

Slide 90 text

90 結論 ● Copilot 的整合帶來新行為與複合操作，豐富使用者體驗

Slide 91

Slide 91 text

91 結論 ● Copilot 的整合帶來新行為與複合操作，豐富使用者體驗 ● 前端工程師需設計直觀介面，以提升操作效率並避免使用者困惑

Slide 92

Slide 92 text

92 結論 ● Copilot 的整合帶來新行為與複合操作，豐富使用者體驗 ● 前端工程師需設計直觀介面，以提升操作效率並避免使用者困惑 ● 後端工程師需優化情境管理，確保 Copilot 即時精確回應多任務需求

Slide 93

Slide 93 text

93 Advanced - WebConf 2024 ● 在現有軟體服務中整合 Copilot 功能： Context 與 UI 的新挑戰 ● 整合 Copilot 功能的挑戰與解決策略 ● 情境對 Copilot 效果的影響 ● 創新的 UI 設計