common.title

Docs
Quantum Circuit
TYTAN CLOUD

QUANTUM GAMING


autoQAOA
Desktop RAG

Overview
Terms of service

Privacy policy

Contact
Research

Sign in
Sign up
common.title

生成AIでソフトウェア開発してみよう。村人とお話をしてみる。その3。

Yuichiro Minato

2024/01/17 08:19

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

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

初期で読み込み、

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

© 2025, blueqat Inc. All rights reserved