Nano Banana Pro を使った画像生成ツール

概要
ツールの土台
主な機能
参考記事

概要

Nano Banana Pro (gemini-3-pro-image-preview) をAPIから色々試してみたく、ツール化してみました。

今回はHugging Faceも試してみたかったため、Gradioベースで作成しました。

まだ検証中で未完成な部分も多いですが、アップデートしながら勉強していきたいと思います。

アプリ、コードはHugging Faceで公開しています。

ツールの土台

Python 3.11
Gradioベース
タブごとに機能を分け、思い立った時に機能追加をしやすい構成にしました。
Gemini APIキーが必要（Google Cloud 有料課金するVertex AI APIの方）
Hagging Face
- https://huggingface.co/spaces/catnipglitch/nanobanana-editor

主な機能

画像生成（Gemini）

Text-to-Image
プロンプトから1枚ずつ生成
生成時の解像度、アスペクト比指定可能
プロンプトのテンプレート機能
プロンプトの最適化および誇張（gemini-3-pro-preview）
Google Search利用

画像生成（Imagen)

Nano Banana Proリリース前に利用していた、今回のツールのベース機能です。
Nano Banana Proの登場でレガシー化するかもしれません。
こちらには透かしのON/OFF機能などがあります。

ベーシック編集

シンプルな1回編集用のタブ。
入力画像に対して何らかの処理をプロンプトで指示します。

アップスケール
線画化
ライティング調整
など。
プロンプトにはいくつかテンプレートを用意しています。
他のオプションは画像生成（Text-to-Image）と同じです。

参照画像ベース生成

最大14枚の参照画像とプロンプトから新しい画像を生成します。

マルチターン編集

（内部の呼び出し形式として）Chat形式での段階的な画像編集を行います。
アルファチャンネル切り抜き・背景除去などの処理に対応予定です。
とりあえず実装しましたが、まだ調整中です。

その他は割愛します。

サンプル

Googleのサンプルにある検索ツールを模して、お天気中継の画像を生成してみました。
https://ai.google.dev/gemini-api/docs/image-generation?hl=ja#use-with-grounding

プロンプト改善例

正直なところ、このサンプルプロンプトではうまくいかないことが多いため、いろいろと工夫しました。

サンプルのプロンプト = 「サンフランシスコの今後5日間の天気予報を、シンプルでモダンな天気図として可視化してください。毎日着るべき服装のビジュアルも追加してください」

上記サンプルVtuberっぽいキャラクターとUIもゲームっぽくと追加した画像。これじゃない感の画像に。。

プロンプト改善版

Geminiにプロンプトを改善してもらってから流し込むことで安定しました。

キャラクターの説明は「アニメ調のかわいいお天気お姉さん」だけなのガチャです。たまにすごい組み合わせも出てきます。（ある意味顔だけVtuberの人もいるから間違っていないかも）
この最適化については別途記事で上げたいと思います。

下記プロンプトの和訳

# (和訳)
# # 前提条件
# 地域・場所: 東京渋谷スクランブル交差点
#
# # 指示
# 上記「前提条件」で指定された場所にて、テレビの天気予報番組が生中継を行っている画像を生成してください。
# Google検索を使用し、実在の最新情報を反映させること。
#
# ## STEP 1: Google検索 (データ取得)
# 指定された場所について以下の検索を行い、情報を取得してください。
# 1. 向こう3日間の天気予報 (日付、曜日、天気、最高/最低気温)
# 2. 現在の天気と適した服装
# 3. 現在時刻 (現地時間)
#
# ## STEP 2: 変数定義
# 検索結果に基づき、以下の要素を確定させてください。
# – {CURRENT_TIME}: 画像生成時点の時刻 (例: 14:35)。
# – {CURRENT_WEATHER}: 現在の現地の天候、空の明るさ、ライティング。
# – {OUTFIT_STYLE}: 気温と天気に適した、清潔感のあるキャスター風のモダンな服装。
# – {FORECAST_DATA}: 明日から3日間の天気情報。
#
# ## STEP 3: 画像生成
# 以下の要件で画像を描画してください。
#
# ### 1. テーマと構図
# – **テーマ:** 天気予報番組の生中継
# – **構図:** 現地からレポートするお天気キャスター。バストアップからウェストアップのアングル。臨場感のあるバランス。
# – **UIオーバーレイ:**
# – 左上: 時刻 {CURRENT_TIME} と番組ロゴ “NHTV” (白文字、ドロップシャドウ、サンセリフ体)
# – 右上: 赤い “LIVE” アイコンと “東京・渋谷” (白文字、日本語表記)
#
# ### 2. メインキャラクター
# – **キャラクター:** アニメ調のかわいいお天気お姉さん（Live2D/Vtuberスタイル）
# – **演技:** カメラ（視聴者）に向かってプロらしく、天気予報説明パネルを丁寧に両手で自然に持ち、親しみやすく語りかけている。
# – **服装:** {OUTFIT_STYLE} (季節感とトレンドを意識)
#
# ### 3. アイテム：天気予報パネル
# – **アイテム:** 情報が整理された天気予報パネル。**必ず日本語を使用すること。**
# – **内容:** 横並びの3つの枠。日付(曜日: 月,火など) | 天気アイコン | 最高/最低気温の形式。
# – **フォント:** 太字で視認性を高く。日本語フォント。
# – **注記:** “明日”などの文字は避け、具体的な日付を使う。
# **検索結果に基づき、日本語の手書き風ワンポイントアドバイスを「1つだけ」下部に追加すること。**
# 例:
# – 雨: “傘が必要です”
# – 晴れ: “洗濯日和です”
# – 暑い: “熱中症に注意”
# – 寒い: “暖かくしてね”
# – 強風: “強風に注意”
#
# ### 4. 背景
# – **場所:** 渋谷スクランブル交差点の風景。
# – **群衆:** 通行人は存在するが、遠景や中景に配置し、キャスターの周囲は空ける。
# – **被写界深度:** 背景の街並みと通行人は深くぼかす（ボケ味）。キャスターのみにピント。
# – **ライティング:** {CURRENT_WEATHER} と {CURRENT_TIME} を反映したリアルな環境光。キャラクターにも適用。
# **制約:** 高品質な素材。服への文字入れ禁止。