日本語プログラミングアシスタント (HTML対応)。AIを使ってゲームコードを自動生成するシステム。

ショートストーリー: 「東京のプログラマとAIが紡ぐゲームの世界」

東京の夜は深く、ネオンの光が街を彩る中、一人のプログラマが熱心にキーボードを叩いていた。彼の名前はタケシ。東京の先端IT企業で働く彼は、最近特別なプロジェクトを任されていた。それは、AIを使ってゲームコードを自動生成するシステムを開発するというものだった。

タケシのデスクには、最新のディスプレイと、温かい緑茶のカップが置かれていた。ディスプレイには、JavaScriptで書かれた複雑なコードと、リアルタイムで生成されるゲームのプレビューが映し出されている。タケシは、AIが生成したコードがどのようにゲームの動作に影響を与えるのか、興味深く観察していた。

プロジェクトの目標は、AIが生成するゲームコードを使用して、プレイヤーに新たな体験を提供することだった。タケシは、AIが生成するコードをJavaScriptで表現し、そのコードがどのようにゲームの動作やビジュアルを形作るのかを評価するために、日夜作業を続けていた。

ある晩、タケシはAIから送られてきたコードを確認していた。それは、スクリーン上にランダムに表示されるターゲットをクリックするシンプルなゲームのコードだった。タケシはそのコードを解析し、動作を確認するために実行ボタンを押した。

コードが実行されると、タケシの目の前にリアルタイムで生成されたゲームが表示された。ターゲットが画面にランダムに現れ、プレイヤーがそれをクリックすることでスコアが加算される仕組みだ。タケシは、AIが生成したこのコードがどれほど効率的にゲームを実行できるかに感心した。

「AIの生成力が、ここまで表現力豊かなゲームを作り出せるとは…」タケシは感嘆の声を漏らした。彼は、AIが生成したコードの計算内容やロジックが、どのようにしてプレイヤーに楽しさや挑戦を提供するのかを実感していた。

そのとき、タケシはふと、自分が以前ゲームを作っていた頃のことを思い出した。あの頃は手作業でコードを書き、細かな部分に気を配っていた。しかし今、AIが生成するコードが、より多くの表現力を持ち、プレイヤーに新たな体験を提供している。タケシは、この進化がどれほどゲーム開発の未来を変えるかを感じ取っていた。

夜が更ける中、タケシはAIによって生成されたゲームの可能性を夢見ながら、作業を続けた。「これからのゲーム開発は、もっと面白く、もっと革新的になるだろう」と心の中で決意した。タケシは、自分がこの変革の一端を担っていることを誇りに思いながら、東京の夜を見下ろしていた。

タケシの物語は、AIが生成するゲームコードがどのようにしてゲームの表現力を高め、開発の未来を変える可能性があるかを描いています。

実行結果。

Google corab GPU 使用の場合生成された Java script コードの実行はできません。生成されたコードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

ゲームに関連するHTMLとJavaScriptのサンプルプロンプトを5つ準備しました。（うまくコード生成されるかは未確認です。）

「クリックするとスコアが加算されるカウンターゲームのHTMLとJavaScriptコードを作成してください。」

「プレイヤーが動かせる簡単なキャラクターが画面に表示され、矢印キーで移動できるゲームのHTMLとJavaScriptコードを書いてください。」

「一定時間ごとに画面上にランダムに表示されるターゲットをクリックするとポイントが加算されるゲームのHTMLとJavaScriptコードを作成してください。」

「ゲーム画面上に障害物が降ってきて、プレイヤーがそれを避けるシンプルなゲームのHTMLとJavaScriptコードを生成してください。」

「簡単なクイズゲームを作成し、選択肢をクリックすることでスコアが加算されるHTMLとJavaScriptコードを作成してください。」

これらのプロンプトを使って、さまざまな簡単なゲーム機能をHTMLとJavaScriptで実装するコードを生成されることが期待されます。

