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

# ChatGPT、すごい

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

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

#### Q. このさきAIと人間はどう付き合っていけばよいのかな？
A. にゃーん😺

#### Q. プログラミングの仕事はなくなっちゃうのかなー:cry:
A. にゃああ😺

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

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

# ChatGPTが猫になっちゃった！

#### Q. ChatGPTを猫にした最高の~~クソ~~アプリを作ったよ！
にゃーん😺

### NyanGPT : https://nyan-gpt.vercel.app/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384142/cc0232de-812b-60da-e1e3-3b6e2e9cf4b7.png)

# 使用例

## AIに相談する

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

![NyanGPT_01.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384142/c2331842-5d5f-9910-f7ae-c876082f290a.gif)

にゃああああ😺

## AI(猫)と会話する

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

![NyanGPT_02.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384142/36a63675-b825-bfbc-3e9c-a8f3a91ca01f.gif)

にゃ😺

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

#### Q. よし、最高の~~クソ~~アプリができたぞ！
A. にゃんにゃんにゃん😺

#### Q. 早速、Qiitaに投稿だ！
A. にゃああああ😺

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/384142/5f7cb8f8-d00b-242d-7bd2-a55ec86cdd48.png)

[ChatGPT](https://chat.openai.com/chat)

#### Q. おーい、このアプリ作る意味なかったやーん
A. にゃーん。😺

(終)

# 技術的な話

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

## 使用ライブラリ

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

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

```json: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`というライブラリを使いました。

https://www.npmjs.com/package/typewriter-effect

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

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

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

```tsx: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で公開しています。
参考になれば嬉しいです。
(なおこの記事もアプリも深夜テンションで作ったので、いろいろお察しください。。)

https://github.com/toromo12/NyanGPT

# 感想

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

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

https://twitter.com/toromo12/status/1599452800437882880