見出し画像

【wordpress改造】イケメンと会話できるチャットアプリの作り方（コピペコード付）

DIYプログラミング

stable diffusionで大量生産した筋肉×イケメン画像の活用法を考えていた所、twitterのフォロワーさんからヒントを得ましてイケメンにお悩み相談できる女性向けチャットボットアプリを思い付きました。

現在はもう少し洗練されたデザインになっておりまして、着手から5日程度で作ってとりあえず公開したサイトがこちら。

結構遊んでくれているみたいでおもろい笑

割と簡単に作れて色々応用できそうな感じだったので、今回は作り方をここにまとめておこうと思います。

記事が面白かったらフォロー&♥よろしくお願いしますm(_ _)m


材料

今回のアプリは下記の材料で作ってみました。

  • stable diffusion

  • chatGPT API

  • wordpress

  • cocoon

  • どっかのサーバー（wordpressが動けばどこでも可）

まず構築の自由度が何より欲しかったので、リリースの際に何者にも審査不要なwebアプリで作るという所から材料の選定がスタートしています。

webアプリの作り方は千差万別ですが、僕は「wordpressを改造すれば何でも早く作れる教」の信者ですので、汎用性最強テーマcocoonを入れて改造する事にしました。

今回は下の方にコピペコードを掲載してますんで誰でも作れるようになってますが、wordpressをグリグリ改造するにはPHPの知識が不可欠です。入門書を1冊手元に置いておくのをオススメします。

仕組み

中身は全然シンプルでstable diffusionで作った画像の下に、chatGPTとくっ付けたチャットボットを置いているだけです。

工夫点はchatGPT APIにはroleを指定する事でbotにキャラ付け出来るので、画像に合った名前とシチュエーションを与える事でbotが同僚/社長/彼氏っぽく振舞うようになりました。

当初の予定ではイケメンの画像も静止画ではなく、チャットのやり取りを感情解析してシチュエーションに合った表情に変化させる所までやりたかったんですが、人物画像を自然に喜怒哀楽に応じた表情変化させるサービスやツールなどが見つけられませんでした。

pythonで機械学習を駆使すれば出来そうな気がしますが、アプリのリリースが遅くなってしまうので今回は見送る事に。

作り方

wordpressでチャットボットを構築する際のUIを多少工夫しましたが、基本的には難しくないと思います。

キャラクター画像

今回の構築でstable diffusionの役割は対話時の相手画像というだけですので、AIで作らなくても自前で画像があればそれで問題ありません。

stable diffusionのセットアップについては以前記事を書いたので、そっちを読んでみて下さい。

chatbot

今回のチャットボットにはchatGPT APIを使っているのでopenAIのアカウントが必要です、登録手順についてはググればいくらでも丁寧な解説記事が出てくるのでここでは省略しますが、下記の記事が分かりやすいと思います。

chatGPT APIが使えるようになったら後は簡単で、wordpress内のエディタから「html/css/functions.php/javascript.js」の4つを弄るだけで実装可能です。

コピペコードは下記に記載してますんで、すぐに作りたい方はご確認下さい。

コスト

今回はstable diffusionとchatGPT APIを使って実装しているので多少お金がかかっています、実際にいくら請求されるん？と気になる方へ僕の支払い画像を添付してみました。

画像生成代（stable diffusion）

stable diffusionに関してはスペックの高いPCを持っていればローカルでゴリゴリ動作できると思いますが、僕はgoogle colabに課金してstable diffusionを使っていたので月に2,000円くらい払っています。

ユニット単位での課金/消費なので、画像1枚いくらかという分かりやすい指標で表現するのが難しいんですが、ざっっっくり計算してみました。

上記のフォルダ1個毎に50-60枚ずつ画像が入ってるので24フォルダ×50枚=1,200枚として、6月には2回課金して1,179円×2回=2,358円なので、2,358円/1,200枚 =1.965円/枚となり、ざっくり1枚辺り2円で作れたという計算になります。

チャットボット代（chatGPT）

chatGPT APIは従量課金制のサービスなので使った分だけお金がかかる仕組みになっており、基本は4つのグレードに分かれ下記のような料金体系になっています（2023年7月4日）。

（モデル名 │ 最大トークン数 │ input 1,000トークン辺り │ output 1,000トークン辺り ）

■ gpt-4-32k-0613 │ 32,768 │  $0.06 │ $0.12

■ gpt-4-0613 │ 8,192 │  $0.03 │ $0.06

■ gpt-3.5-turbo-16k-0613 │ 16,384 │  $0.003 │ $0.004

■ gpt-3.5-turbo-0613 │ 4,096 │ $0.0015 │ $0.002

今回のアプリは日常会話のお悩み相談が目的なので、情報の正確性よりもレスポンスの速さと金銭的負担の少なさで、いっちゃんグレードの低い「gpt-3.5-turbo-0613」を選択しています。

じゃあ実際にどんだけお金かかるんや？というご質問には、アナリティクスとopenaiの管理画面を見て頂いた方が早いですね。実際のユーザー数と請求金額がこちら。

公開したばかりで全然人が来てませんがこんな感じのグラフに対して、請求金額がこちら。

つまり、456人が利用して$1.5くらいの請求でした。安っ！！約200円で半月も遊べてるんでむちゃくちゃコスパの良いと思ってます。

コピペコード

色々書きましたが作業自体は簡単で下記のスクリプトを張り付けて、各パラメータを自分の物に書き換えるだけで動作しますんで試してみて下さい。

ここから先は

10,783字 / 5画像
この記事のみ ¥ 300

ログイン

よろしければサポートお願いします、頂いたサポートは活動費として使用させて頂きより有意義な記事を書けるように頑張ります！