人工知能ネットワーク アプリケーションを構築する方法を段階的に説明します。

あなたも私と同じなら、人工知能テクノロジーの爆発的な発展に気づくでしょう。ソフトウェアエンジニアリングだけでなく、あらゆる業界に混乱をもたらすでしょう。

このシリーズでは、OpenAI の AI サービスを、回復可能性の概念に重点を置いた JavaScript フレームワークである Qwik で構築されたアプリケーションに統合する方法を学びます。

OpenAI と Qwik の詳細について説明しますが、使用しているフレームワークやツールチェーンに適用される一般的な知識、ツール、実装に主に焦点を当てます。できる限り基本に重点を置き、アプリケーションのユニークな部分についても説明します。

プレビュー:

##準備

何かを構築し始める前に、いくつかの前提条件を満たす必要があります。 Qwik は JavaScript フレームワークであるため、Node.js (および NPM) をインストールする必要があります。最新バージョンをダウンロードできますが、v16.8 以降であれば動作するはずです。バージョン20を使用します。

#次に、API にアクセスするための OpenAI アカウントも必要です。

このシリーズの最後では、アプリケーションを VPS (仮想プライベート サーバー) にデプロイします。どのプロバイダーを選択しても、従う手順は同じです。 Akamai のクラウド コンピューティング サービス (旧称 Linode) を使用します。

Qwik アプリケーションのセットアップ

前提条件を満たしていると仮定すると、コマンド ライン ターミナルを開いて次のコマンドを実行できます: <span style="font-family: 宋体, SimSun; font-size: 14px;">npm では qwik@latest</span> を作成します。これにより、アプリケーションのブートストラップに役立つ Qwik CLI が実行されます。 ＃＃＃＃＃＃＃＃＃＃＃＃例： ＃＃＃＃＃＃

すべて問題なければ、プロジェクトを開いて探索を開始してください。

#プロジェクト フォルダーには、いくつかの重要なファイルとフォルダーがあることがわかります:

1. <span style="font-family: 宋体, SimSun; font-size: 14px;">/src</span>: すべてのアプリケーション ビジネス ロジックが含まれます

2. ##/src/components<span style="font-family: 宋体, SimSun; font-size: 14px;"></span>: 再利用可能なコンポーネントが含まれますアプリケーションを構築するには

3. <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. #/src/root.tsxx<span style="font-family: 宋体, SimSun; font-size: 14px;"></span>: このファイルは、HTML ドキュメント ルートの生成を担当するルート コンポーネントをエクスポートします。 。

開発の開始

Qwik は Vite をバンドラーとして使用します。 Viteには開発サーバーが内蔵されているので非常に便利です。これは、アプリケーションをローカルで実行し、ファイルが変更されたときにブラウザを更新することをサポートします。

#開発サーバーを起動するには、ターミナルでプロジェクトを開いてコマンド

npm run dev## を実行します。 ＃＃＃。開発サーバーが実行されたら、ブラウザを開いて <span style="font-family: 宋体, SimSun; font-size: 14px;"></span>http://localhost:5173 にアクセスすると、非常に基本的なアプリケーションが表示されるはずです。 <span style="font-family: 宋体, SimSun; font-size: 14px;"></span> アプリケーションに変更を加えると、その変更がほぼ即座にブラウザーに反映されることがわかります。

スタイルの追加

このプロジェクトではスタイルにはあま​​り焦点を当てていないため、独自のことを行いたい場合は、この部分は完全にオプションです。簡単にするために、Tailwind を使用します。

Qwik CLI を使用すると、ターミナル コマンドを実行して必要な変更を簡単に追加できます<span style="font-family: 宋体, SimSun; font-size: 14px;">npm run qwik add</span> 。 ＃＃＃＃＃＃＃＃＃＃＃＃例： ＃＃＃＃＃＃

矢印キーを使用して Tailwind プラグインまで移動し、Enter キーを押します。次に、コードベースに加えられる変更が表示され、確認を求められます。見た目が良好であれば、もう一度 Enter キーを押してもかまいません。

また、プロジェクトに一貫したテーマを持ちたいので、スタイルからコピーして貼り付けるために GitHub にファイルを保存しています。 もちろん、独自のテーマが必要な場合はこの手順を無視できますが、プロジェクトを私のプロジェクトと同じように魅力的に見せたい場合は、このファイルからスタイルをコピーします GitHub 上のファイル <span style="font-family: 宋体, SimSun; font-size: 14px;">/src/global.css</span>。古いスタイルを置き換えることができますが、Tailwind ディレクティブは維持します。

ホームページの準備

プロジェクトを良いスタートを切るために、今日最後にやりたいことは、いくつかの変更を加えることです。ホームページをご覧ください。 私が加えたい変更は次のとおりです:

1. Remove<span style="font-family: 宋体, SimSun; font-size: 14px;">head</span> # ＃＃輸出＃＃＃＃＃＃

2. <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>#タグに追加してパディングを追加し、コンテンツを中央に配置します

これらは厳密には必要ではないいくつかの小さな変更ですが、次の記事の開始点でアプリケーションを構築するための良い出発点になると思います。

変更後のファイルは次のようになります。

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 をプロジェクトに統合することに専念できるように、定型コンテンツを削除することです。

以上が人工知能ネットワーク アプリケーションを構築する方法を段階的に説明します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。