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

首页

科技周边

人工智能

手把手教你打造人工智能网络应用！

DDD

Sep 18, 2023 am 10:35 AM

人工智能

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

在本系列中，我们将学习如何将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 id="Hi-nbsp-wave-nbsp-emoji">Hi [wave emoji]</h1>
 </main>
 );
});
```
🎜🎜在浏览器中：🎜🎜
结论

这就是我们今天要讨论的全部内容。同样，这篇文章的主要重点是消除样板内容，以便下一篇文章可以致力于将 OpenAI 的 API 集成到我们的项目中。

以上是手把手教你打造人工智能网络应用！的详细内容。更多信息请关注PHP中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

拥抱面部是否7B型号奥林匹克赛车击败克劳德3.7？Apr 23, 2025 am 11:49 AM

拥抱Face的OlympicCoder-7B：强大的开源代码推理模型开发以代码为中心的语言模型的竞赛正在加剧，拥抱面孔与强大的竞争者一起参加了比赛：OlympicCoder-7B，一种产品

4个新的双子座功能您可以错过Apr 23, 2025 am 11:48 AM

你们当中有多少人希望AI可以做更多的事情，而不仅仅是回答问题？我知道我有，最近，我对它的变化感到惊讶。 AI聊天机器人不仅要聊天，还关心创建，研究

Camunda为经纪人AI编排编写了新的分数Apr 23, 2025 am 11:46 AM

随着智能AI开始融入企业软件平台和应用程序的各个层面（我们必须强调的是，既有强大的核心工具，也有一些不太可靠的模拟工具），我们需要一套新的基础设施能力来管理这些智能体。总部位于德国柏林的流程编排公司Camunda认为，它可以帮助智能AI发挥其应有的作用，并与新的数字工作场所中的准确业务目标和规则保持一致。该公司目前提供智能编排功能，旨在帮助组织建模、部署和管理AI智能体。从实际的软件工程角度来看，这意味着什么？确定性与非确定性流程的融合该公司表示，关键在于允许用户（通常是数据科学家、软件

策划的企业AI体验是否有价值？Apr 23, 2025 am 11:45 AM

参加Google Cloud Next '25，我渴望看到Google如何区分其AI产品。有关代理空间（此处讨论）和客户体验套件（此处讨论）的最新公告很有希望，强调了商业价值

如何为抹布找到最佳的多语言嵌入模型？Apr 23, 2025 am 11:44 AM

为您的检索增强发电（RAG）系统选择最佳的多语言嵌入模型在当今的相互联系的世界中，建立有效的多语言AI系统至关重要。强大的多语言嵌入模型对于RE至关重要

麝香：奥斯汀的机器人需要每10,000英里进行干预Apr 23, 2025 am 11:42 AM

特斯拉的Austin Robotaxi发射：仔细观察Musk的主张埃隆·马斯克（Elon Musk）最近宣布，特斯拉即将在德克萨斯州奥斯汀推出的Robotaxi发射，最初出于安全原因部署了一支小型10-20辆汽车，并有快速扩张的计划。 h

AI震惊的枢轴：从工作工具到数字治疗师和生活教练Apr 23, 2025 am 11:41 AM

人工智能的应用方式可能出乎意料。最初，我们很多人可能认为它主要用于代劳创意和技术任务，例如编写代码和创作内容。然而，哈佛商业评论最近报道的一项调查表明情况并非如此。大多数用户寻求人工智能的并非是代劳工作，而是支持、组织，甚至是友谊！报告称，人工智能应用案例的首位是治疗和陪伴。这表明其全天候可用性以及提供匿名、诚实建议和反馈的能力非常有价值。另一方面，营销任务（例如撰写博客、创建社交媒体帖子或广告文案）在流行用途列表中的排名要低得多。这是为什么呢？让我们看看研究结果及其对我们人类如何继续将