Update app.py

app.py

@@ -26,7 +26,7 @@ MAX_API_SIZE = 1024
 
 def pil_to_base64(img: Image.Image) -> str:
     """PIL画像をBase64エンコードされたPNGデータに変換します。"""
-    buffered = io.BytesIO()
+    buffered = io.BytesIo()
     # アルファチャンネル(PNG)を維持
     if img.mode != 'RGBA':
         img = img.convert('RGBA')
@@ -131,27 +131,25 @@ async def nano_banana_completion_api(base_image: Image.Image, prompt: str) -> Im
 
 # --- メイン処理ロジック (Main Processing Logic) ---
 
-async def segment_and_inpaint(image_data_tuple: tuple, inpaint_prompt: str):
+async def segment_and_inpaint(original_image_np: np.ndarray, sketchpad_image_np: np.ndarray, inpaint_prompt: str):
     """
     アップロードされた一枚絵とブラシで描かれたマスクを受け取り、
     マスクされた領域を分割し、欠損部分をAI補完する関数。
     """
-    if image_data_tuple is None:
-        return None, None, None, "エラー: 画像がアップロードされていないか、分割したいパーツをブラシで描画してください。", None
+    if original_image_np is None:
+        return None, None, None, "エラー: 元の画像がアップロードされていません。", None
+    if sketchpad_image_np is None:
+        return None, None, None, "エラー: 分割したいパーツをブラシで描画してください。", None
 
-    # Gradioのtype="sketch"は (画像データ, マスクデータ) のタプルを返す
-    # NOTE: type="sketch"の出力構造は (元の画像 (np.array), マスク画像 (np.array)) です。
-    original_rgba_np, sketch_mask_np = image_data_tuple
-    
     # PIL Image (元の画像) を取得
-    original_image = Image.fromarray(original_rgba_np).convert("RGBA")
-    H, W = original_image.size
-
-    # --- 1. 手動パーツ分割 (ユーザーのブラシ入力に基づく) ---
+    # NOTE: Gradioのデフォルト出力はNumPy配列
+    original_image = Image.fromarray(original_image_np).convert("RGBA")
+    
+    # Sketchpadからの入力は、元の画像の上にブラシで描画されたRGBA画像 (描画部分は不透明)
+    # そのため、アルファチャンネルがマスクとして機能する
     
-    # スケッチマスクからパーツのアルファチャンネル（描画した部分）を抽出
-    # sketch_mask_np はRGBA形式で、描画された部分が不透明(アルファ値255)
-    sketch_mask_alpha = sketch_mask_np[:, :, 3] 
+    # Sketchpadの画像からアルファチャンネルを抽出（これがユーザーの描いたマスク）
+    sketch_mask_alpha = sketchpad_image_np[:, :, 3] 
     
     # ユーザーが何も描画しなかった場合のチェック
     if np.all(sketch_mask_alpha == 0):
@@ -173,7 +171,7 @@ async def segment_and_inpaint(image_data_tuple: tuple, inpaint_prompt: str):
     # 反転マスクを体パーツのアルファチャンネルとして設定
     body_with_hole.putalpha(Image.fromarray(inverted_mask_np, mode='L'))
     
-    print("--- 1. 手動パーツ分割 (Gradio Sketch Mask利用) 完了: 分割パーツと補完が必要な欠損体を作成 ---")
+    print("--- 1. 手動パーツ分割 (Gradio Sketchpad利用) 完了: 分割パーツと補完が必要な欠損体を作成 ---")
 
     # 2. 欠損領域のAI補完 (AI Inpainting)
     completed_body_part = await nano_banana_completion_api(body_with_hole, inpaint_prompt or "マスクされた領域のキャラクターの顔と身体の肌、及び下に着ている服を、元のイラストのテイストに合わせて自然に補完してください。")
