Gemini Artboard — Gemini 3.1 Pro向けクリエイティブコーディングプレイグラウンド

AI/ML
Gemini Artboard — Gemini 3.1 Pro向けクリエイティブコーディングプレイグラウンド

Gemini Artboard — Gemini 3.1 Pro向けクリエイティブコーディングプレイグラウンド

このリポジトリは「Gemini Artboard」と呼ばれる、Gemini 3.1 Proを活用した自己完結型のクリエイティブコーディングプレイグラウンドです。ユーザーがテキストでビジュアルの説明を書き込むと、Geminiがその説明に基づいた描画用コードを生成し、ブラウザ上で即座にレンダリング（60fps想定）できます。反復プロンプトで作品を進化させたり、AIが生成したコードをその場で実行して視覚表現を確認するインタラクティブな体験を提供します。READMEにはAI StudioやVertex AIのAPIキー取得を促すバッジもあり、クライアント側での直接呼び出しやAPI連携を想定した設計がうかがえます（APIキー運用の注意は必要）。

https://github.com/Shubhamsaboo/gemini-artboard

概要

Gemini Artboardは「Describe a visual, watch it come alive.」をコンセプトにした、Gemini 3.1 Pro対応の小規模なクリエイティブコーディング環境です。ブラウザ上のシンプルなHTMLファイルで構成され、ユーザーが自然言語でビジュアルを記述すると、Geminiが対応する描画コード（JavaScript + CanvasやWebGL等）を生成して即座にレンダリングします。実行は60fpsを想定したアニメーションループで行われ、フォローアッププロンプトによりコードを反復改良するワークフローが可能です。READMEにはAI StudioやVertex AIのAPIキー取得リンクがあり、実際のAPI連携を前提とした利用が想定されています。

GitHub

リポジトリの統計情報

  • スター数: 11
  • フォーク数: 2
  • ウォッチャー数: 11
  • コミット数: 4
  • ファイル数: 3
  • メインの言語: HTML

主な特徴

  • 自然言語の説明からGeminiが描画コードを生成し、ブラウザで即時レンダリング
  • 60fps想定の滑らかなアニメーション表示（requestAnimationFrameを利用する想定）
  • クライアント側で完結する自己完結型プレイグラウンド（シンプルなindex.htmlで動作）
  • AI Studio / Vertex AIとの連携前提のデザイン、APIキー取得バッジを同梱

技術的なポイント

Gemini Artboardは非常にシンプルなファイル構成ながら、いくつか技術的に注目すべきポイントがあります。まず「自然言語 → 実行可能なビジュアルコード」という変換パイプラインがコアで、Gemini 3.1 Proに対してプロンプトを送り、返ってきたコードをクライアント側で受け取り実行するフローが想定されます。ブラウザ側のレンダリングはCanvasやWebGL、あるいはアニメーションフレームを用いたループ（requestAnimationFrame）で60fpsを目標に描画されます。

設計上は「自己完結」とあるため、index.html内でAPI呼び出しやレスポンスの受信・評価（evalやFunctionによる動的実行）を行う構成が想定されますが、これはセキュリティ面で注意が必要です。外部から生成されたコードをそのまま実行する場合、サンドボックス化（iframeのsandbox属性やContent Security Policyの適用）、入力プロンプトのフィルタリング、最小権限のAPIキー管理など対策が必須です。READMEにAI Studio／Vertex AIのバッジがあることから、Googleのサービスを介したモデル呼び出しを想定し、APIキーはクライアント格納ではなくサーバー経由で安全に発行・リフレッシュする運用が望ましい点も重要です。

また、インタラクティブなフォローアップ（ユーザーが追加プロンプトを投げてコードを改良する流れ）では、差分の反映や状態保存の仕組みがUXの鍵になります。シンプル実装では生成コードを置き換えて再実行する形になりますが、より洗練された実装ではシリアライズ可能な状態管理（シーンのパラメータをモデルに渡す、バージョン管理）や、実行の安全性を高めるためのランタイム制限（APIで生成するコードの実行時間／描画ループの制御）を入れることが考えられます。最後に、ファイル数が少なくHTMLベースのため、拡張や学習用途に向いており、プロトタイピングやデモ展示に適した設計と言えます。

プロジェクトの構成

主要なファイルとディレクトリ：

  • README.md: file
  • gemini_artboard.png: file
  • index.html: file

まとめ

シンプルかつ即時フィードバックが得られる、Geminiを利用した実験的なビジュアル生成プレイグラウンド。

リポジトリ情報：

READMEの抜粋：

Gemini Artboard - Built for Gemini 3.1 Pro

Describe a visual, watch it come alive.

A self-contained creative coding playground. Type a description, and Gemini writes visual code that renders instantly at 60fps. Iterate with follow-up prompts to evolve your creation.

Get API Key - AI Studio [![Get API Key - Vertex AI](https://img.shields.io/badge/G…