Create app.py

app.py

@@ -0,0 +1,137 @@
+# pip install -U transformers gradio pillow torchvision
+
+import torch
+import gradio as gr
+from transformers import AutoProcessor, AutoModelForImageTextToText
+
+# ── 載入模型 ──────────────────────────────────────────────────────────────────
+MODEL_ID = "google/gemma-4-12B"
+
+print(f"載入模型：{MODEL_ID} ...")
+processor = AutoProcessor.from_pretrained(MODEL_ID)
+model = AutoModelForImageTextToText.from_pretrained(
+    MODEL_ID,
+    dtype=torch.float16,   # torch_dtype 已棄用，改用 dtype
+    device_map="auto",
+)
+model.eval()
+print("模型載入完成！")
+
+
+# ── 推論函式 ──────────────────────────────────────────────────────────────────
+def build_messages(history: list, user_text: str, image=None) -> list:
+    """將 Gradio tuples 歷史轉換成 HuggingFace messages 格式。"""
+    messages = []
+    for user_turn, assistant_turn in history:
+        messages.append({"role": "user",      "content": [{"type": "text", "text": user_turn or ""}]})
+        messages.append({"role": "assistant", "content": [{"type": "text", "text": assistant_turn or ""}]})
+
+    user_content = []
+    if image is not None:
+        user_content.append({"type": "image", "image": image})
+    user_content.append({"type": "text", "text": user_text})
+    messages.append({"role": "user", "content": user_content})
+    return messages
+
+
+def chat(user_message, image, history, max_new_tokens, temperature, top_p):
+    """主對話函式。history 為 list of [user, assistant] tuples。"""
+    if not (user_message and user_message.strip()) and image is None:
+        return history, history, "", None
+
+    messages = build_messages(history, user_message, image)
+
+    pil_images = [image] if image is not None else None
+    inputs = processor.apply_chat_template(
+        messages,
+        add_generation_prompt=True,
+        tokenize=True,
+        return_tensors="pt",
+        return_dict=True,
+        images=pil_images,
+    ).to(model.device, dtype=torch.float16)
+
+    with torch.inference_mode():
+        output_ids = model.generate(
+            **inputs,
+            max_new_tokens=int(max_new_tokens),
+            do_sample=temperature > 0,
+            temperature=float(temperature) if temperature > 0 else 1.0,
+            top_p=float(top_p),
+        )
+
+    input_len = inputs["input_ids"].shape[-1]
+    response = processor.decode(
+        output_ids[0, input_len:], skip_special_tokens=True
+    ).strip()
+
+    history = history + [[user_message, response]]
+    return history, history, "", None
+
+
+def clear_history():
+    return [], [], "", None
+
+
+# ── Gradio UI（Gradio 6 相容）────────────────────────────────────────────────
+CSS = """
+    #chatbot { height: 550px; }
+    .send-btn { background: #10b981 !important; color: white !important; }
+    footer { display: none !important; }
+"""
+
+with gr.Blocks(title="Gemma-4 Chat") as demo:
+    gr.Markdown(
+        """
+        # 🤖 Gemma-4 多模態對話助理
+        支援純文字對話，亦可上傳圖片進行圖文問答。
+        """
+    )
+
+    state = gr.State([])
+
+    with gr.Row():
+        with gr.Column(scale=3):
+            chatbot = gr.Chatbot(
+                elem_id="chatbot",
+                label="對話視窗",
+                # Gradio 6 不支援 type="messages"；使用預設 tuples 格式
+            )
+            with gr.Row():
+                user_input = gr.Textbox(
+                    placeholder="輸入訊息，按 Enter 或點擊送出…",
+                    show_label=False,
+                    lines=2,
+                    scale=5,
+                )
+                send_btn = gr.Button("送出 ▶", elem_classes="send-btn", scale=1)
+
+        with gr.Column(scale=1):
+            image_input = gr.Image(
+                label="上傳圖片（選填）",
+                type="pil",
+                height=220,
+            )
+            gr.Markdown("### ⚙️ 生成參數")
+            max_new_tokens = gr.Slider(64, 2048, value=512, step=64,  label="最大生成長度")
+            temperature    = gr.Slider(0.0, 2.0,  value=0.7, step=0.05, label="Temperature（0 = 確定性）")
+            top_p          = gr.Slider(0.1, 1.0,  value=0.9, step=0.05, label="Top-p")
+            clear_btn = gr.Button("🗑️ 清除對話", variant="secondary")
+
+    send_inputs  = [user_input, image_input, state, max_new_tokens, temperature, top_p]
+    send_outputs = [chatbot, state, user_input, image_input]
+
+    send_btn.click(chat, inputs=send_inputs, outputs=send_outputs)
+    user_input.submit(chat, inputs=send_inputs, outputs=send_outputs)
+    clear_btn.click(clear_history, outputs=[chatbot, state, user_input, image_input])
+
+# ── 啟動 ─────────────────────────────────────────────────────────────────────
+if __name__ == "__main__":
+    demo.launch(
+        server_name="0.0.0.0",
+        server_port=7860,
+        share=False,        # Colab 請改 True
+        inbrowser=True,
+        theme=gr.themes.Soft(primary_hue="emerald"),  # Gradio 6: theme 移到 launch()
+        css=CSS,
+    )