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. にゃ😺
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というライブラリを使いました。
下記の制御でもとの演出に近づけています。
- 2000から5000ms待機（待機することで考えている感を出す）
- テキストをタイピング
- 完了したら状態の更新
また、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やってます。フォローお願いします！