@@ -244,30 +242,46 @@ with gr.Blocks(theme=theme, title="Live2D素材自動分割・補完アプリ")
         <div style='text-align: center; margin-bottom: 20px; padding: 10px; background: #E0F7FA; border-radius: 12px;'>
             <h1 style='color: #00796B; font-size: 2.5em; font-weight: 700;'>🎨 Live2D 素材 自動分割・補完アプリ 🤖</h1>
             <p style='color: #004D40; font-size: 1.1em;'>一枚絵をアップロードし、**ブラシでパーツを指定**することで、AIによる欠損部分の自動補完（Nano Banana API利用）を行います。</p>
-            <p style='color: #004D40; font-size: 1.0em;'>💡 **操作方法:** ①のキャンバスに画像をアップロードした後、**ブラシ**を使って、前髪など**分割したいパーツ**を塗りつぶしてください。塗った部分がパーツとして分離され、AIがその下の欠損を補完します。</p>
+            <p style='color: #004D40; font-size: 1.0em;'>💡 **操作方法:** ①に元画像をアップロードし、②のキャンバスにその画像が表示された後、**ブラシ**を使って、前髪など**分割したいパーツ**を塗りつぶしてください。塗った部分がパーツとして分離され、AIがその下の欠損を補完します。</p>
         </div>
         """
     )
 
     with gr.Row():
         with gr.Column(scale=1):
-            # ★★★ 修正��所: tool="sketch" を type="sketch" に変更し、互換性を確保 ★★★
-            input_image = gr.Image(
-                type="sketch", # 描画ツールを有効化し、(画像, マスク) タプルを出力
-                label="① 分割したいパーツをブラシで塗る (例: 前髪)", 
+            # ★★★ 修正箇所1: 元画像をアップロードするためのコンポーネント (描画機能なし) ★★★
+            original_image_upload = gr.Image(
+                label="① 元画像のアップロード", 
+                type="numpy", # NumPy配列として受け取る
+                height=200,
+            )
+            # ★★★ 修正箇所2: 描画専用のSketchpadコンポーネント ★★★
+            input_sketchpad = gr.Sketchpad(
+                label="② 分割したいパーツをブラシで塗る (例: 前髪)", 
                 height=400,
+                # Sketchpadにアップロードされた元画像を表示させるためのプレースホルダー
+                brush={"color": "#FF0000", "size": 20}, # ブラシ設定
+            )
+
+            # 描画キャンバスの背景をアップロード画像に設定するための処理
+            original_image_upload.change(
+                fn=lambda x: gr.update(image=x),
+                inputs=[original_image_upload],
+                outputs=[input_sketchpad],
+                queue=False
             )
+            
             inpaint_prompt = gr.Textbox(
-                label="② AI補完プロンプト（オプション）", 
+                label="③ AI補完プロンプト（オプション）", 
                 value="マスクされた領域のキャラクターの顔と身体の肌、及び下に着ている服を、元のイラストのテイストに合わせて自然に補完してください。",
                 placeholder="例: マスクされた領域を元の絵柄で自然に描き足す"
             )
-            process_button = gr.Button("③ 手動分割・AI補完を実行", variant="primary", scale=0)
+            process_button = gr.Button("④ 手動分割・AI補完を実行", variant="primary", scale=0)
             
             gr.Markdown(
                 """
                 ### 📌 開発のポイント
-                * この機能は、ユーザーがブラシで描いた領域を分離パーツとして扱い、その下をAIで補完することで、Live2Dモデリングのコアとなる**「欠損補完」**を実現します。
+                * **Gradio互換性対応:** 環境のGradioバージョンが低すぎる問題を回避するため、描画機能に特化した`gr.Sketchpad`を使用しました。
                 """
             )
 
@@ -295,7 +309,7 @@ with gr.Blocks(theme=theme, title="Live2D素材自動分割・補完アプリ")
     # --- イベントリスナー ---
     process_button.click(
         fn=segment_and_inpaint,
-        inputs=[input_image, inpaint_prompt],
+        inputs=[original_image_upload, input_sketchpad, inpaint_prompt], # 入力コンポーネントの順序を修正
         outputs=[
             completed_body_output, 
             hair_part_output,