init

Dockerfile

@@ -0,0 +1,38 @@
+FROM python:3.9-slim
+
+# 安装系统依赖
+RUN apt-get update \
+    && apt-get install -y wget gnupg \
+    && wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
+    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
+    && apt-get update \
+    && apt-get install -y google-chrome-stable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf libxss1 \
+      --no-install-recommends \
+    && rm -rf /var/lib/apt/lists/*
+
+# 设置工作目录
+WORKDIR /app
+
+# 复制依赖文件
+COPY requirements.txt .
+
+# 安装 Python 依赖
+RUN pip install --no-cache-dir -r requirements.txt
+
+# 安装 Playwright 浏览器
+RUN playwright install chromium
+
+# 复制应用代码
+COPY . .
+
+# 创建缓存目录
+RUN mkdir -p cache
+
+# 暴露端口
+EXPOSE 7860
+
+# 设置环境变量
+ENV PYTHONUNBUFFERED=1
+
+# 启动应用
+CMD ["python", "main.py"] 

README.md

@@ -1,10 +1,11 @@
 ---
 title: Boss Translator
-emoji: 🏢
-colorFrom: green
-colorTo: indigo
+emoji: 🏃
+colorFrom: purple
+colorTo: blue
 sdk: docker
 pinned: false
+app_port: 7860
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

docker-compose.yml

@@ -0,0 +1,20 @@
+version: '3'
+
+services:
+  screenshot-service:
+    build: .
+    container_name: screenshot-service
+    restart: unless-stopped
+    ports:
+      - "7860:7860"
+    volumes:
+      - ./cache:/app/cache
+    environment:
+      - NODE_ENV=production
+      - PORT=7860
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:7860/health"]
+      interval: 30s
+      timeout: 10s
+      retries: 3
+      start_period: 20s 

main.py

@@ -0,0 +1,345 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+from fastapi.responses import JSONResponse
+from pydantic import BaseModel
+from playwright.async_api import async_playwright
+import os
+import time
+from urllib.parse import urlparse
+from typing import Optional, Dict, List
+import logging
+import json
+import base64
+from io import BytesIO
+import aiohttp
+import traceback
+import requests
+from openai import OpenAI
+
+
+app = FastAPI()
+
+# 确保缓存目录存在
+CACHE_DIR = "cache"
+os.makedirs(CACHE_DIR, exist_ok=True)
+
+# 挂载静态文件目录
+app.mount("/screenshots", StaticFiles(directory=CACHE_DIR), name="screenshots")
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# API Keys
+OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
+OPENAI_API_IMAGE_EDIT_KEY = os.getenv("OPENAI_API_IMAGE_EDIT_KEY")
+GOOGLE_API_KEY = os.getenv("GOOGLE_API_KEY")
+SEARCH_ENGINE_ID = os.getenv("SEARCH_ENGINE_ID", "27acb0d55ad504716")
+print(OPENAI_API_KEY)
+print(OPENAI_API_IMAGE_EDIT_KEY)
+print(GOOGLE_API_KEY)
+
+class ScreenshotRequest(BaseModel):
+    url: str
+    width: Optional[int] = 1024
+    height: Optional[int] = 768
+    format: Optional[str] = "png"
+    custom_headers: Optional[Dict[str, str]] = {}
+
+class AnalysisRequest(BaseModel):
+    text: str
+    image_data: Optional[str] = None
+    request_model_id: str = 'gpt-4.1-mini'
+
+class OptimizationRequest(BaseModel):
+    text: str
+    image_data: str
+    suggestions: List[str]
+    request_model_id: str = 'gpt-image-1'
+
+class TextOptimizationRequest(BaseModel):
+    original_feedback: str
+    user_input: str
+    request_model_id: str = 'gpt-4.1-mini'
+
+class SearchRequest(BaseModel):
+    query: str
+    num_results: Optional[int] = 2
+
+@app.post("/capture")
+async def capture_screenshot(request: ScreenshotRequest):
+    try:
+        if not request.url:
+            raise HTTPException(status_code=400, detail="需要提供URL参数")
+
+        # 生成唯一的文件名
+        domain = urlparse(request.url).netloc.replace(".", "_")
+        timestamp = int(time.time() * 1000)
+        filename = f"{domain}_{timestamp}.{request.format}"
+        filepath = os.path.join(CACHE_DIR, filename)
+
+        logging.log(logging.INFO, f"开始为 {request.url} 生成截图...")
+
+        # 默认请求头
+        default_headers = {
+            "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36",
+            "Accept-Language": "zh-CN,zh;q=0.9,en;q=0.8",
+            "Accept": "text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8",
+            "Connection": "keep-alive",
+            "Cache-Control": "max-age=0",
+            "Sec-Fetch-Dest": "document",
+            "Sec-Fetch-Mode": "navigate",
+            "Sec-Fetch-Site": "none",
+            "Sec-Fetch-User": "?1",
+            "Upgrade-Insecure-Requests": "1"
+        }
+
+        # 合并默认请求头和自定义请求头
+        headers = {**default_headers, **(request.custom_headers or {})}
+
+        async with async_playwright() as p:
+            browser = await p.chromium.launch()
+            page = await browser.new_page()
+            
+            # 设置视口大小
+            await page.set_viewport_size({
+                "width": request.width,
+                "height": request.height
+            })
+
+            # 设置请求头
+            await page.set_extra_http_headers(headers)
+
+            # 访问页面
+            await page.goto(request.url, wait_until="networkidle")
+            
+            # 生成截图
+            await page.screenshot(path=filepath, type=request.format)
+            
+            await browser.close()
+
+        logging.log(logging.DEBUG, f"截图完成: {filepath}")
+
+        # 返回截图URL
+        screenshot_url = f"/screenshots/{filename}"
+        
+        return JSONResponse({
+            "success": True,
+            "imageUrl": screenshot_url,
+            "filename": filename
+        })
+
+    except Exception as e:
+        logging.error(f"截图过程中出错: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"截图生成失败: {str(e)}")
+
+
+@app.get("/health")
+async def health_check():
+    return {"status": "ok"}
+
+
+@app.get("/")
+def index() -> FileResponse:
+    return FileResponse(path="static/index.html", media_type="text/html")
+
+
+@app.post("/api/analyze")
+async def analyze_feedback(request: AnalysisRequest):
+    try:
+        context = "以下是老板对设计的反馈内容：\n" + request.text
+        
+        if request.image_data:
+            context += "\n\n用户还上传了设计图片作为参考："
+        
+        # 调用OpenAI API进行分析
+        response = await call_openai_api(
+            system_prompt='你是一位专业的设计顾问，擅长分析客户反馈，提取关键信息，并提供专业建议。请根据老板的���馈分析情绪值（用emoji表示），并结合给出的设计稿，给出三个具体的修改建议。每个建议应该包含一个标题和详细描述。首先你需要对老板的情绪进行解读，使用"情绪值："开头并分为五类：1. 非常满意-😊😊😊 2. 比较满意-🙂🙂🙂 3. 一般般-😐😐😐 4. 不太满意-🙁🙁🙁 5. 非常不满意-😠😠😠，然后在下一行用一句话分析老板的情绪，以"情绪分析："开头。随后，请以"修改建议：\n"开头，并以有序列表分三行说明三个具体建议，比如："1. 提高对比度：xxx\n 2. ...\n 3. ...\n"。记得结合图片进行分析和提出修改建议。最后，你需要使用网页搜索来获取合适的参考UI设计案例。请在新的一行以"搜索内容："开头，给出合适的搜索内容，以获取合适的参考设计案例，注意，你只能搜索UI设计案例。',
+            user_content=[
+                {"type": "input_text", "text": context},
+                *([{"type": "input_image", "image_url": request.image_data}] if request.image_data else [])
+            ],
+            request_model_id=request.request_model_id
+        )
+        return JSONResponse(response)
+    except Exception as e:
+        logging.error(f'Error: {e}, traceback: {traceback.format_exc()}')
+        raise HTTPException(status_code=500, detail=f'Error: {e}, traceback: {traceback.format_exc()}')
+
+@app.post("/api/optimize-design")
+async def optimize_design(request: OptimizationRequest):
+    try:
+        # 构建图像生成提示词
+        prompt = f"基于以下设计反馈优化UI设计: {', '.join(request.suggestions)}"
+        
+        # 处理图片数据
+        image_data = request.image_data
+        
+        # 调用OpenAI图像编辑API
+        response = await call_openai_image_api(
+            image_data=image_data,
+            prompt=prompt,
+            request_model_id=request.request_model_id
+        )
+        
+        return JSONResponse(response)
+    except Exception as e:
+        logging.error(f'Error: {e}, traceback: {traceback.format_exc()}')
+        raise HTTPException(status_code=500, detail=f'Error: {e}, traceback: {traceback.format_exc()}')
+
+@app.post("/api/optimize-text")
+async def optimize_text(request: TextOptimizationRequest):
+    try:
+        response = await call_openai_api(
+            system_prompt="你是一个专业的文案优化助手，擅长将简单直接的反馈转换为礼貌、专业且保持原意的表达方式。",
+            user_content=[{
+                "type": "input_text",
+                "text": f"原始反馈内容：{request.original_feedback}\n\n我想回复：{request.user_input}\n\n请优化我的回复内容，使其更加礼貌、专业，同时保持原始意思，增加一些共情和专业术语。"
+            }],
+            request_model_id=request.request_model_id
+        )
+        
+        return JSONResponse(response)
+    except Exception as e:
+        logging.error(f'Error: {e}, traceback: {traceback.format_exc()}')
+        raise HTTPException(status_code=500, detail=f'Error: {e}, traceback: {traceback.format_exc()}')
+
+@app.post("/api/search")
+async def search_design_examples(request: SearchRequest):
+    try:
+        # 构建搜索查询
+        search_query = f"{request.query} UI设计"
+        
+        # 调用Google Custom Search API
+        async with aiohttp.ClientSession() as session:
+            async with session.get(
+                "https://customsearch.googleapis.com/customsearch/v1",
+                params={
+                    "key": GOOGLE_API_KEY,
+                    "q": search_query,
+                    "cx": SEARCH_ENGINE_ID,
+                    "num": request.num_results
+                }
+            ) as response:
+                if response.status != 200:
+                    raise HTTPException(status_code=response.status, detail="Google Search API调用失败")
+                
+                search_data = await response.json()
+                
+                if not search_data.get("items"):
+                    return JSONResponse({"items": []})
+                
+                # 处理搜索结果
+                results = []
+                for item in search_data["items"]:
+                    result = {
+                        "title": item["title"].replace("</?b>", ""),
+                        "link": item["link"],
+                        "snippet": item.get("snippet", ""),
+                        "image": None
+                    }
+                    
+                    # 尝试获取图片URL
+                    if "pagemap" in item:
+                        if "cse_image" in item["pagemap"]:
+                            result["image"] = item["pagemap"]["cse_image"][0]["src"]
+                        elif "cse_thumbnail" in item["pagemap"]:
+                            result["image"] = item["pagemap"]["cse_thumbnail"][0]["src"]
+                    
+                    # 如果没有图片，使用截图服务
+                    if not result["image"]:
+                        try:
+                            screenshot_response = await capture_screenshot(ScreenshotRequest(
+                                url=result["link"],
+                                width=1024,
+                                height=768,
+                                format="png"
+                            ))
+                            if isinstance(screenshot_response, dict) and "imageUrl" in screenshot_response:
+                                result["image"] = screenshot_response["imageUrl"]
+                        except Exception as e:
+                            print(f"获取截图失败: {str(e)}")
+                            # 使用默认图片
+                            result["image"] = "https://img.freepik.com/free-vector/gradient-ui-ux-background_23-2149052117.jpg"
+                    
+                    results.append(result)
+                
+                return JSONResponse({"items": results})
+                
+    except Exception as e:
+        logging.error(f'Error: {e}, traceback: {traceback.format_exc()}')
+        raise HTTPException(status_code=500, detail=f'Error: {e}, traceback: {traceback.format_exc()}')
+
+async def call_openai_api(system_prompt: str, user_content: List[Dict], request_model_id='gpt-4.1-nano'):
+    headers = {
+        "Authorization": f"Bearer {OPENAI_API_KEY}",
+        "Content-Type": "application/json"
+    }
+    
+    data = {
+        "model": request_model_id,
+        "input": [
+            {
+                "role": "system",
+                "content": [{"type": "input_text", "text": system_prompt}]
+            },
+            {
+                "role": "user",
+                "content": user_content
+            }
+        ]
+    }
+    
+    async with aiohttp.ClientSession() as session:
+        async with session.post("https://api.openai.com/v1/responses", headers=headers, json=data) as response:
+            if response.status != 200:
+                resp = await response.json()
+                logging.error(f'response: {resp}')
+                raise HTTPException(status_code=response.status, detail=f"OpenAI API调用失败, response: {resp}")
+            return await response.json()
+
+async def call_openai_image_api(image_data: str, prompt: str, request_model_id='gpt-image-1'):
+    try:
+        # 从base64字符串中提取纯base64数据（如果包含前缀）
+        if image_data and 'base64,' in image_data:
+            image_data = image_data.split('base64,')[1]
+        
+        logging.log(logging.INFO, f"Processing image data (first 100 chars): {image_data[:100]}")
+        
+        # 将base64图片数据转换为文件对象
+        image_bytes = base64.b64decode(image_data)
+        image_file = BytesIO(image_bytes)
+        image_file.name = "original-design.png"  # 设置文件名，与JS代码一致
+        
+        # 创建OpenAI客户端
+        client = OpenAI(api_key=OPENAI_API_IMAGE_EDIT_KEY)
+        
+        # 调用图像编辑API
+        response = client.images.edit(
+            model=request_model_id,
+            image=image_file,
+            prompt=prompt # 明确要求返回base64格式
+        )
+        
+        # 获取生成的图片数据
+        if not response.data or len(response.data) == 0:
+            raise ValueError("No image data returned from API")
+            
+        image_result = response.data[0]
+        
+        # 返回与JS代码一致的格式
+        return {
+            "data": [{
+                "url": f"data:image/png;base64,{image_result.b64_json}",
+                "b64_json": image_result.b64_json
+            }]
+        }
+        
+    except Exception as e:
+        logging.error(f'Error in call_openai_image_api: {e}, traceback: {traceback.format_exc()}')
+        raise HTTPException(
+            status_code=500, 
+            detail=f'Error processing image: {str(e)}'
+        )
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

requirements.txt

@@ -0,0 +1,9 @@
+fastapi==0.104.1
+uvicorn==0.24.0
+python-multipart==0.0.6
+aiohttp==3.9.1
+playwright==1.40.0
+python-dotenv==1.0.0
+pydantic==2.5.2
+requests==2.31.0
+openai

service_readme.md

@@ -0,0 +1,176 @@
+# 网站截图服务
+
+这是一个使用 FastAPI 和 Playwright 构建的简单网站截图服务，可以生成任何网页的高质量截图。
+
+## 功能特点
+
+- 支持任何公开可访问的网页截图
+- 可自定义截图尺寸
+- 支持 PNG 格式输出
+- 自动缓存生成的截图
+- 提供 REST API 接口
+- 异步处理，高性能
+
+## 系统要求
+
+- Python 3.9 或更高版本
+- pip 包管理器
+
+## 安装步骤
+
+1. 克隆或下载本项目
+
+2. 安装依赖
+```bash
+pip install -r requirements.txt
+playwright install chromium
+```
+
+3. 启动服务
+```bash
+python screenshot_service.py
+```
+
+服务将在 `http://localhost:7860` 启动。
+
+## API 使用说明
+
+### 生成网页截图
+
+**请求**:
+
+```
+POST /capture
+Content-Type: application/json
+```
+
+**请求体**:
+
+```json
+{
+  "url": "https://example.com",
+  "width": 1024,
+  "height": 768,
+  "format": "png",
+  "custom_headers": {
+    "User-Agent": "Custom User Agent"
+  }
+}
+```
+
+参数说明:
+- `url`: 必填，要截图的网页地址
+- `width`: 可选，截图宽度，默认 1024
+- `height`: 可选，截图高度，默认 768
+- `format`: 可选，图片格式，目前支持 png，默认为 png
+- `custom_headers`: 可选，自定义请求头
+
+**成功响应**:
+
+```json
+{
+  "success": true,
+  "imageUrl": "http://localhost:7860/screenshots/example_com_1633456789.png",
+  "filename": "example_com_1633456789.png"
+}
+```
+
+**错误响应**:
+
+```json
+{
+  "detail": "截图生成失败: 导航超时，网页加载时间过长"
+}
+```
+
+### 检查服务健康状态
+
+**请求**:
+
+```
+GET /health
+```
+
+**响应**:
+
+```json
+{
+  "status": "ok"
+}
+```
+
+## 在你的应用中使用
+
+在客户端 JavaScript 中调用服务：
+
+```javascript
+async function getScreenshot(url) {
+  try {
+    const response = await fetch('http://localhost:7860/capture', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        url: url,
+        width: 1024,
+        height: 768
+      })
+    });
+    
+    const data = await response.json();
+    return data.imageUrl;
+  } catch (error) {
+    console.error('截图服务请求失败:', error);
+    return null;
+  }
+}
+```
+
+在 Python 中调用服务：
+
+```python
+import requests
+
+def get_screenshot(url):
+    try:
+        response = requests.post(
+            'http://localhost:7860/capture',
+            json={
+                'url': url,
+                'width': 1024,
+                'height': 768
+            }
+        )
+        data = response.json()
+        return data['imageUrl']
+    except Exception as e:
+        print(f'截图服务请求失败: {str(e)}')
+        return None
+```
+
+## 部署建议
+
+在生产环境部署时，建议：
+
+1. 使用 Docker 容器化部署
+2. 使用 Gunicorn 或 Uvicorn 作为生产级 ASGI 服务器
+3. 设置合适的超时时间和内存限制
+4. 配置 HTTPS 以保证安全性
+5. 添加访问限制或身份验证
+
+## Docker 部署
+
+1. 构建镜像
+```bash
+docker build -t screenshot-service .
+```
+
+2. 运行容器
+```bash
+docker run -p 7860:7860 screenshot-service
+```
+
+## 许可证
+
+MIT 

static/feedback.html

@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>反馈建议 - 解语花</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <div class="dark-container">
+        <header>
+            <div class="logo"><a href="/static/index.html">解语花</a></div>
+        </header>
+        
+        <main class="feedback-page">
+            <section class="feedback-section">
+                <h2 class="section-title">情绪值</h2>
+                <div class="emotion-card">
+                    <div class="emotion-icons">
+                        <span class="emoji">😠</span>
+                        <span class="emoji">😠</span>
+                        <span class="emoji">😠</span>
+                    </div>
+                    <div class="emotion-text">老板对设计非常不满意，建议全面改进</div>
+                </div>
+            </section>
+            
+            <section class="feedback-section">
+                <h2 class="section-title">修改建议</h2>
+                <div class="suggestions-container">
+                    <div class="suggestion-card yellow-top">
+                        <h3 class="suggestion-title">色彩调整</h3>
+                        <p class="suggestion-text">在保持整体色调的基础上，加入一些明亮的点缀色，如淡黄色、淡紫蓝、淡红蓝微粉等。用于按钮、图标或重要文本，以增加吸引力。</p>
+                    </div>
+                    
+                    <div class="suggestion-card cyan-top">
+                        <h3 class="suggestion-title">增加层级感</h3>
+                        <p class="suggestion-text">利用饱和度（Glassmorphism）效果，为卡片/重要框添加模糊背景和阴影，营造出浮起感，引入3D元素或深浅变化，增加页面的深度和空间感。</p>
+                    </div>
+                    
+                    <div class="suggestion-card purple-top">
+                        <h3 class="suggestion-title">增加互动性</h3>
+                        <p class="suggestion-text">为按钮和图标添加悬停动画或点击动画，提供用户及时反馈。引入微动画（Micro-interactions），如加载动画、切换动画等等，使页面更具活力。</p>
+                    </div>
+                </div>
+            </section>
+            
+            <section class="feedback-section">
+                <h2 class="section-title">参考案例</h2>
+                <div class="examples-container">
+                    <div class="example-card">
+                        <img class="example-image" src="" alt="参考案例1">
+                        <div class="example-content">
+                            <p class="example-desc">加载中...</p>
+                            <div class="example-source">来源: <a href="#" target="_blank">加载中...</a></div>
+                        </div>
+                    </div>
+                    <div class="example-card">
+                        <img class="example-image" src="" alt="参考案例2">
+                        <div class="example-content">
+                            <p class="example-desc">加载中...</p>
+                            <div class="example-source">来源: <a href="#" target="_blank">加载中...</a></div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            
+            <section class="feedback-section">
+                <h2 class="section-title">优化方案</h2>
+                <div class="optimization-container">
+                    <div class="optimization-card">
+                        <div class="optimization-header">
+                            <h3 class="optimization-title">方案一：GPT优化</h3>
+                            <button class="generate-btn" id="gpt4-btn">生成优化</button>
+                        </div>
+                        <div class="optimization-content" id="gpt4-content">
+                            <div class="optimization-placeholder">
+                                <p>基于GPT-4o的智能优化，结合老板反馈进行针对性修改</p>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="optimization-card">
+                        <div class="optimization-header">
+                            <h3 class="optimization-title">方案二：Dalle优化</h3>
+                            <button class="generate-btn" id="mj-btn">生成创意</button>
+                        </div>
+                        <div class="optimization-content" id="mj-content">
+                            <div class="optimization-placeholder">
+                                <p>基于Dalle的创意重构，提供全新设计灵感</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+            
+            <section class="feedback-section">
+                <h2 class="section-title">润色</h2>
+                <div class="polished-card">
+                    <textarea placeholder="输入你要回复老板的话" id="userInput"></textarea>
+                </div>
+                
+                <!-- 生成后的文案框，初始隐藏 -->
+                <div class="result-card" id="resultCard" style="display: none;">
+                    <div class="result-title">优化后的文案</div>
+                    <div class="result-content" id="resultContent"></div>
+                </div>
+            </section>
+            
+            <div class="button-container">
+                <button type="button" class="generate-button" id="generateBtn">生成</button>
+            </div>
+            
+            <!-- Toast提示 -->
+            <div class="toast" id="toast">生成中...</div>
+        </main>
+    </div>
+    
+    <script src="/static/script.js"></script>
+</body>
+</html> 

static/index.html

@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>解语花 - AI驱动的文案优化平台</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+   
+    <div class="landing-container">
+        <header>
+            <div class="logo">解语花</div>
+        </header>
+        
+        <main class="landing-content">
+            <div class="floating-avatar">
+                <div class="avatar-icon">
+                    <img src="/static/assets/avatar.svg" alt="头像" class="avatar-img">
+                </div>
+                <div class="dynamic-text" id="dynamic-text">"丑"</div>
+            </div>
+            
+            <div class="floating-feature">
+                <div class="feature-icon">
+                    <img src="/static/assets/biao.png" alt="解码潜台词图标">
+                </div>
+                <div class="feature-text">解码潜台词</div>
+            </div>
+            
+            <div class="flower-container">
+                <img src="/static/assets/flower.webp" alt="花朵" class="flower-img">
+            </div>
+      
+         
+            
+            <div class="hero-title">
+                <div class="biao-container">
+                    <img src="/static/assets/biao.png" alt="花朵" class="biao-img">
+                </div>
+                <p class="description">
+                    「AI解码潜台词，揭穿《求生欲不强》，让您既能察言观色时，也能随心所欲地表达」<br>
+                    翻译准确率99.9%，比谷歌不少点艺术，多点幽默。
+                </p>
+                <a href="/static/upload.html" class="cta-button">一键体验</a>
+            </div>
+            
+            <div class="showcase-section">
+                <div class="device-wrapper">
+                    <div class="showcase-device device1">
+                        <img src="/static/assets/device1.jpg" alt="设备展示1">
+                    </div>
+                    <div class="showcase-device device2">
+                        <img src="/static/assets/device2.jpg" alt="设备展示2">
+                    </div>
+                    <div class="showcase-device device3">
+                        <img src="/static/assets/device3.jpg" alt="设备展示3">
+                    </div>
+                    <div class="showcase-device device4">
+                        <img src="/static/assets/device4.jpg" alt="3D展示">
+                    </div>
+                </div>
+            </div>
+            
+            <div class="bottom-section">
+                <div class="subtitle-text">改稿PTSD? 不存在的!</div>
+                <h2 class="secondary-title">不同设计类型-AI老中医都能治</h2>
+                <p class="description-secondary">
+                    「「UI界面逻辑混乱？品牌视觉割裂？营销图转化率低？
+                    AI设计老中医上线——把脉图层结构，透视视觉动线，专治设计『我以为这样能过稿』综合症」
+                </p>
+                <a href="/static/upload.html" class="cta-button secondary-button">一键体验</a>
+            </div>
+        </main>
+    </div>
+    
+    <script src="/static/script.js"></script>
+</body>
+</html> 

static/script.js

@@ -0,0 +1,946 @@
+document.addEventListener('DOMContentLoaded', function() {
+    // 添加基础URL配置
+    const BASE_URL = 'https://jasonnoy-url-thumbnail.hf.space/';  // 空字符串表示使用相对路径
+    
+    // 动态文案循环显示 - 打字机效果
+    const dynamicText = document.getElementById('dynamic-text');
+    if (dynamicText) {
+        const texts = ['"丑"', '"不高级"', '"再试试"'];
+        let currentIndex = 0;
+        let isDeleting = false;
+        let charIndex = 0;
+        let typingSpeed = 150; // 打字速度
+        let pauseTime = 2000; // 完成后暂停时间，调整为2秒
+        
+        function typeEffect() {
+            const currentText = texts[currentIndex];
+            
+            if (!isDeleting) {
+                // 打字阶段
+                if (charIndex < currentText.length) {
+                    dynamicText.textContent = currentText.substring(0, charIndex + 1);
+                    charIndex++;
+                    setTimeout(typeEffect, typingSpeed);
+                } else {
+                    // 完成打字，等待删除
+                    setTimeout(() => {
+                        isDeleting = true;
+                        typeEffect();
+                    }, pauseTime);
+                }
+            } else {
+                // 删除阶段
+                if (charIndex > 0) {
+                    dynamicText.textContent = currentText.substring(0, charIndex);
+                    charIndex--;
+                    setTimeout(typeEffect, typingSpeed / 2);
+                } else {
+                    // 完成删除，切换到下一个文案
+                    isDeleting = false;
+                    currentIndex = (currentIndex + 1) % texts.length;
+                    setTimeout(typeEffect, 500);
+                }
+            }
+        }
+        
+        // 开始打字机效果
+        typeEffect();
+    }
+    
+    // 添加花朵的微小浮动动画
+    const flowerImg = document.querySelector('.flower-img');
+    if (flowerImg) {
+        flowerImg.style.animation = 'floatFlower 4s ease-in-out infinite alternate';
+    }
+    
+    // 添加浮动动画的CSS
+    const style = document.createElement('style');
+    style.textContent = `
+        @keyframes floatFlower {
+            0% {
+                transform: translateY(0) rotate(0);
+            }
+            100% {
+                transform: translateY(-15px) rotate(2deg);
+            }
+        }
+    `;
+    document.head.appendChild(style);
+    
+    // 图片上传处理
+    const imageUploadArea = document.getElementById('image-upload');
+    const imageInput = document.getElementById('image-input');
+    
+    if (imageUploadArea && imageInput) {
+        imageUploadArea.addEventListener('click', function() {
+            imageInput.click();
+        });
+        
+        imageInput.addEventListener('change', function() {
+            if (this.files && this.files[0]) {
+                const reader = new FileReader();
+                
+                reader.onload = function(e) {
+                    // 移除上传按钮
+                    while (imageUploadArea.firstChild) {
+                        imageUploadArea.removeChild(imageUploadArea.firstChild);
+                    }
+                    
+                    // 添加预览图片
+                    const img = document.createElement('img');
+                    img.src = e.target.result;
+                    imageUploadArea.appendChild(img);
+                    imageUploadArea.classList.add('with-image');
+                    
+                    // 存储图片数据到 sessionStorage 以便在反馈页面使用
+                    sessionStorage.setItem('uploadedImage', e.target.result);
+                };
+                
+                reader.readAsDataURL(this.files[0]);
+            }
+        });
+        
+        // 拖放上传功能
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            imageUploadArea.addEventListener(eventName, preventDefaults, false);
+        });
+        
+        function preventDefaults(e) {
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        
+        ['dragenter', 'dragover'].forEach(eventName => {
+            imageUploadArea.addEventListener(eventName, function() {
+                imageUploadArea.classList.add('highlight');
+            }, false);
+        });
+        
+        ['dragleave', 'drop'].forEach(eventName => {
+            imageUploadArea.addEventListener(eventName, function() {
+                imageUploadArea.classList.remove('highlight');
+            }, false);
+        });
+        
+        imageUploadArea.addEventListener('drop', function(e) {
+            const dt = e.dataTransfer;
+            const files = dt.files;
+            
+            if (files && files[0]) {
+                imageInput.files = files;
+                
+                const reader = new FileReader();
+                
+                reader.onload = function(e) {
+                    // 移除上传按钮
+                    while (imageUploadArea.firstChild) {
+                        imageUploadArea.removeChild(imageUploadArea.firstChild);
+                    }
+                    
+                    // 添加预览图片
+                    const img = document.createElement('img');
+                    img.src = e.target.result;
+                    imageUploadArea.appendChild(img);
+                    imageUploadArea.classList.add('with-image');
+                    
+                    sessionStorage.setItem('uploadedImage', e.target.result);
+                    console.log("image uploaded")
+                };
+                
+                reader.readAsDataURL(files[0]);
+            }
+        }, false);
+    }
+    
+    // 解析按钮处理
+    const resolveButton = document.getElementById('resolve-button');
+    const textInput = document.getElementById('text-input');
+
+    
+    if (resolveButton && textInput) {
+        resolveButton.addEventListener('click', function() {
+            const text = textInput.value.trim();
+            // 检查是否有文本输入
+            if (text === '') {
+                alert('请输入老板反馈内容');
+                return;
+            }
+            
+            // 显示加载状态
+            resolveButton.disabled = true;
+            
+            // 有趣的加载文案
+            const loadingTexts = [
+                "检测到甲方第8版需求残留怨气...正在召唤阴阳师修改图层结界",
+                "监控到大象对话框散发红光！自动生成24K纯杠精防护罩..."
+            ];
+            
+            // 随机选择一个文案作为起点
+            let currentTextIndex = Math.floor(Math.random() * loadingTexts.length);
+            let currentText = loadingTexts[currentTextIndex];
+            let charIndex = 0;
+            let typingSpeed = 100; // 打字速度，从50ms增加到100ms
+            
+            // 添加弹跳动画的CSS
+            if (!document.getElementById('bounce-animation-style')) {
+                const bounceStyle = document.createElement('style');
+                bounceStyle.id = 'bounce-animation-style';
+                bounceStyle.textContent = `
+                    .wave-container {
+                        position: relative;
+                        white-space: nowrap;
+                    }
+                    .bounce-text {
+                        display: inline-block;
+                        position: relative;
+                        transition: transform 0.3s ease-out;
+                    }
+                `;
+                document.head.appendChild(bounceStyle);
+            }
+            
+            // 创建一个容器来包含所有字符
+            const waveContainer = document.createElement('div');
+            waveContainer.className = 'wave-container';
+            resolveButton.innerHTML = '';
+            resolveButton.appendChild(waveContainer);
+            
+            // 跟踪波峰位置
+            let peakPosition = -1;
+            let waveInterval;
+            
+            // 打字机效果函数
+            function typeLoadingText() {
+                if (charIndex < currentText.length) {
+                    // 创建一个span元素包装字符
+                    const charSpan = document.createElement('span');
+                    charSpan.className = 'bounce-text';
+                    charSpan.textContent = currentText.charAt(charIndex);
+                    
+                    // 添加到容器
+                    waveContainer.appendChild(charSpan);
+                    
+                    charIndex++;
+                    setTimeout(typeLoadingText, typingSpeed);
+                    
+                    // 如果这是第一个字符，开始波动动画
+                    if (charIndex === 1) {
+                        startWaveAnimation();
+                    }
+                } else {
+                    // 当前文案打完，等待一段时间后切换到下一个文案
+                    setTimeout(() => {
+                        // 清除波动动画
+                        if (waveInterval) {
+                            clearInterval(waveInterval);
+                            waveInterval = null;
+                        }
+                        
+                        // 切换到下一个文案
+                        charIndex = 0;
+                        currentTextIndex = (currentTextIndex + 1) % loadingTexts.length;
+                        currentText = loadingTexts[currentTextIndex];
+                        
+                        // 清空容器，准备下一个文案
+                        waveContainer.innerHTML = '';
+                        
+                        typeLoadingText();
+                    }, 4000); // 完整显示时间
+                }
+            }
+            
+            // 波动动画函数
+            function startWaveAnimation() {
+                // 清除���前的间隔
+                if (waveInterval) clearInterval(waveInterval);
+                
+                // 启动波动动画
+                waveInterval = setInterval(() => {
+                    // 获取所有字符
+                    const chars = waveContainer.querySelectorAll('.bounce-text');
+                    if (chars.length === 0) return;
+                    
+                    // 移动波峰位置
+                    peakPosition = (peakPosition + 1) % chars.length;
+                    
+                    // 应用变换
+                    chars.forEach((char, index) => {
+                        if (index === peakPosition) {
+                            // 波峰位置
+                            char.style.transform = 'translateY(-8px)';
+                        } else if (Math.abs(index - peakPosition) === 1) {
+                            // 波峰旁边的字符稍微上移
+                            char.style.transform = 'translateY(-4px)';
+                        } else {
+                            // 其他字符回到原位
+                            char.style.transform = 'translateY(0)';
+                        }
+                    });
+                }, 100); // 每100ms更新一次波峰位置
+            }
+            
+            // 开始打字机效果
+            typeLoadingText();
+            
+            // 存储文本到 sessionStorage
+            sessionStorage.setItem('uploadedText', text);
+            console.log(text)
+            
+            // 获取上传的图片数据
+            const uploadedImage = sessionStorage.getItem('uploadedImage');
+            // 分析反馈内容，生成解读结果
+            analyzeUserInput(text, uploadedImage).then(() => {
+                // 解读完成后跳转到反馈页面
+                window.location.href = 'feedback.html';
+            }).catch(error => {
+                console.error('解读失败:', error);
+                alert('解读失败，请重试');
+                resolveButton.disabled = false;
+                resolveButton.textContent = '一键解读';
+            });
+        });
+    }
+
+
+    // 分析用户输入和图片的函数
+    async function analyzeUserInput(text, imageData) {
+        try {
+            const health = await fetch(`${BASE_URL}health`)
+            console.log(health)
+            const response = await fetch(`${BASE_URL}api/analyze`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    text: text,
+                    image_data: imageData,
+                    request_model_id: 'gpt-4.1-mini'
+                })
+            });
+            console.log(response)
+            const data = await response.json();
+            console.log(data)
+            const rep = data['output'][0]['content'][0]['text'];
+            sessionStorage.setItem('analysisResult', rep);
+        } catch (error) {
+            console.error('分析失败:', error);
+            // 使用默认的分析结果
+            const defaultAnalysis = `情绪值：😠😠😠\n\n
+修改建议：
+1. 色彩调整：在保持整体色调的基础上，加入一些明亮的点缀色，如淡黄色、淡紫蓝、淡红蓝微粉等。用于按钮、图标或重要文本，以增加吸引力。
+2. 增加层级感：利用饱和度（Glassmorphism）效果，为卡片/重要框添加模糊背景和阴影，营造出浮起感，引入3D元素或深浅变化，增加页面的深度和空间感。
+3. 增加互动性：为按钮和图标添加悬停动画或点击动画，提供用户及时反馈。引入微动画（Micro-interactions），如加载动画、切换动画等等，使页面更具活力。`;
+            
+            sessionStorage.setItem('analysisResult', defaultAnalysis);
+        }
+    }
+    
+    // 示例图片添加到参考案例
+    const exampleCards = document.querySelectorAll('.example-card');
+    if (exampleCards.length > 0) {
+        // 为示例卡片添加示例图片背景
+        const exampleBgs = [
+            'linear-gradient(45deg, #2d2d4e, #1e1e30)',
+            'linear-gradient(45deg, #2e2e2e, #1a1a1a)',
+            'linear-gradient(45deg, #332e42, #1f1b30)'
+        ];
+        
+        exampleCards.forEach((card, index) => {
+            card.style.background = exampleBgs[index % exampleBgs.length];
+        });
+    }
+    
+    // 加载并显示反馈页面的分析结果
+    function loadAnalysisResult() {
+        const analysisResult = sessionStorage.getItem('analysisResult');
+        console.log(analysisResult)
+        if (!analysisResult) return;
+        
+        try {
+            // 设置情绪值
+            if (analysisResult) {
+                const emotionIcons = document.querySelector('.emotion-icons');
+                const emotionText = document.querySelector('.emotion-text');
+                
+                if (emotionIcons && emotionText) {
+                    // 清空图标区域
+                    emotionIcons.innerHTML = '';
+                    
+                    // 提取情绪值部分
+                    const emojiText = analysisResult.split('情绪值：')[1].split('\n')[0];
+                    
+                    const emotionAnalyse = analysisResult.split('情绪分析：')[1].split('\n')[0];
+
+                    // 提取emoji
+                    const emojis = [emojiText.codePointAt(0), emojiText.codePointAt(2), emojiText.codePointAt(4)];
+                    console.log(emojis)
+                    emojis.forEach(emoji => {
+                        console.log(emoji)
+                    })
+                    
+                    if (emojis) {
+                        // 只显示3个emoji，确保一致性
+                        const displayEmojis = emojis.slice(0, 3);
+                        displayEmojis.forEach(emoji => {
+                            const span = document.createElement('span');
+                            span.className = 'emoji';
+                            span.textContent = String.fromCodePoint(emoji);
+                            emotionIcons.appendChild(span);
+                        });
+                    } else {
+                        // 默认情绪
+                        for (let i = 0; i < 3; i++) {
+                            const span = document.createElement('span');
+                            span.className = 'emoji';
+                            span.textContent = '😠';
+                            emotionIcons.appendChild(span);
+                        }
+                    }
+                    
+                    // 设置文字描述
+                    // 查找"情绪分析："部分
+                    let textDescription = '';
+                    if (emotionAnalyse) {
+                        textDescription = emotionAnalyse.trim();
+                    } else {
+                        // 如果没有情绪分析部分，根据emoji生成默认文本
+                        if (emojis && emojis[0] === '😠') {
+                            textDescription = '老板对设计非常不满意，建议全面改进';
+                        } else if (emojis && emojis[0] === '🙁') {
+                            textDescription = '老板对设计不太满意，需要较多改进';
+                        } else if (emojis && emojis[0] === '😐') {
+                            textDescription = '老板对设计感觉一般，有改进空间';
+                        } else if (emojis && emojis[0] === '🙂') {
+                            textDescription = '老板对设计比较满意，小幅改进即可';
+                        } else if (emojis && emojis[0] === '😊') {
+                            textDescription = '老板对设计非常满意，细节优化即可';
+                        } else {
+                            textDescription = '需要基于反馈进行改进';
+                        }
+                    }
+                    
+                    emotionText.textContent = textDescription;
+                }
+            }
+            
+            // 提取修改建议
+            const suggestionsContainer = document.querySelector('.suggestions-container');
+            if (suggestionsContainer) {
+                try {
+                    // 使用split提取修改建议部分
+                    const suggestionsText = analysisResult.split('修改建议：')[1].split('搜索内容：')[0];
+                    
+                    if (suggestionsText) {
+                        // 提取三个建议
+                        const suggestionLines = suggestionsText.trim().split('\n');
+                        const suggestions = [];
+                        
+                        // 处理每一行建议
+                        for (let i = 0; i < suggestionLines.length; i++) {
+                            const line = suggestionLines[i].trim();
+                            if (line.match(/^\d+\.\s/)) {
+                                // 找到了序号开头的行，这是建议的标题和内容
+                                const suggestionText = line.replace(/^\d+\.\s/, '');
+                                
+                                // 拆分标题和内容（假设冒号或：分隔）
+                                let title = suggestionText;
+                                let content = '';
+                                
+                                if (suggestionText.includes('：')) {
+                                    [title, content] = suggestionText.split('：', 2);
+                                } else if (suggestionText.includes(':')) {
+                                    [title, content] = suggestionText.split(':', 2);
+                                }
+                                
+                                suggestions.push({
+                                    title: title.trim(),
+                                    content: content.trim()
+                                });
+                                
+                                // 最多收集三个建议
+                                if (suggestions.length >= 3) break;
+                            }
+                        }
+                        
+                        // 更新建议卡片
+                        if (suggestions.length > 0) {
+                            const cardStyles = ['yellow-top', 'cyan-top', 'purple-top'];
+                            suggestionsContainer.innerHTML = '';
+                            
+                            suggestions.forEach((suggestion, index) => {
+                                const cardStyle = cardStyles[index % cardStyles.length];
+                                const card = document.createElement('div');
+                                card.className = `suggestion-card ${cardStyle}`;
+                                
+                                const titleElement = document.createElement('h3');
+                                titleElement.className = 'suggestion-title';
+                                titleElement.textContent = suggestion.title;
+                                
+                                const textElement = document.createElement('p');
+                                textElement.className = 'suggestion-text';
+                                textElement.textContent = suggestion.content;
+                                
+                                card.appendChild(titleElement);
+                                card.appendChild(textElement);
+                                suggestionsContainer.appendChild(card);
+                            });
+                            
+                            // 加载参考案例
+                            loadReferenceExamples(suggestions);
+                        }
+                    }
+                } catch (error) {
+                    console.error('解析建议失败:', error);
+                }
+            }
+        } catch (error) {
+            console.error('解析分析结果失败:', error);
+        }
+    }
+    
+    // 根据建议加载参考案例
+    async function loadReferenceExamples(suggestions) {
+        const analysisResult = sessionStorage.getItem('analysisResult');
+        const searchContent = analysisResult.split('搜索内容：')[1].trim();
+        const examplesContainer = document.querySelector('.examples-container');
+        if (!examplesContainer) return;
+        
+        // 获取现有的示例卡片元素
+        const exampleCards = examplesContainer.querySelectorAll('.example-card');
+        if (exampleCards.length !== 2) {
+            console.error('未找到预期的两个示例卡片元素');
+            return;
+        }
+        
+        try {
+            // 显示加载状态
+            exampleCards.forEach(card => {
+                const img = card.querySelector('.example-image');
+                const desc = card.querySelector('.example-desc');
+                const sourceLink = card.querySelector('.example-source a');
+                
+                if (img) img.src = '';
+                if (desc) desc.textContent = '正在搜索设计参考案例...';
+                if (sourceLink) {
+                    sourceLink.href = '#';
+                    sourceLink.textContent = '加载中...';
+                }
+            });
+            
+            // 获取原始反馈文本和上传的图片
+            const uploadedText = sessionStorage.getItem('uploadedText') || '';
+            const uploadedImage = sessionStorage.getItem('uploadedImage');
+            
+            // 调用后端搜索API
+            const response = await fetch(`${BASE_URL}api/search`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    query: searchContent,
+                    num_results: 2
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('搜索请求失败');
+            }
+
+            const searchData = await response.json();
+            
+            if (!searchData.items || searchData.items.length === 0) {
+                throw new Error('未找到搜索结果');
+            }
+            
+            // 处理搜索结果
+            const examples = searchData.items.map(result => ({
+                title: result.title,
+                sourceUrl: result.link,
+                description: result.snippet || '',
+                image: result.image || ''
+            }));
+            
+            // 使用GPT生成描述
+            for (let i = 0; i < examples.length; i++) {
+                const example = examples[i];
+                try {
+                    const response = await fetch(`${BASE_URL}api/optimize-text`, {
+                        method: 'POST',
+                        headers: {
+                            'Content-Type': 'application/json'
+                        },
+                        body: JSON.stringify({
+                            original_feedback: uploadedText,
+                            user_input: `请分析这个设计案例：${example.title}\n${example.description}\n\n基于原始设计反馈和修改建议，详细分析为什么这个设计案例可以解决用户面临的设计问题。描述要专业、具体，并关注设计细节。`,
+                            request_model_id: 'gpt-4.1-mini'
+                        })
+                    });
+
+                    if (response.ok) {
+                        const data = await response.json();
+                        if (data.output && data.output[0].content[0].text) {
+                            example.description = data.output[0].content[0].text.trim();
+                        }
+                    }
+                } catch (gptError) {
+                    console.error('生成案例描述失败:', gptError);
+                    // 使用默认描述
+                    example.description = i === 0 ?
+                        '这个案例展示了清晰的视觉层次结构和吸引人的色彩搭配，能有效解决原设计中的平面感问题。通过对比度增强和微妙的动效，它能提高用户体验和互动性，同时保持整体设计的专业性。' :
+                        '该设计运用了精细的色彩渐变和现代化的UI元素，完美解决了原始设计中的视觉单调问题。透过精心安排的布局和适当的留白，创造出流畅的用户浏览体验，同时增加了设计的精致感和专业度。';
+                }
+            }
+            
+            // 更新UI
+            examples.forEach((example, index) => {
+                const card = exampleCards[index];
+                if (!card) return;
+                
+                const img = card.querySelector('.example-image');
+                const desc = card.querySelector('.example-desc');
+                const source = card.querySelector('.example-source');
+                
+                if (img) {
+                    img.src = example.image;
+                    img.alt = example.title;
+                }
+                
+                if (desc) {
+                    desc.textContent = example.description;
+                }
+                
+                if (source) {
+                    const sourceLink = source.querySelector('a');
+                    if (sourceLink) {
+                        sourceLink.href = example.sourceUrl;
+                        sourceLink.textContent = example.title;
+                    }
+                }
+            });
+            
+        } catch (error) {
+            console.error('加载参考案例失败:', error);
+            
+            // 在错误情况下更新UI
+            exampleCards.forEach(card => {  
+                const desc = card.querySelector('.example-desc');
+                if (desc) {
+                    desc.textContent = '加载参考案例失败，请刷新重试';
+                    desc.style.color = '#ff6b6b';
+                }
+            });
+        }
+    }
+    
+    // 当在反馈页面时，加载分析结果
+    if (window.location.pathname.includes('feedback.html')) {
+        loadAnalysisResult();
+        
+        // 优化方案功能
+        setupOptimizationButtons();
+    }
+    
+    // 设置优化方案按钮功能
+    function setupOptimizationButtons() {
+        const gpt4Button = document.getElementById('gpt4-btn');
+        const mjButton = document.getElementById('mj-btn');
+        
+        if (gpt4Button) {
+            gpt4Button.addEventListener('click', function() {
+                generateGPT4Optimization();
+            });
+        }
+        
+        if (mjButton) {
+            mjButton.addEventListener('click', function() {
+                generateDalleOptimization();
+            });
+        }
+    }
+    
+    // 使用GPT-4生成优化方案
+    async function generateGPT4Optimization() {
+        const gpt4Button = document.getElementById('gpt4-btn');
+        const gpt4Content = document.getElementById('gpt4-content');
+        
+        if (!gpt4Button || !gpt4Content) return;
+        
+        try {
+            // 禁用按钮
+            gpt4Button.disabled = true;
+            gpt4Button.textContent = '生成中...';
+            
+            // 显示加载动画
+            showLoadingState(gpt4Content, '正在生成优化方案，请稍候...');
+            
+            // 获取原始反馈和图片
+            const uploadedText = sessionStorage.getItem('uploadedText') || '';
+            const uploadedImage = sessionStorage.getItem('uploadedImage');
+            const analysisResult = sessionStorage.getItem('analysisResult') || '';
+            
+            if (!uploadedImage) {
+                throw new Error('未找到原始设计图片');
+            }
+            
+            // 提取修改建议
+            let suggestions = [];
+            if (analysisResult.includes('修改建议：')) {
+                const suggestionsText = analysisResult.split('修改建议：')[1].split('搜索内容：')[0];
+                suggestions = suggestionsText
+                    .split('\n')
+                    .filter(line => line.match(/^\d+\./))
+                    .map(line => line.replace(/^\d+\.\s+/, '').trim());
+            }
+            
+            // 调用后端API
+            const response = await fetch(`${BASE_URL}api/optimize-design`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    text: uploadedText,
+                    image_data: uploadedImage,
+                    suggestions: suggestions,
+                    request_model_id: 'gpt-image-1'
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('优化请求失败');
+            }
+
+            const data = await response.json();
+            
+            if (data.data && data.data[0] && data.data[0].url) {
+                // 展示生成的图片
+                showOptimizationResult(gpt4Content, data.data[0].url);
+                gpt4Button.disabled = false;
+                gpt4Button.textContent = '重新生成';
+            } else {
+                throw new Error('API未返回图片数据');
+            }
+            
+        } catch (error) {
+            console.error('生成优化方案失败:', error);
+            gpt4Content.innerHTML = `
+                <div class="optimization-placeholder">
+                    <p style="color: #ff6b6b;">生成失败: ${error.message || '请稍后重试'}</p>
+                </div>
+            `;
+            gpt4Button.disabled = false;
+            gpt4Button.textContent = '重试';
+        }
+    }
+    
+    async function generateDalleOptimization() {
+        const mjButton = document.getElementById('mj-btn');
+        const mjContent = document.getElementById('mj-content');
+        if (!mjButton || !mjContent) return;
+    
+        try {
+            mjButton.disabled = true;
+            mjButton.textContent = '生成中...';
+            showLoadingState(mjContent, '正在优化设计，请稍候...');
+    
+            // 获取原始反馈和建议
+            const analysisResult = sessionStorage.getItem('analysisResult') || '';
+            let suggestions = [];
+            if (analysisResult.includes('修改建议：')) {
+                const suggestionsText = analysisResult.split('修改建议：')[1].split('搜索内容：')[0];
+                suggestions = suggestionsText
+                    .split('\n')
+                    .filter(line => line.match(/^\d+\./))
+                    .map(line => line.replace(/^\d+\.\s+/, '').trim());
+            }
+            
+            // 获取原始图片
+            const uploadedImage = sessionStorage.getItem('uploadedImage');
+            if (!uploadedImage) {
+                throw new Error('未找到原始设计图片');
+            }
+
+            // 构建提示词
+            const prompt = `基于以下设计反馈优化UI设计: ${suggestions.join(', ')}`;
+            
+            // 调用后端API
+            const response = await fetch(`${BASE_URL}api/optimize-design`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    text: analysisResult,
+                    image_data: uploadedImage,
+                    suggestions: suggestions,
+                    request_model_id: 'dall-e-2'
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('优化请求失败');
+            }
+
+            const data = await response.json();
+            
+            if (data.data && data.data[0] && data.data[0].url) {
+                // 展示生成的图片
+                showOptimizationResult(mjContent, data.data[0].url);
+                mjButton.disabled = false;
+                mjButton.textContent = '重新生成';
+            } else {
+                throw new Error('API未返回图片数据');
+            }
+    
+        } catch (error) {
+            console.error('生成优化方案失败:', error);
+            mjContent.innerHTML = `
+                <div class="optimization-placeholder">
+                    <p style="color: #ff6b6b;">生成失败: ${error.message || '请稍后重试'}</p>
+                </div>
+            `;
+            mjButton.disabled = false;
+            mjButton.textContent = '重试';
+        }
+    }
+    
+    // 显示加载状态
+    function showLoadingState(container, message) {
+        container.innerHTML = `
+            <div class="optimization-loading">
+                <div class="loading-spinner"></div>
+                <div class="loading-text">${message}</div>
+            </div>
+            <div class="optimization-placeholder">
+                <p>生成中���请稍候...</p>
+            </div>
+        `;
+    }
+    
+    // 显示优化结果
+    function showOptimizationResult(container, imageUrl) {
+        container.innerHTML = `
+            <div class="optimization-result">
+                <img src="${imageUrl}" alt="优化方案" />
+            </div>
+        `;
+    }
+    
+    // 润色功能
+    const generateBtn = document.getElementById('generateBtn');
+    if (generateBtn) {
+        generateBtn.addEventListener('click', function() {
+            const userInput = document.getElementById('userInput').value.trim();
+            if (!userInput) {
+                alert('请输入需要润色的内容');
+                return;
+            }
+            
+            // 显示Toast提示
+            const toast = document.getElementById('toast');
+            toast.style.display = 'block';
+            
+            // 调用OpenAI API
+            callOptimizeText(userInput);
+        });
+    }
+    
+    // OpenAI API调用函数
+    async function callOptimizeText(inputText) {
+        try {
+            // 获取原始反馈文本
+            const originalFeedback = sessionStorage.getItem('uploadedText') || '';
+            
+            const response = await fetch(`${BASE_URL}api/optimize-text`, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({
+                    original_feedback: originalFeedback,
+                    user_input: inputText,
+                    request_model_id: 'gpt-4.1-mini'
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error('文本优化请求失败');
+            }
+
+            const data = await response.json();
+            
+            // 隐藏Toast
+            const toast = document.getElementById('toast');
+            toast.style.display = 'none';
+            
+            if (data.output && data.output[0].content[0].text.length > 0) {
+                // 显示API返回的结果
+                const optimizedText = data['output'][0]['content'][0]['text'];
+                const resultContent = document.getElementById('resultContent');
+                const resultCard = document.getElementById('resultCard');
+                
+                resultContent.innerText = optimizedText;
+                resultCard.style.display = 'block';
+                
+                // 平滑滚动到结果区域
+                resultCard.scrollIntoView({ behavior: 'smooth' });
+            } else {
+                handleAPIError('未获取到有效响应');
+            }
+        } catch (error) {
+            handleAPIError(error);
+        }
+    }
+    
+    // 处理API错误
+    function handleAPIError(error) {
+        console.error('API调用失败:', error);
+        
+        // 隐藏Toast
+        const toast = document.getElementById('toast');
+        toast.style.display = 'none';
+        
+        // 显示错误信息，同时提供备选方案
+        const resultContent = document.getElementById('resultContent');
+        const resultCard = document.getElementById('resultCard');
+        
+        // 备选文案，当API调用失败时使用
+        const userInput = document.getElementById('userInput').value.trim();
+        let fallbackText = '';
+        if (userInput.includes('不行') || userInput.includes('不能')) {
+            fallbackText = '感谢您的建议，我们团队已经考虑过这个方案，但受到一些技术限制，暂时无法实现。我们已经记录下您的想法，并会在后续版本中尝试优化解决。';
+        } else if (userInput.includes('丑') || userInput.includes('难看')) {
+            fallbackText = '非常感谢您的审美建议！我们设计团队正在不断优化视觉体验，您提出的这些意见非常有价值，我们会在下一版本中优先考虑调整。';
+        } else {
+            fallbackText = '您的意见我们已经记录，团队会认真研究并在后续迭代中考虑采纳。感谢您的宝贵反馈，这对我们产品的完善非常重要！';
+        }
+        
+        resultContent.innerText = fallbackText;
+        resultCard.style.display = 'block';
+        
+        // 平滑滚动到结果区域
+        resultCard.scrollIntoView({ behavior: 'smooth' });
+    }
+
+    // 添加图片转base64函数
+    async function convertImageToBase64(imageUrl) {
+        try {
+            const response = await fetch(imageUrl);
+            const blob = await response.blob();
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.onloadend = () => {
+                    // 返回完整的Data URL
+                    resolve(reader.result);
+                };
+                reader.onerror = reject;
+                reader.readAsDataURL(blob);
+            });
+        } catch (error) {
+            console.error('转换图片为base64失败:', error);
+            return imageUrl; // 如果失败，返回原始URL
+        }
+    }
+}); 

static/styles.css

@@ -0,0 +1,927 @@
+/* 全局样式 */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    line-height: 1.6;
+    color: #fff;
+    background-color: #121212;
+
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+/* 登录页样式 */
+.landing-container {
+    min-height: 100vh;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background:  url(/static/assets/beijing.png),
+    url(/static/assets/beijing2.png),
+    url(/static/assets/beijing3.png),
+    linear-gradient(to bottom right, #080618, #080618);
+    background-size: 50% 50%,80% 80%,80% 80%,100% 100%;
+    background-position: 0 0,90% 10%,-120% 260%, 0 0;
+    background-repeat: no-repeat,no-repeat,no-repeat;
+}
+
+header {
+    padding: 20px 40px;
+    z-index: 2;
+}
+
+.logo {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #fff;
+}
+
+.logo a {
+    color: #fff;
+    text-decoration: none;
+    transition: opacity 0.3s;
+}
+
+.logo a:hover {
+    opacity: 0.8;
+}
+
+.landing-content {
+    position: relative;
+    min-height: calc(100vh - 80px);
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    z-index: 2;
+  
+}
+
+/* 浮动元素 */
+.floating-avatar {
+    position: absolute;
+    left: 24%;
+    top: 15%;
+    z-index: 10;
+    background: #fff;
+    backdrop-filter: blur(5px);
+    padding: 10px 20px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+}
+
+.avatar-icon {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    background: #333;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    overflow: hidden;
+}
+
+.avatar-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.dynamic-text {
+    font-size: 18px;
+    font-weight: 500;
+    color: #333;
+    position: relative;
+    display: inline-block;
+}
+
+.floating-feature {
+    position: absolute;
+    right: 24%;
+    top: 15%;
+    z-index: 10;
+    background: #fff;
+    backdrop-filter: blur(5px);
+    padding: 10px 20px;
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+}
+
+.feature-icon {
+    width: 45px;
+    height: 45px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-right: 12px;
+    overflow: hidden;
+}
+
+.feature-icon img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.feature-text {
+    white-space: nowrap;
+    font-size: 16px;
+    color: #333;
+    font-weight: 500;
+}
+
+/* 花朵容器 */
+.flower-container {
+    position: relative;
+    margin-top: 0%;
+    z-index: 2;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.ti-container {
+    position: relative;
+    margin-top: 4%;
+    z-index: 2;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.biao-container {
+    position: relative;
+    margin-top: 6%;
+    z-index: 2;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+}
+.beijing-container {
+    position: relative;
+    margin-top: 0%;
+    z-index: 5;
+    width: 100%;
+    display: flex;
+    justify-content: left;
+}
+.ti-img {
+    width: 600px;
+    height: auto;
+    max-width: 90%;
+}
+
+.flower-img {
+    width: 700px;
+    height: auto;
+    max-width: 90%;
+}
+
+.beijing-img {
+    width: 600px;
+    height: auto;
+    max-width: 90%;
+}
+
+
+/* 标题区域 */
+.hero-title {
+    text-align: center;
+    margin-top: -300px;
+    z-index: 3;
+    position: relative;
+}
+
+.main-title {
+    font-size: 4.5rem;
+    margin-bottom: 15px;
+    background: linear-gradient(to right, #c299fc, #7f9bff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.subtitle {
+    font-size: 8rem;
+    font-weight: bold;
+    color: rgba(255, 255, 255, 0.1);
+    letter-spacing: 4px;
+    margin-bottom: 25px;
+    margin-top: -100px;
+}
+
+.description {
+    max-width: 800px;
+    font-weight: lighter;
+    margin: 0 auto 40px;
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1.8;
+    font-size: 1.1rem;
+}
+
+/* 通用按钮样式 */
+.cta-button, .resolve-button, .generate-button {
+    display: inline-block;
+    background: linear-gradient(to right, #5E33F1, #BA9EF7);
+    color: #fff;
+    padding: 15px 70px;
+    border-radius: 20px;
+    font-size: 1.1rem;
+    font-weight: bold;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.3s, box-shadow 0.3s;
+}
+
+.cta-button:hover, .resolve-button:hover, .generate-button:hover {
+    transform: translateY(-6px);
+    box-shadow: 0 10px 30px rgba(128, 49, 255, 0.5);
+}
+
+/* 设备展示区域 */
+.showcase-section {
+    width: 100%;
+    height: 550px;
+    position: relative;
+    margin: 300px 0 100px;
+    display: flex;
+    justify-content: center;
+}
+
+.device-wrapper {
+    position: relative;
+    width: 1100px;
+    height: 100%;
+    transform-style: preserve-3d;
+}
+
+.showcase-device {
+    position: absolute;
+    border-radius: 80px;
+    overflow: hidden;
+    box-shadow: 0 0 100px rgba(0, 0, 0, 0.5);
+    transition: transform 0.4s ease-out;
+}
+
+.showcase-device img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.device1 {
+    width: 350px;
+    height: 400px;
+    left: -40px;
+    top: -200px;
+    z-index: 2;
+    
+}
+
+.device2 {
+    width: 740px;
+    height: 540px;
+    left: 160px;
+    top: 0;
+    z-index: 3;
+    
+}
+
+.device3 {
+    width: 320px;
+    height: 300px;
+    right:-20px;
+    top: -120px;
+    z-index: 4;
+   
+}
+
+.device4 {
+    width: 220px;
+    height: 220px;
+    left: 100px;
+    bottom: -60px;
+    z-index: 5;
+
+}
+
+.device1:hover, .device2:hover, .device3:hover, .device4:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 0 100px rgba(77, 0, 209, 0.5);
+}
+
+/* 底部区域 */
+.bottom-section {
+    text-align: center;
+    margin-top: -20px;
+    padding: 0px 20px;
+    position: relative;
+    z-index: 5;
+}
+
+.subtitle-text {
+    color: #999;
+    margin-bottom: 15px;
+    font-size: 1.1rem;
+}
+
+.secondary-title {
+    font-size: 3rem;
+    margin-bottom: 25px;
+    background: linear-gradient(to right, #c299fc, #7f9bff);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+}
+
+.description-secondary {
+    max-width: 800px;
+    font-weight: lighter;
+    margin: 0 auto 40px;
+    color: rgba(255, 255, 255, 0.8);
+    line-height: 1.8;
+    font-size: 1.1rem;
+    margin-top: 20px;
+}
+
+.secondary-button {
+    margin-top: 40px;
+    margin-bottom:200px
+}
+
+/* 深色主题容器 */
+.dark-container {
+    min-height: 100vh;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    background:  url(./assets/beijing.png),
+    url(./assets/beijing2.png),
+    url(./assets/beijing3.png),
+    linear-gradient(to bottom right, #080618, #080618);
+    background-size: 50% 50%,80% 80%,80% 80%,100% 100%;
+    background-position: 0 0,90% 10%,-120% 260%, 0 0;
+    background-repeat: no-repeat,no-repeat,no-repeat;
+    padding: 20px;
+}
+
+/* 上传页面样式 - 新版本 */
+.upload-page {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: calc(100vh - 80px);
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+    gap: 30px;
+}
+
+.upload-box {
+    width: 100%;
+    height: 45vh;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(5px);
+    overflow: hidden;
+}
+
+.upload-area {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.3s;
+}
+
+.upload-button {
+    background: #5d4bb7;
+    color: white;
+    padding: 12px 30px;
+    border-radius: 50px;
+    font-weight: 500;
+    transition: all 0.3s;
+}
+
+.upload-area:hover .upload-button {
+    background: #6b5ed8;
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(107, 94, 216, 0.3);
+}
+
+.text-input-box {
+    width: 100%;
+    height: 25vh;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    backdrop-filter: blur(5px);
+    overflow: hidden;
+}
+
+textarea {
+    width: 100%;
+    height: 100%;
+    background: transparent;
+    border: none;
+    padding: 20px;
+    color: #ccc;
+    font-size: 16px;
+    resize: none;
+    outline: none;
+}
+
+.button-container {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    margin-top: 30px;
+}
+
+/* 图片预览 */
+.upload-area.with-image {
+    padding: 0;
+}
+
+.upload-area img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+/* 新版反馈页面样式 */
+.feedback-page {
+    max-width: 900px;
+    margin: 0 auto;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+    gap: 80px;
+}
+
+.feedback-section {
+    width: 100%;
+}
+
+.section-title {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 20px;
+    color: #fff;
+}
+
+/* 情绪值卡片 */
+.emotion-card {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    padding: 25px;
+    backdrop-filter: blur(5px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.emotion-icons {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 15px;
+}
+
+.emoji {
+    font-size: 50px;
+}
+
+.emotion-text {
+    color: #afafaf;
+    font-size: 16px;
+    text-align: center;
+    margin-top: 10px;
+}
+
+/* 修改建议卡片 */
+.suggestions-container {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 20px;
+    position: relative; /* 确保容器有定位上下文 */
+}
+
+.suggestion-card {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 20px;
+    overflow: visible; /* 允许横条超出卡片 */
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    backdrop-filter: blur(10px);
+    position: relative;
+    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    z-index: 1;
+}
+
+.suggestion-card::after {
+    content: '';
+    position: absolute;
+    top: -6px; /* 向上露出10px */
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100px; /* 略微减小宽度 */
+    height: 10px; /* 略微减小高度 */
+    border-radius: 8px;
+    z-index: -1;
+    
+}
+
+.yellow-top::after {
+    background: linear-gradient(to right, #deb045, #ffd166);
+   /* 负值确保在卡片下方 */
+
+}
+
+.cyan-top::after {
+    background: linear-gradient(to right, #25b1c1, #3ec1cf);
+   
+}
+
+.purple-top::after {
+    background: linear-gradient(to right, #9747FF, #b26bff);
+    
+}
+
+.suggestion-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin: 40px;
+    text-align: center;
+}
+
+.suggestion-text {
+    padding: 0 24px 24px;
+    color: #afafaf;
+    font-size: 13px;
+    line-height: 2;
+}
+
+/* 参考案例卡片 */
+.examples-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 30px;
+}
+
+.example-card {
+    position: relative;
+    height: 320px;
+    border-radius: 12px;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    background-color: rgba(255, 255, 255, 0.05);
+    backdrop-filter: blur(10px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.example-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+}
+
+.example-image {
+    width: 100%;
+    height: 180px;
+    object-fit: cover;
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+}
+
+.example-content {
+    padding: 15px;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    max-height: 140px;
+    overflow: hidden;
+}
+
+.example-desc {
+    color: #e0e0e0;
+    margin: 0 0 10px 0;
+    font-size: 14px;
+    line-height: 1.5;
+    flex-grow: 1;
+    overflow-y: auto;
+    max-height: 100px;
+    padding-right: 5px;
+    scrollbar-width: thin;
+    scrollbar-color: #9747FF rgba(255, 255, 255, 0.1);
+}
+
+.example-desc::-webkit-scrollbar {
+    width: 4px;
+}
+
+.example-desc::-webkit-scrollbar-track {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.example-desc::-webkit-scrollbar-thumb {
+    background-color: #9747FF;
+    border-radius: 4px;
+}
+
+.example-source {
+    font-size: 12px;
+    color: #888;
+    margin-top: auto;
+    text-decoration: none;
+}
+
+.example-source a {
+    color: #9747FF;
+    text-decoration: none;
+}
+
+.example-source a:hover {
+    text-decoration: underline;
+}
+
+.loading-examples {
+    width: 100%;
+    padding: 20px;
+    text-align: center;
+    color: #888;
+    font-size: 16px;
+    grid-column: span 2;
+}
+
+.loading-error {
+    width: 100%;
+    padding: 20px;
+    text-align: center;
+    color: #ff6b6b;
+    font-size: 16px;
+    grid-column: span 2;
+}
+
+/* 润色卡片 */
+.polished-card {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    overflow: hidden;
+    height: 150px;
+    backdrop-filter: blur(5px);
+    margin-bottom: 20px;
+}
+
+/* 结果文案卡片 */
+.result-card {
+    width: 100%;
+    background: rgba(255, 255, 255, 0.07);
+    border-radius: 20px;
+    overflow: hidden;
+    margin-top: 20px;
+    backdrop-filter: blur(5px);
+    border: 1px solid rgba(138, 43, 226, 0.2);
+}
+
+.result-title {
+    padding: 15px 20px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #fff;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
+    background: rgba(138, 43, 226, 0.1);
+}
+
+.result-content {
+    padding: 20px;
+    color: #ccc;
+    font-size: 16px;
+    line-height: 1.6;
+    min-height: 100px;
+}
+
+footer {
+    text-align: center;
+    margin-top: 50px;
+    padding: 20px 0;
+    color: #777;
+    border-top: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+    .landing-content {
+        padding: 10px;
+    }
+    
+    .floating-avatar, .floating-feature {
+        position: static;
+        margin: 10px auto;
+    }
+    
+    .flower-img {
+        max-width: 80%;
+    }
+    
+    .main-title {
+        font-size: 2.5rem;
+    }
+    
+    .subtitle {
+        font-size: 2rem;
+    }
+    
+    .secondary-title {
+        font-size: 1.8rem;
+    }
+    
+    .upload-page {
+        padding: 10px;
+    }
+    
+    .upload-box {
+        height: 35vh;
+    }
+    
+    .text-input-box {
+        height: 25vh;
+    }
+    
+    .suggestions-container,
+    .examples-container {
+        grid-template-columns: 1fr;
+    }
+    
+    .button-container {
+        flex-direction: column;
+        gap: 15px;
+    }
+    
+    .back-button, .submit-button, .save-button {
+        width: 100%;
+    }
+}
+
+/* Toast提示 */
+.toast {
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background: rgba(0, 0, 0, 0.8);
+    color: white;
+    padding: 15px 30px;
+    border-radius: 50px;
+    z-index: 9999;
+    font-size: 16px;
+    display: none;
+    animation: fadeIn 0.3s;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* 优化方案卡片 */
+.optimization-container {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 20px;
+}
+
+.optimization-card {
+    background: rgba(255, 255, 255, 0.05);
+    border-radius: 20px;
+    overflow: hidden;
+    backdrop-filter: blur(5px);
+    display: flex;
+    flex-direction: column;
+    min-height: 320px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.optimization-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 16px 20px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.2);
+}
+
+.optimization-title {
+    font-size: 18px;
+    font-weight: 500;
+    margin: 0;
+}
+
+.generate-btn {
+    background: linear-gradient(to right, #5E33F1, #BA9EF7);
+    color: white;
+    border: none;
+    padding: 8px 16px;
+    border-radius: 20px;
+    font-size: 14px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.generate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 15px rgba(94, 51, 241, 0.3);
+}
+
+.generate-btn:disabled {
+    background: #666;
+    cursor: not-allowed;
+    transform: none;
+    box-shadow: none;
+}
+
+.optimization-content {
+    padding: 20px;
+    flex-grow: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    min-height: 260px;
+}
+
+.optimization-result {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.optimization-result img {
+    max-width: 100%;
+    max-height: 250px;
+    border-radius: 8px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.optimization-placeholder {
+    color: #888;
+    text-align: center;
+    padding: 20px;
+}
+
+.optimization-loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    z-index: 2;
+}
+
+.loading-spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid rgba(255, 255, 255, 0.1);
+    border-left-color: #5E33F1;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 15px;
+}
+
+.loading-text {
+    color: #ccc;
+    font-size: 14px;
+}
+
+@keyframes spin {
+    to { transform: rotate(360deg); }
+} 

static/upload.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>内容上传 - 解语花</title>
+    <link rel="stylesheet" href="/static/styles.css">
+</head>
+<body>
+    <div class="dark-container">
+        <header>
+            <div class="logo"><a href="/static/index.html">解语花</a></div>
+        </header>
+        
+        <main class="upload-page">
+            <div class="upload-box">
+                <div class="upload-area" id="image-upload">
+                    <div class="upload-button">点击/拖拽设计稿</div>
+                </div>
+                <input type="file" id="image-input" accept="image/*" hidden>
+            </div>
+            
+            <div class="text-input-box">
+                <textarea id="text-input" placeholder="请输入设计类型和内容描述，以及老板反馈"></textarea>
+            </div>
+            
+            <div class="button-container">
+                <button type="button" class="resolve-button" id="resolve-button">一键解读</button>
+            </div>
+        </main>
+    </div>
+    
+    <script src="/static/script.js"></script>
+</body>
+</html>