ようやく画面ができたので、障害物を村人に置き換えて喋ってみたいと思います。

とりあえず画像生成でドットの村人を作ってみます。一瞬でできたので切り取って配置します。

初期で読み込み、

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)

うまくいきました！ということで、戻ってきたテキストをダイアログボックスにも表示してみます！