簡単なゲーム機能をHTMLとJavaScriptで実装するコードを生成するためのコード。

HTMLコードの生成: プロンプトに基づいてHTMLコードを生成し、生成されたHTMLコードをそのままブラウザで実行できる形式で出力します。

サンプルプロンプト: HTMLコードの生成を促す5つのサンプルプロンプトを準備しました。

使用方法
生成されたHTMLコードをメモ帳などのテキストエディタに貼り付け、ファイルを「index.html」などの拡張子が.htmlのファイルとして保存します。その後、保存したファイルをブラウザで開けば、コードが実行されます。

# 必要なライブラリのインストール
!pip install accelerate gradio transformers

from transformers import AutoModelForCausalLM, AutoTokenizer
import torch
import gradio as gr
import re

# GPUが利用可能かどうかをチェック
device = "cuda" if torch.cuda.is_available() else "cpu"

# 言語モデルとトークナイザーの読み込み
language_model_name = "Qwen/Qwen2-1.5B-Instruct"
language_model = AutoModelForCausalLM.from_pretrained(
    language_model_name,
    torch_dtype="auto",
    device_map="auto"
)
tokenizer = AutoTokenizer.from_pretrained(language_model_name)

def generate_code(prompt):
    try:
        # プロンプトに基づいてHTMLコードを生成
        messages = [
            {"role": "system", "content": "あなたは優れたプログラミングアシスタントです。"},
            {"role": "user", "content": prompt}
        ]
        text = tokenizer.apply_chat_template(
            messages,
            tokenize=False,
            add_generation_prompt=True
        )
        model_inputs = tokenizer([text], return_tensors="pt").to(device)

        generated_ids = language_model.generate(
            model_inputs.input_ids,
            max_new_tokens=1024
        )
        generated_ids = [
            output_ids[len(input_ids):] for input_ids, output_ids in zip(model_inputs.input_ids, generated_ids)
        ]

        response = tokenizer.batch_decode(generated_ids, skip_special_tokens=True)[0]
        return response
    except Exception as e:
        return f"コード生成エラー: {str(e)}"

def extract_html_code(response):
    code_match = re.search(r'```html(.*?)```', response, re.DOTALL)
    if code_match:
        code = code_match.group(1).strip()
        return code
    else:
        return "HTMLコードが見つかりませんでした。"

def handle_interaction(input_text, sample_prompt):
    prompt = input_text or sample_prompt
    response = generate_code(prompt)
    code = extract_html_code(response)
    return response, code

# サンプルプロンプト (HTML用)
sample_prompts = [
    "1から10までの数字を表示するHTMLとJavaScriptのコードを書いてください。",
    "ボタンをクリックするとアラートを表示するHTMLとJavaScriptのコードを書いてください。",
    "リスト内の項目を表示するHTMLとJavaScriptのコードを書いてください。",
    "名前を入力して挨拶を表示するHTMLとJavaScriptのコードを書いてください。",
    "ボタンを押すと背景色が変わるHTMLとJavaScriptのコードを書いてください。"
]

with gr.Blocks() as iface:
    gr.Markdown("# 日本語プログラミングアシスタント (HTML対応)")
    with gr.Row():
        with gr.Column():
            input_text = gr.Textbox(label="入力テキスト")
            sample_prompt = gr.Dropdown(sample_prompts, label="サンプルプロンプト")
            generate_button = gr.Button("チャットの応答を生成")
            response_output = gr.Textbox(label="言語モデルの応答")

        with gr.Column():
            code_editor = gr.Textbox(label="プログラミングエディタ", lines=15)
            gr.Markdown("生成されたHTMLコードをメモ帳に貼り付けて、index.htmlファイルとして保存し、ブラウザで開いてください。")

    generate_button.click(handle_interaction, inputs=[input_text, sample_prompt], outputs=[response_output, code_editor])

if __name__ == "__main__":
    iface.launch(debug=True)