OpenAI API + Next.jsを活用して長文を要約する方法

長文を短く、明瞭に要約するウェブサービスは、ビジネスから教育まで、幅広い分野で非常に役立ちます。今回は、私たちがOpenAI APIを活用して開発した長文要約ウェブサービスの構築プロセスを紹介します。

長文要約AI

サービスの特徴

この長文要約ウェブサービスは、AI (特にGPT-3.5) を使用して、ユーザーから提供された長文を短く、かつ明瞭に要約することが可能です。

• 大容量テキストの対応: 一度に最大20,000文字までのテキストを処理することが可能です。これにより、ユーザーは大量の情報を一度に短時間で消化でき、効率的に情報を把握することが可能になります。

• プライバシーの保護: ユーザーは自身のAPIキーを使用してサービスを利用することができます。このAPIキーはサーバーに保存されることはありません。ユーザーのプライバシーとデータの安全性を最優先に考えています。

• レスポンス時間の配慮: テキストの量によっては、要約結果を得るのに数十秒かかる場合がありますが、我々のサービスは最短時間での結果提供を心掛けています。

サービスの構築：OpenAI APIの活用

以下に、OpenAI APIを使用してウェブサービスを構築した具体的な手順を紹介します。

ステップ1: OpenAI APIの設定

まず初めに、OpenAIのウェブサイトからAPIキーを取得します。次に、APIキーを用いてOpenAIの設定を行います。

// OpenAIインスタンスにapiKeyを設定。ヘッダーにもapiKeyを設定
configuration.apiKey = apiKey;
configuration.baseOptions.headers.Authorization = `Bearer ${apiKey}`;

ステップ2: OpenAI APIの要約機能を利用

Next.jsのAPIルートを使って、ユーザーが提供したテキストを要約します。

const handler = async (req: NextApiRequest, res: NextApiResponse) => {
  if (req.method !== 'POST') {
    res.setHeader('Allow', 'POST');
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }

  const { text } = req.body;
  const { authorization } = req.headers;
  const apiKey = authorization.replace('Bearer ', '');

  // OpenAIインスタンスにapiKeyを設定。ヘッダーにもapiKeyを設定
  configuration.apiKey = apiKey;
  configuration.baseOptions.headers.Authorization = `Bearer ${apiKey}`;

const cleanedText = text.replace(/^\s*$[\n\r]{1,}/gm, '').replace(/\

n+/g, '');

  if (typeof text === 'string') {
    const summarizedText = await summarize(cleanedText);
    res.status(200).json(summarizedText);
  } else {
    res.status(400).json({ error: 'Invalid input' });
  }
};

export default handler;

const summarize = async (input: string): Promise<any> => {
  const response = await openai.createChatCompletion({
    model: 'gpt-3.5-turbo-0613',
    messages: [
      {
        role: 'user',
        content: `Summarize the highlights of the content briefly and clearly, and output a useful summary in about 300 characters. Please write in Japanese. Content: ${input}`,
      },
    ],
  });

  return response.data.choices[0].message.content.trim();
};

ステップ3: クライアントサイドでの処理

OpenAI APIのレスポンスを待つ間、サーバリクエスト時間が長くなるとサーバがタイムアウトしてしまう問題がありました。そこで、クライアントサイドでテキストをセグメントに分割し、それぞれを個別にAPIへリクエストする形に変更しました。

const handleSummarize = async () => {
  if (!apiKey) {
    alert('OPENAI APIキーが設定されていません');
    return;
  }

  if (inputText.length > inputMaxLength) {
    alert(`${inputMaxLength}文字以内で入力してください`);
    return;
  }

  if (inputText.length === 0) {
    alert('テキストを入力してください');
    return;
  }

  try {
    setIsLoading(true);
    const segments = segmentInput(inputText); // 入力テキストをセグメントに分割

    for (const segment of segments) {
      const response = await axios.post(
        '/api/tools/summarize-text',
        { text: segment },
        {
          headers: {
            Authorization: `Bearer ${apiKey}`,
            'Content-Type': 'application/json',
          },
        }
      );

      if (response.status === 200) {
        const summary = response.data;
        setSummarizedText(
          (prevSummarizedText) => prevSummarizedText + summary
        );
      } else {
        alert('要約に失敗しました。やり直してください。');
        console.error(`Error summarizing text, status: ${response.status}`);
      }
    }
  } catch (error) {
    alert('エラーがありました。やり直してください。');
    console.error(error);
  } finally {
    setIsLoading(false);
  }
};

以上が、私たちがOpenAI APIを使用して長文要約ウェブサービスを構築した方法です。このサービスは、あなたが情報を効率的に処理するための強力なツールになることでしょう。ぜひ一度、ご利用いただき、その便利さをご体感ください。

長文要約AI