ようやく画面ができたので、障害物を村人に置き換えて喋ってみたいと思います。
とりあえず画像生成でドットの村人を作ってみます。一瞬でできたので切り取って配置します。
初期で読み込み、
this.load.image('npc', 'static/npc1.png'); // 村人画像
先ほどのwallをnpcに置き換えて設定してみました。ここら辺は適当です。
// 壁や障害物の作成
var npc = this.physics.add.staticGroup();
npc.create(200, 200, 'npc');
// キャラクターと壁の当たり判定
this.physics.add.collider(player, npc);
無茶苦茶違和感なくできました。。。
ということで、この村人にLLMを接続してしゃべらせてみます。
Q.phaserで障害物をキャラクターとして設定しました、これに衝突するとウィンドウが開いて会話できますか?
はい、Phaserでキャラクターと障害物(例えば、別のキャラクターやオブジェクト)との衝突を検出し、その結果として会話ウィンドウを表示することが可能です。これを実現するためには、いくつかのステップが必要です。以下に基本的な実装方法を説明します。
ステップ1: 衝突の検出
まず、キャラクター(プレイヤー)と障害物の間で衝突を検出するためのコードを追加します。
function create() {
// プレイヤーと障害物の作成
player = this.physics.add.sprite(100, 100, 'player');
obstacle = this.physics.add.sprite(200, 200, 'obstacle');
// 衝突の検出
this.physics.add.collider(player, obstacle, onCollision, null, this);
}
// 衝突時に実行される関数
function onCollision(player, obstacle) {
// 会話ウィンドウを表示するコード
openDialogueWindow();
}
ステップ2: 会話ウィンドウの表示
衝突が検出されたら、会話ウィンドウを表示する関数を定義します。これはHTMLとCSSを使用して作成することができます。
function openDialogueWindow() {
// 会話ウィンドウのHTML要素を作成
var dialogueBox = document.createElement('div');
dialogueBox.innerHTML = "ここに会話のテキスト";
dialogueBox.style.cssText = "position: absolute; top: 100px; left: 100px; background: white; border: 1px solid black; padding: 10px;";
// HTMLドキュメントに会話ウィンドウを追加
document.body.appendChild(dialogueBox);
// 会話ウィンドウを閉じるためのイベントリスナーを設定
dialogueBox.addEventListener('click', function() {
document.body.removeChild(dialogueBox);
});
}
もちょっとアップデートしたいので、主人公が会話を入れて、それをバックエンドのシステムに投げるようにします。
Q.村人と衝突した時のウィンドウをinput要素にできますか?そして、リターンキーを押したらajaxでバックエンドにpostしたいです。
Phaserで村人との衝突時に表示される会話ウィンドウに入力要素を含め、リターンキー(エンターキー)を押したときにバックエンドへのAjaxリクエストを行うことができます。以下の手順で実装できます。
ステップ1: 入力要素を含む会話ウィンドウの作成
会話ウィンドウにHTMLの**<input>**要素を追加します。これにより、ユーザーがテキストを入力できるようになります。
function openDialogueWindow() {
// 会話ウィンドウのHTML要素を作成
dialogueBox = document.createElement('div');
dialogueBox.style.cssText = "position: absolute; top: 100px; left: 100px; background: white; border: 1px solid black; padding: 10px;";
// 入力要素を追加
var inputElement = document.createElement('input');
inputElement.type = 'text';
inputElement.style.cssText = "width: 100%;";
dialogueBox.appendChild(inputElement);
// HTMLドキュメントに会話ウィンドウを追加
document.body.appendChild(dialogueBox);
// 入力要素にフォーカスを設定
inputElement.focus();
}
ステップ2: リターンキーのイベントリスナーの設定
入力要素でリターンキーが押されたときに、Ajaxリクエストを行うイベントリスナーを設定します。
function openDialogueWindow() {
// ...
// 入力要素のイベントリスナーを追加
inputElement.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
// Ajaxリクエストを行う
sendAjaxRequest(inputElement.value);
}
});
}
ステップ3: Ajaxリクエストの実装
入力されたテキストをバックエンドに送信するAjaxリクエストの関数を実装します。
function sendAjaxRequest(inputText) {
// XMLHttpRequestを使用してPOSTリクエストを送信
var xhr = new XMLHttpRequest();
xhr.open("POST", "your/backend/url", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// レスポンスの処理
console.log("Response received: " + xhr.responseText);
}
}
xhr.send("inputText=" + encodeURIComponent(inputText));
}
次は受け取ります。
Q.フロントエンドから来たpostメッセージを受け取るflaskのコードをお願いします。
from flask import Flask, request
app = Flask(__name__)
@app.route('/your/backend/url', methods=['POST'])
def handle_post_request():
# フロントエンドからのデータを受け取る
input_text = request.form['inputText']
# データを処理(ここでは単に印刷する)
print("Received input: ", input_text)
# 応答を返す
return "Input was received successfully."
if __name__ == '__main__':
app.run(debug=True)
こちらを組み込んでみました。そうすると、javascriptのコンソールには、
Response received: Input was received successfully.
バックエンドのコンソールには、
Received input: こんにちは
優秀すぎます。。。画面はこんな感じ。
では、APIを繋いでみたいと思います。今回は自前のいいAPIがないので、OpenAIのAPIを繋いでみます。
Q.pythonでopenaiのgptのapiを叩いてそのテキストを取得したい。
OpenAIのGPTモデルをPythonで使用するには、OpenAI APIを使用します。これを行うには、まずOpenAIのAPIキーが必要で、その後、APIリクエストを行ってテキストを生成します。以下に基本的な手順を示します。
ステップ1: OpenAI APIキーの取得
1. [OpenAIのウェブサイト](https://openai.com/)にアクセスし、アカウントを作成またはログインします。
2. APIキーを生成します。これは、APIを使用するために必要です。
ステップ2: 必要なパッケージのインストール
Pythonの環境に`openai`パッケージをインストールします。これは、PythonでOpenAI APIを簡単に使用するための公式ライブラリです。
pip install openai
ステップ3: PythonでOpenAI APIを使用
以下のPythonスクリプトは、OpenAIのGPTモデルにテキスト生成リクエストを送信し、結果を取得する方法を示しています。
import openai
OpenAI APIキーを設定
openai.api_key = 'your-api-key'
GPTリクエストを作成
response = openai.Completion.create(
engine="text-davinci-002", # 使用するモデルを指定
prompt="Translate the following English text to French: '{}'", # プロンプト
max_tokens=50 # 生成するトークンの最大数
)
結果のテキストを取得
print(response.choices[0].text.strip())
このコードは、指定されたプロンプトに基づいてテキストを生成し、結果を出力します。`your-api-key`には、取得したAPIキーを設定してください。
やってみます。
どうやらちょっと仕様が古いみたいでエラーが出ますので、本家のドキュメントに飛びます。。。
https://platform.openai.com/docs/quickstart?context=python
計画変更です、こちらのコードでやってみます。
from openai import OpenAI
client = OpenAI()
completion = client.chat.completions.create(
model="gpt-3.5-turbo",
messages=[
{"role": "system", "content": "You are a poetic assistant, skilled in explaining complex programming concepts with creative flair."},
{"role": "user", "content": "Compose a poem that explains the concept of recursion in programming."}
]
)
print(completion.choices[0].message)
うまくいきました!ということで、戻ってきたテキストをダイアログボックスにも表示してみます!
大成功です。これでいろんなゲームが作れそうです。もっと複雑にする際にはもちょい計画を立ててみたいと思います。今回は、ゲームを一から作って村人を生成AIでコメント作ってもらえるようにしてみました!
生成AIでソフトウェア開発してみよう。マネージャーからエンジニアまで生成AIでやってみた。その1。
https://blueqat.com/yuichiro_minato2/d274be21-7a88-4152-abf1-a6a71b2825d0
生成AIでソフトウェア開発してみよう。実際画面を動かし始めてみた。その2。
https://blueqat.com/yuichiro_minato2/4c18109a-a51a-46b9-a62f-a26f4667eec3
生成AIでソフトウェア開発してみよう。村人とお話をしてみる。その3。
https://blueqat.com/yuichiro_minato2/f0e55640-bdb4-4931-9b80-5394c2edfd37