電子趣味の部屋

電子系のガジェットやアプリ開発等の趣味の話題を書いてます

gpt-oss-20b にブロック崩しを作ってもらう

Beelink GTR9 Proを購入してからLLMで色々遊んでます。
以前から遊んではいたのですが、あまり大きなモデルは扱えなかったので、簡単なことしかしてませんでした。

以前からコーディング性能を試すために「ブロック崩しが遊べるHTMLを作ってください」とプロンプトを指定してるのですが、今回は gpt-oss-20b で試してみました。
Beelink GTR9 Proは gpt-oss-120b でも実行できるのですが、今回は 割と幅広い環境で実行できるように、あえて gpt-oss-20b で試してます。

実行環境はLM Studioです。
モデルに openai/gpt-oss-20b を選択しました。
コンテキスト長はデフォルトだと途中で切れてしまう可能性があるため、約3倍の12249にしました。

以下のプロンプトを指定しました。

ブロック崩しが遊べるHTMLを作ってください。

出力されたソースをHTMLファイルで保存すると、そのまま実行できるようになりました。


URL : https://www.uosoft.net/blog-parts/block.html

この画像をクリックすると、別タブで実際のHTMLファイルを表示することができます。
ソースは難読化等の加工はしていないので、ブラウザの機能のソースを表示で見ることができます。

このままでは味気無いので、色を付けてみました。
次は以下のプロンプトを指定しました。

以下の修正をして作り直してください。
ブロックの行毎に異なる色にする。
ボールの色は白。
バーの色はシルバー。

ただ「修正をしてください」と指定すると、修正部分のみ出力されることがあったので、「作り直してください」と指定してます。



URL : https://www.uosoft.net/blog-parts/block2.html

こんな感じでカラー表示されました。

今までローカルで実行できる色々なLLMのモデルで試してましたが、出力されたソースを何も修正無しでそのまま実行できたのは初めてでした。

これまで、ChatGPTや生成APIでのAIコーディングサービスを色々試しましたが、無料の範囲内では快適でなかったり、遊んでるうちにトークン上限に引っかかったりしてました。
もっと自由に快適に使いたいためローカルLLMに手を出しましたが、gpt-ossがリリースされたことにより、コーディング目的でもやっとまともに使えるようになったと感じました。