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

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

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

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

預覽：

準備工作

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

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

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

設定Qwik 應用程式

假設我們滿足了先決條件，我們可以開啟命令列終端機並執行命令：<span style="font-family: 宋体, SimSun; font-size: 14px;">npm create qwik@latest</span>#。這將運行 Qwik CLI，它將幫助我們引導我們的應用程式。

範例：

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

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

1. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src</span>：包含所有應用程式業務邏輯

2. <span style="font-family: 宋体, SimSun; font-size: 14px;">#/src/components</span>：包含可重複使用的元件來建立我們的應用程式

3. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/routes</span>：負責Qwik的基於檔案的路由；每個資料夾代表一個路由（可以是頁面或API端點）。若要建立頁面，請將<span style="font-family: 宋体, SimSun; font-size: 14px;">index.{jsx|tsx}</span>檔案放入路線的資料夾中。

4. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/root.tsx</span>：此檔案匯出負責產生 HTML 文件根的根元件。

開始開發

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

要啟動開發伺服器，我們可以在終端機中開啟專案並執行指令##npm run dev<span style="font-family: 宋体, SimSun; font-size: 14px;"></span>。開發伺服器運行後，您可以打開瀏覽器並訪問http://localhost:5173<span style="font-family: 宋体, SimSun; font-size: 14px;"></span>，您應該會看到一個非常基本的應用程式。

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

新增樣式

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

透過執行終端指令，Qwik CLI 可以輕鬆加入必要的變更<span style="font-family: 宋体, SimSun; font-size: 14px;">npm run qwik add</span># 。

範例：

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

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

準備主頁

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

1. #刪除<span style="font-family: 宋体, SimSun; font-size: 14px;">##匯出</span>

2. <span style="font-family: 宋体, SimSun; font-size: 14px;">h1</span>#刪除除;之外的所有文字 請隨意新增您自己的頁面標題文字。

3. 添加一些Tailwind 類別以將內容置中並使內容<span style="font-family: 宋体, SimSun; font-size: 14px;">h1</span>更大

4. 用標籤包裹內容<span style="font-family: 宋体, SimSun; font-size: 14px;">main</span>以使其更具語意

5. 將Tailwind 類別添加到<span style="font-family: 宋体, SimSun; font-size: 14px;">#main</span>標籤以添加一些填充並使內容居中

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

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

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中文網其他相關文章！