🔍 搜尋結果:聊天

🔍 搜尋結果:聊天

您可以在開源中貢獻這 25 個專案

受資助計畫的聲譽非常好,因為它們獲得了大量資金並得到了風險投資的支持。 有很多開源專案,你絕對應該為這些專案做出貢獻,特別是因為它們的可信度要高得多。 也許你有機會獲得直接的工作機會,畢竟你真的不知道誰在開源中關注你! 我只保留了活躍的專案(最後一次提交不到 2 個月),所以它會很有用。讓我們保持簡短和直接。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 資料和人工智慧演算法融入生產級網路應用程式。 -------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) Taipy 是用於輕鬆、端到端應用程式開發的完美 Python 程式庫,具有假設分析、智慧型管道執行、內建調度和部署工具。 它用於為基於 Python 的資料和人工智慧應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能,而 Taipy 是完美的選擇,尤其是與 Streamlit 相比。您可以閱讀 Marktechpost 發表的[Taipy 與 Streamlit](https://www.marktechpost.com/2024/03/15/taipy-vs-streamlit-navigating-the-best-path-to-build-python-data-ai-web-applications-with-multi-user-capability-large-data-support-and-ui-design-flexibility/)的詳細比較。 - 💰 獲得總資金 500 萬美元。 - 🚀 使用的主要語言是Python。 Taipy 在 GitHub 上有近 10k 顆星,並且正在發布`v3.1`版本。 https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 2. [Hoppscotch](https://github.com/hoppscotch/hoppscotch) - API 開發生態系統。 ----------------------------------------------------------------------- ![跳房子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75cjol6454uvrnth524y.png) Hoppscotch 是一個輕量級、基於 Web 的 API 開發套件。它是從頭開始建置的,考慮到了易用性和可存取性。 Hoppscotch 與 Postman 非常相似,但提供了一些不同的功能。這就是儀表板的樣子,您可以在[hoppscotch.io](https://hoppscotch.io/)上進行即時測試。 ![跳房子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2f6ck92qdpd99in6wav.png) 即使測試本機 API,Postman 也要求您保持線上狀態。使用 Hoppscotch,您可以在沒有網路連線的情況下使用 API。 甚至 Web 應用程式也可以透過本機快取離線執行並充當 PWA,讓您可以隨時隨地測試 API! Hoppscotch 也提供私人工作空間。請參閱[完整功能清單](https://github.com/hoppscotch/hoppscotch?tab=readme-ov-file#features)。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d36kmr72z11h71nnvhf5.png) 最好的部分也是必要的部分是他們提供完整的[文件](https://docs.hoppscotch.io/),其中包括指南、文章、支援和變更日誌,以便您可以在這裡看到所有內容。 ![2023年已結束](https://hoppscotch.com/images/blog-hoppscotch-wrapped-2023.png) - 💰 獲得總資金 300 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Hoppscotch 在 GitHub 上擁有超過 60k 顆星,有 300 多個活躍問題和 200 多個貢獻者。 https://github.com/hoppscotch/hoppscotch 明星跳房子 ⭐️ --- 3. [Daily](https://github.com/dailydotdev/daily) - 每個開發者都值得擁有的首頁。 ----------------------------------------------------------------- ![日常的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qvzd1auk8wet7vv5ev37.png) 這是一個專業網絡,您可以在其中閱讀與開發者生態系統相關的文章和個人化動態訊息。 他們匯總了來自許多組織(例如 Hacker News、Dev、Hashnode 等)的各種主題的有價值的帖子。您可以投票、加書籤,甚至建立自己的小隊。 ![小隊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iqqkl42pja53ssywltyl.png) 我是其中一些功能的粉絲,如果我解釋所有內容,我會花費幾個小時,所以最好檢查一下。 這是我個人最喜歡的開源專案之一。你可以查看我的[每日個人資料](https://app.daily.dev/anmolbaranwal)。 - 💰 獲得總資金 1100 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Dailydotdev 在 GitHub 上擁有 17k+ 顆星。 https://github.com/dailydotdev/daily 明星日報 ⭐️ --- 4. [Requestly](https://github.com/requestly/requestly) - 瀏覽器的 HTTP 攔截器。 ----------------------------------------------------------------------- ![請求地](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1jnfzpqe827qxm11a1tm.png) Requestly 的建置是為了透過攔截和修改 HTTP 請求來節省開發人員的時間。 Requestly 為前端開發人員提供必要的工具和整合協助,幫助他們以 10 倍的速度編寫、測試和偵錯程式碼。 Requestly 減少了對後端開發人員和開發和測試需求環境的依賴。 使用 Requestly,開發人員可以建立模擬、測試、驗證和覆蓋 API 回應,修改請求和回應標頭,設定重定向(映射本機、映射遠端),並使用 Requestly 會話進行更快的偵錯。 您可以看到[完整功能](https://github.com/requestly/requestly?tab=readme-ov-file#-features)的清單。 - 💰 獲得 50 萬美元的種子資金。 - 🚀 使用的主要語言是 TypeScript。 Requestly 在 GitHub 上擁有超過 1,800 顆星,並且正在快速成長。 https://github.com/requestly/requestly 為請求加星號 ⭐️ --- 5.[重新發送](https://github.com/resend)- 給開發人員的電子郵件。 ------------------------------------------------ ![重發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7diqqs4n4yrshxf22l3.png) 電子郵件可能是人們溝通的最重要的媒介。然而,我們需要停止像 2010 年那樣開發電子郵件,並重新思考 2022 年及以後如何開發電子郵件。它應該針對我們今天建立網頁應用程式的方式進行現代化。 他們提供了許多與我們正在使用的技術堆疊相對應的不同儲存庫。請隨意探索其中每一個。 ![重新發送集成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4jmx7q5i4wrsnwgcuvwk.png) - 💰 獲得 350 萬美元種子資金。 - 🚀 使用的主要語言是 TypeScript(React 電子郵件)。 Resend(React email)在 GitHub 上擁有超過 12,500 顆星,並被超過 7,500 名開發者使用。 https://github.com/resend 星標重新發送 ⭐️ --- 6. [Buildship](https://github.com/rowyio/buildship/) - 由人工智慧驅動的低程式碼視覺後端建構器。 --------------------------------------------------------------------------- ![建造船](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzlrynz5xephv4t9layd.png) 對於您正在使用無程式碼應用程式建構器(FlutterFlow、Webflow、Framer、Adalo、Bubble、BravoStudio...)或前端框架(Next.js、React、Vue...)建立的應用程式,您需要一個後端來支援可擴展的 API、安全工作流程、自動化等。 BuildShip 為您提供了一種完全視覺化的方式,可以在易於使用的完全託管體驗中可擴展地建立這些後端任務。 這意味著您無需在雲端平台上爭論或部署事物或執行 DevOps。只需立即建造和發貨 🚀 他們甚至與 TypeSense 合作並且發展得非常快! ![建造船](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6oc3rc713mjg9cwqj7d4.png) 我嘗試過Buildship,它很強大。 - 💰 私人資金(由 Google、Vercel、Figma 等支持)。 - 🚀 使用的主要語言是 TypeScript。 它在 GitHub 上有 260 多顆星,使用 Rowy 完成,有 5800 顆星。 https://github.com/rowyio/buildship/ 明星 BuildShip ⭐️ --- 7. [Cal](https://github.com/calcom/cal.com) - 為所有人安排基礎設施。 --------------------------------------------------------- ![卡爾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ccagnexb805xzpewfy5.png) 這是有史以來最活躍的專案之一。我也透過 Cal 的 Algora 看過很多付費演出。 早些時候,我使用 Calendly,但我將其切換到 Cal,特別是因為它們在您可以建立的連結方面提供了更大的靈活性。 例如,我有一個協作連結,人們可以在其中選擇會議的持續時間並修復其他連結中的時間安排。您可以將其附加到幾乎所有應用程式,例如 GMeet、Zoom,如果您想參加付費會議,甚至可以同步付款。應用程式整合的[總選項](https://cal.com/apps)幾乎令人難以置信:) ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/anesuu0ux6ejz886irnt.png) 您可以做很多事情,包括自動化工作流程,所以只需檢查一下即可。 ![工作流程儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc0x5vq54joov98wwq9h.png) - 💰 獲得總資金(A 輪)3240 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Cal 在 GitHub 上擁有超過 29,000 顆星,並擁有超過 600 名貢獻者。 https://github.com/calcom/cal.com Star Cal ⭐️ --- 8. [Penpot](https://github.com/penpot/penpot) - 完美協作的設計工具。 ---------------------------------------------------------- ![筆筒](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mooryn8zodod2mkpzefn.png) Penpot 是第一個用於設計和程式碼協作的開源設計工具。設計師可以大規模建立令人驚嘆的設計、互動式原型和設計系統,而開發人員則可以享受現成的程式碼,並使他們的工作流程變得簡單、快速。所有這一切都沒有任何切換戲劇性的情況。 完全免費並符合開放標準(SVG、CSS 和 HTML)。 一次性查看[庫、模板](https://penpot.app/libraries-templates)和[功能](https://penpot.app/features)的清單。 觀看以下影片體驗`Penpot 2.0` 。 - 💰 獲得總資金 800 萬美元。 - 🚀 使用的主要語言是 Clojure。 Penpot 在 GitHub 上擁有超過 28,500 顆星,目前已發布`v2.0`版本。 https://github.com/penpot/penpot 星星筆罐 ⭐️ --- 9. [Appsmith](https://github.com/appsmithorg/appsmith) - 建立管理面板、內部工具和儀表板的平台。 ---------------------------------------------------------------------------- ![應用史密斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rt7s0r3wz2leec83cl17.png) 管理面板和儀表板是任何軟體創意(在大多數情況下)的一些常見部分,我嘗試從頭開始建立它,這會帶來很多痛苦和不必要的辛苦工作。 您可能已經看到組織建立了內部應用程式,例如儀表板、資料庫 GUI、管理面板、批准應用程式、客戶支援儀表板等,以幫助其團隊執行日常操作。正如我所說,Appsmith 是一個開源工具,可以實現這些內部應用程式的快速開發。 首先,請觀看這個 YouTube 影片,該影片在 100 秒內解釋了 Appsmith。 嵌入 https://www.youtube.com/watch?v=NnaJdA1A11s 他們提供拖放小部件來建立 UI。 您可以使用 45 多個可自訂的小工具在幾分鐘內建立漂亮的響應式 UI,而無需編寫一行 HTML/CSS。尋找[小部件的完整清單](https://www.appsmith.com/widgets)。 ![按鈕點擊小工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqpnnslvsvjl4gifseon.png) ![驗證](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/489fly7tvknz2uv2mgei.png) 您可以閱讀[文件](https://docs.appsmith.com/)並使用這[20 多個範本](https://www.appsmith.com/templates)中的任何一個,以便您可以快速入門。 - 💰 獲得 500 萬美元種子資金。 - 🚀 使用的主要語言是 TypeScript。 Appsmith 在 GitHub 上擁有超過 32k 顆星,發布了 200 多個版本。 https://github.com/appsmithorg/appsmith Star Appsmith ⭐️ --- 10.[二十](https://github.com/twentyhq/twenty)- Salesforce 的現代替代品。 --------------------------------------------------------------- ![二十](https://framerusercontent.com/images/oclg8rdRgBnzeLnSJOfettLFjI.webp) 我們花了數千個小時來研究Pipedrive 和Salesforce 等傳統CRM,以使它們與我們的業務需求保持一致,但最終卻感到沮喪——定制非常複雜,而且這些平台的封閉生態系統可能會讓人感到受到限制。 Twenty 是一個現代化、功能強大、價格實惠的平台,用於管理您的客戶關係。您可以閱讀[使用者指南](https://twenty.com/user-guide)。 ![二十](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tucrt5pk9piyswnt9q77.png) - 💰 獲得 75.9 萬美元的種子資金。 - 🚀 使用的主要語言是 TypeScript。 Twenty 在 GitHub 上擁有超過 14,500 顆星,擁有 200 多名貢獻者。 https://github.com/twentyhq/twenty 二十星 ⭐️ --- 11.[繼續](https://github.com/continuedev/continue)-AI程式碼助手。 -------------------------------------------------------- ![繼續 gif](https://github.com/continuedev/continue/raw/main/docs/static/img/understand.gif) Continue 是領先的開源 AI 程式碼助理。您可以連接任何模型和任何上下文,以在[VS Code](https://marketplace.visualstudio.com/items?itemName=Continue.continue)和[JetBrains](https://plugins.jetbrains.com/plugin/22707-continue-extension)內建立自訂自動完成和聊天體驗。 > 選項卡可自動完成程式碼建議。 ![自動完成 gif](https://github.com/continuedev/continue/raw/main/docs/static/img/autocomplete.gif) > 重構您正在編碼的函數。 ![重構影像](https://github.com/continuedev/continue/raw/main/docs/static/img/inline.gif) > 詢問有關您的程式碼庫的問題。 ![程式碼庫](https://github.com/continuedev/continue/raw/main/docs/static/img/codebase.gif) > 快速使用文件作為上下文 ![文件上下文 gif](https://github.com/continuedev/continue/raw/main/docs/static/img/docs.gif) 閱讀[快速入門指南](https://docs.continue.dev/quickstart)。 - 💰 獲得 210 萬美元種子資金。 - 🚀 使用的主要語言是 TypeScript。 Continue 在 GitHub 上有 12k+ 顆星,並且發布了`v0.8`版本。 https://github.com/continuedev/continue 星繼續 ⭐️ --- [12.Refine](https://github.com/refinedev/refine) - 面向企業的開源 Retool。 ------------------------------------------------------------------ ![精煉](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wsti2yfikrhc9nggov5.png) Refine 是一個元 React 框架,可以快速開發各種 Web 應用程式。 從內部工具到管理面板、B2B 應用程式和儀表板,它可作為建立任何類型的 CRUD 應用程式(例如 DevOps 儀表板、電子商務平台或 CRM 解決方案)的全面解決方案。 ![電子商務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xry9381y4s36emgb9psr.png) 您可以在一分鐘內使用單一 CLI 命令進行設定。 它具有適用於 15 多個後端服務的連接器,包括 Hasura、Appwrite 等。 但最好的部分是,Refine `headless by design` ,從而提供無限的樣式和自訂選項。 你可以看到[模板](https://refine.dev/templates/)。 ![範本](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/87vbx5tqyicb9gmgirka.png) - 💰 獲得總資金 380 萬美元。 - 🚀 使用的主要語言是 TypeScript。 它們在 GitHub 上擁有大約 25,000 顆星,並被超過 3,000 名開發人員使用。 https://github.com/refinedev/refine 星際精煉 ⭐️ --- 13. [Revideo](https://github.com/redotvideo/revideo) - 使用程式碼建立影片。 ----------------------------------------------------------------- ![審查](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttwzahj6kfgllj0aknt1.png) Revideo 是一個用於程式化影片編輯的開源框架。它是從令人驚嘆的 Motion Canvas 編輯器分叉出來的,將其從獨立的應用程式轉變為開發人員可以用來建立整個影片編輯應用程式的庫。 Revideo 可讓您在 Typescript 中建立視訊範本並部署 API 端點以使用動態輸入呈現它們。它還提供了一個React播放器元件來即時預覽瀏覽器中的變化。 - 💰 獲得總資金 500 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Revideo 在 GitHub 上有 1.2k 顆星,活躍問題非常少。簡而言之,這是一個完美的、不那麼擁擠的貢獻專案。 https://github.com/redotvideo/revideo 明星重錄 ⭐️ --- 14.[百萬](https://github.com/aidenybai/million)- 讓你的 React 速度提高 70%。 ------------------------------------------------------------------ ![百萬](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afs9dm1eujmajxn0rng9.png) Million.js 是一個極其快速且輕量級的最佳化編譯器,可將元件速度提高 70%。自己探索吧! ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vozcs5gd57rwlp3jjmr4.png) - 💰 獲得總計 50 萬美元的資金。 - 🚀 使用的主要語言是 TypeScript。 Million 在 GitHub 上擁有超過 15,500 顆星,並被超過 3000 名開發者使用。 https://github.com/aidenybai/million 明星百萬⭐️ --- 15. [FlowiseAI](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 ------------------------------------------------------------------------------ ![弗洛伊薩伊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5bp43nil764fhe4a05z.png) Flowise 是一款開源 UI 視覺化工具,用於建立客製化的 LLM 編排流程和 AI 代理程式。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ahk2ovjrpq1qk3r5pfot.png) 您可以閱讀[文件](https://docs.flowiseai.com/)。 ![流程化人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/trkltpn5lk1y1pte0smd.png) - 💰 從 YCombinator 獲得資金(不知道多少)。 - 🚀 使用的主要語言是 TypeScript。 FlowiseAI 在 GitHub 上擁有超過 26,500 個 Star,並擁有超過 13,000 個分叉,因此具有良好的整體比率。 https://github.com/FlowiseAI/Flowise 明星 FlowiseAI ⭐️ --- 16.[觸發器](https://github.com/triggerdotdev/trigger.dev)——後台作業平台。 --------------------------------------------------------------- ![扳機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iaoox3qwmc397x9ckmw4.png) Trigger.dev v3 可以輕鬆編寫可靠的長時間執行任務而不會逾時。 在它們所屬的地方建立作業:在您的程式碼庫中。像您已經習慣的那樣進行版本控制、本地主機、測試、審查和部署。 您可以選擇在自己的基礎架構上使用觸發器雲端或自架觸發器。 閱讀文件中的[快速入門指南](https://trigger.dev/docs/v3/quick-start)。 - 💰 獲得總資金 300 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Trigger 在 GitHub 上有 7,500 顆星,目前已發布`v3.1`版本。 https://github.com/triggerdotdev/trigger.dev 星觸發器 ⭐️ --- 17. [Tiptap](https://github.com/ueberdosis/tiptap) - 無頭富文本編輯器框架。 ---------------------------------------------------------------- ![尖擊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdtmi7do65ks6f2mpsjd.png) Tiptap 編輯器是一個無頭、與框架無關的富文本編輯器,可以透過擴充功能進行自訂和擴充。它的無頭性質意味著它沒有固定的使用者介面,提供完全的設計自由(要快速入門,請參閱下面連結的 UI 模板)。 Tiptap 是基於高度可靠的 ProseMirror 庫。 Tiptap Editor 得到協作開源後端 Hocuspocus 的補充。 Editor 和 Hocuspocus 構成了 Tiptap Suite 的基礎。 我建議閱讀包含[範例](https://tiptap.dev/docs/editor/examples/default)和詳細程式碼的[文件](https://tiptap.dev/docs/editor/introduction)。 - 💰 獲得總資金 260 萬美元。 - 🚀 使用的主要語言是 TypeScript。 ![尖擊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/20c83ios6ugr1q6blqfq.png) Tiptap 在 GitHub 上擁有超過 24k 顆星,擁有 300 多名貢獻者。 https://github.com/ueberdosis/tiptap 明星 Tiptap ⭐️ --- 18. [Infisical](https://github.com/Infisical/infisical) - 秘密管理平台。 ----------------------------------------------------------------- ![內部的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrolzjdnkky1r694h9av.png) Infisical 是一個開源秘密管理平台,團隊可以用它來集中 API 金鑰、資料庫憑證和設定等秘密。 他們讓每個人(而不僅僅是安全團隊)都可以更輕鬆地進行秘密管理,這意味著從頭開始重新設計整個開發人員體驗。 ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3eu288l470du91b66pd.png) Infisical 還提供了一組工具來自動防止 git 歷史記錄的秘密洩露。可以使用預提交掛鉤或透過與 GitHub 等平台直接整合在 Infisical CLI 層級上設定此功能。 您可以閱讀[文件](https://infisical.com/docs/documentation/getting-started/introduction)並檢查如何[安裝 CLI](https://infisical.com/docs/cli/overview) ,這是使用它的最佳方式。 在使用整個原始程式碼之前一定要檢查他們的[許可證](https://github.com/Infisical/infisical/blob/main/LICENSE),因為他們有一些受 MIT Expat 保護的企業級程式碼,但不用擔心,大部分程式碼都是免費使用的。 - 💰 獲得總資金 290 萬美元。 - 🚀 使用的主要語言是 TypeScript。 他們在 GitHub 上擁有超過 12,500 顆星,發布了 130 多個版本。另外,Infiscial CLI 的安裝次數超過 540 萬次,因此非常值得信賴。 https://github.com/Infisical/infisical 明星 Infisical ⭐️ --- 19. [HyperDX](https://github.com/hyperdxio/hyperdx) - 統一會話重播、日誌、指標、追蹤和錯誤的可觀察平台。 ------------------------------------------------------------------------------- ![超DX](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6r38lckflg0wmwlq6i4.png) HyperDX 透過將日誌、指標、追蹤、異常和會話重播集中並關聯到一處,幫助工程師快速找出生產中斷的原因。 Datadog 和 New Relic 的開源且開發人員友善的替代方案。閱讀[文件](https://www.hyperdx.io/docs)。 ![超DX](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9g83r7408vr2oawc8s8p.png) - 💰 獲得總計 50 萬美元的資金。 - 🚀 使用的主要語言是 TypeScript。 HyperDX 在 GitHub 上擁有超過 6k 顆星。 https://github.com/hyperdxio/hyperdx 明星 HyperDX ⭐️ --- 20.[亮點](https://github.com/highlight/highlight)-全端監控平台。 ------------------------------------------------------- ![強調](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3p2ecjnrwbtskuqrkjv7.png) highlight.io 是為下一代開發人員(像您一樣!)提供的監控工具。與現有的古老、過時的工具不同,它們的目標是建立一個有凝聚力的、現代的、功能齊全的監控解決方案。 ![支援框架](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afaoao8954hobs7d2igw.png) - 💰 獲得總資金 850 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Highlight 在 GitHub 上有超過 7k 顆星。 https://github.com/highlight/highlight 星標亮點 ⭐️ --- 21. [Panora](https://github.com/panoratech/Panora) - 在幾分鐘內將整合目錄新增至您的 SaaS 產品。 ----------------------------------------------------------------------------- ![全景](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jzhhyl8t0xy2ueln8d4t.png) Panora 協助您將產品置於客戶日常工作流程的核心。 您的客戶希望他們的所有工具都能很好地協同工作。 Panora 避免您的團隊花費數百小時來建立和維護集成,而不是核心產品。 查看[快速入門指南](https://docs.panora.dev/quick-start)。 - 💰 獲得了 50 萬美元的總資金(可能更多)。 - 🚀 使用的主要語言是 TypeScript。 Panora 在 GitHub 上擁有 300 多個 star,並且處於非常早期的階段。 https://github.com/panoratech/Panora 明星 Panora ⭐️ --- 22. [Fleet](https://github.com/fleetdm/fleet) - IT、安全和基礎設施團隊的平台。 ---------------------------------------------------------------- ![艦隊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d47vi9uyn2hq3kx6s2h6.png) 針對擁有數千台電腦的 IT 和安全團隊的開源平台。專為 API、GitOps、webhooks、YAML 和人類而設計。 Fastly 和 Gusto 等組織使用 Fleet 進行漏洞報告、偵測工程、裝置管理 (MDM)、裝置運作狀況監控、基於狀態的存取控制、管理未使用的軟體授權等。 ![艦隊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vfn75mjk5rfhb4bfjwp8.png) - 💰 獲得總資金 2500 萬美元。 - 🚀 使用的主要語言是 Go。 Fleet 在 GitHub 上擁有 2,500 顆星。 https://github.com/fleetdm/fleet 星際艦隊 ⭐️ --- 23. [Ballerine](https://github.com/ballerine-io/ballerine) - 用於風險決策的基礎設施和資料編排平台。 -------------------------------------------------------------------------------- ![舞者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tnnrhyf6oj3dexdeyyuf.png) Ballerine 是一種開源風險管理基礎設施,可協助全球支付公司、市場和金融科技公司在整個客戶生命週期中自動為商家、賣家和使用者做出決策。 從開戶(KYC、KYB)、承銷和交易監控,使用靈活的規則和工作流程引擎、第 3 方插件系統、手動審核後台以及文件和資訊收集前端流程。 - 💰 獲得總資金 550 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Ballerine 在 GitHub 上擁有 2000 顆星,發布了 700 多個版本。 https://github.com/ballerine-io/ballerine 明星芭蕾舞者 ⭐️ --- 24. [Tooljet](https://github.com/ToolJet/ToolJet) - 用於建立業務應用程式的低程式碼平台。 ---------------------------------------------------------------------- ![工具噴射器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhipvjl2wnthjccgrpij.png) 我們都建立前端,但它通常非常複雜,並且涉及許多因素。這樣可以省去很多麻煩。 ToolJet 是一個開源低程式碼框架,可以用最少的工程工作來建置和部署內部工具。 ToolJet 的拖放式前端建構器可讓您在幾分鐘內建立複雜的響應式前端。 您可以整合各種資料來源,包括PostgreSQL、MongoDB、Elasticsearch等資料庫;具有 OpenAPI 規範和 OAuth2 支援的 API 端點; SaaS 工具,例如 Stripe、Slack、Google Sheets、Airtable 和 Notion;以及 S3、GCS 和 Minio 等物件儲存服務來取得和寫入資料。一切 :) 這就是 Tooljet 的工作原理。 ![工具噴射器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6vv09z7ioma1ce2ttei.png) 您可以在 ToolJet 中開發多步驟工作流程以自動化業務流程。除了建置和自動化工作流程之外,ToolJet 還可以在您的應用程式中輕鬆整合這些工作流程。 ![工作流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eh2vk3kih9fhck6okf67.png) 您可以閱讀[文件](https://docs.tooljet.com/docs/)並查看[操作指南](https://docs.tooljet.com/docs/how-to/use-url-params-on-load)。 - 💰 獲得總融資 620 萬美元(GitHub 是其中一名投資者)。 - 🚀 使用的主要語言是 JavaScript。 Tooljet 在 GitHub 上擁有超過 27,800 顆星和 500 多名貢獻者。 https://github.com/ToolJet/ToolJet Star Tooljet ⭐️ --- 25. [Mattermost-](https://github.com/mattermost/mattermost)整個軟體開發生命週期的安全協作。 --------------------------------------------------------------------------- ![最重要的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43p8f052h71ryhavrkms.png) Mattermost 是一個開源平台,用於在整個軟體開發生命週期中進行安全協作。 該儲存庫是 Mattermost 平台上核心開發的主要來源;它是用 Go 和 React 編寫的,並作為單一 Linux 二進位與 MySQL 或 PostgreSQL 一起執行。每個月 16 日都會在 MIT 許可下發布新的編譯版本。 - 💰 獲得總資金 7350 萬美元。 - 🚀 使用的主要語言是 TypeScript。 Mattermost 在 GitHub 上擁有超過 28,400 顆星,有 600 多個活躍問題和 900 多個貢獻者。 https://github.com/mattermost/mattermost Star Mattermost ⭐️ --- 我很驚訝這麼多受資助的專案使用 TypeScript 而不是 JavaScript。你是? 如果您知道任何其他資助專案或希望我製作第二部分。 請在評論中告訴我您最喜歡的清單。 祝你有美好的一天!直到下一次。 您可以加入我的開發者和技術作家社區,網址為[dub.sh/opensouls](https://dub.sh/opensouls) 。 關注 Taipy 以了解更多此類內容。 嵌入 https://dev.to/taipy --- 原文出處:https://dev.to/taipy/25-funded-projects-you-can-contribute-in-open-source-40lh

🙅 為什麼我不使用 AI 作為我的副駕駛 🤖

\*\*耶穌,掌管方向盤。 🚗 還有 Github Copilot,使用 IDE。 💻\*\* **[Github 表示](https://github.blog/2023-06-13-survey-reveals-ais-impact-on-the-developer-experience/)**,92% 的美國開發者都在使用 Copilot。 什麼。嚴重地? 什麼時候聽過 92% 的人口使用單一事物? 當然,除非…你說全世界**100%**的人都消耗過一氧化二氫。 *(這條線只有一種變黑的方式。不要去那裡。👀)* 和我一起快速旅行,我將談論: - [我真正擔心的是什麼。](#what-im-actually-worried-about) - [其他經驗豐富的開發人員對此有何看法?](#from-the-experienced-devs-point-of-view) - [也許我什麼都不擔心?](#lets-take-a-step-back-for-a-moment) - [以及我們如何對我們如何使用LLMs負責!](#where-the-heck-does-llmai-fit-in) ### 🔥 當機器在 2024 年佔領世界時 經過谷歌快速搜尋後,似乎大多數開發人員都在使用人工智慧輔助來編寫程式碼。如果我說我根本沒有使用人工智慧來編寫程式碼,**那我就是在撒謊**。當然,我有。我並不住在岩石下。 我發現開發人員對與第三方雲端服務共享程式碼相關資料的想法感到奇怪,這些第三方雲端服務通常沒有 SOC2(或類似的東西)認證,並且充其量只能做出模糊且無法證明的隱私聲明。 Github Copilot(和 Copilot 聊天)、Bito.ai 以及 VS Code 市場上的其他幾個 AI 程式碼擴充的安裝量已超過 3000 萬。瘋狂的! 🤯 然後是我。**我還沒有將人工智慧輔助**納入我的常規程式碼工作流程中。當然,我有幾次在 GPT 的幫助下編寫了一些樣板檔案。但那些時候是個例外。像 Github Copilot 這樣的東西,或任何類型的程式碼審查、程式碼產生工具、PR 建立或提交協助,都不屬於我的 IDE 或 CLI 流程的一部分。 也許它會隨著時間而改變。我們拭目以待。 > ## “但為什麼?” ![但為什麼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpc1fc4t5a10j0i5r3wj.gif) ### 😟我真正擔心的是 答案很簡單。 👇 #### 1.我擔心我的程式設計技能會生疏 我擔心如果我太習慣人工智慧的幫助,我編寫和閱讀程式碼的方式將會受到影響。 - 我擔心我會開始**忽略**程式碼中的缺陷,否則我可以發現這些缺陷。 - 我將開始認為人工智慧產生的程式碼是**理所當然的**。 - 尋找 API、內建方法或其他文件將開始變得像一件**苦差事**。 我擔心……我會開始滑倒。 #### 2. 我不願意與第三方服務分享我的所有程式碼 公司可以非常聰明地從你提供的資料中推斷出一些事情。有時他們會知道[你的家人不知道的](https://www.forbes.com/sites/kashmirhill/2012/02/16/how-target-figured-out-a-teen-girl-was-pregnant-before-her-father-did/)事。 敏感的業務邏輯可能會洩漏給第三方服務,最終可能會被用來做出我不滿意的推論,或者只是…直接洩漏?我的意思是,軟體總是被駭客攻擊。 我認為我很合理地認為我不想以不受限制的方式向第三方公司公開像程式碼這樣敏感的東西。即使那家公司是微軟,[因為即使他們也搞砸了](https://www.wired.com/story/total-recall-windows-recall-ai/)。 ### 👀 從經驗豐富的開發人員的角度來看 這也不是我獨有的想法! #### 1. 經驗豐富的開發人員往往**不想依賴**「拐杖」來寫程式碼。 我甚至很高興與不想在 IDE 上使用彩色主題的高級開發人員合作,因為他們認為這會損害他們掃描、閱讀或偵錯程式碼的能力! (這對我來說也有點太多了) 畢竟,「程式設計技能」**不僅僅是編寫程式碼**。 #### 2. 老開發者看過各種**軟體被駭**、資料外洩等。 我的意思是,十多年來, [haveibeenpwned.com](https://haveibeenpwned.com/)每年都會向您發送有關您的憑證、電子郵件和其他資料外洩的電子郵件…很多時候來自[價值數十億](https://en.wikipedia.org/wiki/2017_Equifax_data_breach)[美元的](https://www.news18.com/india/indias-biggest-data-leak-so-far-covid-19-test-info-of-81-5cr-citizens-with-icmr-up-for-sale-exclusive-8637743.html)[公司](https://www.nytimes.com/2017/10/03/technology/yahoo-hack-3-billion-users.html)… 當你無數次聽到**「當你不為產品付費時,你就是產品」** ,然後又得到另一家將資料出售給第三方的公司的支持... 是啊……會很累。 只需斷開盡可能多的電線即可輕鬆回到石器時代。 > ![老馬特達蒙](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03pmbpqix6e199ewey5t.gif) > “老開發人員”?我是……我變老了嗎? > 不,我才 22 歲,現在已經是 2016 年了……對吧?正確的? **順便說一句,標題中問題的答案是👆這個。**恭喜!貼文結束了!轉到下一個… Buuuuut…如果你想繼續閱讀… ![喬伊還有更多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jk0ywd7yjqukeokd0t2d.gif) ### 🚶 讓我們退後一步...... #### 我認為我的擔心可能被誇大了。 > *現在讓我們把整個資料隱私的角度放在一邊,因為這本身就是一個我非常熱衷的另一個主題。* 我個人沒有足夠的資料來經驗說使用人工智慧輔助會帶來我擔心的厄運……它會將我從今天的樣子降級為[SDE1](https://dev.to/middleware/going-from-sde1-to-sde2-and-beyond-what-it-actually-takes-1cld) 。 但我已經看到了模式。 - 我見過人工智慧生成的低於標準品質的程式碼經過程式碼審查並最終出現在`main`分支上。 - 我見過一些函式庫函數在沒有正確理解存在什麼或存在什麼替代方案的情況下被使用,只是因為LLMs產生了它。 - 我什至見過為解決某個問題而生成的程式碼,對於該問題,程式碼庫中已經存在一個實用程式函數,但沒有使用它,因為知道這個實用程式的存在比要求GPT 為您生成它要多得多的工作。 ### 💎 ~~鑽石是~~ 糟糕的程式碼是永遠的 **“等一下……我以前看過這部電影!”** ![似曾相識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvun4635neb2dflv5yto.gif) - LLM 是一個相當新的事物…但是💩程式碼是**永恆的!** - 每一個。單身的。開發。曾經。在沒有完全**理解**或尋找替代方案的情況下使用了函式庫函數。你和我都對此有罪。 (什麼?您認為`Array.prototype.sort`是對任何內容進行排序的最佳方式?在大多數情況下它就足夠了!) - 一段邏輯總是被重新發明(重新複製貼上)!只是之前它來自**StackOverflow** ,現在它來自 ChatGPT 。 ### 🤷 那麼,有什麼好大驚小怪的呢? > “使用 ChatGPT 會讓我成為一個糟糕的程式設計師嗎?” 我想不是。 重點是您只需要關心您建立的內容。 為您所**建造的**東西感到**自豪**。 ### 🤖 LLM/AI 到底適合什麼? **LLM 本身並不是邪惡的。** 事實上,如果負責任地使用它們,它們會非常有用: - **品質程式碼:**LLMs可能會處理不太勤奮的開發人員不會考慮的邊緣情況。 - **綜合測試:**LLMs可能會編寫比某些開發人員編寫的測試更全面的測試。 - **綜合類型:**它甚至可能比普通開發人員自己編寫的類型或可能具有編寫技能的類型更「完整」地編寫類型。 然而,開發人員有責任確保程式碼輸出受到保護和良好監控。一個不在乎的人在歷史上的任何時候都會做得很糟糕。LLMs的存在並沒有改變這一點。 ### 😎 真正給予 a\*ck 的藝術 有很多開發者對此並不關心。 但你不是這樣的開發者。**你確實關心。** 否則你就不會在這裡開發並學習人們的經驗。 我最近寫了一篇關於新開發人員在職涯中應該關心什麼成長的文章。它不僅僅是程式碼。 https://dev.to/middleware/going-from-sde1-to-sde2-and-beyond-what-it-actually-takes-1cld **也許我會在 VSCode 中引入一些 AI。** 我認為這只是時間問題,而不是**是否有問題**。 更重要的是……只要我關心確保我的程式輸出**可讀、高效能、高品質且易於審查**,我想我會沒事的,你也一樣。 --- ### 👇 PS 如果您想要一個我非常關心的範例,並且具有出色的程式碼 💪 和…不太出色的程式碼 🤣,請查看我們的**開源**儲存庫! 它可以讓您了解交付程式碼需要多長時間、PR 陷入審查循環的次數以及您的團隊交付程式碼的整體情況。 https://github.com/middlewarehq/middleware --- 原文出處:https://dev.to/middleware/why-i-dont-use-ai-as-my-copilot-47k3

如何使用 Ollama 和打開 WebUI 在本地執行 Llama 3

https://youtu.be/GT-Fwg124-I 我是 Llama 的忠實粉絲。 Meta 發布其 LLM 開源程式碼對整個科技界來說是一項淨收益,其寬鬆的許可證允許大多數中小型企業在幾乎沒有任何限制的情況下使用其 LLM(當然,在法律範圍內)。他們的最新版本是備受期待的 Llama 3。 Llama 3 有兩種大小:80 億和 700 億參數。這種模型經過大量文字資料的訓練,可用於各種任務,包括生成文字、翻譯語言、編寫不同類型的創意內容以及以資訊豐富的方式回答您的問題。 Meta 宣稱 Llama 3 是最好的開放模型之一,但它仍在開發中。這是與 Mistral 和 Gemma 相比的 8B 模型基準(根據 Meta)。 ![基準測試](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax9r9z2w2zghv81grbh7.png) 這就引出了一個問題:作為一個普通人,我如何在我的電腦上本地執行這些模型? 開始使用 Ollama ----------- 這就是[奧拉瑪](https://ollama.com/)登場的地方! Ollama 是一款免費的開源應用程式,可讓您在自己的電腦上執行各種大型語言模型,包括 Llama 3,即使資源有限。 Ollama 利用了 llama.cpp 的效能提升,llama.cpp 是一個開源程式庫,旨在允許您以相對較低的硬體要求在本地執行 LLM。它還包括一種套件管理器,使您只需一個命令即可快速有效地下載和使用 LLM。 第一步是[安裝 Ollama](https://ollama.com/download) 。它支援所有 3 個主要作業系統,其中[Windows 是「預覽版」](https://ollama.com/blog/windows-preview) (更好的說法是「測試版」)。 安裝完成後,打開您的終端。在所有平台上,命令都是相同的。 ``` ollama run llama3 ``` 等待幾分鐘,它會下載並載入模型,然後開始聊天!它應該會帶您進入與此類似的聊天提示。 ``` ollama run llama3 >>> Who was the second president of the united states? The second President of the United States was John Adams. He served from 1797 to 1801, succeeding George Washington and being succeeded by Thomas Jefferson. >>> Who was the 30th? The 30th President of the United States was Calvin Coolidge! He served from August 2, 1923, to March 4, 1929. >>> /bye ``` 您可以在這個終端聊天中整天聊天,但是如果您想要更像 ChatGPT 的東西怎麼辦? 打開網頁介面 ------ Open WebUI 是一個可擴充的、自架的 UI,完全在[Docker](https://docs.docker.com/desktop/)內部運作。它可以與 Ollama 或其他 OpenAI 相容的 LLM 一起使用,例如 LiteLLM 或我自己的[Cloudflare Workers OpenAI API](https://github.com/chand1012/openai-cf-workers-ai) 。 假設您的電腦上已經執行了[Docker](https://docs.docker.com/desktop/)和 Ollama,[安裝](https://docs.openwebui.com/getting-started/#quick-start-with-docker-)非常簡單。 ``` docker run -d -p 3000:8080 --add-host=host.docker.internal:host-gateway -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main ``` 只要造訪 http://localhost:3000,建立帳戶,然後開始聊天! ![OpenWebUI 範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdi1d35zh09s78o8vqvb.png) 如果您之前沒有執行過 Llama 3,則必須先關閉一些模型才能開始聊天。最簡單的方法是點擊左下角您的名字後點擊設定圖示。 ![設定](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tqyetksyn0y4a0p12ylu.png) 然後點擊模式左側的“模型”,然後貼上[Ollama 註冊表](https://ollama.com/models)中的模型名稱。以下是我推薦用於一般用途的一些模型。 - `llama3` - `mistral` - `llama2` ![機型設定頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txc581jf4w3xszymjfbg.png) 奧拉馬 API ------- 如果您想將 Ollama 整合到您自己的專案中,Ollama 提供自己的 API 以及 OpenAI 相容 API。 API 會自動將本機儲存的 LLM 載入到記憶體中,執行推理,然後在一定的逾時後卸載。您必須先拉取您想要使用的任何模型,然後才能透過 API 執行模型,這可以透過命令列輕鬆完成。 ``` ollama pull mistral ``` ### 奧拉馬 API Ollama 有自己的 API,其中還有[一些用於 Javascript 和 Python 的 SDK](https://github.com/ollama/ollama?tab=readme-ov-file#libraries) 。 以下是如何使用 API 進行簡單的文字產生推理。 ``` curl http://localhost:11434/api/generate -d '{ "model": "mistral", "prompt":"Why is the sky blue?" }' ``` 以下是如何使用 API 進行聊天產生推論。 ``` curl http://localhost:11434/api/chat -d '{ "model": "mistral", "messages": [ { "role": "user", "content": "why is the sky blue?" } ] }' ``` 將`model`參數替換為您要使用的任何模型。請參閱[官方 API 文件](https://github.com/ollama/ollama/blob/main/docs/api.md)以取得更多資訊。 ### OpenAI 相容 API 您也可以使用 Ollama 作為 OpenAI 庫的替代品(取決於用例)。這是[他們文件](https://github.com/ollama/ollama/blob/main/docs/openai.md)中的一個範例。 ``` # Python from openai import OpenAI client = OpenAI( base_url='http://localhost:11434/v1/', # required but ignored api_key='ollama', ) chat_completion = client.chat.completions.create( messages=[ { 'role': 'user', 'content': 'Say this is a test', } ], model='mistral', ) ``` 這也適用於 JavaScript。 ``` // Javascript import OpenAI from 'openai' const openai = new OpenAI({ baseURL: 'http://localhost:11434/v1/', // required but ignored apiKey: 'ollama', }) const chatCompletion = await openai.chat.completions.create({ messages: [{ role: 'user', content: 'Say this is a test' }], model: 'llama2', }) ``` 結論 -- Meta 的 Llama 3 的發布及其大型語言模型 (LLM) 技術的開源標誌著技術社群的一個重要里程碑。現在,透過 Ollama 和 Open WebUI 等本地工具可以存取這些先進的模型,普通個人可以挖掘其巨大潛力來生成文字、翻譯語言、創作創意寫作等。此外,API 的可用性使開發人員能夠將 LLM 無縫整合到新專案或增強現有專案。最終,LLM 技術透過 Llama 3 等開源專案實現民主化,釋放了廣泛的創新可能性,並激發了科技業的創造力。 --- 原文出處:https://dev.to/timesurgelabs/how-to-run-llama-3-locally-with-ollama-and-open-webui-297d

使用 NextJS 建立電子商務商店

在本教程中,您將學習如何建立電子商務商店,客戶可以在其中透過 Stripe 購買產品並付款。成功付款後,將向客戶發送電子郵件通知,並向管理員用戶發送應用程式內通知。管理員用戶也可以在應用程式中建立和刪除產品。 為了建立這個應用程式,我們將使用以下工具: - [Appwrite](https://appwrite.io/) - 用於驗證使用者身份,以及保存和檢索產品詳細資訊。 - [Next.js](https://nextjs.org/) - 用於建立應用程式的使用者介面和後端。 - [Novu](https://docs.novu.co/getting-started/introduction) - 用於發送電子郵件和應用程式內通知。 - [React Email](https://react.email/docs/introduction) - 用於建立電子郵件範本。 - [Stripe](https://docs.stripe.com/) - 用於將付款結帳整合到應用程式中。 ![應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t02iyysrqjfqw8imuqxn.png) --- 使用 Next.js 建立應用程式介面 ------------------- 應用程式頁面根據指派給使用者的角色分為兩部分。客戶可以在付款前存取主頁並登入應用程式。管理員使用者可以存取所有頁面,包括登入頁面和儀表板頁面,他們可以在其中新增和刪除產品。 現在,讓我們建立應用程式。 ![https://media1.giphy.com/media/iopxsZtW2QVRs4poEC/giphy.gif?cid=7941fdc6aot3qt7vvq4voh5c1iagyusdpuga713m8ljqcqmd&ep=v1_gifs_searchiagyusdpuga713m8ljqcqmd&ep=v1_gifs_searchiagyusdpugagif&ct](https://media1.giphy.com/media/iopxsZtW2QVRs4poEC/giphy.gif?cid=7941fdc6aot3qt7vvq4voh5c1iagyusdpuga713m8ljqcqmd&ep=v1_gifs_search&rid=giphy.gif&ct=g) 透過執行以下程式碼片段來建立一個新的 Next.js Typescript 專案: ``` npx create-next-app novu-store ``` 接下來,安裝[React Icons](https://react-icons.github.io/react-icons)和[Headless UI](https://headlessui.com/)包。 React Icons 允許我們在應用程式中使用各種圖標,而 Headless UI 則提供易於使用的現代 UI 元件。 ``` npm install react-icons @headlessui/react ``` 將此程式碼片段從[GitHub 儲存庫](https://github.com/dha-stix/ecom-store-with-nextjs-appwrite-novu-and-stripe/blob/main/src/app/page.tsx)複製到`app/page.tsx`檔案中。它在螢幕上呈現產品列表,並允許用戶選擇購物車中的商品,類似於下圖。 ![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dj69givzhqfapgsg12rk.gif) 建立登入路由,使用戶能夠使用其 GitHub 帳戶進行簽署。將下面的程式碼片段複製到`app/login/page.tsx`檔案中。 ``` //👉🏻 create a login folder containing a page.tsx file export default function Home() { const handleGoogleSignIn = async () => {}; return ( <main className='w-full min-h-screen flex flex-col items-center justify-center'> <h2 className='font-semibold text-3xl mb-2'>Customer Sign in</h2> <p className='mb-4 text-sm text-red-500'> You need to sign in before you can make a purchase </p> <button className='p-4 border-[2px] border-gray-500 rounded-md hover:bg-black hover:text-white w-2/3' onClick={() => handleGoogleSignIn()} > Sign in with GitHub </button> </main> ); } ``` ![客戶登入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3nh2rowpfg4hgksj5diy.png) 當使用者點擊「登入」按鈕時,會將他們重新導向到 GitHub 驗證頁面並提示他們登入應用程式。您很快就會了解如何使用[Appwrite](https://appwrite.io/)執行此操作。 接下來,讓我們建立管理頁面。在`app`資料夾中新增包含`login`和`dashboard`路由的`admin`資料夾。 ``` cd app mkdir admin && cd admin mkdir dashboard login ``` 在`dashboard`和`login`資料夾中新增`page.tsx`文件,並將下面的程式碼片段複製到`login/page.tsx`檔案中。 ``` "use client"; import Link from "next/link"; import { useState } from "react"; export default function Login() { const [email, setEmail] = useState<string>(""); const [password, setPassword] = useState<string>(""); const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); console.log({ email, password }); }; return ( <main className='w-full min-h-screen flex flex-col items-center justify-center'> <h2 className='font-semibold text-3xl mb-4'> Admin Sign in</h2> <form className='w-2/3' onSubmit={handleLogin}> <label htmlFor='email' className='block'> Email </label> <input type='email' id='email' className='w-full px-4 py-3 border border-gray-400 rounded-sm mb-4' required value={email} placeholder='[email protected]' onChange={(e) => setEmail(e.target.value)} /> <label htmlFor='password' className='block'> Password </label> <input type='password' id='password' className='w-full px-4 py-3 border border-gray-400 rounded-sm mb-4' required value={password} placeholder='admin123' onChange={(e) => setPassword(e.target.value)} /> <button className='p-4 text-lg mb-3 bg-blue-600 text-white w-full rounded-md'> Sign in </button> <p className='text-sm text-center'> Not an Admin?{" "} <Link href='/login' className='text-blue-500'> Sign in as a Customer </Link> </p> </form> </main> ); } ``` 上面的程式碼片段呈現一個表單,該表單接受管理員的電子郵件和密碼,驗證憑證,然後將使用者登入應用程式中。 ![管理員登入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjd9wsi63t96d5cls9om.png) 管理儀表板頁面呈現可用的產品,並允許管理員使用者在應用程式中新增和刪除產品。將此[程式碼片段複製](https://github.com/dha-stix/ecom-store-with-nextjs-appwrite-novu-and-stripe/blob/main/src/app/admin/dashboard/page.tsx)到`dashboard/page.tsx`檔案中以建立使用者介面。 ![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1gd1uq1eq6n76fesjxu.gif) 恭喜!您已經建立了應用程式介面。在接下來的部分中,您將了解如何將應用程式連接到 Appwrite 後端並在客戶端和伺服器之間發送資料。 --- 如何將 Appwrite 新增到 Next.js 應用程式 ----------------------------- Appwrite 是一項開源後端服務,可讓您建立安全且可擴展的軟體應用程式。它提供多種身份驗證方法、安全性資料庫、文件儲存、雲端訊息傳遞等功能,這些對於建立全端應用程式至關重要。 在本部分中,您將了解如何設定 Appwrite 專案,包括身份驗證、資料庫和檔案儲存等功能。 首先,請造訪[Appwrite Cloud](https://cloud.appwrite.io/register) ,並為您的專案建立一個帳戶和組織。 接下來,建立一個新專案並選擇您的首選區域來託管該專案。 ![應用程式寫入1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/as6302olk60oklfo70x5.png) 選擇`Web`作為應用程式的平台 SDK。 ![應用程式編寫2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bb5ae82i9fyoyrowsy96.png) 請依照螢幕上顯示的步驟進行操作。由於您目前正在開發模式下建置,因此您可以使用通配符 ( `*` ) 作為主機名,並在部署應用程式後將其變更為您的網域名稱。 ![應用程式寫入3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5ccs0hzgs9ujf5lzh83.png) 在 Next.js 專案中安裝 Appwrite 用戶端 SDK。 ``` npm install appwrite ``` 最後,在 Next.js 應用程式資料夾中建立一個`appwrite.ts`文件,並將下面的程式碼片段複製到該文件中以初始化 Appwrite。 ``` import { Client, Account, Databases, Storage } from "appwrite"; const client = new Client(); client .setEndpoint("https://cloud.appwrite.io/v1") .setProject(<YOUR_PROJECT_ID>); export const account = new Account(client); export const db = new Databases(client); export const storage = new Storage(client); ``` ### 使用 Appwrite 設定 GitHub 身份驗證 在這裡,您將了解如何使用 Appwrite 設定 GitHub 和電子郵件/密碼驗證。預設已配置電子郵件/密碼身份驗證,因此我們專注於設定 GitHub 身份驗證。 在繼續之前,您需要使用您的 GitHub 帳戶建立[GitHub OAuth 應用程式](https://github.com/settings/developers)。 Appwrite 將需要客戶端 ID 和金鑰來設定 GitHub 身份驗證。 ![GitHub 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9znk1yr7tffus7soitq2.png) 透過從側邊欄選單中選擇`Auth`並導覽至`Settings`選項卡,啟用 Appwrite 的 GitHub 驗證方法。 ![應用程式編寫4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43uo6nho1bz9su14zsno.png) 將您的 GitHub 用戶端 ID 和金鑰複製到 Appwrite 的 GitHub OAuth 設定中。 最後,確保將 Appwrite 產生的 URI 複製到 GitHub 應用程式設定中。 ![GitHub 2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g75q5r5hc6l5pi09k88m.png) ### 設定 Appwrite 資料庫 從側邊欄選單中選擇資料庫並建立新資料庫。您可以將其命名為`novu store` 。 ![應用程式寫入5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y7kn1llmu7olqirfcrpa.png) 接下來,建立`products`集合。它將包含應用程式中的產品清單。 ![應用程式寫入 6](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7p8laty6z37x0q1g6az4.png) 將名稱、價格和圖像屬性新增至集合。 ![應用程式寫入 7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzom3ptlz8t1rh9dtt1k.png) 在「設定」標籤下,更新權限以允許每個使用者執行 CRUD 操作。但是,您可以在部署應用程式後變更此設置,以確保只有經過身份驗證的使用者才能執行各種操作。 ![應用程式寫入 8](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37cqr8s0crtcttocjagk.png) 最後,將專案、資料庫和集合 ID 複製到**`.env.local`**檔案中。這可以確保您的憑證安全,並允許您引用其環境變數中的每個值。 ``` NEXT_PUBLIC_PROJECT_ID=<YOUR_PROJECT_ID> NEXT_PUBLIC_DB_ID=<YOUR_DATABASE_ID> NEXT_PUBLIC_PRODUCTS_COLLECTION_ID=<YOUR_DB_COLLECTION_ID> ``` ### 設定應用程式寫入存儲 從側邊欄選單中選擇`Storage` ,然後建立新儲存桶來儲存所有產品影像。 ![應用程式編寫 9](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b84t9mk3k0wrkgiy4uca.png) 在`Settings`標籤下,更新「權限」以暫時允許任何使用者。 ![應用程式寫入 10](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zi3iozkaera7fohkwanm.png) 設定可接受的文件格式。由於我們上傳的是圖像,因此您可以選擇**`.jpg`**和**`.png`**檔案格式。 ![應用寫入 11](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzxqpoq5dcpokkvdcsce.png) 最後,將您的儲存桶 ID 複製到`.env.local`檔案中。 ``` NEXT_PUBLIC_BUCKET_ID=<YOUR_BUCKET_ID> ``` 恭喜!您已成功配置 Appwrite。我們現在可以開始與其各種功能進行互動。 --- 如何使用Appwrite執行CRUD操作 -------------------- 在本部分中,您將了解如何從 Appwrite 建立、檢索和刪除產品。用戶需要能夠在購買前查看現有產品,而管理員用戶應有權在應用程式中新增和刪除產品。 首先,在 Next.js **`app`**資料夾中建立一個**`utils.ts`**檔案。該文件將包含所有 Appwrite 資料庫交互,然後您可以將其導入到必要的頁面中。 ``` cd app touch utils.ts ``` ### 將產品儲存到 Appwrite 回想一下, `products`集合有三個屬性:名稱、圖像和價格。因此,在將產品新增至資料庫時,您需要先上傳產品的圖像,從回應中檢索其 URL 和 ID,然後將 URL 作為產品的圖像屬性上傳,使用圖像的儲存 ID 作為產品資料。 這是解釋這一點的程式碼片段: ``` import { db, storage } from "@/app/appwrite"; import { ID } from "appwrite"; export const createProduct = async ( productTitle: string, productPrice: number, productImage: any ) => { try { //👇🏻 upload the image const response = await storage.createFile( process.env.NEXT_PUBLIC_BUCKET_ID!, ID.unique(), productImage ); //👇🏻 get the image's URL const file_url = `https://cloud.appwrite.io/v1/storage/buckets/${process.env.NEXT_PUBLIC_BUCKET_ID}/files/${response.$id}/view?project=${process.env.NEXT_PUBLIC_PROJECT_ID}&mode=admin`; //👇🏻 add the product to the database await db.createDocument( process.env.NEXT_PUBLIC_DB_ID!, process.env.NEXT_PUBLIC_PRODUCTS_COLLECTION_ID!, response.$id, //👉🏻 use the image's ID { name: productTitle, price: productPrice, image: file_url, } ); alert("Product created successfully"); } catch (err) { console.error(err); } }; ``` 上面的程式碼片段將圖像上傳到 Appwrite 的雲端存儲,並使用儲存桶 ID、圖像 ID 和專案 ID 檢索準確的圖像 URL。圖片成功上傳後,其 ID 將用於產品資料中,以便輕鬆檢索和參考。 ### 從 Appwrite 檢索產品 若要從 Appwrite 取得產品,您可以在頁面載入時在 React **`useEffect`**掛鉤中執行下列函數。 ``` export const fetchProducts = async () => { try { const products = await db.listDocuments( process.env.NEXT_PUBLIC_DB_ID!, process.env.NEXT_PUBLIC_PRODUCTS_COLLECTION_ID! ); if (products.documents) { return products.documents; } } catch (err) { console.error(err); } }; ``` `fetchProducts`函數傳回`products`集合中的所有資料。 ### 從 Appwrite 中刪除產品 管理員使用者也可以透過產品 ID 刪除產品。 **`deleteProduct`**函數接受產品的 ID 作為參數,並從資料庫中刪除所選產品(包括其圖像),因為它們使用相同的 ID 屬性。 ``` export const deleteProduct = async (id: string) => { try { await db.deleteDocument( process.env.NEXT_PUBLIC_DB_ID!, process.env.NEXT_PUBLIC_PRODUCTS_COLLECTION_ID!, id ); await storage.deleteFile(process.env.NEXT_PUBLIC_BUCKET_ID!, id); alert("Product deleted successfully"); } catch (err) { console.error(err); } }; ``` --- 如何使用 Appwrite 驗證使用者身份 --------------------- 在前面的部分中,我們已經設定了 GitHub 身份驗證方法。在這裡,您將了解如何處理使用者登入應用程式。 若要使客戶能夠使用其 GitHub 帳戶登入應用程式,請在按一下`Sign in`按鈕時執行以下功能。該函數將使用者重定向到 GitHub,在那裡他們可以向應用程式授權或授予權限,然後登入應用程式: ``` import { account } from "../appwrite"; import { OAuthProvider } from "appwrite"; const handleGoogleSignIn = async () => { try { account.createOAuth2Session( OAuthProvider.Github, "http://localhost:3000", "http://localhost:3000/login" ); } catch (err) { console.error(err); } }; ``` 管理員使用者可以使用電子郵件和密碼登入應用程式。 Appwrite 在授予對應用程式儀表板的存取權之前會驗證憑證。 ``` import { account } from "@/app/appwrite"; const handleLogin = async (e: React.FormEvent) => { e.preventDefault(); try { await account.createEmailPasswordSession(email, password); alert(`Welcome back 🎉`); router.push("/admin/dashboard"); } catch (err) { console.error(err); alert("Invalid credentials ❌"); } }; ``` Appwrite 還允許您取得目前使用者的資料。例如,如果只有經過身份驗證的使用者才能付款,您可以透過執行下面的程式碼片段來完成此操作。它會檢索目前使用者的資料,如果使用者未登錄,則傳回 null。 ``` import { account } from "@/app/appwrite"; useEffect(() => { const checkAuthStatus = async () => { try { const request = await account.get(); setUser(request); } catch (err) { console.log(err); } }; checkAuthStatus(); }, []); ``` --- 如何將 Stripe 付款結帳新增至 Next.js -------------------------- 在本節中,您將了解如何在應用程式中實現 Stripe 付款結帳。 Stripe 是一種流行的線上支付處理平台,可讓您建立產品並將一次性和定期支付方式整合到您的應用程式中。 首先,您需要[建立一個 Stripe 帳戶](https://dashboard.stripe.com/login)。您可以在本教學中使用測試模式帳戶。 ![條紋1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nibs7bxb09i167mxm918.png) 點擊頂部選單中的`Developers` ,然後從 API 金鑰選單中複製您的金鑰。 ![條紋2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/up8757knbquc3k0577ps.png) 將您的 Stripe 金鑰貼到`.env.local`檔案中。 ``` STRIPE_SECRET_KEY=<your_secret_key> ``` 安裝[Stripe Node.js SDK](https://docs.stripe.com/libraries) 。 ``` npm install stripe ``` 接下來,在 Next.js `app`資料夾中建立一個`api`資料夾。 `api`資料夾將包含應用程式的所有 API 路由和端點。 ``` cd app mkdir api ``` 透過在`api`資料夾中新增`checkout`資料夾來建立`checkout`端點。 ``` cd api mkdir checkout && cd checkout touch route.ts ``` 將下面的程式碼片段複製到`route.ts`檔中。 ``` import { NextRequest, NextResponse } from "next/server"; import Stripe from "stripe"; const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!); export async function POST(req: NextRequest) { //👇🏻 accepts the customer's cart const cart = await req.json(); try { //👇🏻 creates a checkout session const session = await stripe.checkout.sessions.create({ payment_method_types: ["card"], line_items: cart.map((product: Product) => ({ price_data: { currency: "usd", product_data: { name: product.name, }, unit_amount: product.price * 100, }, quantity: 1, })), mode: "payment", cancel_url: `http://localhost:3000/?canceled=true`, success_url: `http://localhost:3000?success=true&session_id={CHECKOUT_SESSION_ID}`, }); //👇🏻 return the session URL return NextResponse.json({ session: session.url }, { status: 200 }); } catch (err) { return NextResponse.json({ err }, { status: 500 }); } } ``` 上面的程式碼片段建立了一個接受 POST 請求的結帳端點。它為客戶建立結帳會話並傳回會話 URL。 **`cancel_url`**和**`success_url`**確定完成或取消付款後將用戶重新導向到何處。 最後,當用戶決定為產品付款時,您可以透過執行以下程式碼片段將客戶的購物車發送到`/checkout`端點: ``` const processPayment = async (cart: Product[]) => { try { if (user !== null) { //👇🏻 saves cart to local storage localStorage.setItem("cart", JSON.stringify(cart)); //👇🏻 sends cart to /checkout route const request = await fetch("/api/checkout", { method: "POST", body: JSON.stringify(cart), headers: { "Content-Type": "application/json" }, }); //👇🏻 retrieves the session URL const { session } = await request.json(); //👇🏻 redirects the user to the checkout page window.location.assign(session); } else { //👇🏻 redirects unauthenticated users router.push("/login"); } } catch (err) { console.error(err); } }; ``` 上面的程式碼片段將購物車儲存到瀏覽器的本機儲存體並將其傳送到 API 端點,然後從後端伺服器檢索回應(會話 URL)並將使用者重新導向至 Stripe 結帳頁面。 ![條紋3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i5hokf2qyqyey3kwsg9x.gif) --- 使用 Novu 發送應用程式內通知和電子郵件通知 ------------------------ [Novu](https://github.com/novuhq/novu)是第一個提供統一 API 的通知基礎架構,用於透過多種管道(包括應用程式內、推播、電子郵件、簡訊和聊天)發送通知。 在本部分中,您將了解如何將 Novu 加入到您的應用程式,以便您能夠發送電子郵件和應用程式內訊息。 首先,安裝所需的 Novu 軟體包: ``` npm install @novu/node @novu/echo @novu/notification-center ``` 當用戶進行購買時,他們將收到一封付款確認電子郵件,管理員用戶也會收到一條應用程式內通知。 為此,您需要[在 Novu 上建立帳戶](https://web.novu.co/auth/login)並設定主要電子郵件提供者。在本教程中,我們將使用[“重新發送”](https://resend.com/docs/introduction) 。 在 Novu 上建立帳戶後,建立一個[重新傳送帳戶](https://resend.com/docs/introduction),然後從儀表板上的側邊欄選單中選擇`API Keys`來建立帳戶。 ![重新發送 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhehx7s45x180zpir1ti.png) 接下來,回到 Novu 儀表板,從側邊欄選單中選擇`Integrations Store` ,然後新增 Resend 作為電子郵件提供者。您需要將重新傳送 API 金鑰和電子郵件地址貼到必填欄位中。 ![新 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f03vb6nftyi8g790vg7m.png) 從側邊欄選單中選擇**「設定」** ,然後將您的`Novu API`金鑰和`App ID`複製到**`.env.local`**檔案中,如下所示。另外,將您的`subscriber ID`複製到其欄位中 - 您可以從`Subscribers`部分獲取此資訊。 ``` NOVU_API_KEY=<YOUR_API_FOR_NEXT_SERVER> NEXT_PUBLIC_NOVU_API_KEY=<YOUR_API_FOR_NEXT_CLIENT> NEXT_PUBLIC_NOVU_APP_ID=<YOUR_API_ID> NOVU_SUBSCRIBER_ID=<YOUR_API_FOR_NEXT_SERVER> NEXT_PUBLIC_NOVU_SUBSCRIBER_ID=<YOUR_API_FOR_CLIENT> ``` ![新2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voeofvvtv88pex9rpr1s.png) 最後,將 Novu 通知鈴新增至管理儀表板,以使管理員使用者能夠在應用程式內接收通知。 ``` import { NovuProvider, PopoverNotificationCenter, NotificationBell, } from "@novu/notification-center"; export default function AdminNav() { return ( <NovuProvider subscriberId={process.env.NEXT_PUBLIC_NOVU_SUBSCRIBER_ID!} applicationIdentifier={process.env.NEXT_PUBLIC_NOVU_APP_ID!} > <PopoverNotificationCenter colorScheme='light'> {({ unseenCount }) => <NotificationBell unseenCount={unseenCount} />} </PopoverNotificationCenter> </NovuProvider> ); } ``` ![儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m62ft87ue9orse2yww9z.png) --- 如何使用 Novu Echo 建立通知工作流程 ----------------------- [Novu](https://docs.novu.co/echo/quickstart)提供程式碼優先的工作流程引擎,讓您能夠在程式碼庫中建立通知工作流程。它允許您將電子郵件、簡訊、聊天範本和內容產生器(例如[React Email](https://react.email/docs/introduction)和[MJML](https://mjml.io/) )整合到 Novu 中,以建立高級且強大的通知。 在本部分中,您將了解如何在應用程式中建立通知工作流程、如何使用 Novu 的電子郵件通知範本以及如何使用 Novu 發送應用程式內通知和電子郵件通知。 透過執行以下命令安裝[React Email](https://react.email/docs/introduction) : ``` npm install react-email @react-email/components -E ``` 將以下腳本包含在您的 package.json 檔案中。 `--dir`標誌使 React Email 能夠存取位於專案內的電子郵件範本。在本例中,電子郵件範本位於`src/emails`資料夾中。 ``` { "scripts": { "email": "email dev --dir src/emails" } } ``` 接下來,在 Next.js `app`資料夾中建立一個包含`email.tsx`的`emails`資料夾,並將以下程式碼片段複製到該檔案中: ``` import { Body, Column, Container, Head, Heading, Hr, Html, Link, Preview, Section, Text, Row, render, } from "@react-email/components"; import * as React from "react"; const EmailTemplate = ({ message, subject, name, }: { message: string; subject: string; name: string; }) => ( <Html> <Head /> <Preview>{subject}</Preview> <Body style={main}> <Container style={container}> <Section style={header}> <Row> <Column style={headerContent}> <Heading style={headerContentTitle}>{subject}</Heading> </Column> </Row> </Section> <Section style={content}> <Text style={paragraph}>Hey {name},</Text> <Text style={paragraph}>{message}</Text> </Section> </Container> <Section style={footer}> <Text style={footerText}> You&apos;re receiving this email because your subscribed to Newsletter App </Text> <Hr style={footerDivider} /> <Text style={footerAddress}> <strong>Novu Store</strong>, &copy;{" "} <Link href='https://novu.co'>Novu</Link> </Text> </Section> </Body> </Html> ); export function renderEmail(inputs: { message: string; subject: string; name: string; }) { return render(<EmailTemplate {...inputs} />); } const main = { backgroundColor: "#f3f3f5", fontFamily: "HelveticaNeue,Helvetica,Arial,sans-serif", }; const headerContent = { padding: "20px 30px 15px" }; const headerContentTitle = { color: "#fff", fontSize: "27px", fontWeight: "bold", lineHeight: "27px", }; const paragraph = { fontSize: "15px", lineHeight: "21px", color: "#3c3f44", }; const divider = { margin: "30px 0", }; const container = { width: "680px", maxWidth: "100%", margin: "0 auto", backgroundColor: "#ffffff", }; const footer = { width: "680px", maxWidth: "100%", margin: "32px auto 0 auto", padding: "0 30px", }; const content = { padding: "30px 30px 40px 30px", }; const header = { borderRadius: "5px 5px 0 0", display: "flex", flexDireciont: "column", backgroundColor: "#2b2d6e", }; const footerDivider = { ...divider, borderColor: "#d6d8db", }; const footerText = { fontSize: "12px", lineHeight: "15px", color: "#9199a1", margin: "0", }; const footerLink = { display: "inline-block", color: "#9199a1", textDecoration: "underline", fontSize: "12px", marginRight: "10px", marginBottom: "0", marginTop: "8px", }; const footerAddress = { margin: "4px 0", fontSize: "12px", lineHeight: "15px", color: "#9199a1", }; ``` 上面的程式碼片段使用 React Email 建立了一個可自訂的電子郵件範本。您可以找到更多[易於編輯的靈感或模板](https://demo.react.email/preview/notifications/vercel-invite-user)。該元件還接受訊息、主題和名稱作為屬性,並將它們填入元素中。 最後,您可以在終端機中執行`npm run email`來預覽範本。 接下來,讓我們將電子郵件範本整合到 Novu Echo 中。首先,關閉 React Email 伺服器,然後執行下面的程式碼片段。它會在瀏覽器中開啟[Novu Dev Studio](https://docs.novu.co/echo/concepts/studio) 。 ``` npx novu-labs@latest echo ``` 在 Next.js 應用程式資料夾中建立一個包含`client.ts`檔案的`echo`資料夾,並將此程式碼片段複製到該檔案中。 ``` import { Echo } from "@novu/echo"; import { renderEmail } from "@/app/emails/email"; interface EchoProps { step: any; payload: { subject: string; message: string; name: string; totalAmount: string; }; } export const echo = new Echo({ apiKey: process.env.NEXT_PUBLIC_NOVU_API_KEY!, devModeBypassAuthentication: process.env.NODE_ENV === "development", }); echo.workflow( "novu-store", async ({ step, payload }: EchoProps) => { //👇🏻 in-app notification step await step.inApp("notify-admin", async () => { return { body: `${payload.name} just made a new purchase of ${payload.totalAmount} 🎉`, }; }); //👇🏻 email notification step await step.email( "email-customer", async () => { return { subject: `${payload ? payload?.subject : "No Subject"}`, body: renderEmail(payload), }; }, { inputSchema: { type: "object", properties: {}, }, } ); }, { payloadSchema: { type: "object", properties: { message: { type: "string", default: "Congratulations! Your purchase was successful! 🎉", }, subject: { type: "string", default: "Message from Novu Store" }, name: { type: "string", default: "User" }, totalAmount: { type: "string", default: "0" }, }, required: ["message", "subject", "name", "totalAmount"], additionalProperties: false, }, } ); ``` 此程式碼片段定義了一個名為`novu-store` Novu 通知工作流程,該工作流程接受包含電子郵件主題、訊息、客戶姓名和總金額的有效負載。 此工作流程有兩個步驟:應用程式內通知和電子郵件通知。應用程式內通知使用通知鈴聲向管理員發送訊息,而電子郵件則向客戶的電子郵件發送訊息。 接下來,您需要為 Novu Echo 建立 API 路由。在`api`資料夾中,建立一個包含`route.ts`檔案的`email`資料夾,並將下面提供的程式碼片段複製到該檔案中。 ``` import { serve } from "@novu/echo/next"; import { echo } from "@/app/echo/client"; export const { GET, POST, PUT } = serve({ client: echo }); ``` 在終端機中執行`npx novu-labs@latest echo` 。它將自動開啟 Novu Dev Studio,您可以在其中預覽工作流程並將其與雲端同步。 ![新3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ed2sl38m7zrlgjoj4a6y.gif) `Sync to Cloud`按鈕會觸發一個彈出窗口,其中提供有關如何將工作流程推送到 Novu 雲端的說明。 ![新4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ch8ba7y9klyudmmv9jz.png) 若要繼續,請在終端機中執行以下程式碼片段。這將產生一個唯一的 URL,表示您的開發環境和雲端環境之間的本機隧道。 ``` npx localtunnel --port 3000 ``` 將產生的連結與 Echo API 端點一起複製到 Echo Endpoint 欄位中,按一下`Create Diff`按鈕,然後部署變更。 ``` https://<LOCAL_TUNNEL_URL>/<ECHO_API_ENDPOINT (/api/email)> ``` 恭喜!您剛剛從程式碼庫建立了 Novu 工作流程。 ![新5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bdugs6g15y1e7xeixux.png) 最後,讓我們建立在用戶付款時發送電子郵件和應用程式內通知的端點。建立一個`api/send`路由並將下面的程式碼片段複製到檔案中: ``` import { NextRequest, NextResponse } from "next/server"; import { Novu } from "@novu/node"; const novu = new Novu(process.env.NOVU_API_KEY!); export async function POST(req: NextRequest) { const { email, name, totalAmount } = await req.json(); const { data } = await novu.trigger("novu-store", { to: { subscriberId: process.env.NOVU_SUBSCRIBER_ID!, email, firstName: name, }, payload: { name, totalAmount, subject: `Purchase Notification from Novu Store`, message: `Your purchase of ${totalAmount} was successful! 🎉`, }, }); console.log(data.data); return NextResponse.json( { message: "Purchase Completed!", data: { novu: data.data }, success: true, }, { status: 200 } ); } ``` 端點接受客戶的電子郵件、姓名和支付總額,並在付款成功後觸發 Novu 通知工作流程發送所需的通知。 --- 結論 -- 到目前為止,您已經學會如何執行以下操作: - 實施多種身份驗證方法,從 Appwrite 儲存和檢索資料和檔案。 - 使用 React Email 建立電子郵件模板,並使用 Novu 發送應用程式內和電子郵件通知。 如果您希望在應用程式中發送通知,Novu 是您的最佳選擇。使用 Novu,您可以為應用程式加入多個通知管道,包括聊天、簡訊、電子郵件、推播和應用程式內通知。 本教學的源程式碼可在此處取得: <https://github.com/novuhq/ecom-store-with-nextjs-appwrite-novu-and-stripe> 感謝您的閱讀! --- 原文出處:https://dev.to/novu/building-an-e-commerce-store-with-nextjs-49m

17 個讓我保持高效率的開發者工具

許多開發人員喜歡從頭開始建立東西,但有時工作量太大,使用這些工具可以讓工作變得更容易。 這裡包含一系列工具,因此我相信您會找到適合您需求的工具。 我無法涵蓋所有內容,但如果您知道其他很棒的工具,請隨時在評論中告訴我! 我們開始做吧。 --- 1. [Taipy](https://github.com/Avaiga/taipy) - 資料和人工智慧演算法融入生產級網路應用程式。 -------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) 通常,當我需要 Python 介面時,我會使用 Streamlit。然而,它的效率不是很高,並且存在許多基於效能的問題。 另一方面,Taipy(開源)是用於輕鬆、端到端應用程式開發的完美 Python 程式庫,具有假設分析、智慧管道執行、內建調度和部署工具。 需要明確的是,Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能,而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具,但正如我之前告訴您的那樣,它的性能可能會顯著下降,尤其是在處理大型資料集時,這使得它對於生產級使用來說不切實際。 另一方面,Taipy 在不犧牲性能的情況下提供了簡單性和易用性。 ![大資料支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnvk0tozn0lgj083rzcb.gif) Taipy 有許多整合選項,可以輕鬆地與領先的資料平台連接。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yv31uir3erina587zp8.png) 開始使用以下命令。 ``` pip install taipy ``` 最好的部分是 Taipy,它的所有依賴項現在都與 Python 3.12 完全相容,因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdvnbejf9aivxmqsd3hx.png) 另一個有用的事情是,Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。 ![太皮工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1umm5hcxes0ydbuspb.png) 如果您想閱讀部落格來了解程式碼庫結構,您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難,但 Taipy 提供了[10 多個演示教程,](https://docs.taipy.io/en/release-3.1/gallery/)其中包含程式碼和適當的文件供您遵循。我將詳細討論其中一些專案! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wigid2aokt6spkkoivr.png) 這些用例令人驚嘆,因此請務必查看一些演示應用程式。 Taipy 還在其企業版中提供了 Designer 應用程式(拖放低程式碼編輯器)。它非常有用,您可以觀看下面的演示來了解它是如何工作的! {% 嵌入 https://www.youtube.com/watch?v=y3VPT6IPvC4 %} Taipy 在 GitHub 上有 9.2k+ 顆星,並且處於`v3.1`版本,因此它們正在不斷改進。 {% cta https://github.com/Avaiga/taipy %} 明星 Taipy ⭐️ {% endcta %} --- 2. [Jam](https://jam.dev/) - 一鍵錯誤報告。 ------------------------------------ ![果醬](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tn2c6djsj5hej0gj07xs.png) 幾個月前我發現了 Jam,並且用過它好幾次。 Jam 是一款免費的 Chrome 擴充功能(非開源),您可以使用它來有效地報告錯誤。當然,您還可以做更多的事情。 報告錯誤是一個漫長的過程,您最終可能會錯過解決該錯誤所需的基本資料。這就是開發人員更喜歡使用 Jam 的原因。 觀看此影片,了解 Jam 的工作原理! {% 嵌入 https://www.youtube.com/watch?v=iXjmUwZLzVs&amp;embeds\_referring\_euri=https%3A%2F%2Fchromewebstore.google.com%2F&amp;source\_ve\_path=OTY3MTQ&amp;feature=emb\_imp\_woyt %} 正如您所看到的,最好的部分是它捕獲控制台和網頁日誌訊息,這使得其他開發人員可以方便地查看它。 您還將獲得人工智慧除錯器、後端追蹤、重現步驟和瀏覽器資訊。您還需要什麼? ![即興開發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2tpffk9h60skslw8i0b.png) 我已經使用 Jam 很長時間了,因此您還將獲得一個儀表板來查看您迄今為止建立的所有 Jam。它非常高效並且效果非常好。 ![儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t01buvno1r7pfrolfu6k.png) 它還可以與許多流行的工具一起使用,因此您根本不必改變您的環境。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr566uwdcmors2yvkfcb.png) 不要使用傳統的方式,您可以簡單地對 Jam 進行評論並改進整個流程來輕鬆處理它。 --- 3. [DevGPT](https://www.getdevkit.com/devgpt) - 開發者的人工智慧助理。 ----------------------------------------------------------- ![開發組](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8k8a8jyeo9qkj2hqmc4n.png) 我已經使用 DevGPT 很久了,尤其是當 ChatGPT 還很新的時候。我曾經反覆核對訊息,看看它是否正確。我不相信 ChatGPT 和用於它的訓練資料。 您會驚訝地發現,在某些情況下 DevGPT 比 ChatGPT 更好。但這並不是 DevGPT 的唯一用例。 他們提供了一系列可以直接使用的提示。您可以修改它們的結構並使用斜線命令來使用它。 ![提示結構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fc74vge21d65nbpauig.png) ![提示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yhl7o1grjvcg9q1fee5.png) 範例提示 ![提示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0y51yi3t4s0a54tw0jrs.png) 範例提示 DevGPT 與其他人工智慧助理的獨特之處在於它提供了許多有用的迷你工具。 ![迷你工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il3qcaykt4k9x612251n.png) 我使用最多的是響應式設計,它有助於同時在所有螢幕上查看任何網站預覽。 ![響應式設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nodp7fbhagwqavd5ud5h.png) 響應式設計 每個工具本身都是完整的,因此您不會得到任何不完整的東西。我相信這實際上可以改善您的工作流程條件。 ![日期檢查員](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n1q5bau21dd8dqaqbu4c.png) 日期檢查員 --- 4. [DevToys](https://github.com/DevToys-app/DevToys) - 開發者的瑞士軍刀。 ---------------------------------------------------------------- ![開發玩具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zfl1wjr01fdvca6wxbi.png) DevToys 協助完成日常開發任務,例如格式化 JSON、比較文字和測試 RegExp。 用例是相同的,但 DevToys 提供了更多選項,而且它是一個離線工具,這是一個優點。 這樣,就無需使用不可信的網站來處理您的資料執行簡單的任務。透過智慧型偵測,DevToys 可以偵測用於複製到 Windows 剪貼簿的資料的最佳工具。 緊湊的覆蓋範圍讓您可以保持應用程式較小並位於其他視窗之上。最好的部分是可以同時使用該應用程式的多個實例。 我可以肯定地說,很多開發人員從來不知道這件事。 我很高興地說它是專為 Windows 生態系統設計的軟體。哈哈! ![工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i7wd60jsgdb5tx2t2adi.png) 他們提供的一些工具是: > 轉換器 - JSON &lt;&gt; YAML - 時間戳 - 數基數 - 規劃任務解析器 ![轉換器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8x784fx53x6ia02zal0.png) > 編碼器/解碼器 - 超文本標記語言 - 網址 - Base64 文字與圖片 - 壓縮包 - 智威湯遜解碼器 ![編碼器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/73ts4x1vtcy4yswsmytw.png) > 格式化程式 - JSON - SQL - XML ![XML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e5dc8ko2baywta82ymq5.png) > 發電機 - 哈希(MD5、SHA1、SHA256、SHA512) - UUID 1 和 4 - 洛雷姆·伊普蘇姆 - 校驗和 ![發電機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cwsq8xig6jf69wr99iuv.png) > 文字 - 逃脫/逃脫 - 檢驗員和箱子轉換器 - 正規表示式測試器 - 文字比較 - XML驗證器 - 降價預覽 ![MD預覽](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vcbkse1i5324qg3xu1yd.png) ![文字差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hlqqib4fcjimc03pdrwr.png) > 形象的 - 色盲模擬器 - 顏色選擇器和對比度 - PNG / JPEG 壓縮器 - 影像轉換器 ![圖形工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/631upekcqzh62xyrdjwt.png) 我不了解你,但我不會錯過這個! 您可以閱讀[如何執行 DevToys](https://github.com/DevToys-app/DevToys?tab=readme-ov-file#how-to-run-devtoys) 。 > 關於許可證的註解。 DevToys 使用的授權允許將應用程式作為試用軟體或共享軟體重新分發而無需進行任何更改。然而,作者 Etienne BAUDOUX 和 BenjaminT 不希望你這樣做。如果您認為自己有充分的理由這樣做,請先與我們聯絡討論。 他們在 GitHub 上擁有超過 23,500 顆星,並使用 C#。 {% cta https://github.com/DevToys-app/DevToys %} 明星 DevToys ⭐️ {% endcta %} --- 5. [Linear-](https://github.com/linear)任務管理工具。 ---------------------------------------------- ![線性](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0zlvr12b9untwos846i2.png) 我之前嘗試過使用 Trello 或 Jira 等工具,我想說線性絕對值得。 Jira 似乎有點複雜,適合大型團隊。 Linear 是開源的,是簡化問題、專案和產品路線圖的最佳方法之一。它是一種管理工具,我們都需要它來了解正在發生的事情以及未來的計劃。 ![工作管理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gbno2672e69ofqonsob3.png) 您還可以獲得一個全域命令選單,可以幫助您更快地完成操作。作為開發人員,我們都喜歡這一點! 它們提供了一系列很酷的功能,例如自動跟踪,這可確保將啟動的問題加入到當前週期中。您還將收到有關有風險週期的警告,這可以幫助預測延誤。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3bi4fgk4vp0nfc75jlc.png) ![線性](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfl0onb6rmiepiu1ibns.png) ![循環](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eb7tpqvlbxyhkwzkroyj.png) 您可以看到[25+ 個完整功能](https://linear.app/features)的清單。您還可以了解[他們的整個旅程](https://linear.app/readme)。 如果您喜歡觀看影片,可以觀看此影片,其中涵蓋了有關線性的大部分基本內容。 {% 嵌入 https://youtu.be/oh2AfSFe0H0 %} 它有一個針對 2 個團隊的免費套餐計劃,這足以讓您嘗試一下並看看它們是否合適。 Linear 在主儲存庫上有 650 顆星,是使用 TypeScript 建構的。 {% cta https://github.com/linear %} 星線性 ⭐️ {% endcta %} --- 6. [Pieces](https://github.com/pieces-app) - 您的工作流程副駕駛。 ------------------------------------------------------- ![件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qf2qgqtpv78fxw5guqm5.png) Pieces 是一款 AI 生產力工具,旨在透過智慧程式碼片段管理、情境化副駕駛互動和主動呈現有用材料來幫助開發人員管理混亂的工作流程。 它改善了您的工作流程和整體開發體驗,同時透過完全離線的 AI 方法保持工作的隱私和安全。 實時上下文的最新概念使其更上一層樓。您可以觀看引起熱議的演示! {% 嵌入 https://www.youtube.com/watch?v=aP8u95RTCGE %} 有了這個,Pieces Copilot+ 現在可以提供高度感知的幫助,引導您回到上次離開的地方。 - 問它, `What was I working on an hour ago?`並讓它幫助你重新進入心流狀態。 - 問一下, `How can I resolve the issue I got with Cocoa Pods in the terminal in IntelliJ?` - 或者`What did Mack say I should test in the latest release?` 。 Copilot 可以顯示您知道自己擁有但不記得在哪裡的資訊。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f2ro3rcwnqp4qrmv5e8s.png) 它與您最喜歡的工具無縫集成,以簡化、理解和提升您的編碼流程。 它具有比表面上看到的更令人興奮的功能。 ✅ 它可以透過閃電般的搜尋體驗找到您需要的資料,讓您可以根據您的喜好透過自然語言、程式碼、標籤和其他語義進行查詢。可以放心地說“您的個人離線谷歌”。 ✅ Pieces 使用 OCR 和 Edge-ML 升級螢幕截圖,以提取程式碼並修復無效字元。因此,您可以獲得極其準確的程式碼提取和深度元資料豐富。 您可以查看 Pieces 可用[功能的完整清單](https://pieces.app/features/?utm_source=anmol&utm_medium=cpc&utm_campaign=anmol-article)。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysluzx8qtyaqrtnp4fld.png) ![分享程式碼片段](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wz4xtesz5empxatxju1l.png) 您可以閱讀[文件](https://docs.pieces.app/?utm_source=anmol&utm_medium=cpc&utm_campaign=anmol-article)並存取[網站](https://pieces.app/)。 它還允許您捕獲程式碼片段,您可以在編輯現有程式碼或處理新專案時將其用作參考。這對於開源開發人員來說非常方便。 ✅ 在應用程式中保存部分程式碼。 ✅ 輕鬆存取已儲存的程式碼片段。 ✅ 從網路貼上程式碼。 ✅ 與您的團隊分享您的程式碼。 他們為 Pieces OS 用戶端提供了一系列 SDK 選項,包括[TypeScript](https://github.com/pieces-app/pieces-os-client-sdk-for-typescript) 、 [Kotlin](https://github.com/pieces-app/pieces-os-client-sdk-for-kotlin) 、 [Python](https://github.com/pieces-app/pieces-os-client-sdk-for-python)和[Dart](https://github.com/pieces-app/pieces-os-client-sdk-for-dart) 。 就開源流行度而言,他們仍然是新的,但他們的社群是迄今為止我見過的最好的社群之一。加入他們,成為 Pieces 的一部分! {% cta https://github.com/pieces-app/ %} 星星碎片 ⭐️ {% endcta %} --- 7.[螢幕截圖到程式碼](https://github.com/abi/screenshot-to-code)- 放入螢幕截圖並將其轉換為乾淨的程式碼。 --------------------------------------------------------------------------- ![截圖到程式碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5akiyz5telxqqsj32ftu.png) 這個開源專案廣泛流行,但許多開發人員仍然不了解它。這可以幫助您以 10 倍的速度建立使用者介面。 這是一個簡單的工具,可以使用 AI 將螢幕截圖、模型和 Figma 設計轉換為乾淨、實用的程式碼。 該應用程式有一個 React/Vite 前端和一個 FastAPI 後端。如果您想使用 Claude Sonnet 或獲得實驗視訊支持,您將需要一個能夠存取 GPT-4 Vision API 的 OpenAI API 金鑰或一個 Anthropic 金鑰。您可以閱讀[指南](https://github.com/abi/screenshot-to-code?tab=readme-ov-file#-getting-started)來開始。 您可以在託管版本上[即時試用](https://screenshottocode.com/),並觀看 wiki 上提供的[一系列演示影片](https://github.com/abi/screenshot-to-code/wiki/Screen-Recording-to-Code)。 他們在 GitHub 上擁有超過 52k 顆星,並支援許多技術堆疊,例如 React 和 Vue,以及不錯的 AI 模型,例如 GPT-4 Vision、Claude 3 Sonnet 和 DALL-E 3。 {% cta https://github.com/abi/screenshot-to-code %} 將螢幕截圖轉為程式碼 ⭐️ {% endcta %} --- 8. [Silver Searcher](https://github.com/ggreer/the_silver_searcher) - 超快速的程式碼庫搜尋工具。 ----------------------------------------------------------------------------------- ![銀色搜尋者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/41z8goks4ag2opm0ynvp.png) 許多開源專案都有開發人員多年來建立的大型程式碼庫。顯然,有人無法一次理解所有內容,這就是這個工具的用武之地。 Silver Searcher(開源),通常縮寫為 Ag,是一種快速且有效率的程式碼搜尋工具,專為使用大型程式碼庫的開發人員而設計。 Ag 是作為傳統 grep 命令的替代品而建置的,它利用平行性和智慧過濾來提供超快速的搜尋結果。 它最初是[Ack](https://github.com/beyondgrep/ack3)的克隆,但速度快了 5 到 10 倍。您可以閱讀[為什麼它這麼快](https://github.com/ggreer/the_silver_searcher?tab=readme-ov-file#how-is-it-so-fast)。 它有很多很酷的功能,例如: ✅ 多執行緒可加快程式碼錯誤搜尋速度。 ✅ 忽略 .gitignore、.ignore 和 .hgignore 中的檔案模式以避免不必要的搜尋。 ✅ 可透過命令列選項和可下載的設定檔進行自訂。 好處是它可以與文字編輯器和 IDE 集成,以在您首選的工作流程中增強搜尋功能。 它可以根據您的開發環境在 Windows、macOS 和 Linux 上無縫執行。 您可以閱讀[安裝指南](https://github.com/ggreer/the_silver_searcher?tab=readme-ov-file#installing)。 它在 GitHub 上擁有超過 25,500 顆星,擁有 200 多名貢獻者。 唯一的問題是它不再被維護,因為最後一次提交是 4 年前的事情,並且有 400 多個活躍問題。 {% cta https://github.com/ggreer/the\_silver\_searcher %} 星銀搜尋者 ⭐️ {% endcta %} --- 9. [Obsidian](https://github.com/obsidianmd) - 根據您的風格編寫應用程式。 ------------------------------------------------------------ ![黑曜石](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/26r33zlctwpny1f7hf96.png) Obsidian 是一款私密且靈活的寫作應用程式,可適應您的思維方式。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz0eig3tzezhm32i314m.png) ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z983u116nummmo8n16b7.png) 您也可以查看插件清單\](https://obsidian.md/plugins),它們可以幫助您塑造 Obsidian 以適應您的思維方式。我已經檢查了那裡存在的瘋狂數量的選項! ![外掛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/voyny8k3zbh6a92u3qy4.png) 您甚至可以協作並輕鬆追蹤修訂之間的更改,每個註釋都有一年的版本歷史記錄。 ![版本歷史](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqj3sxbwh1y5t9rbwb4l.png) 您可以發布這些(我從未嘗試過)並透過主題、自訂網域、密碼保護等控制網站的外觀和風格。這是一項付費功能,但您可以閱讀有關[使用 Obsidian 發布的](https://obsidian.md/publish)所有內容。 您可以閱讀詳細[文件](https://docs.obsidian.md/Home)並查看[即時網站](https://obsidian.md/)。您也可以使用本[指南](https://docs.obsidian.md/Plugins/Getting+started/Build+a+plugin)建立自訂插件,並使用 React 或 Svelte。 根據您使用的平台下載[Obsidian](https://obsidian.md/download) 。 他們提供永久免費的套餐,並且不根據功能或使用情況收費。只有當您將 Obsidian 用於商業用途時才需要付費。 您可以嘗試的最佳替代方案之一是[Capacities](https://capacities.io/) 。在某些方面它甚至可能比黑曜石更好。我將在以後的一篇文章中介紹它。 主儲存庫在 GitHub 上有 8k+ 顆星,有 1400 多名貢獻者。開源社群的另一個很棒的專案。 {% cta https://github.com/obsidianmd/obsidian-releases %} 星黑曜石 ⭐️ {% endcta %} --- 10.[自動完成](https://github.com/withfig/autocomplete)- IDE 風格的自動完成功能適用於您現有的終端和 shell。 ---------------------------------------------------------------------------------- ![自動完成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8i8vcidsa023jf8r9382.png) [Fig](https://fig.io/?ref=github_autocomplete)讓命令列對個人來說更容易,對團隊來說更具協作性。 他們最受歡迎的產品是自動完成。當您鍵入時,Fig 會在現有終端機中彈出子命令、選項和上下文相關的參數。 作為開發人員,我們確實需要它來最大限度地提高我們的日常生產力。 最好的部分是您也可以將 Fig 的自動完成功能用於您自己的工具。以下是建立私人完成的方法: ``` import { ai } from "@fig/autocomplete-generators" ... generators: [ ai({ // the prompt prompt: "Generate a git commit message", // Send any relevant local context. message: async ({ executeShellCommand }) => { return executeShellCommand("git diff") }, //Turn each newline into a suggestion (can specify instead a `postProcess1 function if more flexibility is required) splitOn: "\n", }) ] ``` 您可以閱讀[Fig.io/docs](https://fig.io/docs/getting-started)了解如何開始。 您可以觀看下面的演示來了解它是如何工作的! ![影像](https://camo.githubusercontent.com/c477525cab041ce8177323e8140aa872341e3b8130d61454b89ccae87d00d87b/68747470733a2f2f646f63732e6177732e616d617a6f6e2e636f6d2f696d616765732f616d617a6f6e712f6c61746573742f71646576656c6f7065722d75672f696d616765732f636f6d6d616e642d6c696e652d636f6d706c6574696f6e732e676966) 它們在 GitHub 上有 24k+ 顆星,對於經常使用 shell 或終端機的開發人員很有用。 {% cta https://github.com/withfig/autocomplete %} 星狀自動完成 ⭐️ {% endcta %} --- 11. [Excalidraw](https://github.com/excalidraw/excalidraw) - 線上白板,讓您的想法得以實現。 ---------------------------------------------------------------------------- ![外畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u691s86xjinjvehmun51.png) 向遠距工作的過渡讓我懷念使用記號筆和白板進行腦力激盪的簡單性。 我們知道,當語言無法表達時,視覺效果可以彌補理解複雜想法的差距。 Excalidraw(開源)以數位方式重新建立白板體驗,對於補充無聊文字的快速圖表或插圖來說具有無價的價值。您可以建立漂亮的手繪圖表、線框圖或任何您喜歡的內容。 ![外畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ki8wave2sgy3mikv4nec.png) 作為開發人員,對我來說最好的部分是您可以安裝 Excalidraw npm 套件以將 Excalidraw 整合到我自己的應用程式中。哇! ``` npm install react react-dom @excalidraw/excalidraw ``` 一些很棒的功能是: ✅ 本地化 (i18n) 支援。 ✅ 匯出到 PNG、SVG 和剪貼簿。 ✅ 多種工具 - 長方形、圓形、菱形、箭頭、線條、自由繪製、橡皮擦... ✅ 撤銷/重做。 ✅ PWA 支援(離線工作)。 ✅ 即時協作。 ✅ 本機優先支援(自動儲存至瀏覽器)。 ✅ 可分享連結(匯出至可與他人分享的唯讀連結)。 ![exalidraw 具有大螢幕功能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru356oc83ll9mo4dhjd5.png) Google Cloud、Meta、CodeSandbox、Notion 和 Replit 等產品整合了 Excalidraw,賦予其巨大的可信度。 您可以閱讀[文件](https://docs.excalidraw.com/docs/introduction/development)並檢查[excalidraw 編輯器](https://excalidraw.com/)。 他們甚至有一套迷你的人工智慧功能,並支援從美人魚轉換,這非常有幫助。 ![人工智慧特點](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihl90jf222ahtymec8ui.png) 團隊提供了一個[即時編輯器](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/customizing-styles),如果您不想在本地執行,您可以直接檢查任何類型的變更。讓我著迷的是,有些團隊工作非常努力,因此開發人員的體驗是一流的。 ![即時編輯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob848loog24milg0h2uv.png) 儘管它是免費使用的,但他們提供了增強版本,因此您可以檢查[付費計劃和免費計劃之間的差異](https://plus.excalidraw.com/excalidraw-plus-vs-excalidraw/)。 說實話,我從來沒有真正想過這會是開源的。但它非常受歡迎,GitHub 上有超過 74,000 顆星,有 1,300 多個活躍問題。 {% cta https://github.com/excalidraw/excalidraw %} 明星 Excalidraw ⭐️ {% endcta %} --- 12. [Mintlify](https://github.com/mintlify/writer) - 在建置時出現的文件。 --------------------------------------------------------------- ![精簡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gvk07kmn8p48cpssogov.png) 我們都知道在程式碼中建立文件非常重要,這樣我們就可以了解稍後發生的情況。但這是一個漫長的過程,而且大多數時候我們都懶得這麼做。 這就是 Mintlify 作為人工智慧文件編寫者可以幫助您在短短 1 秒內記錄程式碼的地方。哇! 幾個月前我發現了 Mintlify,從那時起我就一直是它的粉絲。 正如我們在該公司的大多數網站上看到的那樣,他們還為任何專案提供完整的文件。我見過很多公司使用它,甚至我使用我的商務電子郵件產生了完整的文件,結果證明這是非常簡單和體面的。如果您想要這些文件,Mintlify 就是解決方案。 ![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7obg1a3hilqx47h6nw3o.png) copilotkit 文件也由 Mintlify 提供支持 我們在這裡要討論的主要用例是根據程式碼產生文件。當您編寫程式碼時,它會自動記錄程式碼,以便其他人更容易跟上。 您可以安裝[VSCode 擴充功能](https://marketplace.visualstudio.com/items?itemName=mintlify.document)或將其安裝在[IntelliJ](https://plugins.jetbrains.com/plugin/18606-mintlify-doc-writer)上。 您只需突出顯示程式碼或將遊標放在要記錄的行上。然後點選「編寫文件」按鈕(或按 ⌘ + 。) 您可以閱讀[文件](https://github.com/mintlify/writer?tab=readme-ov-file#%EF%B8%8F-mintlify-writer)和[安全指南](https://writer.mintlify.com/security)。 如果您更喜歡教程,那麼您可以觀看[Mintlify 的工作原理](https://www.loom.com/embed/3dbfcd7e0e1b47519d957746e05bf0f4)。它支援 10 多種程式語言,並支援許多文件字串格式,例如 JSDoc、reST、NumPy 等。 順便說一句,他們的網站連結是[writer.mintlify.com](https://writer.mintlify.com/) ;回購協議中目前的似乎是錯誤的。 Mintlify 是一個方便的工具,用於記錄程式碼,這是每個開發人員都應該做的事情。它使其他人更容易有效地理解您的程式碼。 它在 GitHub 上有大約 2.5k 顆星,基於 TypeScript 建置,受到許多開發人員的喜愛。 {% cta https://github.com/mintlify/writer %} Star Mintlify ⭐️ {% endcta %} --- 13. [Focusmate](https://www.focusmate.com/) - 虛擬協同辦公,可以完成任何事情。 -------------------------------------------------------------- ![焦點伴侶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bwxmwxio6jq7bw2mw10j.png) 儘管我們盡量不拖延,但在編碼期間我們總是擔心拖延。對於這些情況,Focusmate 是完美的解決方案! 這是一個共同工作的虛擬社區,您會在其中分配一位合作夥伴,確保您專注於自己的任務。 您需要與其他 Focusmate 用戶預訂會議。確定何時預訂課程後,您可以存取 Focusmate 儀表板。在那裡,您將看到一個日曆,其中包含其他使用者的可用會話時間。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4bqjf66nrzrdjyccc6gl.png) 要與其他人預訂會議,您只需點擊日曆中的個人資料圖片,然後選擇與他們預訂會議。 ![儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21pudw9jdj90uup92k4j.png) 一旦您這樣做,Focusmate 就會推薦幾個可用使用者供您選擇。 重點是它允許[安靜模式](https://support.focusmate.com/en/articles/8060080-session-settings-my-task-quiet-mode-and-partner),在這種模式下,人們沒有麥克風或無法說話(想想圖書館和共享空間)。 ![靜音模式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vav48ckhnn2dhikx19ju.png) 就我個人而言,我沒有嘗試過很多次,但它有一個很大的社區,所以值得一試。 --- 14. [Spark Mail](https://sparkmailapp.com/) - 優化您的電子郵件管理。 --------------------------------------------------------- ![火花郵件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/824r33nf4lc8p28fkoyp.png) Spark(非開源)不僅僅是一個電子郵件用戶端。這是關於人們應該如何溝通和組織工作的哲學。 Spark 的目標是幫助您專注於重要的事情並實現收件匣之外的目標。 他們首先使電子郵件變得智能,然後改進了團隊協作,現在他們已經解決了資訊過載問題,使電子郵件變得聚焦。 觀看快速演示,了解 Spark 的工作原理! {% 嵌入 https://www.youtube.com/watch?v=l2QpqNw3zXU&amp;t=3s %} 我喜歡 Spark 的一些很酷的功能: ✅ 您可以設定電子郵件稍後返回收件匣的時間。 ✅ 您可以新增提醒來提示您跟進。 ✅ 您可以安排電子郵件的發送時間。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czr3jmfmkhmqj7yd264k.png) ✅ 您也可以與您的團隊合作: - 在同一地址下管理電子郵件和團隊角色。 - 即時一起撰寫電子郵件草稿。 - 將任務分配給同事並追蹤他們的狀態。 ✅ 您甚至可以將電子郵件變成帶有私人評論的聊天。 ![合作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7p0vdhd7vh5s72qjgub.png) 我知道你想知道人工智慧,所以它有很多功能,你可以讓人工智慧為你起草電子郵件或獲得一堆回覆選項。 ![你有回覆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyux9mn1wc0h5bde3w9l.png) 更好的是,您可以校對、調整語氣、改寫、擴展或縮短文本,等等。 ![已編輯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2yxs7vejau2h96ell5dr.png) 但我最喜歡的是建立電子郵件簽名的選項,因為簡單的選項並不那麼有效。 ![電子郵件簽名](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rhq44742us4lity50jig.png) 您可以查看[定價計劃](https://sparkmailapp.com/plans-comparison),其中包括足夠好的免費套餐,然後下載[Spark for Windows](https://sparkmailapp.com/windows) 。也請查看他們的[部落格](https://sparkmailapp.com/blog)和[電子郵件指南](https://sparkmailapp.com/how-to)以了解更多資訊。 儘管我喜歡人工智慧,但我不喜歡人工智慧為我建立電子郵件草稿。我比較喜歡自己做,哈哈! 不管怎樣,Spark 絕對是一種有趣的電子郵件管理方式。嘗試一下並讓我知道效果如何。 如果您正在尋找替代方案,我推薦[Inbox Zero](https://github.com/elie222/inbox-zero) ,它是開源的,我已經在我的一篇文章中介紹過,以及 SaneBox (https://www.sanebox.com/),我沒有介紹它因為它沒有免費套餐。 --- 15. [n8n](https://github.com/n8n-io/n8n) - 工作流程自動化工具。 ----------------------------------------------------- ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4pqsc84nhgj0b9dhfaxo.png) n8n 是一個可擴展的工作流程自動化工具。透過公平程式碼分發模型,n8n 將始終擁有可見的原始程式碼,可用於自託管,並允許您加入自訂函數、邏輯和應用程式。 每個開發人員都想使用的工具。畢竟,自動化是生產力和簡單性的關鍵。 ![n8n](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rxnp57kw5szbpj6mfs1p.png) n8n 基於節點的方法使其具有高度通用性,使您能夠將任何事物連接到任何事物。 有[400 多個集成選項](https://n8n.io/integrations),這幾乎是瘋狂的! 您可以看到所有[安裝](https://docs.n8n.io/choose-n8n/)選項,包括 Docker、npm 和自架。 開始使用以下命令。 ``` npx n8n ``` 此命令將下載啟動 n8n 所需的所有內容。然後,您可以透過開啟`http://localhost:5678`來存取 n8n 並開始建置工作流程。 在 YouTube 上觀看此[快速入門影片](https://www.youtube.com/watch?v=1MwSoB0gnM4)! {% 嵌入 https://www.youtube.com/watch?v=1MwSoB0gnM4 %} 您可以閱讀[文件](https://docs.n8n.io/)並閱讀本[指南](https://docs.n8n.io/try-it-out/),根據您的需求快速開始。 他們還提供初學者和中級[課程,](https://docs.n8n.io/courses/)以便輕鬆學習。 他們在 GitHub 上有 41k+ 顆星,並提供兩個包供整體使用。 {% cta https://github.com/n8n-io/n8n %} 明星 n8n ⭐️ {% endcta %} --- 16. [Infisical](https://github.com/Infisical/infisical) - 秘密管理平台。 ----------------------------------------------------------------- ![內部的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jrolzjdnkky1r694h9av.png) Infisical 是一個開源秘密管理平台,團隊可以用它來集中 API 金鑰、資料庫憑證和設定等秘密。 他們讓每個人(而不僅僅是安全團隊)都可以更輕鬆地進行秘密管理,這意味著從頭開始重新設計整個開發人員體驗。 就我個人而言,我不介意使用 .env 文件,因為我並不特別謹慎。不過,您可以閱讀[立即停止使用 .env 檔案!](https://dev.to/gregorygaines/stop-using-env-files-now-kp0)由格雷戈里來理解。 他們提供了四種 SDK,分別用於<a href="">Node.js</a> 、 <a href="">Python</a> 、 <a href="">Java</a>和<a href="">.Net</a> 。您可以自行託管或使用他們的雲端。 開始使用以下 npm 指令。 ``` npm install @infisical/sdk ``` 這是使用入門 (Node.js SDK) 的方法。 ``` import { InfisicalClient, LogLevel } from "@infisical/sdk"; const client = new InfisicalClient({ clientId: "YOUR_CLIENT_ID", clientSecret: "YOUR_CLIENT_SECRET", logLevel: LogLevel.Error }); const secrets = await client.listSecrets({ environment: "dev", projectId: "PROJECT_ID", path: "/foo/bar/", includeImports: false }); ``` ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3eu288l470du91b66pd.png) Infisical 還提供了一組工具來自動防止 git 歷史記錄的秘密洩露。可以使用預提交掛鉤或透過與 GitHub 等平台直接整合在 Infisical CLI 層級上設定此功能。 您可以閱讀[文件](https://infisical.com/docs/documentation/getting-started/introduction)並檢查如何[安裝 CLI](https://infisical.com/docs/cli/overview) ,這是使用它的最佳方式。 Infisical 還可用於將機密注入 Kubernetes 叢集和自動部署,以便應用程式使用最新的機密。有很多整合選項可用。 ![內部](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x0tvt5ycaiqhggv6wml.png) 在使用整個原始程式碼之前一定要檢查他們的[許可證](https://github.com/Infisical/infisical/blob/main/LICENSE),因為他們有一些受 MIT Expat 保護的企業級程式碼,但不用擔心,大部分程式碼都是免費使用的。 他們在 GitHub 上擁有超過 11k 顆星,並發布了超過 125 個版本,因此他們正在不斷發展。另外,Infiscial CLI 的安裝次數超過 540 萬次,因此非常值得信賴。 {% cta https://github.com/Infisical/infisical %} 明星 Infisical ⭐️ {% endcta %} --- 17. [Gitinfluence](https://github.com/geovanesantana/gitfluence) - 尋找正確 git 指令的 AI 工具。 -------------------------------------------------------------------------------------- ![影響力](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8mr459i8l2lwa892nkae.png) 如您所知,學習每一個 git 指令是很困難的。如果用例很複雜,它就會變得複雜。 這就是為什麼 Gitinfluence 是人工智慧驅動的解決方案,可以幫助您快速找到正確的命令。借助這個出色的工具,您可以節省大量時間。 例如,這是我輸入我需要的內容後得到的回應。 ![回覆](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqylmd1mim7smgc78cby.png) 它就像聽起來一樣簡單而且非常有效率。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfmsm5cazm7sdnbvbmqe.png) 這是一個非常早期的開源專案 (next.js),擁有 55 顆星,但我確信它有很大的發展潛力。 {% cta https://github.com/geovanesantana/gitfluence %} 明星 Gitinfluence ⭐️ {% endcta %} --- 其中許多工具可以幫助您提高日常工作效率。 不管怎樣,如果您知道其他很棒的工具,請在評論中告訴我們。 祝你有美好的一天!直到下一次。 |如果你喜歡這類東西, 請關注我以了解更多:) | [![用戶名 Anmol_Codes 的 Twitter 個人資料](https://img.shields.io/badge/Twitter-d5d5d5?style=for-the-badge&logo=x&logoColor=0A0209)](https://twitter.com/Anmol_Codes) [![用戶名 Anmol-Baranwal 的 GitHub 個人資料](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Anmol-Baranwal) [![用戶名 Anmol-Baranwal 的 LinkedIn 個人資料](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 關注 Taipy 以了解更多此類內容。 {% 嵌入 https://dev.to/taipy %} --- 原文出處:https://dev.to/taipy/17-developer-tools-that-keep-me-productive-37e2

21 個可提高您工作效率的 VS Code 擴展

開發者們大家好👋 身為開發人員,我們大部分時間都花在 VS Code 上。在這篇文章中,我將分享一些 VS Code 擴展,它們可以幫助提高您的工作效率並節省您的寶貴時間。 讓我們開始吧🚀 Codiumate -- ![鈉鹽](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tmm61xovmha09i9us1fl.png) > ✨ Codiumate 使用 AI 產生測試、檢視測試結果、修復用 Python、JavaScript、TypeScript 和 Java 等各種程式語言編寫的程式碼的錯誤和錯誤。它在您的 IDE 中充當您的私人代理或助手。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Codium.codium) Partial Diff ---- ![部分差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8uqlcq8e60lkthg7dosx.png) > ✨ Partial Diff 擴充功能可讓您比較同一文件內或不同文件中的不同文字選擇,從而更容易發現變更和差異。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ryu1kn.partial-diff) Git Graph ---- ![git圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ww8j9qvrsr66wmn0mosw.png) > ✨ Git Graph 擴充功能為您提供了 Git 儲存庫的視覺化表示,讓您更容易理解和管理分支、提交和合併,您還可以從圖表中執行 Git 操作。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph) Path Intellisense ------ ![路徑智能](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v22b2kyhxwwfpzpnwtc4.png) > ✨ Path Intellisense 擴充擴展了 VS Code 中的預設路徑完成,以包含工作區中的所有可用路徑,即使它們尚未匯入。 🔹連結 [👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) Error Lens ---- ![誤差透鏡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ui3i6k3zm1b64r1ga7xb.png) > ✨ Error Lens 擴充功能透過直接在程式碼中顯示錯誤訊息來增強 VS Code 中的錯誤突出顯示。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) SQL工具 ----- ![SQL工具](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ceg4gtsb96fme1in7z2.png) > ✨ SQLTools 是 VS Code 的輕量級 SQL 用戶端,它為您提供資料庫管理、查詢執行,並直接在編輯器中提供視覺化結果。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=mtxr.sqltools) Markdown 多合一 ------------ ![Markdown 多合一](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3k7dpy89w65i30ggq8ih.png) > ✨ Markdown All in One 擴展為 Markdown 編輯提供全面支持,包括快捷方式、目錄生成等。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one) Turbo 控制台日誌 ----------- ![Turbo 控制台日誌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ycisuti1dsz1z632olq.png) > ✨ Turbo Console Log 擴充功能會自動將有意義的 console.log 語句新增到您的程式碼中,這可以在偵錯過程中節省大量時間。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log) Quokka.js --------- ![Quokka.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bko1yy8akuwm36ny4j4u.png) > ✨ Quokka.js 是一款用於快速 JavaScript / TypeScript 原型設計的開發人員生產力工具。當您鍵入時,執行時間值會更新並顯示在 IDE 中程式碼旁邊。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode) 專案經理 ---- ![專案經理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/drvs445isps5ydysl58v.png) > ✨ 專案管理器可讓您在 VS Code 中的不同專案之間輕鬆切換,使其成為管理和導航多個專案的捷徑。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager) Todo Tree --- ![所有樹](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xr5zknvtyuujeipsmbh0.png) > ✨ Todo Tree 擴充功能掃描您的程式碼中的註解標籤,例如 TODO 和 FIXME,並將它們顯示在活動欄中的樹狀視圖中。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=Gruntfuggly.todo-tree) TabNine ---- ![選項卡九](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bycu1zglpkloehx8yq1d.png) > ✨ TabNine 是一款支援多種程式語言的人工智慧程式碼補全擴展,它為您提供智慧程式碼建議、即時程式碼補全、聊天和程式碼生成。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=TabNine.tabnine-vscode) Better Comments ----- ![更好的評論](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tkjarirc3nsaeqg509zr.png) > ✨ Better Comments 擴充功能可協助您在程式碼中建立或編寫更人性化的註解。它允許您使用不同的顏色將註釋分類為警報、查詢、待辦事項等。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments) Polacode --- ![波拉碼](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0shnpzcdku2prtrafvl.png) > ✨ Polacode 是一款時尚的程式碼螢幕截圖工具,可讓您直接從 VS Code 建立漂亮的程式碼螢幕截圖。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=pnp.polacode) REST Client ----- ![休息客戶端](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s54cm9rrjwllxjipi9y0.png) > ✨ REST 用戶端可讓您直接在 VS Code 中發送 HTTP 請求並查看回應,從而更輕鬆地測試和偵錯 API。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=humao.rest-client) HTML CSS 支持 ----------- ![HTML CSS 支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tk68l0ra0jjpy07ebe0t.png) > ✨ HTML CSS 支援根據工作區中的 CSS 檔案為 HTML 類別屬性提供 CSS 類別和 ID 名稱補全。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) Git Lens ---- ![吉特透鏡](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iyhhk9m4xezrl6gqrrh9.png) > ✨ GitLens 擴充功能增強了 VS Code 的內建 Git 功能。它可以幫助您視覺化程式碼作者、無縫導航和探索 Git 儲存庫,並深入了解您的程式碼。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) Wakatime ---- ![瓦卡時間](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfs2ux1njyipa8cdc88n.png) > ✨ WakaTime 擴充功能為您的編碼活動提供自動時間追蹤。它可以讓您深入了解自己的編碼習慣,並幫助您更有效地管理時間。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime) Bookmarks -- ![書籤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7jn88xn94pg001feiazq.png) > ✨ 書籤擴充功能可協助您在程式碼中導航,輕鬆快速地在重要位置之間移動。不再需要搜尋程式碼。它還支援一組選擇命令,允許您選擇已加入書籤的行以及已加入書籤的行之間的區域。它對於日誌檔案分析非常有用。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=alefragnani.Bookmarks) PlantUML ----- ![植物UML](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvlanhdp5yx61xteaen1.png) > ✨ PlantUML 擴充功能可讓您從純文字描述建立 UML 圖,從而輕鬆視覺化和記錄您的系統設計。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=jebbs.plantuml) 尾隨空格 ---- ![尾隨空格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55wyje0me31nchvmkk6k.png) > ✨ 尾隨空格擴充會自動反白並刪除程式碼中的尾隨空格,它有助於保持程式碼整潔且一致。 🔹連結[👉marketplace.visualstudio.com](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces) 這就是這篇文章的內容。感謝您的閱讀💖 > 請在評論中告訴我您最常使用哪一個或任何其他有用的擴充功能👇 在 👉 https://x.com/kiran\_\_a\_\_n X https://github.com/Kiran1689 GitHub 上找到我 https://dev.to/dev\_kiran --- 原文出處:https://dev.to/dev_kiran/21-vs-code-extensions-to-boost-your-productivity-1fil

如何建立基本的 RAG 應用程式

生成式人工智慧的出現使我們建構的應用程式具有新的功能成為可能。法學碩士可以以令人難以置信的技巧回答使用者的問題。那麼,為什麼不將它們用作我們系統的一部分呢?如果用戶需要協助使用該應用程式,我們可以加入聊天功能,法學碩士將回答用戶的所有問題。如果我們的應用程式有解釋重要概念的部落格文章,而不是讓用戶閱讀所有內容來獲取所需的知識,它可以只詢問並立即得到回應。 為什麼是拉格? ------- 我們決定將法學碩士整合到我們的應用程式中,為我們的用戶帶來這些功能。然而,我們很快就發現該模型無法回答使用者的問題。它沒有任何關於我們的應用程式的資訊!如果需要回答的資訊不在LLM的訓練資料中,則無法回答。更糟的是,如果它不知道答案,它可能會產生一個完全錯誤的事實的幻覺!這很糟糕,那麼我們該如何解決這個問題呢?採用 Transformer 架構的法學碩士已展現出優異的情境學習能力。因此,我們只需在提示中傳遞它所需的所有事實以及問題即可!呃哦,每次提示都塞滿所有資料肯定會很貴。那麼,我們該怎麼做呢? 什麼是RAG? ------- RAG 代表**檢索增強產生**。 RAG與變形金剛一起誕生。最初,它被用來用額外的事實來增強法學碩士的預訓練資料。一旦 Transformers 的情境學習能力變得明顯,在推理過程中增強提示也成為一種常見做法。 基本的 RAG 管道由三個步驟組成:索引、檢索和產生。法學碩士需要回答的所有資訊都在向量資料庫中建立了索引。當使用者提出問題時,我們可以從該向量資料庫中檢索資訊的相關部分。最後,結合相關資訊和使用者的問題,我們可以提示法學碩士根據我們作為上下文提供的資訊給出答案。讓我們更詳細地看看如何實現這一目標。 ### 索引 首先,我們從任何地方提取模型所需的資訊。生成模型使用純文字(某些模型也可以使用圖像或其他格式,這些格式也可以被索引,但這是另一個主題)。如果訊息已經是純文字形式,那麼我們很幸運。但它也可能存在於 PDF 文件、Word 文件、Excel、Markdown 等。 ![索引過程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9rbz60uizoiswi8lng0k.png) 一旦資訊採用文字格式,我們就可以將其儲存在向量資料庫中。向量資料庫將儲存該文字的嵌入表示。這將使我們能夠搜尋與另一個文本具有相似嵌入表示的文本部分,因此它們涉及相似的概念。我們將整個文字分成更小的部分或區塊,計算每個部分的嵌入表示,最後將它們儲存在向量資料庫中。 ### 恢復 當使用者問我們一個問題時,我們可以使用我們用於索引資料的相同嵌入模型將該問題轉換為向量表示。利用該向量表示,我們將計算問題與向量資料庫中儲存的每個區塊之間的相似度因子。我們將選擇與查詢最相似的前 K 個區塊,因此它們的內容與問題的概念相同(因此它們可能包含答案)。 ![檢索流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/isms443c1ytjcazo5t17.png) ### 世代 系統會建立一個提示,將使用者的問題和相關上下文放在一起,以幫助 LLM 回答。我們也可能包含用戶和人工智慧助理之間對話的先前訊息。 LLM 根據上下文而不是之前學習的預訓練資料為使用者產生答案。 ![檢索流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x9ih4417ubpht7kyskav.png) 例子 -- 對於這個例子,我們將收錄一篇名為「蘭格語言模型的檢索增強生成:調查」的論文。我們將使用本文中包含的資訊查詢LLM,以便它可以回答使用者對其內容的疑問。您可以在[本文提供的 Google Colab 筆記本](https://colab.research.google.com/drive/1mFmPN0GBHpS-kMDMuU8EDrWu1KENy69e?usp=sharing)中遵循此範例。 首先,我們將載入 PDF 文件並使用 LangChain 的 PyPDF 連接器對其進行解析。 ![使用 pypdf 載入文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mggsh8vxc1i6aknze50x.png) 一旦我們從文件中獲得文本,我們就必須將其分割成更小的區塊。我們可以使用 LangChain 的可用分割器,例如本例中的 RecursiveCharacterSplitter: ![將文件分割成區塊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92h7gf78bv699oup9xfc.png) 我們將使用 BGE-small,一種開源嵌入模型。我們將從 HuggingFace Hub 下載它並在所有區塊上執行它以計算它們的向量表示。 ![計算嵌入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g9qoe5p4b0t37gooh4ix.png) 一旦我們有了所有區塊的向量表示,我們就可以建立一個記憶體向量資料庫並將所有向量儲存在其中。對於此範例,我們將使用 FAISS 資料庫。 ![將嵌入載入到向量資料庫中](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvw8o3f9hwtafr3olord.png) 資料庫現已建立。現在,我們將接受用戶對此資訊的查詢。在這種情況下,用戶詢問 Naive RAG 的缺點是什麼。我們使用與先前相同的嵌入模型對該查詢進行編碼。然後,我們檢索與該查詢最相似的前 5 個區塊。 ![從向量資料庫中檢索與查詢類似的文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3euuftp1j1edlvj8oau.png) 檢索相關上下文後,我們使用此資訊和使用者的原始查詢來建立提示。在這個例子中,我們將使用克勞德的俳句作為法學碩士: ![使用上下文和查詢來產生答案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdl7s7gownp37psg9084.png) 常見問題和陷阱 ------- 正如標題所暗示的,該解決方案是一個基本的或簡單的 RAG 實作。它將幫助您的申請充分利用其所使用的法學碩士和您的資料。但它並不適用於所有情況。這些只是 RAG 最常見的問題: - **檢索不相關的資訊。**如果檢索器從向量資料庫中獲取與問題無關的資料,它將混淆試圖回答問題的模型。這可能會導致不使用上下文來回答問題,或回答與所問內容不同的問題。 - **錯過重要資訊。**也許回答問題所需的資訊不在資料庫中。也許檢索機制無法找到相關的區塊。我們必須找到方法來幫助檢索器輕鬆、更可靠地找到所需的資訊。 - **產生上下文不支援的回應。**如果上下文有模型需要的訊息,但它不使用它而是依賴自己的預訓練資料,那麼這一切都是徒勞的。預訓練資料中的資訊可能已過時或錯誤。我們必須支持模型始終使用上下文來回答,或者如果它無法從上下文中回答,則回答「我不知道」。 - **對查詢的回應不相關。** LLM 可能會使用您提供的所有資訊來產生回應,但這並不意味著它回答了使用者的問題。重要的是,模型必須堅持使用者的原始問題,而不是迷失在大量資訊中。 - **相似上下文導致的冗餘響應。**當我們攝取具有相似資訊的多個文件時,檢索器有可能會獲得多個幾乎相同的資訊區塊。這可能會導致法學碩士在其回復中多次重複相同的訊息。 如何避免這些問題呢? ---------- 為了避免這些問題,簡單的 RAG 管道可能還不夠。我們需要建立一個更先進、更複雜的RAG系統。存在經過測試的技術來解決我們提出的問題。我們可以將它們合併到 RAG 管道中,以提高 RAG 應用程式的效能。 另一個需要解決的重要問題是,為了改進您的 RAG 應用程式,您需要能夠測量和評估整個過程。你無法改進你無法衡量的東西。另外,當您進行評估時,您可能會發現基本的 RAG 設定足以滿足您的用例,並且不需要使其過於複雜。畢竟,即使是非常基本的 RAG 實施也可以極大地改進您的 LLM 支援的應用程式。 在以後的文章中,我將更詳細地解釋先進的 RAG 技術,這將幫助我們避免常見問題並將我們的 RAG 應用程式提升到新的水平。 --- 原文出處:https://dev.to/rogiia/how-to-build-a-basic-rag-app-h9p

每個開發人員都需要了解的 300 多個免費 API

目錄 == 1. [天氣 API ⛅️🌦️🌩️](#weather-apis) 2. [匯率 API 💱💲💹](#exchange-rates-apis) 3. [加密貨幣 API ₿💰🔗](#cryptocurrency-apis) 4. [佔位符圖像 API 📸🖼️🎨](#placeholder-image-apis) 5. [隨機產生器 API 🎲🔀🎰](#random-generators-apis) 6. [新聞 API 📰📢🗞️](#news-apis) 7. [地圖與地理定位 API 🗺️📍🌍](#maps-and-geolocation-apis) 8. [搜尋 API 🔍📑🕵️](#search-apis) 9. [機器學習 API 🤖🧠🔮](#machine-learning-apis) 10. [截圖與圖片 API 📷🌐🖼️](#screenshot-and-picture-apis) 11. [SEO API 🔍📈💡](#seo-apis) 12. [購物 API 🛍️🛒📦](#shopping-apis) 13. [開發者 API 💻🔧🛠️](#developer-apis) 14. [旅行和交流 API 🛫🚗🚉](#travel-and-transportation-apis) 15. [通訊 API 📞💬📧](#communication-apis) 16. [支付和金融 API 💳💸🏦](#payment-and-financial-apis) 17. [分析與監控 API 📊📈📉](#analytics-and-monitoring-apis) 18. [自然語言處理 (NLP) API 🗣️🔍💬](#natural-language-processing-nlp-apis) 19. [實用程式和工具 API 🛠️🔧⚙️](#utilities-and-tools-apis) 20. [政府和開放資料 API 🏛️📜📊](#government-and-open-data-apis) [Qit.tools](https://qit.tools/) - ⚡ 互動式線上網路 🛠️ 工具 --- 天氣 API ⛅️🌦️🌩️ ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |打開天氣地圖 |全球天氣資料,包括預報和當前天氣 | 60 次通話/分鐘 | API 金鑰 |[連結](https://openweathermap.org/api)| |天氣堆疊 |即時與歷史天氣資料 |每月 1000 通電話 | API 金鑰 |[連結](https://weatherstack.com/documentation)| |天氣比特 |天氣預報資料,包括預報和當前天氣 |每天 500 通電話 | API 金鑰 |[連結](https://www.weatherbit.io/api)| |克利馬塞爾|超本地天氣資料與見解 |每天 100 通電話 | API 金鑰 |[連結](https://docs.climacell.co/)| |準確天氣 |天氣預報|每天 50 通電話 | API 金鑰 |[連結](https://developer.accuweather.com/apis)| |視覺穿越|歷史和當前天氣資料|每天 1000 通電話 | API 金鑰 |[連結](https://www.visualcrossing.com/weather-api)| | 2020 年天氣 |天氣預報 |每天 100 通電話 | API 金鑰 |[連結](https://www.weather2020.com/weather-api/)| |風暴玻璃|海洋氣象資料|每天 50 通電話 | API 金鑰 |[連結](https://stormglass.io/docs/)| |天氣 API |天氣預報資料,包括預報和當前天氣 |每月 1000 通電話 | API 金鑰 |[連結](https://www.weatherapi.com/docs/)| | Aeris 天氣 |天氣資料和影像|每月 1000 通電話 | API 金鑰 |[連結](https://www.aerisweather.com/support/docs/api/)| |這裡 天氣 |天氣預報資料,包括預報和當前天氣 |每月 25 萬通電話 | API 金鑰 |[連結](https://developer.here.com/documentation/weather/dev_guide/index.html)| |世界天氣在線|全球天氣資料,包括預報和歷史天氣|每天 500 通電話 | API 金鑰 |[連結](https://www.worldweatheronline.com/developer/)| |明天.io |超本地天氣資料與見解 |每天 100 通電話 | API 金鑰 |[連結](https://docs.tomorrow.io/)| |黑暗的天空|天氣預報資料,包括預報和當前天氣 |每天 1000 通電話 | API 金鑰 |[連結](https://darksky.net/dev)| |國家氣象局|美國政府天氣資料|無限 |無 |[連結](https://www.weather.gov/documentation/services-web-api)| --- 匯率 API 💱💲💹 ---------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |匯率-API | 160 種貨幣的準確匯率 |每月 1500 通電話 | API 金鑰 |[連結](https://www.exchangerate-api.com/docs)| |開放匯率|即時與歷史匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://docs.openexchangerates.org/)| |貨幣層 | 168 種世界貨幣即時匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://currencylayer.com/documentation)| |固定器|即時匯率與貨幣換算|每月 1000 通電話 | API 金鑰 |[連結](https://fixer.io/documentation)| | XE 貨幣資料 |即時與歷史匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://xecdapi.xe.com/)| |外匯匯率 API |即時與歷史外匯匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://www.forexrateapi.com/documentation)| |費率API |免費外匯匯率和貨幣兌換|無限|無 |[連結](https://ratesapi.io/documentation/)| |匯率API | 160 種貨幣的準確匯率 |每月 1500 通電話 | API 金鑰 |[連結](https://www.exchangerate-api.com/docs)| | OANDA 匯率 |即時與歷史匯率 |每月 1000 通電話 | API 金鑰 |[連結](https://www.oanda.com/fx-for-business/fx-data-services)| |貨幣轉換器 API |即時匯率與貨幣換算 |每月 1000 通電話 | API 金鑰 |[連結](https://www.currencyconverterapi.com/docs)| |匯率API |匯率與貨幣換算|每月 1000 通電話 | API 金鑰 |[連結](https://www.exchangeratesapi.io/documentation)| |阿爾法優勢|即時與歷史匯率 |每天 500 通電話 | API 金鑰 |[連結](https://www.alphavantage.co/documentation/)| |西點燃|外匯匯率API |每月 1000 通電話 | API 金鑰 |[連結](https://www.xignite.com/xforex-rates)| | Everbase 貨幣 |匯率與貨幣換算|每月 1000 通電話 | API 金鑰 |[連結](https://currency-api.everbase.com/documentation)| |匯率主機 |外匯匯率API |無限|無 |[連結](https://exchangerate.host/#/#docs)| --- 加密貨幣 API ₿💰🔗 ------------ |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | CoinGecko | 幣虎超過 6000 種貨幣的加密貨幣資料 |無限|無 |[連結](https://www.coingecko.com/en/api/documentation)| | CoinMarketCap |加密貨幣市值排名、圖表等 |每天 333 通電話 | API 金鑰 |[連結](https://coinmarketcap.com/api/documentation/)| |加密貨幣比較 |加密貨幣資料與價格比較 |每月 25 萬通電話 | API 金鑰 |[連結](https://min-api.cryptocompare.com/documentation)| |辣椒粉 |加密貨幣市場資料|每月 25,000 通電話 | API 金鑰 |[連結](https://api.coinpaprika.com)| |經濟學 |加密貨幣市值和定價資料|每月 125,000 通電話 | API 金鑰 |[連結](https://nomics.com/docs/)| |幣API |即時與歷史加密貨幣資料 |每月 100,000 通電話 | API 金鑰 |[連結](https://docs.coinapi.io/)| |梅薩裡 |加密貨幣資料與研究 |每天 1000 通電話 | API 金鑰 |[連結](https://messari.io/api)| |硬幣傳說 |加密貨幣市場資料 |無限|無 |[連結](https://www.coinlore.com/cryptocurrency-data-api)| |幣庫 |加密貨幣資料,包括價格和市值 |每天 100 個請求 | API 金鑰 |[連結](https://coinlib.io/apidocs)| | Bitfinex |加密貨幣交易平台API |無限|無 |[連結](https://docs.bitfinex.com/docs)| |比特雷克斯 |加密貨幣交易平台API |無限|無 |[連結](https://bittrex.github.io/api/v3)| |幣安 |加密貨幣交易平台API |無限|無 |[連結](https://binance-docs.github.io/apidocs/spot/en/)| |庫幣 |加密貨幣交易平台API |無限|無 |[連結](https://docs.kucoin.com/)| |克拉肯 |加密貨幣交易平台API |無限|無 |[連結](https://www.kraken.com/features/api)| |波蘭 |加密貨幣交易平台API |無限|無 |[連結](https://docs.poloniex.com/)| --- 佔位符圖像 API 📸🖼️🎨 -------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |洛雷姆·皮克蘇姆 |隨機佔位符圖像 |無限|無 |[連結](https://picsum.photos/)| |佔位符.com |自訂佔位符影像 |無限|無 |[連結](https://placeholder.com/)| | Unsplash 來源 |高品質佔位符影像 |無限|無 |[連結](https://source.unsplash.com/)| |放置小貓 |小貓的佔位圖像 |無限|無 |[連結](https://placekitten.com/)| |地點狗 |狗的佔位符圖像 |無限|無 |[連結](https://place.dog/)| |占星者 |熊的佔位符影像 |無限|無 |[連結](https://placebear.com/)| |填充穆雷 |比爾·莫瑞 (Bill Murray) 的佔位符圖像 |無限|無 |[連結](http://www.fillmurray.com/)| | FakerAPI |虛假資料和占位符圖像 |無限|無 |[連結](https://fakerapi.it/en)| |虛擬圖像.com |自訂佔位符影像 |無限|無 |[連結](https://dummyimage.com/)| | ImagePlaceholder.com |自訂佔位符影像 |無限|無 |[連結](https://imageplaceholder.com/)| |佔位符影像 |帶有自訂文字的佔位符圖像 |無限|無 |[連結](https://placeholderimage.dev/)| | Picsum.照片 |來自 Unsplash 的隨機圖像 |無限|無 |[連結](https://picsum.photos/)| |隨機影像API |隨機佔位符圖像 |無限|無 |[連結](https://random.imagecdn.app/)| |普拉霍爾德.it |自訂佔位符影像 |無限|無 |[連結](https://placehold.it/)| | LoremFlickr |隨機佔位符圖像 |無限|無 |[連結](https://loremflickr.com/)| --- 隨機產生器 API 🎲🔀🎰 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |隨機.org |真隨機數生成| 1,000,000 位/天 | API 金鑰 |[連結](https://www.random.org/)| |隨機用戶 |產生隨機用戶資料 |無限|無 |[連結](https://randomuser.me/)| | FakerAPI |虛假資料生成 |無限|無 |[連結](https://fakerapi.it/en)| | UUID 產生器 |產生隨機 UUID |無限|無 |[連結](https://www.uuidgenerator.net/)| |骰子熊頭像 |產生隨機頭像 |無限|無 |[連結](https://avatars.dicebear.com/)| |密碼產生器 |產生隨機密碼 |無限|無 |[連結](https://passwordwolf.com/api/)| |貓的事實|隨機貓的事實|無限|無 |[連結](https://catfact.ninja/)| |有趣的翻譯 |生成有趣的翻譯 |每天 5 個請求 |無 |[連結](https://funtranslations.com/api)| |行情.休息 |產生隨機報價 | 10 個請求/小時 |無 |[連結](https://quotes.rest/)| |通知單|隨機建議生成器 |無限|無 |[連結](https://api.adviceslip.com/)| |無聊API |活動建議 |無限|無 |[連結](https://www.boredapi.com/)| |非常感謝產生隨機佔位符文字 |無限|無 |[連結](https://loripsum.net/)| |烏納梅斯 |產生隨機名稱 |無限|無 |[連結](https://uinames.com/)| |皮普|產生隨機人物檔案 |無限|無 |[連結](https://pipl.ir/)| |隨機資料API |產生隨機資料進行測試 |無限|無 |[連結](https://random-data-api.com/)| --- 新聞 API 📰📢🗞️ ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |新聞API |聚合各種來源的新聞文章 |每天 500 通電話 | API 金鑰 |[連結](https://newsapi.org/docs)| |當前 API |即時新聞資料 |每月 1000 通電話 | API 金鑰 |[連結](https://currentsapi.services/en/docs/)| |上下文網路新聞 |即時新聞搜尋與發現|每月 10,000 通電話 | API 金鑰 |[連結](https://rapidapi.com/contextualwebsearch/api/web-search)| |必應新聞搜尋 |微軟Bing的新聞搜尋結果|每月 3000 通電話 | API 金鑰 |[連結](https://docs.microsoft.com/en-us/azure/cognitive-services/bing-news-search/)| |媒體堆疊 |即時新聞資料 |每月 500 通電話 | API 金鑰 |[連結](https://mediastack.com/documentation)| |紐約時報 API |造訪《紐約時報》文章與檔案 |無限| API 金鑰 |[連結](https://developer.nytimes.com/apis)| |守護者API |造訪《衛報》文章與檔案 |無限| API 金鑰 |[連結](https://open-platform.theguardian.com/documentation/)| |活動登記|即時新聞與事件資料 |每月 500 通電話 | API 金鑰 |[連結](https://eventregistry.org/documentation)| | GDELT 專案 |即時事件資料與新聞 |每月 10,000 通電話 | API 金鑰 |[連結](https://blog.gdeltproject.org/gdelt-2-0-our-global-world-in-realtime/)| |新聞資料.io |來自各種來源的即時新聞文章 |每天 200 通電話 | API 金鑰 |[連結](https://newsdata.io/docs)| |上下文網路|根據上下文搜尋新聞文章 |每月 1000 通電話 | API 金鑰 |[連結](https://contextualwebsearch.com/news-api)| |我的新聞 API |存取各種新聞來源|每月 500 通電話 | API 金鑰 |[連結](https://mynewsapi.com/documentation)| | Webz.io |即時新聞與部落格資料 |每月 1000 通電話 | API 金鑰 |[連結](https://webz.io/documentation)| | AYLIEN 新聞 API |各種來源的新聞文章及分析 |每天 200 通電話 | API 金鑰 |[連結](https://newsapi.aylien.com/docs)| |駭客新聞 |存取黑客新聞文章 |無限|無 |[連結](https://github.com/HackerNews/API)| --- 地圖和地理定位 API 🗺️📍🌍 ---------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌地圖 API |全面的地圖和地理定位資料|每月 200 美元免費使用| API 金鑰 |[連結](https://developers.google.com/maps/documentation)| |地圖盒 |客製化地圖和地理定位服務|每月 50,000 次瀏覽 | API 金鑰 |[連結](https://docs.mapbox.com/)| | OpenCage 地理編碼 |正向和反向地理編碼 |每天 2,500 通電話 | API 金鑰 |[連結](https://opencagedata.com/api)| |這裡 地圖 |地圖和位置資料服務|每月 25 萬通電話 | API 金鑰 |[連結](https://developer.here.com/documentation)| |打開街道地圖 |免費可編輯的世界地圖|無限|無 |[連結](https://operations.osmfoundation.org/policies/nominatim/)| |位置堆疊 |用於正向和反向地理編碼的地理編碼 API |每月 25,000 通電話 | API 金鑰 |[連結](https://positionstack.com/documentation)| |湯姆湯姆 |地圖和地理定位資料服務|每天 2,500 通電話 | API 金鑰 |[連結](https://developer.tomtom.com/)| |地圖探索 |地圖和地理定位資料服務|每月 15,000 通電話 | API 金鑰 |[連結](https://developer.mapquest.com/documentation/)| | ipstack| IP地理定位API |每月 10,000 通電話 | API 金鑰 |[連結](https://ipstack.com/documentation)| |地理資訊 |地理編碼和反向地理編碼|每天 2,500 通電話 | API 金鑰 |[連結](https://www.geocod.io/)| |位置智商 |地理編碼和反向地理編碼|每天 5,000 通電話 | API 金鑰 |[連結](https://locationiq.com/docs)| |地圖繪製器 |地圖、地理編碼與地理定位服務 |每月 100,000 個切片請求 | API 金鑰 |[連結](https://www.maptiler.com/cloud/)| |什麼三字 |使用三字位址的定位服務 |每月 1000 通電話 | API 金鑰 |[連結](https://what3words.com/products)| |聰明街道 |地址驗證與地理編碼 |每月 250 個請求 | API 金鑰 |[連結](https://smartystreets.com/docs)| |地理化|地理編碼、路由和其他定位服務 |每月 30,000 個請求| API 金鑰 |[連結](https://apidocs.geoapify.com/)| --- 搜尋 API 🔍📑🕵️ ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌自訂搜尋|搜尋網路或特定網站 |每天 100 次查詢 | API 金鑰 |[連結](https://developers.google.com/custom-search/v1/overview)| |阿爾戈利亞 |快速、可靠的搜尋即服務 | 10,000 筆記錄 | API 金鑰 |[連結](https://www.algolia.com/doc/)| |必應搜尋 API |微軟Bing的搜尋結果|每月 3,000 通電話 | API 金鑰 |[連結](https://docs.microsoft.com/en-us/azure/cognitive-services/bing-web-search/)| |彈性搜尋|基於Lucene的搜尋引擎|免費套餐可用 | API 金鑰 |[連結](https://www.elastic.co/guide/en/elasticsearch/reference/current/search.html)| |斯威夫類型 |為您的網站客製化搜尋引擎 |每月 1000 個請求 | API 金鑰 |[連結](https://swiftype.com/documentation)| |美麗搜尋 |快速、開源搜尋引擎 |無限|無 |[連結](https://docs.meilisearch.com/)| |新增搜尋 |為您的網站客製化搜尋 |每天 50 次搜尋 | API 金鑰 |[連結](https://www.addsearch.com/docs/)| | Yandex 搜尋 API |使用 Yandex 搜尋網路 |每天 10,000 個請求 | API 金鑰 |[連結](https://yandex.com/dev/search/)| |雅虎搜尋 |使用 Yahoo | 搜尋網絡每天 5,000 次查詢 | API 金鑰 |[連結](https://developer.yahoo.com/boss/search/)| |沃爾夫拉姆·阿爾法 |計算知識引擎|每月 2,000 次查詢 | API 金鑰 |[連結](https://products.wolframalpha.com/api/documentation/)| |上下文網路搜尋|具有上下文過濾功能的網路搜尋 |每月 10,000 通電話 | API 金鑰 |[連結](https://rapidapi.com/contextualwebsearch/api/web-search)| |網站搜尋 360 |搜尋您的網站或應用程式 |每月 1,500 個請求 | API 金鑰 |[連結](https://www.sitesearch360.com/docs/)| | DuckDuckGo API |匿名搜尋網路 |無限|無 |[連結](https://duckduckgo.com/api)| |搜尋.io |搜尋即服務 | 1000 次操作/月| API 金鑰 |[連結](https://search.io/docs)| |阿帕奇·索爾 |高度可靠、可擴展的搜尋平台 |開源|無 |[連結](https://solr.apache.org/guide/)| --- 機器學習 API 🤖🧠🔮 ------------ |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌雲端機器學習 |機器學習服務與 API | $300 免費贈金 | API 金鑰 |[連結](https://cloud.google.com/products/ai)| |亞馬遜 SageMaker |建置、訓練與部署機器學習模型 |免費套餐可用 | API 金鑰 |[連結](https://aws.amazon.com/sagemaker/)| | IBM 沃森 |人工智慧和機器學習服務 |免費套餐可用 | API 金鑰 |[連結](https://www.ibm.com/watson/products-services/)| |微軟 Azure 機器學習 |機器學習服務與 API | $200 免費贈金 | API 金鑰 |[連結](https://azure.microsoft.com/en-us/services/machine-learning/)| |擁抱臉|最先進的 NLP 模型和 API |免費套餐可用 | API 金鑰 |[連結](https://huggingface.co/docs)| |開放人工智慧 |包括 GPT-3 在內的 AI 模型 |免費套餐可用 | API 金鑰 |[連結](https://beta.openai.com/docs/)| | BigML |機器學習平台與 API |免費套餐可用 | API 金鑰 |[連結](https://bigml.com/)| |克拉里法伊 |影像影片辨識服務|免費套餐可用 | API 金鑰 |[連結](https://docs.clarifai.com/)| |資料機器人|機器學習模型部署與管理 |免費套餐可用 | API 金鑰 |[連結](https://www.datarobot.com/)| |猴子學習 |文字分析與機器學習 |每月 300 次查詢 | API 金鑰 |[連結](https://monkeylearn.com/api/)| |艾琳|自然語言處理與機器學習 |免費套餐可用 | API 金鑰 |[連結](https://aylien.com/text-api/)| |演算法|演算法市場與機器學習 API |每月 10,000 次查詢 | API 金鑰 |[連結](https://algorithmia.com/developers)| |法術|機器學習基礎設施和工具|免費套餐可用 | API 金鑰 |[連結](https://spell.run/docs)| |海王星.ai |機器學習模型管理與監控 |免費套餐可用 | API 金鑰 |[連結](https://neptune.ai/)| |維茲.ai |自訂機器學習模型建立 |免費套餐可用 | API 金鑰 |[連結](https://vize.ai/)| --- 截圖與圖片 API 📷🌐🖼️ -------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |截圖API |抓取網站截圖 | 100 個螢幕截圖/月| API 金鑰 |[連結](https://screenshotapi.net/documentation)| |網址框 |擷取螢幕截圖並將網頁轉換為 PDF |每月 100 次捕獲 | API 金鑰 |[連結](https://urlbox.io/docs)| |第2頁圖片 |網頁截圖| 1000 個螢幕截圖/月| API 金鑰 |[連結](https://www.page2images.com/)| |縮網 |擷取網頁的螢幕截圖和縮圖 |每月 1000 次捕獲 | API 金鑰 |[連結](https://www.shrinktheweb.com/)| |瀏覽 |抓取網站截圖 | 1000 點/月 | API 金鑰 |[連結](https://browshot.com/api/documentation)| |縮圖.ws |抓取網站截圖 |每月 500 個螢幕截圖| API 金鑰 |[連結](https://thumbnail.ws/)| |網址框 |抓取網站截圖 |每月 1000 次捕獲 | API 金鑰 |[連結](https://www.urlbox.io/)| |截圖圖層 |抓取網站截圖 |每月 100 次捕獲 | API 金鑰 |[連結](https://screenshotlayer.com/documentation)| | APIFlash |抓取網站截圖 | 100 個螢幕截圖/月| API 金鑰 |[連結](https://apiflash.com/documentation)| | AbstractAPI 截圖 |抓取網站截圖 | 100 個螢幕截圖/月| API 金鑰 |[連結](https://www.abstractapi.com/website-screenshot-api)| |斯內皮托 |抓取網站截圖 |每月 100 次捕獲 | API 金鑰 |[連結](https://snapito.com/)| |網站2PDF |將網頁轉換為 PDF |每月 100 次捕獲 | API 金鑰 |[連結](https://website2pdf.io/)| |截圖機 |抓取網站截圖 | 1000 個螢幕截圖/月| API 金鑰 |[連結](https://www.screenshotmachine.com/)| |斯蒂利奧 |自動網站截圖|每月 1000 次捕獲 | API 金鑰 |[連結](https://stillio.com/)| |寶石像素 |抓取網站截圖 |每月 100 次捕獲 | API 金鑰 |[連結](https://www.gempixel.com/)| --- SEO API 🔍📈💡 ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |莫茲 | SEO 指標與資料 |每月 100 個請求 | API 金鑰 |[連結](https://moz.com/products/api)| |阿雷夫斯 | SEO 指標與資料 | 500 行/月 | API 金鑰 |[連結](https://ahrefs.com/api)| | SEMrush | SEO 指標與資料 |每月 100 個請求 | API 金鑰 |[連結](https://www.semrush.com/api/)| | Serpstat | SEO 指標與資料 |每天 1000 次查詢 | API 金鑰 |[連結](https://serpstat.com/api/)| |間諜福| SEO 指標與競爭對手分析 |每月 500 個請求 | API 金鑰 |[連結](https://www.spyfu.com/api)| | SEO 資料 |關鍵字、SERP 等的 SEO 資料 |每月 100 個請求 | API 金鑰 |[連結](https://docs.dataforseo.com/)| |認知SEO | SEO 指標與資料 |每月 1000 個請求 | API 金鑰 |[連結](https://cognitiveseo.com/api/)| |雄偉| SEO 指標與資料 |每月 100 個請求 | API 金鑰 |[連結](https://developer.majestic.com/)| |搜尋引擎結果頁面 API |即時搜尋引擎結果 |每月 1000 個請求 | API 金鑰 |[連結](https://serpapi.com/)| | RankRanger | SEO 指標與排名追蹤 |每月 1000 個請求 | API 金鑰 |[連結](https://www.rankranger.com/api)| |流動性| SEO 指標與資料 |每月 1000 個請求 | API 金鑰 |[連結](https://seobility.net/en/api/)| |光明本地|本地 SEO 資料和指標 |每月 1000 個請求 | API 金鑰 |[連結](https://www.brightlocal.com/api/)| |搜尋指標 | SEO 指標與資料 |每月 1000 個請求 | API 金鑰 |[連結](https://www.searchmetrics.com/api/)| |統計 |即時搜尋引擎結果 |每月 1000 個請求 | API 金鑰 |[連結](https://getstat.com/api/)| |林迪|反向連結檢查器和 SEO 指標 |每月 1000 個請求 | API 金鑰 |[連結](https://www.linkody.com/api)| --- 購物 API 🛍️🛒📦 ----------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |亞馬遜產品廣告API |存取亞馬遜產品資料 |每月 1,000 個請求 | API 金鑰 |[連結](https://webservices.amazon.com/paapi5/documentation)| |易趣 API |存取 eBay 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.ebay.com/api-docs/static/apis.html)| |沃爾瑪API |存取沃爾瑪產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.walmart.com/)| |百思買 API |存取百思買產品資料 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.bestbuy.com/)| | Etsy API |存取 Etsy 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://www.etsy.com/developers/documentation)| |樂天 API |存取樂天產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://webservice.rakuten.co.jp/documentation/)| | Shopify API |存取 Shopify 商店資料和市場 |無限| API 金鑰 |[連結](https://shopify.dev/api)| | WooCommerce API |存取 WooCommerce 商店資料和市場 |無限| API 金鑰 |[連結](https://woocommerce.github.io/woocommerce-rest-api-docs/)| | BigCommerce API |存取 BigCommerce 商店資料和市場 |無限| API 金鑰 |[連結](https://developer.bigcommerce.com/api-reference)| |速賣通 API |存取 AliExpress 產品資料和市場 |每天 1,000 個請求 | API 金鑰 |[連結](https://developers.aliexpress.com/en/doc.htm)| |扎蘭多 API |存取 Zalando 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developers.zalando.com/)| |目標API |存取 Target 產品資料和市場 |每天 1,000 個請求 | API 金鑰 |[連結](https://developer.target.com/)| | Flipkart API |存取 Flipkart 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://affiliate.flipkart.com/api-docs)| |好市多 API |存取 Costco 產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://costco.com/)| |家得寶 API |存取家得寶產品資料和市場 |每天 5,000 個請求 | API 金鑰 |[連結](https://developer.homedepot.com/)| --- 開發者 API 💻🔧🛠️ ------------ |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | GitHub API |存取 GitHub 資料 |無限| OAuth |[連結](https://docs.github.com/en/rest)| |亞搏體育appGitLab API |存取 GitLab 資料 |無限| OAuth |[連結](https://docs.gitlab.com/ee/api/)| | Bitbucket API |存取 Bitbucket 資料 |無限| OAuth |[連結](https://developer.atlassian.com/bitbucket/api/2/reference/)| |特拉維斯 CI API |存取 Travis CI 資料 |無限| API 金鑰 |[連結](https://developer.travis-ci.com/)| |詹金斯 API |存取 Jenkins 資料 |無限| API 金鑰 |[連結](https://www.jenkins.io/doc/book/using/remote-access-api/)| | CircleCI API |存取 CircleCI 資料 |無限| API 金鑰 |[連結](https://circleci.com/docs/api/v2/)| | GitKraken API |存取 GitKraken 資料 |無限| API 金鑰 |[連結](https://support.gitkraken.com/developers/)| | Heroku API |存取 Heroku 資料和服務 |無限| OAuth |[連結](https://devcenter.heroku.com/articles/platform-api-reference)| |維塞爾 API |存取 Vercel 資料和服務 |無限| API 金鑰 |[連結](https://vercel.com/docs/api)| | Netlify API |存取 Netlify 資料和服務 |無限| OAuth |[連結](https://docs.netlify.com/api/get-started/)| | Firebase API |存取 Firebase 資料和服務 |無限| API 金鑰 |[連結](https://firebase.google.com/docs/reference/rest)| |數位海洋 API |存取 DigitalOcean 資料與服務 |無限| OAuth |[連結](https://developers.digitalocean.com/documentation/v2/)| |亞馬遜AWS官方博客存取AWS資料和服務|免費套餐可用 | API 金鑰 |[連結](https://docs.aws.amazon.com/)| | Azure API |存取 Azure 資料和服務 |免費套餐可用 | API 金鑰 |[連結](https://docs.microsoft.com/en-us/azure/azure-api-management/)| | Google雲端API |存取 Google Cloud 資料與服務 | $300 免費贈金 | API 金鑰 |[連結](https://cloud.google.com/apis)| --- 旅行和交流 API 🛫🚗🚉 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |天巡 API |存取航班搜尋和預訂資料 |每天 500 個請求 | API 金鑰 |[連結](https://developers.skyscanner.net/docs)| |艾瑪迪斯 API |存取旅行預訂和搜尋資料 |每天 500 通電話 | API 金鑰 |[連結](https://developers.amadeus.com/)| |谷歌航班 API |存取航班搜尋和預訂資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developers.google.com/flights)| | Rome2Rio API |取得多式聯運旅行搜尋資料 |每天 1000 個請求 | API 金鑰 |[連結](https://www.rome2rio.com/documentation/search)| |軍刀 API |存取旅遊預訂和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.sabre.com/docs/read/rest_apis)| |皮划艇 API |存取航班和酒店搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.kayak.com/)| | Expedia API |存取旅行預訂和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developers.expediagroup.com/docs/apis)| | Priceline API |存取旅行預訂和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.priceline.com/docs/apis)| | TripAdvisor API |存取旅遊評論和搜尋資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer-tripadvisor.com/home/docs)| |愛彼迎 API |取得短期租賃資料 |每天 500 個請求 | API 金鑰 |[連結](https://developer.airbnb.com/docs)| | Lyft API |取得共乘資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developer.lyft.com/docs)| |優步 API |取得共乘資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developer.uber.com/docs)| | BlaBlaCar API |取得共乘資料 |每天 500 個請求 | API 金鑰 |[連結](https://dev.blablacar.com/docs)| | Yelp API |存取業務和評論資料 |每天 5000 個請求 | API 金鑰 |[連結](https://www.yelp.com/developers/documentation/v3)| |運輸API |取得公共交通資料 |每天 1000 個請求 | API 金鑰 |[連結](https://developer.transportapi.com/docs)| --- 通訊 API 📞💬📧 ---------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | Twilio API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.twilio.com/docs/usage/api)| |發送網格 API |存取電子郵件發送服務 |每天 100 封電子郵件 | API 金鑰 |[連結](https://docs.sendgrid.com/)| |郵件槍 API |存取電子郵件發送服務 |每月 5,000 封電子郵件 | API 金鑰 |[連結](https://documentation.mailgun.com/en/latest/)| | Nexmo API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.nexmo.com/api)| |普利沃 API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.plivo.com/docs/)| |推送 API |即時通訊服務|免費套餐可用 | API 金鑰 |[連結](https://pusher.com/docs)| |郵戳API |存取電子郵件發送服務 |每月 100 封電子郵件 | API 金鑰 |[連結](https://postmarkapp.com/developer)| |訊號線 API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://signalwire.com/resources/docs)| |山魈API |存取電子郵件發送服務 |每月 2,000 封電子郵件 | API 金鑰 |[連結](https://mandrillapp.com/api/docs/)| |點擊發送 API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://developers.clicksend.com/docs/rest/v3/)| | Tropo API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.tropo.com/docs)| |鬆弛 API |存取 Slack 訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://api.slack.com/)| |不和諧 API |造訪 Discord 訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://discord.com/developers/docs/intro)| |縮放 API |存取 Zoom 視訊會議服務 |免費套餐可用 | API 金鑰 |[連結](https://marketplace.zoom.us/docs/api-reference/zoom-api)| |對講API |造訪 Intercom 訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://developers.intercom.com/intercom-api-reference)| --- 支付和金融 API 💳💸🏦 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |條紋 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://stripe.com/docs/api)| |貝寶 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.paypal.com/docs/api/overview/)| |廣場 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.squareup.com/reference/square)| |布倫特里 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.paypal.com/braintree/docs/guides/overview)| | Authorize.net API | 授權.net API獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.authorize.net/api/reference/index.html)| |格子 API |取得金融資料和服務|免費套餐可用 | API 金鑰 |[連結](https://plaid.com/docs/)| |德沃拉 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developers.dwolla.com/guides/)| |明智的API |獲得國際匯款服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.transferwise.com/)| |世界支付 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.worldpay.com/docs)| | WePay API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://developer.wepay.com/)| |革命 API |取得金融資料和服務|免費套餐可用 | API 金鑰 |[連結](https://developer.revolut.com/docs)| | Xero API |取得會計和財務資料|免費套餐可用 | API 金鑰 |[連結](https://developer.xero.com/documentation/api)| | QuickBooks API |取得會計和財務資料|免費套餐可用 | API 金鑰 |[連結](https://developer.intuit.com/app/developer/qbo/docs/get-started)| |約德利 API |取得金融資料和服務|免費套餐可用 | API 金鑰 |[連結](https://developer.yodlee.com/apidocs)| |直覺 API |取得會計和財務資料|免費套餐可用 | API 金鑰 |[連結](https://developer.intuit.com/)| --- 分析與監控 API 📊📈📉 ------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌分析 API |存取 Google Analytics 資料 |免費套餐可用 | API 金鑰 |[連結](https://developers.google.com/analytics/devguides/reporting/core/v4)| |混合面板 API |存取 Mixpanel 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://developer.mixpanel.com/docs)| |振幅 API |存取 Amplitude 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.amplitude.com/developers/apis)| |熱罐 API |存取 Hotjar 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://developer.hotjar.com/docs)| |堆API |存取堆分析資料 |免費套餐可用 | API 金鑰 |[連結](https://docs.heap.io/docs)| | Piwik 專業版 API |存取 Piwik PRO 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://piwikpro.dev/documentation)| |段 API |存取細分分析資料 |免費套餐可用 | API 金鑰 |[連結](https://segment.com/docs/)| |瘋狂蛋API |存取 Crazy Egg 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.crazyegg.com/api)| |烏普拉 API |存取 Woopra 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.woopra.com/docs/api)| | Kissmetrics API |存取 Kissmetrics 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.kissmetrics.io/api)| |點擊 API |存取 Clicky 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://clicky.com/help/api)| |開放網路分析 API |存取開放網路分析資料 |免費套餐可用 | API 金鑰 |[連結](https://www.openwebanalytics.com/api/)| | Yandex Metrica API |存取 Yandex Metrica 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://yandex.com/support/metrica/quick-start.html)| |統計計數器 API |存取 StatCounter 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://statcounter.com/docs/)| | Chartbeat API |存取 Chartbeat 分析資料 |免費套餐可用 | API 金鑰 |[連結](https://chartbeat.com/docs/api/)| --- 自然語言處理 (NLP) API 🗣️🔍💬 --------------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |谷歌雲端自然語言處理 |自然語言處理服務| $300 免費贈金 | API 金鑰 |[連結](https://cloud.google.com/natural-language/docs)| | IBM 沃森 NLP |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://www.ibm.com/watson/services/natural-language-understanding/)| |微軟Azure NLP|自然語言處理服務| $200 免費贈金 | API 金鑰 |[連結](https://azure.microsoft.com/en-us/services/cognitive-services/text-analytics/)| |亞馬遜理解|自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://aws.amazon.com/comprehend/)| |文字剃刀 |自然語言處理服務|每月 5000 個請求 | API 金鑰 |[連結](https://www.textrazor.com/docs)| |艾琳 NLP |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://aylien.com/text-api/)| |猴子學習 |文本分析與自然語言處理 |每月 300 次查詢 | API 金鑰 |[連結](https://monkeylearn.com/api/)| |意義雲 |文本分析與自然語言處理 |每月 20,000 個請求| API 金鑰 |[連結](https://www.meaningcloud.com/developer/apis)| | NLP 演算法 |自然語言處理演算法 |每月 10,000 次查詢 | API 金鑰 |[連結](https://algorithmia.com/developers)| |維特人工智慧 |自然語言處理與聊天機器人整合 |免費套餐可用 | API 金鑰 |[連結](https://wit.ai/docs)| |詞法解析 |文本分析與自然語言處理 |免費套餐可用 | API 金鑰 |[連結](https://www.lexalytics.com/developers)| | SapienAPI |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://www.sapien.com/api)| |聊天機器人 |自然語言處理與聊天機器人整合 |免費套餐可用 |無 |[連結](https://chatterbot.readthedocs.io/en/stable/)| |蒂薩尼API |文本分析與自然語言處理 |每月 30,000 個請求| API 金鑰 |[連結](https://tisane.ai/documentation)| | DeepAI 文字 API |自然語言處理服務|免費套餐可用 | API 金鑰 |[連結](https://deepai.org/machine-learning-model/text-tagging)| --- 實用程式和工具 API 🛠️🔧⚙️ ----------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| | IP資訊| IP 位址資訊與地理位置 |每月 50,000 個請求| API 金鑰 |[連結](https://ipinfo.io/developers)| |打開天氣地圖 |天氣預報資料,包括預報和當前天氣 | 60 次通話/分鐘 | API 金鑰 |[連結](https://openweathermap.org/api)| | Twilio API |存取簡訊、語音和訊息服務 |免費套餐可用 | API 金鑰 |[連結](https://www.twilio.com/docs/usage/api)| |發送網格 API |存取電子郵件發送服務 |每天 100 封電子郵件 | API 金鑰 |[連結](https://docs.sendgrid.com/)| | Clearbit API |商業智慧資料|每月 50,000 個請求| API 金鑰 |[連結](https://clearbit.com/docs)| | IPStack | IP 地理定位與資訊 |每月 10,000 個請求| API 金鑰 |[連結](https://ipstack.com/documentation)| |抽象API |各種實用 API,如 IP 地理定位、電子郵件驗證 |每月 500 個請求 | API 金鑰 |[連結](https://www.abstractapi.com/)| | API 介面 |網頁抓取與自動化 |每月 10,000 個請求| API 金鑰 |[連結](https://docs.apify.com/api/v2)| |刮刀 API |網頁抓取工具|每月 5000 個請求 | API 金鑰 |[連結](https://www.scraperapi.com/documentation/)| |郵差 API | API開發與測試工具|無限| API 金鑰 |[連結](https://www.postman.com/api-documentation/)| |哨兵 API |應用程式監控與錯誤追蹤 |每月 5000 場活動 | API 金鑰 |[連結](https://docs.sentry.io/api/)| |條紋 API |獲得支付處理服務 |免費套餐可用 | API 金鑰 |[連結](https://stripe.com/docs/api)| | PDF.co API | PDF 產生與資料擷取 |每月 1000 個請求 | API 金鑰 |[連結](https://apidocs.pdf.co/)| |比特利API | URL 縮短與連結管理 |每月 1000 個請求 | API 金鑰 |[連結](https://dev.bitly.com/docs/)| | OpenCage 地理編碼 |正向和反向地理編碼 |每天 2,500 通電話 | API 金鑰 |[連結](https://opencagedata.com/api)| --- 政府和開放資料 API 🏛️📜📊 ---------------- |名稱 |描述 |免費等級限制 |認證|文件 | |--------------------------------|---------------- ------------ -------------------------------------- |-------------------- --|--------------------|----- ----------------------------------- --------| |資料.gov API |美國政府公開資料|無限|無 |[連結](https://www.data.gov/developers/apis)| |英國政府 API |英國政府公開資料|無限|無 |[連結](https://www.gov.uk/guidance/using-the-api)| |歐盟開放資料入口網站API |歐盟開放資料|無限|無 |[連結](https://data.europa.eu/euodp/en/developers-corner)| |世界銀行 API |全球發展資料|無限|無 |[連結](https://datahelpdesk.worldbank.org/knowledgebase/topics/125589)| |聯合國資料API |聯合國開放資料|無限|無 |[連結](https://data.un.org/Host.aspx?Content=API)| |經合組織資料 API |經合組織的經濟和社會資料|無限|無 |[連結](https://data.oecd.org/api/)| |人口普查 API |美國人口普查局資料|無限| API 金鑰 |[連結](https://www.census.gov/data/developers/data-sets.html)| |開放資料軟體 |不同來源的各種開放資料|無限| API 金鑰 |[連結](https://www.opendatasoft.com/)| |紐約市 API |紐約市開放資料 |無限|無 |[連結](https://opendata.cityofnewyork.us/)| |美國地質調查局API |美國地質調查局資料|無限| API 金鑰 |[連結](https://www.usgs.gov/products/data-and-tools/apis)| |美國宇航局API |存取 NASA 資料和圖像 |無限| API 金鑰 |[連結](https://api.nasa.gov/)| |開放狀態 API |美國各州立法資料|無限| API 金鑰 |[連結](https://openstates.org/data/)| |美國政府 API |美國政府資訊與服務|無限|無 |[連結](https://www.usa.gov/developer)| | Data.gov.au API |澳洲政府公開資料|無限|無 |[連結](https://data.gov.au/)| | HealthData.gov API |美國健康相關開放資料|無限|無 |[連結](https://healthdata.gov/)| --- \*\*如果您發現此內容有幫助, 請[買杯咖啡](https://buymeacoffee.com/deyurii)🌟✨\*\* --- 原文出處:https://dev.to/falselight/300-free-apis-every-developer-needs-to-know-3j76

PHP:Laravel,Ruby:Rails,JavaScript:?

最近,Twitter 上發生了 JS 開發者與 Laravel 和 Rails 開發者之間的熱烈討論。它始於 Laravel 的作者 Taylor Otwell 的一條長推文: https://twitter.com/taylorotwell/status/1791468060903096422 簡而言之,他認為整個 JavaScript 生態系統缺乏像 Laravel 或 Rails 這樣真正的「全端」框架,而這些框架可以讓單一開發人員建立下一個 GitHub、AirBnb 或 Shopify。 我對此深表同情,因為我在建立[ZenStack](https://zenstack.dev/) (Prisma ORM 之上的打字稿工具包)時有著相同的目標。事實上,我常在社區裡聽到這樣的話: ![聊天影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vikbshwmv16hxolkhw2s.png) 沒有人可以否認 JS 生態系統的受歡迎程度和快速增長,即使在非會員中也是如此。那麼這是為什麼呢? 歷史原因 ---- > 人們創造自己的歷史,但他們並不是隨心所欲地創造歷史;他們不是在自我選擇的環境下成功的,而是在已經存在的、給定的、從過去傳承下來的環境下成功的——卡爾·馬克思 PHP 和 Ruby 從一開始就被設計為伺服器端語言。 PHP 於 1994 年建立,用於建立動態網頁,而 Ruby 於 20 世紀 90 年代中期出現,是為通用程式設計而設計的。 鑑於它們的伺服器端起源,PHP 和 Ruby 自然適合綜合框架,可以處理 Web 開發的各個方面,從路由和控制器到資料庫互動和模板引擎。這導致了 Laravel 和 Rails 等框架的建立,以提供完整的、固定的方式來建立 Web 應用程式。 相較之下,JavaScript 是作為網頁瀏覽器的客戶端腳本語言而誕生的。直到 2009 年 Node.js 推出之前,它與後端無關。如果您聽說過 Netscape Navigator 和 Internet Explorer 之間的“瀏覽器戰爭”,您可能會意識到前端中持續存在的混亂,這種混亂今天繼續以瀏覽器兼容性的名義讓前端開發人員瘋狂。因此,早期的網路是將不同的技術拼湊在一起。因此,JavaScript 開發人員開始習慣模組化,允許靈活地混合和匹配庫和工具以求生存。這就是為什麼與 Node.js 一起出現的 NPM 以驚人的速度成長,迅速成為世界上最大的軟體註冊中心。 這種不同的情況導致了不同的開發人員文化: - **PHP/Ruby 開發人員:** “給我一個可以正常工作的框架。我想要約定、穩定性和清晰的交付路徑。” - **JS 開發人員:** “不要限制我!我想要靈活性、最新的工具以及以我的方式建置的自由,即使這意味著需要更多的前期工作。” 因此,即使擴展到後端世界之後,單一的、「一刀切」的方法也很難在 Javascript 生態系統中行得通。 當代努力 ---- 一方面,這種文化導致不斷的演變,使整個生態系統保持興奮和創新。然而,這也會導致新人更決策疲勞和更陡峭的學習曲線。 “哪裡有泥土,哪裡就有黃銅。”有些人踏上了冒險之旅,建造一個類似 Rails 的、包含電池的框架來挑戰現狀。以下是一些流行的例子: - [redwoodjs](https://redwoodjs.com/) ``` Full-stack JavaScript framework that integrates React, GraphQL, and Prisma. It simplifies development with a unified setup and automatic code generation, perfect for scalable applications. ``` - [blitzjs](https://blitzjs.com/) ``` Blitz.js extends Next.js into a full-stack framework featuring a zero-API data layer and Prisma for database access. It aims to simplify development by allowing direct server-side code calls from the frontend. ``` - [adonisjs](https://adonisjs.com/) ``` AdonisJS is a TypeScript-first web framework for building web apps and API servers. It offers a rich set of features out-of-the-box, including an ORM, authentication, and a powerful CLI, making it ideal for developers seeking a comprehensive and structured development environment. ``` 他們會成為 JS 世界的 Laravel 或 Rails 嗎?現在說可能還為時過早,但至少 RedwoodJS 顯示出巨大的勢頭: ![紅木流行趨勢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rwf3tizoy59tbck2q5j.png) 另一群人正試圖透過提供**固定**電池的工具包的「啟動套件」來解決這個問題。其中,最受歡迎的是[Create-T3-App](https://create.t3.gg/) ,它結合了 Next.js、tRPC、Tailwind CSS 和其他強大的工具,為您建立類型安全的 Web 應用程式奠定了堅實的基礎。 有趣的是,T3 的建立者 Theo 似乎對 JavaScript 世界的整個努力持悲觀態度: https://twitter.com/t3dotgg/status/1792136001345003748 樂觀的未來 ----- > 任何可以用 JavaScript 編寫的應用程式最終都會用 JavaScript 編寫。 — 傑夫·阿特伍德 雖然我並不完全相信阿特伍德定律,但我確實預見到 JavaScript 在 Web 開發領域的光明前景。原因很簡單: **這是歷史上第一次可以使用程式語言開發整個網頁應用程式。** 這是一個顯著的好處,特別是對於新手開發人員來說。感謝 TypeScript 優秀的類型推斷系統,我們不僅有能力這麼做,而且也願意這麼做。 Laravel 或 Rails 使用者常見的批評是,這些框架缺乏對系統中不同實體之間的關係進行建模的傳統方法,如下所示: https://twitter.com/chantastic/status/1791531154212033004 雖然它可能還沒有達到 Laravel 或 Rails 的水平,但目前 JS 界的努力已經認識到了這個問題。如果您查看上述解決方案的工具包,您會發現一個通用名稱: [Prisma](https://www.prisma.io/) 如果您還沒有聽說過 Prisma,它是一種現代的 TypeScript-first ORM,可讓您輕鬆管理資料庫模式,以極大的靈活性進行查詢和變更,並確保出色的類型安全性。這使 JavaScript 開發人員能夠實現 Laravel 和 Rails 中傳統的資料處理複雜性和輕鬆的關係建模,就像 Laravel 的 Eloquent ORM 一樣。 我在 Prisma 之上建立的[ZenStack](https://zenstack.dev/)工具包旨在進一步縮小差距。它在架構之上加入了授權層,然後自動為您產生 API 和前端掛鉤。因此,簡單地說,一旦您完成了架構,您就幾乎完成了後端。然後,您可以選擇任何前端框架(例如 React、Vue 或 Svelte)來完成您的 UI。 [![zenstack 架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3h4wsn2ha5znwzq88u3.png)](https://zenstack.dev/) 開始就要考慮如何結束 ---------- JavaScript 會迎來 Laravel/Rails 時刻嗎?就我個人而言,我相信,或至少希望,標準化約定可以帶來整個生態系統的全局最佳化。然而,考慮到 JavaScript 的歷史和文化,實現這一目標可能需要大量時間。目前還不清楚人工智慧是否會加速這一過程,或徹底顛覆它。 所以,看來我們只能拭目以待了。然而,我們不要在這場辯論中迷失方向,忘記我們的初衷,正如李羅賓遜所說: https://twitter.com/leeerob/status/1792215708715122752 所以,我在最後引用[W3C Web平台設計原則](https://www.w3.org/TR/design-principles/#priority-of-constituencies)中的一句話: > 使用者需求先於網頁作者的需求,網頁作者的需求先於使用者代理實現者的需求,後者先於規範編寫者的需求,後者先於理論純粹性。 --- 原文出處:https://dev.to/zenstack/php-laravel-ruby-rails-javascript-36dc

如何建置:具有嵌入式 AI copilot 的待辦事項清單應用程式(Next.js、GPT4 和 CopilotKit)

**長話短說** -------- 待辦事項清單是每個開發人員的經典專案。在當今世界,學習如何使用人工智慧進行建構並在你的投資組合中加入一些人工智慧專案是很棒的。 今天,我將逐步介紹如何使用嵌入式 AI 副駕駛來建立待辦事項列表,以實現一些 AI 魔法🪄。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nw0jituk3y5tosz6f34u.gif) 我們將介紹如何: - 使用 Next.js、TypeScript 和 Tailwind CSS 建立待辦事項清單產生器 Web 應用。 - 使用 CopilotKit 將 AI 功能整合到待辦事項清單產生器中。 - 使用 AI 聊天機器人新增清單、將清單分配給某人、將清單標記為已完成以及刪除清單。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/guf0l2fiq1g1jv86o7bg.png) --- CopilotKit:建構應用內人工智慧副駕駛的框架 -------------------------- CopilotKit是一個[開源的AI副駕駛框架](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造: - ChatBot:上下文感知的應用內聊天機器人,可以在應用程式內執行操作 💬 - CopilotTextArea:人工智慧驅動的文字字段,具有上下文感知自動完成和插入功能📝 - 聯合代理:應用程式內人工智慧代理,可以與您的應用程式和使用者互動🤖 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myp7zashy99m33ya8kaf.gif) {% cta https://go.copilotkit.ai/bonnie %} 明星 CopilotKit ⭐️ {% endcta %} --- 先決條件 ---- 要完全理解本教程,您需要對 React 或 Next.js 有基本的了解。 以下是建立人工智慧驅動的待辦事項清單產生器所需的工具: - [Nanoid](https://github.com/ai/nanoid) - 一個小型、安全、URL 友善、唯一的 JavaScript 字串 ID 產生器。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰,讓您能夠使用 ChatGPT 模型執行各種任務。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架,用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先,透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式: ``` npx create-next-app@latest todolistgenerator ``` 選擇您首選的配置設定。在本教學中,我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tc6he9eivkt3hhxnj3p.png) 接下來,安裝 Nanoid 套件及其相依性。 ``` npm i nanoid ``` 最後,安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend @copilotkit/shared ``` 恭喜!您現在已準備好建立由人工智慧驅動的待辦事項清單產生器。 **建立待辦事項清單產生器前端** ----------------- 在本節中,我將引導您完成使用靜態內容建立待辦事項清單產生器前端的過程,以定義生成器的使用者介面。 首先,請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`types`資料夾。在 types 資料夾中,建立一個名為`todo.ts`的文件,並新增以下程式碼來定義名為**`Todo`的 TypeScript 介面。** **`Todo`**介面定義了一個物件結構,其中每個待辦事項都必須具有**`id`** 、 **`text`**和**`isCompleted`**狀態,同時也可以選擇具有**`assignedTo`**屬性。 ``` export interface Todo { id: string; text: string; isCompleted: boolean; assignedTo?: string; } ``` 然後轉到程式碼編輯器中的`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中,建立三個名為`Header.tsx` 、 `TodoList.tsx`和`TodoItem.tsx`的檔案。 在`Header.tsx`檔案中,新增以下程式碼,定義一個名為`Header`的功能元件,該元件將呈現生成器的導覽列。 ``` import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="w-full flex-none text-xl text-white font-semibold p-6" href="/" aria-label="Brand"> To-Do List Generator </Link> </div> </nav> </header> </> ); } ``` 在`TodoItem.tsx`檔案中,新增以下程式碼來定義名為**`TodoItem`**的 React 功能元件。它使用 TypeScript 來確保類型安全性並定義元件接受的 props。 ``` import { Todo } from "../types/todo"; // Importing the Todo type from a types file // Defining the interface for the props that the TodoItem component will receive interface TodoItemProps { todo: Todo; // A single todo item toggleComplete: (id: string) => void; // Function to toggle the completion status of a todo deleteTodo: (id: string) => void; // Function to delete a todo assignPerson: (id: string, person: string | null) => void; // Function to assign a person to a todo hasBorder?: boolean; // Optional prop to determine if the item should have a border } // Defining the TodoItem component as a functional component with the specified props export const TodoItem: React.FC<TodoItemProps> = ({ todo, toggleComplete, deleteTodo, assignPerson, hasBorder, }) => { return ( <div className={ "flex items-center justify-between px-4 py-2 group" + (hasBorder ? " border-b" : "") // Conditionally adding a border class if hasBorder is true }> <div className="flex items-center"> <input className="h-5 w-5 text-blue-500" type="checkbox" checked={todo.isCompleted} // Checkbox is checked if the todo is completed onChange={() => toggleComplete(todo.id)} // Toggle completion status on change /> <span className={`ml-2 text-sm text-white ${ todo.isCompleted ? "text-gray-500 line-through" : "text-gray-900" // Apply different styles if the todo is completed }`}> {todo.assignedTo && ( <span className="border rounded-md text-xs py-[2px] px-1 mr-2 border-purple-700 uppercase bg-purple-400 text-black font-medium"> {todo.assignedTo} {/* Display the assigned person's name if available */} </span> )} {todo.text} {/* Display the todo text */} </span> </div> <div> <button onClick={() => deleteTodo(todo.id)} // Delete the todo on button click className="text-red-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5"> <path strokeLinecap="round" strokeLinejoin="round" d="m14.74 9-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 0 0-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 0 0-7.5 0" /> </svg> </button> <button onClick={() => { const name = prompt("Assign person to this task:"); assignPerson(todo.id, name); }} className="ml-2 text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-200"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-5 h-5"> <path strokeLinecap="round" strokeLinejoin="round" d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" /> </svg> </button> </div> </div> ); }; ``` 在`TodoList.tsx`檔案中,加入以下程式碼來定義名為**`TodoList`**的 React 功能元件。此元件用於管理和顯示待辦事項清單。 ``` "use client"; import { TodoItem } from "./TodoItem"; // Importing the TodoItem component import { nanoid } from "nanoid"; // Importing the nanoid library for generating unique IDs import { useState } from "react"; // Importing the useState hook from React import { Todo } from "../types/todo"; // Importing the Todo type // Defining the TodoList component as a functional component export const TodoList: React.FC = () => { // State to hold the list of todos const [todos, setTodos] = useState<Todo[]>([]); // State to hold the current input value const [input, setInput] = useState(""); // Function to add a new todo const addTodo = () => { if (input.trim() !== "") { // Check if the input is not empty const newTodo: Todo = { id: nanoid(), // Generate a unique ID for the new todo text: input.trim(), // Trim the input text isCompleted: false, // Set the initial completion status to false }; setTodos([...todos, newTodo]); // Add the new todo to the list setInput(""); // Clear the input field } }; // Function to handle key press events const handleKeyPress = (e: React.KeyboardEvent) => { if (e.key === "Enter") { // Check if the Enter key was pressed addTodo(); // Add the todo } }; // Function to toggle the completion status of a todo const toggleComplete = (id: string) => { setTodos( todos.map((todo) => todo.id === id ? { ...todo, isCompleted: !todo.isCompleted } : todo ) ); }; // Function to delete a todo const deleteTodo = (id: string) => { setTodos(todos.filter((todo) => todo.id !== id)); }; // Function to assign a person to a todo const assignPerson = (id: string, person: string | null) => { setTodos( todos.map((todo) => todo.id === id ? { ...todo, assignedTo: person ? person : undefined } : todo ) ); }; return ( <div> <div className="flex mb-4"> <input className="border rounded-md p-2 flex-1 mr-2" value={input} onChange={(e) => setInput(e.target.value)} onKeyDown={handleKeyPress} // Add this to handle the Enter key press /> <button className="bg-blue-500 rounded-md p-2 text-white" onClick={addTodo}> Add Todo </button> </div> {todos.length > 0 && ( // Check if there are any todos <div className="border rounded-lg"> {todos.map((todo, index) => ( <TodoItem key={todo.id} // Unique key for each todo item todo={todo} // Pass the todo object as a prop toggleComplete={toggleComplete} // Pass the toggleComplete function as a prop deleteTodo={deleteTodo} // Pass the deleteTodo function as a prop assignPerson={assignPerson} // Pass the assignPerson function as a prop hasBorder={index !== todos.length - 1} // Conditionally add a border to all but the last item /> ))} </div> )} </div> ); }; ``` 接下來,前往`/[root]/src/page.tsx`文件,新增以下程式碼,匯入`TodoList`和`Header`元件並定義名為`Home`的功能元件。 ``` import Header from "./components/Header"; import { TodoList } from "./components/TodoList"; export default function Home() { return ( <> <Header /> <div className="border rounded-md max-w-2xl mx-auto p-4 mt-4"> <h1 className="text-2xl text-white font-bold mb-4"> Create a to-do list </h1> <TodoList /> </div> </> ); } ``` 接下來,刪除`globals.css`檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } ``` 最後,在命令列上執行命令`npm run dev` ,然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看待辦事項清單產生器前端,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wmd8j3brrtiqackalul1.png) **使用 CopilotKit 將 AI 功能整合到待辦事項清單產生器** ------------------------------------- 在本節中,您將學習如何將 AI 副駕駛新增至待辦事項清單產生器,以使用 CopilotKit 產生清單。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先,我們將 CopilotKit React 元件新增至待辦事項清單產生器前端。 ### **將 CopilotKit 新增至待辦事項清單產生器前端** 在這裡,我將引導您完成將待辦事項清單產生器與 CopilotKit 前端整合以促進清單產生的過程。 首先,使用下面的程式碼片段匯入`/[root]/src/app/components/TodoList.tsx`檔案頂部的`useCopilotReadable`和`useCopilotAction`自訂掛鉤。 ``` import { useCopilotAction, useCopilotReadable } from "@copilotkit/react-core"; ``` 在`TodoList`函數內的狀態變數下方,新增以下程式碼,該程式碼使用`useCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的待辦事項清單。該鉤子使副駕駛可以讀取待辦事項清單。 ``` useCopilotReadable({ description: "The user's todo list.", value: todos, }); ``` 在上面的程式碼下方,新增以下程式碼,該程式碼使用`useCopilotAction`掛鉤來設定名為`updateTodoList`的操作,該操作將啟用待辦事項清單的產生。 此操作採用一個名為 items 的參數,該參數可以產生待辦事項列表,並包含一個根據給定提示產生待辦事項列表的處理程序函數。 在處理函數內部, `todos`狀態會使用新產生的 todo 清單進行更新,如下所示。 ``` // Define the "updateTodoList" action using the useCopilotAction function useCopilotAction({ // Name of the action name: "updateTodoList", // Description of what the action does description: "Update the users todo list", // Define the parameters that the action accepts parameters: [ { // The name of the parameter name: "items", // The type of the parameter, an array of objects type: "object[]", // Description of the parameter description: "The new and updated todo list items.", // Define the attributes of each object in the items array attributes: [ { // The id of the todo item name: "id", type: "string", description: "The id of the todo item. When creating a new todo item, just make up a new id.", }, { // The text of the todo item name: "text", type: "string", description: "The text of the todo item.", }, { // The completion status of the todo item name: "isCompleted", type: "boolean", description: "The completion status of the todo item.", }, { // The person assigned to the todo item name: "assignedTo", type: "string", description: "The person assigned to the todo item. If you don't know, assign it to 'YOU'.", // This attribute is required required: true, }, ], }, ], // Define the handler function that executes when the action is invoked handler: ({ items }) => { // Log the items to the console for debugging purposes console.log(items); // Create a copy of the existing todos array const newTodos = [...todos]; // Iterate over each item in the items array for (const item of items) { // Find the index of the existing todo item with the same id const existingItemIndex = newTodos.findIndex( (todo) => todo.id === item.id ); // If an existing item is found, update it if (existingItemIndex !== -1) { newTodos[existingItemIndex] = item; } // If no existing item is found, add the new item to the newTodos array else { newTodos.push(item); } } // Update the state with the new todos array setTodos(newTodos); }, // Provide feedback or a message while the action is processing render: "Updating the todo list...", }); ``` 在上面的程式碼下方,新增以下程式碼,程式碼使用`useCopilotAction`掛鉤來設定名為`deleteTodo`的操作,該操作使您能夠刪除待辦事項。 該操作採用名為id 的參數,該參數可讓您透過id 刪除待辦事項,並包含一個處理函數,該函數透過過濾掉具有給定id 的已刪除待辦事項來更新待辦事項狀態。 ``` // Define the "deleteTodo" action using the useCopilotAction function useCopilotAction({ // Name of the action name: "deleteTodo", // Description of what the action does description: "Delete a todo item", // Define the parameters that the action accepts parameters: [ { // The name of the parameter name: "id", // The type of the parameter, a string type: "string", // Description of the parameter description: "The id of the todo item to delete.", }, ], // Define the handler function that executes when the action is invoked handler: ({ id }) => { // Update the state by filtering out the todo item with the given id setTodos(todos.filter((todo) => todo.id !== id)); }, // Provide feedback or a message while the action is processing render: "Deleting a todo item...", }); ``` 之後,請前往`/[root]/src/app/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilotPopup`和`TodoList`元件,如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL,而`CopilotPopup`則呈現應用程式內聊天機器人,您可以提示產生待辦事項清單。 ``` export default function Home() { return ( <> <Header /> <div className="border rounded-md max-w-2xl mx-auto p-4 mt-4"> <h1 className="text-2xl text-white font-bold mb-4"> Create a to-do list </h1> <CopilotKit runtimeUrl="/api/copilotkit"> <TodoList /> <CopilotPopup instructions={ "Help the user manage a todo list. If the user provides a high level goal, " + "break it down into a few specific tasks and add them to the list" } defaultOpen={true} labels={{ title: "Todo List Copilot", initial: "Hi you! 👋 I can help you manage your todo list.", }} clickOutsideToClose={false} /> </CopilotKit> </div> </> ); } ``` 之後,執行開發伺服器並導航至[http://localhost:3000](http://localhost:3000/) 。您應該會看到應用程式內聊天機器人已整合到待辦事項清單產生器中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ryeqnymp5lm397thpn5f.png) ### **將 CopilotKit 後端加入博客** 在這裡,我將引導您完成將待辦事項清單產生器與 CopilotKit 後端整合的過程,該後端處理來自前端的請求,並提供函數呼叫和各種 LLM 後端(例如 GPT)。 首先,在根目錄中建立一個名為`.env.local`的檔案。然後將下面的環境變數加入到儲存`ChatGPT` API 金鑰的檔案中。 ``` OPENAI_API_KEY="Your ChatGPT API key” ``` 若要取得 ChatGPT API 金鑰,請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x0bibiuouk5wvrxcuy2g.jpeg) 之後,轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中,建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中,建立一個名為`route.ts`的文件,其中包含設定後端功能以處理POST 請求的程式碼。 ``` // Import the necessary modules from the "@copilotkit/backend" package import { CopilotRuntime, OpenAIAdapter } from "@copilotkit/backend"; // Define an asynchronous function to handle POST requests export async function POST(req: Request): Promise<Response> { // Create a new instance of CopilotRuntime const copilotKit = new CopilotRuntime({}); // Use the copilotKit to generate a response using the OpenAIAdapter // Pass the incoming request (req) and a new instance of OpenAIAdapter to the response method return copilotKit.response(req, new OpenAIAdapter()); } ``` 如何產生待辦事項列表 ---------- 現在轉到您之前整合的應用程式內聊天機器人,並給它一個提示,例如「我想去健身房做全身運動。加入到我應該遵循的鍛煉程序列表” 生成完成後,您應該會看到應遵循的全身運動程序列表,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48n9ssymxhm5i2yv0pdf.png) 您可以透過向聊天機器人發出「將待辦事項清單指派給 Doe」之類的提示來將待辦事項清單指派給某人。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6r1f816c1o8da5z0t1kk.png) 您可以透過向聊天機器人提供「將待辦事項清單標記為已完成」等提示來將待辦事項清單標記為已完成。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qx2wpg6ee7hswjl68t4q.png) 您可以透過向聊天機器人發出「刪除待辦事項清單」之類的提示來刪除待辦事項清單。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ksoj6mtlxt8ag8opsocs.png) 恭喜!您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具,可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣,還是對複雜任務的自動化感興趣,CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中,您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼:https://github.com/TheGreatBonnie/AIpoweredToDoListGenerator --- 原文出處:https://dev.to/copilotkit/how-to-build-an-ai-powered-to-do-list-nextjs-gpt4-copilotkit-20i4

可以使用 Python 和 AI 建構的 25 個專案

今天,我們將介紹 25 個可以使用 Python 和 AI 模型建構的副專案。 大多數專案都會有生產級程式碼,因此您可以學到很多東西。 我們開始做吧! --- [Taipy](https://github.com/Avaiga/taipy) - 將資料和人工智慧演算法整合到生產就緒的 Web 應用程式中。 ------------------------------------------------------------------------- ![打字](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wd10iiofzmt4or4db6ej.png) 大多數初始專案都會使用 Taipy,所以讓我們討論一下這個概念的用例。 Taipy 是一個開源 Python 庫,可用於輕鬆的端到端應用程式開發,具有假設分析、智慧管道執行、內建調度和部署工具。 需要明確的是,Taipy 用於為基於 Python 的應用程式建立 GUI 介面並改進資料流管理。 關鍵是性能,而 Taipy 是最佳選擇。 雖然 Streamlit 是一種流行的工具,但在處理大型資料集時,其效能可能會顯著下降,這使得它在生產級使用上不切實際。 另一方面,Taipy 在不犧牲性能的情況下提供了簡單性和易用性。透過嘗試 Taipy,您將親身體驗其用戶友好的介面和高效的資料處理。 ![大資料支持](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnvk0tozn0lgj083rzcb.gif) Taipy 有許多整合選項,可以輕鬆地與領先的資料平台連接。 ![整合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7yv31uir3erina587zp8.png) 開始使用以下命令。 ``` pip install taipy ``` 他們還使用分散式運算提高了效能,但最好的部分是 Taipy,它的所有依賴項現在都與 Python 3.12 完全相容,因此您可以在使用 Taipy 進行專案的同時使用最新的工具和程式庫。 您可以閱讀[文件](https://docs.taipy.io/en/latest/)。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdvnbejf9aivxmqsd3hx.png) 另一個有用的事情是,Taipy 團隊提供了一個名為[Taipy Studio](https://docs.taipy.io/en/latest/manuals/studio/)的 VSCode 擴充功能來加速 Taipy 應用程式的建置。 ![太皮工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc1umm5hcxes0ydbuspb.png) 如果您想閱讀部落格來了解程式碼庫結構,您可以閱讀 HuggingFace[的使用 Taipy 在 Python 中為您的 LLM 建立 Web 介面](https://huggingface.co/blog/Alex1337/create-a-web-interface-for-your-llm-in-python)。 嘗試新技術通常很困難,但 Taipy 提供了 10 多個演示教程,其中包含程式碼和適當的文件供您遵循。我將詳細討論其中一些專案! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wigid2aokt6spkkoivr.png) 這些用例非常驚人,所以一定要檢查一下。 Taipy 在 GitHub 上有超過 8,500 個 Star,並且處於`v3.1`版本,因此它們正在不斷改進。 https://github.com/Avaiga/taipy Star Taipy ⭐️ --- 1.[實時污染儀表板](https://docs.taipy.io/en/release-3.0/knowledge_base/demos/pollution_sensors/) ----------------------------------------------------------------------------------------- 使用工廠周圍的感測器測量空氣品質的用例,展示 Taipy 儀表板流資料的能力。 資料在另一台伺服器上產生並透過 WebSocket 發送到此 Taipy 應用程式。 然後 Taipy 處理資料並將其顯示在儀表板上。 當收到新資料時,儀表板會即時更新。 ![即時污染儀表板](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a0i6pm0ggx6yb655uvd1.png) 如果您想要有關可視化資料流的教程,請查看[有關多線程的文件](https://docs.taipy.io/en/release-3.0/knowledge_base/tips/multithreading/)。 它討論瞭如何建立發送者腳本和接收者腳本,包括套接字參數等。 它涉及到前端和後端的概念。 查看[現場演示](https://realtime-pollution.taipy.cloud/)。 https://github.com/Avaiga/demo-realtime-pollution Star 即時污染儀表板 ⭐️ --- 2.[詐欺檢測](https://github.com/Avaiga/demo-fraud-detection) -------------------------------------------------------- Taipy 應用程式可分析信用卡交易以偵測詐欺行為。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v90fuimlplxuj4llp1zb.png) 它顯示信用卡交易清單。 用戶可以選擇一個日期範圍來預測詐欺。 然後,該應用程式將使用 XGB 模型將潛在的詐欺交易標記為紅色或黃色。 用戶可以選擇一個交易來查看模型預測的解釋,以及客戶的其他交易。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8odxbhc9h3z3vzm4i4yk.png) 使用者還可以選擇模型的閾值。閾值是模型輸出,高於該閾值的交易將被視為詐欺。使用者可以根據顯示的混淆矩陣並透過查看誤報和漏報交易來選擇模型。 ![詐欺檢測演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8ri5h0ky5zie53g2wk7.png) 查看[現場演示](https://fraud-detection.taipy.cloud/Transactions)。 https://github.com/Avaiga/demo-fraud-detection 明星詐欺偵測 ⭐️ --- 3.[新冠儀表板](https://github.com/Avaiga/demo-covid-dashboard) --------------------------------------------------------- 這裡使用 2020 年的 Covid 資料集。 頁面顯示有關 COVID-19 的不同圖表和資訊。還有一個預測頁面來預測傷亡人數。 該應用程式包括四個部分,如下所示: > ✅ 國。 - 特定國家/地區的 COVID-19 統計資料。 - 在累積資料視圖和密度資料視圖之間輕鬆切換。 - 用於動態資料探索的互動式長條圖。 - 餅圖顯示病例分佈(確診、復健、死亡)。 ![國家](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j22qqjmpd39qwwb4it4o.png) > ✅ 地圖。 透過動態可縮放顏色編碼地圖直觀地展示 COVID-19 的影響。 ![地圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ngdy1pkmujgdel1rz81.png) > ✅ 預測。 透過為不同的預測日期和不同的國家建立場景來產生 COVID-19 預測。 這會分別使用 ARIMA 模型和線性迴歸模型產生 2 個不同的預測(橘色的預測\_x 和綠色的預測\_y)。 透過指定名稱、指定預測日期、選擇國家/地區並點擊「提交」按鈕繼續來啟動新場景。 您可以在“結果”部分的“場景”選項卡中存取它。 ![預測](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8idl5ys0zhkztexujcmh.png) > ✅ 世界。 全球 COVID-19 統計資料透過折線圖和圓餅圖進行匯總。透過更改`Absolute`和`Relative`之間的切換可以看到 Covid 國家/地區影響的比較。 ![世界](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y9kd3rjxa7qjqne798ua.png) 總的來說,對於您的業餘專案和建立非常酷的專案來說,這是一個非常有用的應用程式:) 您可以查看[現場演示](https://covid-dashboard.taipy.cloud/Country)。 https://github.com/Avaiga/demo-covid-dashboard Star Covid 儀表板 ⭐️ --- 4.[建立 LLM 聊天機器人](https://github.com/Avaiga/demo-chatbot) -------------------------------------------------------- 該演示展示了 Taipy 使最終用戶能夠使用 LLM 執行推理的能力。在這裡,我們使用 GPT-3 建立一個聊天機器人,並將對話顯示在互動式聊天介面中。 ![法學碩士聊天機器人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/olaw6u8w3fj2wrg0au2r.png) 下面給出了主要函數,該函數將字串提示(即用戶訊息)作為輸入,並從 LLM 傳回回應字串。 ``` def request(state: State, prompt: str) -> str: """ Send a prompt to the GPT-3 API and return the response. Args: - state: The current state. - prompt: The prompt to send to the API. Returns: The response from the API. """ response = state.client.chat.completions.create( messages=[ { "role": "user", "content": f"{prompt}", } ], model="gpt-3.5-turbo", ) return response.choices[0].message.content ``` 您可以閱讀有關如何建立此 LLM 聊天機器人的[完整文件](https://docs.taipy.io/en/release-3.0/knowledge_base/tutorials/chatbot/)。 最好的部分是,您可以根據您的使用情況輕鬆更改程式碼以使用任何其他 API 或模型。 您可以查看[現場演示](https://demo-llm-chat.taipy.cloud/)。 https://github.com/Avaiga/demo-chatbot 明星聊天機器人 ⭐️ --- 5.[即時人臉辨識](https://github.com/Avaiga/demo-face-recognition) ----------------------------------------------------------- 該演示將人臉辨識無縫整合到我們的平台中,借助 OpenCV 庫,使用網路攝影機提供即時人臉偵測體驗。 ![即時人臉辨識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qs9kpit8byxsqq67mhql.png) 您可以非常輕鬆地使用它: A。打開應用程式時,您會透過網路攝影機看到自己。你的臉周圍有一個紅色方塊,上面寫著別人的名字。 b.透過點擊`Capture`按鈕並多次輸入您的名字來訓練模型辨識您。 C。現在點選`Re-train`按鈕。現在應該會出現您的名字。模型現在認出了您。 查看[現場演示](https://face-recognition.taipy.cloud/)。 確保在瀏覽器中啟用相機設置,這是首要條件! 進行人臉偵測和人臉辨識的程式碼位於`src/demo/faces.py`下。自述文件中提供了完整的目錄結構。 https://github.com/Avaiga/demo-face-recognition 明星人臉辨識 ⭐️ --- 6.[庫存可視化](https://github.com/Avaiga/demo-stock-visualization) ------------------------------------------------------------- 在金融市場領域,資料為王。快速、輕鬆地視覺化歷史股票資料並做出預測的能力對於投資者和金融分析師來說至關重要。 這是一個股票資料儀表板,具有互動式視覺元素,可以視覺化歷史股票資料並對 1 至 5 年內的股票進行預測。 ![庫存視覺化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dz5jagdfvcnup1jq7qgx.png) 由 Facebook 使用 Taipy 和[Prophet Library](https://facebook.github.io/prophet/docs/quick_start.html)建構。此示範適用於高於 3.8 的 Python 版本。 您可以這樣使用它: A。選擇您想要預測的股票程式碼。 b.打開歷史資料面板。 C。選擇預測週期(從 1 到 5)。 d.點選`PREDICT`按鈕。 e.在預測資料面板中查看您的預測。 F。使用不同的程式碼重複嘗試以比較結果。 您也可以透過點擊底部的`More info`按鈕以表格形式取得預測範圍。 您可以在[src 目錄](https://github.com/Avaiga/demo-stock-visualization/tree/develop/src)下找到負責的主要原始碼。 這個完全互動的 Web 應用程式只需不到 120 行 Python 程式碼即可建立。 查看[現場演示](https://stock-visualization.taipy.cloud/)。 https://github.com/Avaiga/demo-stock-visualization 明星股票視覺化 ⭐️ --- 7.[情感分析](https://github.com/Avaiga/demo-sentiment-analysis)。 ------------------------------------------------------------ 情感分析就像一個機器人,可以從人們的言語中讀出他們的感受。 它會根據快樂、悲傷或憤怒等字眼來判斷它們的感覺是好是壞。然後,它告訴我們大多數人在說話時是高興還是悲傷。 因此,只需看看人們所說的內容,它就可以幫助我們了解人們對事物(例如電影或遊戲)的感受! 簡而言之,它是自然語言處理(NLP)中的一種技術,用於確定文本中傳達的情緒基調。它可以幫助企業和個人更好地掌握書面內容所表達的情感和語氣。 結果是一個兩頁的應用程式,它使用情感分析模型來分析輸入和整個文本。 第一頁分析使用者輸入,而第二頁讓使用者選擇要上傳的檔案(文字)。該文本將被分析並顯示背後的情感。 > ✅ 第 1 頁:Line - 分析使用者輸入 我們的情緒分析應用程式的初始頁面名為“Line”,用於即時分析使用者輸入。無論是簡短的句子還是較長的段落,只需將文字輸入或貼到輸入框中,Taipy 就會快速評估文本中傳達的情感。 ![第1頁情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/826k2if80arn6y3uz3dz.png) > ✅ 文字 - 上傳和分析文字文件 第二個頁面名為“文字”,允許使用者上傳整個文字檔案 (.txt) 以進行全面的情感分析。 用戶可以從他們的設備中選擇一個文字文件,該應用程式將提供對整個文件所表達的情緒的洞察。 此功能對於處理較長的文字(例如文章、報告或廣泛的客戶回饋)非常有用。 ![第2頁情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nb3xmtfi7fz6vm8807ph.png) 您可以查看[現場演示](https://sentiment-analysis.taipy.cloud/line)。 https://github.com/Avaiga/demo-sentiment-analysis 明星情感分析 ⭐️ --- 8.[漂移檢測](https://github.com/Avaiga/demo-drift-detection)- 檢測糖尿病資料集中的漂移。 ----------------------------------------------------------------------- ![漂移檢測](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ey1f4ygskvkk6dwqc2c8.png) 資料漂移是主要在機器學習中使用的概念,其中推理資料的分佈偏離訓練資料的分佈。 各種因素,例如底層資料來源的變化、資料收集過程的變化或資料儲存過程的變化,都可能導致資料漂移。 這通常會導致稱為訓練服務偏差的效能問題,其中用於推理的模型不用於推理資料的分佈並且無法泛化。 存在統計測試來檢測資料集中的漂移。這些檢定計算兩個系列來自同一分佈的機率。如果機率低於閾值,我們認為存在漂移。 如何使用該應用程式? ✅ 選擇比較資料集。 在這裡,我們選擇 data\_big,這是一個與參考資料集類似的資料集,但其中的行具有較高的血壓值。我們在血壓分佈圖上看到,與綠色參考資料集相比,紅色比較資料集的分佈向右移動。 ![資料集](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1752b8elnpwalycyex4.png) ✅ 按一下此處執行場景。 ![執行應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cel6qa0xxiplxgghwhyi.png) ✅ 在頁面底部可視化結果。 在這裡,我們看到血壓列的柯爾莫哥洛夫檢定的 p 值低於 0.05,這意味著兩個血壓資料集來自同一分佈的機率低於 5%。我們可以拒絕兩個資料集來自相同分佈的假設,並得出血壓列存在漂移的結論。 ![視覺化](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0mh8lftfjiypr27p10ec.png) 您可以按照下面所附的即時示範中的步驟操作,並在 GitHub 上查看原始程式碼。 這使用資料管道來比較資料集並檢測漂移。 ![資料管道](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7s7v5hpicjyoe2eojwx8.png) 查看[現場演示](https://drift-detection.taipy.cloud/)。 https://github.com/Avaiga/demo-drift-detection 星漂移偵測 ⭐️ --- 9.[錢包明智](https://github.com/Ujj1225/from_Taipy-walletWISE) ---------------------------------------------------------- ![錢包明智](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vva4tu9dxrz9fgaiavlb.png) WalletWise 就像是我們財務的友善幫手,幫助我們追蹤收入和支出。它使用 Gemini 進行交易,使用 Taipy 來了解支出。 一些不錯的功能是: ✅ 使用者可以輸入他們的收入和支出以及部門作為標題。這使他們能夠了解和探索他們從哪個部門賺了多少錢以及在哪個部門花了多少錢。 ✅ 對使用者的收入和支出進行分析,以數學方式顯示,並顯示 7 個做出更好、更明智的財務決策的提示。 ✅ 實現了一個視覺化工具,您可以在其中看到您賺錢的不同標題和您花錢的不同標題。 這是一個非常優秀的用例,並且在創造力方面非常好。 您可以閱讀[安裝說明](https://github.com/Ujj1225/from_Taipy-walletWISE?tab=readme-ov-file#installation)並查看[專案演示](https://github.com/Ujj1225/from_Taipy-walletWISE?tab=readme-ov-file#demo)。 https://github.com/Ujj1225/from\_Taipy-walletWISE Star WalletWise ⭐️ --- 10.[太皮象棋](https://github.com/KorieDrakeChaney/taipy-chess) ---------------------------------------------------------- ![棋](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xasxqldf7z1q5ie3r4nn.png) 所有應用程式中我最喜歡的一個,因為我喜歡國際象棋。哈哈! 這是一個基於20,000盤棋的國際象棋視覺化工具。您可以查看所有比賽、他們參加的開局、對手、表現最好的開局以及最成功的開局。 您可以查看資料的熱圖和圖表。 ![總移動熱圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jh1llp4vx24xtxjji042.png) 總移動熱圖 ![棋子的第一個動作](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5s9do6lop5immbmjtqwa.png) 棋子的第一個動作 您可以觀看 Korie 的[示範](https://github.com/KorieDrakeChaney/taipy-chess?tab=readme-ov-file#demo)。我愛它 :) 這清楚地表明我們使用 Taipy 的可能性沒有限制。 https://github.com/KorieDrakeChaney/taipy-chess Star Taipy Chess ⭐️ --- 11.[奧運獎牌](https://github.com/enarroied/Olympic-Medals-Taipy-App) ---------------------------------------------------------------- ![奧運獎牌](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkl0llaopepdb1s2jxy2.png) 這是一個 Taipy 儀表板,顯示從現代奧運會開始到 2024 年初頒發的奧運獎牌資訊(即不包括 2024 年巴黎奧運會)。 ✅ 儀表板有兩個選項卡: - 一個選項卡顯示所有奧運獎牌的總結資料 - 第二個選項卡重點關注奧林匹克委員會(國家,但也包括特別委員會,例如難民委員會等)獲得的獎牌。 它還具有多種類型的圖表,例如長條圖、旭日圖、折線圖、分區統計圖和網格圖。 另外,儀表板會根據所選年份和區域類型動態更新資料。 您可以在這裡觀看演示! https://www.youtube.com/watch?v=\_1X7etBFTk0 其中涉及到許多概念,而 Eric 實現了一個非常優秀的用例! https://github.com/enarroied/Olympic-Medals-Taipy-App 奧運明星獎牌 ⭐️ --- 12. [GPT Researcher](https://github.com/assafelovic/gpt-researcher) - 基於 GPT 的線上研究自主代理。 --------------------------------------------------------------------------------------- ![GPT研究員](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vbqw84mrere5bcfalhk.png) GPT Researcher 是領先的自主代理,負責處理從準確的來源收集到研究結果組織的一切事務。 好的一點是它也引用了研究結果的來源,從而提高了可信度。我喜歡整個概念:) 一些瘋狂的功能是: ✅ 可以產生長而詳細的研究報告(超過2K字)。 ✅ 每項研究總結 20 多個網路資源,以形成客觀和事實的結論。 ✅ 包括易於使用的網路介面(HTML/CSS/JS)。 ✅ 透過 JavaScript 支援抓取網路資源。 ✅ 追蹤存取和使用的網路資源的追蹤和上下文。 ✅ 將研究報告匯出為 PDF、Word 等。 ![特徵](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t0o49xyzfmzuvmlotgal.png) 開始使用以下命令。 ``` pip install gpt-researcher ``` 您可以這樣使用它。 ``` from gpt_researcher import GPTResearcher query = "why is Nvidia stock going up?" researcher = GPTResearcher(query=query, report_type="research_report") # Conduct research on the given query await researcher.conduct_research() # Write the report report = await researcher.write_report() ``` 請閱讀下面隨附的[安裝說明](https://github.com/assafelovic/gpt-researcher?tab=readme-ov-file#%EF%B8%8F-getting-started)和快速入門指南。 如果您想了解架構的細節,代理商會利用 gpt3.5-turbo 和 gpt-4-turbo(128K 上下文)來完成研究任務。我們僅在必要時才使用每種方法來優化成本。研究任務平均需要大約 3 分鐘才能完成,成本約為 0.1 美元。 ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1ls54ua4d3nhn473ek04.png) 您可以閱讀官方部落格了解[GPT Researcher 的工作原理](https://docs.tavily.com/blog/building-gpt-researcher)。 您可以閱讀[常見問題](https://docs.tavily.com/docs/faq)以了解有關準確性等的更多資訊。 您可以閱讀[文件](https://docs.tavily.com/docs/gpt-researcher/getting-started)並存取他們的[官方網站](https://gptr.dev/)。 在這裡觀看演示! ![GPT 研究員演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xfgnes109mqfyk0r3uq.gif) 它在 GitHub 上有 8700 顆星,並且正在不斷改進。 https://github.com/assafelovic/gpt-researcher GPT 明星研究員 ⭐️ --- 13.[私人 GPT](https://github.com/zylon-ai/private-gpt) - 在沒有網路的情況下詢問有關您的文件的問題。 ---------------------------------------------------------------------------- ![私有GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0nshjqmm5xq6kgqkgfdc.png) PrivateGPT 是一個可立即投入生產的 AI 專案,即使在沒有網路連線的情況下,您也可以使用大型語言模型 (LLM) 的功能來詢問有關文件的問題。 100% 私有意味著任何時候都沒有資料離開您的執行環境。 API 分為兩個邏輯區塊: A。高級 API,抽象化了 RAG(檢索增強生成)管道實現的所有複雜性: - 文件攝取:內部管理文件解析、分割、元資料擷取、嵌入產生和儲存。 - 使用所攝取文件中的上下文進行聊天和完成:抽像上下文檢索、提示工程和回應產生。 b.低階 API,允許高階用戶實現複雜的管道: - 嵌入生成:基於一段文字。 - 上下文區塊檢索:給定查詢,從攝取的文件中傳回最相關的文字區塊。 您可以閱讀[安裝指南](https://docs.privategpt.dev/installation/getting-started/installation)來開始。 您可以閱讀[文件](https://docs.privategpt.dev/overview/welcome/introduction)以及所涉及的[詳細架構](https://github.com/zylon-ai/private-gpt?tab=readme-ov-file#-architecture)。 PrivateGPT 現在正在發展成為產生 AI 模型和原語的網關,包括補全、文件攝取、RAG 管道和其他低階建置塊。 他們在 GitHub 上擁有超過 51,000 顆星,並且發展迅速。 https://github.com/zylon-ai/private-gpt 明星私人 GPT ⭐️ --- [14.facefusion](https://github.com/facefusion/facefusion) - 下一代臉部交換器和增強器。 ------------------------------------------------------------------------- ![臉部融合](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ea0w92sm51da799632vr.png) 這是下一代臉部交換器和增強器。有多種用途,您可以輕鬆做到。 他們還提供了一個[研討會部分](https://docs.facefusion.io/workshop),您可以在其中了解如何建立 UI 元件和定義框架處理器。 例如,這就是建立 UI 元件的方式。 ``` // create a new file facefusion/uis/components/example.py // Implement the essential methods of the UI component from typing import Optional import gradio from facefusion.uis.typing import Update EXAMPLE_IMAGE : Optional[gradio.Image] = None def render() -> None: global EXAMPLE_IMAGE EXAMPLE_IMAGE = gradio.Image() def listen() -> None: EXAMPLE_IMAGE.change(update, inputs = EXAMPLE_IMAGE, outputs = EXAMPLE_IMAGE) def update() -> Update: return gradio.update() ``` 您只需加入該元件即可。 ``` from facefusion.uis.components import example ``` ![作坊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxznqz8rg23q4tb2brne.png) 安裝可能有點複雜,所以我建議根據您使用的特定環境閱讀[安裝指南](https://docs.facefusion.io/installation)。 您可以使用此命令檢查基準測試。 ``` python run.py --ui-layouts benchmark ``` ![基準](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdc3s7xwjxoukee784ds.png) 您可以閱讀[文件](https://docs.facefusion.io/)並了解有關[技術術語的](https://docs.facefusion.io/knowledgebase/technical-terms)更多資訊。 他們在 GitHub 上擁有超過 14k 個 star,並且發布了`v2.5`版本。 https://github.com/facefusion/facefusion 明星facefusion ⭐️ --- 15. [H2O LLMStudio](https://github.com/h2oai/h2o-llmstudio) - 用於微調 LLM 的無程式碼 GUI。 --------------------------------------------------------------------------------- ![H2O法學碩士工作室](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a03nefeobwwf9bkhcgwg.png) H2O LLM Studio 是一個開源、無程式碼的 LLM 圖形使用者介面 (GUI),專為微調最先進的大型語言模型而設計。 微調預訓練的語言模型需要編碼專業知識以及有關模型及其超參數的廣泛知識,但是,H2O LLM Studio 使 NLP 從業者能夠輕鬆微調他們的 LLM,無需編碼,並且比定制具有更好的靈活性。 H2O LLM Studio 還可讓您與微調模型聊天並接收有關模型效能的即時回饋。 NLP 從業者和資料科學家尤其可能會發現輕鬆有效地建立和微調大型語言模型很有用。您可以閱讀[詳細的效能統計資料](https://h2oai.github.io/h2o-llmstudio/get-started/llm-studio-performance)及其雲端[架構](https://docs.h2o.ai/haic-documentation/overview/architecture)。 如果您正在開始,我建議您觀看此內容! https://www.youtube.com/watch?v=u48QaIAIFw4 您可以閱讀有關[核心功能的](https://h2oai.github.io/h2o-llmstudio/get-started/core-features)訊息,例如: ✅ 無程式碼微調 ✅ 高度可自訂 ✅ 關於模型性能的即時回饋 您可以使用以下命令啟動 H2O LLM Studio。 ``` make llmstudio ``` 如果你不知道這些概念,他們也有[清晰的概念指南,](https://h2oai.github.io/h2o-llmstudio/concepts)包括 Generative AI、LoRA、Quantization、LLM Backbone 等等。 您可以閱讀[文件](https://docs.h2o.ai/haic-documentation/)。 您可以使用它非常輕鬆且符合標準地製作一個副專案。 他們在 GitHub 上有 3,600 顆星,並且發布了`v1.5`版本。 https://github.com/h2oai/h2o-llmstudio 明星 H2O LLMStudio ⭐️ --- 16. [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。 -------------------------------------------------------------------------------- ![GPT自動機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdzv06jnr3z33s7qll5k.png) 您的語音控制 Mac 助理。 GPT Automator 可讓您使用語音在 Mac 上執行任務。例如,打開應用程式、尋找餐廳、綜合資訊。太棒了:D 它是在倫敦黑客馬拉松期間建構的。 它有兩個主要部分: A。語音命令:它使用本地執行的 Whisper(Buzz 的一個分支)來產生命令。 b.命令到行動:您向配備了我們編寫的自訂工具的 LangChain 代理程式發出命令。這些工具包括使用 AppleScript 控制電腦的作業系統以及使用 JavaScript 控制活動瀏覽器。最後,就像任何優秀的人工智慧一樣,我們讓代理商使用 AppleScript 說出最終結果「{Result}」(如果您以前沒有使用過,請嘗試在 Mac 終端機中輸入「Hello World!」)。 我們製作了一個自訂工具,讓法學碩士使用 AppleScript 控制電腦。提示符是文件字串: ``` @tool def computer_applescript_action(apple_script): """ Use this when you want to execute a command on the computer. The command should be in AppleScript. Here are some examples of good AppleScript commands: Command: Create a new page in Notion AppleScript: tell application "Notion" activate delay 0.5 tell application "System Events" to keystroke "n" using {{command down}} end tell ... Write the AppleScript for the Command: Command: """ p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE) stdout, stderr = p.communicate(applescript.encode('utf-8')) if p.returncode != 0: raise Exception(stderr) decoded_text = stdout.decode("utf-8") return decoded_text ``` 如果您想知道它是如何運作的,GPT Automator 使用 OpenAI 的 Whisper 將您的音訊輸入轉換為文字。然後,它使用LangChain Agent 選擇一組操作,包括使用OpenAI 的GPT-3(“text-davinci-003”)從提示符號產生AppleScript(用於桌面自動化)和JavaScript(用於瀏覽器自動化)命令,然後執行產生的腳本。 請記住,這不適用於生產用途。該專案執行從自然語言產生的程式碼,可能容易受到提示注入和類似的攻擊。這項工作是作為概念驗證而進行的。 您可以閱讀[安裝指南](https://github.com/chidiwilliams/GPT-Automator?tab=readme-ov-file#instructions)。 讓我們看看一些提示及其作用: ✅ 求計算結果。 > 提示:“2 + 2 是什麼?” 它將編寫 AppleScript 開啟計算器並輸入 5 \* 5。 ✅ 尋找附近的餐廳。 > 提示:“查找我附近的餐廳” 它將打開 Chrome,谷歌搜尋附近的餐廳,解析頁面,然後返回最上面的結果。有時它很厚顏無恥,反而會打開谷歌地圖結果並說「最好的餐廳是谷歌地圖頁面頂部的餐廳」。其他時候,它會打開 Google 上的頂部連結 - 並卡在 Google 可存取性頁面上... 以下是執行時列印到終端的內容: ``` Command: Find a great restaurant near Manchester. > Entering new AgentExecutor chain... I need to search for a restaurant near Manchester. Action: chrome_open_url Action Input: https://www.google.com/search?q=restaurant+near+Manchester Observation: Thought: I need to read the page Action: chrome_read_the_page Action Input: Observation: Accessibility links Skip to the main content ... # Shortned for brevity Dishoom Manchester 4.7 (3.3K) · £££ · Indian 32 Bridge St · Near John Rylands Library Closes soon ⋅ 11 pm Stylish eatery for modern Indian fare San Carlo 4.2 (2.8K) · £££ · Italian 42 King St W · Near John Rylands Library Closes soon ⋅ 11 pm Posh, sceney Italian restaurant Turtle Bay Manchester Northern Quarter 4.7 Thought: I now know the final answer Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana. ``` 我不能保證這些餐廳值得,請自行承擔風險。哈哈! ✅ 如果您要求 GPT Automator 擦除您的計算機,它會的。 是的,如果您要求的話,它會擦除您的電腦! 我內心的自我尖叫著要這麼做:) 您可以在這裡查看完整的演示! https://www.loom.com/share/7bfa82c604f3412fbbb04191ce2ae12f --- 17. [RepoChat](https://github.com/pnkvalavala/repochat) - 支援 GitHub 儲存庫互動的聊天機器人助理。 ---------------------------------------------------------------------------------- ![重新聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gf9bjn2a47f1t43aiju.png) Repochat 是一個互動式聊天機器人專案,旨在使用大型語言模型 (LLM) 參與有關 GitHub 儲存庫的對話。 它允許用戶進行有意義的討論、提出問題並從 GitHub 儲存庫檢索相關資訊。本自述文件提供了在本機電腦上設定和使用 Repochat 的逐步說明。 他們建立了兩個具有不同功能的分支,這對我來說有點新鮮。 ✅ Repochat 的主要分支被設計為完全在您的本機電腦上執行。此版本的 Repochat 不依賴外部 API 呼叫,並且可以更好地控制您的資料和處理。如果您正在尋找獨立的解決方案,那麼主分支就是您的最佳選擇。 ✅ Repochat 的雲端分支主要依賴對外部服務的 API 呼叫來進行模型推理和儲存。它非常適合那些喜歡基於雲端的解決方案並且不想設定本地環境的人。 您可以閱讀[安裝說明](https://github.com/pnkvalavala/repochat?tab=readme-ov-file#installation)。 Repochat 讓您與聊天機器人進行對話。您可以提出問題或提供輸入,聊天機器人將從向量資料庫中檢索相關文件。 然後,它將您的輸入以及檢索到的文件傳送到語言模型以產生回應。 預設情況下,我已將模型設為`codellama-7b-instruct` ,但您可以根據計算機的速度更改它,甚至可以嘗試 13b 量化模型進行回應。 聊天機器人在對話過程中保留記憶以提供上下文相關的回應。 您可以查看[即時網站](https://repochat.streamlit.app/),您可以使用 API 金鑰進行檢查。 你可以觀看這個演示! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7ndxqpwkkww4f5qudiq.gif) 如果您想查看的話,我找到了另一種[選擇](https://github.com/peterw/Chat-with-Github-Repo)。 Repochat 擁有 200 多顆星,並部署在 Streamlit 上。 https://github.com/pnkvalavala/repochat 明星 RepoChat ⭐️ --- 18. [myGPTReader](https://github.com/madawei2699/myGPTReader) - 閱讀並與 AI 機器人聊天。 ------------------------------------------------------------------------------ ![我的GPT閱讀器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58doii8daomf54te5eca.png) myGPTReader 是 Slack 上的機器人,可以閱讀和總結任何網頁、文件(包括電子書),甚至來自 YouTube 的影片。它可以透過語音與您交流。 一些有價值的功能是: ✅ 使用 myGPTReader 透過對話快速閱讀和理解任何網頁內容,甚至是影片(目前僅支援帶有字幕的 YouTube 影片)。 ![讀者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x626mtnvqr5vw43938iw.gif) ✅ 使用 myGPTReader 快速閱讀任何文件的內容,支援電子書、PDF、DOCX、TXT 和 Markdown。 ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5am7njxco7vhronuirgu.gif) ✅ 透過與 myGPTReader 語音對話來練習外語,它可以成為您的私人導師,支援中文、英語、德語和日語。 ![嗓音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40pzlgtuhcyxgwa1z2gs.gif) ✅ 內建大量提示模板,使用它們可以更好地與chatGPT對話。 ![問](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehgn218hwewzeft98xkp.gif) ✅ myGPTReader 每天都會發出最新的熱門新聞,並自動產生摘要,讓您快速了解今日熱點。 您可以造訪[官方網站](https://www.myreader.io/)。 您可以加入擁有超過 5000 名會員的儲存庫上的 Slack 頻道,免費體驗所有這些功能。 它們在 GitHub 上有 4.4k 顆星,並且像此列表中的其他專案一樣使用 Python 建置。 https://github.com/madawei2699/myGPTReader 星 myGPTReader ⭐️ --- 19. [Marker](https://github.com/VikParuchuri/marker) - 將 PDF 快速且高精度地轉換為 Markdown。 --------------------------------------------------------------------------------- ![標記](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kpdu6jh9qmax5cikbah.png) Marker 將 PDF、EPUB 和 MOBI 轉換為 Markdown。它比牛軋糖快 10 倍,在大多數文件上更準確,並且產生幻覺的風險較低。 我們都知道這有多大幫助,尤其是對於研究論文來說。 ✅ 支援一系列 PDF 文件(針對書籍和科學論文進行了最佳化)。 ✅ 刪除頁首/頁尾/其他工件。 ✅ 將大多數方程式轉換為乳膠。 ✅ 設定程式碼區塊和表格的格式。 ✅ 支援多種語言(儘管大多數測驗是用英語完成的)。請參閱 settings.py 以取得語言列表,或新增您自己的語言列表。 ✅ 適用於 GPU、CPU 或 MPS。 他們也清楚地記錄了[範例](https://github.com/VikParuchuri/marker?tab=readme-ov-file#examples)以及 Marker 和 Nougat 的結果。 ![基準](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqtl447c9h0taisbj8hl.png) 性能結果採用標記和牛軋糖設置,因此它們在 A6000 上均佔用約 3GB 的 VRAM。 閱讀速度和準確性[基準測試](https://github.com/VikParuchuri/marker?tab=readme-ov-file#benchmarks)以及有關如何執行您自己的基準測試的說明。 例如,請參閱此 PDF: [Think Python](https://greenteapress.com/thinkpython/thinkpython.pdf)和[Marker](https://github.com/VikParuchuri/marker/blob/master/data/examples/marker/thinkpython.md) vs [Nougat](https://github.com/VikParuchuri/marker/blob/master/data/examples/nougat/thinkpython.md)的 markdown 檔案。 閱讀[安裝說明](https://github.com/VikParuchuri/marker?tab=readme-ov-file#installation)。 他們也記錄瞭如何正確使用它: - [轉換單一文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-a-single-file) - [轉換多個文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-multiple-files) - [在多個 GPU 上轉換多個文件](https://github.com/VikParuchuri/marker?tab=readme-ov-file#convert-multiple-files-on-multiple-gpus) 他們在 GitHub 上有 8k+ 星,我認為它不再被維護了。 https://github.com/VikParuchuri/marker 星標 ⭐️ --- 20. [Instrukt](https://github.com/blob42/Instrukt) - 終端機中整合人工智慧。 ---------------------------------------------------------------- ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsk64pf5yuosui91tmz9.png) Instrukt是一個基於終端的AI整合環境。它提供了一個平台,用戶可以: - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們,並且為了安全起見,在安全容器(目前使用 Docker 實作)中執行它們,以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ``` ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3aza7hnlji7hbi2o0js.gif) 有許多令人興奮的功能,例如: - 基於終端的介面,讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互,以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理,這是一個簡潔的小功能。 ![控制台除錯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaan8np68e3fk1yueexm.png) Instrukt 已獲得 AGPL 許可證,這意味著任何人都可以將其用於任何目的。 可以肯定地說,Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案,因此他們在 GitHub 上有大約 200 多顆星,但用例非常好。 https://github.com/blob42/Instrukt 舊指令 ⭐️ --- 21.[微代理](https://github.com/aymenfurter/microagents)- 能夠自我編輯提示的代理。 ------------------------------------------------------------------ ![微代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nuxv03dgb03s04dkmkm9.png) 它是一個實驗框架,用於動態建立自我改進的代理來回應任務。 微代理代表了一種建立自我改進代理的新方法。小型微服務大小(因此稱為微代理)代理是根據用戶分配給助手的任務動態生成的,評估其功能,並在成功驗證後存儲以供將來重用。 這使得跨聊天會話的學習成為可能,使系統能夠獨立推斷任務執行的方法。 這是使用`Python` 、 `OpenAI's GPT-4 Turbo`和`Text-Embedding-Ada-002`建構的。 您可以閱讀[安裝說明](https://github.com/aymenfurter/microagents?tab=readme-ov-file#installation)。他們提到您應該擁有一個可以存取 gpt-4-turbo 和 text-embedding-ada-002 的 OpenAI 帳戶。 讓我們看一個獲取天氣預報代理的範例。 ``` You are an adept weather informant. Fetch the weather forecast by accessing public API data using this Python code snippet: ``python import requests import json def fetch_weather_forecast(location, date): response = requests.get(f"https://api.met.no/weatherapi/locationforecast/2.0/compact?lat={location[0]}&lon={location[1]}") weather_data = response.json() for day_data in weather_data['properties']['timeseries']: if date in day_data['time']: print(day_data['data']['instant']['details']) break `` # Example usage: fetch_weather_forecast((47.3769, 8.5417), '2024-01-22T12:00:00Z') Note: Replace the (47.3769, 8.5417) with the actual latitude and longitude of the location and the date string accordingly. ``` 如果您想知道如何建立代理,那麼此架構圖將對此進行解釋。 ![圖表](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7oi4fbt6e5qauqo293qt.png) 您可以看到[工作演示](https://github.com/aymenfurter/microagents?tab=readme-ov-file#demo)。 他們在 GitHub 上有大約 700 顆星,值得一看。 https://github.com/aymenfurter/microagents 明星微代理 ⭐️ --- 22. [Resume Matcher](https://github.com/srbhr/Resume-Matcher) - 一個改進你的履歷的免費工具。 ------------------------------------------------------------------------------ ![履歷表匹配器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av3u7dd3d3rm7k108w7i.png) Resume Matcher 是一款開源免費工具,可用於完善您的履歷。根據職位描述自訂您的履歷。找到匹配的關鍵字,提高可讀性,並深入了解您的履歷。 它是如何運作的? 履歷表匹配器使用 Python 讀取您的履歷和職位描述,就像 ATS 一樣。 它建議透過以下方式進行更改,使您的履歷適合 ATS: ✅ 解析:它使用 Python 分解你的履歷和工作描述。 ✅ 關鍵字提取:該工具從職位描述中尋找重要關鍵字,例如技能和資格。 ✅ 關鍵術語提取:辨識職位描述中的主題以了解其上下文。 ✅ 向量相似度:使用 FastEmbedd,它將您的履歷與職位描述進行比較,看看它們的匹配程度。配對得越好,通過 ATS 篩選的機會就越高。 ![使命](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kintryj2685slbya98zr.png) 您可以閱讀[安裝說明](https://github.com/srbhr/Resume-Matcher?tab=readme-ov-file#how-to-install)。 您可以查看[現場演示](https://resume-matcher.streamlit.app/)或自述文件中附帶的演示。 Resume Matcher 是由 Saurabh Rai 建立的一個令人驚嘆的專案,他還在 DEV 上寫了很棒的帖子! 它在 GitHub 上有 4.5k 顆星,並且仍然維護良好。 https://github.com/srbhr/Resume-Matcher 明星簡歷匹配器 ⭐️ --- 23.[背景移除器](https://github.com/nadermx/backgroundremover)- 讓您可以透過簡單的 CLI 使用 AI 從影像和影片中移除背景。 ------------------------------------------------------------------------------------------ ![背景去除劑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v8bppslk45ci383wpman.png) 這是一個使用 AI 從圖像和影片中刪除背景的命令列工具。 首先從 pypi 安裝 backgroundremover。 ``` pip install --upgrade pip pip install backgroundremover ``` 也可以在不透過 pip 安裝的情況下執行它,只需克隆 git 以在本地啟動虛擬環境安裝要求並執行。 您可以使用的一些命令: - 從本機檔案圖像中刪除背景 ``` backgroundremover -i "/path/to/image.jpeg" -o "output.png" ``` - 從本地影片中刪除背景並將其覆蓋在圖像上 ``` backgroundremover -i "/path/to/video.mp4" -toi "/path/to/videtobeoverlayed.mp4" -o "output.mov" ``` 您可以檢查可以透過 CLI 使用的所有[命令](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#usage-as-a-cli)。 您甚至可以將它用作圖書館。 ``` from backgroundremover.bg import remove def remove_bg(src_img_path, out_img_path): model_choices = ["u2net", "u2net_human_seg", "u2netp"] f = open(src_img_path, "rb") data = f.read() img = remove(data, model_name=model_choices[0], alpha_matting=True, alpha_matting_foreground_threshold=240, alpha_matting_background_threshold=10, alpha_matting_erode_structure_size=10, alpha_matting_base_size=1000) f.close() f = open(out_img_path, "wb") f.write(img) f.close() ``` 您可以閱讀[安裝說明](https://github.com/nadermx/backgroundremover?tab=readme-ov-file#installation)並觀看[現場演示](https://www.backgroundremoverai.com/)。 > 輸入與輸出。 ![輸入影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b0rwjaxxw460lugle5z2.png) 他們在 GitHub 上有 6k star,我們絕對可以用它來學習一些重要的概念。 https://github.com/nadermx/backgroundremover 明星背景去除器 ⭐️ --- 24. [Tkinter Designer](https://github.com/ParthJadhav/Tkinter-Designer) - 建立 Python GUI 的簡單快速的方法。 ------------------------------------------------------------------------------------------------- ![Tkinter 設計師](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dt5ij4fu948yz4fwnqc.png) Tkinter Designer 的建立是為了加快 Python 中的 GUI 開發過程。它使用著名的設計軟體Figma,讓用Python建立漂亮的Tkinter GUI變得輕而易舉。 Tkinter Designer 使用 Figma API 來分析設計檔案並建立 GUI 所需的對應程式碼和檔案。 如果您想知道它是如何工作的? 使用者唯一需要做的就是使用 Figma 設計一個介面,然後將 Figma 檔案 URL 和 API 令牌貼到 Tkinter Designer 中。 Tkinter Designer 將自動產生在 Tkinter 中建立 GUI 所需的所有程式碼和映像。 ![怎麼運作的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lb2pjsige0b9w5rynipm.png) 您可以閱讀逐步指南\](https://github.com/ParthJadhav/Tkinter-Designer/blob/master/docs/instructions.md),了解如何正確使用它,該指南有多種語言版本。 您可以在這裡觀看演示! https://www.youtube.com/watch?v=Qd-jJjduWeQ 他們還展示了您可以使用它輕鬆複製的[網站範例](https://github.com/ParthJadhav/Tkinter-Designer?tab=readme-ov-file#-examples)。 ![網站範例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vdiyhj08bwatasonpekm.png) 它們在 GitHub 上有 8,300 顆星,並被大約 100 名開發人員使用。 https://github.com/ParthJadhav/Tkinter-Designer Tkinter 明星設計師 ⭐️ --- 25. [Open Interpreter](https://github.com/OpenInterpreter/open-interpreter) - 電腦自然語言介面。 --------------------------------------------------------------------------------------- ![打開解釋器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av7udc5fibj1wz88w0u8.png) Open Interpreter 允許法學碩士在本地執行程式碼(Python、Javascript、Shell 等)。您可以在安裝後執行 $terpreter,透過終端機中類似 ChatGPT 的介面與 Open Interpreter 聊天。 這為電腦的通用功能提供了自然語言介面: ✅ 建立和編輯照片、影片、PDF 等。 ✅ 控制 Chrome 瀏覽器執行研究、繪製、清理和分析大型資料集。 我不了解你,但他們的[網站](https://www.openinterpreter.com/)讓我驚嘆不已! 使用此命令快速啟動。 ``` pip install open-interpreter // After installation, simply run: interpreter ``` 您可以閱讀[快速入門指南](https://docs.openinterpreter.com/getting-started/introduction)。 您應該閱讀[與 ChatGPT 程式碼解釋器的比較](https://github.com/OpenInterpreter/open-interpreter?tab=readme-ov-file#comparison-to-chatgpts-code-interpreter)以及可以使用的[命令](https://github.com/OpenInterpreter/open-interpreter?tab=readme-ov-file#commands)。 您可以閱讀[文件](https://docs.openinterpreter.com/getting-started/introduction)。 Open Interpreter 可與託管語言模型和本機語言模型搭配使用。託管模型速度更快、功能更強大,但需要付費。本地模型是私有且免費的,但能力往往較差。 它們在 GitHub 上擁有超過 48k 顆星,並被 300 多名開發人員使用。 https://github.com/OpenInterpreter/open-interpreter Star 開放式解釋器 ⭐️ --- 獲得經驗並提高編碼水平的最佳方法是建立業餘專案。 我希望您能夠建立其中一些專案,或至少獲得靈感。 評論下來告訴其他人任何其他很酷的 Python 專案:) 祝你有美好的一天! 關注 Taipy 以了解更多此類內容。 https://dev.to/taipy --- 原文出處:https://dev.to/taipy/25-projects-that-you-can-build-with-python-and-ai-12i9

搜尋將是 LLMs 和人工智慧應用的未來。

在查看 LinkedIn 時,我的動態中出現了一篇[有趣的文章](https://www.linkedin.com/pulse/every-llm-company-search-hard-future-retrieval-systems-7zigc/?trackingId=MuIYNy7CyPMG2IMgoJv9tg%3D%3D)。其標題是「每個 LLMs 公司都是一家搜尋公司,而搜尋很困難: LLMs 檢索系統的未來」。 這很有趣,因為我們在過去幾年中建立了 SWIRL,以幫助擴展公司的搜尋和人工智慧基礎設施。正如我們所提到的,搜尋無處不在。 DEVTO現在正在使用Algolia(也許更早,他們的程式碼用於執行搜尋)來實現智慧搜尋。任何嘗試過建立支援搜尋的應用程式的人都知道,搜尋很複雜,涉及許多因素,例如相關性排名和個人化。 這使得建築物搜尋變得困難。這適用於嘗試建立支援搜尋的應用程式的人。搜尋很難管理,需要考慮很多因素。以搜尋引擎人工智慧領域的領導者谷歌為例,該公司在搜尋結果方面面臨批評。人們開始[抱怨]()其搜尋結果。但我們不僅僅談論谷歌。這裡有很多東西要理解。 您組織內部的資料怎麼樣?你工作的地方? ------------------- 企業擁有大量分散在各個部門和管道的資料——從客戶互動和銷售記錄到操作日誌和員工回饋。 他們認識到利用這些資料建立人工智慧驅動的應用程式的巨大潛力,這些應用程式可以簡化營運、增強客戶體驗並推動創新。然而,挑戰在於統一這種分散的資料格局。 ![組織內部的資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mohvy22urvxf3pn0mbpt.jpg) 資料中充滿了許多資訊: - 會議記錄 - 孤立的應用程式 - 電子郵件檔案 - 內部文件 - 客戶支援票 - 專案管理工具 挑戰在於檢索該資訊。我們目前的做法是將所有資料傳輸到向量資料庫。然後用它來檢索資訊。這既簡單又困難。很簡單,因為您知道在哪裡搜尋。這很困難,因為它管理這些向量資料庫(或任何搜尋索引)。你必須: - 不斷尋找資料。 - 比較索引資料和更新資料。 - 如有必要,請更新。 最重要的是,如果您使用向量資料庫,您將處理嵌入。但這是另一個部落格的故事。 那為什麼搜尋是 LLMs 申請的未來呢? ------------------ 我們產生的大量資料變得越來越難以管理。傳統方法成本高、耗時長,且有一定的[安全風險](https://swirlaiconnect.com/blog/the-risks-of-relying-on-a-single-data-repository-for-retrieval-augmented-generation-rag)。 當您的 LLMs 可以搜尋資料儲存庫內的資訊。他們可以提供您和您的團隊所需的訊息,而無需在訓練記憶中進行搜尋,或在訓練記憶不存在時產生幻覺。透過提供你所要求的背景,它就變成了尋找一本書然後回答。 ### 我們的重點該放在哪裡? 為了開發能夠在內部資料上表現良好的人工智慧應用程式,我們需要一種高效的檢索增強生成(RAG)方法。在這種情況下,檢索器是一個搜尋平台。 屬性應該是: - 它應該連接到內部資料來源。 - 確保安全、尊重並遵循當前和現有的安全解決方案。 - 理解人類語言的上下文。 - 提供優秀且相關的結果。 這就是我們建立[SWIRL 的](https://swirlaiconnect.com)方式:一個高效的檢索器,可以提供良好的答案,與多個資料提供者連接,並允許在企業中使用人工智慧。 這樣,一項工作就完成了。你有資料。您所要做的就是配置一個資料提供者。建立查詢並取得答案。一旦您即時獲得了所需的資料,機會就無窮無盡: - 取得人工智慧摘要。 - 在人工智慧的幫助下,使用這些資料來製作報告。 - 建立一個可以幫助您完成任務的副駕駛。 一旦解決了檢索部分,您就可以做很多事情。 SWIRL 在自架平台上運作,因此您的資料仍然安全。 看看我們能用 SWIRL 做什麼? ----------------- 我可以搜尋來源並為您提供資料。其餘的只是安排事情的一種方式。從廣義上講,它既簡單又安全。 我想給你一個關於架構的想法。檢查這個圖。它展示了我們如何利用人工智慧基礎設施平台來做到這一點。 ![SWIRL AI Connect 架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kqhvqagk32y9oln2kj1.png) 這就是最好的事情:即時搜尋您的資料。 這裡的遊戲規則改變者是我們應該選擇一個框架,該框架允許我們從多個應用程式獲取資料而不限制最終用戶。然後,讓 LLMs 協助您執行任務。 還有一點:最好的資料並不總是在 SQL 資料庫中。它可以位於您團隊的房間、會議記錄或您保存的其他一些文件中。上述架構使您能夠找到並獲得良好的結果,讓您感覺自己是編寫它們的人。 搜尋,不僅僅是語義搜尋,而是通用搜尋架構,需要縮小我們想要從人工智慧獲得的資訊差距。 與我們一起建立人工智慧基礎設施軟體 SWIRL ----------------------- [![加入 SWIRL 社區](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nqk0xqbjxlj1xdcomn9m.jpg)](https://github.com/swirlai/swirl-search) SWIRL 是開源的並用 Python 建構。我們正在開發許多好東西,從搜尋到聊天介面。如果您是 UI 專業人士,請幫助我們! https://join.slack.com/t/swirlmetasearch/shared\_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw 加入我們的 Slack。 觀看[有關如何設定 SWIRL 的影片](https://www.youtube.com/watch?v=OogRYkfSki8)。然後,加入我們的[Slack 社群](https://join.slack.com/t/swirlmetasearch/shared_invite/zt-1qk7q02eo-kpqFAbiZJGOdqgYVvR1sfw)並聯繫我。讓我們一起建立一個令人驚嘆的開源人工智慧平台。**可能會有一些驚人的獎勵給你。** 💐🎁 https://github.com/swirlai/swirl-search 在 GitHub 上給我們一個 🌟。 --- 原文出處:https://dev.to/srbhr/search-will-be-the-future-of-llm-and-ai-applications-26fl

快速建造 WhatsApp 機器人 ⚡

--- 標題:快速建造 WhatsApp 機器人 ⚡ 發表:真實 描述:建立一個將 WikiPedia 摘要發送到 WhatsApp 的🤖 標籤: twilio、replit、whatsapp、聊天機器人 封面圖片:https://i.imgur.com/XQ4FhRA.png --- 幾個月前,我開始在[Telegram](https://t.me)上製作聊天機器人 - 我看到了 WhatsApp 的一些 API,但它們是非官方的,並且您的號碼有可能被封鎖 📱 ❌ 不久前,我看到[Twilio](https://twilio.com)有一個官方的 WhatsApp API。 30 分鐘後,我[在 WhatsApp 上製作了一個維基百科機器人](https://wikibot.4ty2.fun)👇 ![](https://wikibot.surge.sh/Untitled-b9da3f92-94c0-4f97-8afb-787110d8a9d3.png) 本教學可協助您在 WhatsApp 上建立自己的聊天機器人 - 這些機器人可立即供超過 20 億用戶使用,並且有很多事情是可能的 🎓 我迫不及待想看看你做了什麼!現在,讓我們開始吧🏃‍♂️ 🔑 帳戶和金鑰 ------- 首先,註冊[Twilio](https://www.twilio.com/try-twilio) - 它是免費的,您不需要信用卡 💳 ![](https://wikibot.surge.sh/screely-1535885763017-fc654067-9557-4bf7-98b5-4337911ff4ba.png) 驗證完電話號碼後,選擇“Procuts”&gt;“Programmable SMS”,然後繼續為您的專案命名。 ![](https://wikibot.surge.sh/screely-1535885937977-c5a924ec-8cc3-4430-9345-9b5e1dc74ef3.png) 您可以隨意跳過新增隊友的步驟 - 您現在不需要這樣做。 現在您必須記下建造 WhatsApp 機器人所需的一些驗證金鑰 👇 ![](https://wikibot.surge.sh/screely-1535886250966-f68b6cfb-c104-4adf-80e7-4e3f9bd15b5b.png) 最後一步 -[在此](https://www.twilio.com/console/sms/whatsapp/sandbox)設定您的 WhatsApp 沙盒 - 選擇任意號碼,然後按照頁面上的指示加入您的沙盒。 ![](https://wikibot.surge.sh/screely-1535886798623-1dac1ba9-c362-4e49-87ab-7bbb6138e8c7.png) 啊啊啊,您已完成憑證設定!別擔心,這是本教學中最困難的部分😛 🚀 開始使用 ------ 為了避免在設定上花費太多時間,我建立了一個可以在瀏覽器中使用的環境(使用[repl.it](https://repl.it) !)。前往[這裡](https://repl.it/@jajoosam/wikibot-start),等待幾秒鐘來分叉它。 接下來,[建立一個`.env`檔](https://repl.it/site/docs/repls/secret-keys)- 並在`1`行和`2`行輸入您的帳戶 SID 和驗證令牌 ``` SID=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX # Account SID KEY=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX # Auth Token ``` 您可以看到,此環境已經安裝了依賴項,並設定了`express`伺服器。不過,我們仍然需要為 Twilio 提供一個用於發送傳入訊息的 URL 🔗 讓我們回到[WhatsApp Sandbox](https://www.twilio.com/console/sms/whatsapp/sandbox) ,並為傳入訊息輸入一個 Webhook URL。 ![](https://wikibot.surge.sh/Untitled-3ed5263b-c6d8-492b-ba08-b4644ab502cf.png) 此 URL 必須是您在[repl.it](http://repl.it)專案的預覽面板上看到的 URL + `/incoming` ![](https://wikibot.surge.sh/Untitled-1779b21f-9100-4942-b732-320dc48c5f76.png) 現在我們終於可以讀取發送給機器人的訊息了。導航到`index.js` ,然後在您的 webhook 處理程序中加入一個簡單的`console.log()` 👇 ``` app.post('/incoming', (req, res) => { console.log(req.body) }); ``` 當您向機器人發送訊息時,您應該能夠在 repl 控制台中看到類似的內容 👨‍💻 ![](https://wikibot.surge.sh/Untitled-163eb09e-e6ab-4910-badb-d8aa0aa789f7.png) 建造一個 echo 機器人看起來像這樣,使用`twiml`編寫訊息👇 ``` app.post('/incoming', (req, res) => { const twiml = new MessagingResponse(); twiml.message(req.body.Body); res.writeHead(200, {'Content-Type': 'text/xml'}); res.end(twiml.toString()); }); ``` 但是,由於我們實際上正在嘗試建立一個有用的機器人 - 讓我們使用資訊豐富的 API! 🌐 獲取訊息 ------ DuckDuckGo 有一個令人驚嘆的、免費的即時應答 API。它接受查詢並返回來自維基百科等的摘要。 一些例子 👉 [維基百科](https://api.duckduckgo.com/?skip_disambig=1&format=json&pretty=1&q=WikiPedia)、 [Macbook Air](https://api.duckduckgo.com/?skip_disambig=1&format=json&pretty=1&q=MacBook%20Air) 、 [Twilio](https://api.duckduckgo.com/?skip_disambig=1&format=json&pretty=1&q=Twilio) 我花了一些時間建立一個像樣的解析器,它通常會從此 API 傳回資訊。嘗試將此程式碼貼到您的[repl.it](http://repl.it)專案中,您的[控制台](https://dsh.re/f7477c)中應該包含有關川普的內容 😛 ``` var base = 'https://api.duckduckgo.com/?skip_disambig=1&format=json&pretty=1&q='; var query = 'Donald Trump'; request(base + query, function (error, response, body) { body = JSON.parse(body) if(body["Abstract"] == ""){ body["Abstract"]= body["RelatedTopics"][0]["Text"] } var msg = body["Heading"]+"\n\n"+body["Abstract"]; console.log(msg) }); ``` 很簡單,對吧? 😄 🛠️ 將所有內容放在一起 ------------ 為了製作我們的實際機器人,我們需要做的就是從我們的請求中獲取查詢 - 我們可以將其作為`req.body.Body`獲取 - 並使用`twmil`發送我們在`msg`中收集的資料 ``` app.post('/incoming', (req, res) => { const twiml = new MessagingResponse(); var base = 'https://api.duckduckgo.com/?skip_disambig=1&format=json&pretty=1&q='; var query = req.body.Body; request(base + query, function (error, response, body) { body = JSON.parse(body) if(body["Abstract"] == ""){ body["Abstract"]= body["RelatedTopics"][0]["Text"] } var msg = twiml.message(body["Heading"]+"\n\n"+body["Abstract"]); res.writeHead(200, {'Content-Type': 'text/xml'}); res.end(twiml.toString()); }); }); ``` 您現在擁有一個功能齊全的 WhatsApp 機器人!發送您想了解的有關您的機器人的任何訊息 🤖,您應該會看到它的響應速度超快 💬 ⚡ 加入歡迎訊息和一些格式設定非常簡單,請查看最終的[repl](https://repl.it/@jajoosam/wikibot) ,看看我是如何做到的👨‍💻 {%回覆@wikibot%} 🔗 分享機器人 ------- 對於其他人使用此機器人,他們需要先加入您的沙箱 - 並發送一條訊息,就像您之前所做的那樣 👉 `join <two-words>` 您也可以使用此文字建立連結 - 例如此連結可讓您加入我的機器人👇 ``` https://wa.me/14155238886?text=join ultramarine-tapir ``` `14155238886`是我的機器人號碼,而`ultramarine-tapir`是沙盒短語。 ⚡ 接下來是什麼? --------- 既然您已經知道如何在 WhatsApp 上建立機器人,請嘗試向自己發送通知,並建立更多有用的工具! Twilio 還有大量[其他媒體](https://www.twilio.com/channels)可用於傳遞訊息! 我的 WikiBot 的所有程式碼都在[Github](https://github.com/jajoosam/wikibot)上 ⬇️ {%github github/wikibot%} 我是一名 15 歲的創客 👨‍💻 想要製作更多酷炫的東西並了解我的進展,請訂閱[我的時事通訊 📧](https://buttondown.email/jajoosam) --- 原文出處:https://dev.to/jajoosam/build-a-whatsapp-bot-fast--2hdc

ChatGPT - 給開發人員的提示

了解 ChatGPT: ----------- ChatGPT 是一種人工智慧 (AI) 聊天機器人,它使用自然語言處理來建立類人對話。這個語言模型可以回答問題並撰寫各種書面內容,包括文章、社交媒體貼文、論文、程式碼和電子郵件,這使其成為各個層級的程式設計師都興奮的工具。 > OpenAI(一家人工智慧研究公司)建立了ChatGPT,並於2022 年11 月推出了該工具。 什麼是即時工程以及為什麼它很重要? ----------------- 及時的工程設計使用戶可以輕鬆獲得相關結果。它還有助於減輕大型語言模型訓練資料中現有的人類偏見可能存在的偏見。此外,它還增強了用戶與人工智慧的交互,因此即使輸入很少,人工智慧也能理解用戶的意圖。 在製作提示時, - 記住要清晰簡潔。 - 具體:指定程式語言選擇並清楚描述您需要的功能。例如,提示可以是“編寫一個 JavaScript 函數來計算給定數字的總和”,而不是模糊的“編寫一個函數來計算總和”。 - 包括必要的背景和細節,但避免任何含糊或不必要的資訊。 - 定義輸入和輸出:如果您需要的函數或程式碼段需要特定的輸入或輸出格式,請在提示中包含此資訊。 ChatGPT 如何幫助開發者: ---------------- ChatGPT 是一種高階語言模型,可以透過多種方式幫助開發人員完成編碼之旅。讓我們來探討其中的一些。 **1. 編寫程式碼:**使用ChatGPT,您可以根據具體描述產生程式碼。例如,如果您需要 C# 函數來計算 2 個數字中的某些數字。您可以如下所示提示 ChatGPT,它將返回相應的程式碼。 提示範例: ``` "Write a C# function to calculate the sum of the 2 given numbers." ``` **2.重構程式碼:**借助ChatGPT的幫助,您可以重構程式碼,以提高程式碼效率,減少錯誤,並使其更易於將來修改或擴展。 提示範例: ``` I have a piece of code and I need you to refactor it: INSERT YOUR CODE HERE ``` **3. 程式碼審查和偵錯:**您可以使用 ChatGPT 審查程式碼片段並分享潛在的問題或錯誤。 提示範例: ``` "Here's a C# code snippet. The function is supposed to return the maximum value from the given list, but it's not returning the expected output. Can you identify the problem?". INSERT YOUR CODE HERE ``` **4. 新增編碼最佳實務或原則:** ChatGPT 可協助您根據風格指南重寫程式碼。 提示範例: ``` Rewrite the code below following the Google style guidelines for JavaScript. INSERT YOUR CODE HERE ``` **5. 解釋程式碼:** ChatGPT 可以幫助解釋舊的和複雜的程式碼片段的工作原理。要獲得特定程式碼段的解釋,請提供程式碼片段並詢問。 提示範例: ``` "Could you please explain how this C# function works?". INSERT YOUR CODE HERE ``` **6. 最佳化程式碼:** ChatGPT 可以幫助優化程式碼,以增強效能或可讀性,使您的程式碼精簡且有效率。 提示範例: ``` "Here’s a function I wrote in JavaScript that prints first n Fibonacci Numbers. Could you suggest any optimizations for better performance?" INSERT YOUR CODE HERE ``` **7. 建立單元測試:**您可以使用 ChatGPT 透過為您編寫測試案例來自動化單元測試。 提示範例: ``` Please write unit tests for the following code. INSERT YOUR CODE HERE ``` **8. 新增程式碼註釋:**如果您的程式碼不言自明但需要註釋,ChatGPT 可以立即為您完成。 提示範例: ``` Add comments to the following code: INSERT YOUR CODE HERE ``` **9. 建立樣板程式碼:** ChatGPT 可以幫助您產生樣板程式碼。 提示範例: ``` Write a boilerplate JavaScript function that will take a variable of type User, and validate whether the user has the right permissions or not. ``` **10. 建立正規表示式:**正規表示式幫助我們匹配、定位和管理文本,提供了一種快速且相對簡單的方法來操作資料,特別是在大型複雜程式中,ChatGPT 可以幫助我們編寫這些正則表達式。 提示範例: ``` Write a regular expression that matches: REQUEST ``` 這些是 ChatGPT 如何讓開發人員的生活變得輕鬆的一些例子。除此之外,ChatGPT 還可以幫助學習新概念、理解設計模式、程式碼重構、集思廣益、面試準備等等。 ChatGPT 提示編寫程式碼: ---------------- 我收集了 ChatGPT 提示,這些提示可以讓開發人員的生活變得輕鬆,因為他們可以更有效地利用強大的 AI 支援的 ChatGPT。 - [編寫和生成程式碼的提示](https://dev.to/techiesdiary/chatgpt-prompts-for-writing-and-generating-codes-59kf) --- 原文出處:https://dev.to/techiesdiary/chatgpt-prompts-for-developers-216d

我正在建立一個人工智慧驅動的部落格:具體方法如下...

人工智慧時代已經來臨。身為開發者,要想取得成功,在你的投資組合中加入一些人工智慧驅動的專案是很棒的。 今天,我們將建立一個由人工智慧驅動的部落格平台,該平台具有一些很棒的功能,例如研究、自動完成和 Copilot。 我[在這裡](https://dev.to/copilotkit/how-to-build-an-ai-powered-blogging-platform-nextjs-langchain-supabase-1hdp)建立了該專案的初始版本。一位評論者提出了一些非常酷的建議,可以將其提升到一個新的水平。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2pbxvo6rff8xz8a0h3b.png) 所以我們決定建造它! **長話短說** -------- 我們正在建立一個由人工智慧驅動的部落格平台 Pt。二 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bi1j9iq1jkll1r21f1e8.gif) --- CopilotKit:建構應用內人工智慧副駕駛的框架 ========================== CopilotKit是一個[開源的AI副駕駛平台](https://github.com/CopilotKit/CopilotKit)。我們可以輕鬆地將強大的人工智慧整合到您的 React 應用程式中。 建造: - ChatBot:上下文感知的應用內聊天機器人,可以在應用程式內執行操作 💬 - CopilotTextArea:人工智慧驅動的文字字段,具有上下文感知自動完成和插入功能📝 - 聯合代理:應用程式內人工智慧代理,可以與您的應用程式和使用者互動🤖 ![上傳圖片](...) {% cta https://github.com/CopilotKit/CopilotKit %} Star CopilotKit ⭐️ {% endcta %} 現在回到文章! --- 先決條件 ---- 要完全理解本教程,您需要對 React 或 Next.js 有基本的了解。 以下是建立人工智慧部落格所需的工具: - [Quill 富文本編輯器](https://quilljs.com/)- 一個文字編輯器,可讓您輕鬆設定文字格式、新增圖片、新增程式碼以及在 Web 應用程式中建立自訂互動式內容。 - [Supabase](https://supabase.com/) - 一項 PostgreSQL 託管服務,為您提供專案所需的所有後端功能。 - [Langchain](https://www.langchain.com/) - 提供了一個框架,使人工智慧代理能夠搜尋網路並研究任何主題。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰,讓您能夠使用 ChatGPT 模型執行各種任務。 - [Tavily AI](https://tavily.com/) - 一個搜尋引擎,使人工智慧代理能夠在應用程式中進行研究並存取即時知識。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架,用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先,透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式: ``` npx create-next-app@latest aiblogapp ``` 選擇您首選的配置設定。在本教學中,我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pae912scgh9tjfa75l8t.png) 接下來,安裝 Quill 富文本編輯器、Supabase 和 Langchain 軟體包及其相依性。 ``` npm install quill react-quill @supabase/supabase-js @supabase/ssr @supabase/auth-helpers-nextjs @langchain/langgraph ``` 最後,安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜!您現在已準備好建立由人工智慧驅動的部落格。 **建構部落格前端** ----------- 在本節中,我將引導您完成使用靜態內容建立部落格前端以定義部落格使用者介面的過程。 部落格的前端將由四個頁面組成:主頁、貼文頁面、建立貼文頁面和登入/註冊頁面。 首先,請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中,建立五個名為`Header.tsx` 、 `Posts.tsx` 、 `Post.tsx` 、 `Comment.tsx`和`QuillEditor.tsx`的文件 在`Header.tsx`檔案中,新增以下程式碼,定義一個名為`Header`的功能元件,該元件將呈現部落格的導覽列。 ``` "use client"; import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="flex-none text-xl text-white font-semibold " href="/" aria-label="Brand"> AIBlog </Link> </div> <div id="navbar-collapse-with-animation" className=""> <div className="flex flex-col gap-y-4 gap-x-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:gap-y-0 sm:gap-x-7 sm:mt-0 sm:ps-7"> <Link className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " href="/createpost"> Create Post </Link> <form action={""}> <button className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " type="submit"> Logout </button> </form> <Link className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " href="/login"> Login </Link> </div> </div> </nav> </header> </> ); } ``` 在`Posts.tsx`檔案中,新增以下程式碼,定義一個名為`Posts`的功能元件,該元件呈現部落格平台主頁,該首頁將顯示已發佈文章的清單。 ``` "use client"; import React, { useEffect, useState } from "react"; import Image from "next/image"; import Link from "next/link"; export default function Posts() { const [articles, setArticles] = useState<any[]>([]); return ( <div className="max-w-[85rem] h-full px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto"> <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> <Link key={""} className="group flex flex-col h-full bg-gray-800 border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 " href=""> <div className="aspect-w-16 aspect-h-11"> <Image className="object-cover h-48 w-96 rounded-xl" src={`https://source.unsplash.com/featured/?${encodeURIComponent( "Hello World" )}`} width={500} height={500} alt="Image Description" /> </div> <div className="my-6"> <h3 className="text-xl font-semibold text-white ">Hello World</h3> </div> </Link> </div> </div> ); } ``` 在`QuillEditor.tsx`檔案中,新增以下程式碼,用於動態匯入 QuillEditor 元件、定義 Quill 編輯器工具列的模組配置以及定義 Quill 編輯器的文字格式。 ``` // Import the dynamic function from the "next/dynamic" package import dynamic from "next/dynamic"; // Import the CSS styles for the Quill editor's "snow" theme import "react-quill/dist/quill.snow.css"; // Export a dynamically imported QuillEditor component export const QuillEditor = dynamic(() => import("react-quill"), { ssr: false }); // Define modules configuration for the Quill editor toolbar export const quillModules = { toolbar: [ // Specify headers with different levels [{ header: [1, 2, 3, false] }], // Specify formatting options like bold, italic, etc. ["bold", "italic", "underline", "strike", "blockquote"], // Specify list options: ordered and bullet [{ list: "ordered" }, { list: "bullet" }], // Specify options for links and images ["link", "image"], // Specify alignment options [{ align: [] }], // Specify color options [{ color: [] }], // Specify code block option ["code-block"], // Specify clean option for removing formatting ["clean"], ], }; // Define supported formats for the Quill editor export const quillFormats = [ "header", "bold", "italic", "underline", "strike", "blockquote", "list", "bullet", "link", "image", "align", "color", "code-block", ]; ``` 在`Post.tsx`檔案中,新增以下程式碼,定義一個名為`CreatePost`功能元件,該元件將用於呈現文章建立表單。 ``` "use client"; // Importing React hooks and components import { useRef, useState } from "react"; import { QuillEditor } from "./QuillEditor"; import { quillModules } from "./QuillEditor"; import { quillFormats } from "./QuillEditor"; import "react-quill/dist/quill.snow.css"; // Define the CreatePost component export default function CreatePost() { // Initialize state variables for article outline, copilot text, and article title const [articleOutline, setArticleOutline] = useState(""); const [copilotText, setCopilotText] = useState(""); const [articleTitle, setArticleTitle] = useState(""); // State variable to track if research task is running const [publishTaskRunning, setPublishTaskRunning] = useState(false); // Handle changes to the editor content const handleEditorChange = (newContent: any) => { setCopilotText(newContent); }; return ( <> {/* Main */} <div className="p-3 max-w-3xl mx-auto min-h-screen"> <h1 className="text-center text-white text-3xl my-7 font-semibold"> Create a post </h1> {/* Form for creating a post */} <form action={""} className="flex flex-col gap-4 mb-2 mt-2"> <div className="flex flex-col gap-4 sm:flex-row justify-between mb-2"> {/* Input field for article title */} <input type="text" id="title" name="title" placeholder="Title" value={articleTitle} onChange={(event) => setArticleTitle(event.target.value)} className="flex-1 block w-full rounded-lg border text-sm border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:border-cyan-500 focus:ring-cyan-500" /> </div> {/* Hidden textarea for article content */} <textarea className="p-4 w-full aspect-square font-bold text-xl bg-slate-800 text-white rounded-lg resize-none hidden" id="content" name="content" value={copilotText} placeholder="Write your article content here" onChange={(event) => setCopilotText(event.target.value)} /> {/* Quill editor component */} <QuillEditor onChange={handleEditorChange} modules={quillModules} formats={quillFormats} className="h-80 mb-12 text-white" /> {/* Submit button for publishing the post */} <button type="submit" disabled={publishTaskRunning} className={`bg-blue-500 text-white font-bold py-2 px-4 rounded ${ publishTaskRunning ? "opacity-50 cursor-not-allowed" : "hover:bg-blue-700" }`} onClick={async () => { try { setPublishTaskRunning(true); } finally { setPublishTaskRunning(false); } }}> {publishTaskRunning ? "Publishing..." : "Publish"} </button> </form> </div> </> ); } ``` 在`Comment.tsx`檔案中,新增以下程式碼,定義一個名為 Comment 的功能元件,該元件呈現貼文評論表單和貼文評論。 ``` // Client-side rendering "use client"; // Importing React and Next.js components import React, { useEffect, useRef, useState } from "react"; import Image from "next/image"; // Define the Comment component export default function Comment() { // State variables for comment, comments, and article content const [comment, setComment] = useState(""); const [comments, setComments] = useState<any[]>([]); const [articleContent, setArticleContent] = useState(""); return ( <div className="max-w-2xl mx-auto w-full p-3"> {/* Form for submitting a comment */} <form action={""} className="border border-teal-500 rounded-md p-3 mb-4"> {/* Textarea for entering a comment */} <textarea id="content" name="content" placeholder="Add a comment..." rows={3} onChange={(e) => setComment(e.target.value)} value={comment} className="hidden" /> {/* Submit button */} <div className="flex justify-between items-center mt-5"> <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded"> Submit </button> </div> </form> {/* Comments section */} <p className="text-white mb-2">Comments:</p> {/* Comment item (currently hardcoded) */} <div key={""} className="flex p-4 border-b dark:border-gray-600 text-sm"> <div className="flex-shrink-0 mr-3"> {/* Profile picture */} <Image className="w-10 h-10 rounded-full bg-gray-200" src={`(link unavailable){encodeURIComponent( "Silhouette" )}`} width={500} height={500} alt="Profile Picture" /> </div> <div className="flex-1"> <div className="flex items-center mb-1"> {/* Username (currently hardcoded as "Anonymous") */} <span className="font-bold text-white mr-1 text-xs truncate"> Anonymous </span> </div> {/* Comment text (currently hardcoded as "No Comments") */} <p className="text-gray-500 pb-2">No Comments</p> </div> </div> </div> ); } ``` 接下來,前往`/[root]/src/app`並建立一個名為`[slug]`的資料夾。在 \[slug\] 資料夾中,建立一個`page.tsx`檔案。 然後將以下程式碼新增至匯入`Comment`和`Header`元件的檔案中,並定義一個名為`Post`功能元件,該元件將呈現導覽列、貼文內容、評論表單和貼文評論。 ``` import Header from "../components/Header"; import Comment from "../components/Comment"; export default async function Post() { return ( <> <Header /> <main className="p-3 flex flex-col max-w-6xl mx-auto min-h-screen"> <h1 className="text-3xl text-white mt-10 p-3 text-center font-serif max-w-2xl mx-auto lg:text-4xl"> Hello World </h1> <div className="flex justify-between text-white p-3 border-b border-slate-500 mx-auto w-full max-w-2xl text-xs"> <span></span> <span className="italic">0 mins read</span> </div> <div className="p-3 max-w-2xl text-white mx-auto w-full post-content border-b border-slate-500 mb-2"> No Post Content </div> <Comment /> </main> </> ); } ``` 之後,轉到`/[root]/src/app`並建立一個名為`createpost`的資料夾。在`createpost`資料夾中,建立一個名為`page.tsx`檔案。 然後將以下程式碼新增至匯入`CreatePost`和`Header`元件的檔案中,並定義一個名為`WriteArticle`的功能元件,該元件將呈現導覽列和貼文建立表單。 ``` import CreatePost from "../components/Post"; import Header from "../components/Header"; import { redirect } from "next/navigation"; export default async function WriteArticle() { return ( <> <Header /> <CreatePost /> </> ); } ``` 接下來,前往`/[root]/src/page.tsx`文件,新增以下程式碼,導入`Posts`和`Header`元件並定義名為`Home`功能元件。 ``` import Header from "./components/Header"; import Posts from "./components/Posts"; export default async function Home() { return ( <> <Header /> <Posts /> </> ); } ``` 之後,請轉到`next.config.mjs`檔案並將其重新命名為`next.config.js` 。然後加入以下程式碼,允許您使用 Unsplash 中的圖像作為已發布文章的封面圖像。 ``` module.exports = { images: { remotePatterns: [ { protocol: "https", hostname: "source.unsplash.com", }, ], }, }; ``` 接下來,刪除 globals.css 檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } .ql-editor { font-size: 1.25rem; } .post-content p { margin-bottom: 0.5rem; } .post-content h1 { font-size: 1.5rem; font-weight: 600; font-family: sans-serif; margin: 1.5rem 0; } .post-content h2 { font-size: 1.4rem; font-family: sans-serif; margin: 1.5rem 0; } .post-content a { color: rgb(73, 149, 199); text-decoration: none; } .post-content a:hover { text-decoration: underline; } ``` 最後,在命令列上執行命令`npm run dev` ,然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看部落格平台前端,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz1qewlt9gkf2vbp5jqq.png) **使用 CopilotKit 將 AI 功能整合到部落格中** -------------------------------- 在本節中,您將學習如何為部落格加入 AI 副駕駛,以使用 CopilotKit 執行部落格主題研究和內容自動建議。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先,讓我們將 CopilotKit React 元件加入到部落格前端。 ### **將 CopilotKit 新增至部落格前端** 在這裡,我將引導您完成將部落格與 CopilotKit 前端整合的過程,以方便部落格文章研究和文章大綱生成。 首先,使用下面的程式碼片段在`/[root]/src/app/components/Post.tsx`檔案頂部匯入`useMakeCopilotReadable` 、 `useCopilotAction` 、 `CopilotTextarea`和`HTMLCopilotTextAreaElement`自訂掛鉤。 ``` import { useMakeCopilotReadable, useCopilotAction, } from "@copilotkit/react-core"; import { CopilotTextarea, HTMLCopilotTextAreaElement, } from "@copilotkit/react-textarea"; ``` 在 CreatePost 函數內的狀態變數下方,加入以下程式碼,該程式碼使用`useMakeCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的文章大綱。鉤子使副駕駛可以閱讀文章大綱。 ``` useMakeCopilotReadable( "Blog article outline: " + JSON.stringify(articleOutline) ); ``` 在`useMakeCopilotReadable`掛鉤下方,使用以下程式碼建立一個名為`copilotTextareaRef`的引用,該引用指向名為`HTMLCopilotTextAreaElement`的文字區域元素。 ``` const copilotTextareaRef = useRef<HTMLCopilotTextAreaElement>(null); ``` 在上面的程式碼下方,加入以下程式碼,該程式碼使用`useCopilotAction`掛鉤來設定名為`researchBlogArticleTopic`的操作,該操作將啟用對部落格文章的給定主題的研究。 此操作採用兩個參數,稱為`articleTitle`和`articleOutline` ,這兩個參數可以產生文章標題和大綱。 該操作包含一個處理程序函數,該函數根據給定主題生成文章標題和大綱。 在處理函數內部, `articleOutline`狀態會使用新產生的大綱進行更新,而`articleTitle`狀態會使用新產生的標題進行更新,如下所示。 ``` // Define a Copilot action useCopilotAction( { // Action name and description name: "researchBlogArticleTopic", description: "Research a given topic for a blog article.", // Parameters for the action parameters: [ { // Parameter 1: articleTitle name: "articleTitle", type: "string", description: "Title for a blog article.", required: true, // This parameter is required }, { // Parameter 2: articleOutline name: "articleOutline", type: "string", description: "Outline for a blog article that shows what the article covers.", required: true, // This parameter is required }, ], // Handler function for the action handler: async ({ articleOutline, articleTitle }) => { // Set the article outline and title using state setters setArticleOutline(articleOutline); setArticleTitle(articleTitle); }, }, [] // Dependencies (empty array means no dependencies) ); ``` 在上面的程式碼下方,前往表單元件並新增以下`CopilotTextarea`元件,該元件可讓您為文章內容新增文字完成、插入和編輯。 ``` <CopilotTextarea className="p-4 h-72 w-full rounded-lg mb-2 border text-sm border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:border-cyan-500 focus:ring-cyan-500 resize-none" ref={copilotTextareaRef} placeholder="Start typing for content autosuggestion." value={articleOutline} rows={5} autosuggestionsConfig={{ textareaPurpose: articleTitle, chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 5, stop: ["\n", ".", ","], }, }, insertionApiConfig: {}, }, debounceTime: 250, }} /> ``` 之後,請前往`/[root]/src/app/createpost/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotPopup } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilPopup`和`CreatePost`元件,如下圖所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL,而`CopilotPopup`則呈現應用程式內聊天機器人,您可以提示您研究文章的任何主題。 ``` export default async function WriteArticle() { return ( <> <Header /> <CopilotKit url="/api/copilotkit"> <CopilotPopup instructions="Help the user research a blog article topic." defaultOpen={true} labels={{ title: "Blog Article Research AI Assistant", initial: "Hi! 👋 I can help you research any topic for a blog article.", }} /> <CreatePost /> </CopilotKit> </> ); } ``` 之後,使用下面的程式碼片段在`/[root]/src/app/components/Comment.tsx`檔案頂部導入`useMakeCopilotReadable` 、 `CopilotKit` 、 `CopilotTextarea`和`HTMLCopilotTextAreaElement`自訂掛鉤。 ``` import { useMakeCopilotReadable, CopilotKit } from "@copilotkit/react-core"; import { CopilotTextarea, HTMLCopilotTextAreaElement, } from "@copilotkit/react-textarea"; ``` 在 Comment 函數內的狀態變數下方,新增以下程式碼,程式碼使用`useMakeCopilotReadable`掛鉤將貼文內容新增為評論內容自動建議的上下文。 ``` useMakeCopilotReadable( "Blog article content: " + JSON.stringify(articleContent) ); const copilotTextareaRef = useRef<HTMLCopilotTextAreaElement>(null); ``` 然後將CopilotTextarea元件加入評論表單中,並使用`CopilotKit`包裹表單,如下所示。 ``` <CopilotKit url="/api/copilotkit"> <form action={""} className="border border-teal-500 rounded-md p-3 mb-4"> <textarea id="content" name="content" placeholder="Add a comment..." rows={3} onChange={(e) => setComment(e.target.value)} value={comment} className="hidden" /> <CopilotTextarea className="p-4 w-full rounded-lg mb-2 border text-sm border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:border-cyan-500 focus:ring-cyan-500 resize-none" ref={copilotTextareaRef} placeholder="Start typing for content autosuggestion." onChange={(event) => setComment(event.target.value)} rows={5} autosuggestionsConfig={{ textareaPurpose: articleContent, chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 5, stop: ["\n", ".", ","], }, }, insertionApiConfig: {}, }, debounceTime: 250, }} /> <div className="flex justify-between items-center mt-5"> <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded"> Submit </button> </div> </form> </CopilotKit> ``` 之後,執行開發伺服器並導航到 http://localhost:3000/createpost。您應該會看到彈出的應用程式內聊天機器人和 CopilotTextarea 已整合到部落格中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0j5ly5l5cf0ldaf3hwgx.png) 恭喜!您已成功將 CopilotKit 新增至部落格前端**。** ### **將 CopilotKit 後端加入博客** 在這裡,我將引導您完成部落格與 CopilotKit 後端的整合過程,CopilotKit 後端處理來自前端的請求,並提供函數呼叫和各種 LLM 後端(例如 GPT)。 此外,我們將整合一個名為 Tavily 的人工智慧代理,它可以研究網路上的任何主題。 首先,在根目錄中建立一個名為`.env.local`的檔案。然後在保存`ChatGPT`和`Tavily` Search API 金鑰的檔案中加入下面的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API key" TAVILY_API_KEY="Your Tavily Search API key" ``` 若要取得 ChatGPT API 金鑰,請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ei04w6fadsmalbjaocun.png) 若要取得 Tavilly Search API 金鑰,請導覽至 https://app.tavily.com/home ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqbqb5wvrnkv1vc8z7hf.png) 之後,轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中,建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中,建立一個名為`research.ts`的檔案。然後導航到[該 Research.ts gist 文件](https://gist.github.com/TheGreatBonnie/58dc21ebbeeb8cbb08df665db762738c),複製程式碼,並將其新增至**`research.ts`**檔案中 接下來,在`/[root]/src/app/api/copilotkit`資料夾中建立一個名為`route.ts`的檔案。該文件將包含設定後端功能來處理 POST 請求的程式碼。它有條件地包括對給定主題進行研究的“研究”操作。 現在在文件頂部導入以下模組。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit. import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research. import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata. ``` 在上面的程式碼下面,定義一個執行時間環境變數和一個名為`researchAction`的函數,該函數使用下面的程式碼研究某個主題。 ``` // Define a runtime environment variable, indicating the environment where the code is expected to run. export const runtime = "edge"; // Define an annotated function for research. This object includes metadata and an implementation for the function. const researchAction: AnnotatedFunction<any> = { name: "research", // Function name. description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description. argumentAnnotations: [ // Annotations for arguments that the function accepts. { name: "topic", // Argument name. type: "string", // Argument type. description: "The topic to research. 5 characters or longer.", // Argument description. required: true, // Indicates that the argument is required. }, ], implementation: async (topic) => { // The actual function implementation. console.log("Researching topic: ", topic); // Log the research topic. return await researchWithLangGraph(topic); // Call the research function and return its result. }, }; ``` 然後在上面的程式碼下加入下面的程式碼來定義處理POST請求的非同步函數。 ``` // Define an asynchronous function that handles POST requests. export async function POST(req: Request): Promise<Response> { const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions. // Check if a specific environment variable is set, indicating access to certain functionality. if (process.env["TAVILY_API_KEY"]) { actions.push(researchAction); // Add the research action to the actions array if the condition is true. } // Instantiate CopilotBackend with the actions defined above. const copilotKit = new CopilotBackend({ actions: actions, }); // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter. return copilotKit.response(req, new OpenAIAdapter()); } ``` 恭喜!您已成功將 CopilotKit 後端新增至 Blog **。** **使用 Supabase 將資料庫整合到博客** ------------------------- 在本節中,我將引導您完成將部落格與 Supabase 資料庫整合以插入和獲取部落格文章和評論資料的過程。 首先,導覽至[supabase.com](http://supabase.com/)並點擊主頁上的「啟動您的專案」按鈕。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qu4h1xuhvkbtttqvry1o.png) 然後新建一個專案,名為AiBloggingPlatform,如下圖所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/01uq8s2l9yoa6cvpmocl.png) 建立專案後,將 Supabase URL 和 API 金鑰新增至`env.local`檔案中的環境變數中,如下所示。 ``` NEXT_PUBLIC_SUPABASE_URL=”Your Supabase URL” NEXT_PUBLIC_SUPABASE_ANON_KEY=”Your Supabase API Key” ``` ### **為部落格設定 Supabase 身份驗證** 在這裡,我將引導您完成為部落格設定身份驗證的過程,使用戶能夠註冊、登入或登出。 首先,前往`/[root]/src/`並建立一個名為`utils`資料夾。在`utils`資料夾中,建立一個名為`supabase`的資料夾。 然後在`supabase`資料夾中建立兩個名為`client.ts`和`server.ts`檔案。 之後,導航到此[supabase 文件連結](https://supabase.com/docs/guides/auth/server-side/nextjs#:~:text=Write%20utility%20functions%20to%20create%20Supabase%20clients),複製此處提供的程式碼,並將其貼上到您在`supabase`資料夾中建立的相應文件中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d99g065wf471fag7rbjs.png) 接下來,在專案根目錄中建立一個名為`middleware.ts`的文件,並在`/[root]/src/utils/supabase`資料夾中建立另一個同名文件。 之後,導航到此[supabase 文件連結](https://supabase.com/docs/guides/auth/server-side/nextjs#:~:text=4-,Hook%20up%20middleware,-Create%20a%20middleware),複製此處提供的程式碼,並將其貼上到相應的`middleware.ts`文件中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo21y007yjpw6w50xb9l.png) 接下來,前往`/[root]/src/app/login`資料夾並建立一個名為`actions.ts`的檔案。之後,導航到此[supabase 文件連結](https://supabase.com/docs/guides/auth/server-side/nextjs#:~:text=5-,Create%20a%20login%20page,-Create%20a%20login),複製此處提供的程式碼,並將其貼上到`actions.ts` 。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q1ql5mf0dhqyyli9dipm.png) 之後,更改電子郵件範本以支援身份驗證流程。為此,請前往 Supabase 儀表板中的[驗證範本](https://supabase.com/dashboard/project/_/auth/templates)頁面。 在`Confirm signup`模板中,將`{{ .ConfirmationURL }}`更改為`{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=signup`如下所示,然後按一下儲存按鈕。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p9n8n4wdycoqnx3l41rn.png) 之後,建立路由處理程序以使用電子郵件進行身份驗證確認**。**為此\*\*,請前往\*\* `/[root]/src/app/`並建立一個名為`auth`的資料夾。然後在`auth`資料夾中建立一個名為`confirm`資料夾。 在`confirm`資料夾中,建立一個名為`route.ts`檔案並導航到此[supabase文件連結](https://supabase.com/docs/guides/auth/server-side/nextjs#:~:text=Create%20a%20route%20handler%20for%20Auth%20confirmation),複製那裡提供的程式碼,並將其貼到`route.ts`檔案中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mws1datksq4dml3a8z8n.png) 之後,請前往`/[root]/src/app/login/page.tsx`檔案並使用下面的程式碼片段匯入 Supabase `signup`和`login`功能。 ``` import { login, signup } from "./actions"; ``` 在註冊/登入表單中,按一下登入和註冊按鈕時,使用 formAction 呼叫 Supabase `signup`和`login`函數,如下所示。 ``` <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded" formAction={login}> Log in </button> <button className="bg-blue-500 text-white font-bold py-2 px-4 rounded" formAction={signup}> Sign up </button> ``` 之後,執行開發伺服器並導航至[http://localhost:3000/login](http://localhost:3000/createpost) 。如下所示新增電子郵件和密碼,然後按一下「註冊」按鈕。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/37ee0ii966uhhpi8lqz8.png) 然後轉到您用於註冊的電子郵件的收件匣,然後按一下確認您的電子郵件按鈕,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekukm36uhh833uuhg1k3.png) 之後,請前往 Supabase 儀表板中的[「身份驗證用戶」](https://supabase.com/dashboard/project/_/auth/users)頁面,您應該會看到新建立的用戶,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qmv02jptpsn9k06ytkri.png) 接下來,設定註銷功能。為此,請前往`/[root]/src/app`並建立一個名為`logout`的資料夾。然後建立一個名為`route.ts`的檔案並將以下程式碼加入該檔案。 ``` // Server-side code "use server"; // Importing Next.js functions import { revalidatePath } from "next/cache"; import { redirect } from "next/navigation"; // Importing Supabase client creation function from utils import { createClient } from "@/utils/supabase/server"; // Exporting the logout function export async function logout() { // Creating a Supabase client instance const supabase = createClient(); // Signing out of Supabase auth const { error } = await supabase.auth.signOut(); // If there's an error, redirect to the error page if (error) { redirect("/error"); } // Revalidate the "/" path for the "layout" cache revalidatePath("/", "layout"); // Redirect to the homepage redirect("/"); } ``` 之後,請前往`/[root]/src/app/components/Header.tsx`檔案並使用下面的程式碼片段匯入 Supabase 登出功能。 ``` import { logout } from "../logout/actions"; ``` 然後在action參數中加入註銷功能,如下所示。 ``` <form action={logout}> <button className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " type="submit"> Logout </button> </form> ``` 如果按一下「登出」按鈕,已登入的使用者將被登出。 ### **設定部落格的使用者角色和權限** 在這裡,我將引導您完成設定使用者角色和權限的過程,以控制不同使用者可以在部落格上執行的操作。 首先,前往`/[root]/src/app/components/Header.tsx`檔案並導入 Supabase createClient 函數。 ``` import { createClient } from "@/utils/supabase/client"; ``` 然後導入`useState`和`useEffect`掛鉤,並使用下面的程式碼片段定義一個名為 user 的類型。 ``` import { useEffect, useState } from "react"; type User = {}; ``` 在 Header 功能元件內,新增以下程式碼,程式碼使用`useState`掛鉤來儲存`user`和`admin`資料,並使用`useEffect`掛鉤在元件安裝時從 Supabase auth 取得使用者資料。 `getUser`函數檢查錯誤並相應地設定使用者和管理員狀態。 ``` // State variables for user and admin const [user, setUser] = useState<User | null>(null); const [admin, setAdmin] = useState<User | null>(null); // useEffect hook to fetch user data on mount useEffect(() => { // Define an async function to get the user async function getUser() { // Create a Supabase client instance const supabase = createClient(); // Get the user data from Supabase auth const { data, error } = await supabase.auth.getUser(); // If there's an error or no user data, log a message if (error || !data?.user) { console.log("No User"); } // If user data is available, set the user state else { setUser(data.user); } // Define the email of the signed-up user const userEmail = "email of signed-up user"; // Check if the user is an admin (email matches) if (!data?.user || data.user?.email !== userEmail) { console.log("No Admin"); } // If the user is an admin, set the admin state else { setAdmin(data.user); } } // Call the getUser function getUser(); }, []); // Dependency array is empty, so the effect runs only once on mount ``` 之後,更新導覽列程式碼,如下所示。更新後的程式碼會根據是否有登入使用者或登入使用者是管理員來控制將呈現哪些按鈕。 ``` <div id="navbar-collapse-with-animation" className=""> {/* Navbar content container */} <div className="flex flex-col gap-y-4 gap-x-0 mt-5 sm:flex-row sm:items-center sm:justify-end sm:gap-y-0 sm:gap-x-7 sm:mt-0 sm:ps-7"> {/* Conditional rendering for admin link */} {admin ? ( // If admin is true, show the "Create Post" link <Link className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " href="/createpost"> Create Post </Link> ) : ( // If admin is false, render an empty div <div></div> )} {/* Conditional rendering for user link/logout button */} {user ? ( // If user is true, show the logout button <form action={logout}> <button className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " type="submit"> Logout </button> </form> ) : ( // If user is false, show the "Login" link <Link className="flex items-center font-medium text-gray-500 border-2 border-indigo-600 text-center p-2 rounded-md hover:text-blue-600 sm:border-s sm:my-6 " href="/login"> Login </Link> )} </div> </div> ``` 如果導航到[http://localhost:3000,](http://localhost:3000/)您應該會看到僅呈現「建立貼文」和「登出」按鈕,因為使用者已登入並設定為管理員。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sdhh0x1ln8xl9y1tq7ua.png) 之後,請前往`/[root]/src/app/createpost/page.tsx`檔案並匯入 Supabase createClient 函數。 ``` import { createClient } from "@/utils/supabase/client"; ``` 在 WriteArticle 功能元件中,新增以下程式碼,使用 Supabase createClient 函數取得登入用戶,並驗證用戶的電子郵件是否與設定為管理員的用戶的電子郵件相同。 ``` // Define the email of the user you want to make admin const userEmail = "email of admin user"; // Create a Supabase client instance const supabase = createClient(); // Get the user data from Supabase auth const { data, error } = await supabase.auth.getUser(); // Check for errors or if the user data doesn't match the expected email if (error || !data?.user || data?.user.email !== userEmail) { // If any of the conditions are true, redirect to the homepage redirect("/"); } ``` 現在只有設定為admin的使用者才能存取http://localhost:3000/createpost頁面,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4vrnvib7ikzsgt8webrz.png) ### **使用 Supabase 功能設定插入和取得發布資料** 在這裡,我將引導您完成使用 Supabase 資料庫向部落格設定插入和取得資料功能的過程。 首先,請前往 Supabase 儀表板中的[SQL 編輯器](https://supabase.com/dashboard/project/_/sql/new)頁面。然後將下列 SQL 程式碼新增至編輯器中,然後按一下 CTRL + Enter 鍵建立一個名為articles 的表。 articles 表包含 id、title、slug、content 和created\_at 欄位。 ``` create table if not exists articles ( id bigint primary key generated always as identity, title text, slug text, content text, created_at timestamp ); ``` 建立表格後,您應該會收到一條成功訊息,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dd3xgg0o8ygztkab3cir.png) 之後,請前往`/[root]/src/utils/supabase`資料夾並建立一個名為`AddArticle.ts`的檔案。然後將以下程式碼新增至該檔案中,將部落格文章資料插入 Supabase 資料庫。 ``` // Server-side code "use server"; // Importing Supabase auth helpers and Next.js functions import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"; import { cookies } from "next/headers"; import { redirect } from "next/navigation"; // Exporting the addArticle function export async function addArticle(formData: any) { // Extracting form data const title = formData.get("title"); const content = formData.get("content"); const slug = formData .get("title") .split(" ") .join("-") .toLowerCase() .replace(/[^a-zA-Z0-9-]/g, ""); // Generating a slug from the title const created_at = formData.get(new Date().toDateString()); // Getting the current date // Creating a cookie store const cookieStore = cookies(); // Creating a Supabase client instance with cookie store const supabase = createServerComponentClient({ cookies: () => cookieStore }); // Inserting data into the "articles" table const { data, error } = await supabase.from("articles").insert([ { title, content, slug, created_at, }, ]); // Handling errors if (error) { console.error("Error inserting data", error); return; } // Redirecting to the homepage redirect("/"); // Returning a success message return { message: "Success" }; } ``` 接下來,前往`/[root]/src/app/components/Post.tsx`檔案並導入 addArticle 函數。 ``` import { addArticle } from "@/utils/supabase/AddArticle"; ``` 然後加入`addArticle`函數作為表單動作參數,如下所示。 ``` <form action={addArticle} className="w-full h-full gap-10 flex flex-col items-center p-10"> </form> ``` 之後,導覽至 http://localhost:3000/createpost 並向右側的聊天機器人提供類似「研究有關 JavaScript 框架的部落格文章主題」的提示。 聊天機器人將開始研究該主題,然後產生部落格標題和大綱,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w3i5ndwct44094iczrpo.png) 當您開始在 CopilotKitTextarea 上書寫時,您應該會看到內容自動建議,如下所示。 {% 嵌入 https://youtu.be/2oMNV1acKIs %} 如果內容符合您的喜好,請將其複製並貼上到 Quill 富文本編輯器。然後開始編輯它,如下所示。 {% 嵌入 https://youtu.be/-r3woCeq4vs %} 然後點擊底部的發布按鈕即可發布文章。前往 Supabase 上專案的儀表板並導航至「表格編輯器」部分。點擊文章表,您應該會看到您的文章資料已插入到 Supabase 資料庫中,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4umd2qijpdt9z3evfkj.png) 接下來,前往`/[root]/src/app/components/Posts.tsx`檔案並導入 createClient 函數。 ``` import { createClient } from "@/utils/supabase/client"; ``` 在 Posts 功能元件內,加入以下程式碼,該程式碼使用 useState 掛鉤來儲存文章資料,並使用 useEffect 掛鉤在元件安裝時從 Supabase 取得文章。 fetchArticles 函數建立一個 Supabase 用戶端實例,取得文章,並在資料可用時更新狀態。 ``` // State variable for articles const [articles, setArticles] = useState<any[]>([]); // useEffect hook to fetch articles on mount useEffect(() => { // Define an async function to fetch articles const fetchArticles = async () => { // Create a Supabase client instance const supabase = createClient(); // Fetch articles from the "articles" table const { data, error } = await supabase.from("articles").select("*"); // If data is available, update the articles state if (data) { setArticles(data); } }; // Call the fetchArticles function fetchArticles(); }, []); // Dependency array is empty, so the effect runs only once on mount ``` 之後,如下所示更新元素程式碼,以在部落格主頁上呈現已發佈的文章。 ``` // Return a div element with a max width, full height, padding, and horizontal margin return ( <div className="max-w-[85rem] h-full px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto"> // Create a grid container with dynamic number of columns based on screen size <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6"> // Map over the articles array and render a Link component for each item {articles?.map((post) => ( <Link // Assign a unique key prop to each Link component key={post.id} // Apply styles for the Link component className="group flex flex-col h-full bg-gray-800 border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 " // Set the href prop to the post slug href={`/${post.slug}`}> // Create a container for the image <div className="aspect-w-16 aspect-h-11"> // Render an Image component with a dynamic src based on the post title <Image className="object-cover h-48 w-96 rounded-xl" src={`(link unavailable){encodeURIComponent( post.title )}`} // Set the width and height props for the Image component width={500} height={500} // Set the alt prop for accessibility alt="Image Description" /> </div> // Create a container for the post title <div className="my-6"> // Render an h3 element with the post title <h3 className="text-xl font-semibold text-white "> {post.title} </h3> </div> </Link> ))} </div> </div> ); ``` 然後導航到<http://localhost:3000> ,您應該會看到您發布的文章,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bpwvh0b3cm7dfrgwixtv.png) 接下來,前往`/[root]/src/app/[slug]/page.tsx`檔案並匯入 createClient 函數。 ``` import { createClient } from "@/utils/supabase/client"; ``` 在導入下方,定義一個名為「getArticleContent」的非同步函數,該函數根據 slug 參數從 supabase 資料庫檢索文章資料,如下所示。 ``` // Define an asynchronous function to retrieve article content async function getArticleContent(params: any) { // Extract the slug parameter from the input params object const { slug } = params; // Create a Supabase client instance const supabase = createClient(); // Query the "articles" table in Supabase // Select all columns (*) // Filter by the slug column matching the input slug // Retrieve a single record (not an array) const { data, error } = await supabase .from("articles") .select("*") .eq("slug", slug) .single(); // Return the retrieved article data return data; } ``` 之後,如下所示更新功能元件Post,以渲染文章內容。 ``` export default async function Post({ params }: { params: any }) { // Fetch the post content using the getArticleContent function const post = await getArticleContent(params); // Return the post component return ( // Fragment component to wrap multiple elements <> // Header component <Header /> // Main container with max width and height <main className="p-3 flex flex-col max-w-6xl mx-auto min-h-screen"> // Post title <h1 className="text-3xl text-white mt-10 p-3 text-center font-serif max-w-2xl mx-auto lg:text-4xl"> {post && post.title} // Display post title if available </h1> // Post metadata (author, date, etc.) <div className="flex justify-between text-white p-3 border-b border-slate-500 mx-auto w-full max-w-2xl text-xs"> <span></span> // Estimated reading time <span className="italic"> {post && (post.content.length / 1000).toFixed(0)} mins read </span> </div> // Post content <div className="p-3 max-w-2xl text-white mx-auto w-full post-content border-b border-slate-500 mb-2" // Use dangerouslySetInnerHTML to render HTML content dangerouslySetInnerHTML={{ __html: post && post.content }}></div> // Comment component <Comment /> </main> </> ); } ``` 導覽至<http://localhost:3000>並點擊部落格主頁上顯示的文章。然後您應該被重定向到文章的內容,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/byfdvwr7anceq09gto1g.png) ### **使用 Supabase 功能設定插入和取得評論資料** 在這裡,我將引導您完成使用 Supabase 資料庫為部落格內容評論設定插入和獲取資料功能的過程。 首先,請前往 Supabase 儀表板中的[SQL 編輯器](https://supabase.com/dashboard/project/_/sql/new)頁面。然後將以下 SQL 程式碼新增至編輯器中,然後按一下 CTRL + Enter 鍵建立一個名為 comments 的表。評論表有 id、content 和 postId 欄位。 ``` create table if not exists comments ( id bigint primary key generated always as identity, postId text, content text, ); ``` 建立表格後,您應該會收到一條成功訊息,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h05jkk1g33ewtupsb5a.png) 之後,請前往`/[root]/src/utils/supabase`資料夾並建立一個名為`AddComment.ts`的檔案。然後將以下程式碼新增至該檔案中,將部落格文章評論資料插入 Supabase 資料庫。 ``` // Importing necessary functions and modules for server-side operations "use server"; import { createServerComponentClient } from "@supabase/auth-helpers-nextjs"; import { cookies } from "next/headers"; import { redirect } from "next/navigation"; // Define an asynchronous function named 'addComment' that takes form data as input export async function addComment(formData: any) { // Extract postId and content from the provided form data const postId = formData.get("postId"); const content = formData.get("content"); // Retrieve cookies from the HTTP headers const cookieStore = cookies(); // Create a Supabase client configured with the provided cookies const supabase = createServerComponentClient({ cookies: () => cookieStore }); // Insert the article data into the 'comments' table on Supabase const { data, error } = await supabase.from("comments").insert([ { postId, content, }, ]); // Check for errors during the insertion process if (error) { console.error("Error inserting data", error); return; } // Redirect the user to the home page after successfully adding the article redirect("/"); // Return a success message return { message: "Success" }; } ``` 接下來,到`/[root]/src/app/components/Comment.tsx`文件,導入 addArticle createClient 函數。 ``` import { addComment } from "@/utils/supabase/AddComment"; import { createClient } from "@/utils/supabase/client"; ``` 然後將postId作為prop參數加入Comment功能元件中。 ``` export default function Comment({ postId }: { postId: any }) {} ``` 在函數內部,新增以下程式碼,程式碼使用`useEffect`掛鉤在元件安裝或`postId`更改時從 Supabase 取得評論和文章內容。 `fetchComments`函數取得所有評論,而`fetchArticleContent`函數則取得具有目前`postId`的文章內容。 ``` useEffect(() => { // Define an async function to fetch comments const fetchComments = async () => { // Create a Supabase client instance const supabase = createClient(); // Fetch comments from the "comments" table const { data, error } = await supabase.from("comments").select("*"); // If data is available, update the comments state if (data) { setComments(data); } }; // Define an async function to fetch article content const fetchArticleContent = async () => { // Create a Supabase client instance const supabase = createClient(); // Fetch article content from the "articles" table // Filter by the current postId const { data, error } = await supabase .from("articles") .select("*") .eq("id", postId) .single(); // If the fetched article ID matches the current postId if (data?.id == postId) { // Update the article content state setArticleContent(data.content); } }; // Call the fetch functions fetchArticleContent(); fetchComments(); }, [postId]); // Dependency array includes postId, so the effect runs when postId changes ``` 然後新增`addComment`函數作為表單操作參數,如下所示。 ``` <form action={addComment} className="border border-teal-500 rounded-md p-3 mb-4"> <textarea id="content" name="content" placeholder="Add a comment..." rows={3} onChange={(e) => setComment(e.target.value)} value={comment} className="hidden" /> <CopilotTextarea className="p-4 w-full rounded-lg mb-2 border text-sm border-gray-600 bg-gray-700 text-white placeholder-gray-400 focus:border-cyan-500 focus:ring-cyan-500 resize-none" ref={copilotTextareaRef} placeholder="Start typing for content autosuggestion." onChange={(event) => setComment(event.target.value)} rows={5} autosuggestionsConfig={{ textareaPurpose: articleContent, chatApiConfigs: { suggestionsApiConfig: { forwardedParams: { max_tokens: 5, stop: ["\n", ".", ","], }, }, insertionApiConfig: {}, }, debounceTime: 250, }} /> <input type="text" id="postId" name="postId" value={postId} className="hidden" /> <div className="flex justify-between items-center mt-5"> <button type="submit" className="bg-blue-500 text-white font-bold py-2 px-4 rounded"> Submit </button> </div> </form> ``` 在表單元素下方,新增以下用於呈現貼文評論的程式碼。 ``` {comments?.map( (postComment: any) => postComment.postId == postId && ( <div key={postComment.id} className="flex p-4 border-b dark:border-gray-600 text-sm"> <div className="flex-shrink-0 mr-3"> <Image className="w-10 h-10 rounded-full bg-gray-200" src={`https://source.unsplash.com/featured/?${encodeURIComponent( "Silhouette" )}`} width={500} height={500} alt="Profile Picture" /> </div> <div className="flex-1"> <div className="flex items-center mb-1"> <span className="font-bold text-white mr-1 text-xs truncate"> Anonymous </span> </div> <p className="text-gray-500 pb-2">{postComment.content}</p> </div> </div> ) )} ``` 接下來,前往`/[root]/src/app/[slug]/page.tsx`檔案並將 postId 作為 prop 新增至 Comment 元件。 ``` <Comment postId={post && [post.id](http://post.id/)} /> ``` 前往已發佈的文章內容頁面並開始在文字區域中輸入評論。您應該在鍵入時獲得內容自動建議。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m6br70wf3mhxzovgfet.png) 然後點擊提交按鈕以加入您的評論。前往 Supabase 上專案的儀表板並導航到表格編輯器部分。點擊評論表,您應該會看到您的評論資料已插入到 Supabase 資料庫中,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3j9c6cy82cw9fcao2pe9.png) 返回您發表評論的文章內容頁面,您應該會看到您的評論,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n98o9kxqnyzm90tzvw40.png) 恭喜!您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具,可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣,還是對複雜任務的自動化感興趣,CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中,您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼:https://github.com/TheGreatBonnie/aiblogapp --- 原文出處:https://dev.to/copilotkit/im-building-an-ai-powered-blog-nextjs-langchain-supabase-5145

我在 20 年內創辦了 30 家新創公司

我在 20 年內創辦了 30 家新創公司。 創投支援、引導、應用程式、SaaS、B2B、B2C。 我後悔犯過的所有錯誤: 1. 做消費者應用程式。 ============ 這裡的失敗率是 B2B 失敗率的 100 倍,幾乎是中樂透。 2. 籌集創投資金。 ========== 當我們籌集第一輪資金時,我感覺就像馬克祖克柏一樣。所有採訪我們的記者。感覺就像一場夢。 最終,大多數這些新創公司都因過早獲得資金而失敗。 3. 招聘太早。 ======== 此前,新創公司對大型團隊感到自豪——這是當時成長的關鍵指標。 創辦人應該完成 PMF 之前的大部分工作。 員工和承包商不會對您的專案有足夠的熱愛和熱情。 4.忽略搜尋引擎優化。 =========== 我的網路中沒有人做過搜尋引擎優化。我們都認為這已經太晚了,所以我們一直推遲它。 5.忽視內容行銷。 ========= 從來沒有認真對待過部落格。大錯。 6.社群媒體行銷。 ========= 這是我最大的遺憾。我一年前開始使用推特。現在已經有2萬粉絲了。如果我從20年前開始會怎樣?現在我可以有 100 萬粉絲嗎?我想是這樣。 7. 跳過創意驗證。 ========== 我總是為觀眾假設。預測他們需要什麼。這幾乎從未被證明是真的。 我最好的專案是那些我認為會失敗的專案,而失敗的專案一開始就是我最大的希望。 8. 招募經理。 ======== 我還沒有在新創公司中見過任何有用的經理。 他們可能對公司有用,但對新創公司來說,我應該只僱用實干家。 9. 追逐投資者。 ========= 對於每家新創公司,我會花 40% 的時間進行融資。 在大多數情況下我都會成功,但代價是什麼? 我已經兩年沒有與投資者進行過一次接觸了,但是風投們來敲我的門,因為我有很好的吸引力,他們每天都在尋找這樣的專案。 10.聘請專業開發人員。 ============ 對於新創公司來說,沒有什麼比專業開發團隊更有效率的了。 如今,我的 1 位全端開發人員在專案上取得的進展比當時 12 人團隊多了 5 倍。 不惜一切代價避免「團隊」。 11. 僱用我不想擁抱的人。 ============== 我的共同創辦人、一位丹麥老人在 2015 年對我說過這句話。 12. 押注於合作夥伴。 ============ 我曾多次與價值數十億美元的大型公司和不同的新創公司合作。 他們承諾提供巨大的東西,數以百萬計的用戶,但最終只是浪費你的時間,破壞焦點,轉移優先級,讓你花費無數的錢來提高安全性和合規性,最終沒有帶來任何使用者/金錢。 13. 閃亮的物體。 ========== 我被 crypt0 的炒作所迷惑。變得超級富有,然後失去了一切。 浪費了很多年。看到人類是多麼的欺騙和貪婪,甚至是我自己的伴侶,我幾乎感到沮喪。 14. 堅持一個糟糕的專案太久。 ================ 在多年沒有吸引力後,我仍然相信專案。 我以為有一天,會發生一些神奇的事情,一切都會好轉。這只是浪費時間。 15. 參加技術會議。 =========== 這完全是浪費時間。 那裡的大多數人都是公司的「好」員工,他們被派到那裡作為對公司忠誠的額外福利。 16. Scrum 是一個騙局。 ================ 如果我的團隊每天早上都必須像幼兒園的孩子一樣被問題困擾,那麼事情最終會失敗。我能做的唯一一件好事是和那些成年人、可以自己管理自己的事情的人在一起。我們只需透過聊天就目標和計劃同步完成所有事情。 17. 外包開發和行銷。 ============ 賣家的態度很好,但結果卻不好。 新創公司是如此困難,以至於外部人幾乎沒有機會為他們做好工作。 18. 從 B2B 領域的免費方案開始。 ==================== 免費專案吸引了完全錯誤的人群,他們提供的回饋只是為了取悅其他「免費」人群。然而,「付費」用戶卻截然不同,並且有不同的需求。 有幾次,我一開始沒有免費版本,沒有銷售,所以後來我加入了免費版本。但這也是一個錯誤。如果沒有人願意為我的產品付費,我就必須修復它或為它尋找其他受眾。 19. 從頭開始編寫程式碼。 ============== 我的團隊將在前 3 個月內編寫基本的內容,例如身份驗證、管理面板、cruds 等。 這是對時間的巨大浪費。 當我開始使用樣板時,速度提高了 10 倍。 20. 與家人和朋友相處的時間很少。 ================== 我工作太多了。根本沒有放假。 這對我的創造力非常有破壞性。一旦我開始休息,我就變得更有創造力。 質>數量。 就是這樣。 我每天都在[twitter.com/johnrushx](https://twitter.com/johnrushx)分享我的經驗 [在這裡查看我的所有專案](https://johnrush.me/) --- 原文出處:https://dev.to/johnrushx/i-built-30-startups-in-20-years-3j41

使用 NextJS 和 Wing 建立您自己的 ChatGPT 圖形客戶端 🤯

--- 標題:使用 NextJS 和 Wing 建立您自己的 ChatGPT 圖形客戶端 🤯 描述:使用 Winglang 和 NextJS 建立的 ChatGPT 客戶端應用程式 canonical\_url:https://www.winglang.io/blog/2024/05/16/chatgpt-client-with-nextjs-and-wing 發表:真實 --- 長話短說 ---- 在本文結束時,您將使用 Wing 和 Next.js 建置並部署 ChatGPT 用戶端。 該應用程式可以在本地執行(在本地雲端模擬器中)或將其部署到您自己的雲端提供者。 ![舞蹈](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1sm2cj4sbcm4skp0ho23.gif) --- 介紹 -- 建置 ChatGPT 用戶端並將其部署到您自己的雲端基礎架構是確保對資料進行控制的好方法。 將 LLM 部署到您自己的雲端基礎架構可為您的專案提供隱私和安全性。 有時,在使用 OpenAI 的 ChatGPT 等專有 LLM 平台時,您可能會擔心資料在遠端伺服器上儲存或處理,這可能是由於輸入平台的資料的敏感度或其他隱私原因。 在這種情況下,將 LLM 自託管到您的雲端基礎架構或在您的電腦上本地執行可以讓您更好地控制資料的隱私和安全性。 > [Wing](https://git.new/wing-repo)是一種面向雲端的程式語言,可讓您建置和部署基於雲端的應用程式,而無需擔心底層基礎架構。 它允許您使用相同的語言定義和管理雲端基礎架構和應用程式程式碼,從而簡化了您在雲端上建置的方式。 Wing 與雲端無關——用它建置的應用程式可以編譯並部署到各種雲端平台。 > {% cta https://git.new/wing-repo %} 看 ⭐ Wing {% endcta %} [![給我們一顆星星](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rg63klimgm7s0aw72rn2.png)](https://git.new/wing-repo) --- 讓我們開始吧! ------- 要繼續操作,您需要: - 對 Next.js 有一定了解 - 在您的機器上[安裝 Wing](https://www.winglang.io/docs/) 。如果您不知道如何操作,請不要擔心。我們將在這個專案中一起討論它。 - 取得您的 OpenAI API 金鑰。 建立您的專案 ------ 首先,您需要在電腦上安裝 Wing。執行以下命令: ``` npm install -g winglang ``` 透過檢查版本確認安裝: ``` wing -V ``` ### 建立您的 Next.js 和 Wing 應用程式。 ``` mkdir assistant cd assistant npx create-next-app@latest frontend mkdir backend && cd backend wing new empty ``` 我們已在 Assistant 目錄中成功建立了 Wing 和 Next.js 專案。我們的 ChatGPT 用戶端的名稱是 Assistant。聽起來很酷,對吧? 前端和後端目錄分別包含我們的 Next 和 Wing 應用程式。 `wing new empty`建立三個檔案: `package.json` 、 `package-lock.json`和`main.w` 。後者是應用程式的入口點。 ### 在 Wing 模擬器中本地執行您的應用程式 Wing 模擬器可讓您在本機電腦內執行程式碼、編寫單元測試和偵錯程式碼,而無需部署到實際的雲端供應商,從而幫助您更快地進行迭代。 使用以下命令在本機上執行您的 Wing 應用程式: ``` wing it ``` 您的 Wing 應用程式將在`localhost:3000`上執行。 ![安慰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n5ytrntrz7lc5225w8w8.png) 設定您的後端 ------ - 讓我們安裝 Wing 的 OpenAI 和 React 函式庫。 OpenAI 庫提供了與 LLM 互動的標準介面。 React 程式庫可讓您將 Wing 後端連接到 Next 應用程式。 ``` npm i @winglibs/openai @winglibs/react ``` - 將這些套件匯入到`main.w`檔案中。我們還導入需要的所有其他庫。 ``` bring openai bring react bring cloud bring ex bring http ``` `bring`是 Wing 中的導入語句。這樣想,Wing 使用`bring`來實現與 JavaScript 中`import`相同的功能。 `cloud`是 Wing 的雲端庫。它公開了雲端 API、儲存桶、計數器、網域、端點、函數和更多雲端資源的標準介面。 `ex`是用於與表格和雲端 Redis 資料庫介面的標準庫, `http`用於呼叫不同的 HTTP 方法 - 從遠端資源發送和檢索資訊。 取得您的 OpenAI API 金鑰 ------------------ 我們將在我們的應用程式中使用`gpt-4-turbo`但您可以使用任何 OpenAI 模型。 - 如果您還沒有[OpenAI](https://platform.openai.com/signup)帳戶,請建立一個。若要建立新的 API 金鑰,請前往[platform.openai.com/api-keys](http://platform.openai.com/api-keys)並選擇**建立新金鑰。** ![OpenAI 金鑰](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9645jxsf1fj8902iwnr7.png) - 設定**名稱**、**專案**和**權限,**然後按一下**建立金鑰。** ![OpenAI Key2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yng28wns7esezf94t3uq.png) 初始化 OpenAI ---------- 建立一個`Class`來初始化您的 OpenAI API。我們希望它可以重複使用。 我們將向`Assistant`類別加入`personality` ,以便在向 AI 助手傳遞提示時可以指定 AI 助手的個性。 ``` let apiKeySecret = new cloud.Secret(name: "OAIAPIKey") as "OpenAI Secret"; class Assistant { personality: str; openai: openai.OpenAI; new(personality: str) { this.openai = new openai.OpenAI(apiKeySecret: apiKeySecret); this.personality = personality; } pub inflight ask(question: str): str { let prompt = `you are an assistant with the following personality: ${this.personality}. ${question}`; let response = this.openai.createCompletion(prompt, model: "gpt-4-turbo"); return response.trim(); } } ``` Wing 分別使用`preflight`和`inflight`概念來統一基礎設施定義和應用程式邏輯。 **預檢**程式碼(通常是基礎設施定義)在編譯時執行一次,而執行**中**程式碼將在執行時執行以實現應用程式的行為。 雲端儲存桶、佇列和 API 端點是預檢的一些範例。定義預檢時不需要新增預檢關鍵字,Wing 預設知道這一點。但對於飛行塊,您需要在其中加入“飛行”一詞。 > 上面的程式碼中有一個飛行中的區塊。 Inflight 區塊是您編寫非同步執行時間程式碼的地方,這些程式碼可以透過其 inflight API 直接與資源互動。 > 測試和儲存雲端秘密 --------- 讓我們來看看如何保護我們的 API 金鑰,因為我們肯定要[考慮安全性](https://techhq.com/2022/09/hardcoded-api-keys-jeopardize-data-in-the-cloud/)。 讓我們在後端的根目錄中建立一個`.env`檔案並傳入我們的 API 金鑰: ``` OAIAPIKey = Your_OpenAI_API_key ``` 我們可以在本地引用 .env 檔案來測試 OpenAI API 金鑰,然後由於我們計劃部署到 AWS,因此我們將逐步設定[AWS Secrets Manager](https://docs.aws.amazon.com/secretsmanager/latest/userguide/intro.html) 。 ![AWS 主控台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e2a1nbh0egmjkckxnaov.png) 首先,我們前往 AWS 並登入控制台。如果您沒有帳戶,可以免費建立一個。 ![AWS平台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n937801fzs0lajf2knaq.png) 導覽至 Secrets Manager,讓我們儲存 API 金鑰值。 ![AWS 秘密管理器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scbb1snyzjdoip2nvdpl.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lf79xzn6vfhqylao8iuo.png) 我們已將 API 金鑰儲存在名為`OAIAPIKey`的雲端機密中。複製您的金鑰,我們將跳到終端並連接到現在儲存在 AWS 平台中的金鑰。 ``` wing secrets ``` 現在將您的 API 金鑰貼上為終端中的值。您的密鑰現已正確存儲,我們可以開始與我們的應用程式互動。 --- 將人工智慧的回應儲存在雲端。 -------------- 將人工智慧的回應儲存在雲端可以讓您控制資料。它駐留在您自己的基礎設施上,與 ChatGPT 等專有平台不同,您的資料位於您無法控制的第三方伺服器上。您也可以在需要時檢索這些回應。 讓我們建立另一個類,使用 Assistant 類來傳遞 AI 的個性和提示。我們還將每個模型的回應作為`txt`檔案儲存在雲端儲存桶中。 ``` let counter = new cloud.Counter(); class RespondToQuestions { id: cloud.Counter; gpt: Assistant; store: cloud.Bucket; new(store: cloud.Bucket) { this.gpt = new Assistant("Respondent"); this.id = new cloud.Counter() as "NextID"; this.store = store; } pub inflight sendPrompt(question: str): str { let reply = this.gpt.ask("{question}"); let n = this.id.inc(); this.store.put("message-{n}.original.txt", reply); return reply; } } ``` --- 我們為我們的助理設定了「受訪者」的個性。我們希望它能夠回答問題。您也可以讓前端使用者在發送提示時指定此個性。 每次產生回應時,計數器都會遞增,並且計數器的值會傳遞到用於在雲端中儲存模型回應的`n`變數中。然而,我們真正想要的是建立一個資料庫來儲存來自前端的使用者提示和模型的回應。 讓我們定義我們的資料庫。 定義我們的資料庫 -------- Wing 內建了`ex.Table` - 一個用於儲存和查詢資料的 NoSQL 資料庫。 ``` let db = new ex.Table({ name: "assistant", primaryKey: "id", columns: { question: ex.ColumnType.STRING, answer: ex.ColumnType.STRING } }); ``` --- 我們在資料庫定義中新增了兩列 - 第一列用於儲存使用者提示,第二列用於儲存模型的回應。 建立 API 路由和邏輯 ------------ 我們希望能夠在後端發送和接收資料。讓我們建立 POST 和 GET 路由。 ``` let api = new cloud.Api({ cors: true }); api.post("/assistant", inflight((request) => { // POST request logic goes here })); api.get("/assistant", inflight(() => { // GET request logic goes here })); ``` --- ``` let myAssistant = new RespondToQuestions(store) as "Helpful Assistant"; api.post("/assistant", inflight((request) => { let prompt = request.body; let response = myAssistant.sendPrompt(JSON.stringify(prompt)); let id = counter.inc(); // Insert prompt and response in the database db.insert(id, { question: prompt, answer: response }); return cloud.ApiResponse({ status: 200 }); })); ``` 在 POST 路由中,我們希望將從前端收到的使用者提示傳遞到模型中並獲得回應。提示和回應都將儲存在資料庫中。 `cloud.ApiResponse`可讓您傳送對使用者要求的回應。 新增前端發出 GET 請求時檢索資料庫專案的邏輯。 --- 新增前端發出 GET 請求時檢索資料庫專案的邏輯。 ``` api.get("/assistant", inflight(() => { let questionsAndAnswers = db.list(); return cloud.ApiResponse({ body: JSON.stringify(questionsAndAnswers), status: 200 }); })); ``` 我們的後端已經準備好了。我們在本地雲端模擬器中測試一下。 跑`wing it` 。 讓我們轉到`localhost:3000`並向我們的助理詢問一個問題。 ![助理回應](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ox67623b9vye7o6quqe.png) 我們的問題和助理的回答都已儲存到資料庫中。看一看。 ![表資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ajd94ywkhjw04yb21e2.png) 向前端公開您的 API URL --------------- 我們需要將後端的 API URL 公開給 Next 前端。這就是之前安裝的 React 函式庫派上用場的地方。 ``` let website = new react.App({ projectPath: "../frontend", localPort: 4000 }); website.addEnvironment("API_URL", api.url); ``` 將以下內容加入 Next 應用程式的`layout.js`中。 ``` import { Inter } from "next/font/google"; import "./globals.css"; const inter = Inter({ subsets: ["latin"] }); export const metadata = { title: "Create Next App", description: "Generated by create next app", }; export default function RootLayout({ children }) { return ( <html lang="en"> <head> <script src="./wing.js" defer></script> </head> <body className={inter.className}>{children}</body> </html> ); } ``` 我們現在可以在 Next 應用程式中存取`API_URL` 。 實作前端邏輯 ------ 讓我們實作前端邏輯來呼叫後端。 ``` import { useEffect, useState, useCallback } from 'react'; import axios from 'axios'; function App() { const [isThinking, setIsThinking] = useState(false); const [input, setInput] = useState(""); const [allInteractions, setAllInteractions] = useState([]); const retrieveAllInteractions = useCallback(async (api_url) => { await axios ({ method: "GET", url: `${api_url}/assistant`, }).then(res => { setAllInteractions(res.data) }) }, []) const handleSubmit = useCallback(async (e)=> { e.preventDefault() setIsThinking(!isThinking) if(input.trim() === ""){ alert("Chat cannot be empty") setIsThinking(true) } await axios({ method: "POST", url: `${window.wingEnv.API_URL}/assistant`, headers: { "Content-Type": "application/json" }, data: input }) setInput(""); setIsThinking(false); await retrieveAllInteractions(window.wingEnv.API_URL); }) useEffect(() => { if (typeof window !== "undefined") { retrieveAllInteractions(window.wingEnv.API_URL); } }, []); // Here you would return your component's JSX return ( // JSX content goes here ); } export default App; ``` `retrieveAllInteractions`函數取得後端資料庫中的所有問題和答案。 `handSubmit`函數將使用者的提示傳送到後端。 讓我們加入 JSX 實作。 ``` import { useEffect, useState } from 'react'; import axios from 'axios'; import './App.css'; function App() { // ... return ( <div className="container"> <div className="header"> <h1>My Assistant</h1> <p>Ask anything...</p> </div> <div className="chat-area"> <div className="chat-area-content"> {allInteractions.map((chat) => ( <div key={chat.id} className="user-bot-chat"> <p className='user-question'>{chat.question}</p> <p className='response'>{chat.answer}</p> </div> ))} <p className={isThinking ? "thinking" : "notThinking"}>Generating response...</p> </div> <div className="type-area"> <input type="text" placeholder="Ask me any question" value={input} onChange={(e) => setInput(e.target.value)} /> <button onClick={handleSubmit}>Send</button> </div> </div> </div> ); } export default App; ``` 在本地執行您的專案 --------- 導航到您的後端目錄並使用以下命令在本地執行您的 Wing 應用程式 ``` cd ~assistant/backend wing it ``` 也執行您的 Next.js 前端: ``` cd ~assistant/frontend npm run dev ``` 讓我們看一下我們的應用程式。 ![聊天應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97g8kikxfwwb7ephfdni.png) 讓我們透過 Next 應用程式向 AI 助理詢問幾個開發人員問題。 ![聊天應用程式2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uoz1y9czt0nwwtsesrz.png) 將您的應用程式部署到 AWS -------------- 我們已經了解了我們的應用程式如何在本地執行。 Wing 也允許您部署到包括 AWS 在內的任何雲端提供者。要部署到 AWS,您需要使用您的憑證來設定[Terraform](https://terraform.io/downloads)和[AWS CLI](https://docs.aws.amazon.com/cli/) 。 - 使用`tf-aws`編譯到 Terraform/AWS 。此指令指示編譯器使用 Terraform 作為配置引擎,將所有資源綁定到預設的 AWS 資源集。 ``` cd ~/assistant/backend wing compile --platform tf-aws main.w ``` --- - 執行 Terraform 初始化並應用 ``` cd ./target/main.tfaws terraform init terraform apply ``` --- 注意: `terraform apply`需要一些時間才能完成。 您可以[在此處](https://github.com/NathanTarbert/chatgpt-client-wing-nextjs)找到本教程的完整程式碼。 總結一下 ---- 正如我之前提到的,我們都應該關心我們的應用程式的安全性,建立您自己的 ChatGPT 用戶端並將其部署到您的雲端基礎設施可以為您的應用程式提供一些非常好的[保障](https://docs.aws.amazon.com/whitepapers/latest/aws-overview/security-and-compliance.html#:~:text=Keep%20Your%20data%20safe%20%E2%80%94%20The,compliance%20programs%20in%20its%20infrastructure.)。 我們在本教程中演示了[Wing](https://git.new/wing-repo)如何提供一種簡單的方法來建置可擴展的雲端應用程式,而無需擔心底層基礎設施。 如果您有興趣建立更酷的東西,Wing 擁有一個活躍的開發人員社區,他們可以合作建立雲端願景。我們很高興在那裡見到你。 只需前往我們的[Discord](https://t.winglang.io/discord)打個招呼即可! --- 原文出處:https://dev.to/winglang/building-your-own-chatgpt-graphical-client-with-nextjs-and-wing-29jj

20 多個使用 AI 的專案,具有完整的源程式碼🚀

過去幾天對於人工智慧來說是令人興奮的。 然而,作為開發人員,我們中的許多人還不了解人工智慧的易用性。 今天,我們將介紹您可以使用人工智慧輕鬆建立的精彩專案。無需成為人工智慧專家,每個工具都附帶教學或程式碼演練。 讓我們跳進去吧! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0vxxzizvu643bfpbo1xu.gif) --- 1. [CopilotKit](https://github.com/CopilotKit/CopilotKit) - 在數小時內為您的產品提供 AI Copilot。 ------------------------------------------------------------------------------------ [![副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nzuxjfog2ldam3csrl62.png)](https://github.com/CopilotKit/CopilotKit) 將 AI 功能整合到 React 中是很困難的,這就是 Copilot 的用武之地。一個簡單快速的解決方案,可將可投入生產的 Copilot 整合到任何產品中! 您可以使用兩個 React 元件將關鍵 AI 功能整合到 React 應用程式中。它們還提供內建(完全可自訂)Copilot 原生 UX 元件,例如`<CopilotKit />` 、 `<CopilotPopup />` 、 `<CopilotSidebar />` 、 `<CopilotTextarea />` 。 開始使用以下 npm 指令。 ``` npm i @copilotkit/react-core @copilotkit/react-ui ``` Copilot Portal 是 CopilotKit 提供的元件之一,CopilotKit 是一個應用程式內人工智慧聊天機器人,可查看目前應用狀態並在應用程式內採取操作。它透過插件與應用程式前端和後端以及第三方服務進行通訊。 這就是整合聊天機器人的方法。 `CopilotKit`必須包裝與 CopilotKit 互動的所有元件。建議您也開始使用`CopilotSidebar` (您可以稍後切換到不同的 UI 提供者)。 ``` "use client"; import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; export default function RootLayout({children}) { return ( <CopilotKit url="/path_to_copilotkit_endpoint/see_below"> <CopilotSidebar> {children} </CopilotSidebar> </CopilotKit> ); } ``` 您可以使用此[快速入門指南](https://docs.copilotkit.ai/getting-started/quickstart-backend)設定 Copilot 後端端點。 之後,您可以讓 Copilot 採取行動。您可以閱讀如何提供[外部上下文](https://docs.copilotkit.ai/getting-started/quickstart-chatbot#provide-context)。您可以使用`useMakeCopilotReadable`和`useMakeCopilotDocumentReadable`反應掛鉤來執行此操作。 ``` "use client"; import { useMakeCopilotActionable } from '@copilotkit/react-core'; // Let the copilot take action on behalf of the user. useMakeCopilotActionable( { name: "setEmployeesAsSelected", // no spaces allowed in the function name description: "Set the given employees as 'selected'", argumentAnnotations: [ { name: "employeeIds", type: "array", items: { type: "string" } description: "The IDs of employees to set as selected", required: true } ], implementation: async (employeeIds) => setEmployeesAsSelected(employeeIds), }, [] ); ``` 您可以閱讀[文件](https://docs.copilotkit.ai/getting-started/quickstart-textarea)並查看[演示影片](https://github.com/CopilotKit/CopilotKit?tab=readme-ov-file#demo)。 您可以輕鬆整合 Vercel AI SDK、OpenAI API、Langchain 和其他 LLM 供應商。您可以按照本[指南](https://docs.copilotkit.ai/getting-started/quickstart-chatbot)將聊天機器人整合到您的應用程式中。 基本想法是非常快速地建立人工智慧聊天機器人,而無需在製作任何基於法學碩士的應用程式時費力。 用例是巨大的,作為開發人員,我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 5800 顆星,發布了 200 多個版本,這意味著它們不斷改進。 ![明星副駕駛套件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8i6roafbjxvds26fl35.gif) {% cta https://go.copilotkit.ai/Anmol %} Star CopilotKit ⭐️ {% endcta %} --- ### 🎯 使用 CopilotKit 建立的熱門應用程式。 我們可以使用 CopilotKit 建立許多創新應用程式,所以讓我們探索一些脫穎而出的應用程式! ### ✅ [人工智慧驅動的部落格平台](https://dev.to/copilotkit/how-to-build-an-ai-powered-blogging-platform-nextjs-langchain-supabase-1hdp)。 ![部落格平台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvx995v2lvyujnsavaxx.gif) 您可以閱讀本文,使用`Next.js` 、 `Langchain` 、 `Supabase`和`CopilotKit`來建立這個令人驚嘆的應用程式。 LangChain&Tavily用作網路搜尋人工智慧代理,Supabase用於儲存和檢索部落格平台文章資料,CopilotKit用於將人工智慧整合到應用程式中。 ![演示人工智慧部落格平台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88ni6x3pdno43vani7q9.png) 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredblog)。 ### ✅ [V0.dev 複製](https://dev.to/copilotkit/i-created-a-v0-clone-with-nextjs-gpt4-copilotkit-3cmb)。 ![v0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyutbegrv571lp3i6081.png) 如果您不熟悉,Vercel 的 V0 是一款人工智慧驅動的工具,可讓您根據提示產生 UI,以及許多其他有用的功能。 shadcn 元件現在可以在文件本身的 v0 中進行編輯(如其網站所示)。 ![v0 開發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/951hk0jqrioboe4jxf5i.gif) 您可以使用`Next.js` 、 `GPT4`和`CopilotKit`建立 V0 的克隆。這個詳細的教程名列前 7 名,總的來說,這是一個值得加入到您的作品集中的偉大專案。 簽名頁的產生輸出如下所示。 ![簽名頁](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xu1l5el91x4w62sz7kh.png) 您可以透過點擊右上角的按鈕輕鬆在`React Code`和`UI`之間切換。這麼酷的概念! 您可以檢查[GitHub 儲存庫](https://github.com/Tabintel/v0-copilot-next)。 ### ✅ [人工智慧行銷經理](https://dev.to/copilotkit/build-an-ai-powered-campaign-manager-nextjs-openai-copilotkit-59ii)。 ![競選經理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/moytsjm7lcq1g52sn0ot.gif) 您可以使用`Next.js` 、 `OpenAI` 、 `Radix UI` (用於實現可存取性)、 `Recharts` (用於建立互動式圖表)以及`CopilotKit`來建立這個出色的專案來閱讀本文。 您可以觀看 David 的示範! {% 嵌入 https://youtu.be/gCJpH6Tnj5g %} 如果你想用更少的錢學到更多,這是我最喜歡的一個。 我喜歡它的 UI(一般教學不是這樣),這正是它成為你的編碼清單上的一個乾淨專案的原因:) ![示範動圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt14n0xn3bekl7u5uib1.gif) 您可以查看該應用程式的[現場演示](https://campaign-manager-demo.vercel.app/)。 您可以檢查[GitHub 儲存庫](https://github.com/CopilotKit/campaign-manager-demo)。 ### ✅ [附有人工智慧副駕駛的電子表格應用程式](https://dev.to/copilotkit/build-an-ai-powered-spreadsheet-app-nextjs-langchain-copilotkit-109d)。 ![電子表格應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gexhqf0alwmwguu7kqsv.gif) 您可以閱讀本文,使用`Next.js` 、 `GPT-4` 、 `LangChain`和`CopilotKit`來建立這個很棒的工具。 為了使工作更輕鬆,它使用[React Spreadsheet](https://github.com/iddan/react-spreadsheet)套件為 React 和[Tavily AI](https://tavily.com/)建立簡單的可自訂電子表格作為搜尋引擎,使 AI 代理能夠進行研究並存取即時知識 你可以觀看這個演示! {% 嵌入 https://www.youtube.com/watch?v=kGQ9xl5mSoQ %} 您也可以查看[現場演示](https://spreadsheet-demo-tau.vercel.app/)。我可以肯定地說,這是一個獨特的案例,你可以得到很多啟發。 您可以檢查[GitHub 儲存庫](https://github.com/CopilotKit/spreadsheet-demo)。 ### ✅[與您的履歷聊天](https://dev.to/copilotkit/how-to-build-the-with-nextjs-openai-1mhb)。 ![與履歷聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gdagmyn1tvoa2lwfoqto.gif) 您可以閱讀本文,使用`Next.js` 、 `OpenAI`和`CopilotKit`來建立這個很棒的用例。 您不僅可以使用 ChatGPT 產生履歷,還可以將其匯出為 PDF,甚至可以透過與其對話來進一步改進它。多酷啊,對吧:) ![簡歷聊天演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x6j27yls99cdv219ztwx.png) 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/AIPoweredResumeBuilder)。 ### ✅ [文字到 Powerpoint 應用程式](https://dev.to/copilotkit/how-to-build-ai-powered-powerpoint-app-nextjs-openai-copilotkit-ji2)。 ![文字到 Powerpoint 應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vh01hh3l29qtztri4180.png) 您可以閱讀本文,使用`Next.js` 、 `OpenAI`和`CopilotKit`建立 Text to Powerpoint 應用程式。 這是一個簡單但非常強大的概念,本文也清楚地說明如何在任何幻燈中加入背景圖像。 您可以檢查[GitHub 儲存庫](https://github.com/TheGreatBonnie/aipoweredpresentation)。 ### ✅ [StudyPal:您的人工智慧驅動的個人化學習伴侶](https://dev.to/rajesh-adk-137/studypal-your-ai-powered-personalized-learning-companion-59d)。 ![學習夥伴](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhau3p28cylr25lae5r4.png) 您可以從精選清單中選擇您想要的主題,為個人化的學習旅程奠定基礎。 您需要提供有關您的教育背景的詳細訊息,以便 StudyPal 能夠根據他們當前的知識水平定製材料和練習。 `Additional Details`部分可讓學生指定重點領域,確保內容與其學習目標一致。 您可以閱讀本文,使用`React` 、 `Node`和`CopilotKit`來建立這個很棒的用例。 您可以觀看該應用程式的[演示](https://github-production-user-asset-6210df.s3.amazonaws.com/89499267/328419789-a06b11c6-ffbc-44b6-96b0-648d2a38cd7c.mp4?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAVCODYLSA53PQK4ZA%2F20240512%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20240512T083208Z&X-Amz-Expires=300&X-Amz-Signature=f6fe016e65e167e94b8322b70743a7fb02fed91f2c87c5af7459e1fa022faac2&X-Amz-SignedHeaders=host&actor_id=74038190&key_id=0&repo_id=793889064)。 您可以檢查[GitHub 儲存庫](https://github.com/rajesh-adk-137/StudyPal)。 --- 2.什麼是郎鏈? -------- 其餘專案將與 langchain 和 AI 相關(有些使用 python)。最好稍微了解一下這一點。 LangChain 是用於開發由大型語言模型(LLM)支援的應用程式的框架。 ![朗查恩](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fuo9c2ljruv3c54is10.png) ![朗查恩](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/btgq9o8y1yhjfnrinqqn.png) 總體而言,LangChain 簡化了 LLM 申請生命週期的每個階段。您可以閱讀[官方文件](https://python.langchain.com/docs/get_started/introduction/)以了解更多內容。 如果您想了解有關 langchain 的更多訊息,我建議您觀看 freeCodeCamp 的[本教程](https://www.youtube.com/watch?v=HSZ_uaif57o)。 {% 嵌入 https://www.youtube.com/watch?v=HSZ\_uaif57o %} --- ### 🎯 使用 Langchain/AI/Python 建立的熱門應用程式。 我們可以使用 langchain 建立很多很多高級應用程式,所以讓我們探索一些脫穎而出的應用程式! ### ✅ [Mac 上的語音助理](https://github.com/chidiwilliams/GPT-Automator)- 您的語音控制 Mac 助理。 ![GPT自動機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdzv06jnr3z33s7qll5k.png) 您的語音控制 Mac 助理。 GPT Automator 可讓您使用語音在 Mac 上執行任務。例如,打開應用程式、尋找餐廳、綜合資訊。太棒了:D 它是在倫敦黑客馬拉松期間建構的。 它有兩個主要部分: A。語音命令:它使用本地執行的 Whisper(Buzz 的一個分支)來產生命令。 b.命令到行動:您向配備了我們編寫的自訂工具的 LangChain 代理程式發出命令。這些工具包括使用 AppleScript 控制電腦的作業系統以及使用 JavaScript 控制活動瀏覽器。最後,就像任何優秀的人工智慧一樣,我們讓代理商使用 AppleScript 說出最終結果「{Result}」(如果您以前沒有使用過,請嘗試在 Mac 終端機中輸入「Hello World!」)。 我們製作了一個自訂工具,讓法學碩士使用 AppleScript 控制電腦。提示符是文件字串: ``` @tool def computer_applescript_action(apple_script): """ Use this when you want to execute a command on the computer. The command should be in AppleScript. Here are some examples of good AppleScript commands: Command: Create a new page in Notion AppleScript: tell application "Notion" activate delay 0.5 tell application "System Events" to keystroke "n" using {{command down}} end tell ... Write the AppleScript for the Command: Command: """ p = subprocess.Popen(['osascript', '-'], stdin=subprocess.PIPE, stdout=subprocess.PIPE, stderr=subprocess.PIPE) stdout, stderr = p.communicate(applescript.encode('utf-8')) if p.returncode != 0: raise Exception(stderr) decoded_text = stdout.decode("utf-8") return decoded_text ``` 如果您想知道它是如何運作的,GPT Automator 使用 OpenAI 的 Whisper 將您的音訊輸入轉換為文字。然後,它使用LangChain Agent 選擇一組操作,包括使用OpenAI 的GPT-3(“text-davinci-003”)從提示符號產生AppleScript(用於桌面自動化)和JavaScript(用於瀏覽器自動化)命令,然後執行產生的腳本。 請記住,這不適用於生產用途。該專案執行從自然語言產生的程式碼,可能容易受到提示注入和類似的攻擊。這項工作是作為概念驗證而進行的。 您可以閱讀[安裝指南](https://github.com/chidiwilliams/GPT-Automator?tab=readme-ov-file#instructions)。 讓我們看看一些提示及其作用: ⚡ 求計算結果。 > 提示:“2 + 2 是什麼?” 它將編寫 AppleScript 開啟計算器並輸入 5 \* 5。 ⚡ 尋找附近的餐廳。 > 提示:“查找我附近的餐廳” 它將打開 Chrome,谷歌搜尋附近的餐廳,解析頁面,然後返回最上面的結果。有時它很厚顏無恥,反而會打開谷歌地圖結果並說「最好的餐廳是谷歌地圖頁面頂部的餐廳」。其他時候,它會打開 Google 上的頂部連結 - 並卡在 Google 可存取性頁面上... 以下是執行時列印到終端的內容: ``` Command: Find a great restaurant near Manchester. > Entering new AgentExecutor chain... I need to search for a restaurant near Manchester. Action: chrome_open_url Action Input: https://www.google.com/search?q=restaurant+near+Manchester Observation: Thought: I need to read the page Action: chrome_read_the_page Action Input: Observation: Accessibility links Skip to main content ... # Shortned for brevity Dishoom Manchester 4.7 (3.3K) · £££ · Indian 32 Bridge St · Near John Rylands Library Closes soon ⋅ 11 pm Stylish eatery for modern Indian fare San Carlo 4.2 (2.8K) · £££ · Italian 42 King St W · Near John Rylands Library Closes soon ⋅ 11 pm Posh, sceney Italian restaurant Turtle Bay Manchester Northern Quarter 4.7 Thought: I now know the final answer Final Answer: The 15 best restaurants in Manchester include El Gato Negro, Albert's Schloss, The Refuge, Hawksmoor, On The Hush, Dishoom, Banyan, Zouk Tea Room & Grill, Edison Bar, MyLahore Manchester, Turtle Bay Manchester Northern Quarter, San Carlo, The Black Friar, Mana, and Tast Cuina Catalana. ``` 我不能保證這些餐廳值得,請自行承擔風險。哈哈! ⚡ 如果您要求 GPT Automator 擦除您的計算機,它會的。 是的,如果您要求的話,它會擦除您的電腦! 我內心的自我尖叫著要這麼做:) 您可以在這裡查看完整的演示! {% 嵌入 https://www.loom.com/share/7bfa82c604f3412fbbb04191ce2ae12f %} 您可以在[Chidi 的部落格](https://chidiwilliams.com/posts/gpt-automator)上閱讀更多內容。 它更像是一個業餘專案,因此他們在 GitHub 上有大約 200 個 star,但它非常酷。 您可以檢查[GitHub 儲存庫](https://github.com/chidiwilliams/GPT-Automator)。 ✅ [Instrukt](https://github.com/blob42/Instrukt) - 終端中整合人工智慧。 ------------------------------------------------------------- ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsk64pf5yuosui91tmz9.png) Instrukt是一個基於終端的AI整合環境。它提供了一個平台,用戶可以: - 建立並指導模組化人工智慧代理。 - 產生問答的文件索引。 - 建立工具並將其附加到任何代理程式。 用自然語言指導它們,並且為了安全起見,在安全容器(目前使用 Docker 實作)中執行它們,以在其專用的沙盒空間中執行任務。 使用`Langchain` 、 `Textual`和`Chroma`建構。 開始使用以下命令。 ``` pip install instrukt[all] ``` ![指示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3aza7hnlji7hbi2o0js.gif) 有許多令人興奮的功能,例如: - 基於終端的介面,讓強力鍵盤使用者無需離開鍵盤即可指示 AI 代理。 - 對您的資料建立索引並讓代理程式檢索它以進行問答。您可以使用簡單的 UI 建立和組織索引。 - 索引建立將自動偵測程式語言並相應地優化拆分/分塊策略。 - 在安全的 Docker 容器內執行代理程式以確保安全和隱私。 - 整合的 REPL-Prompt 可實現與代理程式的快速交互,以及用於開發和測試的快速回饋循環。 - 您可以使用自訂命令自動執行重複任務。它還具有內建的提示/聊天歷史記錄。 您可以閱讀有關所有[功能的](https://github.com/blob42/Instrukt?tab=readme-ov-file#features)資訊。 您可以閱讀[安裝指南](https://blob42.github.io/Instrukt/install.html)。 您還可以使用內建的 IPython 控制台來除錯和內省代理,這是一個簡潔的小功能。 ![控制台除錯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qaan8np68e3fk1yueexm.png) Instrukt 已獲得 AGPL 許可證,這意味著任何人都可以將其用於任何目的。 可以肯定地說,Instrukt 是您觸手可及的終端人工智慧指揮官。 這是一個新專案,因此他們在 GitHub 上有大約 200 多顆星,但用例非常好。 您可以檢查[GitHub 儲存庫](https://github.com/blob42/Instrukt)。 ✅ [ChatFiles](https://github.com/guangzhengli/ChatFiles) - 上傳您的檔案並與其對話。 ----------------------------------------------------------------------- ![聊天文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lhimajsma8ijyzeknmlg.png) 文件聊天機器人 — 多個文件,由 GPT / Embedding 提供支援。你可以上傳任何文件並與之對話,考慮到他們使用了另一個著名的開源專案,UI 非常好。 它在底層使用 Langchain 和[Chatbot-ui](https://github.com/mckaywrigley/chatbot-ui) 。使用 Nextjs、TypeScript、Tailwind 和 Supabase(向量 DB)建構。 如果您想了解該方法和技術架構,那麼就在這裡! ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zbn7h50k6gwxgz6rkaf.png) 此環境僅用於試用,支援最大檔案大小為 10 MB,這是一個缺點,如果您想要更大的大小,則可以[在本機安裝](https://github.com/guangzhengli/ChatFiles?tab=readme-ov-file#how-to-run-locally)。 他們提供了您可以使用的[入門問題](https://github.com/guangzhengli/ChatFiles/blob/main/doc/Example.md)。您可以查看[現場演示](https://chatfile.vectorhub.org/)。 他們在 GitHub 上有 3k star,並且發布了`v0.3`版本。 您可以檢查[GitHub 儲存庫](https://github.com/guangzhengli/ChatFiles)。 ✅ [具有多代理協作的終極人工智慧自動化 - LangGraph + GPT 研究人員](https://blog.langchain.dev/how-to-build-the-ultimate-ai-automation-with-multi-agent-collaboration/)。 ------------------------------------------------------------------------------------------------------------------------------------------------- LangGraph 是一個使用 LLM 建立有狀態、多參與者應用程式的函式庫。此範例使用 Langgraph 自動化對任何給定主題的深入研究過程。 簡而言之,這個範例展示了人工智慧代理團隊如何協同工作,對給定主題進行從規劃到發布的研究。此範例還將利用領先的自主研究代理[GPT Researcher](https://github.com/assafelovic/gpt-researcher) ,我已在過去的一篇文章中介紹過該代理。 研究團隊由七名法學碩士代理人: ⚡ `Chief Editor` - 監督研究過程並管理團隊。這是使用 LangGraph 協調其他代理程式的「主」代理程式。該代理充當主要的 LangGraph 介面。 ⚡ `GPT Researcher` - 專門的自主代理,對給定主題進行深入研究。 ⚡ `Editor` - 負責規劃研究大綱和結構。 ⚡ `Reviewer` - 根據一組標準驗證研究結果的正確性。 ⚡ `Reviser` - 根據審查者的回饋修改研究結果。 ⚡ `Writer` - 負責編譯和撰寫最終報告。 ⚡ `Publisher` - 負責以各種格式發布最終報告。 自動化過程基於以下階段(架構),文章中清楚地顯示了這一點。 - 策劃階段。 - 資料收集和分析。 - 審查和修訂。 - 寫作並提交。 - 出版品. ![建築學](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zwpvlf859m9c6v8mttxk.png) 您可以閱讀有關正在發生的事情的[詳細步驟文件](https://github.com/assafelovic/gpt-researcher/tree/master/multi_agents?ref=blog.langchain.dev#steps)。 助手的最終運作將產生 Markdown、PDF 和 Docx 等格式的最終研究報告。 您可以閱讀這篇文章,其中介紹[如何透過多代理協作來建立終極人工智慧自動化](https://blog.langchain.dev/how-to-build-the-ultimate-ai-automation-with-multi-agent-collaboration/),其中 Wix 研發主管 Assaf Elovic 介紹如何使用 LangGraph 與專業代理團隊建立自主研究助理。它具有易於理解的程式碼範例,並清楚地說明正在發生的事情。開發者必讀! 最好的部分是,如果您想更改研究查詢並自訂報告,只需編輯主目錄中的`task.json`檔案。真的很棒:) 它由 GPT 研究人員負責,擁有 10k 顆星,但自從上次提交是在幾天前以來,它經常更新。 您可以檢查[GitHub 儲存庫](https://github.com/assafelovic/gpt-researcher/tree/master/multi_agents)。 ✅[僚機AI](https://github.com/e-johnstonn/wingmanAI) 。 --------------------------------------------------- ![僚機人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ortnj43j63gx4riqvl4x.png) WingmanAI 是一款功能強大的工具,可與系統和麥克風音訊的即時轉錄進行互動。 它使用 ChatGPT,讓您與文字記錄即時交互,作為機器人的廣泛記憶體基礎,提供獨特的通訊平台。 當您載入指定人員的文字記錄時,機器人甚至可以回答有關過去對話的問題。 所有精彩功能的詳細介紹: ⚡ 它可以轉錄系統輸出和麥克風輸入音頻,讓您以易於閱讀的格式查看即時轉錄。 ⚡ 機器人以令牌有效的方式維護對話記錄,因為只有當前的文字區塊會傳遞給機器人。 ⚡ 您可以與 ChatGPT 支援的機器人聊天,機器人會即時讀取您的文字記錄。 ⚡ 您可以繼續附加到已儲存的記錄中,隨著時間的推移建立一個龐大的資料庫供機器人從中提取。 ⚡ 它允許您保存成績單以供將來使用。您可以稍後隨時加載它們,並且對機器人進行的任何查詢都將與保存的轉錄本的向量資料庫交叉引用,從而為機器人提供更豐富的上下文。 您可以閱讀[安裝說明](https://github.com/e-johnstonn/wingmanAI?tab=readme-ov-file#installation)。 您只需將 OpenAI API 金鑰放入`keys.env`檔案中並執行`main.py` 。 唯一的缺點是該應用程式目前僅與 Windows 相容。 Windows 用戶現在更高興了:) 您可以觀看[完整的示範影片](https://github.com/e-johnstonn/wingmanAI?tab=readme-ov-file#demo)。由於限制,下面所附的 gif 很短(86 秒中只有 30 秒)。 ![30 秒演示 gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gmosnsbwkkb76q83y46i.gif) 我對這個概念感到非常驚訝,因為我從來沒有想過它可以以這種方式實現。當開發人員用非常簡單的概念創造出一些很酷的東西時,感覺真的很棒:) 它在 GitHub 上有 420 多顆星,並且不再維護。但你可以用它來建造更好的東西。 您可以檢查[GitHub 儲存庫](https://github.com/e-johnstonn/wingmanAI)。 ✅[考試](https://github.com/codeacme17/examor)。 -------------------------------------------- ![前愛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x4fh09yrwhnalr1oxgv4.png) 一款允許您根據知識筆記參加考試的應用程式。它可以讓您專注於您所學和所寫的內容🧠。 它不斷提示您提出問題以複習筆記內容,這對於學生、學者、受訪者和終身學習者非常有用。 專案管理員正在使用 next.js 重構專案,這對於使用`next.js`開發人員來說非常好。 讓我們來詳細分析一下一些很棒的功能: ⚡ 建立筆記時可以上傳相關文件。該應用程式根據這些文件的內容產生一組問題。這些問題將在未來呈現給大家。建立筆記時,您作為使用者還可以選擇要產生的問題類型。 ![問題選擇](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rp5seq1zpotaxej6dj6l.png) ⚡ 收到每日問題後,您可以提供答案。 GPT 將評分、驗證並提供正確答案。透過評估答案和連結文件的正確性來確定分數(0 ~ 10 分)。這個分數會影響隨後的艾賓浩斯評審過程。將會在未來的發布版本中進行最佳化。 ⚡ 角色可以為問題產生和評估提供更多可能性。您可以在設定頁面上設定角色。有關各種角色的更多訊息,建議參閱詳細的[角色手冊指南](https://github.com/codeacme17/examor/blob/main/docs/en-role.md)。 ![角色選擇](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n0zdohzkowcdrdnxjzba.png) ⚡ 練習問題時,可以用不同的方法作答。下圖顯示了單選題的範例。 ![回答問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yzg8vvuxndhw9v2s1x8c.png) ⚡ 它有一個包含多個[模組](https://github.com/codeacme17/examor?tab=readme-ov-file#-modules)的列表,例如`Examine` 、 `Note` 、 `Notes Management`和`Random Question`使用這些模組您可以在筆記中導入問題,刪除或加入新文件到上傳的筆記中,等等。 我喜歡整個概念,這會引起任何曾經面臨過修改筆記問題的人的注意。 您可以閱讀包含如何正確使用它的詳細指南的[文件](https://github.com/codeacme17/examor/blob/main/README.md)。 它在 GitHub 上有 1k star,目前版本為`v0.4.2` 。 您可以檢查[GitHub 儲存庫](https://github.com/codeacme17/examor)。 ✅[語音GPT](https://github.com/hahahumble/speechgpt) 。 --------------------------------------------------- ![語音GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/on0exhy65owc13tzue0v.png) ![語音GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4rrge2nyhowtcdyd3gi5.png) SpeechGPT 是一個 Web 應用程式,可讓您與 ChatGPT 進行對話。 您可以利用此應用程式來提高您的語言技能,或只是透過 ChatGPT 享受聊天的樂趣。 大多數人會說這有什麼獨特之處,但事實確實如此。 讓我們來打破一些很棒的功能: ⚡ 所有資料儲存在本地,隱私性更強。 ⚡ 根據文件,它支援 100 多種語言,但我在現場演示中只能看到對三種語言的支援。 ![語言](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6e7jsrhmvrdlidyvnho.png) ⚡ 包含內建語音辨識以及與 Azure 語音服務的整合。 ![語音辨識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gr2vsaymy50wtiperprd.png) ⚡ 包含內建語音合成,以及與 Amazon Polly 和 Azure 語音服務的整合。 ![語音合成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2m3kp9othpa9rbb4it57.png) 請按照[文件中的教學](https://github.com/hahahumble/speechgpt?tab=readme-ov-file#-tutorial)了解如何使用它。 您可以在[speechgpt.app](https://speechgpt.app/)上觀看現場演示。這是一個完美的例子,說明了一些額外的功能如何將您的應用程式提升到一個新的水平! SpeechGPT 在 GitHub 上有 2700 顆星,目前版本為`v0.5.1` 。 您可以檢查[GitHub 儲存庫](https://github.com/hahahumble/speechgpt)。 ✅ [myGPTReader](https://github.com/madawei2699/myGPTReader) - 閱讀並與 AI 機器人聊天。 ---------------------------------------------------------------------------- ![我的GPT閱讀器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58doii8daomf54te5eca.png) myGPTReader 是 Slack 上的機器人,可以閱讀和總結任何網頁、文件(包括電子書),甚至來自 YouTube 的影片。它可以透過語音與您交流。 一些有價值的功能是: ⚡ 使用 myGPTReader 透過對話快速閱讀和理解任何網頁內容,甚至是影片(目前僅支援帶有字幕的 YouTube 影片)。 ![讀者](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x626mtnvqr5vw43938iw.gif) ⚡ 使用 myGPTReader 快速閱讀任何文件的內容,支援電子書、PDF、DOCX、TXT 和 Markdown。 ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5am7njxco7vhronuirgu.gif) ⚡ 透過與 myGPTReader 語音對話來練習外語,它可以成為您的私人導師,支援中文、英語、德語和日語。 ![嗓音](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/40pzlgtuhcyxgwa1z2gs.gif) ⚡ 內建大量提示模板,使用它們可以更好地與chatGPT對話。 ![問](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ehgn218hwewzeft98xkp.gif) ⚡ myGPTReader 每天發送最新熱點新聞,並自動產生摘要,讓您快速了解今日熱點。 您可以造訪[官方網站](https://www.myreader.io/)。 您可以加入擁有超過 5000 名會員的儲存庫上的 Slack 頻道,免費體驗所有這些功能。 它們在 GitHub 上有 4.4k 顆星,並且像此列表中的其他專案一樣使用 Python 建置。 您可以檢查[GitHub 儲存庫](https://github.com/madawei2699/myGPTReader)。 ✅ [RepoChat](https://github.com/pnkvalavala/repochat) - 支援 GitHub 儲存庫互動的聊天機器人助理。 -------------------------------------------------------------------------------- ![重新聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3gf9bjn2a47f1t43aiju.png) Repochat 是一個互動式聊天機器人專案,旨在使用大型語言模型 (LLM) 參與有關 GitHub 儲存庫的對話。 它允許用戶進行有意義的討論、提出問題並從 GitHub 儲存庫檢索相關資訊。本自述文件提供了在本機電腦上設定和使用 Repochat 的逐步說明。 他們建立了兩個具有不同功能的分支,這對我來說有點新鮮。 ⚡ Repochat 的主要分支被設計為完全在本機上執行。此版本的 Repochat 不依賴外部 API 呼叫,並且可以更好地控制您的資料和處理。如果您正在尋找獨立的解決方案,那麼主分支就是您的最佳選擇。 ⚡ Repochat 的雲端分支主要依賴對外部服務的 API 呼叫來進行模型推理和儲存。它非常適合那些喜歡基於雲端的解決方案並且不想設定本地環境的人。 您可以閱讀[安裝說明](https://github.com/pnkvalavala/repochat?tab=readme-ov-file#installation)。 Repochat 讓您與聊天機器人進行對話。您可以提出問題或提供輸入,聊天機器人將從向量資料庫中檢索相關文件。 然後,它將您的輸入以及檢索到的文件傳送到語言模型以產生回應。 預設情況下,我已將模型設為`codellama-7b-instruct` ,但您可以根據計算機的速度更改它,甚至可以嘗試 13b 量化模型進行回應。 聊天機器人在對話過程中保留記憶以提供上下文相關的回應。 您可以查看[即時網站](https://repochat.streamlit.app/),您可以使用 API 金鑰進行檢查。 你可以觀看這個演示! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o7ndxqpwkkww4f5qudiq.gif) 如果您想查看的話,我找到了另一種[選擇](https://github.com/peterw/Chat-with-Github-Repo)。 Repochat 擁有 200 多顆星,並部署在 Streamlit 上。 您可以檢查[GitHub 儲存庫](https://github.com/pnkvalavala/repochat)。 ✅ [NextChat - ChatGPT Next Web](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web) 。 ------------------------------------------------------------------------------------- ![下次聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lnuqjkfcyz8z7kejgbb1.png) 這不是一個典型的副專案,因為程式碼庫足夠大,但值得一看作為靈感。 您只需一鍵即可獲得精心設計的跨平台 ChatGPT Web UI,支援 GPT3、GPT4 和 Gemini Pro(Web / PWA / Linux / Win / MacOS)。 一些很棒的功能是: ⚡ 隱私 首先,所有資料都儲存在瀏覽器本地。 ⚡ 首屏載入速度快(~100kb),支援串流響應。 ⚡ 自動壓縮聊天歷史記錄以支援長時間對話,同時儲存您的代幣。 ⚡ Linux/Windows/MacOS 上的緊湊型用戶端 (~5MB)。 ⚡ 您只需在 Vercel 上一鍵點擊即可在 1 分鐘內免費部署。 ⚡ 與自行部署的法學碩士完全相容。 ⚡ Markdown 支援:LaTex、mermaid、程式碼高亮等。 ![下次聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2uvdfwz1rgy1l2l4pb9p.png) 您可以查看 NextChat 的[現場演示](https://app.nextchat.dev/)和[文件,](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web?tab=readme-ov-file#roadmap)其中包括所有環境變數(主要是 API 金鑰)的清單。 ![下次聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fqykjwgjf35khapdfu20.png) 在本地處理它並不難,他們還提供了 GitHub 操作工作流程,每小時都會自動更新。 NextChat 在 GitHub 上擁有 69k+ 顆星,目前已發布`v2.2`版本。 您可以檢查[GitHub 儲存庫](https://github.com/ChatGPTNextWeb/ChatGPT-Next-Web)。 --- 如果您喜歡觀看教程來建立專案,我有一些很好的建議。 🎯 [LangChain GEN AI 教學 – 使用 OpenAI、Google Gemini Pro、LLAMA2 的 6 個端到端專案](https://www.youtube.com/watch?v=x0AnCE9SE4A)– 4 小時。 本教學涵蓋的專案: ✅ LangChain 速成課程 - 打下基礎。 ✅ 使用 Langchain 和 Astradb 與 PDF 聊天。 ✅ 使用 Llama 2 LLM 模型產生部落格。 ✅ 使用 Pinecone VectorDB 的端到端法學碩士課程。 ✅ Google Gemini 專業版示範。 ✅ 多語言發票提取器 LLM 專案。 ✅ 使用 Gemini Pro API 的對話式問答聊天機器人。 {% 嵌入 https://www.youtube.com/watch?v=x0AnCE9SE4A %} 🎯 Streamlit 的 LangChain 速成課程。 本教學涵蓋的專案: ✅ 發票資料提取器。 ✅ 針對自訂資料的基本 QA。 ✅ 總結和有用的鏈類型。 ✅ WordPress 程式碼助理。 ✅ 將語音備忘錄轉換為文字。 你可以找到[速成課程](https://learnlangchain.streamlit.app/)。側邊欄中將有一個關於實踐專案的部分! --- 這麼多很棒的專案:) 但說實話,我見過很多開發人員建立相同的應用程式,您可以獲得無限的靈感。我希望你喜歡這個。 繼續,保存它,並建造每一個,以展示誰是技術老大! 讓我知道哪個專案最讓你驚訝。 祝你有美好的一天!直到下一次。 |如果你喜歡這類東西, 請關注我以了解更多:) | [![用戶名 Anmol_Codes 的 Twitter 個人資料](https://img.shields.io/badge/Twitter-d5d5d5?style=for-the-badge&logo=x&logoColor=0A0209)](https://twitter.com/Anmol_Codes) [![用戶名 Anmol-Baranwal 的 GitHub 個人資料](https://img.shields.io/badge/github-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/Anmol-Baranwal) [![用戶名 Anmol-Baranwal 的 LinkedIn 個人資料](https://img.shields.io/badge/LinkedIn-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/Anmol-Baranwal/) | |------------|----------| 請關注 Copilotkit 以獲取更多此類內容。 {% 嵌入 https://dev.to/copilotkit %} --- 原文出處:https://dev.to/copilotkit/20-projects-you-can-build-with-ai-today-352k

AI 驅動的前端 UI 元件產生器(Next.js、GPT4、Langchain 和 CopilotKit)

**長話短說** -------- 在本文中,您將了解如何建立由 AI 驅動的前端 UI 元件產生器,該產生器使您能夠透過實作教學產生 Next.js Tailwind CSS UI 元件。 我們將介紹如何: - 使用 Next.js、TypeScript 和 Tailwind CSS 建立 UI 元件產生器 Web 應用程式。 - 使用 CopilotKit 將 AI 功能整合到 UI 元件產生器中。 - 整合嵌入式程式碼編輯器以變更產生的程式碼。 先決條件 ---- 要完全理解本教程,您需要對 React 或 Next.js 有基本的了解。 以下是建立 AI 支援的 UI 元件產生器所需的工具: - [Ace 程式碼編輯器](https://ace.c9.io/)- 用 JvaScript 編寫的嵌入式程式碼編輯器,與本機編輯器的功能和效能相符。 - [Langchain](https://www.langchain.com/) - 提供了一個框架,使人工智慧代理能夠搜尋網路並研究任何主題。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰,讓您能夠使用 ChatGPT 模型執行各種任務。 - [Tavily AI](https://tavily.com/) - 一個搜尋引擎,使人工智慧代理能夠在應用程式中進行研究並存取即時知識。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架,用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先,透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式: ``` npx create-next-app@latest aiuigenerator ``` 選擇您首選的配置設定。在本教學中,我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c2uq47mrd3ppxqvr1v7.png) 接下來,安裝 Ace 程式碼編輯器和 Langchain 軟體套件及其相依性。 ``` npm install react-ace @langchain/langgraph ``` 最後,安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜!您現在已準備好建立由人工智慧驅動的部落格。 **建構 UI 元件產生器前端** ----------------- 在本節中,我將引導您完成使用靜態內容建立 UI 元件產生器前端的過程,以定義生成器的使用者介面。 首先,請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中,建立兩個名為`Header.tsx`和`CodeTutorial.tsx`的檔案。 在`Header.tsx`檔案中,新增以下程式碼,定義一個名為`Header`的功能元件,該元件將呈現生成器的導覽列。 ``` "use client"; import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="w-full flex-none text-xl text-white font-semibold p-6" href="/" aria-label="Brand"> AI-UI-Components-Generator </Link> </div> </nav> </header> </> ); } ``` 在`CodeTutorial.tsx`檔案中,加入以下程式碼,定義一個名為`CodeTutorial`的功能元件,該元件呈現 UI 元件產生器主頁,該首頁將顯示產生的 UI 元件、嵌入式程式碼編輯器和產生的實作教學。 ``` "use client"; import Markdown from "react-markdown"; import { useState } from "react"; import AceEditor from "react-ace"; import React from "react"; export default function CodeTutorial() { const [code, setCode] = useState<string[]>([ `<h1 class="text-red-500">Hello World</h1>`, ]); const [codeToDisplay, setCodeToDisplay] = useState<string>(code[0] || ""); const [codeTutorial, setCodeTutorial] = useState(``); function onChange(newCode: any) { setCodeToDisplay(newCode); } return ( <> <main className=" min-h-screen px-4"> <div className="w-full h-full min-h-[70vh] flex justify-between gap-x-1 "> <div className="w-2/3 min-h-[60vh] rounded-lg bg-white shadow-lg p-2 border mt-8 overflow-auto"> <div className="w-full min-h-[60vh] rounded-lg" dangerouslySetInnerHTML={{ __html: codeToDisplay }} /> </div> <AceEditor placeholder="Placeholder Text" mode="html" theme="monokai" name="blah2" className="w-[50%] min-h-[60vh] p-2 mt-8 rounded-lg" onChange={onChange} fontSize={14} lineHeight={19} showPrintMargin={true} showGutter={true} highlightActiveLine={true} value={codeToDisplay} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: false, showLineNumbers: true, tabSize: 2, }} /> </div> <div className="w-10/12 mx-auto"> <div className="mt-8"> <h1 className="text-white text-center text-xl font-semibold p-6"> Code Tutorial </h1> {codeTutorial ? ( <Markdown className="text-white">{codeTutorial}</Markdown> ) : ( <div className="text-white"> The Code Tutorial Will Appear Here </div> )} </div> </div> </main> </> ); } ``` 接下來,前往`/[root]/src/page.tsx`文件,新增以下程式碼,導入`CodeTutorial`和`Header`元件,並定義名為`Home`的功能元件。 ``` import React from "react"; import Header from "./components/Header"; import CodeTutorial from "./components/CodeTutorial"; export default function Home() { return ( <> <Header /> <CodeTutorial /> </> ); } ``` 接下來,刪除 globals.css 檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } pre { margin: 1rem; padding: 1rem; border-radius: 10px; background-color: black; overflow: auto; } h2, p { padding-bottom: 1rem; padding-top: 1rem; } code { margin-bottom: 2rem; } ``` 最後,在命令列上執行命令`npm run dev` ,然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看 UI 元件產生器前端,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id9z3bizkb2bghbe4bxb.png) **使用 CopilotKit 將 AI 功能整合到元件產生器** --------------------------------- 在本節中,您將學習如何為 UI 元件產生器新增 AI 副駕駛以產生 UI 元件程式碼以及使用 CopilotKit 的實作教學。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先,讓我們將 CopilotKit React 元件加入到部落格前端。 ### **將 CopilotKit 新增至部落格前端** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 前端整合的過程,以方便產生 UI 元件程式碼和實作教學。 首先,使用下面的程式碼片段導入`/[root]/src/app/components/CodeTutorial.tsx`檔案頂部的自訂掛鉤`useMakeCopilotReadable`和`useCopilotAction` 。 ``` import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; ``` 在`CodeTutorial`函數內的狀態變數下方,加入以下程式碼,該程式碼使用`useMakeCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的程式碼。該鉤子使副駕駛可以讀取程式碼。 ``` useMakeCopilotReadable(codeToDisplay); ``` 在上面的程式碼下方,新增以下程式碼,該程式碼使用`useCopilotAction`掛鉤來設定名為`generateCodeAndImplementationTutorial`的操作,該操作將啟用 UI 元件程式碼和實作教學課程的產生。 這個操作接受兩個參數,稱為`code`和`tutorial` ,這兩個參數可以產生 UI 元件程式碼和實作教程。 該操作包含一個處理函數,該函數根據給定的提示產生 UI 元件程式碼和實作教程。 在處理函數內部, `codeToDisplay`狀態會使用新產生的程式碼進行更新,而`codeTutorial`狀態會使用新產生的教學課程進行更新,如下所示。 ``` useCopilotAction( { name: "generateCodeAndImplementationTutorial", description: "Create Code Snippet with React.js(Next.js), tailwindcss and an implementation tutorial of the code generated.", parameters: [ { name: "code", type: "string", description: "Code to be generated", required: true, }, { name: "tutorial", type: "string", description: "Markdown of step by step guide tutorial on how to use the generated code accompanied with the code. Include introduction, prerequisites and what happens at every step accompanied with code generated earlier. Don't forget to add how to render the code on browser.", required: true, }, ], handler: async ({ code, tutorial }) => { setCode((prev) => [...prev, code]); setCodeToDisplay(code); setCodeTutorial(tutorial); }, }, [codeToDisplay, codeTutorial] ); ``` 之後,請前往`/[root]/src/app/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilotSidebar`和`CodeTutorial`元件,如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL,而`CopilotSidebar`呈現應用程式內聊天機器人,您可以提示產生 UI 元件程式碼和實作教學。 ``` export default function Home() { return ( <> <Header /> <CopilotKit url="/api/copilotkit"> <CopilotSidebar instructions="Help the user generate code. Ask the user if to generate its tutorial." defaultOpen={true} labels={{ title: "Code & Tutorial Generator", initial: "Hi! 👋 I can help you generate code and its tutorial.", }}> <CodeTutorial /> </CopilotSidebar> </CopilotKit> </> ); } ``` 之後,執行開發伺服器並導航到 http://localhost:3000。您應該會看到應用程式內聊天機器人已整合到 UI 元件產生器中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty4g6tuluhfiqtnnyxvg.png) ### **將 CopilotKit 後端加入博客** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 後端整合的過程,該後端處理來自前端的請求,並提供函數呼叫和各種 LLM 後端(例如 GPT)。 此外,我們將整合一個名為 Tavily 的人工智慧代理,它可以研究網路上的任何主題。 首先,在根目錄中建立一個名為`.env.local`的檔案。然後在保存`ChatGPT`和`Tavily` Search API 金鑰的檔案中加入下面的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API key" TAVILY_API_KEY="Your Tavily Search API key" ``` 若要取得 ChatGPT API 金鑰,請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjl2g88iedd1n0qkd3ai.png) 若要取得 Tavilly Search API 金鑰,請導覽至 https://app.tavily.com/home ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m00kyux6biskw7xn2wec.png) 之後,轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中,建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中,建立一個名為`research.ts`的檔案。然後導航到[該 Research.ts gist 文件](https://gist.github.com/TheGreatBonnie/58dc21ebbeeb8cbb08df665db762738c),複製程式碼,並將其新增至**`research.ts`**檔案中 接下來,在`/[root]/src/app/api/copilotkit`資料夾中建立一個名為`route.ts`的檔案。該文件將包含設定後端功能來處理 POST 請求的程式碼。它有條件地包括對給定主題進行研究的“研究”操作。 現在在文件頂部導入以下模組。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit. import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research. import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata. ``` 在上面的程式碼下面,定義一個執行時間環境變數和一個名為`researchAction`的函數,該函數使用下面的程式碼研究某個主題。 ``` // Define a runtime environment variable, indicating the environment where the code is expected to run. export const runtime = "edge"; // Define an annotated function for research. This object includes metadata and an implementation for the function. const researchAction: AnnotatedFunction<any> = { name: "research", // Function name. description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description. argumentAnnotations: [ // Annotations for arguments that the function accepts. { name: "topic", // Argument name. type: "string", // Argument type. description: "The topic to research. 5 characters or longer.", // Argument description. required: true, // Indicates that the argument is required. }, ], implementation: async (topic) => { // The actual function implementation. console.log("Researching topic: ", topic); // Log the research topic. return await researchWithLangGraph(topic); // Call the research function and return its result. }, }; ``` 然後在上面的程式碼下加入下面的程式碼來定義處理POST請求的非同步函數。 ``` // Define an asynchronous function that handles POST requests. export async function POST(req: Request): Promise<Response> { const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions. // Check if a specific environment variable is set, indicating access to certain functionality. if (process.env.TAVILY_API_KEY) { actions.push(researchAction); // Add the research action to the actions array if the condition is true. } // Instantiate CopilotBackend with the actions defined above. const copilotKit = new CopilotBackend({ actions: actions, }); // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter. return copilotKit.response(req, new OpenAIAdapter()); } ``` 如何產生 UI 元件 ---------- 現在轉到您之前整合的應用程式內聊天機器人,並給它一個提示,例如「產生聯絡表單」。 生成完成後,您應該會看到生成的聯絡表單元件及其實作教程,如下所示。您也可以使用嵌入式程式碼編輯器修改產生的程式碼。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43t9oauptomio4cy1gwr.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/297vxxiqti56ydevfmyl.png) 恭喜!您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具,可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣,還是對複雜任務的自動化感興趣,CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中,您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼: <https://github.com/TheGreatBonnie/AIPoweredUIComponentsGenerator> --- 原文出處:https://dev.to/tcms/ai-powered-frontend-ui-components-generator-nextjs-gpt4-langchain-copilotkit-1hac

AI 驅動的前端 UI 元件產生器(Next.js、GPT4、Langchain 和 CopilotKit)

**長話短說** -------- 在本文中,您將了解如何建立由 AI 驅動的前端 UI 元件產生器,該產生器使您能夠透過實作教學產生 Next.js Tailwind CSS UI 元件。 我們將介紹如何: - 使用 Next.js、TypeScript 和 Tailwind CSS 建立 UI 元件產生器 Web 應用程式。 - 使用 CopilotKit 將 AI 功能整合到 UI 元件產生器中。 - 整合嵌入式程式碼編輯器以變更產生的程式碼。 先決條件 ---- 要完全理解本教程,您需要對 React 或 Next.js 有基本的了解。 以下是建立 AI 支援的 UI 元件產生器所需的工具: - [Ace 程式碼編輯器](https://ace.c9.io/)- 用 JvaScript 編寫的嵌入式程式碼編輯器,與本機編輯器的功能和效能相符。 - [Langchain](https://www.langchain.com/) - 提供了一個框架,使人工智慧代理能夠搜尋網路並研究任何主題。 - [OpenAI API](https://platform.openai.com/api-keys) - 提供 API 金鑰,讓您能夠使用 ChatGPT 模型執行各種任務。 - [Tavily AI](https://tavily.com/) - 一個搜尋引擎,使人工智慧代理能夠在應用程式中進行研究並存取即時知識。 - [CopilotKit](https://github.com/CopilotKit) - 一個開源副駕駛框架,用於建立自訂 AI 聊天機器人、應用程式內 AI 代理程式和文字區域。 專案設定和套件安裝 --------- 首先,透過在終端機中執行以下程式碼片段來建立 Next.js 應用程式: ``` npx create-next-app@latest aiuigenerator ``` 選擇您首選的配置設定。在本教學中,我們將使用 TypeScript 和 Next.js App Router。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0c2uq47mrd3ppxqvr1v7.png) 接下來,安裝 Ace 程式碼編輯器和 Langchain 軟體套件及其相依性。 ``` npm install react-ace @langchain/langgraph ``` 最後,安裝 CopilotKit 軟體套件。這些套件使我們能夠從 React 狀態檢索資料並將 AI copilot 新增至應用程式。 ``` npm install @copilotkit/react-ui @copilotkit/react-textarea @copilotkit/react-core @copilotkit/backend ``` 恭喜!您現在已準備好建立由人工智慧驅動的部落格。 **建構 UI 元件產生器前端** ----------------- 在本節中,我將引導您完成使用靜態內容建立 UI 元件產生器前端的過程,以定義生成器的使用者介面。 首先,請在程式碼編輯器中前往`/[root]/src/app`並建立一個名為`components`的資料夾。在 Components 資料夾中,建立兩個名為`Header.tsx`和`CodeTutorial.tsx`的檔案。 在`Header.tsx`檔案中,新增以下程式碼,定義一個名為`Header`的功能元件,該元件將呈現生成器的導覽列。 ``` "use client"; import Link from "next/link"; export default function Header() { return ( <> <header className="flex flex-wrap sm:justify-start sm:flex-nowrap z-50 w-full bg-gray-800 border-b border-gray-200 text-sm py-3 sm:py-0 "> <nav className="relative max-w-7xl w-full mx-auto px-4 sm:flex sm:items-center sm:justify-between sm:px-6 lg:px-8" aria-label="Global"> <div className="flex items-center justify-between"> <Link className="w-full flex-none text-xl text-white font-semibold p-6" href="/" aria-label="Brand"> AI-UI-Components-Generator </Link> </div> </nav> </header> </> ); } ``` 在`CodeTutorial.tsx`檔案中,加入以下程式碼,定義一個名為`CodeTutorial`的功能元件,該元件呈現 UI 元件產生器主頁,該首頁將顯示產生的 UI 元件、嵌入式程式碼編輯器和產生的實作教學。 ``` "use client"; import Markdown from "react-markdown"; import { useState } from "react"; import AceEditor from "react-ace"; import React from "react"; export default function CodeTutorial() { const [code, setCode] = useState<string[]>([ `<h1 class="text-red-500">Hello World</h1>`, ]); const [codeToDisplay, setCodeToDisplay] = useState<string>(code[0] || ""); const [codeTutorial, setCodeTutorial] = useState(``); function onChange(newCode: any) { setCodeToDisplay(newCode); } return ( <> <main className=" min-h-screen px-4"> <div className="w-full h-full min-h-[70vh] flex justify-between gap-x-1 "> <div className="w-2/3 min-h-[60vh] rounded-lg bg-white shadow-lg p-2 border mt-8 overflow-auto"> <div className="w-full min-h-[60vh] rounded-lg" dangerouslySetInnerHTML={{ __html: codeToDisplay }} /> </div> <AceEditor placeholder="Placeholder Text" mode="html" theme="monokai" name="blah2" className="w-[50%] min-h-[60vh] p-2 mt-8 rounded-lg" onChange={onChange} fontSize={14} lineHeight={19} showPrintMargin={true} showGutter={true} highlightActiveLine={true} value={codeToDisplay} setOptions={{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, enableSnippets: false, showLineNumbers: true, tabSize: 2, }} /> </div> <div className="w-10/12 mx-auto"> <div className="mt-8"> <h1 className="text-white text-center text-xl font-semibold p-6"> Code Tutorial </h1> {codeTutorial ? ( <Markdown className="text-white">{codeTutorial}</Markdown> ) : ( <div className="text-white"> The Code Tutorial Will Appear Here </div> )} </div> </div> </main> </> ); } ``` 接下來,前往`/[root]/src/page.tsx`文件,新增以下程式碼,導入`CodeTutorial`和`Header`元件,並定義名為`Home`的功能元件。 ``` import React from "react"; import Header from "./components/Header"; import CodeTutorial from "./components/CodeTutorial"; export default function Home() { return ( <> <Header /> <CodeTutorial /> </> ); } ``` 接下來,刪除 globals.css 檔案中的 CSS 程式碼並新增以下 CSS 程式碼。 ``` @tailwind base; @tailwind components; @tailwind utilities; @tailwind base; @tailwind components; @tailwind utilities; body { height: 100vh; background-color: rgb(16, 23, 42); } pre { margin: 1rem; padding: 1rem; border-radius: 10px; background-color: black; overflow: auto; } h2, p { padding-bottom: 1rem; padding-top: 1rem; } code { margin-bottom: 2rem; } ``` 最後,在命令列上執行命令`npm run dev` ,然後導航到 http://localhost:3000/。 現在您應該在瀏覽器上查看 UI 元件產生器前端,如下所示。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/id9z3bizkb2bghbe4bxb.png) **使用 CopilotKit 將 AI 功能整合到元件產生器** --------------------------------- 在本節中,您將學習如何為 UI 元件產生器新增 AI 副駕駛以產生 UI 元件程式碼以及使用 CopilotKit 的實作教學。 CopilotKit 提供前端和[後端](https://docs.copilotkit.ai/getting-started/quickstart-backend)套件。它們使您能夠插入 React 狀態並使用 AI 代理在後端處理應用程式資料。 首先,我們將 CopilotKit React 元件加入到部落格前端。 ### **將 CopilotKit 新增至部落格前端** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 前端整合的過程,以方便產生 UI 元件程式碼和實作教學。 首先,使用下面的程式碼片段導入`/[root]/src/app/components/CodeTutorial.tsx`檔案頂部的自訂掛鉤`useMakeCopilotReadable`和`useCopilotAction` 。 ``` import { useCopilotAction, useMakeCopilotReadable, } from "@copilotkit/react-core"; ``` 在`CodeTutorial`函數內的狀態變數下方,加入以下程式碼,該程式碼使用`useMakeCopilotReadable`掛鉤來新增將作為應用程式內聊天機器人的上下文產生的程式碼。該鉤子使副駕駛可以讀取程式碼。 ``` useMakeCopilotReadable(codeToDisplay); ``` 在上面的程式碼下方,新增以下程式碼,該程式碼使用`useCopilotAction`掛鉤來設定名為`generateCodeAndImplementationTutorial`的操作,該操作將啟用 UI 元件程式碼和實作教學課程的產生。 這個操作接受兩個參數,稱為`code`和`tutorial` ,這兩個參數可以產生 UI 元件程式碼和實作教程。 該操作包含一個處理函數,該函數根據給定的提示產生 UI 元件程式碼和實作教程。 在處理函數內部, `codeToDisplay`狀態會使用新產生的程式碼進行更新,而`codeTutorial`狀態會使用新產生的教學課程進行更新,如下所示。 ``` useCopilotAction( { name: "generateCodeAndImplementationTutorial", description: "Create Code Snippet with React.js(Next.js), tailwindcss and an implementation tutorial of the code generated.", parameters: [ { name: "code", type: "string", description: "Code to be generated", required: true, }, { name: "tutorial", type: "string", description: "Markdown of step by step guide tutorial on how to use the generated code accompanied with the code. Include introduction, prerequisites and what happens at every step accompanied with code generated earlier. Don't forget to add how to render the code on browser.", required: true, }, ], handler: async ({ code, tutorial }) => { setCode((prev) => [...prev, code]); setCodeToDisplay(code); setCodeTutorial(tutorial); }, }, [codeToDisplay, codeTutorial] ); ``` 之後,請前往`/[root]/src/app/page.tsx`檔案並使用下面的程式碼匯入頂部的 CopilotKit 前端套件和樣式。 ``` import { CopilotKit } from "@copilotkit/react-core"; import { CopilotSidebar } from "@copilotkit/react-ui"; import "@copilotkit/react-ui/styles.css"; ``` 然後使用`CopilotKit`包裝`CopilotSidebar`和`CodeTutorial`元件,如下所示。 `CopilotKit`元件指定 CopilotKit 後端端點 ( `/api/copilotkit/` ) 的 URL,而`CopilotSidebar`呈現應用程式內聊天機器人,您可以提示產生 UI 元件程式碼和實作教學。 ``` export default function Home() { return ( <> <Header /> <CopilotKit url="/api/copilotkit"> <CopilotSidebar instructions="Help the user generate code. Ask the user if to generate its tutorial." defaultOpen={true} labels={{ title: "Code & Tutorial Generator", initial: "Hi! 👋 I can help you generate code and its tutorial.", }}> <CodeTutorial /> </CopilotSidebar> </CopilotKit> </> ); } ``` 之後,執行開發伺服器並導航到 http://localhost:3000。您應該會看到應用程式內聊天機器人已整合到 UI 元件產生器中。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ty4g6tuluhfiqtnnyxvg.png) ### **將 CopilotKit 後端加入博客** 在這裡,我將引導您完成將 UI 元件產生器與 CopilotKit 後端整合的過程,該後端處理來自前端的請求,並提供函數呼叫和各種 LLM 後端(例如 GPT)。 此外,我們將整合一個名為 Tavily 的人工智慧代理,它可以研究網路上的任何主題。 首先,在根目錄中建立一個名為`.env.local`的檔案。然後在保存`ChatGPT`和`Tavily` Search API 金鑰的檔案中加入下面的環境變數。 ``` OPENAI_API_KEY="Your ChatGPT API key" TAVILY_API_KEY="Your Tavily Search API key" ``` 若要取得 ChatGPT API 金鑰,請導覽至 https://platform.openai.com/api-keys。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mjl2g88iedd1n0qkd3ai.png) 若要取得 Tavilly Search API 金鑰,請導覽至 https://app.tavily.com/home ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m00kyux6biskw7xn2wec.png) 之後,轉到`/[root]/src/app`並建立一個名為`api`的資料夾。在`api`資料夾中,建立一個名為`copilotkit`的資料夾。 在`copilotkit`資料夾中,建立一個名為`research.ts`的檔案。然後導航到[該 Research.ts gist 文件](https://gist.github.com/TheGreatBonnie/58dc21ebbeeb8cbb08df665db762738c),複製程式碼,並將其新增至**`research.ts`**檔案中 接下來,在`/[root]/src/app/api/copilotkit`資料夾中建立一個名為`route.ts`的檔案。該文件將包含設定後端功能來處理 POST 請求的程式碼。它有條件地包括對給定主題進行研究的“研究”操作。 現在在文件頂部導入以下模組。 ``` import { CopilotBackend, OpenAIAdapter } from "@copilotkit/backend"; // For backend functionality with CopilotKit. import { researchWithLangGraph } from "./research"; // Import a custom function for conducting research. import { AnnotatedFunction } from "@copilotkit/shared"; // For annotating functions with metadata. ``` 在上面的程式碼下面,定義一個執行時間環境變數和一個名為`researchAction`的函數,該函數使用下面的程式碼研究某個主題。 ``` // Define a runtime environment variable, indicating the environment where the code is expected to run. export const runtime = "edge"; // Define an annotated function for research. This object includes metadata and an implementation for the function. const researchAction: AnnotatedFunction<any> = { name: "research", // Function name. description: "Call this function to conduct research on a certain topic. Respect other notes about when to call this function", // Function description. argumentAnnotations: [ // Annotations for arguments that the function accepts. { name: "topic", // Argument name. type: "string", // Argument type. description: "The topic to research. 5 characters or longer.", // Argument description. required: true, // Indicates that the argument is required. }, ], implementation: async (topic) => { // The actual function implementation. console.log("Researching topic: ", topic); // Log the research topic. return await researchWithLangGraph(topic); // Call the research function and return its result. }, }; ``` 然後在上面的程式碼下加入下面的程式碼來定義處理POST請求的非同步函數。 ``` // Define an asynchronous function that handles POST requests. export async function POST(req: Request): Promise<Response> { const actions: AnnotatedFunction<any>[] = []; // Initialize an array to hold actions. // Check if a specific environment variable is set, indicating access to certain functionality. if (process.env.TAVILY_API_KEY) { actions.push(researchAction); // Add the research action to the actions array if the condition is true. } // Instantiate CopilotBackend with the actions defined above. const copilotKit = new CopilotBackend({ actions: actions, }); // Use the CopilotBackend instance to generate a response for the incoming request using an OpenAIAdapter. return copilotKit.response(req, new OpenAIAdapter()); } ``` 如何產生 UI 元件 ---------- 現在轉到您之前整合的應用程式內聊天機器人,並給它一個提示,例如「產生聯絡表單」。 生成完成後,您應該會看到生成的聯絡表單元件及其實作教程,如下所示。您也可以使用嵌入式程式碼編輯器修改產生的程式碼。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/43t9oauptomio4cy1gwr.png) ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/297vxxiqti56ydevfmyl.png) 恭喜!您已完成本教學的專案。 結論 -- [CopilotKit](https://copilotkit.ai/)是一款令人難以置信的工具,可讓您在幾分鐘內將 AI Copilot 加入到您的產品中。無論您是對人工智慧聊天機器人和助理感興趣,還是對複雜任務的自動化感興趣,CopilotKit 都能讓您輕鬆實現。 如果您需要建立 AI 產品或將 AI 工具整合到您的軟體應用程式中,您應該考慮 CopilotKit。 您可以在 GitHub 上找到本教學的源程式碼: <https://github.com/TheGreatBonnie/AIPoweredUIComponentsGenerator> --- 原文出處:https://dev.to/the_greatbonnie/ai-powered-frontend-ui-components-generator-nextjs-gpt4-langchain-copilotkit-1hac

  近期留言