ExpressとVue3を使った自作ChatGPTウェブページの迅速な無料対話インターフェースの構築

多くの開発者やAI愛好者は、プロンプトやカスタマイズされた会話をテストするためのシンプルなChatGPTインターフェースを求めていますが、OpenAIの公式ウェブサイトは時に速度制限やログインの煩わしさがあり、柔軟なカスタマイズができません。この痛点を解決するために、Chanzhaoyuはオープンソースプロジェクトchatgpt-webを開発しました。これにより、ExpressバックエンドとVue3フロントエンドを使用して、自分のChatGPTデモウェブページを迅速に構築できます。個人のテストや友人との共有に関わらず、ローカルまたはサーバー上で実行でき、APIキーを入力するだけで即座に使用可能です。AIツールを自作したい開発者や技術ユーザーに向けています。

Node.jsとPNPMでワンクリックでバックエンド環境をインストール

プロジェクトのバックエンドアーキテクチャはExpressに基づいており、インストールプロセスは非常にシンプルです。まずNode.js環境を用意し、次にPNPMで依存関係を管理します。一つのコマンドで完了します。この設計により、開発者はゼロからサーバーを設定する必要がなく、リポジトリをクローンした後、npm installまたはpnpm installを実行するだけで準備が整います。他のChatGPTパッケージツールと比べて、ここでは軽量なデプロイを強調しており、無関係な依存関係を引き込むことはありません。VPSやローカル開発機に適しています。

GitHub - Chanzhaoyu/chatgpt-web: 用 Express 和 Vue3 搭建的 ChatGPT 演示网页 · GitHub 介面截圖
GitHub – Chanzhaoyu/chatgpt-web: 用 Express 和 Vue3 搭建的 ChatGPT 演示网页 · GitHub 官方頁面截圖

OpenAI APIキーを入力してバックエンドサービスを起動

構築が完了したら、最も重要なステップはOpenAI APIキーを入力することです。プロジェクトはシンプルなconfigインターフェースまたは環境変数設定を提供しており、公式ChatGPT APIに簡単に接続できます。バックエンドサービスが起動すると、指定されたポートを監視し、すべての会話リクエストを処理します。このステップにより、安全性が確保され、キーはローカルにのみ保存され、漏洩することはありません。APIのクォータがあるユーザーにとって、ここでの方法はブラウザのコンソールを直接使用するよりも安全であり、カスタムプロンプトテンプレートもサポートしています。

フロントエンドはVue3で構築されており、インターフェースはシンプルで直感的です。チャットウィンドウは即座に使用可能です。ブラウザを開いてlocalhostにアクセスすると、馴染みのあるChatGPTスタイルの対話ボックスが表示され、メッセージの履歴とリアルタイムの応答をサポートしています。Vue3のレスポンシブデザインにより、インターフェースはスムーズで、デスクトップでもタブレットでも適切に表示されます。純粋なフロントエンドソリューションと比較して、このフルスタックアーキテクチャはCORSの問題を回避し、安定性が高まります。

ブラウザから直接フロントエンドチャットルームにアクセス、履歴の閲覧をサポート

フロントエンドのデプロイも同様に簡単で、Vue3 CLIを使用するか、静的ファイルを直接ビルドし、その後Expressを介してサービスを提供します。ユーザーはブラウザに質問を入力し、ChatGPTと対話することができ、多段階のインタラクションとコンテキストメモリをサポートしています。プロジェクトにはナビゲーションメニューと保存された検索機能も内蔵されており、履歴の対話やプロンプトのフォルダ管理を迅速にフィルタリングできます。AIモデルを頻繁にテストする開発者にとって、このインターフェースは公式ウェブサイトよりもカスタマイズが容易で、メッセージスタイルの調整やプラグインの追加が可能です。

さらに、リポジトリは完全なドキュメントナビゲーションとコミット履歴を提供しており、ユーザーは更新を簡単に追跡できます。最新バージョンではパフォーマンスが最適化され、API呼び出しの遅延が減少しました。全体として、chatgpt-webは単なるデモツールではなく、必要に応じて機能を追加できる拡張可能なフレームワークです。他のLLM APIとの統合などが可能です。

オープンソース貢献に優れ、多プラットフォームでの迅速なデプロイをサポート

GitHubのオープンソースプロジェクトとして、chatgpt-webはコミュニティの貢献を奨励しており、フォルダーとファイルの構造が明確で、フォークや修正が容易です。新機能の追加やバグ修正など、プルリクエストを通じて参加できます。このコミュニティ指向の設計により、ツールは活発に更新され続けます。香港やアジアの開発者にとって、PNPMとNode.jsのサポートは、一般的なLinux VPS上で数分でオンラインにでき、複雑なDevOpsは不要です。

総じて、このプロジェクトは自作のChatGPTインターフェースの敷居の問題を解決し、最小限のコードで最大の可用性を実現します。OpenAI APIキーをお持ちであれば、ぜひデプロイを試してみて、ローカライズされたAI対話の便利さを体験してみてください。

製品名:chatgpt-web
公式ウェブサイト:https://github.com/Chanzhaoyu/chatgpt-web

Nakumura
Nakumura
関連サイト:中文版 / TechRitualThe Base Principle