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

自從 2022 年底 ChatGPT 問世以來，許多 LLM 的應用層出不窮，其中一個分支就是 copilot，無論是 Microsoft 或是 GitHub 都有推出自己的 copilot，GitHub Copilot 更是目前軟體工程師必備的好幫手，雖然大家開始跳槽到 Cursor XD

但如果要在一個軟體服務裡面加上 copilot 的話，有想過該如何實作嗎？這場分享主要會拿市面上最大的行程規劃服務，在現有的前後端軟體架構上，利用 Socket.IO 加上 message queue 完成 copilot 這種新的 UX 模式

1. 什麼是 copilot？
2. 如何在軟體服務的前後端上整合 copilot？
3. 開發 copilot 與一般 UI 操作的不同之處及注意事項

Transcript

1. 自 LLM 誕生的新 UX 模式 如何在現有軟體服務整合 copilot 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 mopcon mopcon '14 '20 '22 '14 '20 '22 webconf webconf '23 '23
4. 4 主題開始
5. 5 大家都愛用 GitHub Copilot
6. 6 大家都愛用 GitHub Copilot 或是 Cursor
7. 7 但今天不講 GitHub Copilot
8. 8 今天內容
9. 9 今天內容 • 跟 GitHub Copilot 完全無關
10. 10 今天內容 • 跟 GitHub Copilot 完全無關 • 只講如何整合 Copilot 到你開發的軟體
11. 11 今天內容 • 跟 GitHub Copilot 完全無關 • 只講如何整合 Copilot 到你開發的軟體 • Message Queue 及 Socket.IO 必備
12. 12 先介紹一下 Funliday
13. 13 先介紹一下 Funliday 沒有要業配
14. 14 Funliday
15. 15 Funliday • 專用於出遊
16. 16 Funliday • 專用於出遊 • 可以即時更新
17. 17 Funliday • 專用於出遊 • 可以即時更新 • 可以共享行程
18. 18 Funliday • 專用於出遊 • 可以即時更新 • 可以共享行程
19. 19 DEMO
20. 20 使用者遇到的問題
21. 21 使用者遇到的問題 • 不知道怎麼改停留時間
22. 22 使用者遇到的問題 • 不知道怎麼改停留時間 • 不知道怎麼改交通方式
23. 23 使用者遇到的問題 • 不知道怎麼改停留時間 • 不知道怎麼改交通方式 • 不知道怎麼移動景點
24. 24 使用者遇到的問題 • 不知道怎麼改停留時間 • 不知道怎麼改交通方式 • 不知道怎麼移動景點 • 不知道 ... 等
25. 25 使用者遇到的問題 • 不知道怎麼改停留時間 • 不知道怎麼改交通方式 • 不知道怎麼移動景點 • 不知道 ... 等 使用者一般不看 coachmark
26. 26 Funliday Copilot
27. 27 Copilot
28. 28 Copilot • 幫助使用者更有效率地完成任務
29. 29 Copilot • 幫助使用者更有效率地完成任務 • 運用 AI 來分析使用者的行為、需求和上下文， 提供即時建議或自動化部分任務
30. 30 Copilot • 幫助使用者更有效率地完成任務 • 運用 AI 來分析使用者的行為、需求和上下文， 提供即時建議或自動化部分任務 • 為了簡化流程或減少使用者的工作負擔
31. 31 Funliday Copilot 更改出發時間
32. 32 Funliday Copilot 更改停留時間
33. 33 DEMO
34. 34 最高原則
35. 35 最高原則 • 在目前畫面上的所有功能都要可以做到
36. 36 最高原則 • 在目前畫面上的所有功能都要可以做到 • 如果沒辦法做到，要能回饋給使用者
37. 37 發現新功能
38. 38 發現新功能 • 功能開發時，很自然就想到的拖拉天數功能
39. 39 發現新功能 • 功能開發時，很自然就想到的拖拉天數功能
40. 40 發現新功能 • 功能開發時，很自然就想到的拖拉天數功能 • 與 Copilot 對話過程中，發現天數交換很重要， 就新增了天數交換
41. 41 發現新功能
42. 42 發現新功能 • 幫我把第三天移到第五天後面
43. 43 發現新功能 • 幫我把第三天移到第五天後面 • 幫我把第三天跟第五天交換
45. 45 技術實作
46. 46 先來看張圖
49. 49 分享一些實作要注意的地方
50. 50 要注意喔
51. 51 要注意喔 • LLM
52. 52 要注意喔 • LLM – Function call
53. 53 要注意喔 • LLM – Function call – Shift system prompt
54. 54 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context
55. 55 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check
56. 56 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check • Socket.IO
57. 57 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check • Socket.IO – client 要能分辨 copilot
58. 58 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check • Socket.IO – client 要能分辨 copilot – emit 要分開發送
59. 59 要注意喔 • LLM – Function call – Shift system prompt – 自定義 context – 刪除動作必須 double check • Socket.IO – client 要能分辨 copilot – emit 要分開發送 • 支援多動作
60. 60 Function call
61. 61 Function call 取得特定地點的溫度
62. 62 Function call 幫景點加上別名
63. 63 Shift system prompt
64. 64 Shift system prompt no. role prompt 1 system (base) 你是行程規劃 copilot, blahblah
65. 65 Shift system prompt no. role prompt 1 system (base) 你是行程規劃 copilot, blahblah 2 system (context) {"context":{"pois":[{"id":123,"name":" 鼎泰豐 "}, {"id":456,"name":" 晴空塔 "}]}}
66. 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 幫我把鼎泰豐標示為午餐
67. 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":" 午餐 "}}
68. 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}"}
69. 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 已成功為您把鼎泰豐標示為午餐
70. 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 已成功為您把鼎泰豐標示為午餐
71. 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
72. 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":" 晴空塔 "}]}}
73. 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 幫我把晴空塔刪掉
74. 74 自定義 context
75. 75 自定義 context • 畫面上的所有內容都要做為 context
76. 76 自定義 context • 畫面上的所有內容都要做為 context • API 回傳的內容 != 畫面上的內容
77. 77 自定義 context
78. 78 自定義 context
79. 79 Context useless
80. 80 Context useless • 2024/10/22 ： claude 公佈 computer use
81. 81 Context useless • 2024/10/22 ： claude 公佈 computer use • 不久的將來連自行定義 context 都不用了
82. 82 Context useless • 2024/10/22 ： claude 公佈 computer use • 不久的將來連自行定義 context 都不用了 – 將來快到了 ...
83. 83 支援多動作
84. 84 支援多動作 • 使用 Function call 可一次萃取多個任務
85. 85 支援多動作 • 使用 Function call 可一次萃取多個任務 • 後端同時回傳多個任務給前端
86. 86 支援多動作 • 使用 Function call 可一次萃取多個任務 • 後端同時回傳多個任務給前端 • 後端難度：同時支援新舊版的前端，同時回傳一 個或多個任務
87. 87 支援多動作 • 使用 Function call 可一次萃取多個任務 • 後端同時回傳多個任務給前端 • 後端難度：同時支援新舊版的前端，同時回傳一 個或多個任務 • 前端難度：從原本 1 個任務，變成 n 個任 務， UIUX 的挑戰變高
88. 88 結論
89. 89 結論
90. 90 結論 • Copilot 的整合帶來新行為與複合操作，豐富使 用者體驗
91. 91 結論 • Copilot 的整合帶來新行為與複合操作，豐富使 用者體驗 • 前端工程師需設計直觀介面，以提升操作效率並 避免使用者困惑
92. 92 結論 • Copilot 的整合帶來新行為與複合操作，豐富使 用者體驗 • 前端工程師需設計直觀介面，以提升操作效率並 避免使用者困惑 • 後端工程師需優化情境管理，確保 Copilot 即時 精確回應多任務需求
93. 93 Advanced - WebConf 2024 • 在現有軟體服務中整合 Copilot 功能： Context 與 UI 的新挑戰 • 整合 Copilot 功能的挑戰與解決策略 • 情境對 Copilot 效果的影響 • 創新的 UI 設計