首頁 > 文章 > 科技週邊 > 手把手教你打造人工智慧網路應用！

手把手教你打造人工智慧網路應用！

DDD原創: 2023-09-18 10:35:421290瀏覽

如果你跟我一樣，你會注意到人工智慧技術的火爆。它不僅會顛覆軟體工程，還會顛覆每個產業。

在本系列中，我們將學習如何將OpenAI的 AI 服務整合到使用Qwik建構的應用程式中，Qwik 是一個專注於可恢復性概念的 JavaScript 框架。

我們將深入了解 OpenAI 和 Qwik 的具體細節，但我將主要專注於通用知識、工具和實現，這些知識、工具和實作應適用於您正在使用的任何框架或工具鏈。我們將盡可能密切地關注基礎知識，我將指出該應用程式的獨特部分。

預覽：

準備工作

在開始建立任何東西之前，我們必須滿足幾個先決條件。 Qwik 是一個 JavaScript 框架，因此我們必須安裝Node.js（和 NPM）。您可以下載最新版本，但任何高於 v16.8 的版本都應該可以使用。我將使用版本 20。

接下來，我們還需要一個 OpenAI 帳戶才能存取他們的API。

在本系列的最後，我們將把應用程式部署到 VPS（虛擬專用伺服器）。無論您選擇哪個提供者，我們遵循的步驟都應該是相同的。我將使用 Akamai 的雲端運算服務（以前稱為 Linode）。

設定Qwik 應用程式

假設我們滿足了先決條件，我們可以開啟命令列終端機並執行命令：npm create qwik@latest#。這將運行 Qwik CLI，它將幫助我們引導我們的應用程式。

範例：

让我们创建一个 Qwik 应用程序 ✨ (v1.2.7)您想在哪里创建新项目？（使用“.”或“./”表示当前目录）：与在 /home/austin/code/versus 中创建新项目选择启动器：空应用程序您想安装 npm 依赖项吗？是的初始化一个新的git存储库？是的正在完成安装。想听个笑话吗？是的，大花对小花说了什么？嗨，伙计！

如果一切正常，請開啟專案並開始探索。

在專案資料夾中，您會注意到一些重要的檔案和資料夾：

/src：包含所有應用程式業務邏輯
#/src/components：包含可重複使用的元件來建立我們的應用程式
/src/routes：負責Qwik的基於檔案的路由；每個資料夾代表一個路由（可以是頁面或API端點）。若要建立頁面，請將index.{jsx|tsx}檔案放入路線的資料夾中。
/src/root.tsx：此檔案匯出負責產生 HTML 文件根的根元件。

開始開發

#Qwik 使用Vite作為捆綁器，這很方便，因為Vite 內建了開發伺服器。它支援在本地運行我們的應用程序，並在文件更改時更新瀏覽器。

要啟動開發伺服器，我們可以在終端機中開啟專案並執行指令##npm run dev。開發伺服器運行後，您可以打開瀏覽器並訪問http://localhost:5173，您應該會看到一個非常基本的應用程式。

每當我們對應用程式進行更改時，我們都應該看到這些更改幾乎立即反映在瀏覽器中。

新增樣式

該項目不會過度關注樣式，因此如果您想做自己的事情，這部分完全是可選的。為了簡單起見，我將使用Tailwind。

透過執行終端指令，Qwik CLI 可以輕鬆加入必要的變更npm run qwik add# 。

範例：

您想要添加什么集成？- 适配器：Cloudflare Pages- 适配器：AWS Lambda- 适配器：Azure Static Web Apps- 适配器：Netlify Edge- 适配器：Vercel Edge- 适配器：Google Cloud Run 服务器- 适配器：Deno Server- 适配器： Node.js Express 服务器- 适配器：Node.js Fastify 服务器- 适配器：Node.js 服务器- 适配器：静态站点（.html 文件）- 集成：Builder.io- 集成：Cypress- 集成：Storybook- 集成：Auth.js （身份验证）- 集成：Orama（全文搜索引擎）- 集成：PandaCSS（样式）- 集成：Playwright（E2E 测试）- 集成：PostCSS（样式）- 集成：Prisma（数据库 ORM）- 集成：Styled-Vanilla -提取（样式）-集成：Tailwind（样式）（在 Qwik 应用程序中使用 Tailwind）-集成：Turso（数据库）-集成：Vitest（单元测试）

您可以使用箭頭鍵向下移動到 Tailwind 插件，然後按 Enter。然後它會向您顯示將對您的程式碼庫進行的更改並要求確認。只要看起來不錯，您就可以再按 Enter 鍵。

准备好？将 tailwind 添加到您的应用程序？修改- package.json- .vscode/settings.json- src/global.css 创建- postcss.config.js- tailwind.config.js 安装 npm 依赖项：- autoprefixer ^10.4.14- postcss 8.4.27 - tailwindcss 3.3.3准备好将 tailwind 更新应用到您的应用程序了吗？- 是的，看起来不错，完成更新！

對於我的項目，我也喜歡有一致的主題，因此我在GitHub中保留一個檔案以從中複製和貼上樣式。顯然，如果你想要自己的主題，你可以忽略這一步，但如果你想讓你的專案看起來像我的一樣令人驚嘆，請將GitHub 上這個檔案中的樣式複製到該檔案/src/global.css。您可以取代舊樣式，但保留 Tailwind 指令。

準備主頁

為了讓專案有一個好的起點，我們今天要做的最後一件事是對主頁進行一些更改。我想要做出的更改包括：

#刪除##匯出
h1#刪除除;之外的所有文字請隨意新增您自己的頁面標題文字。
添加一些Tailwind 類別以將內容置中並使內容h1更大
用標籤包裹內容main以使其更具語意
將Tailwind 類別添加到#main標籤以添加一些填充並使內容居中

這些都是一些微小的變化，並不是絕對必要的，但我認為它們將為在下一篇文章中建立我們的應用程式提供一個很好的起點。

這是我更改後檔案的樣子。

import { component$ } from "@builder.io/qwik";
export default component$(() => {
  return (
    <main class="max-w-4xl mx-auto p-4">
      <h1 class="text-6xl">Hi [wave emoji]</h1>
    </main>
  );
});

在瀏覽器中：

結論

這就是我們今天要討論的全部。同樣，這篇文章的主要重點是消除樣板內容，以便下一篇文章可以致力於將 OpenAI 的 API 整合到我們的專案中。

以上是手把手教你打造人工智慧網路應用！的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript node.js css html npm JS github 人工智能 http 软件工程

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：機器學習和人工智慧在製造業的應用下一篇：機器學習和人工智慧在製造業的應用

看更多