手把手教你打造人工智能网络应用！-人工智能-PHP中文网

如果你和我一样，你就会注意到人工智能技术的火爆。它不仅会颠覆软件工程，还会颠覆每个行业。

在本系列中，我们将学习如何将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<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>npm create qwik@latest。这将运行 Qwik CLI，它将帮助我们引导我们的应用程序。

示例：

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

如果一切正常，请打开项目并开始探索。

在项目文件夹中，您会注意到一些重要的文件和文件夹：

/src<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>/src：包含所有应用业务逻辑
/src/components：包含所有应用业务逻辑

/src/components🎜

/src/routes<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>/src/routes：负责Qwik的基于文件的路由；每个文件夹代表一个路由（可以是页面或 API 端点）。要创建页面，请将index.{jsx|tsx}文件放入路线的文件夹中。
/src/root.tsx：该文件导出负责生成 HTML 文档根的根组件。

开始开发

Qwik 使用Vite作为捆绑器，这很方便，因为 Vite 内置了开发服务器。它支持在本地运行我们的应用程序，并在文件更改时更新浏览器。

要启动开发服务器，我们可以在终端中打开项目并执行命令npm run dev。开发服务器运行后，您可以打开浏览器并访问http://localhost:5173：负责Qwik的基于文件的路由；每个文件夹代表一个路由（可以是页面或 API 端点）。要创建页面，请将index.{jsx|tsx}

文件放入路线的文件夹中。

🎜🎜/src/root.tsx🎜🎜：该文件导出负责生成 HTML 文档根的根组件。🎜🎜🎜

🎜开始开发🎜

🎜Qwik 使用🎜Vite作为捆绑器，这很方便，因为 Vite 内置了开发服务器。它支持在本地运行我们的应用程序，并在文件更改时更新浏览器。🎜🎜🎜🎜🎜要启动开发服务器，我们可以在终端中打开项目并执行命令🎜npm run dev🎜🎜。开发服务器运行后，您可以打开浏览器并访问🎜http://localhost:5173🎜🎜，您应该会看到一个非常基本的应用程序。🎜🎜🎜🎜每当我们对应用程序进行更改时，我们都应该看到这些更改几乎立即反映在浏览器中。🎜🎜

添加样式

该项目不会过多关注样式，因此如果您想做自己的事情，这部分完全是可选的。为了简单起见，我将使用Tailwind。

通过执行终端命令，Qwik CLI 可以轻松添加必要的更改<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>npm run qwik addnpm 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 上这个文件中的样式复制到该文件中<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>/src/global.css。您可以替换旧样式，但保留 Tailwind 指令。

准备主页

为了使项目有一个良好的起点，我们今天要做的最后一件事是对主页进行一些更改。我想要做出的更改包括：

删除head/src/global.css。您可以替换旧样式，但保留 Tailwind 指令。
🎜
🎜准备主页🎜
🎜🎜为了使项目有一个良好的起点，我们今天要做的最后一件事是对主页进行一些更改。🎜🎜我想要做出的更改包括：🎜🎜
1. 🎜删除🎜🎜head🎜🎜导出🎜🎜
2. h1<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:>h1删除除;之外的所有文本请随意添加您自己的页面标题文本。
3. 添加一些 Tailwind 类以将内容居中并使内容h1更大
4. 用标签包裹内容main以使其更具语义
5. 将 Tailwind 类添加到main删除除;之外的所有文本请随意添加您自己的页面标题文本。
添加一些 Tailwind 类以将内容居中并使内容h1

更大

用标签包裹内容
main<p style="box-sizing: border-box; margin-top: 5px; margin-bottom: 15px; padding-top: 0px; color: rgb(34, 38, 53); font-family: Cambria, serif; font-size: 19px; text-wrap: wrap; background-color: rgb(255, 255, 255);">以使其更具语义🎜🎜🎜🎜将 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 集成到我们的项目中。