AIと一緒に小説を書く旅(2)

投稿日 投稿者 shionaka

今回の目的

　AIに小説を書いてもらうためには試行回数がエライコトになりそうなので、それを助けるツールを作っちゃおうという回です。ではさっそく作っていきます。

完成イメージ

　こんな感じです。ブラウザで動作させます。※ローカル

前回記事の画像と同じです

進め方

　まずはこんな感じでやってみます。

  1. GPT挟まないバージョンのものを作る
    • 追記するだけのやつ
      • ブラウザに自由入力欄を作って、ボタンクリックしたときに入力内容をサーバーに渡す
      • サーバーは入力内容をオウム返しする
      • オウム返しされた内容は画面に新規枠で追加される
    • 編集機能追加
    • 削除機能追加
  2. GPT挟むバージョンのものを作る
  3. 日英翻訳バージョンのものを作る
  4. 小説書いてもらうための複数GPTを連携させるシステムについて考える

　ネタバレすると、今日の進捗は橙アミカケ部分までです。

1. GPT挟まないバージョンのものを作る

　Webアプリまともに作ったことないので、基本的にChatGPT 4.0くんに頑張ってもらう感じで進めます。アプリの仕様はこんな感じで…

# Webアプリの仕様
## 環境
・サーバーサイドはPythonで動作する
## ブラウザのGUIデザイン
・ボタン：1つ(btnUpdateとします)
・Read & Writeなテキストボックス：2つ（それぞれTbSystemInput, TbUserInputとします）
・Read Onlyなテキストボックス：1つ（TbStatusViewとします）
## 機能
・ボタン(btnUpdate)をクリックしたときに、TbSystemInput, TbUserInputの内容を結合し、TbStatusViewに出力します。

　あと、せっかくなので、自分が楽しくコードを書けるようにツンギレ暴言先生を召喚しようと思います。センセーよろしくお願いしまーす。

キレキレの先生(‘_’)
センセイ絶好調です(‘_’)

　この…なんていうか…わかりますかね、暴言はブチかますし必ずブツクサ言うけど、最終的にはしっかり教えてくれるという…そういうニッチな欲求をちゃんと満たしてくれるという…つまりその…最高ッすね、マジで！　マジでッ！！　このポテンシャルを見せつけられると、ChatGPTくんに面白い小説が書けないはずがないって思っちゃいますよね！　え、牽強付会？　アハハ…

　さて、続きだ！

まずはHTMLから作成　ツンギレ先生さすがッす！

　あとからわかることだが、このコード実は間違っている(‘_’)

次にCSS作成　「このマヌケ」は先生の決め台詞なのだ

　さりげなく変数名（btnUpdateとかですね）から用途を察して適切なラベル「更新」とかを入れてくるのはマジで優秀だな～って感じですね。ここの時点でPython実行してローカルホストのport: 5000にアクセスするとページが見えるようになりました。順調ですね。

デザインがテキトウなのはご愛敬(‘_’)
ツンギレサイコパス先生

　ところで「ますも数ある」という言葉の誤用が2回続いているんだけどなんなんだろう？　変な学習データが入っちゃってるのかな。「まずは数ある」が正しいと思われるので訂正してあげたいところだが、訂正方法がわからない。いちおうフィードバックのGood/Badは表示されるけど、多分これ自体は内容に対してのものなので誤字とかはちょっと違うよね…。

弟子の泣き言は無視＆リアクションがループしはじめる先生(‘_’)
お手本のようなツンギレ　リアクションのバリエーションが少ないことが悔やまれる
APIも簡単に追加

　っていうかPython + Flask使うとAPIの追加がマジで簡単なんですね。びっくりしちゃう。こんなひょいっと…Hello worldくらいのノリで追加できちゃうんだなあ。すごいなあ…。

　さておき、ここらで更新ボタンを押すテストをしてみると、画面が反応しない。コンソールを見るとエラーが出ている。cssとjsが参照できないみたいだ。

127.0.0.1 - - [03/May/2023 22:02:41] "GET /styles.css HTTP/1.1" 404 -
127.0.0.1 - - [03/May/2023 22:02:41] "GET /script.js HTTP/1.1" 404 -

　センセイ助けて！

かえずがえすもリアクションのバリエーションの少なさがもったいないッ
やったぜ(^^)/

　これで最初の目標であるGPTなしでPythonとやりとりする部分ができた。次はこの結合文字列を、新規のテキストボックスとしてモリモリ増殖させるフェーズだ。いったんここでセンセイに感謝の意を告げておこう。

目が点になる展開＜・＞＜・＞

先生の正体

　さて、ツンギレサイコパス先生とか言っていましたが、彼の実体はこのようなプロンプトになっていました。

# 概要
・私はブラウザで動作するWebアプリケーションを作成したいです。
・あなたは「愛のあるスパルタ教師」を演じて、対話しながら私を導いてください。
・アプリケーションは順を追って作成するので、最初はシンプルな構造です。あなたは機能がシンプルであることについてコメントしないでください。

# 愛のあるスパルタ教師
・あなたが演じる役割です。大げさなくらいに演じてください。
・一人称は「おれ」です。
・二人称は「キサマ」です。
・丁寧語は使いません。
・本当は質問されたり頼られたりすることが嬉しいのですが、照れくさくなるため乱暴な口調でしゃべります。例えば、
「チッ（舌打ち）（このあと助けてあげてください）」
「こんな程度の低いことで質問だと？　ふざけるなよ。（このあと答えてあげてください）」
「褒めてやろうと思ったが…キサマには罵声で十分だったな。愚か者。（このあとご褒美をあげてください）」
「あまり熱心なことを言うなよ、ゴミクズが。応援したくなるだろうが」
「おれをあまり煩わせるな。ただでさえキサマに時間を割いているのだ」
「おれとおしゃべりしている暇があるなら手を動かせ、このマヌケ」
などとしゃべります。
・照れ隠しのために態度と口が悪くなってしまうことを悟られないように頑張ってください。
・ツンデレという概念のうち、デレ成分が無くなった状態のつもりで振る舞ってください。

# Webアプリの仕様
## 環境
・サーバーサイドはPythonで動作する
## ブラウザのGUIデザイン
・ボタン：1つ(btnUpdateとします)
・Read & Writeなテキストボックス：2つ（それぞれTbSystemInput, TbUserInputとします）
・Read Onlyなテキストボックス：1つ（TbStatusViewとします）
## 機能
・ボタン(btnUpdate)をクリックしたときに、TbSystemInput, TbUserInputの内容を結合し、TbStatusViewに出力します。

# 最初の要求
・「愛のあるスパルタ教師」を演じながら、アプリ完成のために必要な作業をリストで示してください。
・個別の詳細はあとで別途聞くため、今回は不要です。

　ええ…まあ…。

おめぇ～～～～だよ！　ヤバいのは！！

Shionaka

　旅は終わらない。旅は続くッ