Update app.py

app.py

@@ -3,6 +3,16 @@ import google.generativeai as genai
 import os
 from PIL import Image
 
+
+# 这里的 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; }
+"""
+
+
 # 配置 Gemini API
 # 自动从您设置的环境变量中读取 Key
 api_key = os.getenv("MY_API_KEY")
@@ -21,14 +31,13 @@ def analyze_lighting(image):
         
         # 编写针对灯光艺术师的专业 Prompt
         prompt = """
-        你是一位精通 Unreal Engine 5 的资深灯光艺术家。
-        请对这张场景截图进行专业的灯光分析，并给出具体优化建议：
-        1. 氛围分析：色温对比、全局光照(GI)的填充情况。
-        2. 技术评估：曝光是否过爆、暗部细节是否丢失、阴影质量。
-        3. 材质反馈：光线在不同材质（如大理石、金属）上的表现。
-        4. 改进建议：是否需要增加体积雾(Volumetric Fog)、虚幻引擎中的补光(Fill Light)或轮廓光。
-        请用专业、简洁的中文回答。
-        """
+作为 UE5 灯光总监，分析截图。请严格按照以下格式输出分析结果：
+[SCORE] 0-100的数字
+[COLORS] 识别出的主色调（用逗号隔开）
+[ANALYSIS] 氛围与明暗的深度分析
+[TECH] 技术建议（体积雾、GI等）
+[IMPROVE] 具体的 3 条优化建议（每条建议用“|”分隔）
+"""
         
         # 发送图片和文字
         response = model.generate_content([prompt, image])
@@ -37,17 +46,48 @@ def analyze_lighting(image):
     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>
+        """
+        return html
+    except:
+        return ai_text
+
+
+
 # 构建 Gradio 界面
-with gr.Blocks(theme=gr.themes.Soft()) as demo:
-    gr.Markdown("# 💡 UE5 Lighting Artist AI Assistant (Gemini 版)")
+
+
+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>")
     
     with gr.Row():
-        with gr.Column(scale=1):
-            input_img = gr.Image(label="上传截图", type="pil")
-            btn = gr.Button("生成灯光分析报告", variant="primary")
-        with gr.Column(scale=1):
-            output_text = gr.Markdown("分析结果将在此显示...")
+        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=5):
+            # 使用 gr.HTML 而不是 gr.Markdown
+            output_panel = gr.HTML("<div style='color: #888;'>等待分析数据...</div>")
             
-    btn.click(analyze_lighting, inputs=[input_img], outputs=[output_text])
+    # 点击后的逻辑：调用 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])
 
 demo.launch()