Update app.py

app.py

@@ -1,93 +1,94 @@
 import gradio as gr
 import google.generativeai as genai
 import os
-from PIL import Image
+import json
+import re
 
+# 配置 API
+api_key = os.getenv("GOOGLE_API_KEY")
+genai.configure(api_key=api_key)
 
-# 这里的 CSS 定义了卡片的颜色、边框和图标风格
+# --- 定义 CSS 样式 ---
 custom_css = """
-.report-card { background: #1a1c1e; border-left: 5px solid #3b82f6; padding: 15px; border-radius: 8px; margin-bottom: 15px; color: white; }
-.score-box { font-size: 24px; font-weight: bold; color: #10b981; margin-bottom: 10px; }
-.tag { display: inline-block; background: #334155; padding: 2px 8px; border-radius: 4px; font-size: 12px; margin-right: 5px; }
-.suggestion-item { margin-bottom: 10px; padding: 10px; background: #2d3748; border-radius: 5px; }
+body { background-color: #0b0f14; }
+.report-container { background: #111827; border: 1px solid #1f2937; border-radius: 12px; padding: 20px; color: #e5e7eb; font-family: 'Inter', sans-serif; }
+.header-row { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #374151; padding-bottom: 15px; margin-bottom: 20px; }
+.score-circle { background: radial-gradient(circle, #3b82f6, #1d4ed8); width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: white; box-shadow: 0 0 15px rgba(59, 130, 246, 0.5); }
+.section-title { color: #60a5fa; font-size: 16px; font-weight: bold; margin: 15px 0 10px 0; display: flex; align-items: center; gap: 8px; }
+.card { background: #1f2937; border-radius: 8px; padding: 12px; margin-bottom: 10px; border-left: 4px solid #3b82f6; }
+.tag-container { display: flex; gap: 8px; margin-top: 10px; }
+.tag { background: #374151; padding: 4px 10px; border-radius: 4px; font-size: 12px; color: #9ca3af; border: 1px solid #4b5563; }
+.suggestion { background: #064e3b; border-left: 4px solid #10b981; padding: 10px; border-radius: 6px; margin-top: 8px; font-size: 14px; }
 """
 
-
-# 配置 Gemini API
-# 自动从您设置的环境变量中读取 Key
-api_key = os.getenv("MY_API_KEY")
-genai.configure(api_key=api_key)
-
-def analyze_lighting(image):
-    if image is None:
-        return "请先上传一张场景截图。"
-    if not api_key:
-        return "未检测到 GOOGLE_API_KEY，请在 Settings 中配置。"
-
+def parse_and_format(ai_response):
+    """提取 JSON 并渲染 HTML"""
     try:
-        # 使用最新的 Gemini 1.5 Pro 或 Flash 模型
-        # 'gemini-1.5-flash' 速度快，'gemini-1.5-pro' 分析更深层
-        model = genai.GenerativeModel('gemini-3-flash-preview')
+        # 尝试从回复中找到 JSON 部分
+        json_str = re.search(r'\{.*\}', ai_response, re.DOTALL).group()
+        data = json.loads(json_str)
         
