如果你像我一样，你已经注意到人工智能技术的巨大繁荣。它不仅有望颠覆软件工程，而且颠覆每个行业。
他们是冲着我们来的!!
开玩笑;P
我一直在更好地理解这些工具是什么以及它们是如何工作的，并决定为Web开发人员创建一个教程系列，以学习如何将AI技术整合到Web应用程序中。
在本系列中，我们将学习如何将 OpenAI的AI服务集成到使用Qwik构建的应用程序中， Qwik是一个专注于 可恢复性 概念的JavaScript框架（这将与以后理解相关）。
以下是系列大纲的外观：
- 简介和设置
- 您的第一个 AI 提示
- 流式处理响应
- 人工智能如何工作
- 及时工程
- AI 生成的图像
- 安全性和可靠性
- 部署
我们将讨论OpenAI和Qwik的细节，但我将主要关注通用知识，工具和实现，这些知识，工具和实现应该适用于您正在使用的任何框架或工具链。我们将尽可能接近基本面，我将指出哪些部分是这个应用程序独有的。
这里有一个小预览。
我认为构建一个应用程序会很酷，该应用程序需要两个对手并使用AI来确定谁将在假设的战斗中获胜。它提供了一些解释和创建AI生成的图像的选项
我希望你对开始感到兴奋，因为在这篇文章中，我们主要要做……
样板：/
先决条件
在我们开始构建任何东西之前，我们必须涵盖几个先决条件。Qwik是一个JavaScript框架，所以我们必须安装 Node.js （和NPM）。您可以下载最新版本，但高于 v16.8 版本的任何内容都应该可以。我将使用版本 20。
接下来，我们还需要一个 OpenAI 帐户才能访问他们的 API。
在本系列的最后，我们将应用程序部署到VPS（虚拟专用服务器）。无论您选择哪个提供商，我们遵循的步骤都应该相同。我将使用 Akamai 的云计算服务（以前称为 Linode）。
设置 Qwik 应用程序
假设我们已经解决了先决条件，我们可以打开命令行终端并运行命令：. npm create qwik@latest这将运行 Qwik CLI，这将帮助我们引导我们的应用程序。
它会询问您一系列配置问题，然后为您生成项目。这是我的答案：
如果一切正常，请打开项目并开始探索。
在项目文件夹中，您会注意到一些重要的文件和文件夹：
/src：包含所有应用程序业务逻辑/src/components：包含可重用的组件来构建我们的应用程序/src/routes：负责Qwik基于文件的路由;每个文件夹代表一个路由（可以是页面或 API 终结点）
路由文件夹中的 {jsx|tsx} 文件。
/src/root.tsx：此文件导出负责生成 HTML 文档根目录的根组件。开始开发
Qwik使用Vite作为捆绑器，这很方便，因为 Vite 有一个内置的开发服务器。它支持在本地运行我们的应用程序，并在文件更改时更新浏览器。
要启动开发服务器，我们可以在终端中打开我们的项目并执行 npm run dev命令 .在开发服务器运行的情况下，您可以打开浏览器并前往 http://localhost:5173 ，您应该会看到一个非常基本的应用程序。
每当我们对应用程序进行更改时，我们都应该看到这些更改几乎立即反映在浏览器中。
添加样式
这个项目不会太关注样式，所以如果你想做自己的事情，这部分是完全可选的。为了简单起见，我将使用 Tailwind。
Qwik CLI 通过执行终端命令 . npm run qwik add这将提示您有几个可用的Qwik插件可供选择。
您可以使用箭头键向下移动到顺风插件，然后按 Enter 键 只要它看起来不错，您就可以再次按 Enter。
对于我的项目，我也喜欢有一个一致的主题，所以我在我的 GitHub 中保留了一个文件来复制和粘贴样式。显然，如果你想要自己的主题，你可以忽略这一步，但如果你想让你的项目看起来和我的一样神奇，请将 GitHub /src/global.css 上这个文件中的样式复制到文件中。您可以替换旧样式，但保留 Tailwind 指令。
准备主页
为了使项目有一个好的起点，我们今天要做的最后一件事是对主页进行一些更改。这意味着对 进行更改 /src/routes/index.tsx。
默认情况下，此文件以一些非常基本的文本和通过导出head变量来修改 HTML <head> 的示例开头。我想做的改变包括：
- 删除
head导出 - 删除除 ;
<h1>随意添加您自己的页面标题文本。 - 添加一些顺风类以使内容居中并使内容变
<h1>大 - 用标记包装
<main>内容以使其更具语义性 - 将 Tailwind 类添加到标记以
<main>添加一些填充并使内容居中
这些都是并非绝对必要的小更改，但我认为它们将为在下一篇文章中构建我们的应用程序提供一个很好的起点。
这是我更改后文件的外观。
从“@builder.io/qwik”导入 { component$ };
export default component$（（） => {
return （
<main class=“max-w-4xl mx-auto p-4”><h1 class=“text-6xl”>Hi [wave emoji]</h1></main>
）;
}）;
在浏览器中，它看起来像这样：
在我的 GitHub 帐户上。
