Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Netzwerkanwendungen für künstliche Intelligenz erstellen!

Wenn Sie wie ich sind, werden Sie die Explosion der Technologie der künstlichen Intelligenz bemerken. Es wird nicht nur die Softwareentwicklung, sondern jede Branche revolutionieren.

In dieser Serie erfahren wir, wie man die KI-Dienste von OpenAI in Anwendungen integriert, die mit Qwik erstellt wurden, einem JavaScript-Framework, das sich auf das Konzept der Wiederherstellbarkeit konzentriert.

Wir werden auf die Besonderheiten von OpenAI und Qwik eingehen, aber ich werde mich hauptsächlich auf allgemeines Wissen, Tools und Implementierungen konzentrieren, die für jedes Framework oder jede Toolchain gelten sollten, die Sie verwenden. Wir werden uns so weit wie möglich auf die Grundlagen konzentrieren und ich werde die Besonderheiten der Anwendung hervorheben.

Vorschau:

Vorbereitung

Bevor wir mit dem Bau beginnen, müssen wir ein paar Voraussetzungen erfüllen. Qwik ist ein JavaScript-Framework, daher müssen wir Node.js (und NPM) installieren. Sie können die neueste Version herunterladen, aber alles, was höher als Version 16.8 ist, sollte funktionieren. Ich werde Version 20 verwenden.

Als nächstes benötigen wir auch ein OpenAI-Konto, um auf ihre API zuzugreifen.

Am Ende dieser Serie werden wir die Anwendung auf einem VPS (Virtual Private Server) bereitstellen. Egal für welchen Anbieter Sie sich entscheiden, die Schritte, die wir befolgen, sollten die gleichen sein. Ich werde den Cloud-Computing-Dienst von Akamai (ehemals Linode) nutzen.

Einrichten der Qwik-App

Vorausgesetzt, wir erfüllen die Voraussetzungen, können wir ein Befehlszeilenterminal öffnen und den Befehl ausführen: <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>. Dadurch wird die Qwik-CLI ausgeführt, die uns beim Booten unserer Anwendung hilft.

Beispiel:

Wenn alles in Ordnung ist, öffnen Sie das Projekt und beginnen Sie mit der Erkundung.

Im Projektordner werden Ihnen einige wichtige Dateien und Ordner auffallen:

1. <span style="Schriftfamilie: 宋体, SimSun; Schriftgröße: 14px;">/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>: Enthält die gesamte Geschäftslogik der Anwendung

🎜🎜<span style="font-family: 宋体, SimSun; font-size: 14px;">/src/components🎜</span>🎜： Enthält wiederverwendbare Komponenten zum Erstellen unsere Anwendungen 🎜🎜

3. <span style="Schriftfamilie: 宋体, SimSun; Schriftgröße: 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>: Verantwortlich für das dateibasierte Routing von Qwik; jeder Ordner stellt eine Route dar (kann eine Seite oder ein API-Endpunkt sein). Um die Seite zu erstellen, fügen Sie <span style="font-family: 宋体, SimSun; ">index.{jsx|tsx}</span>

Datei in den Ordner der Route.

🎜🎜<span style="font-family: 宋体, SimSun;"> /src/root.tsx🎜</span>🎜: Diese Datei exportiert die Stammkomponente, die für die Generierung des HTML-Dokumentstamms verantwortlich ist. 🎜🎜🎜

Qwik verwendet 🎜Vite<span style=" Schriftfamilie: 宋体, SimSun; Schriftgröße: 14px;">npm run dev🎜🎜. Sobald der Entwicklungsserver läuft, können Sie einen Browser öffnen und 🎜<code style="box-sizing: border-box; Schriftfamilie: Menlo, Monaco, Consolas, „Courier New“, Monospace; Schriftgröße: 17.1 aufrufen px; Polsterung: 2px 4px; Hintergrundfarbe: rgb(249, 242, 244);"><span style="font-family: 宋体, SimSun; Schriftgröße: 14px;">http://localhost:5173🎜</span>🎜 und Sie sollten eine sehr einfache Anwendung sehen. 🎜🎜🎜🎜 Immer wenn wir Änderungen an unserer Anwendung vornehmen, sollten wir diese Änderungen fast sofort im Browser sehen. 🎜🎜

