如果你和我一样，你一定注意到了人工智能技术的巨大飞跃。它承诺不仅会颠覆软件工程，而且会影响每一个行业。
他们要来找我们了！！！
开个玩笑；P
我一直在努力理解这些工具是什么以及它们是如何工作的，所以决定创建一个教程系列，帮助Web开发人员学习如何将人工智能技术应用到Web应用中。
在这个系列中，我们将学习如何将OpenAI的人工智能服务集成到使用Qwik构建的应用程序中，Qwik是一个专注于可恢复性概念的JavaScript框架（这一点将在后面理解起来很重要）。
这是系列大纲：
- 介绍与设置
- 你的第一个人工智能提示
- 流式响应
- 人工智能是如何工作的
- 提示工程
- AI生成的图像
- 安全性和可靠性
- 部署
在适当的时候，我们将详细介绍OpenAI和Qwik，但我主要关注通用知识、工具和实现，这些应该适用于您正在使用的任何框架或工具链。我们将尽可能接近基础知识，并指出哪些部分是该应用程序特有的。
这是一个小小的预览。
我觉得构建一个应用程序，它接受两个对手，并使用人工智能来确定在一个假设的战斗中谁会获胜，会很酷。它提供了一些解释和创建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端点）。要创建一个页面，在路由的文件夹中放置一个index.{jsx|tsx}文件即可。/src/root.tsx：该文件导出负责生成HTML文档根的根组件。
开始开发
Qwik使用Vite作为打包工具，这很方便，因为Vite有一个内置的开发服务器。它支持在本地运行我们的应用程序，并在文件更改时更新浏览器。
要启动开发服务器，我们可以在终端中打开我们的项目并执行命令npm run dev。有了开发服务器运行，您可以打开浏览器并转至http://localhost:5173，您应该会看到一个非常基本的应用程序。
每当我们对应用程序进行更改时，我们应该几乎立即在浏览器中看到这些更改。
添加样式
这个项目不会过多关注样式，所以如果你想自己做一些事情，这部分是完全可选的。为了保持简单，我将使用Tailwind。
通过执行终端命令npm run qwik add，Qwik CLI使添加所需更改变得轻松。这将提示您选择几个可用的Qwik插件。
您可以使用箭头键向下移动到Tailwind插件并按Enter键。然后，它将显示对代码库将进行的更改并要求确认。只要看起来不错，您可以再次按Enter键。
对于我的项目，我还喜欢保持一致的主题，因此我在GitHub上保存一个文件，以便复制和粘贴样式。显然，如果您想要自己的主题，可以忽略此步骤，但如果您希望您的项目看起来像我的一样令人惊叹，请将GitHub上的样式从此文件复制到/src/global.css文件中。您可以替换旧样式，但保留Tailwind指令。
准备主页
为了让项目达到一个良好的起点，我们今天要做的最后一件事是对主页进行一些更改。这意味着对/src/routes/index.tsx进行更改。
默认情况下，此文件以一些非常基本的文本和一个用于通过导出head变量修改HTML <head>的示例开始。我想要进行的更改包括：
- 删除
head导出 - 删除除
<h1>之外的所有文本；可以随意添加自己的页面标题文本。 - 添加一些Tailwind类以居中内容并使
<h1>变大 - 使用
<main>标签包装内容，以使其更具语义性 - 为
<main>标签添加Tailwind类以添加一些填充并居中内容
这些都是不是绝对必要的小改变，但我认为它们将为我们在下一篇文章中构建应用程序提供一个很好的起点。
以下是在我进行更改后该文件的样子。
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集成到我们的项目中。
考虑一下您可能想要构建的一些AI应用程序的想法。您将有很大的灵活性来添加自己的独特元素。
我很期待看到您的成果，如果您想更详细地探索代码，我将在我的GitHub账户上发布它。