在現有軟體服務中整合 Copilot 功能：Context 與 UI 的新挑戰

Slide 1

Slide 1 text

在現有軟體服務中整合 Copilot 功能： Context 與 UI 的新挑戰 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 webconf webconf '23 '23 mopcon mopcon '14 '20 '22 '24 '14 '20 '22 '24

Slide 3

Slide 3 text

3 主題開始

Slide 4

Slide 4 text

4 大家都愛用 GitHub Copilot

Slide 5

Slide 5 text

5 大家都愛用 GitHub Copilot 或是 Cursor

Slide 6

Slide 6 text

6 但今天不講 GitHub Copilot

Slide 7

Slide 7 text

7 今天內容

Slide 8

Slide 8 text

8 今天內容 ● 跟 GitHub Copilot 完全無關 ● 如何整合 Copilot 到你開發的軟體 ● 如何設計 context

Slide 9

Slide 9 text

9 先介紹一下 Funliday

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

12 DEMO 無 copilot

Slide 13

Slide 13 text

13 使用者遇到的問題

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

19 Funliday Copilot

Slide 20

Slide 20 text

20 Copilot

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

24 Funliday Copilot 更改出發時間

Slide 25

Slide 25 text

25 Funliday Copilot 更改停留時間

Slide 26

Slide 26 text

26 DEMO 有 copilot

Slide 27

Slide 27 text

27 最高原則

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

30 發現新功能

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

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

Slide 40

Slide 40 text

40 使用者利用各種方式告訴 client 要做什麼事

Slide 41

Slide 41 text

41 client 將內容送到 server 開始解析

Slide 42

Slide 42 text

42 用 LLM 解析會花很長時間，所以丟到 MQ

Slide 43

Slide 43 text

43 把內容丟到 MQ 後，就趕快回傳 client 成功

Slide 44

Slide 44 text

44 MQ 會把問句、 context 、 function call 這三者組合好之後丟去問 LLM

Slide 45

Slide 45 text

45 LLM 會將解析完的結果回傳到 MQ 結果會有兩種， function call 或一般回應

Slide 46

Slide 46 text

46 MQ 有原本 Client 相同 SocketIO 房間的 client 稱為 Copilot ，並將 LLM 的回應交給 Copilot

Slide 47

Slide 47 text

47 如果回應是 function call 的話 Copilot 就會執行這個動作 ( 如新增景點 ... 等 )

Slide 48

Slide 48 text

48 執行完 function 之後會透過 SocketIO 將結果送到同房間的其他 client

Slide 49

Slide 49 text

49 如果 Client 跟原始發出請求的 Client 相同就顯示 Copilot 動畫

Slide 50

Slide 50 text

50 如果 Client 跟原始發出請求的 Client 不同就不顯示動畫

Slide 51

Slide 51 text

Slide 52

Slide 52 text

52 如何整合目前的操作

Slide 53

Slide 53 text

Slide 54

Slide 54 text

54 定義 function

Slide 55

Slide 55 text

55 定義回傳參數與原功能的參數介面

Slide 56

Slide 56 text

56 原功能的業務邏輯

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

58 要注意喔

Slide 59

Slide 59 text

59 要注意喔 ● LLM

Slide 60

Slide 60 text

60 要注意喔 ● LLM – Function call

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

69 Function call

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

71 Function call 幫景點加上別名

Slide 72

Slide 72 text

72 Shift system prompt

Slide 73

Slide 73 text

73 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 74

Slide 74 text

74 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 75

Slide 75 text

75 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 76

Slide 76 text

76 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 已成功為您把鼎泰豐標示為午餐 LLM 用指令與 context 取出結構化資料

Slide 77

Slide 77 text

77 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 已成功為您把鼎泰豐標示為午餐將結構化資料執行之後，回傳結果給 LLM

Slide 78

Slide 78 text

78 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 已成功為您把鼎泰豐標示為午餐 LLM 將執行結果轉換為文字回傳

Slide 79

Slide 79 text

79 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 幫我把晴空塔刪掉接續的指令將角色扮演移到 prompt 最下方強調最新資訊

Slide 80

Slide 80 text

80 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 81

Slide 81 text

81 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 82

Slide 82 text

82 自定義 context

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

85 自定義 context - API 資料不知所云的欄位

Slide 86

Slide 86 text

86 自定義 context - 翻譯後名稱及內容讓 LLM 看的懂

Slide 87

Slide 87 text

87 Context useless

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

90 支援多動作

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

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

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

95 結論

Slide 96

Slide 96 text

96 結論

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

100