Stile hinzufügen

Dieses Projekt konzentriert sich nicht zu sehr auf Stile. Wenn Sie also Ihr eigenes Ding machen möchten, ist dieser Teil völlig optional. Der Einfachheit halber verwende ich Tailwind.

Qwik CLI erleichtert das Hinzufügen notwendiger Änderungen durch Ausführen von Terminalbefehlen

Beispiel:

Mit den Pfeiltasten können Sie nach unten zum Tailwind-Plugin navigieren und die Eingabetaste drücken. Anschließend werden Ihnen die Änderungen angezeigt, die an Ihrer Codebasis vorgenommen werden, und Sie werden zur Bestätigung aufgefordert. Solange es gut aussieht, können Sie erneut die Eingabetaste drücken.

Ich möchte auch ein einheitliches Thema für meine Projekte haben, deshalb behalte ich eine Datei in GitHub, aus der ich Stile kopieren und einfügen kann. Natürlich können Sie diesen Schritt ignorieren, wenn Sie Ihr eigenes Theme möchten, aber wenn Sie möchten, dass Ihr Projekt genauso beeindruckend aussieht wie meines, kopieren Sie die Stile aus dieser Datei auf GitHub in diese Datei <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. Sie können den alten Stil ersetzen, aber die Tailwind-Direktive beibehalten.

   🎜

   🎜Homepage vorbereiten🎜

   🎜🎜Um dem Projekt einen guten Start zu ermöglichen, möchten wir heute als letztes einige Änderungen an der Startseite vornehmen. 🎜🎜Zu den Änderungen, die ich vornehmen möchte, gehören: 🎜🎜

   1. 🎜Delete🎜<li style="box-sizing: border-box; padding: 0px 0px 8px;"><p><span style="box-sizing: border-box; vertical-align: inherit; font-family: 宋体, SimSun; font-size: 14px;"></span><code style="box-sizing: border-box; Schriftfamilie: Menlo, Monaco, Consolas, „Courier New“, Monospace; Schriftgröße: 17,1 Pixel; Polsterung: 2 Pixel 4 Pixel; Farbe: RGB (199, 37, 78); Hintergrundfarbe: rgb(249, 242, 244); Randradius: 4px;"><span style="font-family: 宋体, SimSun;"> 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>删除除;之外的所有文本 请随意添加您自己的页面标题文本。

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

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

   4. 将 Tailwind 类添加到<span style="font-family: 宋体, SimSun; font-size: 14px;">main</span>

   Entfernen Sie den gesamten Text außer ; Fühlen Sie sich frei, Ihren eigenen Seitentiteltext hinzuzufügen.

   Fügen Sie einige Tailwind-Klassen hinzu, um den Inhalt zu zentrieren und den Inhalt zu erstellen <span style="font-family: 宋体, SimSun; font-size: 14px;">main</span>

   um es semantischer zu machen

   Ändern Sie den Rückenwind Klasse Hinzufügen zu

   <span style="font-family: 宋体, SimSun;">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> Tag, um etwas Polsterung hinzuzufügen und den Inhalt zu zentrieren 🎜🎜🎜🎜 Dies sind einige kleinere Änderungen, die nicht unbedingt notwendig sind, aber ich denke, dass sie beim Erstellen unserer App im nächsten Artikel nützlich sein werden. Bietet einen guten Anfang Punkt. 🎜🎜🎜🎜So sieht die Datei aus, nachdem ich sie geändert habe. 🎜🎜🎜🎜🎜🎜

   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>
     );
   });

   🎜🎜In Ihrem Browser: 🎜🎜

   

   Fazit

   Das ist alles, worüber wir heute sprechen werden. Auch hier liegt das Hauptaugenmerk dieses Beitrags auf der Eliminierung von Standardinhalten, damit der nächste Beitrag der Integration der OpenAI-API in unser Projekt gewidmet werden kann.

Das obige ist der detaillierte Inhalt vonBringen Sie Ihnen Schritt für Schritt bei, wie Sie Netzwerkanwendungen für künstliche Intelligenz erstellen!. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!