🔍 搜尋結果:2024

🔍 搜尋結果:2024

使用 Langchain 為您的文件建立 QA 機器人 😻

--- 標題:使用 Langchain 為您的文件建立 QA 機器人 😻 描述:使用 Wing Framework、NextJS 和 Langchain 建立的 ChatGPT 用戶端應用程式 canonical\_url:https://www.winglang.io/blog/2024/05/29/qa-bot-for-your-docs-with-langchain 發表:真實 --- 長話短說 ---- 在本教學中,我們將為您的網站文件建立一個人工智慧驅動的問答機器人。 - 🌐 建立一個用戶友好的 Next.js 應用程式來接受問題和 URL - 🔧 設定一個 Wing 後端來處理所有請求 - 💡 透過使用 RAG 抓取和分析文件,將 @langchain 納入 AI 驅動的答案 - 🔄 前端輸入和人工智慧處理的回應之間的完整連接。 ![問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ykw5f2sos4fdhj8akowt.gif) 什麼是翼? ----- [Wing](https://wing.cloud/redirect?utm_source=qa-bot-reddit&redirect=https%3A%2F%2Fwww.winglang.io%2Fblog%2F2024%2F05%2F29%2Fqa-bot-for-your-docs-with-langchain)是一個雲端開源框架。 它允許您將應用程式的基礎架構和程式碼組合為一個單元,並將它們安全地部署到您首選的雲端提供者。 Wing 讓您可以完全控制應用程式基礎架構的配置方式。除了其易於學習的[程式語言](https://www.winglang.io/docs/language-reference)之外,Wing 還支援 Typescript。 在本教學中,我們將使用 TypeScript。所以,別擔心,您的 JavaScript 和 React 知識足以理解本教學。 ![翼登陸頁面](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u366v255drbwqmcoagrz.png) {% cta https://wingla.ng/github %} 看 Wing ⭐️ {% endcta %} --- 使用 Next.js 建立前端 --------------- 在這裡,您將建立一個簡單的表單,它接受文件 URL 和使用者的問題,然後根據網站的資料回傳回應。 首先,建立一個包含兩個子資料夾的資料夾 - `frontend`和`backend` 。 `frontend`資料夾包含 Next.js 應用程式, `backend`資料夾用於 Wing。 ``` mkdir qa-bot && cd qa-bot mkdir frontend backend ``` 在**`frontend`**資料夾中,透過執行以下程式碼片段來建立 Next.js 專案: ``` cd frontend npx create-next-app ./ ``` ![下一個應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pyq8dnmmmplvzl7g41ir.png) 將下面的程式碼片段複製到`app/page.tsx`檔案中,以建立接受使用者問題和文件 URL 的表單: ``` "use client"; import { useState } from "react"; export default function Home() { const [documentationURL, setDocumentationURL] = useState<string>(""); const [question, setQuestion] = useState<string>(""); const [disable, setDisable] = useState<boolean>(false); const [response, setResponse] = useState<string | null>(null); const handleUserQuery = async (e: React.FormEvent) => { e.preventDefault(); setDisable(true); console.log({ question, documentationURL }); }; return ( <main className='w-full md:px-8 px-3 py-8'> <h2 className='font-bold text-2xl mb-8 text-center text-blue-600'> Documentation Bot with Wing & LangChain </h2> <form onSubmit={handleUserQuery} className='mb-8'> <label className='block mb-2 text-sm text-gray-500'>Webpage URL</label> <input type='url' className='w-full mb-4 p-4 rounded-md border text-sm border-gray-300' placeholder='https://www.winglang.io/docs/concepts/why-wing' required value={documentationURL} onChange={(e) => setDocumentationURL(e.target.value)} /> <label className='block mb-2 text-sm text-gray-500'> Ask any questions related to the page URL above </label> <textarea rows={5} className='w-full mb-4 p-4 text-sm rounded-md border border-gray-300' placeholder='What is Winglang? OR Why should I use Winglang? OR How does Winglang work?' required value={question} onChange={(e) => setQuestion(e.target.value)} /> <button type='submit' disabled={disable} className='bg-blue-500 text-white px-8 py-3 rounded' > {disable ? "Loading..." : "Ask Question"} </button> </form> {response && ( <div className='bg-gray-100 w-full p-8 rounded-sm shadow-md'> <p className='text-gray-600'>{response}</p> </div> )} </main> ); } ``` 上面的程式碼片段顯示了一個表單,該表單接受使用者的問題和文件 URL 並將它們暫時記錄到控制台。 ![QA 機器人表單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b4w3tq0srua93gnk73n.png) 完美的! 🎉您已經完成了應用程式的使用者介面。接下來,讓我們設定 Wing 後端。 --- 如何在電腦上設定 Wing ------------- Wing 提供了一個 CLI,使您能夠在專案中執行各種 Wing 操作。 它還提供[VSCode](https://marketplace.visualstudio.com/items?itemName=Monada.vscode-wing)和[IntelliJ](https://plugins.jetbrains.com/plugin/22353-wing)擴展,透過語法突出顯示、編譯器診斷、程式碼完成和片段等功能增強開發人員體驗。 在繼續之前,請停止 Next.js 開發伺服器並透過在終端機中執行下面的程式碼片段來安裝 Wing CLI。 ``` npm install -g winglang@latest ``` 執行以下程式碼片段以確保 Winglang CLI 已安裝並按預期工作: ``` wing -V ``` 接下來,導航到`backend`資料夾並建立一個空的 Wing Typescript 專案。確保選擇`empty`模板並選擇 Typescript 作為語言。 ``` wing new ``` ![永新](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ezy04zqvz9lura0d25dj.png) 將下面的程式碼片段複製到`backend/main.ts`檔案中。 ``` import { cloud, inflight, lift, main } from "@wingcloud/framework"; main((root, test) => { const fn = new cloud.Function( root, "Function", inflight(async () => { return "hello, world"; }) ); }); ``` **`main()`**函數充當 Wing 的入口點。 它建立一個雲端函數並在編譯時執行。另一方面, **`inflight`**函數在執行時執行並返回`Hello, world!`文字. 透過執行下面的程式碼片段啟動 Wing 開發伺服器。它會自動在瀏覽器中開啟 Wing 控制台,網址為`http://localhost:3000` 。 ``` wing it ``` ![Wing TS 最小控制台](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1ejobkm0dq5akhut732.png) 您已在電腦上成功安裝 Wing。 --- 如何將 Wing 連接到 Next.js 應用程式 ------------------------- 在前面的部分中,您已在`frontend`資料夾中建立了 Next.js 前端應用程式,並在`backend`資料夾中建立了 Wing 後端。 在本部分中,您將了解如何在 Next.js 應用程式和 Wing 後端之間通訊和發送資料。 首先,透過執行以下程式碼在後端資料夾中安裝[Wing React](https://github.com/winglang/winglibs/tree/main/react)函式庫: ``` npm install @winglibs/react ``` 接下來,更新`main.ts`文件,如下所示: ``` import { main, cloud, inflight, lift } from "@wingcloud/framework"; import React from "@winglibs/react"; main((root, test) => { const api = new cloud.Api(root, "api", { cors: true }) ; //👇🏻 create an API route api.get( "/test", inflight(async () => { return { status: 200, body: "Hello world", }; }) ); //👉🏻 placeholder for the POST request endpoint //👇🏻 connects to the Next.js project const react = new React.App(root, "react", { projectPath: "../frontend" }); //👇🏻 an environment variable react.addEnvironment("api_url", api.url); }); ``` 上面的程式碼片段建立了一個 API 端點 ( `/test` ),它接受 GET 請求並傳回`Hello world`文字。 `main`函數也連接到 Next.js 專案並將`api_url`新增為環境變數。 環境變數中包含的 API URL 使我們能夠將請求傳送到 Wing API 路由。我們如何在 Next.js 應用程式中檢索 API URL 並發出這些請求? 更新 Next.js `app/layout.tsx`檔案中的`RootLayout`元件,如下所示: ``` export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <html lang='en'> <head> {/** ---👇🏻 Adds this script tag 👇🏻 ---*/} <script src='./wing.js' defer /> </head> <body className={inter.className}>{children}</body> </html> ); } ``` 透過執行`npm run build`重新建置 Next.js 專案。 最後,啟動Wing開發伺服器。它會自動啟動 Next.js 伺服器,可以在瀏覽器中透過**`http://localhost:3001`**存取該伺服器。 ![控制台到 URL](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t7rkxw9bds97a0qzg5vh.gif) 您已成功將 Next.js 連接到 Wing。您也可以使用`window.wingEnv.<attribute_name>`存取環境變數中的資料。 ![視窗.wingEnv](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0up5430jmxufmyeb9e4h.gif) 使用LangChain和Wing處理用戶請求 ---------------------- 在本節中,您將學習如何向 Wing 發送請求,使用[LangChain 和 OpenA](https://js.langchain.com/docs/get_started/quickstart#llm-chain) I 處理這些請求,並在 Next.js 前端顯示結果。 首先,我們更新 Next.js **`app/page.tsx`**檔案以檢索 API URL 並將使用者資料傳送到 Wing API 端點。 為此,請透過在**`page.tsx`**檔案頂部新增以下程式碼片段來擴充 JavaScript **`window`**物件。 ``` "use client"; import { useState } from "react"; interface WingEnv { api_url: string; } declare global { interface Window { wingEnv: WingEnv; } } ``` 接下來,更新`handleUserQuery`函數以將包含使用者問題和網站URL 的POST 請求傳送到Wing API 端點。 ``` //👇🏻 sends data to the api url const [response, setResponse] = useState<string | null>(null); const handleUserQuery = async (e: React.FormEvent) => { e.preventDefault(); setDisable(true); try { const request = await fetch(`${window.wingEnv.api_url}/api`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ question, pageURL: documentationURL }), }); const response = await request.text(); setResponse(response); setDisable(false); } catch (err) { console.error(err); setDisable(false); } }; ``` 在建立接受 POST 請求的 Wing 端點之前,請在`backend`資料夾中安裝下列套件: ``` npm install @langchain/community @langchain/openai langchain cheerio ``` [Cheerio](https://js.langchain.com/v0.2/docs/integrations/document_loaders/web_loaders/web_cheerio/)使我們能夠抓取軟體文件網頁,而[LangChain 軟體包](https://js.langchain.com/v0.1/docs/get_started/quickstart/)使我們能夠存取其各種功能。 LangChain OpenAI整合包使用OpenAI語言模型;因此,您需要一個有效的 API 金鑰。您可以從[OpenAI 開發者平台](https://platform.openai.com/api-keys)取得。 ![朗查恩](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/omg4o524oklrssso5rqc.png) 接下來,讓我們建立處理傳入請求的`/api`端點。 端點將: - 接受來自 Next.js 應用程式的問題和文件 URL, - 使用[LangChain 文件載入器](https://js.langchain.com/v0.1/docs/modules/data_connection/document_loaders/)載入文件頁面, - 將檢索到的文件分成區塊, - 轉換分塊文件並將它們保存在[LangChain 向量儲存](https://js.langchain.com/v0.1/docs/modules/data_connection/vectorstores/)中, - 並建立一個[檢索器函數](https://js.langchain.com/v0.1/docs/modules/data_connection/),從向量儲存中檢索文件。 首先,將以下內容匯入`main.ts`檔案: ``` import { main, cloud, inflight, lift } from "@wingcloud/framework"; import { ChatOpenAI, OpenAIEmbeddings } from "@langchain/openai"; import { ChatPromptTemplate } from "@langchain/core/prompts"; import { createStuffDocumentsChain } from "langchain/chains/combine_documents"; import { CheerioWebBaseLoader } from "@langchain/community/document_loaders/web/cheerio"; import { RecursiveCharacterTextSplitter } from "langchain/text_splitter"; import { MemoryVectorStore } from "langchain/vectorstores/memory"; import { createRetrievalChain } from "langchain/chains/retrieval"; import React from "@winglibs/react"; ``` 在`main()`函數中加入以下程式碼片段以建立`/api`端點: ``` api.post( "/api", inflight(async (ctx, request) => { //👇🏻 accept user inputs from Next.js const { question, pageURL } = JSON.parse(request.body!); //👇🏻 initialize OpenAI Chat for LLM interactions const chatModel = new ChatOpenAI({ apiKey: "<YOUR_OPENAI_API_KEY>", model: "gpt-3.5-turbo-1106", }); //👇🏻 initialize OpenAI Embeddings for Vector Store data transformation const embeddings = new OpenAIEmbeddings({ apiKey: "<YOUR_OPENAI_API_KEY>", }); //👇🏻 creates a text splitter function that splits the OpenAI result chunk size const splitter = new RecursiveCharacterTextSplitter({ chunkSize: 200, //👉🏻 characters per chunk chunkOverlap: 20, }); //👇🏻 creates a document loader, loads, and scraps the page const loader = new CheerioWebBaseLoader(pageURL); const docs = await loader.load(); //👇🏻 splits the document into chunks const splitDocs = await splitter.splitDocuments(docs); //👇🏻 creates a Vector store containing the split documents const vectorStore = await MemoryVectorStore.fromDocuments( splitDocs, embeddings //👉🏻 transforms the data to the Vector Store format ); //👇🏻 creates a document retriever that retrieves results that answers the user's questions const retriever = vectorStore.asRetriever({ k: 1, //👉🏻 number of documents to retrieve (default is 2) }); //👇🏻 creates a prompt template for the request const prompt = ChatPromptTemplate.fromTemplate(` Answer this question. Context: {context} Question: {input} `); //👇🏻 creates a chain containing the OpenAI chatModel and prompt const chain = await createStuffDocumentsChain({ llm: chatModel, prompt: prompt, }); //👇🏻 creates a retrieval chain that combines the documents and the retriever function const retrievalChain = await createRetrievalChain({ combineDocsChain: chain, retriever, }); //👇🏻 invokes the retrieval Chain and returns the user's answer const response = await retrievalChain.invoke({ input: `${question}`, }); if (response) { return { status: 200, body: response.answer, }; } return undefined; }) ); ``` API 端點接受使用者的問題和來自 Next.js 應用程式的頁面 URL,初始化[`ChatOpenAI`](https://js.langchain.com/v0.2/docs/integrations/chat/openai/)和[`OpenAIEmbeddings`](https://js.langchain.com/v0.2/docs/integrations/text_embedding/openai/) ,載入文件頁面,並以文件的形式檢索使用者查詢的答案。 然後,將文件分割成區塊,將區塊保存在`MemoryVectorStore`中,並使我們能夠使用[LangChain 檢索器](https://js.langchain.com/v0.1/docs/modules/data_connection/)來取得問題的答案。 從上面的程式碼片段來看,OpenAI API金鑰直接輸入到程式碼中;這可能會導致安全漏洞,使 API 金鑰可供攻擊者存取。為了防止這種資料洩露,Wing 允許您將私鑰和憑證保存在名為`secrets`的變數中。 當您建立機密時,Wing 會將此資料保存在`.env`檔案中,確保其安全且可存取。 更新`main()`函數以從 Wing Secret 取得 OpenAI API 金鑰。 ``` main((root, test) => { const api = new cloud.Api(root, "api", { cors: true }); //👇🏻 creates the secret variable const secret = new cloud.Secret(root, "OpenAPISecret", { name: "open-ai-key", }); api.post( "/api", lift({ secret }) .grant({ secret: ["value"] }) .inflight(async (ctx, request) => { const apiKey = await ctx.secret.value(); const chatModel = new ChatOpenAI({ apiKey, model: "gpt-3.5-turbo-1106", }); const embeddings = new OpenAIEmbeddings({ apiKey, }); //👉🏻 other code snippets & configurations ); const react = new React.App(root, "react", { projectPath: "../frontend" }); react.addEnvironment("api_url", api.url); }); ``` - 從上面的程式碼片段來看, ``` - The `secret` variable declares a name for the secret (OpenAI API key). ``` ``` - The [`lift().grant()`](https://www.winglang.io/docs/typescript/inflights#permissions) grants the API endpoint access to the secret value stored in the Wing Secret. ``` ``` - The [`inflight()`](https://www.winglang.io/docs/typescript/inflights) function accepts the context and request object as parameters, makes a request to LangChain, and returns the result. ``` ``` - Then, you can access the `apiKey` using the `ctx.secret.value()` function. ``` 最後,透過在終端機中執行此命令將 OpenAI API 金鑰儲存為機密。 ![翅膀的秘密](https://www.winglang.io/assets/images/qa-bot-wing-secrets-883db5e81515894ae280d77b7f72bb25.gif) 恭喜!您已成功完成本教學的專案。 以下是該應用程式的簡短演示: ![QA 機器人演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ropklqge2xzpibl29vye.gif) --- 讓我們更深入地研究 Wing 文件,看看我們的 AI 機器人可以提取哪些資料。 ![QA 機器人演示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hnmf6n6mszc6go0uiw1v.gif) --- 總結一下 ---- 到目前為止,我們已經討論了以下內容: - 什麼是翼? - 如何使用Wing並使用Langchain查詢資料, - 如何將 Wing 連接到 Next.js 應用程式, - 如何在 Next.js 前端和 Wing 後端之間發送資料。 > [Wing](https://github.com/winglang/wing)旨在恢復您的創意流並縮小想像力與創造之間的差距。 Wing 的另一個巨大優勢是它是開源的。因此,如果您希望建立利用雲端服務的分散式系統或為雲端開發的未來做出貢獻, [Wing](https://github.com/winglang/wing)是您的最佳選擇。 請隨意為[GitHub 儲存庫做出貢獻,](https://github.com/winglang/wing)並與團隊和大型開發人員社群[分享您的想法](https://t.winglang.io/discord)。 本教學的源程式碼可[在此處](https://github.com/NathanTarbert/wing-langchain-nextjs)取得。 感謝您的閱讀! 🎉 --- 原文出處:https://dev.to/winglang/build-a-qa-bot-for-your-documentation-with-langchain-27i4

加入我們參加 Twilio 挑戰:獎品為 5,000 美元!

