ウェブ開発者のためのAI：プロジェクトの紹介とセットアップ
ウェブ開発者向けAI：プロジェクト紹介とセットアップ
もし私と同じような人なら、AI技術の大ブームに気づいたことでしょう。それはソフトウェアエンジニアリングだけでなく、あらゆる産業にも変革をもたらすことを約束しています。
彼らが私たちを襲ってくる！！！
冗談です ;P
私はこれらのツールが何であり、どのように機能するのかを理解するために努力してきました。そして、ウェブ開発者がAI技術をウェブアプリに組み込む方法を学ぶためのチュートリアルシリーズを作成することにしました。
- 「Apache Sparkにおけるメモリ管理：ディスクスピル」
- 「2023年に試してみる必要のある素晴らしい無料LLMプレイグラウンド5選」
- GraphReduce グラフを使用した特徴エンジニアリングの抽象化
このシリーズでは、OpenAIのAIサービスをQwikというJavaScriptフレームワークで構築されたアプリケーションに統合する方法を学びます（これは後で理解するのに関係があります）。
以下はシリーズの概要です：
- 序章とセットアップ
- 初めてのAIプロンプト
- ストリーミングレスポンス
- AIの仕組み
- プロンプトエンジニアリング
- AI生成画像
- セキュリティと信頼性
- デプロイ
OpenAIとQwikの具体的な内容については、必要な場所で説明しますが、主に一般的な知識、ツール、および実装に焦点を当てます。私たちはできるだけ基本的な部分に近づいて作業しますし、このアプリケーションに固有の部分を指摘します。
以下はちょっとしたプレビューです。
2人の対戦相手を受け取り、AIを使用して架空の戦いで勝利するのは誰かを判断するアプリを作るのは面白いと思いました。説明とAI生成画像のオプションを提供します。結果が少し変なこともありますが、それが楽しいところです。
始めることを楽しみにしているので、この最初の投稿では主に…
ボイラープレート :/
前提条件
何かを構築する前に、いくつかの前提条件を満たす必要があります。QwikはJavaScriptフレームワークなので、Node.js（およびNPM）をインストールする必要があります。最新バージョンをダウンロードできますが、バージョンv16.8以上であれば動作するはずです。私はバージョン20を使用しています。
次に、OpenAIのアカウントが必要です。彼らのAPIにアクセスするためです。
シリーズの最後に、アプリケーションをVPS（仮想プライベートサーバー）にデプロイします。使用するプロバイダーに関係なく、私たちが実行する手順は同じです。私はAkamaiのクラウドコンピューティングサービス（かつてLinode）を使用します。
Qwikアプリのセットアップ
前提条件を満たしていると仮定して、コマンドラインターミナルを開き、コマンドnpm create qwik@latestを実行します。これにより、Qwik CLIが実行され、アプリケーションの初期設定が行われます。
いくつかの設定に関する質問が表示され、それに答えるとプロジェクトが生成されます。以下に私の回答の例を示します：
すべてうまくいけば、プロジェクトを開いて探索を始めることができます。
プロジェクトフォルダーの中には、いくつかの重要なファイルとフォルダーが含まれていることに気付くでしょう：
/src：すべてのアプリケーションのビジネスロジックが含まれています/src/components：アプリを構築するための再利用可能なコンポーネントが含まれています/src/routes：Qwikのファイルベースのルーティングを担当します。各フォルダはルートを表し、（ページまたはAPIエンドポイントになる）ページを作成するには、ルートのフォルダにindex.{jsx|tsx}ファイルを配置します。/src/root.tsx：このファイルはHTMLドキュメントのルートを生成する責任を持つルートコンポーネントをエクスポートします。
開発を開始する
QwikはバンドラとしてViteを使用しています。Viteには組み込みの開発サーバーがあるため、便利です。これにより、アプリケーションをローカルで実行し、ファイルが変更されるとブラウザを更新することができます。
開発サーバーを起動するには、プロジェクトをターミナルで開き、コマンドnpm run devを実行します。開発サーバーが実行されている状態で、ブラウザを開き、http://localhost:5173に移動すると、非常に基本的なアプリが表示されるはずです。
アプリに変更を加えるたびに、ブラウザにほぼ即座に反映されるはずです。
スタイリングを追加する
このプロジェクトではスタイリングにあまり焦点を当てないため、このセクションは完全に任意です。自分自身で独自の方法を使用したい場合は、スキップしても構いません。シンプルにするために、Tailwindを使用します。
Qwik CLIは、ターミナルコマンドnpm run qwik addを実行することで、必要な変更を簡単に追加できます。これにより、複数の利用可能なQwikプラグインが表示され、選択することができます。
矢印キーを使用してTailwindプラグインまで移動し、Enterキーを押します。その後、コードベースに対して行われる変更が表示され、確認を求められます。問題なければ、再度Enterキーを押すことができます。
私のプロジェクトでは、一貫したテーマを持つことも好みなので、GitHubにファイルを保管し、スタイルをコピー＆ペーストしています。もちろん、独自のテーマを使用したい場合は、このステップを無視しても構いませんが、私のように素晴らしいプロジェクトにしたい場合は、GitHubのこのファイルからスタイルを/src/global.cssファイルにコピーしてください。古いスタイルは置き換えても構いませんが、Tailwindのディレクティブはそのままにしてください。
ホームページの準備
今日行う最後の作業は、ホームページにいくつかの変更を加えることです。これは、/src/routes/index.tsxファイルを変更することを意味します。
デフォルトでは、このファイルは非常に基本的なテキストと、head変数をエクスポートしてHTMLの<head>を変更する例が含まれています。私が行いたい変更は次のとおりです：
headのエクスポートを削除する<h1>を除くすべてのテキストを削除する；独自のページタイトルテキストを追加しても構いません。- コンテンツを中央に配置し、
<h1>を大きくするためのいくつかのTailwindクラスを追加する - コンテンツをセマンティックにするために、
<main>タグでコンテンツを囲む <main>タグにTailwindクラスを追加して、パディングを追加しコンテンツを中央に配置する
これらはすべて必須ではない細かな変更ですが、次の投稿でアプリを構築するための素晴らしい出発点を提供すると思います。
これが私の変更後のファイルの見た目です。
import { component$ } from "@builder.io/qwik";
export default component$(() => {
return (
Hi [wave emoji]
);
});そして、ブラウザでは、次のように表示されます。
結論
今日はこれで終わりです。再度言いますが、この投稿は主にボイラープレートの作業を片付け、次の投稿でOpenAIのAPIをプロジェクトに統合するために専念できるようにすることに重点を置いています。
それを念頭に置いて、自分自身のアイデアでAIアプリを構築することを考える時間を取ってみてください。自分なりのアレンジを加える柔軟性がたくさんあります。
あなたが何を考えるか、そしてコードを詳しく見たい場合は、私のGitHubアカウントにポストします。
We will continue to update VoAGI; if you have any questions or suggestions, please contact us!
Was this article helpful?
93 out of 132 found this helpful
Related articles