-        # 编写针对灯光艺术师的专业 Prompt
-        prompt = """
-作为 UE5 灯光总监，分析截图。请严格按照以下格式输出分析结果：
-[SCORE] 0-100的数字
-[COLORS] 识别出的主色调（用逗号隔开）
-[ANALYSIS] 氛围与明暗的深度分析
-[TECH] 技术建议（体积雾、GI等）
-[IMPROVE] 具体的 3 条优化建议（每条建议用“|”分隔）
-"""
-        
-        # 发送图片和文字
-        response = model.generate_content([prompt, image])
-        return response.text
-        
-    except Exception as e:
-        return f"Gemini 分析出错: {str(e)}"
-
-
-def format_output(ai_text):
-    # 简单的文本切割逻辑（可以根据实际 Prompt 调整）
-    try:
-        # 这里仅为逻辑演示，实际可以使用正则表达式提取
-        score = "85" # 假设提取出的分数
         html = f"""
-        <div class="report-card">
-            <div class="score-box">💡 场景灯光评分：{score}</div>
-            <div class="tag">UE5.4</div><div class="tag">Lumen</div><div class="tag">Realistic</div>
-            <hr style="border: 0.5px solid #444; margin: 15px 0;">
-            <div style="color: #60a5fa; font-weight: bold;">📊 深度分析：</div>
-            <p>{ai_text[:200]}...</p>
+        <div class="report-container">
+            <div class="header-row">
+                <div>
+                    <h2 style="margin:0; color:white;">灯光分析报告</h2>
+                    <div class="tag-container">
+                        <span class="tag">UE5.4</span><span class="tag">Lumen</span><span class="tag">Cinema_Light</span>
+                    </div>
+                </div>
+                <div class="score-circle">{data.get('score', '??')}</div>
+            </div>
+            
+            <div class="section-title">🎨 色彩与氛围</div>
+            <div class="card">{data.get('atmosphere', '')}</div>
+            
+            <div class="section-title">⚙️ 技术优化分析</div>
+            <div class="card" style="border-left-color: #f59e0b;">
+                <p style="margin:0; font-size:14px;">{data.get('technical', '')}</p>
+            </div>
+            
+            <div class="section-title">🚀 灯光优化建议</div>
+            {" ".join([f'<div class="suggestion">💡 {s}</div>' for s in data.get('suggestions', [])])}
         </div>
         """
         return html
     except:
-        return ai_text
-
-
-
-# 构建 Gradio 界面
+        # 如果解析 JSON 失败，回退到 Markdown 显示
+        return f"<div class='report-container'>{ai_response}</div>"
 
+def analyze_lighting(image):
+    if image is None: return "请上传图片"
+    try:
+        model = genai.GenerativeModel('gemini-3-flash-preview')
+        # 强制 AI 输出 JSON 格式
+        prompt = """
+        你是一位顶级游戏灯光艺术总监。请分析这张 UE5 截图，并严格按以下 JSON 格式输出（不要有其他废话）：
+        {
+          "score": "评分数字",
+          "atmosphere": "分析色温对比、氛围感",
+          "technical": "分析曝光、死黑、体积雾、GI表现",
+          "suggestions": ["建议1", "建议2", "建议3"]
+        }
+        请用专业中文。
+        """
+        response = model.generate_content([prompt, image])
+        return parse_and_format(response.text)
+    except Exception as e:
+        return f"<div style='color:red;'>错误: {str(e)}</div>"
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Default(primary_hue="blue", neutral_hue="slate")) as demo:
-    gr.HTML("<h1 style='text-align: center; color: white;'>GameLight Analyzer Pro</h1>")
-    
+# --- 构建 UI ---
+with gr.Blocks(css=custom_css) as demo:
     with gr.Row():
-        with gr.Column(scale=4):
-            input_img = gr.Image(label="UE5 Scene Capture", type="pil", height=500)
-            btn = gr.Button("🔍 开始深度光影分析", variant="primary")
+        with gr.Column(scale=1):
+            gr.Markdown("### 📷 场景画面上传")
+            input_img = gr.Image(label=None, type="pil")
+            btn = gr.Button("生成专业灯光分析报告", variant="primary")
             
-        with gr.Column(scale=5):
-            # 使用 gr.HTML 而不是 gr.Markdown
-            output_panel = gr.HTML("<div style='color: #888;'>等待分析数据...</div>")
+        with gr.Column(scale=1):
+            gr.Markdown("### 📊 分析结果预览")
+            output_html = gr.HTML("<div style='color:#666;'>等待分析数据...</div>")
             
-    # 点击后的逻辑：调用 Gemini -> 格式化为 HTML -> 显示
-    def run_analysis(img):
-        raw_res = analyze_lighting(img) # 调用你之前的 Gemini 函数
-        # 这里的 format_to_pro_ui 是一个将纯文本转为漂亮 HTML 的函数
-        return format_to_pro_ui(raw_res) 
-
-    btn.click(run_analysis, inputs=[input_img], outputs=[output_panel])
+    btn.click(analyze_lighting, inputs=[input_img], outputs=[output_html])
 
 demo.launch()