useSummary Hook

Introduction

useSummary is a custom React hook designed to simplify text summarization using the OpenAI API. This hook encapsulates the summarization logic, making it easy to integrate summarization features into your React applications.

Installation

Before using useSummary, ensure you have the required libraries installed:

npm install axios

Usage

import React, { useState } from 'react';
import {useSummary} from 'use-ai-hooks'; // Import the custom hook
 
const SummaryComponent = () => {
  const [textToSummarize, setTextToSummarize] = useState('');
  const apiKey = 'YOUR_API_KEY'; // Your OpenAI API key
 
  const { summary, error, loading, summarizeText } = useSummary(apiKey);
 
  const handleSummarize = () => {
    if (textToSummarize) {
      summarizeText(textToSummarize);
    }
  };
 
  return (
    <div>
      <h1>Text Summarization</h1>
      <textarea
        placeholder="Enter text to summarize"
        value={textToSummarize}
        onChange={(e) => setTextToSummarize(e.target.value)}
      />
      <button onClick={handleSummarize} disabled={loading}>
        Summarize
      </button>
 
      {loading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {summary && <div>
        <h2>Summary</h2>
        <p>{summary}</p>
      </div>}
    </div>
  );
};
 
export default SummaryComponent;

API Reference

Initializes the summarization hook with the provided OpenAI API key.

apiKey: string: Your OpenAI API key required to access the summarization service.

Returns an object with the following properties:

summary: string | null: The summarized text, or null if no summary is available.
error: { message: string } | null: An error object containing the error message, or null if no error occurred.
loading: boolean: A boolean value indicating whether the summarization request is in progress.
summarizeText(text: string, model?: string) => void: A function to initiate text summarization. Accepts the text to summarize and optionally the model to use for summarization.

Hook

import { useState } from "react";
import axios from "axios";
 
interface ApiError {
  message: string;
}
 
const useSummary = (apiKey: string) => {
  const [summary, setSummary] = useState<string | null>(null);
  const [error, setError] = useState<ApiError | null>(null);
  const [loading, setLoading] = useState<boolean>(false);
 
  const summarizeText = async (
    text: string,
    model: string = "gpt-3.5-turbo"
  ) => {
    setLoading(true);
    setError(null);
 
    try {
      const result = await axios.post(
        "https://api.openai.com/v1/chat/completions",
        {
          model,
          messages: [
            {
              role: "system",
              content: "You are a summarization assistant.",
            },
            {
              role: "user",
              content: `Please summarize the following text: ${text}`,
            },
          ],
        },
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: `Bearer ${apiKey}`,
          },
        }
      );
 
      const summaryText = result.data.choices[0]?.message?.content;
      setSummary(summaryText || null);
      return summarizeText;
    } catch (err) {
      if (axios.isAxiosError(err)) {
        setError({ message: err.message });
        return err;
      } else {
        setError({ message: "An unexpected error occurred" });
        return err;
      }
    } finally {
      setLoading(false);
    }
  };
 
  return { summary, error, loading, summarizeText };
};
 
export default useSummary;

useTranslation useGetImg