--- 標題:加入我們參加 Twilio 挑戰:獎品為 5,000 美元! 發表:真實 描述: 標籤: devchallenge, twiliochallenge, ai, twilio 封面圖:https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tvm2d9d8gdp37qxv0lu9.png 使用 100:42 的比例可獲得最佳效果。 ===================== 發表於: 2024-06-04 18:10 +0000 =========================== --- 我們很高興與[Twilio](https://www.twilio.com/try-twilio?utm_campaign=Developer&utm_medium=partner&utm_source=twilio&utm_content=Twilio_AI_Challenge_June_12th_2024)合作應對新的開發挑戰。 [Twilio 挑戰賽](https://dev.to/challenges/twilio)將持續到**6 月 23 日**,旨在將 AI 的力量與 Twilio 的魔力相結合。我們對這項挑戰有一個提示,但有四種獲勝方法。 從訊息傳遞到語音智能,再到介於兩者之間的一切,Twilio 是全球通訊的首選平台,每個開發人員都應該擁有使用該平台進行建置的經驗。用您想要的任何語言發揮您的創造力和人工智慧技能,並為您的作品集加入另一個令人印象深刻的專案! 我們的提示 ----- 對於這項挑戰,您的任務是**利用 Twilio 建立人工智慧驅動的體驗**。 您可以自由使用*任何*Twilio 產品和*任何*第三方 AI 工具/API - 世界盡在掌握!對於不想從頭開始的人,我們鼓勵您在現有 Twilio 專案的基礎上進行建置,只要在其中加入新的 AI 元素即可。 對於那些想要一些激勵準則的人,我們還提供了三個額外的獎項類別供您考慮...😉 ### 獎項類別 - **Twilio Times Two** :授予使用兩個或更多 Twilio API 的最佳提交作品。 - **有影響力的創新者**:授予能夠產生正面影響(社會、環境等)的最佳提交作品。 - **娛樂性努力**:授予突破創造力界限並給我們帶來歡笑的最佳提交作品。 獎品 -- 我們的即時獲勝者 (1) 將收到: - 2,000 美元 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 我們的獎項類別獲獎者 (3) 將獲得: - 1,000 美元 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **所有提交有效提交的參與者都**將在其 DEV 個人資料中收到完成徽章。 {% 卡 %} 如何參與 ---- 為了參與,您需要使用提供的提交範本發布貼文。所有提交的內容必須至少使用一種 Twilio 產品並包含第三方 AI 工具。 - 您不需要信用卡即可註冊 Twilio。除了為新帳戶提供 15 美元的免費試用之外,Twilio 團隊還向所有參與者提供 20 美元的促銷程式碼: `twilio-ai-devto-8jrmm`以使用他們的服務。 - 您可以將任何第三方人工智慧工具納入您提交的內容中。以下是提供強大免費套餐的幾個選項: - [Google Gemini](https://ai.google.dev/gemini-api) - [Cloudflare Workers AI](https://developers.cloudflare.com/workers-ai/platform/pricing) 我們迫不及待想看看您建造了什麼! {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20devchallenge%2C%20twiliochallenge%2C%20ai%2C%20twilio%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BTwilio%20Challenge%20%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Ftwilio)* %0A%0A%23 % 23%20What%20I%20Built%0A%3C!--%20Share%20an%20overview%20about%20your%20project.%20--%3E%0A%0A%23%23%20Demo%0A%3C!- - %20在此處共享%20a%20連結%20至%20您的%20app%20和%20包括%20some%20螢幕截圖%20。 %20Twilio%20和%20AI%0A%3C! -- %20告訴%20us%20如何%20you%20槓桿%20Twilio%E2%80%99s%20capability%20with%20AI%20--%3E%0A% 0A%23%23%20額外%20獎品%20類別%0A%0A%3C !--%20Does%20your%20submission%20qualify%20for%20any%20additional%20prize%20categories%20(Twilio%20Times% 2C%20Impactful%20Innovators%2C%20Entertaining%20Endeavors)%3F%20Please%20list%20all %20that%20申請。 %20%20--%3E%0A%0A%3C! 20請%20pick%20one%20member%20to%20publish%20the%20submission%20and%20credit%20隊友%20by%20listing%20他們的%20DEV%20用戶名%20直接%20in%20the%20the% %20post。 -%3E%0A%0A%3C! --%20感謝%20%20的參與! Twilio 挑戰提交模板 {% 結束%} {% 結束卡 %} 請在提交之前查看我們的[評審標準、規則、指南和常見問題解答頁面,](https://dev.to/challenges/twilio)以便您了解我們的參與指南和[官方競賽規則](https://dev.to/page/twilio-challenge-v24-06-12-contest-rules)(例如資格要求)。 ### 額外的樂趣 - Twilio CodeExchange 我們鼓勵每個人將他們的專案提交到[Twilio 的 CodeExchange](https://www.twilio.com/code-exchange) ,以獲得獲得推薦的機會! {% cta https://airtable.com/appqkdf4m2vJ79wYv/pagtYQ96ZVKZENMXZ/form %} Twilio CodeExchange 提交表 {% 結束%} 試試看也沒什麼不好:) 需要幫忙? ----- 透過利用 Twilio 的文件、教學和部落格文章來了解 Twilio。 - [快速入門指南](https://www.twilio.com/docs/usage/quickstart) - [開發者文件](https://www.twilio.com/docs) {% 嵌入 https://dev.to/twilio %} 重要的日子 ----- - 6 月 12 日:Twilio 挑戰賽開始! - 6 月 23 日:提交截止時間為太平洋夏令時間晚上 11:59 - 6 月 25 日:公佈得獎者 我們迫不及待想看看您建造了什麼!對挑戰有疑問嗎?請在下面詢問他們。 祝你好運,編碼愉快! --- 原文出處:https://dev.to/devteam/join-us-for-the-twilio-challenge-5000-in-prizes-4fdi

進階 SQL:掌握查詢最佳化和複雜連接

大家好,願神的平安、憐憫、祝福臨到你們 SQL(結構化查詢語言)是管理和操作關係資料庫的重要工具。雖然基本的 SQL 技能可以幫助您入門,但高級 SQL 技術可以大大增強您處理複雜查詢和優化資料庫效能的能力。本文深入探討高階 SQL 主題,重點在於複雜的查詢最佳化策略、高階聯結類型以及`SELECT`語句的複雜性。 ### 進階查詢最佳化技術 最佳化 SQL 查詢是資料庫管理員和開發人員的關鍵技能。進階查詢最佳化超越了基本索引和查詢重構,還包括一系列複雜的技術。 #### 1. 查詢執行計劃 了解查詢的執行計劃對於最佳化至關重要。執行計劃顯示 SQL 引擎如何執行查詢,揭示潛在的瓶頸。 - **EXPLAIN** : `EXPLAIN`語句提供對查詢執行方式的深入了解,使您能夠辨識效率低下的情況。 ``` EXPLAIN SELECT column1, column2 FROM table_name WHERE condition; ``` - **ANALYZE** : `ANALYZE`語句與`EXPLAIN`結合使用,執行查詢並提供執行時統計訊息,從而更深入地了解查詢性能。 ``` EXPLAIN ANALYZE SELECT column1, column2 FROM table_name WHERE condition; ``` #### 2. 子查詢最佳化 子查詢有時可以替換為更有效率的聯結或`WITH`子句(通用表表達式)。 - **用連接替換子查詢**: ``` -- Subquery SELECT * FROM table1 WHERE column1 IN (SELECT column1 FROM table2); -- Equivalent Join SELECT table1.* FROM table1 INNER JOIN table2 ON table1.column1 = table2.column1; ``` - **使用通用表格表達式 (CTE)** : ``` WITH CTE AS ( SELECT column1, column2 FROM table_name WHERE condition ) SELECT * FROM CTE WHERE another_condition; ``` #### 3. 索引策略 進階索引策略包括使用複合索引和覆蓋索引。 - **複合索引**:包含多個欄位的索引可以加快對這些欄位進行篩選的查詢速度。 ``` CREATE INDEX idx_composite ON table_name (column1, column2); ``` - **覆蓋索引**:包含查詢檢索到的所有列的索引可以顯著提高效能。 ``` CREATE INDEX idx_covering ON table_name (column1, column2, column3); ``` #### 4. 分區 將大表劃分為更小、更易於管理的部分可以透過限制掃描的資料量來提高查詢效能。 - **範圍劃分**: ``` CREATE TABLE orders ( order_id INT, order_date DATE, ... ) PARTITION BY RANGE (order_date) ( PARTITION p0 VALUES LESS THAN ('2024-01-01'), PARTITION p1 VALUES LESS THAN ('2025-01-01'), ... ); ``` - **哈希分區**:根據雜湊函數將資料分佈在指定數量的分區上,提供均勻分佈。 ``` CREATE TABLE users ( user_id INT, username VARCHAR(255), ... ) PARTITION BY HASH(user_id) PARTITIONS 4; ``` - **清單分區**:根據值清單將資料劃分為多個分區。 ``` CREATE TABLE sales ( sale_id INT, region VARCHAR(255), ... ) PARTITION BY LIST (region) ( PARTITION p0 VALUES IN ('North', 'South'), PARTITION p1 VALUES IN ('East', 'West') ); ``` #### 5. 物化視圖 物化視圖實體儲存查詢結果,並且可以定期刷新,從而提高頻繁執行的複雜查詢的效能。 - **建立物化視圖**: ``` CREATE MATERIALIZED VIEW sales_summary AS SELECT region, SUM(sales_amount) AS total_sales FROM sales GROUP BY region; ``` - **刷新物化視圖**: ``` REFRESH MATERIALIZED VIEW sales_summary; ``` 筆記: --- 在 MySQL 中,存在視圖,但物化視圖本身並不存在。 MySQL支援標準視圖,這些視圖是儲存查詢定義並在查詢時動態產生結果集的虛擬表。但是,它沒有對物化視圖的內建支持,物化視圖物理儲存結果集。 ### MySQL 中的視圖 #### 建立視圖 您可以使用`CREATE VIEW`語句在 MySQL 中建立視圖。這是一個例子: ``` CREATE VIEW ActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; ``` 這將建立一個名為`ActiveCustomers`的視圖,其中僅包含`Customers`表中的活動客戶。查詢此視圖如下所示: ``` SELECT * FROM ActiveCustomers; ``` #### 更新視圖 可以使用`CREATE OR REPLACE VIEW`語句更新檢視: ``` CREATE OR REPLACE VIEW ActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active' AND Country = 'USA'; ``` 這會將`ActiveCustomers`檢視修改為僅包含來自美國的活躍客戶。 #### 刪除視圖 您可以使用`DROP VIEW`語句刪除檢視: ``` DROP VIEW ActiveCustomers; ``` #### MySQL 中的物化視圖 MySQL 本身不支援物化視圖,但有一些變通方法可以實現類似的功能。這裡有幾種方法: ##### 1. 使用表格和計劃更新 一種常見的方法是建立一個表來儲存查詢結果並使用計劃事件(cron 作業)或觸發器定期更新它。 ##### 建立表 首先,建立一個表格來儲存結果: ``` CREATE TABLE MaterializedActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; ``` ##### 更新表格 使用計劃事件定期更新表。此範例使用 MySQL 事件每小時更新一次表格: ``` CREATE EVENT UpdateMaterializedActiveCustomers ON SCHEDULE EVERY 1 HOUR DO BEGIN DELETE FROM MaterializedActiveCustomers; INSERT INTO MaterializedActiveCustomers SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; END; ``` 此事件每小時都會清除`MaterializedActiveCustomers`表並使用最新的活躍客戶重新填充。 ##### 2. 使用觸發器 另一種方法是使用觸發器使表與基底表保持同步。然而,這可能會變得複雜,對於大型資料集可能效率不高。 #### 使用觸發器的範例 ##### 建立表 首先,建立表: ``` CREATE TABLE MaterializedActiveCustomers AS SELECT CustomerID, CustomerName, ContactName, Country FROM Customers WHERE Status = 'Active'; ``` ##### 建立觸發器 建立觸發器以保持物化表更新: ``` DELIMITER // CREATE TRIGGER after_customer_insert AFTER INSERT ON Customers FOR EACH ROW BEGIN IF NEW.Status = 'Active' THEN INSERT INTO MaterializedActiveCustomers (CustomerID, CustomerName, ContactName, Country) VALUES (NEW.CustomerID, NEW.CustomerName, NEW.ContactName, NEW.Country); END IF; END // CREATE TRIGGER after_customer_update AFTER UPDATE ON Customers FOR EACH ROW BEGIN IF OLD.Status = 'Active' AND NEW.Status != 'Active' THEN DELETE FROM MaterializedActiveCustomers WHERE CustomerID = OLD.CustomerID; ELSEIF NEW.Status = 'Active' THEN REPLACE INTO MaterializedActiveCustomers (CustomerID, CustomerName, ContactName, Country) VALUES (NEW.CustomerID, NEW.CustomerName, NEW.ContactName, NEW.Country); END IF; END // CREATE TRIGGER after_customer_delete AFTER DELETE ON Customers FOR EACH ROW BEGIN DELETE FROM MaterializedActiveCustomers WHERE CustomerID = OLD.CustomerID; END // DELIMITER ; ``` 這些觸發器將確保`MaterializedActiveCustomers`表隨著`Customers`表的變更而保持更新。 #### 結論 雖然 MySQL 支援視圖,但它本身不支援物化視圖。但是,您可以使用具有計劃更新或觸發器的表來實現類似的功能。透過使用這些解決方法,您可以維護可以快速查詢的預先計算的結果,類似於其他資料庫系統中的物化視圖。 ### 高級連接類型和技術 連接是 SQL 的基礎,它允許您組合多個表中的資料。除了基本連接之外,高級連接技術還可以處理更複雜的需求。 #### 1. 自加入 自連接是一種常規連接,但表與自身連接。它對於比較同一表中的行很有用。 ``` SELECT a.employee_id, a.name, b.name AS manager_name FROM employees a INNER JOIN employees b ON a.manager_id = b.employee_id; ``` #### 2. 橫向連接 `LATERAL`連線允許子查詢在`FROM`子句中引用前面表格中的欄位。這對於更複雜的查詢很有用。 ``` SELECT a.*, b.* FROM table1 a LEFT JOIN LATERAL ( SELECT * FROM table2 b WHERE b.column1 = a.column1 ORDER BY b.column2 DESC LIMIT 1 ) b ON TRUE; ``` #### 3. 使用 COALESCE 進行完全外部連接 處理需要完整外連接但希望避免結果中出現`NULL`值的情況。 ``` SELECT COALESCE(a.column1, b.column1) AS column1, a.column2, b.column2 FROM table1 a FULL OUTER JOIN table2 b ON a.column1 = b.column1; ``` #### 4. 進階連接過濾器 在連接中應用複雜的條件以更精確地過濾結果。 ``` SELECT a.column1, b.column2 FROM table1 a INNER JOIN table2 b ON a.column1 = b.column1 AND a.date_column BETWEEN '2023-01-01' AND '2023-12-31'; ``` #### 5. 反連接和半連接 這些連接分別對於排除和包含查詢很有用。 - **反連接**:從左表中檢索右表中沒有匹配行的行。 ``` SELECT a.* FROM table1 a LEFT JOIN table2 b ON a.column1 = b.column1 WHERE b.column1 IS NULL; ``` - **半連接**:從左表中檢索右表中存在一個或多個匹配項的行。 ``` SELECT a.* FROM table1 a WHERE EXISTS (SELECT 1 FROM table2 b WHERE a.column1 = b.column1); ``` ### 高級`SELECT`語句 `SELECT`語句可以透過進階功能進行擴展,以滿足複雜的資料檢索要求。 #### 1. 視窗函數 視窗函數對與目前行相關的一組表行執行計算,提供強大的分析功能。 - **行號**: ``` SELECT column1, column2, ROW_NUMBER() OVER (PARTITION BY column1 ORDER BY column2) AS row_num FROM table_name; ``` - **執行總計**: ``` SELECT column1, column2, SUM(column2) OVER (ORDER BY column1) AS running_total FROM table_name; ``` - **排行**: ``` SELECT column1, column2, RANK() OVER (PARTITION BY column1 ORDER BY column2) AS rank FROM table_name; ``` - **移動平均線**: ``` SELECT column1, column2, AVG(column2) OVER (PARTITION BY column1 ORDER BY column2 ROWS BETWEEN 1 PRECEDING AND 1 FOLLOWING) AS moving_avg FROM table_name; ``` #### 2. 遞迴 CTE 遞歸 CTE 可讓您執行遞歸查詢,這對於分層資料很有用。 ``` WITH RECURSIVE cte AS ( SELECT column1, column2 FROM table_name WHERE condition UNION ALL SELECT t.column1, t.column2 FROM table_name t INNER JOIN cte ON t.column1 = cte.column1 ) SELECT * FROM cte; ``` #### 3.JSON函數 現代 SQL 資料庫通常包含處理 JSON 資料的函數,可讓您儲存和查詢 JSON 文件。 - **提取 JSON 值**: ``` SELECT json_column->>'key' AS value FROM table_name; ``` - **聚合成 JSON** : ``` SELECT json_agg(row_to_json(t)) FROM (SELECT column1, column2 FROM table_name) t; ``` - **更新 JSON 資料**: ``` UPDATE table_name SET json_column = jsonb_set(json_column, '{key}', '"new_value"', true) WHERE condition; ``` #### 4. 資料透視 透視將行轉換為列,提供了一種重新組織和匯總資料以用於報告目的的方法。 - **使用 CASE 語句進行透視**: ``` SELECT category, SUM(CASE WHEN year = 2021 THEN sales ELSE 0 END) AS sales_2021, SUM(CASE WHEN year = 2022 THEN sales ELSE 0 END) AS sales_2022 FROM sales_data GROUP BY category; ``` #### 5.動態SQL 動態 SQL 允許在執行時間建立和執行 SQL 語句,為需要動態產生的複雜查詢提供靈活性。 - **執行動態SQL** : ``` EXECUTE 'SELECT * FROM ' || table_name || ' WHERE ' || condition; ``` - **使用準備好的語句**: ``` PREPARE stmt AS SELECT * FROM table_name WHERE column1 = $1; EXECUTE stmt('value'); ``` ### 結論 掌握進階 SQL 技術可以讓您最佳化資料庫效能並輕鬆處理複雜查詢。了解執行計劃、利用高階聯結、利用複雜的`SELECT`語句、實作進階索引策略是精通 SQL 的關鍵。透過將這些技術整合到您的工作流程中,您可以顯著提高資料庫驅動應用程式的效率和可擴展性。 進階 SQL 技能可讓您處理複雜的資料操作和檢索任務,確保您的應用程式能夠有效率且有效地處理大量資料。無論您是資料庫管理員、開發人員還是資料分析師,這些進階 SQL 技術都將使您能夠充分利用關聯式資料庫,從而獲得更好的效能、更深入的見解和更強大的應用程式。 --- 原文出處:https://dev.to/bilelsalemdev/advanced-sql-mastering-query-optimization-and-complex-joins-4gph

加入我們參加下一個前端挑戰:六月版

等待已經結束!我們又帶著另一場前端挑戰賽回來了。 持續到**6 月 9 日**,前端挑戰:六月版將提供兩個六月主題提示: **CSS Art**和**Glam Up My Markup** 。對於那些錯過“一位元組解釋器”的人,我們保證很快就會恢復該提示! 像往常一樣,每個提示都會有一名獲勝者。這是贏得吹牛權利的兩次機會、DEV 商店的禮物和專屬 DEV 徽章。 另外,如果您不知道 - 徽章可以疊加在您的個人資料上以炫耀多次獲勝!但當然,這不是關於獲勝的目的地,而是關於*旅程*。我們希望這是一個挑戰自我並享受樂趣的機會。 繼續閱讀以了解每個提示以及如何參與! 我們的兩個提示: -------- ### CSS 藝術:六月 畫出您想到六月時想到的事情。根據您居住的地方,這可能是夏至或落葉和冬季的過渡。或者也許是父親節或驕傲月。 當您想到六月時,您會想到什麼,請告訴我們! 這是供任何想要直接參與的人使用的提交模板,但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/frontend-2024-05-29)上的所有評審標準和挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20frontendchallenge%2C%20devchallenge%2C%20css%0A---% 0A%0A\_This%20is%20a%20submission%20for%20%5BFrontend%20Challenge%20v24.04.17%5D(https%3A%2F%2Fdev.to%2Fchallenges%2Ffrontend-2024-05-202020CSS% %3A%20June.\_%0A%0A%23%23%20靈感%0A%3C! --%20什麼%20是%20you%20highlighting%20today%3F%20--%3E%0A%0A%23 %23% 20Demo%20%0A%3C!--%20Show%20us%20your%20CSS%20Art!%20You%20can%20直接%20embed%20an%20editor%20into%20this%20post%20(%200%20(%20the%參見20FAQ%20section% 20of%20the%20challenge%20page)%20or%20you%20can%20share%20an%20image%20of%20your%20project%20and%20share%20a%200%20link%200%200%。 20--%3E% 0A%0A%23%23%20旅程%20%0A%3C!--%20告訴%20us%20about%20your%20process%2C%20what%20you%20learned%2C%20anything%20you %20are%20尤其%20proud%20of %2C%20what%20you%20hope%20to%20do%20next%2C%20etc.%20--%3E%0A%0A%3C!--%20Team%20Submissions%3A% 20Please%20pick%20one%20member%20to %20發布%20the%20submission%20和%20credit%20隊友%20by%20listing%20他們的%20DEV%20用戶名%20直接%20in%20the% 20the%20post。 20。 )。 CSS 藝術提交模板 {% 結束%} ### 讓我的標記變得迷人:海灘 使用 CSS 和 JavaScript 使下面的入門 HTML 標記美觀、互動且有用。我們提供了一個網站的入門模板,其中列出了世界上最好的海灘以及每個海灘的一些資訊。由於該模板不包含照片,因此您可能需要發揮創意,使其具有視覺吸引力。 您提交的內容應該比我們提供的 HTML 更有趣、更具互動性,但也應該可用且易於存取。您不應直接編輯提供的 HTML,除非是透過 JavaScript。我們期待風格和實質。您可以加入基本樣板,包括元標記等以用於演示目的。 ``` <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Best Beaches in the World</title> </head> <body> <header> <h1>Best Beaches in the World</h1> </header> <main> <section> <h2>Take me to the beach!</h2> <p>Welcome to our curated list of the best beaches in the world. Whether you're looking for serene white sands, crystal-clear waters, or breathtaking scenery, these beaches offer a little something for everyone. Explore our top picks and discover the beauty that awaits you.</p> </section> <section> <h2>Top Beaches</h2> <ul> <li> <h3>Whitehaven Beach, Australia</h3> <p>Located on Whitsunday Island, Whitehaven Beach is famous for its stunning white silica sand and turquoise waters. It's a perfect spot for swimming, sunbathing, and enjoying the natural beauty of the Great Barrier Reef.</p> </li> <li> <h3>Grace Bay, Turks and Caicos</h3> <p>Grace Bay is known for its calm, clear waters and powdery white sand. This beach is ideal for snorkeling, diving, and enjoying luxury resorts that line its shore.</p> </li> <li> <h3>Baia do Sancho, Brazil</h3> <p>Baia do Sancho, located on Fernando de Noronha island, offers stunning cliffs, vibrant marine life, and crystal-clear waters, making it a paradise for divers and nature lovers.</p> </li> <li> <h3>Navagio Beach, Greece</h3> <p>Also known as Shipwreck Beach, Navagio Beach is famous for the rusting shipwreck that rests on its sands. Accessible only by boat, this secluded cove is surrounded by towering cliffs and azure waters.</p> </li> <li> <h3>Playa Paraiso, Mexico</h3> <p>Playa Paraiso, located in Tulum, offers pristine white sands and turquoise waters against the backdrop of ancient Mayan ruins. It's a perfect blend of history and natural beauty.</p> </li> <li> <h3>Anse Source d'Argent, Seychelles</h3> <p>Anse Source d'Argent is renowned for its unique granite boulders, shallow clear waters, and soft white sand. This beach is perfect for photography, snorkeling, and relaxation.</p> </li> <li> <h3>Seven Mile Beach, Cayman Islands</h3> <p>Stretching for seven miles, this beach offers soft coral sand, clear waters, and numerous activities such as snorkeling, paddleboarding, and enjoying beachside restaurants and bars.</p> </li> <li> <h3>Bora Bora, French Polynesia</h3> <p>Bora Bora is known for its stunning lagoon, overwater bungalows, and vibrant coral reefs. It's a perfect destination for honeymooners and those seeking luxury and tranquility.</p> </li> <li> <h3>Lanikai Beach, Hawaii</h3> <p>Lanikai Beach features powdery white sand and calm, clear waters, making it a favorite for swimming, kayaking, and enjoying the scenic views of the Mokulua Islands.</p> </li> <li> <h3>Pink Sands Beach, Bahamas</h3> <p>Pink Sands Beach is famous for its unique pink-hued sand, clear waters, and serene atmosphere. It's an idyllic spot for beachcombing, swimming, and relaxing in paradise.</p> </li> </ul> </section> </main> </body> </html> ``` 這是供任何想要直接參與的人使用的提交模板,但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/frontend-2024-05-29)上的所有評審標準和挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20devchallenge%2C%20frontendchallenge%2C%20css%2C%20javascript%2C%20frontendchallenge%2C%20css%2C%20javascript%0Ajava ---%0A%0A\_This%20is%20a%20submission%20for%20%5BFrontend%20Challenge%20v24.04.17%5D((https%3A%2F%2Fdev.to%2Fchallenges%2FF-202F%2F%2Fdev.to%2Fchallenges%2FF-202F-frontend5-294-front05-29)% 2C%20Glam%20Up%20My%20Markup%3A%20Beaches\_%0A%0A%23%23%20What%20I%20Built%0A%0A%3C!--%20告訴%20us%20what%20you%20what0%200and% 20what %20you%20were%20looking%20to%20實作。 20direct% 20將%20an%20editor%20嵌入%20this%20post%20(參見%20the%20challenge%20頁的%20the%20FAQ%20section%20)%20或%20you%20can%20share%20an%% 20of%20your%20project%20和%20share%20a%20public%20link%20到%20the%20碼。告訴%20us%20about%20your%20process%2C %20what%20you%20已學會%2C%20anything%20you%20are%20尤其%20proud%20of%2C%20what%20you%20hope%20to%20what%20next20what%20you%20hope%20to%20what%C %20etc.%20--%3E%0A%0A% 3C! --%20Team%20Submissions%3A%20請%20pick%20one%20member%20to%20publish%20the%20submission%20and%20ammacre%20and%200%20and%200%20and%200%20and%200%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%20and%207%。 20listing%20their%20DEV%20usernames%20directly%20in%20the%20body %20of%20the%20post。%20--%3E%0A%0A%3C! 20考慮%20為%20您的%20程式碼加入%20a%20許可證%20。 %20cover%20image%20to%20your%20post%20(如果%20you%20想要)。 --%3E %} 使我的標記提交模板更加迷人 {% 結束%} 如何參與 ---- 為了參與,您需要使用與每個提示關聯的提交範本來發布貼文。 請在提交之前查看我們的[評審標準、規則、指南和常見問題解答頁面,](https://dev.to/challenges/frontend-2024-05-29)以便您了解我們的參與指南和官方競賽規則(例如資格要求)。 重要的日子 ----- - 5 月 29 日:前端挑戰:六月版開始! - 6 月 9 日:提交截止時間為太平洋夏令時間晚上 11:59 - 6 月 11 日:得獎者公佈 ![驕傲月快樂](https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExemNkZWg1YTQ5dWw3Mmg1Z2tpdTdzbnM3c2Zocm1obmwzajBxYXgzNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/4C0NVY0fI5OOuTOCUe/giphy.gif) 我們很高興看到您六月的專案!問題?請在下面詢問他們。 祝你好運,編碼愉快! --- 原文出處:https://dev.to/devteam/join-us-for-the-next-frontend-challenge-june-edition-3ngl

可以使用 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

如何在 2024 年找到一份 Web 開發人員工作(不死不休)🧑‍💻💀

嘿,我是文斯... ========= ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az8xf61b2qxx1msfo4t5.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/az8xf61b2qxx1msfo4t5.png) 我是一名自學成才的開發人員,在新冠疫情期間改變了職業生涯。透過在空閒時間學習和建構、參加黑客馬拉松以及為開發人員建立教育內容,我能夠從教育轉向 Web 開發。 當我找到第一份開發工作時,儘管我決心成為高級工程師,但我還是從一個薪水非常低的「實習生」職位開始。雖然這並不理想,但它讓我在工作中學習並踏入了大門。 一年後,經過一番努力,我得到了一個更好的職位,薪水是以前的三倍! 🤯 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sf1fhsgwuurkre9a7drq.png) 如今,我目前擔任[Wasp](https://wasp-lang.dev)的創始開發人員關係工程師,負責建置[OpenSaaS.sh](http://opensaas.sh/)等內容,這是一個適用於 React 和 NodeJS 的免費開源 SaaS 入門模板,以及 Stripe、OpenAI 和 AWS S3 整合。它基於我從建立第一個盈利的 SaaS 應用程式[CoverLetterGPT.xyz](http://coverlettergpt.xyz/)中學到的知識,該應用程式目前擁有 100 多個客戶,每月收入約 500 美元!沒什麼瘋狂的,但我仍然感到自豪。 現在,我目前擔任開發人員的角色,社群中的人們經常向我詢問有關找到技術工作的建議。考慮到這一點,並結合我過去的經驗,我想我應該寫一篇綜合文章,分享我所學到的和認為最有效的方法。 享受! 2024 年開發人員目前就業市場 ================ 首先,讓我們快速了解一下目前軟體開發人員的就業市場。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lmohbs24ds94kwxo9dt.png) 如果您花時間在 Reddit 或[X.com](http://X.com) (又名 Twitter)上,那麼您可能會看到人們抱怨當前的開發人員就業市場有多糟糕。 為了嘗試找到一些實際的統計資料來支持這些說法,我使用[Perplexity.ai](http://Perplexity.ai)來幫助我找到一些有關軟體開發人員當前需求的訊息,我對結果感到驚訝。 顯然,對軟體開發人員的需求仍然很高,事實上**,平均需求高於其他工作,並且[預計在未來幾年將增長更多](https://icts.io/2024/02/01/5-predictions-on-software-development-jobs-in-2024)**! 那麼,為什麼現在有些開發商感覺比平常更難找到工作呢? 嗯,那是因為它實際上*更難*,但前提是您是經驗不足的開發人員。 另一方面,如果您是一位經驗豐富的開發人員,擁有豐富的工作經驗,那麼還有更多的空缺職位可供您選擇。但如果您是剛起步的初級開發人員,競爭將比以往更加激烈。 原因如下: 1. **所需技能的複雜性**:軟體開發越來越複雜,需要廣泛的技能,這使得[許多候選人很難滿足工作要求](https://nxtide.com/the-global-shortage-of-software-developers-and-its-serious-implication-in-the-comming-years/)。 2. **遠距工作趨勢**:向遠距工作的轉變擾亂了入門級開發人員管道,[使公司更難找到和培訓新人才。](https://www.revelo.com/blog/software-developer-shortage-us) 3. **經濟因素**:疫情和隨後的經濟變化導致[招聘模式波動,在某些時期出現大量裁員,隨後需求激增](https://icts.io/2024/02/01/5-predictions-on-software-development-jobs-in-2024)。 基本上,儘管對經驗豐富的開發人員的需求很高,但對經驗不足的開發人員的需求相對較低。 因此,由於初級和中級工程師的供應相對較多,都在競爭相同的工作,您如何才能獲得經驗豐富的開發人員的技能並讓自己脫穎而出? 成為問題解決者,而不僅僅是編碼員 ================ 軟體開發職業意味著變化是永恆的。你必須隨時準備好學習新事物並走出你的舒適區,因為, 1. 工作需要它,並且 2. 該行業以極快的速度發展 在這樣的環境中,憑證、課程和學位(在某種程度上)就不那麼重要了,因為它們不能證明你具備適應和解決出現的新問題所需的技能。當然,它們證明您擁有一定數量的基礎知識,但這只是工作所需技能的一小部分。 您希望能夠透過以下方式證明您可以應對以前從未遇到過的挑戰: - 快速了解這個新主題, - 找到合適的方法來解決它,並且 - 快速執行該方法以實現您的目標 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lbjy6ikx8iy9lb3ngx5.png)](https://www.tiktok.com/@techfren/video/7361777687158983943) 但不要只是從我這裡奪走它。 AJ,又名[TikTok 上的 Techfren](https://www.tiktok.com/@techfren/video/7361777687158983943) ,談論如何在後人工智慧世界中駕馭當前的工作環境。他在這裡提出了一些與本文相關的好觀點。例如: 1. 一般的編碼知識甚至不太相關,因為人工智慧擁有非常廣泛的編碼知識。作為一名工程師,你不再有價值,因為你知道如何編碼——人工智慧現在知道如何很好地編碼(並使用比你更多的程式語言)。**你的價值在於批判性思考、解決問題以及為這些問題建立解決方案。** 2. 企業將開始更多地尋找這些通才問題解決者來建立內部應用程式(即內部工具)作為付費服務的替代品,以節省資金並滿足其特定的業務需求,因為人工智慧使開發人員能夠提高工作效率。 因此,很明顯,解決問題的技能需求量很大,並且在未來將繼續變得更加重要。我們可以假設更有經驗、更受歡迎的開發人員擁有這些技能,那麼我們該如何自己建立它們呢? 解決自己的問題 ======= 好的。因此,您認為自己是一位充滿好奇心的開發人員,能夠快速適應和學習新事物,並即時解決問題。 但你要如何向未來的雇主證明這一點呢? 簡單的。只解決自己的問題!在實踐中 - 在 Web 開發領域 - 這意味著「處於舒適區的邊緣」並建立適合您和您的興趣的獨特 Web 應用程式。 [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n06z1ktgs70g5c7cv2r7.png)](https://tiktok.com/@cameronblackwoodcode/video/7364455582981524768) 自學成才的工程師和內容創作者卡梅倫·布萊克伍德 (Cameron Blackwood) 在他的[TikTok 影片中完美地描述了這一點,為新開發人員提供如何提高技能的建議](https://tiktok.com/@cameronblackwoodcode/video/7364455582981524768)。他也擁有獨特的視角,因為他之前擔任過技術招募人員,他說: - 建立一個網頁應用程式來解決您日常生活中遇到的問題 - 嘗試與您目前在日常工作中學習/做的事情不同的事情。 - 在空閒時間繼續建構和嘗試新事物。 當然,您製作的這些應用程式不一定是完美的,但它們越獨特,就越能展示出對問題的創造性和良好實現的解決方案,就越好。 如果您在思考要建立的東西時遇到困難,有時只需嘗試新工具即可激發新想法。但無論你決定如何處理它,都取決於你自己,重要的是開始,所以開始吧! --- 順便說一句, [Wasp](https://wasp-lang.dev)是輕鬆建立解決您獨特問題的新應用程式的好方法。這也是在 React 和 NodeJS 中建立客製化全端應用程式的最快方法之一,而無需為身份驗證、路由、端到端類型安全性、部署等編寫一堆樣板程式碼。 作為示例,請觀看此影片,該影片向您展示了在整個應用程式中實施全端身份驗證是多麼容易。 https://www.youtube.com/watch?v=Qiro77q-ulI 做繁重的工作 ====== ![好的](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExa2s1d3J6dmQ2ZHc3b2RsYXQxdnFhOWR5Z3licmhjajdxZ2N3anBsOCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/AYECTMLNS4o67dCoeY/giphy.gif) 當我寫這篇文章時,我很幸運地看到了[Jonathan Stern 的這條推文](https://x.com/jonathanrstern/status/1792220536837230723),他在推文中談到了他在開始第一份開發工作時發現非常有價值的建議。 在那份工作之前,Jonathan 給 Replit 的執行長[Amjad Masad](https://x.com/amasad)寫了一封電子郵件,並在開始他作為軟體開發人員的第一份工作時尋求建議。 阿姆賈德是這麼說的: > 證明自己並讓自己變得不可或缺的兩種方法: > > 1. 具有令人難以置信的生產力和創造力——這在剛開始時很難做到 > > 2. 做無人願意做的無聊工作 > > 2 適合每個人,它只需要努力和紀律,但沒有人做到,所以我建議這樣做。順便說一句,2 通常可以以有趣的方式導致 1。 現在,儘管這是針對已經有工作的開發人員的建議,但我認為這是許多正在尋找工作的經驗不足的開發人員應該聽到的建議。 從更廣泛的意義上來說,阿姆賈德的建議是先降低你的期望並努力工作。做沒有人願意做的無聊工作也可能意味著做你不熱衷的工作,但從長遠來看,這對你有利。 這也可能意味著接受一些不完全是你之前想要的工作,並做繁重的工作,以便成為任何雇主都希望在其團隊中擁有的「不可或缺」的開發人員。 做個好人 ==== 這個建議非常籠統,幾乎適用於任何工作(或任何事物),但成為一個好的共事者可能比大多數求職者想像的更有價值和被忽視。 一旦您滿足了工作要求,您對未來雇主的吸引力很大程度上取決於他們是否可以想像與您在團隊中工作。雖然從表面上看這似乎簡單明了,但實際上實施起來要困難得多。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3s990jfmwryfx8gk9xw5.gif) 想一想。 您將在一個具有許多不同個性的團隊中工作。任務可能會變得複雜,截止日期可能會很緊迫,而且工作可能會變得混亂。肯定會犯錯。 *你是那種在壓力下會失去幽默感的人嗎?* *當有人因為你不直接負責的錯誤而責備你時,你會如何反應?* *您是否與您的團隊進行公開且有效的溝通?* *努力工作一年卻沒有加薪,你還會保持謙虛和認真嗎?經過一年的努力工作、大量的讚揚和豐厚的加薪(這可能更難),你還會保持謙虛和認真嗎?* 誠實、開放、真誠是難以獲得的寶貴特質,人們往往可以立即看出你是否是這種人。正是這些類型的人,在與同樣滿足工作要求的其他候選人競爭時,最終獲得了工作機會。 投入更少的精力,送出更少的應徵信 =============== 我和許多其他雇主抱怨的一件事是,求職者在申請中幾乎沒有任何努力。最嚴重的冒犯是應徵信內容明顯是複製貼上的。 ![打字](https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExNW0wMm03N3IwaTdlcWdtcHd4MXpsZWV5ZDVkMXBzOGQ5ZWVlNG9vaCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/13GIgrGdslD9oQ/giphy.webp) 雇主討厭這一點,因為這是你將如何工作的明顯跡象。如果你的工作申請是懶惰地完成的,那麼你的工作很可能會表現得類似(或更糟!)。 這就是為什麼我認為最好將更多的精力投入到更少的工作申請中。 沒有神奇的數字,但每當我申請工作時,總會有 2 或 3 個讓我感到*非常*興奮。所以這些是我唯一申請的,我在這些申請中投入了很多思考和努力。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kvjr8y8gcc4switxoga.png) 除了[為我的專案製作包含描述和學習目標的自己的作品集](https://vincanger.github.io/)之外,我還會建立某種形式的與工作申請相關的額外內容。在某些情況下,這是一個簡單的範例應用程式,或者在其他情況下是解釋影片或文章。 重要的是,這些額外的內容是嘗試解決工作描述中提出的問題或任務,以表明我可以做好這類工作,並且我渴望並願意*做繁重的工作。* 我的假設是,大多數其他申請者在申請時不會花這麼大的力氣,因此我的申請會從人群中脫穎而出,而且效果很好,因為即使我之前沒有很多經驗,我也被要求面試其中的許多職位! --- 順便一提… 我們在[Wasp](https://wasp-lang.dev/)正在努力建立這樣的內容,更不用說建立一個現代的開源 React/NodeJS 框架,讓您能夠快速行動! 如果您想看到更多這樣的內容,您可以[在 GitHub 上給我們一個星星,非常輕鬆地幫助我們!](https://www.github.com/wasp-lang/wasp) 。 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) <https://www.github.com/wasp-lang/wasp> ⭐️ GitHub 上的 Star Wasp 🙏 現在得到那份工作...... ============== 軟體開發人員的就業市場正在改變。這是有道理的,因為軟體開發人員的角色也在不斷發展,而現在我們正在進入人工智慧時代,這些角色的發展速度更快。 這意味著,隨著雇主的適應,他們可能會繼續尋找能夠證明他們能夠跟上所有這些發展的開發人員,並利用手邊的工具來解決我們周圍世界面臨的問題。 因此,如果你能夠證明這一點,同時成為一個認真而謙虛的工人,那麼你可能不會很難找到你一直想要的那份甜蜜的技術工作。現在只需將注意力和精力放在正確的事情上,這有時可能很困難,這將使以後找工作的過程變得容易得多。 當然,這些建議是基於我的經驗和主觀觀點,所以如果您有不同意見,請在評論中告訴我們。或者你有自己的秘訣來幫助你找到工作嗎?如果是這樣,我們想聽聽看! 感謝您的閱讀,祝您求職愉快。 --- 原文出處:https://dev.to/wasp/how-to-get-a-web-developer-job-in-2024-without-dying-inside-eo8

2024 年 7 個最適合開發者的圖表庫 🤯

許多應用程式使用圖表或圖形進行資料視覺化,這可以使用庫或底層技術來實現。庫提供時間效率、各種圖表類型和自訂選項。 作為開發人員,了解這些選項至關重要。雖然有些專案可能選擇手動實施,但許多專案都受益於圖表庫的效率。使用這些庫可以節省時間,並可以存取各種圖表類型和樣式選項來滿足您的需求。 在本文中,我們將踏上旅程,了解七個令人驚嘆的圖表庫、它們的功能以及如何使用它們。讓我們來看看! ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fqk7c7favj05g2qjice9m.gif](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqk7c7favj05g2qjice9m.gif) --- 1. Latitude for React:將圖表整合到前端應用程式的完美伴侶 --------------------------------------- **網址: <https://docs.latitude.so/react/getting-started/introduction>** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fy7z7ks2yp21vj6fah42o.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy7z7ks2yp21vj6fah42o.png) *是的,那就是我們!* Latitude 是用於嵌入式分析的開源框架,可讓您快速將 SQL 查詢公開為 API 端點。他們的產品中包括`@latitude-data/react` ,這是一組原生 React 元件,用於輕鬆繪製來自 Latitude API 的資料。如果您選擇攜帶自己的資料,它還可以用作獨立的圖表庫。 ### Latitude for React 的主要特性 - **多種圖表類型**:提供多種圖表類型顯示。例如長條圖、圓餅圖、面積圖、分散圖、混合圖等。 - **高度可自訂的元件**:元件預先捆綁了一組可用主題,或者您可以選擇輕鬆建立自己的自訂主題。最重要的是,大多數元件都可以使用自訂 html 類別進行擴充。 - **自動執行查詢或提供您自己的資料**:Latitude 為每個圖表元件提供兩個版本。其中一個版本會自動執行您的緯度查詢。另一個版本期望接收資料作為道具,讓使用者負責取得它。 ### 如何使用 Latitude for React 👀 首先,在您的 React 專案中安裝 Latitude 的 React 套件: ``` npm install --save @latitude-data/react ``` 之後,匯入 Latitude 元件所使用的核心樣式: ``` import '@latitude-data/react/dist/index.css'; ``` **帶有緯度後端** 如果您要從 Latitude 後端取得資料,**請**在專案根目錄下使用 LatitudeProvider 包裝您的應用程式: ``` import { LatitudeProvider } from '@latitude-data/react'; function App() { return ( <LatitudeProviderapiConfig={{ host: <YOUR_LATITUDE_API_HOST> }}> {/* Your app content */} </LatitudeProvider>); } ``` 並使用 Latitude 的任何帶有`Query`前綴的圖表元件: ``` import { QueryLineChart } from '@latitude-data/react'; function MyComponent() { return ( <QueryLineChart queryPath='titles' params={{ start_year: 2012, end_year: 2014 }} x='release_year'y={[ { name: 'count_shows' }, { name: 'count_movies' } ]} xTitle='Year' yTitle='Titles'/> ); } ``` 在此範例中,queryPath 對應於 Latitude 後端中定義的查詢的路徑。 **作為獨立的圖表庫** 只需使用獨立元件,例如: ``` import { LineChart } from '@latitude-data/react'; function MyComponent() { const data = [ { release_year: 2010, count_shows: 10, count_movies: 2 } ] return ( <LineChart data={data} x='release_year' y={[ { name: 'count_shows' }, { name: 'count_movies' } ]} /> ); } ``` 請閱讀[文件](https://docs.latitude.so/react/getting-started/introduction),以取得有關如何使用緯度動態顯示資料的更深入指南。 您可以隨時在 GitHub 上為我們的專案做出貢獻,如果您能為我們的專案給我們一顆星,我們將不勝感激! **[🌟 GitHub 上 React 的 Star Latitude](https://github.com/latitude-dev/latitude)** --- 2. D3.js:用於資料視覺化的JavaScript函式庫 ------------------------------ **D3 的網站: [https://d3js.org](https://d3js.org/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2F1xhnyf40jvg3v50c2ba8.jpeg](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1xhnyf40jvg3v50c2ba8.jpeg) D3 是一個低階圖表庫,提供無與倫比的客製化和靈活性。代價是學習曲線陡峭,並且與 React 或 Svelte 等常見前端框架的整合更加困難。如果您有一些非常具體的圖表需求,d3.js 可能是您唯一的選擇,但是,如果您希望在應用程式中快速整合一些簡單的圖表,那麼其他地方還有更好的選擇。 ### D3.js 的主要特性 - **自訂和靈活性:** D3.js 提供對 SVG、HTML 和 CSS 的低階存取,允許對視覺元素進行細粒度控制。這使得它具有高度的靈活性和可自訂性。 - **模組化:** D3.js 高度模組化,各種模組可以單獨使用,也可以一起使用。這允許對捆綁包大小和效能最佳化進行更多控制。 - **強大的轉換和動畫:** D3.js 為轉換和動畫提供強大的支持,為資料更新提供流暢而複雜的動畫。 - **社區和生態系統:** D3.js 擁有一個龐大且活躍的社區,提供大量文件、範例和插件。這使得您可以更輕鬆地找到支援和資源。 ### 如何使用 D3.js 👀 在您的專案中安裝 d3 的 npm 套件: ``` npm install d3 ``` 以下是有關如何將圖表新增至 id 為`#chart`的 html 元件的範例程式碼: ``` import * as d3 from 'd3'; // Data for the bar chart const data = [ { name: 'A', value: 30 }, { name: 'B', value: 80 }, { name: 'C', value: 45 }, { name: 'D', value: 60 }, { name: 'E', value: 20 }, { name: 'F', value: 90 }, { name: 'G', value: 55 } ]; // Set the dimensions and margins of the graph const margin = { top: 20, right: 30, bottom: 40, left: 40 }; const width = 500 - margin.left - margin.right; const height = 300 - margin.top - margin.bottom; // Append the svg object to the body of the page const svg = d3.select("#chart") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // X axis const x = d3.scaleBand() .range([0, width]) .domain(data.map(d => d.name)) .padding(0.1); svg.append("g") .attr("transform", `translate(0,${height})`) .call(d3.axisBottom(x)) .selectAll("text") .attr("class", "axis-label") .attr("transform", "translate(-10,0)rotate(-45)") .style("text-anchor", "end"); // Y axis const y = d3.scaleLinear() .domain([0, d3.max(data, d => d.value)]) .nice() .range([height, 0]); svg.append("g") .call(d3.axisLeft(y)) .selectAll("text") .attr("class", "axis-label"); // Bars svg.selectAll(".bar") .data(data) .enter() .append("rect") .attr("class", "bar") .attr("x", d => x(d.name)) .attr("y", d => y(d.value)) .attr("width", x.bandwidth()) .attr("height", d => height - y(d.value)); ``` 正如您所看到的,D3.js 通常比其他替代方案更冗長,但它使您可以最大程度地控制可視化的各個方面。 D3 是免費且開源的。如果您覺得該專案很有趣,請在 GitHub 上給他們一個 Star ⭐️!他們目前的星數超過 108k! **[在 GitHub 上關注 D3.js ⭐️](https://github.com/d3/d3)** --- 3. Chart.js:用於基於 HTML 的圖表的靈活 JavaScript 程式庫 ------------------------------------------- **網址: [https://www.chartjs.org](https://www.chartjs.org/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2F0m8eb9o6t93wwf7cvq7x.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0m8eb9o6t93wwf7cvq7x.png) 目前是業界最受歡迎的圖表庫之一,也是最容易使用的圖表庫之一。主要因其透過使用 Canvas 進行呈現而聞名,這與某些僅將資料呈現為 SVG 的圖表庫不同。 ### Chart.js 的主要特性 - **效能**:Chart.js 可以接受內部資料結構,從而減少解析和規範化的需要,從而提高效能。您還可以配置資料抽取,以在渲染資料集之前減少資料集的大小,從而加快渲染速度。 canvas的使用壓縮了DOM樹上的開銷;這有助於最大限度地減少捆綁包中 Chart.js 程式碼的大小,從而加快載入時間。 - **可存取性**:與大多數圖表庫相比,Chart.js 具有非常直接的方法,充分了解您所做的一切都在畫布上執行。您不需要複雜的自訂,因為它允許您使用其任何自訂選項來設定樣式、主題等。 - **出色的開發人員體驗**:除了擁有非常出色的社群影響力之外,Chart.js 還擁有簡單明了的文件,當出現新內容時,這些文件會經常更新。它還提供與您最喜歡的 JavaScript 框架的集成,例如 React、Svelte 等。 - **圖表響應能力**:預設情況下,Chart.js 提供響應式圖表。您可以自動將螢幕調整為不同的尺寸,並且它為圖表提供了可調整的尺寸。它確保您在所有裝置上都能獲得良好的資料視覺化效果。 ### 如何使用 Chart.js 👀 Chartjs 可以透過 npm 安裝或在執行時透過 CDN 直接下載: ``` <div> <canvas id="myChart"></canvas> </div> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <script> const ctx = document.getElementById('myChart'); new Chart(ctx, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], borderWidth: 1 }] }, options: { scales: { y: { beginAtZero: true } } } }); </script> ``` 如果你覺得這個專案很酷,你可以在GitHub上給它一個Star⭐️!他們目前的星數超過 63k。 **[GitHub 上的 Star Chart.js ⭐️](https://github.com/chartjs/Chart.js)** --- 4. Apache ECharts:用於快速建立圖表的JavaScript視覺化工具 ------------------------------------------ **網址: [https://echarts.apache.org](https://echarts.apache.org/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fce12dq55x4le8e4ezhvm.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fce12dq55x4le8e4ezhvm.png) ECharts 是一個開源資料視覺化函式庫,最近越來越受歡迎。它由流行的[Apache](https://apache.org/)基金會建置,並依賴[ZRender](https://github.com/ecomfe/zrender)來呈現其圖形。與其他相比,它更複雜;它僅呈現動態資料並具有不同的顯示方式。 ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fnhnpwl5uuhhu7xxdp954.gif](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fnhnpwl5uuhhu7xxdp954.gif) ### ECharts的主要特點 - **廣泛的圖表類型**:ECharts 支援大量的圖表類型,實際上比大多數其他競爭對手更支援更多。其中包括長條圖、折線圖、圓餅圖、散佈圖、地圖、雷達圖、箱線圖、熱圖、平行座標、桑基圖等。這種多功能性允許用戶以多種格式視覺化資料。 - **互動性:** ECharts的突出特點之一是其豐富的互動性。它包括對互動式元素的內建支持,例如工具提示、縮放、平移和資料突出顯示。用戶可以與視覺化進行交互,以更深入地了解資料。 - **效能:** ECharts 專為高效能而設計,能夠有效處理大型資料集。它利用 Canvas 和 WebGL 進行渲染,這比傳統的基於 SVG 的渲染效能更高,適用於複雜的視覺化和大資料量。 ### 如何開始使用 Apache ECharts 👀 使用 npm 安裝 echarts: ``` npm install echarts ``` 以下程式碼片段在 id 為`#chart`的 DOM 元素中建立了一個簡單的長條圖: ``` // Import ECharts import * as echarts from 'echarts'; // Initialize the chart var chartDom = document.getElementById('chart'); var myChart = echarts.init(chartDom); var option; // Specify the chart configuration option = { title: { text: 'Simple Bar Chart' }, tooltip: {}, xAxis: { data: ['A', 'B', 'C', 'D', 'E', 'F'] }, yAxis: {}, series: [ { name: 'Value', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }; // Use the specified chart configuration option && myChart.setOption(option); ``` 如果你覺得這個專案很有趣,可以在GitHub上給它一個Star⭐️,目前他們的Star數已經接近60k了! **[GitHub 上的 Star ECharts ⭐️](https://github.com/apache/echarts)** --- 5. Nivo:用於在 React 中建立圖表應用程式的庫 ----------------------------- **網址: [https://nivo.rocks](https://nivo.rocks/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2F2k97ihdlfubm0zs5q1rm.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2k97ihdlfubm0zs5q1rm.png) Nivo 是一個高階開源 JavaScript 函式庫,用於建立資料視覺化,專門設計用於與 React 搭配使用。它建置在 D3 之上,提供廣泛的圖表類型,並具有內建主題、互動性和響應式設計。以下是一些關鍵功能和方面,使 Nivo 成為 React 應用程式中資料視覺化的熱門選擇: ### Nivo 的主要特點 - **易於使用:** Nivo 的設計比 D3.js 等替代方案更用戶友好且更易於使用。它提供了更高層次的抽象,使得無需深入了解 SVG 或 DOM 操作即可輕鬆建立複雜的圖表。 - **React 整合:** Nivo 專為 React 建置,使其成為在 React 生態系統中工作的開發人員的絕佳選擇。它利用 React 基於元件的架構來輕鬆整合和重複使用。 - **主題和響應性:** Nivo 包含對主題和響應式設計的內建支持,使您可以更輕鬆地建立在不同設備上看起來不錯並與應用程式的設計相匹配的圖表。 ### 如何開始使用 Nivo 👀 如果您是 React 開發人員,開始使用 Nivo 會很容易。安裝 nivo 核心套件以及您選擇的相關圖表特定庫。在本例中,我們正在實作一個長條圖: ``` yarn add @nivo/core @nivo/bar ``` 完成後,匯入相關圖表元件並在您的 React 環境中使用它: ``` import { Bar } from '@nivo/bar'; const MyBarChart = () => { const salesData = [ { "category": "Electronics", "value": 5000 }, { "category": "Clothing", "value": 3000 }, { "category": "Furniture", "value": 2500 } ]; return ( <Bar data={salesData} indexBy="category" maxValue={6000} keyBy="id"/> ); }; export default App; ``` Nivo 是開源的,您可以在 GitHub 上為他們的專案加註星標 - 目前它們的星標數量已超過 12k! **[⭐️ GitHub 上的 Star Nivo](https://github.com/plouc/nivo)** --- 6. Plotly:適用於不同技術堆疊的開源圖表庫 ------------------------- **網址: [https://plotly.com](https://plotly.com/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fdxm6bnd8u9e4wxxjv3hh.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fdxm6bnd8u9e4wxxjv3hh.png) **Plotly**是一個開源資料視覺化函式庫,支援多種圖表類型和互動功能。它可用於多種程式語言,包括 Python、R 和 JavaScript。 Plotly.js 是該函式庫的 JavaScript 版本,建構在 D3 之上,廣泛用於建立基於 Web 的互動式視覺化。 ### Plotly 的主要特點 - **支援不同的程式語言**:Plotly 支援不同的語言,這與許多其他支援一種語言的圖表庫不同。它允許您使用任何您熟悉的語言將資料視覺化為圖表。這是[完整的清單](https://plotly.com/graphing-libraries/)。 - **複雜圖表類型:** Plotly 抽象化了 matplotlib、ggplot2 或 MATLAB 等軟體包中的統計和科學圖表類型。 - **可移植:** Plotly 圖表以 JSON 物件的形式進行聲明性描述。圖表的每個面向(例如顏色、網格線和圖例)都有一組對應的 JSON 屬性。這允許在所有不同的語言實作中使用相同的配置。 - **效能:** Plotly 的圖表主要使用 SVG,但它也可以利用 webGL 來渲染高效能視覺化。 ### 如何開始使用 Plotly 👀 如前所述,Plotly 可以與多種程式語言一起使用,但在本例中我們將專注於 Javascript。 首先,安裝相關的npm套件: ``` npm install plotly.js-dist ``` 然後,在 html 中建立一個空的 div 元素來繪製圖形: ``` <div id="tester" style="width:600px;height:250px;"></div> ``` 最後,編寫以下內容來繪製簡單的折線圖: ``` const TESTER = document.getElementById('tester'); Plotly.newPlot( TESTER, [{ x: [1, 2, 3, 4, 5], y: [1, 2, 4, 8, 16] }], { margin: { t: 0 } } ); ``` 如果您發現 Plotly 是一個很好的工具,您可以給它一顆星,並為他們在 GitHub 上的專案做出貢獻。 - **[GitHub 上的 Star Plotly Python 專案⭐️](https://github.com/plotly/plotly.py/)** --- 7.勝利:用於圖表和資料可視化的React元件 ----------------------- **網址: [https://commerce.nearform.com/open-source/victory](https://commerce.nearform.com/open-source/victory/)** ![https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3 .amazonaws.com%2Fuploads%2Farticles%2Fy1hhhtiq4cbkwnlzusin.png](https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy1hhhtiq4cbkwnlzusin.png) **Victory**是一個適用於 React 和 React Native 的開源模組化圖表庫。它提供了一個簡單而優雅的 API,用於建立各種資料視覺化。與 Nivo 類似,Victory 利用了 React 的優勢,使其成為已經熟悉 React 生態系統的開發人員的自然選擇。 ### Victory JS 的主要特點 - **React 和 React Native 具有相同的 API** :Victory 專為 React 和 React Native 建置,允許無縫整合到 Web 和行動應用程式中。 - 易於使用:Victory 的聲明式、基於元件的 API 使得向 React 應用程式加入視覺化變得簡單,特別是與 D3 等其他命令式方法相比。 - **互動性**:Victory 提供開箱即用的工具提示、對事件和複雜動畫的支持,以使視覺化感覺更加生動。 ### 如何開始勝利 首先,安裝 npm 套件: ``` npm install victory ``` 然後,根據您的需求匯入您想要使用的相關元件。例如: ``` import React from 'react'; import { VictoryBar } from 'victory'; const data = [ {quarter: 1, earnings: 13000}, {quarter: 2, earnings: 16500}, {quarter: 3, earnings: 14250}, {quarter: 4, earnings: 19000} ] function App() { return ( <VictoryBar data={data} // data accessor for x values x="quarter" // data accessor for y values y="earnings" /> } ``` 如果您覺得 Victory 很酷,您可以繼續在 GitHub 上給該專案一顆星。目前他們的星數超過 10,000 **[GitHub 上的明星勝利 ⭐️](https://github.com/FormidableLabs/victory)** --- 結論 -- 恭喜您已經走到這一步了! 在本文中,我們介紹了今年要探索的 7 個圖表庫。我們已經超越了簡單的概述,而是發現了每個庫的工作原理、其底層架構以及用於建置它的技術。此外,我們還學習如何開始將這些庫合併到您的專案中。 在我們分道揚鑣之前,如果您認為本文有幫助,請考慮在[GitHub](https://github.com/latitude-dev/latitude)上給我們一顆星來表達您的支持。感謝您的閱讀,我期待您參與下一篇文章! 👋 --- 原文出處:https://dev.to/latitude/7-best-chart-libraries-for-developers-in-2024-25he

