L-GPT | あなたのGPTツールのもう一つの選択肢

プロジェクト背景#

Chat GPT は長い間人気を博しており、さまざまなタイプと規模の製品が次々と登場しています。Web 開発者として、これまでに多くのフロントエンド関連のオープンソースプロジェクトを見てきた後、手を動かしたくなり🤣🤣数日考えた結果、自分でも試してみることにしました。初めの目的は以下の通りです：

技術学習：これまであまり next.js 関連のプロジェクトを作成したことがなく、Twitter で多くの大物をフォローした後、next.js が海外で非常に人気があることに気づいたので、学んでみることにしました。

視野を広げる：多くの GPT 関連のフロントエンドプロジェクトで、以前あまり理解していなかったフロントエンド技術やフレームワークが使われているのを見て、自分で実装して理解することで得られるものが多いと感じました🤩🤩

トレンドに乗る：GitHub で多くのワンクリックデプロイ可能なオープンソースプロジェクトを見ました（早起きの大物たちがこれらのプロジェクトを使ってかなりの利益を上げていることもあります🤡）、自分の API キーを使えばすぐに利用できます。他人のものを使うよりも自分で作った方が良いと思い、「私もできると思う🥶🥶」と、頑張ることにしました。

プロジェクト紹介#

L-GPT は、さまざまな AI モデルを提供するオープンソースプロジェクトで、学習、仕事、生活の効率を向上させる手助けをします。今後も新しい機能を追加していく予定です。

プロジェクトの特徴#

ワンクリックで Vercel に無料デプロイ可能
レスポンシブ対応、ダークモード
安全でオープンソース、すべてのデータはローカルストレージに基づいています
i18n 対応
Azure OpenAI サービスに対応
カスタムプロンプトの設定と使用をサポート

技術スタック#

主なフレームワーク：next.js
UI フレームワーク：radix-ui
CSS：tailwindcss
状態管理：zustand
エラー収集：Sentry

役立つ情報共有#

1. API アカウント申請#

まず、次のステップに進むには関連アカウントと API 権限を持っている必要があります。以下は、いくつかのプラットフォームのアカウント登録と申請のリンクおよびガイドです：

OpenAI：登録ページ
Azure OpenAI：申請ガイド
Claude AI：申請ページ

2. サービス接続#

以下は OpenAI 公式のサービスを例に、主に 2 つの方法があります。個人プロジェクトでは 2 番目の方法を採用しており、自由度が高く、プロキシを使用するのも便利です。

公式ライブラリを接続：openai-node

インストール

pip install openai

使用方法

import { Configuration, OpenAIApi } from 'openai';

// あなたのOpenAI APIキーを設定
const configuration = new Configuration({ apiKey });
const openai = new OpenAIApi(configuration);
const completion: any = await openai.createChatCompletion(
  {
    // 公式のストリーミング出力のタイピング効果を得るにはstreamを使用する必要があります
    stream: true,
    // 適切なgptモデルを選択します。アカウント登録が成功した後、gpt-3.5を無料で使用でき、gpt-4は申請が必要です
    model: 'gpt-3.5-turbo',
    messages: [
      {
        role: 'system',
        content: "Content",
      },
      // チャットリストの内容
      ...msg_list,
    ],
  },
  { responseType: 'stream' },
);

ドメインを通じて直接呼び出す：https://api.openai.com/v1/chat/completions

const response = 
  await fetch("https://api.openai.com/v1/chat/completions", {
    headers: {
      "Content-Type": "application/json",
      // あなたのOpenAI APIキーを設定
      "Authorization": `Bearer ${API Key}`,
    },
    method: "POST",
    body: JSON.stringify({
      stream: true,
      model: 'gpt-3.5-turbo',
      messages: [
        {
          role: "system",
          content: "Content"
        },
        // チャットリストの内容
        ...chat_list,
      ],
    }),
  });

3. ストリーム情報処理#

Chat GPT の返答には 2 つの形式があります。一つは全ての回答が完了した後に一度に返す方法で、ユーザーが長時間待たされるため、体験があまり良くありません。もう一つはストリーム情報を通じて返す方法で、タイピング効果を実現できます。

let decoderDone = false;

const handleFragment = (fragment: string) => {
  const lines = fragment.split("\n").filter((item) => item.trim());
  for (const line of lines) {
    const message = line.replace(/^data: /, "");
    if (message === "[DONE]") decoderDone = true;
    try {
      const content = JSON.parse(message).choices[0].delta.content;
      if (content) {
          console.log(content, "受信したストリーム情報")
      }
    } catch {}
  }
};

return new Promise(async (resolve) => {
  while (!decoderDone) {
    const { done, value } = await reader.read();
    decoderDone = done;
    const fragment = textDecoder.decode(value);
    handleFragment(fragment);
    if (decoderDone) resolve(true);
  }
});

4. サービスプロキシ#

いくつかの理由により、国内 IP から api.openai.com のサービスに正常にアクセスできない場合があります。他の方法で正常に使用することは可能ですが、面倒であり、アカウント停止のリスクもあります。ほとんどの人にとって、国内ネットワークで正常にアクセスできるサービスがあれば最適です。このプロジェクトでは、CloudFlareを使用して OpenAI のサービスインターフェースをプロキシし、正常にアクセスできるようにしています。

具体的な手順は、https://github.com/noobnooc/noobnooc/discussions/9 を参考にしてください。

5. エラー報告#

プロジェクトにはSentryが統合されており、同期および非同期のエラーログを迅速に収集し、バックエンドに報告することで、問題を迅速に解決できます。

環境変数の設定であなたの Sentry DSN を入力するだけで済みます。

プロジェクトデプロイ#

自分の Chat GPT サービスを持ちたい場合は、Vercel を通じてこのプロジェクトを迅速にワンクリックでデプロイできます。自分の API キーとプロキシアドレスを設定すれば、簡単に使用したり、親しい友人と共有したりできます。

ワンクリックデプロイ。このプロジェクトは以下の環境変数（パラメータ）を設定できます：

環境変数	説明	必須	デフォルト値
`NEXT_PUBLIC_OPENAI_API_KEY`	あなたの OpenAI API キー	否
`NEXT_PUBLIC_OPENAI_API_PROXY`	あなたの OpenAI API プロキシアドレス	否	`https://api.openai.com`
`NEXT_PUBLIC_AZURE_OPENAI_API_KEY`	あなたの Azure OpenAI API キー。サンプルを確認	否
`NEXT_PUBLIC_AZURE_OPENAI_RESOURCE_NAME`	あなたの Azure OpenAI API サービスリソース名。サンプルを確認	否
`NEXT_PUBLIC_SENTRY_DSN`	あなたの Sentry DSN アドレス。空の場合、エラーは Sentry に報告されません	否

もっと#

詳細については、プロジェクトの README.md をご覧ください。

参考リンク：#

皆さんの交流をお待ちしています😝

Ethan LIU