Bringen Sie Ihnen Schritt für Schritt bei, wie Sie Netzwerkanwendungen für künstliche Intelligenz erstellen!-KI-php.cn

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: 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. Dadurch wird die Qwik-CLI ausgeführt, die uns beim Booten unserer Anwendung hilft.

Beispiel:

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

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:

/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: Enthält die gesamte Geschäftslogik der Anwendung

/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: 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 index.{jsx|tsx}

Datei in den Ordner der Route.

🎜🎜 /src/root.tsx🎜🎜: Diese Datei exportiert die Stammkomponente, die für die Generierung des HTML-Dokumentstamms verantwortlich ist. 🎜🎜🎜

Qwik verwendet 🎜Vitenpm 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);">http://localhost:5173🎜🎜 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:>/src/global.css。您可以替换旧样式，但保留 Tailwind 指令。

准备主页

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

删除head/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;"><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;"> 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删除除;之外的所有文本请随意添加您自己的页面标题文本。
2. 添加一些 Tailwind 类以将内容居中并使内容h1更大
3. 用标签包裹内容main以使其更具语义
4. 将 Tailwind 类添加到main
Fügen Sie einige Tailwind-Klassen hinzu, um den Inhalt zu zentrieren und den Inhalt zu erstellen main

um es semantischer zu machen

Ändern Sie den Rückenwind Klasse Hinzufügen zu
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);">  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>
 );
});
```
Nach dem Login kopieren
🎜🎜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!