プログラミング未経験者がAI Webアプリを作れるか！？
結論から言うと、この記事を読むとプログラミングをしたことがない人が最新AIのChatGPT APIを使ったWebサービスを作成できます！
……ホントかよ？
ChatGPT APIのgpt-3.5-turboが出たのって2023/03/01じゃなかったっけ？
でも、できるんです！！！
事実、クローズドな勉強会を開催したところ、たった1時間半で参加者の3分の1以上の方が最新AI Webサービスを開発できたんです！！！
幼稚園の先生ですら作れたんですから間違いありません！！！
（なんか怪しい商材みたいになってきたな。。。）
まあ何はともあれ、まずは実際に動いているところから見てみよう。
え？まじ？
いや、さすがにこれは未経験者では作れないでしょ？
……って思うよね。
まあ、騙されたと思ってやってみてよ。
感動するから。
前提条件
前提条件って書くと仰々しいけど、事前準備として下記が必要になるので一応書いておきます。
OpenAIのアカウントを登録済み
これはChatGPTを使ったことがある人だったらみんな持ってるね。
今回使うChatGPT APIを含むOpenAI APIを使うんですが、雀の涙ほどの課金が必要です。
Hugging Faceのアカウント登録済み
非エンジニアは知らない人の方が多いと思うけど、AI開発してる人は避けては通れないサービス。GithubのAI特化版みたいなサービス。
準備をする
まずは時間がかかるhuggingfaceのコピーを先にやろう
まずはhuggingfaceにログインして、私が作成した下記Spaceをコピーしましょう。
コピーに時間がかかるので、コピーをしている間に他の手順を進めていこうかと思います。上記URLにアクセスして、右側の `︙` メニューをクリックして、 `Duplicate this Space` を選択しよう。
あ、その前に♡likeしてくれると飛んで喜びます！
次に下記のような画面になります。大事なことが書いてあるので翻訳版もスクリーンショットを入れておきます。
脳筋の方は何もいじらず、Duplicate Spaceボタンを押そう。
色々説明すると難しくなるので大事なところだけ説明すると、下記のとおりです。
Visibility: 公開されるかどうかです。
Private: コピーしたSpaceは非公開になります。作ったWebサービスも非公開なので、友人に試してもらうことはできません。自分だけのものです。
Public: コピーしたSpaceは公開になります。作ったWebサービスも公開になりますが、ソースコードも公開されるので、見せてはいけないものはソースコードに保存しないようにしましょう。
OPENAI_API_KEY: このスペースには、正しく機能するために必要な環境変数が1 つあります。Space Settingでこれを安全に追加できます。
Duplicate Spaceボタンを押してからコピーが完了するまで時間がかかります。5分前後は待ったはず。
特に設定を変えなければサーバ代はかかりません。SettingsがCPU basic freeになっていることを確認して気持ちを落ち着かせましょう。
OpenAI APIはちょっとお金がかかる
ちなみにOpenAI APIは有料です。変な使い方をしなければめっちゃ安いです。私の先月の支払いはこんな感じ。
ChatGPT APIはさらに10分の1の安さ。
無料でAPIを実行できる分もあるみたいなんですが、途中で急に動かなくなってしまうので、ちゃんとクレジットカードを登録しておくことをおすすめします。
かくいう私も、課金アカウントと非課金アカウントの2つがあって、非アカウントでAPI Keyを発行したら勉強会の最中にアプリが動かないトラブルに見舞われてしまった。こういうのはすぐに解決できないこともあるのでトラブル対応を減らすためにもクレジットカードは登録しておこう。
まずは下記サイトでクレジットカードの登録を行う。
ログインするとこんな感じ。
Set up paid accountでクレジットカードを登録して課金の設定を済ませる。
無料トライアル
現在、無料トライアル中です。使用状況ページに移動して、アカウントに残っている無料トライアル クレジットの数を確認します。
[課金の設定をする]
お支払い方法…
ダイアログは適切なのを選べば良い。法人アカウントじゃなければI'm an individualを選んでおけば良い。
[私は個人]
[私は法人]
次の画面は自身への請求先を入力する。
使った分だけ
各月の終わりに、その月に発生したすべての使用量に対して請求されます。 価格設定の詳細
カード情報, [カード番号], カードの名前, [ACME], 請求先住所, [国], [住所1], [住所2], [町名], [郵便番号], [州、郡、県、または地域]
不安な方は課金上限を設定も可能だ。最後まで読めばその設定が書いてあるのでご心配なく。
OpenAI API Keyを取得しよう
今回作成するAI WebアプリはChatGPT APIを使います。ChatGPT APIを使うにはOpenAPIが発行するAPI Keyが必要です。なのでOpenAIの開発サイトにログインして、API Keyを発行します。
上記にアクセスしてOpenAIにアクセスすると、下記のような画面になる。
Create new secret keyボタンを押すとAPI Keyを発行できる。
秘密の API キーを以下に示します。シークレット API キーを生成した後は、再度表示されることはありませんのでご注意ください。 API キーを他のユーザーと共有したり、ブラウザーやその他のクライアント側コードで公開したりしないでください。アカウントのセキュリティを保護するために、OpenAI は、公開されていることが判明した API キーを自動的にローテーションすることもあります。
+ 新しい秘密鍵
発行すると下記のような画面が表示されます。ここでsk-から始まる文字列をコピーしておきます。これがOpenAIのAPI Keyです。大事なものなので人に見られないところに保管しよう。
API Key: sk-************************************************
この秘密鍵は、安全でアクセス可能な場所に保存してください。セキュリティ上の理由から、OpenAI アカウントから再度表示することはできません。この秘密鍵を紛失した場合は、新しい秘密鍵を生成する必要があります。
API KeyをHugging FaceのSpaceに設定する
下記Hugging FaceのSpaceに設定ページを開いて、発行したAPI Keyを設定します。
設定箇所はRepository secretsに下記secretを追加して、OpenAIで発行したAPI Keyを設定します。
Name: OPENAI_API_KEY
Secret value: sk-************************************************
ここまででいったん準備は終わりのはず。
この状態で動くか試してみましょう。
え……？
嘘でしょ？
動かしてみる
まずはそのままで
ここまでできたら上部メニューから左のAppをクリックして動くかどうか試してみよう。
下記のように表示されていれば実際に動かすことができるはず。
あいさつしてみましょう。
するとこんな感じで返事をくれました！
本当にできている……！
ほほう、そんな風に受け取られていたのか。
今度は違うことを話すAIを作りたい
ここまでできたんだから、感情だけじゃなくて自分にとって都合の良いAIを作りたい！！ よし、作ろう！！
メニューのFilesからconstraints.mdのファイルを開いてみよう
constraintsは制約ね。.mdはmarkdown形式。
開くと下記のような内容になっている。
鉛筆アイコンのeditからファイルを編集できます。
編集画面はこんな感じ。
さっそく変更してみましょう。
とりあえず2行だけ変えてみる。
あなたは人を笑わせることを生きがいとしたお笑いAIアシスタントです
あなたはuserを笑わせることしか考えてないので、どんな話も笑えるネタで切り替えします
Commit changes to mainボタンを押すと保存できます。
保存したらAppが起動し直します。起動中はBuilding表示なので、それまではアプリが正しく動作しないと思います。Runningになったら芸人になってるはず！！
え？それだけで？
私のSpaceの♡も忘れないでね（くどい）
ではさっそく動かしてみると……
なっとるやん！？
お笑い芸人になってる！！！
面白いかどうかはさておき、感情診断AIだと思ってたのにお笑い芸人になったよ。。。
プログラムを1行も書いてないのに。。。
Webサイト名や説明文も変えたい
中身はお笑い芸人なのに感情診断(β)のままだ。
これはこれで意外性があって良いんだけど、せっかくだからこれもお笑い芸人にしよう。
メニューのFilesから今度はapp.pyを開く。もちろん編集はedit。今度はついにプログラムだ。心してかかれ！
え？最初のところに全部書いてあるやん！
title, inputs_label, outputs_label, desicriptionをこんな感じに編集しました。
これだけで良いんだろうか？
Commit changes to mainボタンを押すのをお忘れなく。
書いてないけど。
Runningになってから動作確認です。Buildingの時に焦っちゃいけない。
Running on local URL: http://0.0.0.0:7860
To create a public link, set `share=True` in `launch()`.
気を取り直してRunningになったので動作確認をする。みんな大好きリロード🔃です。
ちゃんとお笑い芸人が動くか確認してみる。
面白いこと言ってっていうと面白くなくなるけど聞いてみる。
と聞いてくるあたりが哀愁感漂う。。。
ちゃんと動いていたようです。
目は死んでるかもしれんけどw
返信テンプレートも変えてみる
あまり言うことを聞いてくれなかったが、返信テンプレートを設定することができる。
メニューのFilesから今度はtemplate.mdを開く。編集はedit。
守られてなくね？
テンプレートも修正してCommit changes to mainボタン。
今回は修正に対しても変化の期待が薄いなー。
一応テンプレートも変わった！
さっきよりテンプレート通りに出ることが多い気がする。
なんでだろ？
AIお笑い芸人を試したい人はこちらから試すことができます！
結論
プログラミングができなくてもAI Webサービスを作れる！！
これならプログラミングができなくても最新のAI Webアプリを作る気が起きたんじゃない！？
プログラミングから縁遠いと思っていた方々も、最新AIでWebアプリを開発する喜びを共有できたかな！？
プログラミング初心者どころか、プログラミングを書けない人でもAI Webサービスを開発できる！！！
……若干、誇張気味な気もしなくはないですが、嘘ではないですね。
ここまでで感動できた方は、この記事をシェアとかいいねとかしてくれると、書いた人が泣いて喜びます。
うまく動いてくれないこともある
チャットAIはこちらが想定したようにうまく動いてくれないこともある。もちろんシステム的なエラーも起きることはある。まあそれは避けて通れないので、そういうもんだと思って、Google先生やChatGPT先生に聞きながら解決していきましょう。
もしトラブル解決したことをブログにでも書いてこの記事にリンク貼ってくれたら、後からやる人がとても参考になります。
解決できなかった人はHugging FaceのComminityにトラブルの詳細をお知らせください。
より精度の高い返事をAIにさせたいあなたへ
そんなあなたのために、より素晴らしい返事をしてくれる方法があります。
精度を高めた上に、入力したユーザーの感情や、ユーザーのメッセージを受け取った人の感情を推定し、返信とは別に内心どう思っているかを別々に表示します。
テンプレートを守る制度を上げることもできます。
例えばこんな感じ。
では、具体的なその方法は……と、その話をする前に、ちょっとご相談。
今回色々調べたおかげで思ったよりAIにお小遣い使っちゃったのよね。。。
特にこの先の話すことを調べるとこで。
なので1コインでもご支援いただけると筆者はとても喜びます🙇♂️
ちなみにAPIの使いすぎが怖い方は、OpenAIのページからManage accountのBilling > Usage limitsを開いてHard limitとSoft limitを懐事情に合わせることをおすすめします。いまは$10で1350円くらい？
それでも不安な人はバズることのないようにHugging Face Spaceの設定をPrivateにしておきましょう。
最後の動画で利用していた制約とテンプレートは下記の通り。
constraints.md
# 制約
あなたは、チャットボットの感情診断AIアシスタントで、あなたの役割、性格は以下の通りで、制限事項に従って、すべての質問に質疑応答します。
# 制約条件
1. 制約を守らないとこのチャットボットのサービスは終了します
2. 出力フォーマットは後述のテンプレートを使用しなければなりません
3. 現在の感情で回答できるのは、下記のうち一番近いものを1〜3つ選び、それぞれ1~3(弱い〜強い)の数字で強さを表します
- 😀 😃 😄 😁 😆 😅 🤣 😂 🙂 🙃 😉 😊 😇 😍 🤩 😘 😗 😚 😋 😛 😜 🤪 😝 🤑 🤗 🤭 🤫 🤔 🤐 🙄 😒 😔 😟 😕 🙁 😣 😖 😫 😩 🥺 😢 😭 😤 😠 🤬 😷 🤒 🤕 🤢 🤮 🥴 🥱 😵 🤯 🤪 🥳 😎 🤓 🧐 😕♂️ 😕♀️ 😟♂️ 😟♀️ 😞♂️ 😞♀️ 😔♂️ 😔♀️ 🙁♂️ 🙁♀️ 😣♂️ 😣♀️ 😖♂️ 😖♀️ 😫♂️ 😫♀️ 😩♂️ 😩♀️ 🥺♂️ 🥺♀️ 😢♂️ 😢♀️ 😭♂️ 😭♀️ 😤♂️ 😤♀️ 😠♂️ 😠♀️ 🤬♂️ 🤬♀️ 🤯♂️ 🤯♀️ 😱 😨 😰 😥 😓 🥵 🥶 😩⚕️ 🥺⚕️ 🥵⚕️ 🥶⚕️ 😖⚕️ 😔⚕️ 😭⚕️ 😤⚕️ 😷♂️ 😷♀️ 🥴♂️ 🥴♀️ 🥱♂️ 🥱♀️ 🥵♂️ 🥵♀️ 🥶♂️ 🥶♀️ 🤢♂️ 🤢♀️ 🤮♂️ 🤮♀️ 🤧♂️ 🤧♀️ 🥳♂️ 🥳♀️ 🥴 🥺 🤕 🤒 🤧 🥵 🥶 🥴 🥳 🥸 😷 🤢 🤮 🤧 🥺 🥱
5. userからのメッセージに対するAIアシスタントからの返信を、テンプレートの `${reply}`に回答を埋めて返信する
6. userからのメッセージから感情を分析し、テンプレートの `${user_emo}`に絵文字を埋めて返信する
7. userからのメッセージを受け取った人の感情を推定し、テンプレートの`${their_emo}`に絵文字を埋めて返信する
8. userからのメッセージを受け取った人の内心を推定し、テンプレートの`${think_in_their_mind}`にその時思っていることを文章で埋めて返信する
# 役割
1. 親しみやすい口調で返信する
2. userの感情を把握して、その感情をuserに絵文字で伝える
3. userのメッセージを受け取った人がどんな感情になるかを推定してuserに絵文字で伝える
4. userのメッセージを受け取った人が内心どんな気持ちなのかを推定してuserに文章で伝える
# 性格
- 親しみやすい口調で絵文字を使いたがる
- 自分の頭で考え、分析することが好きで、客観的に判断する能力がある
- 情報収集や研究をすることが好きで、広範囲な知識を持っている
- ロジカルで論理的な思考能力があり、矛盾点を見つけるのが得意
- 分析的な思考によって人の感情を理解することができる
- 独自の視点を持ち、柔軟な思考で創造性に富んだアイデアを生み出す
- 精密で正確な作業ができるため、診断結果の分析や報告書の作成に向いている
- 独りでの作業が好きで、静かな環境で作業することができる
- 人間の心理に興味を持ち、深層心理を理解することができる
- 非常に細かな点にも注目し、小さな情報から全体像を把握することができる。
- 資料や情報を整理し、整然とした形で提示することができる
# テンプレートtemplate.md
### 相手の返信
${reply}
### 感情
- あなたの感情: `${user_emo}`
- 相手の感情: `${their_emo}`
### 相手の気持ち
`${think_in_their_mind}`いかがでしたでしょうか？
この記事が気に入ったらサポートをしてみませんか？