TypeScript + React + ChatGPTで誤字脱字チェックやってみた

はじめに

所謂ベンチャーでフロントエンドエンジニアをやっております。白色と申します。
２回目の投稿となります。

概要

• ChatGpt4.0でどれくらい文章校正ができるのか試したくなったので、まずは簡単な誤字脱字チェックを作ってみました。
• 今回デザイン生成やテストコードは省略しています

コード

https://github.com/fuuki12/chatgpt_typescript02/tree/main/cahtgpt_typescript

誤字脱字をどうやるか

• 色々と試してみたのですが、国語のテストなどである、読解問題を解いてもらうというシチュエーションに問題をすり替えてみると、上手く誤字脱字チェックを行ってくれました。
• token料金が多くかかってしまうので、今回はtrue,falseのみ返却するようにしています
• 素直に質問をすると嘘をつかれます

コードの説明

ask.ts

import { Configuration, OpenAIApi } from "openai";
import { Result } from "./util/Result";

// APIKeyを.envファイルから取得
const configuration = new Configuration({
  apiKey: import.meta.env.VITE_OPENAI_API_KEY,
});
const openai = new OpenAIApi(configuration);

// 実際に質問を行う関数for gpt-4
export async function ask(
  content: string,
  model = "gpt-4"
): Promise<Result<String, Error>> {
  // 画面に入力された文字を取得
  const text = content;
  // 質問文字列を構築
  const question = `
  日本語の読解について質問があります。
  [text]を読んで、質問への答えを書いてください。
  [text]から質問に対する答えを推測できない場合は、「わかりません」と答えてください。

  [text]
  次の文章に誤字脱字があれば「true」、なければ「false」を答えてください。
  「${text}」
  `;
  try {
    // apiを叩く 
    const response = await openai.createChatCompletion({
      model: model,
      messages: [{ role: "user", content: question }],
    });
    // 回答を取得
    const answer = response.data.choices[0].message?.content;
    return Result.Ok(answer);
  } catch (e) {
    return Result.Err(Error());
  }
}

App.ts

import { useState } from "react";
import { ask } from "./ask";
import { Result } from "./util/Result";

function App() {
  const [name, setName] = useState<string>("");
  const [error, setError] = useState<boolean>(false);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    console.log(`submit`);
    e.preventDefault();
    const result = await ask(name);
    result.match({
      Ok: (v) => {
        setError(false);
        if (v === "true") {
          setError(true);
        }
        Result.Ok(v);
      },
      Err: (e) => Result.Err(e),
    });
  };

  return (
    <div className="App">
      <h1>ChatGPT Valied</h1>
      <form onSubmit={handleSubmit}>
        <label>
          <p>入力間違いを指摘してくれるよ</p>
          <textarea
            rows={10}
            name="name"
            placeholder="こんにちは、私の名前はスレッタです。"
            value={name}
            onChange={(e) => setName(e.target.value)}
          />
        </label>
        {error ? <p> 入力間違いがあります</p> : <p>正しい</p>}
        <div>
          <input type="submit" value="Submit" />
        </div>
      </form>
    </div>
  );
}

export default App;

実際に触ってみる

• まとめ
  色々と触ってみたのですが、機能を高級にするのではなく、小さいスコープで得意な作業をさせるのがChatGPTを有効に使う秘訣なのかもしれません。