iOS移动端优化：安全区域、触控友好、PWA支持

- 实施iOS Safari安全区域支持 (viewport-fit=cover + env())
- 添加44pt最小触控区域，符合iOS设计规范
- 实现iPad悬停效果 (@media hover:hover)
- 添加自动暗色模式支持 (prefers-color-scheme)
- 实施毛玻璃效果 (backdrop-filter)
- 配置PWA manifest和iOS Web App功能
- 修复动态视口单位 (100dvh替代100vh)
- 更新CLAUDE.md文档反映架构变更

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

CLAUDE.md

@@ -161,9 +161,12 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 # Install dependencies
 pip install -r requirements.txt
 
-# Run the application locally
-python app.py
+# Run the optimized application (recommended)
+python app_simple.py
 # Server runs on http://localhost:7860
+
+# Or run the original application (compatibility mode)
+python app.py
 ```
 
 ### Docker Development
@@ -176,29 +179,36 @@ docker run -p 7860:7860 seedream-editor
 ```
 
 ### Deployment
-- **Primary deployment**: Hugging Face Spaces (Docker template)
+- **Primary deployment**: Hugging Face Spaces at https://huggingface.co/spaces/wapadil/seedream4
+- **GitHub Integration**: Automatic deployment via GitHub Actions workflow
 - **Alternative**: Vercel (using vercel.json configuration)
 - **Port**: 7860 (Hugging Face Spaces default)
+- **Access Token**: Uses HF_TOKEN for automated deployments
 
 ## Architecture Overview
 
 ### Backend Architecture
 - **Framework**: Flask with CORS enabled
 - **API Integration**: FAL API client for ByteDance SeedDream v4 models
-- **Async Processing**: Custom event loop management with ThreadPoolExecutor
-- **Request Handling**: Non-blocking async API calls with request tracking system
+- **Processing Model**: Simplified synchronous API calls (app_simple.py) or complex async processing (app.py)
+- **Request Handling**: Direct API calls with immediate response (optimized) or async request tracking (legacy)
 
 ### Key Technical Details
-- **Event Loop Management**: Uses dedicated background thread with persistent event loop for all async operations
 - **API Models**:
   - `fal-ai/bytedance/seedream/v4/edit` - Image editing mode
+  - `fal-ai/qwen-image-edit-plus` - Qwen image editing model
   - `fal-ai/bytedance/seedream/v4/text-to-image` - Text-to-image generation
 - **File Handling**: Base64 data URLs for image uploads, temporary file management for FAL uploads
-- **Request Tracking**: UUID-based request tracking with status polling (`/api/status/<request_id>`)
+- **Localization**: Complete Chinese frontend interface with optimized Chinese fonts
+- **Architecture Variants**:
+  - **app_simple.py**: Synchronous API calls, simplified error handling
+  - **app.py**: Complex async processing with event loop management and request tracking
 
 ### Frontend Architecture
 - **Technology**: Vanilla HTML/CSS/JavaScript (no frameworks)
 - **UI Pattern**: Single-page application with dynamic mode switching
+- **Localization**: Complete Chinese interface (纯中文化前端)
+- **Typography**: Optimized Chinese font stack with proper spacing
 - **File Upload**: Drag-and-drop interface with base64 conversion
 - **API Communication**: Fetch API with polling for async operation status
 
@@ -216,52 +226,78 @@ docker run -p 7860:7860 seedream-editor
 
 ### File Structure
 ```
-├── app.py                 # Main Flask application
+├── app.py                 # Original application (complex async)
+├── app_simple.py          # Optimized application (recommended)
 ├── requirements.txt       # Python dependencies
 ├── Dockerfile            # Container configuration
 ├── vercel.json           # Vercel deployment config
+├── .github/
+│   └── workflows/
+│       └── deploy.yml     # GitHub Actions deployment
+├── api/
+│   ├── fal_client.py      # Simplified FAL API client
+│   └── routes.py          # Modular API routes
+├── monitoring.py          # Request monitoring and logging
+├── tests/                 # Test suite
 ├── templates/
-│   └── index.html        # Main UI template
+│   └── index.html        # Chinese localized UI template
 └── static/
-    ├── style.css         # Application styles
-    └── script.js         # Frontend logic
+    ├── style.css         # Chinese optimized styles
+    └── script.js         # Chinese localized frontend logic
 ```
 
 ## Important Implementation Notes
 
