chatty gpt

ChatGPT は ChatGPT の簡単な代替手段です

これは、OpenAI チャット完了 API (gpt-3.5-turbo、gpt-4 など) を使用して機能します。この API への (有料) アクセスが必要です。

API 経由で gpt-4 を使用すると、ChatGPT plus を使用するよりもはるかに高速で、メッセージ制限もありません。

すべてのチャットは localStorage に保存されるため、エクスポート/インポート機能を使用しない限り、他のブラウザやデバイスからチャットにアクセスすることはできません。

なぜ？

これは学習実験を目的としています。
OpenAI API を試してみたいと思いましたが、同時に、Tailwind CSS を使用してプレーンな Web コンポーネントでインターフェイスを作成するのがどれほど簡単かを知りたかったのです。
開発はできるだけシンプルにして、できればビルド手順を行わず、npm パッケージも絶対に使用しないようにしたいと考えていました。
したがって、ファイルをブラウザにロードしてコーディングを開始するだけです。
さまざまなことを試しているため、現在の構造は少し乱雑です。

これが結果です！
これはブラウザ内で GitHub ページから完全に実行され、OpenAI API を除いて外部呼び出しはありません。

残念ながら、CSS ライブラリ全体をブラウザにロードしない限り、TailwindCSS にはビルド手順が必要です。
そこで、コードを監視し、変更に応じて CSS ファイルを再構築する小さな tailwindcss CLI を実行する必要があることを受け入れました。

また、インポートを使用するには、すべてが適切な Web サイトとして提供される必要があります。つまり、 file:/// ではなく http:// です。
そのため、開発時にはこのディレクトリで小さな Web サーバー (npx http-server) を実行する必要があります。

少なくとも、これらは Webpack、Vite などを使用する場合と比較して高速です。
ビルドステップはなく、いくつかの小さな開発サービスだけです。

結論（これまで）

Web コンポーネントを使用するだけでフレームワークを回避することは可能ですが、作業が単純に楽になる前に、多くの外部依存関係は必要ありません。たとえば、Vite のようなものを使用します。
Vite は、すべての外部依存関係をローカル (ユーザーが提供) で最新の状態に保ち、ホット リロードを有効にするのに役立ちます。

Web コンポーネントを単独で使用する場合は、最新のブラウザーでのみ機能するため、作成者によってサポートされなくなったブラウザー (例: Internet Explorer、古い Chrome、Safari など) をサポートする必要がある場合は、フレームワークを購入することをお勧めします。

TODO

• チャットを削除できるはずです
• 左側のメニューでアクティブなチャットをマークします
• 新しいチャットを作成するときに、以前に使用したシステム メッセージに基づいてシステム メッセージを提案します
• チャットのリストを検索可能にします (単純なヘッダーの内容、単語の比較など)。
• モデレーション API を実装する
• アボート コントローラーを OpenAI 呼び出しに追加する
• チャットの設定（名前など）
• チャット設定への変更は、直後に反映されるようにしてください。
• 成功アクションとエラーアクションの通知を追加する
• ストリーミング応答を(再)生成する
• 最後の応答を再生成するためのアイコンまたはボタン
• ストリームが完了したとき（または動作中 - openai が使用する ... インジケーターなど）を示すインジケーターを考え出します。
• コード例にヘッダーを追加します。言語とコピー ボタン/リンクを含める必要があります (:has は Firefox では機能しません...)
• 役立つプロンプトをシステム メッセージやメッセージに挿入する方法を追加します。プロンプトエンジニアリングコースのアドバイスから始めましょう

TODOは後で / 多分

• 公式トークンカウンター (Rust ソース?) の使用を検討してください。
• いくつかのテンプレート システム メッセージを追加します (フロントエンド開発者、Go 開発者、マーケティング エキスパートなど)。
• モバイルフレンドリーにする

UI / UX TODO

• [ESC] でモーダルを閉じます
• 設定：クリア直後にデータがクリアされたことを反映する