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

Transcript

1. 在現有軟體服務中整合 Copilot 功能： Context 與 UI 的新挑戰 Kewang, Funliday
2. 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
3. 3 主題開始
4. 4 大家都愛用 GitHub Copilot
5. 5 大家都愛用 GitHub Copilot 或是 Cursor
6. 6 但今天不講 GitHub Copilot
7. 7 今天內容
8. 8 今天內容 • 跟 GitHub Copilot 完全無關 • 如何整合 Copilot 到你開發的軟體 • 如何設計 context
9. 9 先介紹一下 Funliday
10. 10 先介紹一下 Funliday 沒有要業配
12. 12 DEMO 無 copilot
13. 13 使用者遇到的問題
14. 14 使用者遇到的問題 • 不知道怎麼改停留時間
15. 15 使用者遇到的問題 • 不知道怎麼改停留時間 • 不知道怎麼改交通方式
16. 16 使用者遇到的問題 • 不知道怎麼改停留時間 • 不知道怎麼改交通方式 • 不知道怎麼移動景點
17. 17 使用者遇到的問題 • 不知道怎麼改停留時間 • 不知道怎麼改交通方式 • 不知道怎麼移動景點 • 不知道 ... 等
18. 18 使用者遇到的問題 • 不知道怎麼改停留時間 • 不知道怎麼改交通方式 • 不知道怎麼移動景點 • 不知道 ... 等 使用者一般不看 coachmark
19. 19 Funliday Copilot
20. 20 Copilot
21. 21 Copilot • 幫助使用者更有效率地完成任務
22. 22 Copilot • 幫助使用者更有效率地完成任務 • 運用 AI 來分析使用者的行為、需求和上下文， 提供即時建議或自動化部分任務
23. 23 Copilot • 幫助使用者更有效率地完成任務 • 運用 AI 來分析使用者的行為、需求和上下文， 提供即時建議或自動化部分任務 • 為了簡化流程或減少使用者的工作負擔
24. 24 Funliday Copilot 更改出發時間
25. 25 Funliday Copilot 更改停留時間
26. 26 DEMO 有 copilot
27. 27 最高原則
28. 28 最高原則 • 在目前畫面上的所有功能都要可以做到
29. 29 最高原則 • 在目前畫面上的所有功能都要可以做到 • 如果沒辦法做到，要能回饋給使用者
30. 30 發現新功能
31. 31 發現新功能 • 功能開發時，很自然就想到的拖拉天數功能
32. 32 發現新功能 • 功能開發時，很自然就想到的拖拉天數功能
33. 33 發現新功能 • 功能開發時，很自然就想到的拖拉天數功能 • 與 Copilot 對話過程中，發現天數交換很重要， 就新增了天數交換
34. 34 發現新功能
35. 35 發現新功能 • 幫我把第三天移到第五天後面
36. 36 發現新功能 • 幫我把第三天移到第五天後面 • 幫我把第三天跟第五天交換
37. 37 技術實作
38. 38 先來看張圖
40. 40 使用者利用各種方式告訴 client 要做什麼事
41. 41 client 將內容送到 server 開始解析
42. 42 用 LLM 解析會花很長時間，所以丟到 MQ
43. 43 把內容丟到 MQ 後，就趕快回傳 client 成功
44. 44 MQ 會把問句、 context 、 function call 這三者組合好之後丟去問 LLM
45. 45 LLM 會將解析完的結果回傳到 MQ 結果會有兩種， function call 或一般回應
46. 46 MQ 有原本 Client 相同 SocketIO 房間的 client 稱為 Copilot ，並將 LLM 的回應交給 Copilot
47. 47 如果回應是 function call 的話 Copilot 就會執行這個動作 ( 如新增景點 ... 等 )
48. 48 執行完 function 之後會透過 SocketIO 將結果送到同房間的其他 client
49. 49 如果 Client 跟原始發出請求的 Client 相同 就顯示 Copilot 動畫
50. 50 如果 Client 跟原始發出請求的 Client 不同 就不顯示動畫
52. 52 如何整合目前的操作
54. 54 定義 function
55. 55 定義回傳參數與原功能的參數介面
56. 56 原功能的業務邏輯
57. 57 分享一些實作要注意的地方
58. 58 要注意喔
59. 59 要注意喔 • LLM
60. 60 要注意喔 • LLM – Function call
61. 61 要注意喔 • LLM – Function call – Shift system prompt
62. 62 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context
63. 63 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check
64. 64 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check • Socket.IO
65. 65 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check • Socket.IO – client 要能分辨 copilot
66. 66 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check • Socket.IO – client 要能分辨 copilot – emit 要分開發送
67. 67 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check • Socket.IO – client 要能分辨 copilot – emit 要分開發送 • 支援多動作
68. 68 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check • Socket.IO – client 要能分辨 copilot – emit 要分開發送 • 支援多動作
69. 69 Function call
70. 70 Function call 取得特定地點的溫度
71. 71 Function call 幫景點加上別名
72. 72 Shift system prompt
73. 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 已成功為您把鼎泰豐標示為午餐 角色扮演
74. 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 已成功為您把鼎泰豐標示為午餐 把目前畫面的所有資訊加上去
75. 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 已成功為您把鼎泰豐標示為午餐 使用者輸入要執行的指令
76. 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 取出結構化資料
77. 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
78. 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 將執行結果轉換為文字回傳
79. 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 最下方 強調最新資訊
80. 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 幫我把晴空塔刪掉 加上目前的最新畫面，包括稍早的鼎泰豐午餐
81. 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 幫我把晴空塔刪掉 下一次使用者要輸入的指令
82. 82 自定義 context
83. 83 自定義 context • 畫面上的所有內容都要做為 context
84. 84 自定義 context • 畫面上的所有內容都要做為 context • API 回傳的內容 != 畫面上的內容
85. 85 自定義 context - API 資料 不知所云的欄位
86. 86 自定義 context - 翻譯後 名稱及內容讓 LLM 看的懂
87. 87 Context useless
88. 88 Context useless • 2024/10/22 ： claude 公佈 computer use
89. 89 Context useless • 2024/10/22 ： claude 公佈 computer use • 不久的將來連自行定義 context 都不用了
90. 90 支援多動作
91. 91 支援多動作 • 使用 Function call 可一次萃取多個任務
92. 92 支援多動作 • 使用 Function call 可一次萃取多個任務 • 後端同時回傳多個任務給前端
93. 93 支援多動作 • 使用 Function call 可一次萃取多個任務 • 後端同時回傳多個任務給前端 • 後端難度：同時支援新舊版的前端，同時回傳一 個或多個任務
94. 94 支援多動作 • 使用 Function call 可一次萃取多個任務 • 後端同時回傳多個任務給前端 • 後端難度：同時支援新舊版的前端，同時回傳一 個或多個任務 • 前端難度：從原本 1 個任務，變成 n 個任 務， UIUX 的挑戰變高
95. 95 結論
96. 96 結論
97. 97 結論 • Copilot 的整合帶來新行為與複合操作，豐富使 用者體驗
98. 98 結論 • Copilot 的整合帶來新行為與複合操作，豐富使 用者體驗 • 前端工程師需設計直觀介面，以提升操作效率並 避免使用者困惑
99. 99 結論 • Copilot 的整合帶來新行為與複合操作，豐富使 用者體驗 • 前端工程師需設計直觀介面，以提升操作效率並 避免使用者困惑 • 後端工程師需優化情境管理，確保 Copilot 即時 精確回應多任務需求