-### Async Processing
-- Uses a shared background event loop (`_async_loop`) for all FAL API operations
-- Request processing happens asynchronously with proper cleanup
-- Event iteration with safety limits to prevent infinite loops
-- Graceful error handling and request cleanup
+### Architecture Variants
+- **app_simple.py (Recommended)**: Synchronous FAL API client with direct response handling
+- **app.py (Legacy)**: Complex async processing with event loop management
+
+### Processing Models
+**Optimized Synchronous (app_simple.py)**:
+- Direct API calls using `fal_client.SyncClient`
+- Immediate response handling without polling
+- Simplified error handling and logging
+- Modular architecture with separate API modules
+
+**Legacy Async (app.py)**:
+- Background event loop with ThreadPoolExecutor
+- Request tracking with UUID-based polling
+- Complex memory management and cleanup
+- Event iteration with safety limits
+
+### Chinese Localization
+- Complete frontend interface translation (纯中文化前端)
+- Optimized Chinese font stack: PingFang SC, Hiragino Sans GB, Microsoft YaHei
+- Proper line height (1.6) and letter spacing for Chinese text
+- All user messages, buttons, and labels localized
 
-### Memory Management
-- Automatic cleanup of completed/errored requests from `active_requests` dict
-- Temporary file cleanup after FAL uploads
-- Proper async task cancellation and event loop shutdown
+## Development Guidelines
 
-### Error Handling
-- Comprehensive logging with DEBUG prefixes
-- Timeout protection (60s for API calls, 5min for uploads)
-- Graceful degradation when event iteration fails
-- Request status tracking with error state management
+### Application Selection
+- **Production/New Development**: Use `app_simple.py` for new features and production deployments
+- **Legacy Support**: Use `app.py` only when specifically needed for compatibility
 
-## Development Guidelines
+### When modifying the optimized version (app_simple.py):
+- Use the modular API structure in `api/` directory
+- Leverage the simplified `FALClient` class for API operations
+- Follow the direct response pattern without async complexity
+- Use the monitoring module for consistent logging
 
-### When modifying async code:
+### When modifying the legacy version (app.py):
 - Always use the shared `_async_loop` for FAL API operations
 - Use `schedule_in_async_loop()` for fire-and-forget operations
 - Use `run_in_async_loop()` for synchronous waiting
 - Ensure proper cleanup in exception handlers
 
 ### When adding new API endpoints:
-- Follow the request tracking pattern for async operations
 - Use proper API key extraction from Authorization header
 - Include comprehensive debug logging
 - Handle both success and error cases with cleanup
+- For new endpoints, prefer the simplified synchronous pattern
 
 ### When modifying the frontend:
 - Maintain vanilla JS approach (no framework dependencies)
+- Preserve Chinese localization in all user-facing text
 - Use consistent error handling patterns
-- Preserve the polling mechanism for async operations
-- Keep localStorage API key management
+- Keep localStorage API key management
+- Maintain Chinese font optimization in CSS

static/manifest.webmanifest

