Apprenez étape par étape à créer des applications réseau d'intelligence artificielle !-IA-php.cn

Si vous êtes comme moi, vous remarquerez l'explosion de la technologie de l'intelligence artificielle. Cela perturbera non seulement le génie logiciel, mais tous les secteurs.

Dans cette série, nous apprendrons comment intégrer les services d'IA d'OpenAI dans des applications construites avec Qwik, un framework JavaScript axé sur le concept de récupérabilité.

Nous aborderons les spécificités d'OpenAI et de Qwik, mais je me concentrerai principalement sur les connaissances générales, les outils et les implémentations qui devraient s'appliquer au framework ou à la chaîne d'outils que vous utilisez. Nous nous concentrerons le plus possible sur les bases et je soulignerai les parties uniques de l'application.

Aperçu :

Préparation

Avant de commencer à construire quoi que ce soit, nous devons remplir quelques conditions préalables. Qwik est un framework JavaScript, nous devons donc installer Node.js (et NPM). Vous pouvez télécharger la dernière version, mais toute version supérieure à la v16.8 devrait fonctionner. J'utiliserai la version 20.

Ensuite, nous avons également besoin d'un compte OpenAI pour accéder à leur API.

À la fin de cette série, nous déploierons l'application sur un VPS (Virtual Private Server). Quel que soit le fournisseur que vous choisissez, les étapes que nous suivons doivent être les mêmes. J'utiliserai le service de cloud computing d'Akamai (anciennement Linode).

Configuration de l'application Qwik

En supposant que nous remplissions les conditions préalables, nous pouvons ouvrir un terminal de ligne de commande et exécuter la commande : 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. Cela exécutera la CLI Qwik qui nous aidera à démarrer notre application.

Exemple :

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

Si tout va bien, ouvrez le projet et commencez à explorer.

Dans le dossier du projet, vous remarquerez quelques fichiers et dossiers importants :

/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 : contient toute la logique métier de l'application

/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 : responsable du routage basé sur les fichiers de Qwik ; chaque dossier représente une route (peut être une page ou un point de terminaison d'API). Pour créer la page, ajoutez index.{jsx|tsx}

fichier dans le dossier de la route.

🎜🎜 /src/root.tsx🎜🎜 : Ce fichier exporte le composant racine chargé de générer la racine du document HTML. 🎜🎜🎜

🎜Démarrer le développement 🎜

🎜Qwik utilise 🎜Vitenpm run dev🎜🎜. Une fois le serveur de développement exécuté, vous pouvez ouvrir un navigateur et visiter 🎜<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: px remplissage couleur rgb d simsun font-size>http://localhost:5173🎜🎜 et vous devriez voir une application très basique. 🎜🎜🎜🎜 Chaque fois que nous apportons des modifications à notre application, nous devrions voir ces modifications reflétées dans le navigateur presque immédiatement. 🎜🎜

Ajouter des styles

Ce projet ne se concentre pas trop sur les styles, donc si vous voulez faire votre propre truc, cette partie est complètement facultative. Pour garder les choses simples, j'utiliserai Tailwind.

Qwik CLI facilite l'ajout des modifications nécessaires en exécutant les commandes du terminal<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.

Exemple :

🎜

您想要添加什么集成？- 适配器：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（单元测试）

Vous pouvez utiliser les touches fléchées pour descendre jusqu'au plugin Tailwind et appuyer sur Entrée. Il vous montrera ensuite les modifications qui seront apportées à votre base de code et vous demandera une confirmation. Tant que tout semble bon, vous pouvez appuyer à nouveau sur Entrée.

准备好？将 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 更新应用到您的应用程序了吗？- 是的，看起来不错，完成更新！

J'aime aussi avoir un thème cohérent pour mes projets, je garde donc un fichier dans GitHub à partir duquel copier et coller des styles. Évidemment, vous pouvez ignorer cette étape si vous voulez votre propre thème, mais si vous voulez que votre projet soit aussi époustouflant que le mien, copiez les styles de ce fichier sur GitHub dans ce fichier <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. Vous pouvez remplacer l'ancien style mais conserver la directive Tailwind.
🎜
🎜Préparer la page d'accueil🎜
🎜🎜Pour bien démarrer le projet, la dernière chose que nous souhaitons faire aujourd'hui est d'apporter quelques modifications à la page d'accueil. 🎜🎜Les modifications que je souhaite apporter incluent : 🎜🎜
1. 🎜Supprimer🎜🎜head🎜🎜Export🎜🎜
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 类添加到mainSupprimez tout le texte sauf ; N'hésitez pas à ajouter votre propre texte de titre de page.
Ajoutez quelques classes Tailwind pour centrer le contenu et créer le contenu h1

Bigger

Envelopper le contenu avec des balises
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);"> pour le rendre plus sémantique🎜🎜🎜🎜Changer le vent arrière class Ajouter à 🎜main 🎜  🎜 tag pour ajouter un peu de remplissage et centrer le contenu 🎜🎜🎜🎜🎜🎜 Ce sont quelques changements mineurs qui ne sont pas strictement nécessaires mais je pense qu'ils seront utiles pour construire notre application dans le prochain article Fournit un bon départ indiquer. 🎜🎜🎜🎜Voici à quoi ressemble le fichier après l'avoir modifié. 🎜🎜🎜🎜🎜🎜
```
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>
 );
});
```
Copier après la connexion
🎜🎜Dans votre navigateur : 🎜🎜
Conclusion

C'est tout ce dont nous allons parler aujourd'hui. Encore une fois, l'objectif principal de cet article est d'éliminer le contenu passe-partout afin que le prochain article puisse être consacré à l'intégration de l'API d'OpenAI dans notre projet.