【ネタアプリ】ChatGPTが猫になっちゃった！（NyanGPT）

ChatGPT、すごい

Q. いまAI自然言語生成モデルのChatGPTがスゴイと話題ですよね！

A. にゃ😺

Q. これからもっと進化していったら、何でもできるようになっちゃうのでは？

A. にゃ😺

Q. このさきAIと人間はどう付き合っていけばよいのかな？

A. にゃーん😺

Q. プログラミングの仕事はなくなっちゃうのかなー

A. にゃああ😺

ChatGPTがへっぽこな猫だったら

Q. AIがへっぽこな猫だったら世界が平和でいいのになー

A. しゃー😺

ChatGPTが猫になっちゃった！

Q. ChatGPTを猫にした最高のクソアプリを作ったよ！

にゃーん😺

NyanGPT : https://nyan-gpt.vercel.app/

使用例

AIに相談する

「愛とはなんですか？」
「なぜ戦争はなくならないのですか？」

にゃああああ😺

AI(猫)と会話する

「にゃん」
「にゃーん」
「にゃにゃにゃ」

にゃ😺

あれ、ChatGPTでも再現できるんじゃね

Q. よし、最高のクソアプリができたぞ！

A. にゃんにゃんにゃん😺

Q. 早速、Qiitaに投稿だ！

A. にゃああああ😺

Q. ん、待てよ？ ChatGPTでも似たようなのが再現できるんじゃね

A. にゃ😺

ChatGPT

Q. おーい、このアプリ作る意味なかったやーん

A. にゃーん。😺

(終)

技術的な話

急に真面目になって申し訳ないですが、
少しだけ技術的なお話をします。

使用ライブラリ

Reactで書いたコードをviteでビルド、Github経由でVercelにデプロイしています。
この流れはストレスがなく、開発体験が良いですね。

ライブラリは下記を使用しました。

package.json

  "dependencies": {
    "@emotion/react": "^11.10.5",
    "@emotion/styled": "^11.10.5",
    "@mui/icons-material": "^5.10.16",
    "@mui/material": "^5.10.16",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-use": "^17.4.0",
    "typewriter-effect": "^2.19.0"
  },
  "devDependencies": {
    "@types/react": "^18.0.24",
    "@types/react-dom": "^18.0.8",
    "@typescript-eslint/eslint-plugin": "^5.45.0",
    "@typescript-eslint/parser": "^5.45.0",
    "@vitejs/plugin-react": "^2.2.0",
    "eslint": "^8.29.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-react": "^7.31.11",
    "prettier": "^2.8.0",
    "typescript": "^4.6.4",
    "vite": "^3.2.3"
  }

タイプライターアニメーション

AI(猫)が返す部分は、タイプライターアニメーションとなっています。
今回は、typewriter-effectというライブラリを使いました。

下記の制御でもとの演出に近づけています。

1. 2000から5000ms待機（待機することで考えている感を出す）
2. テキストをタイピング
3. 完了したら状態の更新

また、cursor: "■",を設定してカーソルを変更することで、それっぽさを出しています。
アニメーション後にカーソルの点滅が消えなかったので、fixedTextというstateを用意しています。
アニメーションが終わった値を格納します。
値がある場合はそちらを表示して、タイプライターのコンポネントは非表示となります。

Chat.tsx

import Typewriter from "typewriter-effect";

...

      {fixedText ? (
        <div>{fixedText}</div>
      ) : (
        <Typewriter
          onInit={(typewriter) => {
            typewriter
              .pauseFor(2000 + Math.random() * 3000)
              .typeString(text)
              .callFunction(() => {
                setIsAnimating(false);
                setIsCompleted(true);
              })
              .start();
          }}
          options={{
            autoStart: true,
            cursor: "■",
          }}
        />
      )}

ソースコード

ソースコードはGithubで公開しています。
参考になれば嬉しいです。
(なおこの記事もアプリも深夜テンションで作ったので、いろいろお察しください。。)

感想

クソアプリ、いいですね。
くそという免罪符があるので、やりたいことができたと思います。
思い付きで作ったのですが、楽しかったです。
わざわざ質問を入力して数秒待った答えが「にゃ」だけなのがツボでした。(ですよね？)
またなんか作ろうと思います。

Twitterやってます。フォローお願いします！