@@ -0,0 +1,18 @@
+{
+  "name": "SeedDream v4 - AI图像生成与编辑器",
+  "short_name": "SeedDream",
+  "description": "AI驱动的图像生成与编辑",
+  "start_url": "/",
+  "display": "standalone",
+  "background_color": "#0b0b0c",
+  "theme_color": "#007AFF",
+  "orientation": "portrait-primary",
+  "icons": [
+    {
+      "src": "/static/app-icon.svg",
+      "sizes": "180x180",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

static/style.css

@@ -1,3 +1,36 @@
+:root {
+    color-scheme: light dark;
+    --side-pad: max(16px, env(safe-area-inset-left));
+    --side-pad-r: max(16px, env(safe-area-inset-right));
+    --safe-bottom: max(16px, env(safe-area-inset-bottom));
+    --safe-top: max(16px, env(safe-area-inset-top));
+
+    /* Light theme colors */
+    --bg: #f8f9fa;
+    --card: #ffffff;
+    --text: #333333;
+    --muted: #6c757d;
+    --border: #dee2e6;
+    --brand: #007AFF;
+    --success: #28a745;
+    --danger: #dc3545;
+    --warning: #ffc107;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --bg: #0b0b0c;
+        --card: #161719;
+        --text: #e7e7ea;
+        --muted: #9a9aa0;
+        --border: #2c2c2e;
+        --brand: #0A84FF;
+        --success: #32d74b;
+        --danger: #ff453a;
+        --warning: #ffd60a;
+    }
+}
+
 * {
     margin: 0;
     padding: 0;
@@ -6,25 +39,31 @@
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
-    background: #1a1a2e;
-    color: #333;
-    height: 100vh;
-    overflow: hidden;
+    background: var(--bg);
+    color: var(--text);
+    min-height: 100dvh;
     line-height: 1.6;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: max(16px, 1rem);
 }
 
 /* Main App Container - Two Column Layout */
 .app-container {
     display: flex;
-    height: 100vh;
+    min-height: 100dvh;
     background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding-left: var(--side-pad);
+    padding-right: var(--side-pad-r);
+    padding-top: var(--safe-top);
+    padding-bottom: var(--safe-bottom);
 }
 
 /* Left Panel - Controls */
 .left-panel {
     width: 45%;
     min-width: 500px;
-    background: #f8f9fa;
+    background: var(--card);
     overflow-y: auto;
     box-shadow: 2px 0 10px rgba(0,0,0,0.1);
     display: flex;
@@ -39,6 +78,8 @@ body {
     position: sticky;
     top: 0;
     z-index: 10;
+    backdrop-filter: blur(16px) saturate(1.2);
+    -webkit-backdrop-filter: blur(16px) saturate(1.2);
 }
 
 .left-panel header h1 {
@@ -875,8 +916,9 @@ body {
   position: sticky;
   top: 0;
   z-index: 15;
-  backdrop-filter: saturate(140%) blur(8px);
-  background: linear-gradient(180deg, rgba(26,26,46,0.85), rgba(26,26,46,0.65));
+  backdrop-filter: blur(16px) saturate(1.2);
+  -webkit-backdrop-filter: blur(16px) saturate(1.2);
+  background: rgba(24,24,28,0.6);
   border-bottom: 1px solid rgba(255,255,255,0.08);
 }
 
@@ -1111,9 +1153,35 @@ label, .form-group label {
 }
 
 /* 按钮文字优化 */
+/* Touch-friendly buttons with 44pt minimum */
 button, .btn {
+    min-height: 44px;
+    min-width: 44px;
+    padding: 10px 14px;
+    border-radius: 12px;
+    border: none;
     font-weight: 500;
+    font-size: max(16px, 1rem);
     letter-spacing: 0.01em;
+    cursor: pointer;
+    transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
+    background: var(--brand);
+    color: white;
+    line-height: 1.2;
+}
+
+/* iPad hover effects */
+@media (hover: hover) and (pointer: fine) {
+    button:hover, .btn:hover {
+        transform: translateY(-1px);
+        filter: brightness(1.05);
+        box-shadow: 0 6px 20px rgba(0,0,0,0.12);
+    }
+}
+
+button:active, .btn:active {
+    transform: translateY(0);
+    filter: brightness(0.95);
 }
 
 /* 状态消息中文优化 */

templates/index.html

@@ -2,7 +2,11 @@
 <html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
+    <link rel="apple-touch-icon" href="/static/app-icon.svg">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <link rel="manifest" href="/static/manifest.webmanifest">
     <title>SeedDream v4 - AI图像生成与编辑器</title>
     <link rel="stylesheet" href="/static/style.css">
 </head>