Apprenez étape par étape à créer des applications réseau d'intelligence artificielle !

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 : <span style="font-family: 宋体, SimSun; font-size: 14px;">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:><span style="font-family: 宋体, SimSun; font-size: 14px;">npm create qwik@latest</span>. Cela exécutera la CLI Qwik qui nous aidera à démarrer notre application.

Exemple :

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

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

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

2. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/components</span> : contient toute la logique métier de l'application

🎜🎜<span style="font-family: 宋体, SimSun; font-size: 14px;">/src/components🎜</span>🎜： Contient des composants réutilisables à construire nos candidatures 🎜🎜

3. <span style="font-family : 宋体, taille de police : 14px;">/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:><span style="font-family: 宋体, SimSun; font-size: 14px;">/src/routes</span>：负责Qwik的基于文件的路由；每个文件夹代表一个路由（可以是页面或 API 端点）。要创建页面，请将<span style="font-family: 宋体, SimSun; font-size: 14px;">index.{jsx|tsx}</span>文件放入路线的文件夹中。

4. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/root.tsx</span>：该文件导出负责生成 HTML 文档根的根组件。

开始开发

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

要启动开发服务器，我们可以在终端中打开项目并执行命令<span style="font-family: 宋体, SimSun; font-size: 14px;">npm run dev</span>。开发服务器运行后，您可以打开浏览器并访问<span style="font-family: 宋体, SimSun; font-size: 14px;">http://localhost:5173</span> : 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 <span style="font-family : 宋体, taille de police : 14px; ">index.{jsx|tsx}</span>

fichier dans le dossier de la route.

🎜🎜<span style="font-family : 宋体, taille de police : 14px ;"> /src/root.tsx🎜</span>🎜 : Ce fichier exporte le composant racine chargé de générer la racine du document HTML. 🎜🎜🎜

 🎜Démarrer le développement 🎜

🎜Qwik utilise 🎜Vite<span style=" font-family : 宋体, SimSun ; font-size : 14px;">npm 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:><span style="font-family: 宋体, SimSun; font-size: 14px;">npm run qwik add</span>npm run qwik add.

Exemple :

🎜

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.

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:><span style="font-family: 宋体, SimSun; font-size: 14px;">/src/global.css</span>。您可以替换旧样式，但保留 Tailwind 指令。

准备主页

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

1. 删除<span style="font-family: 宋体, SimSun; font-size: 14px;">head</span>/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. <span style="font-family : 宋体, taille de police : 14px ;"> h1<code style="box-sizing: border-box; font-family: Menlo, Monaco, Consolas, " courier new monospace font-size: padding: color: rgb background-color: border-radius:><span style="font-family: 宋体, SimSun; font-size: 14px;">h1</span>删除除;之外的所有文本 请随意添加您自己的页面标题文本。

   3. 添加一些 Tailwind 类以将内容居中并使内容<span style="font-family: 宋体, SimSun; font-size: 14px;">h1</span>更大

   4. 用标签包裹内容<span style="font-family: 宋体, SimSun; font-size: 14px;">main</span>以使其更具语义

   5. 将 Tailwind 类添加到<span style="font-family: 宋体, SimSun; font-size: 14px;">main</span>Supprimez 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

   <span style="font-family: 宋体, SimSun; font-size: 14px;">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);"></p></span> pour le rendre plus sémantique🎜🎜🎜🎜Changer le vent arrière class Ajouter à 🎜<span style="font-family : 宋体, taille de police : 14px ;">main 🎜 </span> 🎜 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>
     );
   });

   🎜🎜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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!