2024 年開發人員的副業想法

您是一名軟體工程師,渴望將自己的技能轉化為有利可圖的副業嗎? 網上賺錢的可能性是無限的,我有一些令人興奮的想法,可以讓 2024 年成為您迄今為止最偉大的一年。無論您是在尋找額外收入還是夢想創辦自己的企業,這些副業都旨在讓您充滿動力並提高技能,從而有可能增加您的收入。讓我們深入了解一下吧! 銷售數位產品和插件 --------- 根據 Statista 預測,到 2024 年,數位商務市場的交易額預計將達到 7.63 兆美元。這是您透過建立 Shopify 或 WordPress 外掛程式等數位資產來分得一杯羹的機會。 為什麼不使用您最喜歡的技術堆疊建立可重複使用的網站模板並在[Gumroad](https://gumroad.com/)或[Envato](https://themeforest.net/)等平台上出售它們?我將從在 Gumroad 上銷售網站範本開始,我讀過並發現它可以是一項高利潤的企業。 ![在線銷售數位產品](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4zxf601pjbuq7i93ndab.jpg) App Store / Play 商店應用程式開發 ------------------------- 行動應用程式開發仍然蓬勃發展。截至 2023 年,Google Play 商店擁有約 371.8 萬個行動應用程式,Apple App Store 提供約 180.3 萬個 iPhone 應用程式。使用 React Native、Flutter 或 Ionic 等跨平台工具和框架,您無需學習 Java/Kotlin 或 Swift 等原生語言即可開發應用程式。 透過廣告、應用程式內購買或提供具有額外功能的高級無廣告版本,透過您的應用程式獲利。行動應用市場是一座金礦,等待著您的創新想法。 ![行動應用程式開發](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4up3n87qtm39m6txjyjd.png) SaaS 或微型 SaaS 產品 ---------------- 建立專門的、利基的 SaaS(軟體即服務)產品可以獲得令人難以置信的利潤。微型 SaaS 產品通常由獨立開發人員或小型團隊開發,專注於非常特定的市場或功能。 從 Raycast 中汲取靈感,Raycast 是一款生產力工具,可透過快速存取和自訂腳本簡化日常任務和工作流程。這個小團隊的基於訂閱的模式取得了巨大的成功。您獨特的 Micro-SaaS 產品可能會成為下一件大事! ![SaaS 或微型 SaaS 產品](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8u7h6b1ab9htrl6a5is1.png) 開源專案貢獻 ------ 為開源專案做出貢獻是展示您的技能、與其他開發人員合作以及建立聲譽的絕佳方式。這些貢獻可以帶來工作機會、諮詢工作或銷售自己的工具和服務的機會。 如果您啟動了一個獲得關注的開源專案,您可以透過贊助、捐贈或雙重許可來貨幣化它,提供免費社區版本和帶有附加功能或支援的付費商業版本。 ![開源](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p7lf8j3udkqvo2ovhlkq.png) 7. 科技博客 ------- 技術部落格是分享專業知識、回顧新技術和提供教學的有效方式。透過廣告、聯盟行銷、贊助內容或銷售電子書或課程等數位產品,最初的愛好可以成為一項利潤豐厚的職業。 建立一個利基市場,無論是網頁開發、人工智慧趨勢或小工具評論。透過提供有價值、準確且引人入勝的內容來擴大受眾群體。作為部落客,強大的個人品牌可以帶來演講、書籍交易和諮詢工作。 準備好將您的技能轉化為更多東西了嗎?這些副業想法是您通往美好 2024 年的門票。 ![科技部落格](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pbmsmhgnh5qe8ph8urfg.png) 客製化人工智慧解決方案 ----------- 人工智慧不僅僅是一個流行詞;這是一個蓬勃發展的市場。 2023 年,人工智慧的估值將超過 1,536 億美元,而且規模只會越來越大。每週都有新的人工智慧工具上市,為開發人員提供了無限的機會。 想像一下,使用[GPT](https://openai.com/index/gpt-4/) 、 [Llama](https://llama.meta.com/)或[PaLM 2](https://ai.google/discover/palm2/)等大型語言模型 (LLM) 來建立一個像 AgentGPT 這樣的人工智慧工具。這些工具將使用者定義的目標分解為可操作的任務並按順序執行它們。設計一個使用者友善的介面,讓使用者與人工智慧互動、定義目標、監控進度和接收輸出。透過訂閱模式將您的創作貨幣化,並隨著企業和個人為您節省時間的解決方案付費而利潤滾滾而來。 ![人工智慧驅動的解決方案](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjlj7r1hmxdwh8dqfue3.png) 透過探索這些副業想法和其他想法,您可以發現有效利用您的技能並賺取可獲利收入的新方法。 請隨意點擊下面的連結來查看我的開源專案等。 \*\* [travislord.xyz](https://travislord.xyz/) [github.com/lilxyzz](https://github.com/lilxyzz) \*\* --- 原文出處:https://dev.to/lilxyzz/side-hustle-ideas-for-developers-in-2024-jh5

首次嘗試新增 Twill CMS 模組

繼續跑官方教材 https://twillcms.com/guides/page-builder-with-blade/creating-the-page-module.html 執行指令 ``` php artisan twill:make:module pages ``` 會建立 pages 模組 對應的檔案變化可以在這查看 https://github.com/howtomakeaturn/twill-play/commit/d18bd06d566b135353d4230ca8a97efbddaded6f 建立了很多檔案到 app 底下,可見背後的哲學是: > 接下來就當成是一般的 laravel app,自由開發吧! > 只是在建立 app 的時候 可以使用許多 twill 功能輔助開發! --- 然後新增的資料表如下 ``` pages page_revisions page_slugs page_translations ``` 通通都沒有 twill_ 這樣的 prefix,所以「模組」應該視為「專屬於你 app 的內容」 跟前面的「檔案都直接在 app 底下」相呼應 滿合理的設計! 那麼我可以在那個 migration 檔案 `database/migrations/2024_05_22_013232_create_pages_tables.php` 內新增我自己想加的欄位嗎? > This file will create the minimum required tables and columns that Twill uses to provide the CMS functionality. Later in the guide we may add some more fields to the database, but will will do that in a new migration. > Once you are more experienced with Twill, you may want to add fields at this moment, before you run the migrate command. That way, you do not have to immediately add a new migration file. 也就是說 官方歡迎你擴充這幾張 table 然後要新增一筆 migration 或者直接在這修改 都可以! --- 直接打開後台面板 並不會看到 pages 模組,twill 不會自動偵測你建立的模組 要在 `AppServiceProvider` 手動登記 ``` TwillNavigation::addLink( NavigationLink::make()->forModule('pages') ); ``` 接著,就可以在後台建立第一筆資料囉! 建好之後,會發現在四個資料表內,各自多了一筆資料 ``` pages page_revisions page_slugs page_translations ``` --- 我剛建了代號 `my-1st` 的資料,後台顯示一個網址 `http://twill-play.local/en/pages/my-1st` 打開會發現根本沒有頁面! 這表示 twill 目前主要是處理 CMS 與後台面板的東西 沒有前台頁面 那個要另外做! 所以 `app/Http/Controllers/Twill/PageController.php` 檔案是代表後台的模組管理 controller 然後 `routes/twill.php` 裡面登記的 ``` TwillRoutes::module('pages'); ``` 也是代表登記後台的模組管理相關 routes 所以是要你自己在 `routes/web.php` 處理你的前台 routes 吧! 其實,我覺得這樣的設計,真的很清楚很漂亮!只是對新手來說,會覺得工程較複雜、檔案很分散吧! 接著就來建前台頁面吧!

17 個值得嘗試的最佳開發人員生產力工具

效率和生產力不僅是開發人員的目標,也是必需品。我們製作了大量的工具並編寫了日常任務的腳本,所有這些都是為了騰出時間來處理真正重要的事情。在當今龐大的開發者生態系中,一系列[生產力工具](https://www.devzero.io/blog/ai-tools-for-software-developers-in-2023-to-boost-dev-productivity)隨時可以簡化我們的工作流程。 生產力工具的作用不僅僅是減少重複性任務的[時間](https://www.devzero.io/blog/time-management-tools-and-tips-boosting-productivity-for-software-developers)。它們在管理程式碼和促進團隊協作方面至關重要。借助正確的工具包,開發人員可以將注意力從平凡轉向創新,以新的自由度來應對創意挑戰。讓我們深入了解頂級開發者生產力工具,以在 2024 年提升您的遊戲水平。 衡量開發人員的生產力 ---------- 首先,讓我們解決一個基本問題:我們如何衡量開發人員的生產力?開發人員的日常生活不僅包括編寫程式碼,因此衡量生產力需要廣泛審視整個軟體開發過程的效率和有效性。 我們可以追蹤熟悉的指標,例如程式碼行數、開發的功能、修復的錯誤和交付時間表。然而,真正理解生產力需要一種整體方法,一種權衡軟體開發的有形和無形方面的方法。因此,考慮品質、影響和協作也很重要。 了解生產力工具 ------- 接下來,我們來詳細分析開發人員可以使用的不同類型的生產力工具: - IDE、程式碼編輯器和助手是任何開發人員武器庫的基石,為編碼、編輯、測試和除錯提供整合平台。 - 開發環境確保開發人員可以專注於編寫程式碼,而不是管理基礎架構。 - 專案管理和協作工具對於組織任務、追蹤進度和確保團隊溝通順暢至關重要。 - 設計和原型工具使開發人員能夠製作引人注目的視覺設計並改進其應用程式的 UI/UX。 - 偵錯工具對於快速辨識和修復錯誤和其他程式碼問題至關重要。 - 框架和抽象可以幫助開發人員透過重複使用通用元件更快地交付程式碼。 - 部署應用程式是最後一步,但確保效能和穩定性是關鍵。 從編碼的基礎工作到使用者介面和團隊協作的微調,每個類別在提高生產力方面都發揮著至關重要的作用。 IDE、程式碼編輯器和助手 ------------- 讓我們來看看 2024 年一些流行的 IDE 和程式碼編輯器。 1. IntelliJ IDEA --------- [IntelliJ IDEA](https://www.jetbrains.com/idea/)是 Java 和 Kotlin 開發人員的首選 IDE,提供的綜合[開發環境](https://www.devzero.io/blog/why-software-development-environments-are-important-and-how-to-manage-them-effectively)遠遠超出 Atom 等簡單程式碼編輯器所提供的功能。此 IDE 具有出色的高級功能,例如深入程式碼理解以實現卓越的導航和重構。與基本編輯器不同,IntelliJ 整合了資料庫和版本控制的基本工具,透過讓您所需的一切觸手可及來簡化您的工作流程。 IntelliJ 社群版免費提供,並提供對其功能的廣泛探索,但存取權限僅限於學生、BootCamp 成員和特定焦點小組。對於其他人來說,專業版的價格約為每月 20 美元,並且可以完全存取 IntelliJ 強大的工具套件。 2. Visual Studio Code -------------------- Microsoft 的[Visual Studio Code](https://code.visualstudio.com/)是跨所有框架、語言和程式庫的開發人員的首選程式碼編輯器。其突出的特點是一個龐大的擴展庫,旨在提高生產力。想像一下,利用 TabNine 進行 AI 驅動的程式碼補全,或整合 GitHub Copilot,利用其 AI 輔助功能將編碼速度提高十倍。除此之外,Visual Studio Code 還提供內建的 Git 控制、用於 shell 命令的整合終端以及用於無縫程式碼分析的專用偵錯器。 最重要的是,它完全免費,並且與 Windows、Mac 和 Linux 平台普遍相容。 3. AppMap ------- [AppMap](https://www.appmap.io/)是一種視覺化工具,可提供應用程式程式碼庫內互動的詳細概述。它為開發人員提供了整個應用程式中資料流和控制的圖形表示,幫助他們更直觀地理解複雜的系統。透過 AppMap,開發人員可以輕鬆瀏覽不同的元件,了解模組之間的依賴關係,並確定潛在的最佳化或重構領域。透過直觀地繪製應用程式的內部工作原理,AppMap 增強了開發團隊之間的協作,並有助於在開發過程中做出更好的決策。 Appmap 最近推出了 Navie。 Navie 是一種生成編碼 AI,具有 API 和資料庫感知能力,因此它可以為整個程式碼庫中的複雜變更提供程式碼建議。 Navies 回答並建議針對開發人員問題進行程式碼更改,例如「我的資料庫查詢效能很慢。我如何解決它?或“我需要更改令牌系統以提高身份驗證安全性,我該如何進行?” ‍ 海軍的建議針對每位開發人員及其正在開發的軟體進行高度個人化,同時確保您的 IP 安全。 4.Copilot ----- 向無可爭議的版本控制統治者屈服:GitHub。憑藉其一系列強大的功能,包括透過 GitHub 工作流程進行自動化部署、 [GitHub Copilot](https://github.com/features/copilot)的人工智慧驅動協助以及 Dependabot 的主動安全修補,GitHub 處於開發創新的前沿。就像 Visual Studio Code 是編碼的首選一樣,GitHub 是開發人員進行版本控制的首選平台。 GitHub 的免費套餐包含豐富的產品,非常適合小型團隊、獨立開發人員、自由工作者和新創公司。但對於大型組織和企業來說,Teams 計劃(每位使用者每月3.67 美元)和Enterprise 計劃(每位使用者每月19.25 美元)解鎖了一系列高級功能,例如GitHub Codespaces,這是與GitHub 無縫整合的虛擬IDE,可直接在平台內進行編碼。此外,付費方案還提供增強的協作功能,例如能夠任命多個拉取請求審閱者和指定程式碼擁有者,從而簡化開發流程並確保程式碼品質。 ‍ 此類別中出現的另外兩個工具是[SuperMaven](https://supermaven.com/)和[TabbyML](https://github.com/TabbyML/tabby) ,兩者都使用快速且安全的 LLM 來完成程式碼完成和建議。 開發環境 ---- 在當今的微服務和複雜的基於雲端的服務和第三方庫的世界中,本地主機無法提供所需的適當環境。這會導致整個 SLDC 不斷重構並減慢部署週期。 5.DevZero --------- [DevZero](https://www.devzero.io/)是一個為開發人員在雲端提供一致的、類似生產的開發環境的平台。開發人員可以在他或她的本機電腦上工作,但仍然體驗生產環境的所有細微差別,例如資料庫、雲端原生服務等。到生產都是一致的。新開發人員只需幾分鐘即可入職,而不是幾天。這使工程組織具有一致性和易於管理。不再除錯本機。 DevZero 的一個顯著優勢是縮短了 CI 時間。開發人員可以節省重構和編譯基礎架構處理所花費的寶貴時間,因為現在他們可以立即在生產環境中執行本機程式碼。這也提高了整體發布頻率並消除了在不同環境中進行測試的障礙。 協作和專案管理 ------- 開發人員經常處理無數的選項卡,並且可能會跨多個顯示器進行操作,但切換平台以進行協作和任務管理的想法可能是一個真正的痛點。讓我們深入研究一些旨在提高開發人員生產力和促進無縫團隊協作的關鍵工具。 6. Slack ----- Slack 徹底改變了遠端協作,使公司能夠即時通訊和共享文件。對於開發人員來說,它是協作的動力源泉,可與 GitHub 等工具無縫集成,以即時更新程式碼推送或部署。這種整合確保每個人都能及時了解專案狀態,而無需不斷地來回訊息。您可以透過 Slack 的整合使用任何專案管理工具,例如 Trello、JIRA 等。 Slack 透過可自訂的工作流程和應用程式進一步發展,讓平台內任務和問題管理。雖然免費計劃支援基本通訊和最多十個集成,但要擴展到自訂自動化及其他功能,需要升級到專業計劃(每人每月 8.25 歐元)或商業計劃(每人每月 14.10 歐元)。這種靈活性使 Slack 成為追求效率和簡化工作流程的開發團隊不可或缺的工具。 7. Height ----- 在管理專案和維持組織性方面,擁有可靠的工作追蹤工具至關重要。 [Height](http://height.app/)是一款功能強大的專案管理工具,提供廣泛的功能,旨在簡化協作並最大限度地提高效率。借助 Height,開發人員可以輕鬆分配任務、設定截止日期、追蹤進度並監控團隊績效。其直覺的收件匣式介面和強大的分析功能使其成為希望掌控工作量並按時交付專案的團隊的首選。 8. Linear ----- [Linear.app](https://linear.app/)是一個專案管理和問題追蹤工具,旨在幫助團隊更有效地協作和管理工作。 Linear 提供了一個用於組織任務、追蹤進度和促進團隊成員之間溝通的平台。該工具以其時尚且用戶友好的介面而聞名。 9. Pullflow ----- 審查 PR 很多時候是工程組織的瓶頸。它不像編寫程式碼那樣有回報,並且需要上下文切換。 [Pullflow](https://pullflow.com/)旨在透過其人工智慧增強的程式碼審查協作功能來減少上下文切換並改善溝通和公關管理。 Pullflow 整合了 VSCode、Github 和 Slack 之間的 PR 通信,因此開發人員無需進行上下文切換。 設計和原型製作工具 --------- 開發人員從頭開始精心設計設計並仔細考慮每個佈局、顏色和字體選擇的時代已經演變。今天的 UI/UX 開發人員享受 Figma 等工具的重大飛躍,其中設計與程式碼相結合。讓我們詳細探討一下。 10. Figma ------- [Figma](https://www.figma.com/)透過提供可無縫整合到專案中的現成程式碼片段,徹底改變了設計到開發流程。在過去的一年裡,Figma 推出了許多插件,為 React、Vue 甚至 HTML 等流行框架提供樣板元件,並支援 Figma 設計直接轉換為 Webflow。 FigJam 是一項出色的功能,事實證明,它對於規劃和確定建造和發布的範圍、衝刺規劃和製作架構圖非常有價值。它在協作和策略規劃階段的效用怎麼強調都不為過。 由於其基於網路的特性,Figma 提供了無與倫比的易用性,並輔以適用於 Windows 和 macOS 的專用桌面應用程式。您需要加入其中一項付費方案才能使用開發模式並存取所有設計元素的程式碼。如果您使用組織計劃,您甚至可以使用私人插件。 11.Whimsical和Excalidraw ------------------ 在解釋複雜概念或設計系統架構時,圖表和視覺化通常是必不可少的。 [Excalidraw](https://excalidraw.com/)和[Whimsical](https://whimsical.com/)是兩種流行的快速繪圖工具,可讓開發人員輕鬆建立圖表。憑藉其簡單而強大的介面,開發人員可以立即建立線框、流程圖和其他視覺表示。這些工具非常適合集思廣益並向利害關係人展示概念,使它們成為開發人員工具包的寶貴補充。 偵錯工具 ---- 除錯是軟體開發生命週期中最具挑戰性和最耗時的部分之一。然而,正確的警報和監控系統可以節省無數時間。讓我們深入研究可以顯著簡化除錯過程、提高效率並減少開發工作流程中的停機時間的基本工具。 12.Postman ----- [Postman](https://www.postman.com/)已成為測試和記錄 API 的基礎 API 開發工具,因其在除錯生產和本地 API 方面的強大能力而贏得了開發人員的廣泛認可。它使用戶能夠發送和模擬 HTTP 請求,這項功能對於等待後端 API 準備就緒的前端開發人員特別有利,可確保持續進展。 除了在測試中的實用性之外,Postman 還充當 API 文件的集中儲存庫,促進團隊內的無縫共享和協作。其基本計劃(每個用戶每月 14 美元)對於大多數開發人員來說應該足夠了。 13.Sentry ----- [Sentry](https://sentry.io/)是效能監控和錯誤追蹤領域的強大工具,擅長自動辨識程式碼庫中的錯誤和錯誤。 Sentry 的 SDK 適用於幾乎所有廣泛使用的框架和技術(包括 JavaScript、PHP、Python 和 Ruby),可無縫整合到您的專案中。 檢測到錯誤後,Sentry 會提供全面的見解,例如堆疊追蹤、來源頁面和使用者訊息,這些對於有效診斷和解決問題非常寶貴。此外,程式碼覆蓋率和會話重播等功能被證明是不可或缺的,尤其是在面臨重現難以捉摸的錯誤的艱鉅任務時。 Sentry 的功能確保開發人員可以花更少的時間進行故障排除,而將更多的時間用於開發,從而提高整體生產力和程式碼品質。 您可以嘗試 Sentry 及其免費的單獨開發者計畫。然而,為了充分利用它,我建議嘗試團隊計劃(每月 26 美元),您可以將隊友加入到 Sentry 工作區。您還需要每月支付 29 美元購買程式碼覆蓋率。 框架和抽象 ----- 當今的許多元件在應用程式中都很常見:身份驗證、授權、資料庫存取、UI 元件等。寫內容從頭開始。 14.Vercel ------ 建置和部署 Web 應用程式可能是一項複雜的任務,尤其是當專案規模不斷擴大時。 Web 應用程式部署框架(例如 Vercel)為開發人員提供了簡化且可擴展的解決方案來部署其 Web 應用程式。 [Vercel](https://www.vercel.com/)是一個雲端平台,旨在簡化 Web 應用程式的部署和託管。它以專注於透過提供自動部署、無伺服器功能和全球內容交付等功能為開發人員提供無縫體驗而聞名。 15. Neurelo ------ [Neurelo](https://www.neurelo.com)為您的資料 API 提供了一個與資料庫無關的程式設計介面。 Neurelo 無需學習 MongoDB 或 PostgreSQL 的查詢語言並為它們建立 API,而是在幾分鐘內為您提供優化的自動生成的 API,包括模式建置器,以及使用 Git 管理開發、登台和生產環境的界面類似版本控制來管理追蹤更改。最後,它使用人工智慧提供自動生成的文件以及透過點擊生成和測試複雜查詢的能力。 許多公司最終會產生自己的抽象層來管理開發人員的資料庫存取或使用 SQLAlchemy 或 Hibernate 等物件關係映射器 (ORM)。 Neurelo 建立了一個通用的強大且與資料庫無關的替代方案。 部署應用程式 ------ 16. Fly.io --------- 部署應用程式可能是一個複雜且耗時的過程。應用程式部署工具(例如[Fly.io](http://fly.io/) )旨在透過提供一個用於輕鬆部署和管理應用程式的平台來簡化此流程。 ‍ Fly.io是一個提供全球應用部署網路的平台。它允許開發人員在跨越全球多個地點的分散式基礎設施上部署和執行他們的應用程式。 Fly.io 專注於透過將應用程式執行個體分佈在更靠近最終用戶的位置來優化應用程式效能,減少延遲並改善整體用戶體驗。 ‍ 該平台支援各種程式語言和框架,使開發人員能夠部署各種應用程式,包括Web應用程式、API和微服務。 Fly.io 使用邊緣運算和全球選播網路的組合來最佳化路由並確保使用者要求定向到最近的可用應用程式實例。 17. Tigris ----------- [Tigris](https://www.tigrisdata.com/)是一種與 S3 相容的全球分散式物件儲存服務,它將資料儲存為物件儲存桶中。物件是一個文件和描述該文件的任何元資料。桶子是存放物件的容器。 ‍ 哪個才是最好的開發工具? ------------ 只要您的武器庫中擁有每個類別中的任何一種工具,您就可以開始使用了。但如果我必須為您選擇一種工具,我會選擇 Visual Studio Code。它因其多功能性、對語言和框架的廣泛支援以及強大的擴展生態系統而脫穎而出,使其成為首選。 工程生產力工具 ------- 工程生產力工具支援軟體開發的特定工程方面。這可能包括分析、自動化測試、部署、容器化或靜態程式碼分析。使用這些工具,您可以確保程式碼品質和效能,並在開發週期的早期發現潛在問題。一些常見的工程生產力工具包括Docker、Jenkins、Confluence、JIRA等。 結論 我很想知道 2024 年您會從這個[清單](https://www.devzero.io/blog/how-to-calculate-developer-productivity-metrics-using-mergestat-and-devzero)中選擇哪種工具。從本質上講,GitHub 和 Visual Studio Code 是 2024 年的必備工具。我仍在研究它們,誰知道呢,它們可能會出現在 2025 年的清單中。 本文原刊於 https://www.devzero.io/blog/best-developer-productivity-in-2024 --- 原文出處:https://dev.to/shohams/17-best-developer-productivity-tools-to-try-1a2a

2024 年程式設計師和開發人員應該學習的 5 項技能

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![面試時必須了解的 10 個系統設計概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxdldzd09fwws7nve36.png)](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 開發者們大家好,如果您一直從事程式設計和軟體開發,那麼您就會知道,在我們的領域中只有一個常數,那就是「變化」。 我們總是需要學習新的工具、技術、框架和技能來完成我們的工作,而且永無止境。如果你不學習,你就會和其他人一起落後,這就是為什麼我總是尋找新技能來學習。 在本文中,我將分享程式設計師和開發人員在 2024 年可以學習的 5 項技能,以更好地完成工作並提高效率。 過去,我討論過[API 網關與負載平衡器、](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的區別,你們非常喜歡,在本文中我將分享最重要的五種開發人員技能2024 年成為舞台中心。 ***PS 繼續閱讀直到最後。我有一份獎金給你。*** 這些技能包括新舊但必不可少的技能,例如快速工程、編碼、雲端運算領域、系統設計和Python,這些技能是任何軟體開發人員都需要的基本技能。 無論您是想要提升自己的經驗豐富的開發人員,還是想要提升自己形象的中級開發人員,這些技能都一定會對您有所幫助。 2024 年軟體工程師應該學習的 5 項技能 ---------------------- 在不斷發展的技術領域,對於尋求在 2024 年及以後蓬勃發展的開發人員來說,保持領先地位至關重要。 當我們探索軟體開發的動態領域時,某些技能已經成為現代開發人員不可或缺的技能,這就是您將在本文中學到的內容。 讓我們深入探討預計在 2024 年產生重大影響的前五項開發人員技能。 ### 1. 系統設計 到 2024 年,開發人員需要超越傳統的程式設計實踐,擁抱現代系統設計原則。這涉及了解分散式系統、微服務架構以及設計可擴展和彈性的應用程式。 能夠應對系統設計複雜性的開發人員能夠更好地建立強大的解決方案,以滿足快速發展的技術環境的需求。 如果您想深入學習系統設計,那麼您也可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站,它們有許多很棒的系統設計課程 [![如何回答系統設計問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd9nfio7kl57gyevndql.jpg)](https://bit.ly/3pMiO8g) 如果您需要更多資源,那麼這裡有[系統設計書籍](https://www.linkedin.com/pulse/8-best-system-design-books-programmers-developers-soma-sharma/)、 [課程](https://www.linkedin.com/pulse/10-best-system-design-courses-beginners-experienced-2023-soma-sharma/)和[網站](https://javarevisited.blogspot.com/2022/08/top-7-websites-to-learn-system-design.html)的列表,供您在 2024 年學習和掌握軟體設計和架構。 --- 2. 快速工程 ------- 在這個人工智慧工具的時代,軟體開發並非一成不變,越來越多的人工智慧工具來幫助您進行編碼、除錯和測試,但您需要及時的工程設計才能有效地利用這些工具。 換句話說,快速工程已成為旨在快速交付高品質產品的開發人員的關鍵技能。 這不僅涉及編寫高效、簡潔的程式碼,還涉及採用敏捷方法和工具來簡化整個開發過程。 精通即時工程的開發人員可以快速回應不斷變化的需求,確保他們的軟體在面對不斷變化的市場需求時保持適應性和彈性。 如果您需要資源來學習 ChatGPT 和提示工程,那麼我建議您查看 Coursera 上的[針對開發人員的 ChatGPT 提示工程](https://datacamp.pxf.io/c/1193463/1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fcourses%2Fchatgpt-prompt-engineering-for-developers)課程。 [![最佳即時工程課程](https://miro.medium.com/v2/resize:fit:609/1*gpcsXMiCmBgVIr_I7RFYGg.jpeg)](https://medium.com/javarevisited/top-5-chatgpt-online-courses-for-2023-e6fc706cc483) 如果您需要更多選項,那麼您也可以查看這些[ChatGPT 和 Prompt Engineering 課程](https://javinpaul.medium.com/top-10-udemy-courses-to-learn-artificial-intelligence-in-2023-85a10ef473ca)以了解更多資訊。 --- 3. 編碼 ----- 雖然編碼似乎是一項顯而易見的技能,但其重要性怎麼強調也不為過。掌握編碼不僅限於編寫功能性程式;它涉及編寫乾淨、可維護和可擴展的程式碼。 開發人員應該專注於提高程式語言的熟練程度、理解演算法和實施最佳實踐。 堅實的編碼基礎是任何開發工作成功的基石。而且,如果您需要資源,可以查看[《2024 年完整 JavaScript 課程:建立真實專案》](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-javascript-course%2F)作為開始。 [![學習 JavaScript 編碼的最佳課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aesrzc6ogw58ktw6nxax.png)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-javascript-course%2F) 如果您需要更多選擇,您也可以查看這些[**程式設計和程式設計課程**](https://medium.com/javarevisited/7-best-coding-course-to-learn-programming-with-zero-experience-in-2020-52f7d0d9cb80) --- 4.雲端運算 ------ 雲端運算已經從一個流行詞變成了開發人員的基本技能。隨著對雲端服務的依賴日益增加,開發人員必須精通在雲端環境中部署、管理和最佳化應用程式。 AWS、Azure 和 Google Cloud 等平台是現代開發不可或缺的一部分,精通雲端運算的開發人員可以建立可擴展且經濟高效的解決方案。 而且,如果您需要資源,可以查看這些文章,您可以在其中找到強烈建議的[**資源來學習雲端運算**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) [![學習AWS的最佳課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4mboj5cv4fufo8om7v0.jpeg)](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) 而且,如果您需要更多選擇,還可以參考這篇文章,您可以在 Coursera 上找到強烈推薦的[AWS 基礎專業課程](https://medium.com/javarevisited/top-10-courses-to-learn-amazon-web-services-aws-cloud-in-2020-best-and-free-317f10d7c21d)。該程式是AWS自己建立的。 --- ### 5.Python [Python](https://www.python.org/)繼續維護其作為多功能且強大的程式語言的主導地位。從 Web 開發到資料科學、機器學習和人工智慧,Python 始終處於創新的前沿。 2024 年的開發人員應該投資掌握 Python,因為它不僅有助於快速開發,而且還提供了通往塑造產業未來的眾多尖端技術的入口網站。 如果你想在 2024 年學習並掌握 Python,你可以從 Python 課程[100 Days of Code: The Complete Python Pro Bootcamp for 2024 開始](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F),我現在也用它來學習 Python。 [![學習Python的最佳課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5wlgc9kzsa03o0agoz3.png)](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F) 如果您需要更多資源,您也可以查看這些[Python 書籍](https://javarevisited.blogspot.com/2019/07/top-5-books-to-learn-python-in-2019.html)、 [課程](https://betterprogramming.pub/top-5-courses-to-learn-python-in-2018-best-of-lot-26644a99e7ec)和[網站](https://medium.com/javarevisited/10-free-python-tutorials-and-courses-from-google-microsoft-and-coursera-for-beginners-96b9ad20b4e6)來深入學習 Python。 這就是**您在 2024 年可以學習的 5 項最重要的開發人員技能**。總之,2024 年頂尖開發人員技能反映了業界對敏捷性、適應性和卓越技術的需求。 無論您是經驗豐富的開發人員還是剛開始編碼之旅,磨練這些技能無疑將使您成為不斷發展的軟體開發世界中的寶貴資產。 迎接挑戰,保持好奇心,踏上持續學習之旅,在 2024 年及以後的動態格局中蓬勃發展。 ### 獎金 正如所承諾的,這是給您的獎勵,一本免費的書,您可以閱讀它來學習分散式系統設計,您可以下載免費的 PDF 或在 Microsoft 上在線閱讀 --- [https://info. microsoft.com/rs/ 157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf) ![學習分散式系統設計的免費書籍](https://miro.medium.com/v2/resize:fit:276/0*AwK4rZgpbC15wA_b.png) 請在評論中告訴我您 2024 年將學習哪些技能?我總是渴望學習可以提升我作為軟體開發人員的形象的技能。 謝謝 --- 原文出處:https://dev.to/somadevtoo/5-skills-programmers-and-developers-should-learn-in-2024-3bmp

使用 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

加入我們參加 AWS Amplify Fullstack TypeScript 挑戰賽:獎品為 3,000 美元!

--- 標題:加入我們參加 AWS Amplify Fullstack TypeScript 挑戰賽:獎品為 3,000 美元! 發表:真實 描述: 標籤:devchallenge、awschallenge、放大、全端 封面圖:https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z55ngddx33ptj9dapt07.png 使用 100:42 的比例可獲得最佳效果。 ===================== 發佈於: 2024-05-14 20:36 +0000 =========================== --- 我們很高興地宣布我們與 AWS Amplify 的第一個合作挑戰。 [AWS Amplify Fullstack TypeScript 挑戰賽](https://dev.to/challenges/aws)將持續到**5 月 26 日**,提供了一個探索 AWS 服務的廣度和深度以及提升您的技能的機會。 AWS Amplify 擁有您在短短幾個小時內建立 Web 和行動應用程式所需的一切。 **這項挑戰有一個提示,但有幾種獲勝方法!**我們迫不及待地想看看您學到了什麼和取得了什麼成就! 提示 -- ### 使用 AWS Amplify Gen 2 建置和部署全端應用程式 您的任務是使用 AWS Amplify Gen 2 建立一個整合以下一項或多項功能的應用程式: - **[資料](https://docs.amplify.aws/react/build-a-backend/data/)** - **[驗證](https://docs.amplify.aws/react/build-a-backend/auth/)** - **[無伺服器功能](https://docs.amplify.aws/react/build-a-backend/functions/)** - **[文件儲存](https://docs.amplify.aws/react/build-a-backend/storage)** 這是供任何想要直接參與的人使用的提交模板,但請在提交之前查看[官方挑戰頁面](https://dev.to/challenges/aws)上的所有挑戰規則。 {% cta https://dev.to/new?prefill=---%0Atitle%3A%20%0Apublished%3A%20%0Atags%3A%20devchallenge%2C%20awschallenge%2C%20amplify%2C%20fullstack%0A ---%0A%0A*這%20是%20a%20submission%20for%20the%20%5BThe%20AWS%20Amplify%20Fullstack%20TypeScript%20Challenge%20%5D(https%3A%2F%2Fdevgesto% 2Fawschallenge )* %0A%0A%23%23%20什麼%20I%20內建%0A%3C! %0A%0A%23%23% 20Demo%0A%3C!--%20Share%20a%20link%20to%20your%20deployed%20solution%20on%20Amplify%20Hosting%2C%20and%20% 20screenshots%20。 2C%20what%20you%20learned%2C%20anything%20you%20are %20尤其%20proud%20of%2C%20what%20you%20hop%20to%20do%20next%2C%20etc.you%20.20to%20do%20next%2C%20etc.%20.20--% %0A%0A**已連接%20Components%20and%2For%20Feature%20Full** % 0A%0A%3C!--%20讓%20us%20知道%20if%20you%20development%20UI%20using%20Amify%20you%20development%20UI%20using%20Amifyify% 20for%20UX%20patterns%2C%20and%2For%20if%20your%20project%20includes %20all%20four%20features%3A%20data%2C%20authentication%2C%20features%3A%20data%2C%20authentication%2C%20features%3A%20data%20function. --%3E%0A%0A%3C!--%20Team%20Submissions%3A %20請%20pick%20one%20member%20到%20publish%20the%20submission%20and%20credit%20teammates%20by%200%20by%20and%20credit%20teammates%20by%20and%20credit%20teammates%20by%的%20DEV%20usernames%20直接%20in%20the%20body%20of%20the%20post。 %20image%20(if%20you%20want).%20--%3E%0A%0A%0A %3C!--%20感謝%20%20參與!%20%E2%86%92%0A %} 提交模板 {% 結束%} **正在尋找一些專業技巧?[向下滾動](#tips-and-tricks)!** ### 評審標準 所有提交的作品將根據以下內容進行評判: - 底層技術的使用 - 可用性和使用者體驗 - 無障礙 - 創造力 兩個額外獎項類別 -------- - **連線元件**:授予使用 Amplify 連線元件實現 UX 模式開發 UI 的頂級提交。 - **功能完整**:授予頂級提交,該提交包含挑戰提示中的所有四個功能:資料、身份驗證、無伺服器功能和文件儲存。 獎品 -- **我們的總冠軍將獲得:** - $1,500 禮品卡或同等金額 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **我們的兩個獎項類別獲獎者將獲得:** - $750 等禮品卡 - 專屬開發者徽章 - 來自[DEV 商店](https://shop.forem.com)的禮物 **所有提交有效提交的參與者都**將在其 DEV 個人資料中收到完成徽章。 如何參與 ---- 為了參與,您需要使用與每個提示關聯的提交範本來發布貼文。所有提交內容都必須部署到 Amplify Hosting。 請在提交之前查看我們的完整[規則、指南和常見問題解答頁面,](https://dev.to/challenges/aws)以便您了解我們的參與指南和官方競賽規則(例如資格要求)。 技巧和竅門 ----- 您可以使用 AWS 做很多事情,因此我們提供了一些想法,讓您在考慮建置什麼以及如何建置時供您思考。 - 您可以用不到 5 行程式碼定義由 Amazon Simple Storage Service (S3) 提供支援的儲存桶!更好的是,您可以使用[Amplify 的雲端沙箱環境](https://docs.amplify.aws/react/deploy-and-host/sandbox-environments/)測試您的儲存功能。 - 如果您想同時檢查兩個功能,則可以透過上傳到您的 S3 儲存桶來觸發由 AWS Lambda 提供支援的無伺服器功能 😉 - Next.js 和 Nuxt 應用程式的部署是零配置![存取入門指南](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html)。 指南和文件 ----- - 第一次建立 Amplify 應用程式?查看他們的[快速入門指南](https://docs.amplify.aws/react/start/quickstart/)以快速入門。 - [完整的 AWS Amplify 開發人員文件](https://docs.amplify.aws) **有技術問題嗎?在 AWS Amplify 說明線程中留下評論:** {% 嵌入 https://dev.to/aws/the-aws-amplify-fullstack-typescript-challenge-help-thread-529a %} 重要的日子 ----- - 5 月 15 日:AWS Amplify Fullstack TypeScript 挑戰賽開始! - 5 月 26 日:提交截止時間為太平洋夏令時間晚上 11:59 - 5 月 28 日:公佈得獎者 我們希望您喜歡使用 AWS Amplify 快速從前端過渡到全端。 🚀 祝你好運,編碼愉快! --- 原文出處:https://dev.to/devteam/join-us-for-the-the-aws-amplify-fullstack-typescript-challenge-3000-in-prizes-ghm

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

48 小時內更改資料庫 5 次,使我們的發布瀏覽量達到 35,000 次

這個故事的開始方式和它的標題一樣古怪。我於 2021 年開始[整合推理](https://integrated-reasoning.com/),以找出在解決[背包問題](https://en.wikipedia.org/wiki/Knapsack_problem)(例如 9、33 和 65 位元暫存器)時使用[任意精度](https://docs.amd.com/r/en-US/ug1399-vitis-hls/Overview-of-Arbitrary-Precision-Integer-Data-Types)整數會發生什麼。我的想法是,靈活的字長將使解決背包問題的[偽多項式時間演算法](https://en.wikipedia.org/wiki/Pseudo-polynomial_time#Knapsack_problem)更有效。簡而言之,它確實有幫助,但最大的收益來自[管道化](https://www.xilinx.com/developer/articles/task-level-parallelism-and-pipelining-in-hls.html)。 快進到 2024 年 4 月[中旬](https://irx.app)。我們規劃了一個 MVP,從本質上將執行[HiGHS](https://github.com/ERGO-Code/HiGHS)等開源求解器的體驗從命令列轉移到瀏覽器中。賣點是這些過程可能需要數月或更長時間才能完成,並且不必爭論它們將幫助我們的用戶專注於優化而不是執行優化所需的基礎設施。 將日誌從 AWS 即時推送到瀏覽器是我以前從未做過的事情。我認為這與[從 LLM 串流文字](https://vercel.com/docs/recipes/streaming-from-llm)的問題大致相似,這是我以前從未做過的事情,最近已經有了大量的發展。一方面,即時日誌事件對 MVP 來說可能有些過大了。另一方面,即時渲染日誌看起來很漂亮,並且可以幫助我們提供像命令列一樣流暢的使用者體驗。我們就這麼做了。 ![irx.app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f5ncdab8cecwrfidgv5o.png) 我們最初的計劃是使用[Prisma Pulse](https://www.prisma.io/docs/pulse/what-is-pulse)在邊緣函數中訂閱 Postgres 寫入,該邊緣函數使用[Vercel 串流回應](https://vercel.com/docs/functions/streaming)將每一行標準輸出從[HiGHS](https://github.com/ERGO-Code/HiGHS) 、 [CBC](https://github.com/coin-or/Cbc)和[SCIP](https://github.com/scipopt/scip)傳送到瀏覽器。除了複雜性之外,該計劃還存在兩個主要問題。找到一個具有正確的[表複製功能](https://www.prisma.io/docs/pulse/database-setup/general-database-instructions)組合來滿足 Pulse 和我們後端的要求的託管 Postgres 實例並非易事,這導致了本文標題前半部分的荒謬之處。兩天內五次更換 Postgres 提供者所引發的一系列事件仍然令我震驚。 ![螞蟻威爾森推特](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42o4f7nsoane5mzl3bap.png) 當來自 Supabase 的 Long ( [@beertocode](https://x.com/beertocode) ) 提出挑戰時,骨牌效應開始了。他解釋說,他希望為使用 Supabase 進行建造的新人提供額外的推動力。如果我們在兩週內與 Supabase 一起建立並發布,他們將利用社交媒體上的超級粉絲來使此次發布成為一項重大活動。挑戰被接受了,挑戰確實如此。 在評估資料庫選項時,社群媒體機會通常不被考慮在內。然而,我們的發布目標是收集盡可能多的用戶回饋,因此這是我們不能忽視的因素。我對 Supabase 的產品幾乎一無所知,因此花了一個下午的時間閱讀了他們的所有文件。到那天晚上,我對於如何建立 IRX 有了一個完全不同、更簡單的思維模型。 Supabase 的[匿名登入](https://supabase.com/docs/guides/auth/auth-anonymous)功能與[行級安全性相](https://supabase.com/docs/guides/auth/row-level-security)結合,這意味著人們可以在發布當天使用 IRX,而無需執行註冊程序。我們談論的是零准入門檻,在 2024 年看似永無止境的「建立另一個帳戶並重置密碼」的循環中,我什至認為這是不可能的。 事實證明,匿名登入對我們來說非常有價值,因為它使近 300 人能夠在發布當天嘗試使用 IRX 解決混合整數程式 - 即使他們不知道 IRX 是什麼並且只是玩玩。我們從比我想像的更廣泛的背景中獲得了令人難以置信的反饋。 ![IRX 流量](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h0en2wbnzudxv7wfsbn9.png) 我們的即時日誌流方法的兩個問題中的第二個問題直到我們實現該功能之後才出現。 Prisma Pulse 每個表最多有 20 個同時訂閱。直到資源洩漏瞬間消耗了我們的整個連接配額之前,這個限制並不明顯。如果將並髮用戶數限制在 20 個,則不會帶來良好的啟動效果,而且時間真的很緊迫。 ![IRX 啟動定時器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7banl0soa2fm39kcwqdu.png) 當 Long 在三小時後向我們發推文時,我們仍在除錯串流媒體。幸運的是,到目前為止,我已經閱讀了有關 Supabase 的所有內容,包括他們的[即時事件](https://supabase.com/docs/guides/realtime)[配額表](https://supabase.com/docs/guides/realtime/quotas),該表支援開箱即用的 10,000 個並發用戶端。進行切換很容易,這很大程度上要歸功於 Supabase 的 TypeScript[類型產生](https://supabase.com/docs/reference/cli/supabase-gen-types-typescript)。 除了一些[背壓](https://sdk.vercel.ai/docs/advanced/backpressure)問題之外,我們還設法為在可能不同的現場實例上同時執行的三個求解器提供即時日誌流。 ![IRX基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b1lgl316idyd9vcprnz8.png) ![IRX 解算器基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tv7730xmmhcmn1rqcfgh.png) (IRX 內部基礎架構圖,作者: [@baykovr](https://twitter.com/baykovr) ) 龍說得最好: ![長推特](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s50siph4hz53iqtpn5r.png) 真正瘋狂的是,我因為 Supabase 整合而註冊了 Resend。他們的創辦人[@zenorocha](https://x.com/zenorocha)在發布前幾天炸毀了[我們的 Twitter](https://twitter.com/IntegrateReason/) ,僅用一條推文就為我們的發布周流量增加了 16,000 次瀏覽。 ![芝諾·羅查在推特上](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/juruto1h7g5m32eum8ho.png) 這是我在發布當天對 IRX 基礎設施的草圖: ![IRX 發布日基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a263k49npgp2p22ane1i.png) 我們驚慌地發射了。感謝您對 Supabase 的挑戰! ![Supabase 在 Twitter 上](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5j5fqeqyfolulnf1ctrb.png) --- 原文出處:https://dev.to/supabase/changing-databases-5-times-in-48-hours-boosted-our-launch-to-35000-views-1oc2

掌握關聯式資料庫設計:綜合指南

介紹 -- 在當今資料驅動的世界中,有效儲存和管理資訊對於各種規模的企業和組織都至關重要。關聯式資料庫已成為以結構化和可擴展的方式組織和操作資料的強大解決方案。在這篇文章中,我們將探討關聯式資料庫的基礎知識、它們的管理系統以及支援有效資料庫設計的原則。 --- 什麼是資料庫? ------- 資料庫是資料的結構化集合,其組織和儲存方式有利於高效檢索、操作和管理。將其視為數位文件櫃,其中不是實體資料夾和文件,而是整齊排列的表格和記錄,以便於存取。 什麼是關係資料庫? --------- 關聯式資料庫是一種將資料組織成具有行(記錄)和列(欄位)的表(關係)的資料庫。這些表透過關係互連,允許以各種方式存取和組合資料。想像一下電子表格的集合,每個電子表格代表資料的不同方面,但能夠無縫連結和組合它們之間的資訊。 關係型資料庫管理系統 ---------- 關聯式資料庫管理系統 (RDBMS) 是一種軟體應用程式,旨在建立、管理關聯式資料庫並與之互動。它提供了一個用於在資料庫中儲存、檢索和操作資料的結構化框架。 RDBMS 的一些熱門範例包括 MySQL、PostgreSQL、Oracle 和 Microsoft SQL Server。 --- SQL簡介 ----- SQL(結構化查詢語言)是用於與關聯式資料庫互動的標準程式語言。它允許您建立、讀取、更新和刪除資料庫中的資料,以及定義和修改資料庫結構本身。 SQL 就像一種通用語言,可讓您與不同的 RDBMS 平台進行通訊。 命名約定 ---- 在 SQL 中,遵循一致的命名約定對於清晰度和可維護性至關重要。這是一個例子: ``` -- Good naming conventions CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(100), last_name VARCHAR(100), email VARCHAR(100) ); ``` 什麼是資料庫設計? --------- 資料庫設計是建立用於儲存和管理資料庫中的資料的高效且有組織的結構的過程。它涉及定義表、列、關係和約束,以確保資料完整性、最小化冗餘並優化效能。正確的資料庫設計是建立健全且可擴展的應用程式的基礎。 ![資料庫設計形象](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/de0l7km0yufdp2ssak3s.png) 資料的完整性 ------ 資料完整性是指資料庫中儲存的資料的準確性、一致性和可靠性。它確保資料遵循特定的規則和約束,防止錯誤和不一致。資料完整性分為三種: 1. **實體完整性**:確保表中的每一行都可以透過主鍵唯一標識,且主鍵不能有空值。 2. **參照完整性**:透過確保一個表中的外鍵值與另一表中的主鍵值相符來維護表之間的關係。 3. **域完整性**:透過限制可儲存的資料類型、格式和值範圍,強制給定列輸入有效的條目。 ``` -- Example: Enforcing data integrity CREATE TABLE orders ( order_id INT PRIMARY KEY, -- Entity integrity customer_id INT FOREIGN KEY REFERENCES customers(customer_id), -- Referential integrity order_date DATE NOT NULL, -- Domain integrity total_amount DECIMAL(10, 2) CHECK (total_amount >= 0) -- Domain integrity ); ``` 資料庫術語 ----- - **表**:按行和列組織的相關資料的集合。 - **行**:表中的單一實例或條目(也稱為記錄或元組)。 - **列**:表中資料的特定特徵或屬性(也稱為欄位或屬性)。 - **主鍵**:唯一標識表中每一行的列或列組合。 - **外鍵**:引用另一個表的主鍵的列或列的組合,在兩個表之間建立關係。 - **連接**:根據相關列組合兩個或多個表中的行的操作。 - **索引**:一種資料結構,透過建立表格中資料的排序表示來提高資料檢索操作的效能。 - **視圖**:從一個或多個基礎表動態產生的虛擬表。 - **預存程序**:預先編譯的 SQL 語句集合,可以作為單一單元執行。 - **觸發器**:特殊類型的預存程序,當表中發生特定事件(例如 INSERT、UPDATE 或 DELETE 語句)時會自動執行。 原子值 --- 在資料庫設計中,儲存原子值非常重要,這意味著儲存無法進一步劃分的最小資訊片段。這項原則有助於保持資料完整性並避免冗餘。 例如,與其將客戶的全名儲存在單一欄位中,不如將其分成名字和姓氏欄位。這樣,您可以輕鬆地獨立搜尋、排序或操作名稱的每個部分。 ``` -- Example: Storing atomic values CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), email VARCHAR(100) ); ``` --- 按鍵簡介 ---- 鍵是資料庫設計中的重要組成部分,有助於確保資料完整性並建立表之間的關係。它們充當記錄的唯一標識符,並實現高效的資料檢索和操作。 主鍵索引 ---- 主鍵是唯一標識表中每筆記錄的列或列的組合。它確保每個記錄都是唯一的並且可以輕鬆找到。通常會對主鍵建立索引以提高查詢效能。 ``` CREATE TABLE customers ( customer_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), email VARCHAR(100) ); ``` 查找表 --- 查找表也稱為參考表或程式碼表,是包含預定義值集的表,這些值可用於填入其他表中的列。查找表透過確保一致性和減少冗餘來幫助維護資料完整性。 ``` -- Lookup table for product categories CREATE TABLE product_categories ( category_id INT PRIMARY KEY, category_name VARCHAR(100) ); -- Products table referencing the lookup table CREATE TABLE products ( product_id INT PRIMARY KEY, product_name VARCHAR(100), category_id INT, FOREIGN KEY (category_id) REFERENCES product_categories(category_id) ); ``` 超級密鑰和候選密鑰 --------- 超級鍵是表中唯一標識每筆記錄的一組或多列。候選鍵是最小超鍵,這意味著它不包含不必要的列。換句話說,候選鍵是一個超級鍵,具有唯一標識每個記錄所需的最少列數。 主鍵和備用鍵 ------ 主鍵是選擇作為表的主要唯一辨識符的候選鍵。備用鍵也稱為唯一鍵,是任何其他本來可以被選為主鍵但沒有被選為主鍵的候選鍵。 ``` CREATE TABLE employees ( employee_id INT PRIMARY KEY, email VARCHAR(100) UNIQUE, -- Alternate key first_name VARCHAR(50), last_name VARCHAR(50) ); ``` 代理鍵和自然鍵 ------- 代理鍵是用作表中主鍵的人工鍵(通常是序號或 GUID)。它與資料本身沒有固有的意義或關係。另一方面,自然金鑰是從資料本身衍生的金鑰,例如員工 ID 或產品程式碼。 ``` -- Surrogate key CREATE TABLE orders ( order_id INT PRIMARY KEY IDENTITY(1,1), -- Surrogate key customer_name VARCHAR(100), order_date DATE ); -- Natural key CREATE TABLE products ( product_code VARCHAR(10) PRIMARY KEY, -- Natural key product_name VARCHAR(100), price DECIMAL(10,2) ); ``` 我應該使用代理鍵還是自然鍵? -------------- 代理鍵和自然鍵之間的選擇取決於多個因素,包括資料的性質、資料變更的可能性以及重複或衝突的可能性。 代理鍵通常是首選,因為它們是: - 不可變:即使資料發生變化,它們也不會隨著時間而改變。 - 保證唯一性:由資料庫系統生成,保證唯一性。 - 不透明:它們不會洩露有關資料本身的任何訊息,這對於安全和隱私來說是有益的。 另一方面,自然鍵在以下情況下可能會很有優勢: - 資料具有固有的唯一性,例如產品程式碼或員工 ID。 - 資料不太可能隨著時間的推移而改變,從而降低了衝突或重複的風險。 - 需要人類可讀且有意義的辨識符。 外鍵 -- 外鍵是一個表中引用另一個表的主鍵的列或列的組合。它在兩個表之間建立連結並強制引用完整性,確保子表中的資料有效且與父表中的資料一致。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ); ``` NOT NULL 外鍵 ----------- 在某些情況下,可能需要對外鍵列設定 NOT NULL 約束,這表示該列不能有空值。此約束可確保子表中的每筆記錄都與父表中的有效記錄相關聯。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT NOT NULL, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ); ``` 外鍵約束 ---- 外鍵約束定義表之間引用完整性的規則。這些約束可以包括更新或刪除父表中引用的記錄時要採取的操作,例如: - `CASCADE` :當父表中的記錄被更新或刪除時,子表中對應的記錄也會被更新或刪除。 - `SET NULL` :當父表中的記錄被更新或刪除時,子表中對應的外鍵值被設定為NULL。 - `NO ACTION` :當父表中的記錄被更新或刪除時,子表中對應的外鍵值保持不變,如果違反引用完整性則回滾操作。 ``` CREATE TABLE orders ( order_id INT PRIMARY KEY, customer_id INT, order_date DATE, FOREIGN KEY (customer_id) REFERENCES customers(customer_id) ON UPDATE CASCADE ON DELETE SET NULL ); ``` 簡單鍵、複合鍵、複合鍵 ----------- - 簡單鍵是用作主鍵或外鍵的單一欄位。 - 複合鍵是用作主鍵或外鍵的兩個或多個列的組合。 - 複合鍵是用作外鍵的兩個或多個簡單鍵的組合。 ``` -- Simple key CREATE TABLE orders ( order_id INT PRIMARY KEY, ... ); -- Composite key CREATE TABLE order_items ( order_id INT, product_id INT, quantity INT, PRIMARY KEY (order_id, product_id) ); -- Compound key CREATE TABLE shipments ( shipment_id INT PRIMARY KEY, order_id INT, product_id INT, FOREIGN KEY (order_id, product_id) REFERENCES order_items(order_id, product_id) ); ``` --- 關係 ---- 關係是關聯式資料庫的基石,可讓您連接和組合來自不同表的資料。關係主要分為三種: ![關係形象](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qadj6qd495g7yovdcx2d.jpg) 一對一的關係 ------ 在一對一關係中,一個表中的每筆記錄都與另一個表中的一筆記錄相關聯,反之亦然。例如,考慮一個資料庫,其中每位員工都有一名且僅有一名經理,且每位經理管理一名且僅有一名員工。這種關係在實務上比較少見。 ![一對一影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm0xf8h40rktgqzbp4o4.png) 一對多關係 ----- 在一對多關係中,一個表格(「一」側)中的每筆記錄都可以與另一個表(「多」側)中的多個記錄關聯。例如,在學校的資料庫中,一位老師可以教授多個班級,但每個班級只有一位老師授課。 ![一對多影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe9iuj8n0n3b1cj24pdf.png) 多對多關係 ----- 在多對多關係中,一個表中的每筆記錄可以與另一表中的多筆記錄關聯,反之亦然。例如,在大學的資料庫中,一個學生可以註冊多個課程,每個課程可以有多個學生註冊。 ![多對多關係影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2prop1r97o0cj7cr6qw.jpg) ### 關係摘要 - 一對一:表A中的一筆記錄與表B中的一筆且只有一筆記錄相關,反之亦然。 - 一對多:A表中的一筆記錄可以與B表中的多筆記錄相關,但B表中的一筆記錄只能與A表中的一筆記錄相關。 - 多對多:表A中的多筆記錄可以與表B中的多筆記錄相關,反之亦然。 設計關係(SQL 實作) ------------ **1 - 設計一對一關係** 要設計一對一關係,您可以將兩個表中的所有列包含在一個表中,也可以建立兩個單獨的表並使用外鍵約束來連結它們。 ``` -- Option 1: Single table CREATE TABLE employees ( employee_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), manager_first_name VARCHAR(50), manager_last_name VARCHAR(50) ); -- Option 2: Two tables with foreign key CREATE TABLE employees ( employee_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50), manager_id INT UNIQUE, FOREIGN KEY (manager_id) REFERENCES employees(employee_id) ); ``` 2 -**設計一對多關係** 要設計一對多關係,通常會建立兩個表:父表(“一”側)和子表(“多”側)。子表包含引用父表主鍵的外鍵列。 ``` -- Parent table CREATE TABLE teachers ( teacher_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); -- Child table CREATE TABLE classes ( class_id INT PRIMARY KEY, class_name VARCHAR(100), teacher_id INT, FOREIGN KEY (teacher_id) REFERENCES teachers(teacher_id) ); ``` **3 - 設計多對多關係** 要設計多對多關係,通常會建立第三個表(稱為聯結表或關聯表),將兩個主表連結在一起。此聯結表包括引用主表的外鍵列 ``` -- Table 1 CREATE TABLE students ( student_id INT PRIMARY KEY, first_name VARCHAR(50), last_name VARCHAR(50) ); -- Table 2 CREATE TABLE courses ( course_id INT PRIMARY KEY, course_name VARCHAR(100), description TEXT ); -- Junction or Intemediary table CREATE TABLE enrollments ( enrollment_id INT PRIMARY KEY, student_id INT, course_id INT, FOREIGN KEY (student_id) REFERENCES students(student_id), FOREIGN KEY (course_id) REFERENCES courses(course_id) ); ``` 父表和子表 ----- 在一對多或多對多關係中, **“一”**側的表通常稱為父表,而**“多”**側的表稱為子表。子表包含引用父表主鍵的外鍵。 例如,在教師-班級關係中, `teachers`表是父表, `classes`表是子表。同樣,在學生-課程關係中, `students`和`courses`表是父表,而`enrollm`是父表。 實體關係建模簡介 -------- 實體關係建模(ER Modeling)是資料庫設計中使用的一種技術,用於直觀地表示資料庫的邏輯結構。它有助於辨識實體(表)、屬性(列)以及它們之間的關係,從而更容易理解和傳達資料庫設計。 ER 圖由以下部分組成: - **實體**:以矩形表示,實體是資料庫中的表或物件。 - **屬性**:在實體矩形內列出,屬性是描述實體的列或欄位。 - **關係**:以連接實體的線表示,關係描述了實體之間的關聯。 基數 -- 基數定義了兩個實體之間的數值關係。它指定一個實體可以與另一個實體的單一實例關聯的最大實例數。最常見的基數是: - 一對一(1:1):實體 A 的一個實例最多可以與實體 B 的一個實例關聯,反之亦然。 - 一對多(1:N):實體 A 的一個實例可以與實體 B 的多個實例關聯,但實體 B 的一個實例只能與實體 A 的一個實例關聯。 - 多對多 (M:N):實體 A 的多個實例可以與實體 B 的多個實例關聯,反之亦然。 在 ER 圖中,基數以特定的符號表示,例如單線表示一對一,帶箭頭的線表示一對多,兩端帶箭頭的線表示多對多關係。 ![基數影像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nmife5ost450cgntriyi.png) 模態 -- 模態是指一個實體實例的存在是否依賴它與另一個實體的關係。有兩種類型的模態: - 部分模態:實例的存在不依賴它與另一個實體的關係。例如,客戶可以在沒有任何訂單的情況下存在。 - 總模態:實例的存在取決於它與另一個實體的關係。例如,沒有訂單,訂單項就不可能存在。 在 ER 圖中,模態使用特定的符號表示,例如單一條表示部分模態,雙條表示總模態。 --- 資料庫規範化簡介 -------- 資料庫規範化是組織資料庫中的資料以減少冗餘、最大限度地減少資料異常(插入、更新和刪除異常)並提高資料完整性的過程。它涉及將資料庫分解為較小的表,並根據特定規則或範式定義它們之間的關係。 資料庫規範化的主要目標是: - 消除冗餘資料 - 確保資料完整性 - 促進資料操作和維護 資料庫規範化有多種範式,每種都建立在前一種範式的基礎上。最常用的範式是: 1. 第一範式 (1NF) 2. 第二範式 (2NF) 3. 第三範式 (3NF) 1NF(資料庫規範化第一範式) --------------- 第一範式(1NF)是最基本的規範化形式。它規定表中的屬性(列)必須具有原子值,這意味著表中的每個單元格應包含單一值,而不是一組值。 例如,假設一個表格具有名為「PhoneNumbers」的資料列,該資料列儲存客戶的多個電話號碼。這違反了 1NF,因為該列包含一組值而不是單一值。為了符合 1NF,您需要將電話號碼分成單獨的列或為電話號碼建立單獨的表。 ``` -- Violates 1NF CREATE TABLE customers ( customer_id INT PRIMARY KEY, name VARCHAR(100), phone_numbers VARCHAR(200) -- Stores multiple phone numbers, violating 1NF ); -- Conforms to 1NF CREATE TABLE customers ( customer_id INT PRIMARY KEY, name VARCHAR(100), phone1 VARCHAR(20), phone2 VARCHAR(20), phone3 VARCHAR(20) ); ``` 2NF(資料庫規範化的第二範式) ---------------- 第二範式 (2NF) 建立在 1NF 的基礎上,解決了部分依賴問題。如果表屬於 1NF,且每個非主屬性(列)完全依賴整個主鍵,則該表屬於 2NF。 換句話說,如果一個表有一個複合主鍵(由多個列組成),那麼所有非鍵列必須依賴整個主鍵,而不僅僅是它的一部分。 例如,考慮一個具有複合主鍵`(student_id, course_id)`和列`grade`的表。如果`grade`欄位僅取決於`course_id` ,而不取決於`student_id`和`course_id`的組合,則該表違反了 2NF。 ``` -- Violates 2NF CREATE TABLE student_courses ( student_id INT, course_id INT, course_name VARCHAR(100), grade CHAR(2), -- Depends only on course_id, not the entire primary key PRIMARY KEY (student_id, course_id) ); -- Conforms to 2NF CREATE TABLE student_courses ( student_id INT, course_id INT, grade CHAR(2), PRIMARY KEY (student_id, course_id) ); CREATE TABLE courses ( course_id INT PRIMARY KEY, course_name VARCHAR(100) ); ``` 3NF(資料庫規範化的第三範式) ---------------- 第三範式 (3NF) 建立在 2NF 的基礎上,解決了傳遞依賴問題。如果表屬於 2NF,且每個非主屬性都非傳遞依賴於主鍵,則該表屬於 3NF。 換句話說,如果一個非鍵列依賴另一個非鍵列,那麼該表就違反了 3NF,並且非鍵列應該分離到它們自己的表中。 例如,考慮一個包含`student_id` 、 `student_name` 、 `class_id`和`class_name`欄位的表。 `student_name`欄位取決於`student_id` ,而`class_name`欄位取決於`class_id` 。但是, `class_name`欄位也透過`class_id`欄位傳遞依賴`student_id` 。這違反了 3NF。 ``` -- Violates 3NF CREATE TABLE student_classes ( student_id INT, student_name VARCHAR(100), class_id INT, class_name VARCHAR(100), PRIMARY KEY (student_id, class_id) ); -- Conforms to 3NF CREATE TABLE students ( student_id INT PRIMARY KEY, student_name VARCHAR(100) ); CREATE TABLE classes ( class_id INT PRIMARY KEY, class_name VARCHAR(100) ); CREATE TABLE student_classes ( student_id INT, class_id INT, PRIMARY KEY (student_id, class_id), FOREIGN KEY (student_id) REFERENCES students(student_id), FOREIGN KEY (class_id) REFERENCES classes(class_id) ); ``` 透過遵循資料庫規範化的原則,您可以建立結構良好且高效的資料庫,從而最大限度地減少冗餘、保持資料完整性並促進資料操作和維護。 --- 索引(聚集索引、非聚集索引、複合索引) ------------------- 索引是提高資料庫中資料檢索操作效能的資料結構。它們在表中建立資料的排序表示,從而允許更快的搜尋和查詢。索引有幾種類型: - **聚集索引**:聚集索引根據索引鍵值對表中的行進行實體重新排序。每個表只能有一個聚集索引。 - **非聚集索引**:非聚集索引是一個單獨的物件,其中包含索引鍵值和指向表中相應行的指標。一個表可以有多個非聚集索引。 - **複合索引**:複合索引是索引鍵中包含多個欄位的索引。它可以是集群的,也可以是非集群的。 ``` -- Clustered index CREATE CLUSTERED INDEX idx_customers_name ON customers (last_name, first_name); -- Nonclustered index CREATE NONCLUSTERED INDEX idx_orders_date ON orders (order_date); -- Composite index CREATE INDEX idx_products_category_price ON products (category_id, price); ``` 資料類型 ---- 在資料庫領域,資料類型就像是保存特定類型資訊的不同形狀的容器。就像您不會將液體儲存在籃子中或將固體物體儲存在罐子中一樣,資料庫需要強制執行特定的資料類型以確保資料的完整性和一致性。 SQL 中的一些常見資料類型包括: - `INT`或`INTEGER` :儲存整數,例如`42`或`17` 。 - `FLOAT`或`DOUBLE` :儲存十進制數,例如`3.14159`或`0.00005` 。 - `VARCHAR`或`TEXT` :儲存文字資料,例如名稱或描述。 - `DATE`或`DATETIME` :儲存日期和時間值,例如`'2023-05-06'`或`'2024-01-01 12:34:56'` 。 - `BOOLEAN` :儲存真/假值,例如`1` (真)或`0` (假)。 選擇正確的資料類型至關重要,因為它會影響資料的儲存、查詢和操作方式。例如,嘗試在`INT`列中儲存大字串會導致錯誤或資料截斷。 ``` CREATE TABLE users ( id INT PRIMARY KEY, name VARCHAR(50) NOT NULL, age INT, is_active BOOLEAN DEFAULT 1 ); ``` 在此範例中,我們建立一個`users`表,其中包含`id` (整數)、 `name` (最多 50 個字元的字串)、 `age` (整數)和`is_active` (布林值,預設值為`1`或 true)欄位。 --- 連接簡介 ---- 連接就像連接資料庫中不同表的橋樑,允許您組合和檢索來自多個來源的相關資料。它們是關係資料庫中的基本概念,對於有效查詢和操作資料至關重要。 ![加盟圖片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iks7pvzjikxzgqicjh2x.png) 內部聯接 ---- 內部聯結就像兩個表之間的友好握手,其中只有在兩個表中具有匹配值的行才會包含在結果集中。這是一種基於公共列或列集組合多個表中的資料的方法。 ``` SELECT users.name, orders.order_date FROM users INNER JOIN orders ON users.id = orders.user_id; ``` 在這個範例中,我們從`users`表中檢索`name`列,從`orders`表中檢索`order_date`列,但僅限於`users`表中的`id`與`orders`表中的`user_id`相符的行。 3 個表上的內連接(範例) ------------- 假設我們有三個表: `users` 、 `orders`和`products` 。我們想要檢索每個訂單的使用者名稱、訂單日期和產品名稱。我們可以透過在所有三個表之間執行內部聯結來實現這一點: ``` SELECT users.name, orders.order_date, products.product_name FROM users INNER JOIN orders ON users.id = orders.user_id INNER JOIN products ON orders.product_id = products.id; ``` 在這裡,我們首先在`id`和`user_id`列上連接`users`和`orders`表。然後,我們將該連接的結果與`products`表的`product_id`和`id`列連接起來。這樣,我們可以在單一查詢中從所有三個表中檢索資料,但僅限於滿足連接條件的行。 外連接簡介 ----- 內部連接就像友好的握手,而外部連接更像是歡迎的擁抱。它們不僅包括兩個表中的匹配行,還包括一個或兩個表中的不匹配行,具體取決於外連接的類型。 右外連接 ---- 右外連接就像從右表到左表的溫暖擁抱。它包括右表中的所有行以及左表中的匹配行。如果左表中沒有符合的行,則結果將包含左表列的`NULL`值。 ``` SELECT users.name, orders.order_date FROM users RIGHT OUTER JOIN orders ON users.id = orders.user_id; ``` 在此範例中,我們從`orders`表(右表)中檢索所有行,以及`users`表(左表)中的符合`name`值。如果訂單沒有符合的用戶,則`name`列將包含`NULL` 。 JOIN 與 NOT NULL 列 ----------------- 有時,您可能只想對不為空的列執行聯接。當您想要從結果集中排除缺少資料的行時,這會很有用。 ``` SELECT users.name, orders.order_date FROM users INNER JOIN orders ON users.id = orders.user_id AND users.name IS NOT NULL; ``` 在此範例中,我們在`users`和`orders`表之間執行內部聯接,但我們新增了一個附加條件`users.name IS NOT NULL`以確保結果集中僅包含具有非空`name`值的行。 跨 3 個表的外連接 ---------- 與內連接範例類似,我們可以跨多個表執行外連接。假設我們想要檢索所有訂單以及使用者名稱和產品名稱,即使`users`或`products`表中缺少值。 ``` SELECT users.name, orders.order_date, products.product_name FROM orders LEFT OUTER JOIN users ON orders.user_id = users.id LEFT OUTER JOIN products ON orders.product_id = products.id; ``` 在這裡,我們從`orders`表開始,並對`users`和`products`表執行左外連接。這可確保所有訂單以及符合的使用者名稱和產品名稱(如果可用)都包含在結果集中。如果`users`或`products`表中沒有符合的行,則對應的列將包含`NULL`值。 別名 -- 別名就像 SQL 查詢中表格或欄位的暱稱。它們可以使查詢更具可讀性和更容易理解,特別是在處理長表或列名時,或在查詢中多次引用同一個表時。 ``` SELECT u.name, o.order_date, p.product_name FROM users u INNER JOIN orders o ON u.id = o.user_id INNER JOIN products p ON o.product_id = p.id; ``` 在此範例中,我們對`users`表使用別名`u` ,對`orders`表使用別名`o` ,對`products`表使用`p` 。這使得查詢更加簡潔且更易於閱讀,而不必多次重複完整的表名稱。 自加入 --- 自連結就像一張表在與自己對話。這是一種根據同一個表中的特定條件或關係將表與其自身連接的方法。這在處理分層或遞歸資料結構(例如員工-經理關係或巢狀類別)時非常有用。 ``` SELECT e.name AS employee, m.name AS manager FROM employees e LEFT OUTER JOIN employees m ON e.manager_id = m.id; ``` 在此範例中,我們對`employees`表執行自聯接以檢索每位員工的姓名及其對應經理的姓名。我們使用左外連接來確保所有員工都包含在結果集中,即使他們沒有指派經理。 --- 資料庫標記語言 (DBML) -------------- 資料庫建模語言(DBML)是一種簡單直觀的標記語言,用於描述關係型資料庫的結構。它提供了一種人類可讀的方式來定義表、列、關係和約束,從而使資料庫設計方面的溝通和協作變得輕鬆。 **DBML 入門** 要開始使用 DBML,您需要一個文字編輯器並對資料庫概念有基本的了解。讓我們建立第一個 DBML 檔案: ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } ``` 在這個範例中,我們定義了一個`users`表,其中包含`id` 、 `username` 、 `email`和`created_at`列。 `[pk]`標記指定`id`為主鍵, `[increment]`表示自動遞增, `[unique]`確保`email`的唯一性, `[default:` now() `]`將`created_at`的預設值設為目前時間戳記。 **建立表** DBML 可讓您在單一檔案中定義多個表格及其列。讓我們為資料庫新增更多表: ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } ``` 在這個範例中,我們新增了一個`posts`表,其中包含`id` 、 `title` 、 `content` 、 `user_id`和`created_at`欄位。 `[ref: > users.id]`標籤在`posts`表中的`user_id`欄位和`users`表中的`id`列之間建立外鍵關係。 **定義關係** DBML 支援表之間各種類型的關係,包括一對一、一對多和多對多。讓我們在資料庫中定義一些關係: ``` // my_database.dbml Table users { id int [pk, increment] username varchar email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } Ref: users.id < posts.user_id ``` 在此範例中,我們定義了`users`和`posts`表之間的一對多關係。 `Ref: users.id < posts.user_id`行指定`users`表中的`user_id`欄位引用`posts`表中的`id`列。 **新增約束** 約束確保資料完整性並在資料庫上強制執行規則。 DBML 支援各種約束,例如主鍵、外鍵、唯一約束和預設值。讓我們在表格中加入一些約束: ``` // my_database.dbml Table users { id int [pk, increment] username varchar [unique] email varchar [unique] created_at datetime [default: `now()`] } Table posts { id int [pk, increment] title varchar content text user_id int [ref: > users.id] created_at datetime [default: `now()`] } Ref: users.id < posts.user_id ``` 在此更新的範例中,我們為`users`表中的`username`名列新增了`[unique]`約束,以確保每個使用者名稱都是唯一的。 **記錄您的資料庫** DBML 可讓您為資料庫模式新增註解和註釋,使其更易於理解和維護。讓我們用註釋來記錄我們的表格: ``` // my_database.dbml Table users { id int [pk, increment] // Unique identifier for users username varchar [unique] // User's username email varchar [unique] // User's email address created_at datetime [default: `now()`] // Date and time when the user was created } Table posts { id int [pk, increment] // Unique identifier for posts title varchar // Title of the post content text // Content of the post user_id int [ref: > users.id] // ID of the user who created the post created_at datetime [default: `now()`] // Date and time when the post was created } Ref: users.id < posts.user_id // Relationship between users and posts ``` **DBML 的好處** - 簡單且人類可讀的語法 - 與資料庫無關的方法 - [dbdiagram.io](dbdiagram.io)上的免費視覺化工具 - 一致的可讀性和可維護性約定 - 豐富的文件和範例 --- 結論 -- 總而言之,關聯式資料庫設計構成了現代應用程式中高效能資料組織的支柱。了解其原理使您能夠建立強大且可擴展的資料庫。接下來,我們將深入研究 SQL 語法,釋放與資料庫有效互動的能力。請繼續關注我們對 SQL 世界的探索! --- 原文出處:https://dev.to/louaiboumediene/mastering-relational-database-design-a-comprehensive-guide-3jh8

可用於下一個專案的 30 多個強大 AI 庫

今天,我們將介紹 30 個或更多可以使用 AI 建置的專案。 所有專案都是開源的,因此您可以做出貢獻以使其變得更好。 有些專案可能擁有龐大的程式碼庫,但您可以從中獲得靈感並建立一個很酷的副專案。 相信我,如果這個清單沒有讓你感到驚訝,那麼沒有什麼會讓你感到驚訝:) 讓我們開始吧! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4ssxdcxcxmac945sj8x.gif) --- 1. [CopilotKit](https://go.copilotkit.ai/Anmol) - 在數小時內為您的產品提供 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)將聊天機器人整合到您的應用程式中。 基本概念是在幾分鐘內建立可用於基於 LLM 的應用程式的 AI 聊天機器人。 用例是巨大的,作為開發人員,我們絕對應該在下一個專案中嘗試使用 CopilotKit。 CopilotKit 在 GitHub 上擁有超過 5700 顆星,發布了 200 多個版本,這意味著它們不斷改進。 https://go.copilotkit.ai/Anmol Star CopilotKit ⭐️ --- 2. [AgentGPT](https://github.com/reworkd/AgentGPT) - 組裝、配置和部署自主 AI 代理程式。 ------------------------------------------------------------------------ ![代理GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gnc918anlnbbymwep8xv.png) AgentGPT 可讓您設定和部署自主 AI 代理程式。 它將嘗試透過思考要完成的任務、執行任務並從結果中學習來實現目標:) 它是使用以下方式建構的: - 引導:create-t3-app + FastAPI-模板。 - 框架:Nextjs 13 + Typescript + FastAPI - 驗證:Next-Auth.js - ORM:Prisma 和 SQLModel。 - 資料庫:Planetscale。 - 樣式:TailwindCSS + HeadlessUI。 - 架構驗證:Zod + Pydantic。 - 法學碩士工具:Langchain。 開始使用本[指南](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#getting-started-rocket)在本地安裝它。 您可以查看該應用程式的[演示](https://github.com/reworkd/AgentGPT?tab=readme-ov-file#-demo)並查看[即時網站](https://agentgpt.reworkd.ai/)。 ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v17lz12cn58ousqbiiyg.gif) 他們在 GitHub 上擁有 29k+ 顆星,並且正在發布`v1`版本。 https://github.com/reworkd/AgentGPT 明星 AgentGPT ⭐️ --- 3.[私人 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 ⭐️ --- 4. [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 舊指令 ⭐️ --- 5. [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,但它非常酷。 https://github.com/chidiwilliams/GPT-Automator 明星 GPT Automator ⭐️ --- 6. [Flowise](https://github.com/FlowiseAI/Flowise) - 拖放 UI 來建立您的客製化 LLM 流程。 --------------------------------------------------------------------------- ![流塞伊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r5bp43nil764fhe4a05z.png) Flowise 是一款開源 UI 視覺化工具,用於建立客製化的 LLM 編排流程和 AI 代理程式。 開始使用以下 npm 指令。 ``` npm install -g flowise npx flowise start OR npx flowise start --FLOWISE_USERNAME=user --FLOWISE_PASSWORD=1234 ``` 這就是整合 API 的方式。 ``` import requests url = "/api/v1/prediction/:id" def query(payload): response = requests.post( url, json = payload ) return response.json() output = query({ question: "hello!" )} ``` ![整合](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) 雲端主機不可用,因此您必須使用這些[說明](https://github.com/FlowiseAI/Flowise?tab=readme-ov-file#-self-host)自行託管。 讓我們探討一些用例: - 假設您有一個網站(可以是商店、電子商務網站或部落格),並且您希望廢棄該網站的所有相關連結,並讓法學碩士回答您網站上的任何問題。您可以按照此[逐步教學](https://docs.flowiseai.com/use-cases/web-scrape-qna)來了解如何實現相同的目標。 ![刮刀](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e91sz2mga5wvc0x2hp2g.png) - 您還可以建立一個自訂工具,該工具將能夠呼叫 Webhook 端點並將必要的參數傳遞到 Webhook 主體中。請依照本[指南](https://docs.flowiseai.com/use-cases/webhook-tool)使用 Make.com 建立 Webhook 工作流程。 ![網路鉤子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ckyivo9dvue461jc9pv4.png) 還有許多其他用例,例如建立 SQL QnA 或與 API 互動。 FlowiseAI 在 GitHub 上擁有超過 27,500 個 Star,並擁有超過 10,000 個分叉,因此具有良好的整體比率。 https://github.com/FlowiseAI/Flowise 明星 Flowise ⭐️ --- 7. [Twitter Agent](https://github.com/ahmedbesbes/media-agent) - 從社群媒體抓取資料並使用 Langchain 與其聊天。 --------------------------------------------------------------------------------------------- ![推特代理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g8umoek3meg2tjxw9jna.png) Media Agent 抓取 Twitter 和 Reddit 提交的內容,對其進行總結,並在互動式終端中與它們聊天。這麼酷的概念! 您可以閱讀[說明](https://github.com/ahmedbesbes/media-agent?tab=readme-ov-file#run-the-app-locally)以在本地安裝它。 它是使用以下方式建構的: - Langchain 🦜 用於建構和撰寫法學碩士。 - ChromaDB 用於儲存向量(也稱為嵌入)並查詢它們以建立對話機器人。 - Tweepy 連接到您的 Twitter API 並提取推文和元資料。 - Praw 連接到 Reddit API。 - Rich 建造了一個很酷的終端 UX/UI。 - 管理依賴關係的詩。 一些很棒的功能: - 代表您從使用者帳戶清單或關鍵字清單中抓取推文/提交內容。 - 使用 OpenAI 嵌入推文/提交內容。 - 建立推文/提交內容的摘要並提供需要回答的潛在問題。 - 在推文之上打開聊天會話。 - 儲存對話及其元資料。 - 豐富的終端使用者介面和日誌記錄功能。 您可以觀看演示! https://www.loom.com/share/f4954e7d34ef4b7b8491e2bf910e8521 它在 GitHub 上有近 100 顆星,並且不再維護。您可以用它來建造更好的東西。 https://github.com/ahmedbesbes/media-agent 明星 Twitter 代理商 ⭐️ --- 8. [GPT 遷移](https://github.com/joshpxyne/gpt-migrate)- 輕鬆將程式碼庫從一種框架或語言遷移到另一種框架或語言。 ---------------------------------------------------------------------------------- ![GPT 遷移](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ullej3qz57t3l4qneyru.png) 如果您曾經面臨將程式碼庫遷移到新框架或語言的痛苦,那麼這個專案適合您。 我想我們都同意我們在某個時候需要這個。您也可以使用工作流程來完成此操作,據我所知,Stripe 曾經將其整個 JS 程式碼庫轉換為 TS。 遷移是一個成本高、乏味且重要的問題。 不要盲目相信當前版本,請負責任地使用它。另請注意,成本可能會迅速增加,因為 GPT-Migrate 旨在編寫(並可能重寫)整個程式碼庫。 您可以使用 Poetry[安裝](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-installation-using-poetry)它並了解[它的工作原理](https://github.com/joshpxyne/gpt-migrate?tab=readme-ov-file#-how-it-works)。 > 請注意。 GPT-Migrate 目前處於開發 alpha 階段,尚未準備好投入生產使用。例如,在相對簡單的基準測試中,它在約 50% 的時間內順利通過 Python 或 JavaScript 等「簡單」語言,並且在沒有人工幫助的情況下無法通過 C++ 或 Rust 等更複雜的語言。 您可以在這裡觀看演示! ![GPT 遷移](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/megapc2dsnb6qlcl0dy4.gif) 他們在 GitHub 上有 6500+ 顆星,最後一次提交是 6 個月前,所以我認為它不再被維護了! https://github.com/joshpxyne/gpt-migrate 明星 GPT 遷移 ⭐️ --- 9. [Plandex](https://github.com/plandex-ai/plandex) - 用於使用法學碩士建置複雜的真實世界軟體的人工智慧編碼引擎。 ----------------------------------------------------------------------------------- ![普蘭迪克斯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c98v9qntshph3wue4fr.png) Plandex 使用長時間執行的代理程式來完成跨多個檔案且需要多個步驟的任務。它將大任務分解為更小的子任務,然後實現每個子任務,一直持續到完成工作為止。 它可以幫助您處理積壓的工作,使用不熟悉的技術,擺脫困境,並花更少的時間在無聊的事情上。 您可以在這裡查看演示! https://vimeo.com/926634577 變更會累積在受保護的沙箱中,以便您可以在自動將它們套用到專案文件之前查看它們。內建版本控制可讓您輕鬆返回並嘗試不同的方法。分支允許您嘗試多種方法並比較結果。 您可以在終端機中有效地管理上下文。輕鬆將檔案或整個目錄新增至上下文中,並在工作時自動更新它們,以便模型始終具有專案的最新狀態。 Plandex 依賴 OpenAI API,並且需要`OPENAI_API_KEY`環境變數。 Plandex 支援 Mac、Linux、FreeBSD 和 Windows。它從沒有依賴關係的單一二進位檔案執行。 您甚至可以嘗試不同的模型和模型設置,然後比較結果。 您可以閱讀[安裝說明](https://github.com/plandex-ai/plandex?tab=readme-ov-file#install)。 Plandex Cloud 是使用 Plandex 最簡單、最可靠的方式。當您使用 plandex new 建立第一個計劃時,系統會提示您開始匿名試用(無需電子郵件)。試用帳戶僅限 10 個計劃,每個計劃有 10 個 AI 模型回复。 Plandex Cloud 帳戶目前是免費的,這是一件好事。 Plandex 在 GitHub 上擁有 8k+ 顆星,並使用 Go 建造。 https://github.com/plandex-ai/plandex 明星PLandex ⭐️ --- 10. [SQL Translator](https://github.com/whoiskatrin/sql-translator) - 使用人工智慧將自然語言查詢轉換為 SQL 程式碼的工具。 -------------------------------------------------------------------------------------------------- ![SQL翻譯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ghpgh4gvpdfiuj2qbat.png) 我試圖建立一個類似的專案,發現它已經存在。 該工具旨在讓任何人都可以輕鬆地將 SQL(結構化查詢語言)命令轉換為自然語言,反之亦然。 SQL 是一種用於管理和操作關聯式資料庫中的資料的程式語言,雖然它是一個強大的工具,但它也可能非常複雜且難以理解。 另一方面,自然語言是我們在日常生活中說和寫的語言,對於不熟悉技術術語的人來說,它通常是首選的溝通方式。 透過 SQL 和自然語言翻譯器,您無需成為 SQL 專家即可了解資料庫中發生的情況或編寫 SQL 查詢。您只需用自然語言輸入查詢即可取得對應的 SQL 程式碼,反之亦然。 其中一些功能是: - 深色模式。 - 小寫/大寫切換。 - 複製到剪貼簿。 - SQL 語法高亮。 - 模式意識(測試版)。 - 查詢歷史記錄。 你可以閱讀 [安裝說明](https://github.com/whoiskatrin/sql-translator?tab=readme-ov-file#%EF%B8%8F-installation),它非常簡單,因為它使用 Nextjs。 此查詢適合您。哈哈! ![酷查詢](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eef11xrahbmv945xvpm7.png) SQL Translator 在 GitHub 上有 4k star,是使用 TypeScript 建構的。 https://github.com/whoiskatrin/sql-translator 明星 SQL 翻譯機 ⭐️ --- 11. [WingmanAI](https://github.com/e-johnstonn/wingmanAI) - 音訊即時轉錄,與 ChatGPT 整合。 -------------------------------------------------------------------------------- ![僚機人工智慧](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/slrhmt949vr7gqdmgi3h.png) WingmanAI 是一款功能強大的工具,可與系統和麥克風音訊的即時轉錄進行互動。該工具由 ChatGPT 提供支援,可讓您與腳本即時交互,作為機器人的廣泛記憶體基礎,提供獨特的通訊平台。 當您載入指定人員的記錄時,機器人可以回答有關過去對話的問題。 您可以閱讀[安裝說明](https://github.com/e-johnstonn/wingmanAI?tab=readme-ov-file#installation)。 您可以在這裡觀看演示! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w325vc51fys8gebrcb02.gif) 一些簡潔的功能是: - WingmanAI 可以轉錄系統輸出和麥克風輸入音頻,讓您以易於閱讀的格式查看即時轉錄。 - 您可以與 ChatGPT 支援的機器人聊天,該機器人會即時讀取您的文字記錄。 - 機器人以令牌有效的方式維護對話記錄,因為只有當前的文字區塊會傳遞給機器人。 - WingmanAI 讓您可以保存成績單以供將來使用。您可以稍後隨時加載它們,並且對機器人進行的任何查詢都將與保存的轉錄本的向量資料庫交叉引用,從而為機器人提供更豐富的上下文。 - 您可以繼續附加到已儲存的記錄中,隨著時間的推移建立一個龐大的資料庫供機器人從中提取。 它在 GitHub 上有 420 個星,並且不再維護。 https://github.com/e-johnstonn/wingmanAI 明星 WingmanAI ⭐️ --- 12. [Lively](https://github.com/rocksdanister/lively) - 允許使用者設定動畫桌面桌布和螢幕保護程式。 ----------------------------------------------------------------------------- ![活潑](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60tld1a857herh12r5ci.png) 這只是為了好玩,我們可以使用程式碼學到很多關於它是如何完成的。 你可以看看這個[影片](https://www.pexels.com/video/blue-texture-abstract-leaves-7710243/),看看它看起來有多瘋狂。 ![風俗](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kb2ll571uc2jd2xrpmph.png) 他們提供[三種類型的壁紙,](https://github.com/rocksdanister/lively?tab=readme-ov-file#types-of-wallpapers)包括影片/GIF、網頁和應用程式/遊戲。 它基於 C# 和 live 支援的一些很酷的功能建置: 1. Lively 可以透過終端機的[命令列參數](https://github.com/rocksdanister/lively/wiki/Command-Line-Controls)進行控制。您可以將其與其他語言(例如 Python 或腳本軟體 AutoHotKey)整合。 2. 一組強大的[API](https://github.com/rocksdanister/lively/wiki/API) ,供開發人員建立互動式壁紙。取得硬體讀數、音訊圖表、音樂資訊等。 3. 當電腦上執行全螢幕應用程式/遊戲時(~0% CPU、GPU 使用率),桌布播放會暫停。 4. 您還可以利用[機器學習推理](https://github.com/rocksdanister/lively/wiki/Machine-Learning)來建立動態壁紙。您可以預測任何 2D 影像與相機的距離並產生類似 3D 的視差效果。酷:D 我見過很多人使用它,其中許多人甚至不知道它是開源的。 您可以使用[安裝程式](https://github.com/rocksdanister/lively/releases/download/v2.0.7.4/lively_setup_x86_full_v2074.exe)或透過[Microsoft Store](https://www.microsoft.com/store/productId/9NTM2QC6QWS7?ocid=pdpshare)下載它。 它是 2023 年 Microsoft Store 的獲勝者。 它在 GitHub 上擁有 13k+ Stars,有 60 個版本。 https://github.com/rocksdanister/lively 明星活潑 ⭐️ --- 13. [RestGPT](https://github.com/Yifan-Song793/RestGPT) - 基於 LM 的自主代理透過 RESTful API 控制應用程式。 ------------------------------------------------------------------------------------------- ![休息GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lyp7goco6awn2l4uttww.png) 這項工作旨在建立一個基於大型語言模型的自主代理 RestGPT,以控制現實世界的應用程式,例如電影資料庫和音樂播放器。為了實現這一目標,我們將法學碩士與 RESTful API 連接起來,並解決規劃、API 呼叫和回應解析的實際挑戰。為了全面評估 RestGPT 的效能,我們提出了 RestBench,這是一個高品質的基準測試,由兩個真實場景和具有黃金解決方案路徑的人工註釋指示組成。 RestGPT採用迭代式從粗到精的線上規劃框架,並使用執行器呼叫RESTful API。以下是 RestGPT 的概述。 ![在職的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17p05syighh3llbmr1fk.png) 您可以閱讀[文件](https://github.com/Yifan-Song793/RestGPT?tab=readme-ov-file#data)以使用 RestBench 評估 RestGPT 的效能。 使用 TMDB 電影資料庫搜尋 Sofia Coppola 執導的電影數量的範例。 ![例子](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/toh8k55yhb7c6t4oq0j7.gif) 您可以閱讀康乃爾大學發表的程式碼研究論文: [RestGPT - Connecting Large Language Models with Real-World RESTful APIs](https://arxiv.org/abs/2306.06624) 。 他們在 GitHub 上有 1.2k Stars,雖然不是很大,但涵蓋了一個很好的用例。 https://github.com/Yifan-Song793/RestGPT 明星 RestGPT ⭐️ --- 14. [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`版本。 https://github.com/guangzhengli/ChatFiles 明星 ChatFiles ⭐️ --- 15. [MindsDB](https://github.com/mindsdb/mindsdb) - 從企業資料客製化人工智慧的平台。 -------------------------------------------------------------------- ![思維資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i9q3jdswxdx6wqfk0vqw.png) MindsDB 是一個利用企業資料客製化人工智慧的平台。 透過 MindsDB,您可以利用資料庫、向量儲存或應用程式中的資料即時部署、服務和微調模型,以建立人工智慧驅動的應用程式 - 使用開發人員已知的通用工具。 借助 MindsDB 及其與資料來源和 AI/ML 框架的近[200 個集成](https://docs.mindsdb.com/integrations/data-overview),任何開發人員都可以使用其企業資料更快、更安全地自訂符合其目的的 AI。 ![MindsDB 的工作原理](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4q1gfmhq43gopdix03gr.png) 您可以閱讀[文件](https://docs.mindsdb.com/)和[快速入門指南](https://docs.mindsdb.com/quickstart-tutorial)來開始使用。 目前,他們總共支援[3 個使用 Mongo-QL、Python 和 JavaScript 的 SDK](https://docs.mindsdb.com/sdks/overview) 。 MindsDB 有多種應用程式,例如與眾多資料來源和 AI 框架集成,因此您可以輕鬆地將資料和 AI 結合在一起以建立和自動化自訂工作流程。 其他常見用例包括微調模型、聊天機器人、警報系統、內容生成、自然語言處理、分類、回歸和預測。閱讀有關[用例的](https://docs.mindsdb.com/use-cases/)更多訊息,每個用例都有一個包含一些資訊的架構圖。 ![用例](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wuhxzbioqh9a5s9f0w7s.png) 例如,MindsDB 的聊天機器人架構圖。您可以閱讀提供的所有[解決方案](https://github.com/mindsdb/mindsdb?tab=readme-ov-file#-get-started)及其 SQL 查詢範例。 ``` // SQL Query Example for Chatbot CREATE CHATBOT slack_bot USING database='slack',agent='customer_support'; ``` ![聊天機器人](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/otoqsro02ghqb709yglk.png) 只是為了告訴您總體的可能性,您可以查看[如何使用 AI + IoT 感測器資料預測氣溫](https://mindsdb.com/blog/how-to-forecast-air-temperatures-with-ai-iot-sensor-data)。令人興奮的權利:) ![心靈資料庫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/82wrjyrkch44taeurv1r.png) 他們在 GitHub 上擁有超過 21k 個 star,並且在`v24.4.3.0`上有超過 200 個版本。順便說一句,這是我第一次在任何版本中看到 4 個部分,因為我一直遵循語義版本。 https://github.com/mindsdb/mindsdb 明星 MindsDB ⭐️ --- 16. [Quivr](https://github.com/QuivrHQ/quivr) - 你的 GenAI 第二腦。 ------------------------------------------------------------- ![奎弗爾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hl12fl88mdjmfkfath1t.png) Quivr,您的第二個大腦,利用 GenerativeAI 的力量成為您的私人助理!可以將其視為黑曜石,但增強了人工智慧功能。 ![統計資料](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5a27c2ubbmri0b2xlh1l.png) 您可以閱讀[安裝指南](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#getting-started-)。 您可以閱讀[文件](https://docs.quivr.app/home/intro)並觀看[示範影片](https://github.com/QuivrHQ/quivr?tab=readme-ov-file#demo-highlights-)。 他們可以提供更好的免費套餐,但這足以在您端進行測試。 它在 GitHub 上擁有超過 30k 顆星,發布了 220 多個版本,這意味著它們正在不斷改進。 https://github.com/QuivrHQ/quivr 明星 Quivr ⭐️ --- 17.[動畫繪畫](https://github.com/facebookresearch/AnimatedDrawings)- 一種將兒童人物繪畫動畫化的方法。 --------------------------------------------------------------------------------- ![動畫圖畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pvpj68sum9xrqfz0s6n.gif) 我的意思是哇!這麼酷的概念。我不知道你怎麼想,但我真的很興奮。 這是 Facebook 的一個開源專案,主要用於研究目的,包含論文《 [A Method for Animating Children's Drawings of the Human Figure》](https://dl.acm.org/doi/10.1145/3592788)中描述的演算法的實作。 該專案已在 macOS Ventura 13.2.1 和 Ubuntu 18.04 上進行了測試。如果您在其他作業系統上安裝,則可能會遇到問題。 他們強烈建議在安裝 Animated Drawings 之前啟動 Python 虛擬環境。 閱讀有關[安裝說明](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#installation)以及如何快速入門的更多資訊。 您可以按照這個完整的指南來為[您的繪圖製作動畫](https://github.com/facebookresearch/AnimatedDrawings?tab=readme-ov-file#animating-your-own-drawing),包括如何在場景中加入多個角色、加入背景圖像以及更多令人興奮的事情。 他們在 GitHub 上擁有超過 10k 顆星,並且僅用於具有 MIT 許可的研究目的。 https://github.com/facebookresearch/AnimatedDrawings 明星動畫繪圖 ⭐️ --- 18.[背景移除器](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 明星背景去除器 ⭐️ --- 19. [Lobe Chat](https://github.com/lobehub/lobe-chat) - 現代設計的法學碩士/人工智慧聊天框架。 --------------------------------------------------------------------------- ![波瓣聊天](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ddxibf7xxx931tdoj1mn.png) 一個開源、現代設計的 ChatGPT/LLM UI/框架。 支援語音合成、多模式和可擴展(函數呼叫)插件系統。您可以一鍵部署您的私有 OpenAI。 ![旅行](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/39se198xal53r854sdps.png) 讓我們來看看 LobeChat 的一些令人興奮的功能: ✅ 多模式服務提供者支援。 ![多服務](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nodazgxel962wrp2hnvo.png) 他們將我們的支援擴展到多個模型服務提供者,而不是局限於單一服務提供者,為用戶提供更多樣化和豐富的對話選擇。 尋找他們支援的[10 多個模型服務提供者](https://lobehub.com/docs/usage/features/multi-ai-providers)的完整清單。 ✅ 市場助理。 ![助理市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35z3kz2jr4mnxid9dwsg.png) 在LobeChat的[助手市場](https://lobehub.com/assistants)中,創作者可以發現一個充滿活力和創新的社區,匯集了許多精心設計的助手。這些助手不僅在工作場景中發揮著至關重要的作用,而且在學習過程中也提供了極大的便利。在這裡,每個人都可以貢獻自己的智慧,分享自己開發的助手。 ![市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ex23f2epblfp2cxtxbnl.png) 那裡有很多很棒的應用程式。哇! ✅ 模型視覺辨識。 ![模型視覺辨識](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuxz350091223cj36dq7.png) LobeChat現在支援OpenAI的gpt-4-vision、Google Gemini Pro Vision、Zhipu GLM-4 Vision等具有視覺辨識能力的大型語言模型,使LobeChat具備多模態互動能力。用戶可以輕鬆地將圖片上傳或拖放到聊天框中,助理將能夠辨識圖片內容並據此進行智慧對話,打造更聰明、更多樣化的聊天場景。 ✅ 文字到圖像生成。 ![文字到圖像生成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z2q6qzcy8anjgsg2381o.png) LobeChat 支援最新的文字到圖像生成技術,現在允許使用者在與助手對話時直接使用文字到圖像工具。透過利用 DALL-E 3、MidJourney 和 Pollinations 等 AI 工具的功能,助手現在可以將您的想法轉化為圖像。 ✅ 本地大語言模型 (LLM) 支援。 ![本地大語言模型 (LLM) 支援。](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ucn4rpa4p2vb11hhvkn1.png) 借助 Ollama AI 強大的基礎設施和社區的協作努力,現在您可以在 LobeChat 中與本地 LLM(大型語言模型)進行對話! 透過執行以下 Docker 指令,您可以在 LobeChat 中體驗與本機 LLM 的對話。 ``` docker run -d -p 3210:3210 -e OLLAMA_PROXY_URL=http://host.docker.internal:11434/v1 lobehub/lobe-chat ``` ✅ 漸進式網頁應用程式 (PWA)。 ![漸進式網頁應用程式 (PWA)](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sccmha74iz01rr12gphr.png) 他們採用了漸進式 Web 應用程式 PWA 技術,這是一種現代 Web 技術,可將 Web 應用程式提升到接近本機應用程式的體驗。透過 PWA,LobeChat 可以在桌面和行動裝置上提供高度優化的使用者體驗,同時保持輕量級和高效能的功能。 ✅ 自訂主題。 ![自訂主題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7cl73pplbor4z1381kdm.png) LobeChat在介面設計上非常注重個人化的使用者體驗,因此引入了靈活多樣的主題模式,包括白天的淺色模式和夜間的深色模式。 除了主題模式切換之外,我們還提供了一系列顏色自訂選項,讓使用者可以根據自己的喜好調整應用程式的主題顏色。 了解所有[功能和用例](https://lobehub.com/docs/usage/start)。 您可以自行託管或使用 docker 部署它。 lobe chat 的[生態系統](https://github.com/lobehub/lobe-chat/tree/main?tab=readme-ov-file#-ecosystem)提供了 4 個軟體包: `lobehub/ui` 、 `lobehub/icons` 、 `lobehub/tts`和`lobehub/lint` 。 他們還提供[插件市場](https://lobehub.com/plugins),您可以在其中找到許多有用的插件,這些插件可用於引入新的函數呼叫,甚至是呈現訊息結果的新方法。如果你想開發自己的插件,請參考 wiki 中的[📘插件開髮指南](https://lobehub.com/docs/usage/plugins/development)。 ![插件市場](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqtxt31vc42uwnw2ukgr.png) 您可以閱讀[文件](https://lobehub.com/docs/usage/start)。 您可以查看[現場演示](https://chat-preview.lobehub.com/chat)。它太酷了! ![演示快照](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xe3ngshtwpps2kmpu98f.png) 他們在 GitHub 上擁有超過 28k 顆星,發布了 500 多個版本。 https://github.com/lobehub/lobe-chat 星瓣聊天 ⭐️ --- 20.[微代理](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 明星微代理 ⭐️ --- 21. [GPT-4 & LangChain](https://github.com/mayooear/gpt4-pdf-chatbot-langchain) - 用於大型 PDF 文件的 GPT4 和 LangChain 聊天機器人。 -------------------------------------------------------------------------------------------------------------------------- ![聊天架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0pe0xehimhyw2mfubzu9.png) 這可用於新的 GPT-4 API 來為多個大型 PDF 檔案建立 chatGPT 聊天機器人。 該系統是使用 LangChain、Pinecone、Typescript、OpenAI 和 Next.js 建構的。 LangChain 是一個簡化可擴展 AI/LLM 應用程式和聊天機器人開發的框架。 Pinecone 用作向量存儲,用於以文字格式儲存嵌入和 PDF,以便以後檢索類似文件。 您可以閱讀涉及複製、安裝依賴項和設定環境 API 金鑰的[開發指南](https://github.com/mayooear/gpt4-pdf-chatbot-langchain?tab=readme-ov-file#development)。 您可以觀看[YouTube 影片](https://www.youtube.com/watch?v=ih9PBGVVOO4),了解如何遵循和使用它。 他們在 GitHub 上擁有 14k+ Stars,僅提交了 34 次。在您的下一個人工智慧應用程式中嘗試! https://github.com/mayooear/gpt4-pdf-chatbot-langchain 明星 GPT-4 和 Langchain ⭐️ --- 22. [Buzz](https://github.com/chidiwilliams/buzz) - 在您的個人電腦上離線轉錄和翻譯音訊。 ---------------------------------------------------------------------- ![嗡嗡聲](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qdi1olu9ogarzxdc3ct9.png) 使用 OpenAI 的 Whisper 的強大功能在您的個人電腦上離線轉錄和翻譯音訊。 Buzz 甚至出現在[App Store](https://apps.apple.com/us/app/buzz-captions/id6446018936?mt=12&itsct=apps_box_badge&itscg=30200) 。取得 Buzz 的 Mac 原生版本,具有更簡潔的外觀、音訊播放、拖放匯入、文字記錄編輯、搜尋等功能。 您可以閱讀[安裝說明](https://chidiwilliams.github.io/buzz/docs/installation)。 令人興奮的功能: - 匯入音訊和視訊檔案並將文字記錄匯出為 TXT、SRT 和 VTT(演示)。 - 從電腦麥克風轉錄和翻譯為文字(資源密集且可能不是即時的。 - 它可在 Mac、Windows 和 Linux 上使用。 - 還有一個[CLI](https://chidiwilliams.github.io/buzz/docs/cli)選項。 在這裡查看演示! https://www.loom.com/share/564b753eb4d44b55b985b8abd26b55f7 您可以閱讀[文件](https://chidiwilliams.github.io/buzz/docs)。 它們在 GitHub 上擁有近 10k star,並且自兩週前上次提交以來仍在維護中。 https://github.com/chidiwilliams/buzz 明星嗡嗡聲 ⭐️ --- 23. [Deepgram](https://github.com/deepgram) - 將語音 AI 建置到您的應用程式中。 ---------------------------------------------------------------- ![深度圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32enxrtcwqk6g81eazay.png) 從新創公司到 NASA,Deepgram API 每天都用於轉錄和理解數百萬分鐘的音訊。快速、準確、可擴展且經濟高效。 它為開發人員提供語音到文字和音訊智慧模型。 ![深度圖選項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rdc3tqg7fvt3sw6ktle7.png) 儘管他們有免費增值模式,但免費套餐的限制足以讓您入門。 可視化效果更上一層樓。您可以檢查即時串流媒體回應或音訊檔案並比較音訊的智慧程度。 ![串流媒體](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wcvzzrqzn94gxe594hf.png) ![情緒分析](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uw6wkhzg7g6vgq7lphri.png) 您可以閱讀[文件](https://developers.deepgram.com/docs/introduction)。 您也可以閱讀 Deepgram 撰寫的關於[如何將語音辨識新增至您的 React 和 Node.js 專案的範例部落格](https://deepgram.com/learn/how-to-add-speech-recognition-to-your-react-project)。 如果您想嘗試 API 來親自了解模型的靈活性,請查看他們的[API Playground](https://playground.deepgram.com/?smart_format=true&language=en&model=nova-2) 。 https://github.com/deepgram 明星 Deepgram ⭐️ --- 24. [OpenDevin](https://github.com/OpenDevin/OpenDevin) - 更少的程式碼,更多的內容。 ----------------------------------------------------------------------- ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4on63bb02g4x4ny8gtcn.png) ![奧彭文](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0yepod2rye2jk5r12dt.png) 這是一個開源專案,旨在複製 Devin,一名自主人工智慧軟體工程師,能夠執行複雜的工程任務並在軟體開發專案上與用戶積極協作。該計畫致力於透過開源社群的力量複製、增強和創新 Devin。 只是想讓你知道,這是在德文被介紹之前。 您可以閱讀帶有要求的[安裝說明](https://github.com/OpenDevin/OpenDevin?tab=readme-ov-file#installation)。 他們使用 LiteLLM,因此您可以使用任何基礎模型來執行 OpenDevin,包括 OpenAI、Claude 和 Gemini。 如果您想為 OpenDevin 做出貢獻,您可以查看 [演示](https://github.com/OpenDevin/OpenDevin/blob/main/README.md#opendevin-code-less-make-more)和[貢獻指南](https://github.com/OpenDevin/OpenDevin/blob/main/CONTRIBUTING.md)。 它在 GitHub 上擁有超過 10,700 個 Star,並且正在快速成長。 https://github.com/OpenDevin/OpenDevin 明星 OpenDevin ⭐️ --- 25. [NPM Copilot](https://github.com/whoiskatrin/npm-copilot) - Next.js 的 CLI 工具,可以即時分析日誌。 ------------------------------------------------------------------------------------------ ![npm 副駕駛](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7omx4d2yzub3gx1xmkvh.png) npm/yarn/pnpm copilot 是一個命令列工具,它使用 OpenAI 的 GPT-3 語言模型來提供修復程式碼中錯誤的建議。 CLI 工具可偵測目前目錄中正在使用的專案類型和套件管理器。 然後,它執行適當的開發伺服器命令(例如,npm run dev、yarn run dev、pnpm run dev)並偵聽正在執行的應用程式產生的日誌。 當遇到錯誤時,CLI 工具會即時提供錯誤修復建議。 首先使用以下 npm 指令安裝 npm-copilot 套件。 ``` npm install -g npm-copilot ``` CLI 工具將開始監視 Next.js 應用程式產生的日誌,並即時提供錯誤修復建議。 您可以透過該命令在專案中使用它。 ``` npm-copilot ``` 他們在 GitHub 上有 338 顆星,支援`Next,js` 、 `React` 、 `Angular`和`Vue.js` https://github.com/whoiskatrin/npm-copilot 明星 NPM Copilot ⭐️ --- 26. [Mentat](https://github.com/AbanteAI/mentat) - 人工智慧編碼助理。 ------------------------------------------------------------ ![撒謊了](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeba0cbns0fve53k5xk5.png) Mentat 是一款人工智慧工具,可直接從命令列幫助您完成任何編碼任務。 與 Copilot 不同,Mentat 協調多個位置和文件的編輯。與 ChatGPT 不同的是,Mentat 已經擁有您專案的上下文 - 無需複製和貼上! 您可以觀看此演示以了解基本概述。 https://www.youtube.com/watch?v=lODjaWclwpY 如果需要協助,您可以閱讀[安裝說明](https://github.com/AbanteAI/mentat?tab=readme-ov-file#install)或觀看安裝[教學](https://www.youtube.com/watch?v=bVJP8hY8uRM)。 您可以閱讀[文件](https://github.com/AbanteAI/mentat?tab=readme-ov-file#-usage)。 他們在 GitHub 上有 2.3k 顆星,並且正在發布`v1`版本。 https://github.com/AbanteAI/mentat Star Mentat ⭐️ --- 27. [FlowGPT](https://github.com/nilooy/flowgpt) - 使用 AI 產生流程圖。 --------------------------------------------------------------- ![流量GPT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzzpnc7doy4o6qizosjl.png) FlowGPT是一個用ai(gpt-3.5)產生流程圖的工具。 它是使用 Next.js、Langchain、Mermaid 和 DaisyUI 建構的。 您可以閱讀[安裝說明](https://github.com/nilooy/flowgpt?tab=readme-ov-file#installation)。 你可以查看[gif 示範](https://github.com/nilooy/flowgpt?tab=readme-ov-file#flowgpt-is-a-tool-to-generate-flowchart-with-ai-gpt-35)。 它只有 11 次提交,但在 GitHub 上有 238 顆星,並且是使用 TypeScript 建置的。作為一個小專案值得一試。 https://github.com/nilooy/flowgpt Star FlowGPT ⭐️ --- 28. [reor](https://github.com/reorproject/reor) - 自組織人工智慧筆記應用程式。 ---------------------------------------------------------------- ![我認為](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c0x2q2a67bg7gzdekizw.png) 迄今為止我見過的最令人興奮的專案之一,特別是因為它在本地執行模型。 Reor 是一款基於人工智慧的桌面筆記應用程式:它會自動連結相關筆記、回答筆記上的問題並提供語義搜尋。 所有內容都儲存在本地,您可以使用類似黑曜石的 Markdown 編輯器來編輯筆記。該專案假設人工智慧思維工具預設應該在本地執行模型。 Reor 站在 Ollama、Transformers.js 和 LanceDB 等巨頭的肩膀上,使 LLM 和嵌入模型都可以在本地執行。也支援連接到 OpenAI 或 OpenAI 相容 API(例如 Oobabooga)。 > 我知道你想知道它怎麼可能是`self-organizing` ? A。您寫的每個筆記都會被分塊並嵌入到內部向量資料庫中。 b.相關筆記透過向量相似度自動連接。 C。 LLM 支援的問答對筆記語料庫進行 RAG。 d.一切都可以進行語義搜尋。 您可以在這裡觀看演示! ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1whpg9m7ubt5xluyf7f.gif) 將 Reor 視為一個帶有兩個生成器的 RAG 應用程式:LLM 和人類。在問答模式下,法學碩士會從語料庫中取得檢索到的上下文來幫助回答查詢。 類似地,在編輯器模式下,人們可以切換側邊欄以顯示從語料庫「檢索」的相關註釋。這是透過將當前筆記中的想法與語料庫中的相關想法交叉引用來「增強」您的想法的一種非常有效的方法。 您可以閱讀[文件](https://www.reorproject.org/docs)並從網站[下載](https://www.reorproject.org/)。 Mac、Linux 和 Windows 皆支援。 他們還提供了入門指南,以便幫助您入門。 ![入門指南](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bx3w7nalcwc9egumu0hm.png) 它們在 GitHub 上有 4.2k 顆星,並使用 TypeScript 建置。 https://github.com/reorproject/reor 星標 reor ⭐️ --- 29. [Amica](https://github.com/semperai/amica) - 讓您在瀏覽器中輕鬆地與 3D 角色聊天。 --------------------------------------------------------------------- ![朋友](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2nvizcn717h3cteocft5.png) Amica 是一個開源接口,用於透過語音合成和語音辨識與 3D 角色進行互動式通訊。 您可以匯入 VRM 文件,調整聲音以適合角色,並產生包含情緒表達的回應文字。 他們使用 Three.js、OpenAI、Whisper、Bakllava 等進行視覺處理。您可以閱讀[Amica 的工作原理](https://docs.heyamica.com/overview/how-amica-works)及其所涉及的[核心概念](https://docs.heyamica.com/overview/core-concepts)。 您可以克隆該存儲庫並使用它來[開始](https://docs.heyamica.com/getting-started/installation)。 ``` npm i npm run dev ``` 您可以閱讀[文件](https://docs.heyamica.com/)並查看[演示](https://amica.arbius.ai/),這真是太棒了:D ![示範](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92iv9y2auly6tvenee82.png) 您可以觀看這段簡短的影片,了解它的功能。 https://www.youtube.com/watch?v=hUxAEnFiXH8 Amica 使用 Tauri 建立桌面應用程式。 他們在 GitHub 上有 400+ Stars,而且看起來非常容易使用。 https://github.com/semperai/amica Star Amica ⭐️ --- 30.[繼續](https://github.com/continuedev/continue)- 使您能夠建立人工智慧軟體開發系統。 ------------------------------------------------------------------- ![繼續](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7ro5ctus5tdfvqdnysby.png) 繼續讓開發人員保持流動。我們的開源 VS Code 和 JetBrains 擴充功能可讓您輕鬆建立自己的模組化 AI 軟體開發系統並進行改進。 它們有很多很棒的功能,讓我們看看其中的一些: > 輕鬆理解程式碼部分。 ![程式碼部分](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lh8k3s0uv5y1assa50dl.gif) > 選項卡可自動完成程式碼建議。 ![自動完成](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/09xt6urla4jic5x3m5rr.gif) > 詢問有關您的程式碼庫的問題。 ![問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qd95frn0j9cd417yighz.gif) > 快速使用文件作為上下文。 ![文件](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y2moxr84w6fwuwqvsccn.gif) > 立即了解終端錯誤。 ![錯誤](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kaaq6x5978tm1u61moxb.gif) > 使用斜槓指令開始操作。 ![命令](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j4vlzc2vuiuoivgqy5e7.png) > 重構您正在編碼的函數。 ![重構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7wz1tzon8afivi79ulvn.png) 了解所有[功能](https://docs.continue.dev/how-to-use-continue)。 您必須從市場安裝[VSCode 擴展](https://marketplace.visualstudio.com/items?itemName=Continue.continue),然後閱讀[快速入門指南](https://docs.continue.dev/quickstart)。 您可以閱讀[文件](https://docs.continue.dev/intro)。 它們在 GitHub 上擁有超過 10k 顆星,並使用 TypeScript 建置。 https://github.com/continuedev/continue 星繼續 ⭐️ --- 我從來沒有如此詳細地介紹過這麼多專案! 我希望這能幫助您創造一些鼓舞人心的東西。 請分享更多專案或任何您想要其他人可以學習的內容! 請關注 Copilotkit 以獲取更多此類內容。 https://dev.to/copilotkit --- 原文出處:https://dev.to/copilotkit/30-ai-libraries-you-can-use-for-your-next-project-ideas-5ded

Linode 各區域主機速度測試

最近要做一個小網站,主要目標市場為北美的用戶 網站同時會有繁體中文版,所以台灣的用戶也要可以使用、速度不能太慢 為了挑選適合的主機區域,使用 Linode Speed Test https://www.linode.com/speed-test/ 來記錄一下測試結果,測試時間 2024-05-07 18:40 左右 --- ## 首先是亞洲區域的機房 |Region|Ping(ms)|Download(Mbps)|Upload(Mbps)| |---|---|---|---| |Tokyo| 48.13 | 29.70 | 2.18 | | Osaka | 91.52 | 28.47 | 2.20 | | Singapore | 90.16 | 24.92 | 2.07 | | Jakarta | 82.05 | 34.39 | 1.86 | | Mumbai | 155.80 | 33.22 | 1.83 | ## 再來是北美區域的機房 |Region|Ping(ms)|Download(Mbps)|Upload(Mbps)| |---|---|---|---| | Newark | 204.78 | 12.66 | 1.78 | | Atlanta | 181.10 | 26.39 | 3.64 | | Chicago | 197.66 | 30.17 | 4.26 | | Los Angeles | 141.80 | 31.83 | 4.27 | | Seattle | 152.78 | 35.98 | 3.47 | | Washington DC | 208.06 | 22.27 | 3.13 | | Dallas | 174.10 | 14.26 | 4.04 | | Miami | 200.47 | 14.35 | 3.41 | | Fremont | 140.28 | 14.34 | 3.64 | ## 結論 速度的差異,主要取決於國家海底電纜的連通國家 https://medium.com/vincent-chen/%E5%8F%B0%E7%81%A3%E6%B5%B7%E7%BA%9C-submarine-cable-%E6%A6%82%E6%B3%81%E5%8F%8A%E5%82%99%E6%8F%B4%E6%A9%9F%E5%88%B6-3e47ea550fd6 由於我人在台北,我猜測台日的電纜起點&終點,分別離台北、東京很接近 所以東京機房的表現非常好! 但因為我要做的網站,首要目標市場為北美的用戶,看起來 Los Angeles 或 Seattle 或 Fremont 會是優先選項! 這三個區域,都位在美西,這點倒是滿直觀的,就是北美離台灣最近的一側! 我會在深入評估之後,決定要挑哪一個機房! 這篇文章,特別記錄,給未來有同樣需求的人參考。