Spaces:

BlueSkyXN
/

ImageMagickAPI-HFS

Running

Claude commited on Nov 9

Commit

7b4204f

unverified ·

1 Parent(s): 49bdcf2

重构前端架构并实现4套主题切换功能

主要改进：
- 实现前后端分离架构，将HTML/CSS/JS从Python中独立出来
- 创建标准的静态资源目录结构（static/css, static/js, templates）
- 实现4套可切换主题：Apple、Glassmorphism、Minimal、Tech
- 添加主题持久化（localStorage）和键盘快捷键支持
- 增强交互功能：拖拽上传、实时参数验证、文件大小预检查

技术细节：
- main.py: 简化代码，移除内联HTML模板（-307行，-39%）
- 新增 templates/index.html: 纯HTML结构模板
- 新增 static/css/themes.css: 使用CSS变量实现主题切换
- 新增 static/js/app.js: 所有前端交互逻辑
- requirements.txt: 新增jinja2依赖

改进效果：
- 代码可维护性显著提升
- 支持静态资源CDN缓存
- 完整的IDE语法支持
- 模块化架构便于扩展

Files changed (5) hide show

main.py +15 -312
requirements.txt +2 -1
static/css/themes.css +556 -0
static/js/app.js +252 -0
templates/index.html +103 -0

main.py CHANGED Viewed

@@ -21,9 +21,12 @@ from fastapi import (
     HTTPException,
     BackgroundTasks,
     Path,
-    Form
 )
 from fastapi.responses import FileResponse, JSONResponse, HTMLResponse
 import subprocess
 import asyncio
 import tempfile
@@ -63,6 +66,12 @@ app = FastAPI(
     version="4.0.0"
 )
 # 启动时确保临时目录存在
 os.makedirs(TEMP_DIR, exist_ok=True)
@@ -103,321 +112,15 @@ def cleanup_temp_dir(temp_dir: str):
     except Exception as cleanup_error:
         logger.error(f"后台清理：删除 {temp_dir} 失败: {cleanup_error}", exc_info=True)
-# --- 5. HTML 模板 ---
-HTML_UPLOAD_PAGE = """
-<!DOCTYPE html>
-<html lang="zh-CN">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Magick 图像转换器</title>
-    <style>
-        * { box-sizing: border-box; margin: 0; padding: 0; }
-        body {
-            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            padding: 20px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .container {
-            background: white;
-            border-radius: 20px;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.3);
-            max-width: 600px;
-            width: 100%;
-            padding: 40px;
-        }
-        h1 {
-            color: #333;
-            margin-bottom: 10px;
-            font-size: 28px;
-            text-align: center;
-        }
-        .subtitle {
-            color: #666;
-            text-align: center;
-            margin-bottom: 30px;
-            font-size: 14px;
-        }
-        .form-group {
-            margin-bottom: 25px;
-        }
-        label {
-            display: block;
-            color: #333;
-            font-weight: 600;
-            margin-bottom: 8px;
-            font-size: 14px;
-        }
-        .file-input-wrapper {
-            position: relative;
-            border: 2px dashed #667eea;
-            border-radius: 10px;
-            padding: 30px;
-            text-align: center;
-            background: #f8f9ff;
-            cursor: pointer;
-            transition: all 0.3s;
-        }
-        .file-input-wrapper:hover {
-            border-color: #764ba2;
-            background: #f0f2ff;
-        }
-        .file-input-wrapper input[type="file"] {
-            position: absolute;
-            width: 100%;
-            height: 100%;
-            top: 0;
-            left: 0;
-            opacity: 0;
-            cursor: pointer;
-        }
-        .file-label {
-            color: #667eea;
-            font-weight: 600;
-        }
-        select, input[type="range"] {
-            width: 100%;
-            padding: 12px;
-            border: 2px solid #e0e0e0;
-            border-radius: 8px;
-            font-size: 14px;
-            transition: border-color 0.3s;
-        }
-        select:focus {
-            outline: none;
-            border-color: #667eea;
-        }
-        .radio-group {
-            display: flex;
-            gap: 20px;
-        }
-        .radio-label {
-            display: flex;
-            align-items: center;
-            cursor: pointer;
-            font-weight: normal;
-        }
-        .radio-label input[type="radio"] {
-            margin-right: 8px;
-            cursor: pointer;
-        }
-        .slider-container {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-        input[type="range"] {
-            flex: 1;
-        }
-        .slider-value {
-            min-width: 45px;
-            text-align: center;
-            font-weight: 600;
-            color: #667eea;
-            font-size: 18px;
-        }
-        .param-hint {
-            background: #f0f2ff;
-            padding: 12px;
-            border-radius: 8px;
-            font-size: 13px;
-            color: #555;
-            margin-top: 10px;
-            border-left: 4px solid #667eea;
-        }
-        .submit-btn {
-            width: 100%;
-            padding: 15px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            color: white;
-            border: none;
-            border-radius: 10px;
-            font-size: 16px;
-            font-weight: 600;
-            cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
-        }
-        .submit-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
-        }
-        .submit-btn:active {
-            transform: translateY(0);
-        }
-        .links {
-            margin-top: 25px;
-            text-align: center;
-            padding-top: 25px;
-            border-top: 1px solid #e0e0e0;
-        }
-        .links a {
-            color: #667eea;
-            text-decoration: none;
-            margin: 0 15px;
-            font-size: 14px;
-            font-weight: 500;
-        }
-        .links a:hover {
-            text-decoration: underline;
-        }
-        .selected-file {
-            margin-top: 10px;
-            color: #28a745;
-            font-size: 13px;
-            font-weight: 500;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <h1>🧙‍♂️ Magick 图像转换器</h1>
-        <p class="subtitle">支持多格式转换 | 有损/无损模式 | 支持动画图像</p>
-        <form id="uploadForm" action="/" method="POST" enctype="multipart/form-data">
-            <div class="form-group">
-                <label>选择图像文件</label>
-                <div class="file-input-wrapper">
-                    <input type="file" name="file" id="fileInput" accept="image/*" required>
-                    <div class="file-label">
-                        📁 点击选择或拖拽文件到此处
-                        <div style="font-size: 12px; color: #999; margin-top: 8px;">
-                            支持 JPG, PNG, GIF, WebP, AVIF, HEIF 等格式
-                        </div>
-                    </div>
-                </div>
-                <div id="selectedFile" class="selected-file"></div>
-            </div>
-            <div class="form-group">
-                <label for="target_format">目标格式</label>
-                <select name="target_format" id="target_format" required>
-                    <option value="webp">WebP - 现代高效格式</option>
-                    <option value="avif">AVIF - 最新一代格式</option>
-                    <option value="jpeg">JPEG - 经典有损格式</option>
-                    <option value="png">PNG - 无损格式</option>
-                    <option value="gif">GIF - 动画格式</option>
-                    <option value="heif" selected>HEIF - 高效图像格式</option>
-                </select>
-            </div>
-            <div class="form-group">
-                <label>转换模式</label>
-                <div class="radio-group">
-                    <label class="radio-label">
-                        <input type="radio" name="mode" value="lossy">
-                        有损压缩 (更小体积)
-                    </label>
-                    <label class="radio-label">
-                        <input type="radio" name="mode" value="lossless" checked>
-                        无损压缩 (保持质量)
-                    </label>
-                </div>
-            </div>
-            <div class="form-group">
-                <label for="setting">质量参数</label>
-                <div class="slider-container">
-                    <input type="range" name="setting" id="setting" min="0" max="100" value="0">
-                    <span class="slider-value" id="settingValue">0</span>
-                </div>
-                <div class="param-hint" id="paramHint">
-                    压缩速度: 0 - 最慢/最佳压缩 (0=最慢/最佳，100=最快/最差)
-                </div>
-            </div>
-            <button type="submit" class="submit-btn">🚀 开始转换</button>
-        </form>
-        <div class="links">
-            <a href="/docs" target="_blank">📖 API 文档</a>
-            <a href="/health" target="_blank">🏥 健康检查</a>
-        </div>
-    </div>
-    <script>
-        // 文件选择提示
-        const fileInput = document.getElementById('fileInput');
-        const selectedFile = document.getElementById('selectedFile');
-        fileInput.addEventListener('change', function() {
-            if (this.files.length > 0) {
-                selectedFile.textContent = '✓ 已选择: ' + this.files[0].name;
-            }
-        });
-        // 滑块实时更新
-        const slider = document.getElementById('setting');
-        const sliderValue = document.getElementById('settingValue');
-        const paramHint = document.getElementById('paramHint');
-        const modeRadios = document.querySelectorAll('input[name="mode"]');
-        function updateHint() {
-            const mode = document.querySelector('input[name="mode"]:checked').value;
-            const value = slider.value;
-            sliderValue.textContent = value;
-            if (mode === 'lossy') {
-                let quality = '中等';
-                if (value >= 90) quality = '极高';
-                else if (value >= 80) quality = '高';
-                else if (value >= 60) quality = '中等';
-                else if (value >= 40) quality = '中低';
-                else quality = '低';
-                paramHint.textContent = `质量: ${value} - ${quality}质量 (0=最低质量，100=最高质量)`;
-            } else {
-                let speed = '平衡';
-                if (value <= 20) speed = '最慢/最佳压缩';
-                else if (value <= 40) speed = '较慢/较好压缩';
-                else if (value <= 60) speed = '平衡';
-                else if (value <= 80) speed = '较快/较差压缩';
-                else speed = '最快/最差压缩';
-                paramHint.textContent = `压缩速度: ${value} - ${speed} (0=最慢/最佳，100=最快/最差)`;
-            }
-        }
-        slider.addEventListener('input', updateHint);
-        // 当模式切换时，自动调整质量值
-        modeRadios.forEach(radio => radio.addEventListener('change', function() {
-            const mode = document.querySelector('input[name="mode"]:checked').value;
-            if (mode === 'lossless') {
-                // 无损模式：默认最佳质量（0=最慢/最佳压缩）
-                slider.value = 0;
-            } else {
-                // 有损模式：默认中等质量（50=中等质量）
-                slider.value = 50;
-            }
-            updateHint();
-        }));
-        // 表单提交处理
-        const form = document.getElementById('uploadForm');
-        const submitBtn = form.querySelector('.submit-btn');
-        const originalBtnText = submitBtn.textContent;
-        form.addEventListener('submit', function() {
-            submitBtn.textContent = '⏳ 转换中...';
-            submitBtn.disabled = true;
-        });
-    </script>
-</body>
-</html>
-"""
-# --- 6. API 端点 ---
-@app.get("/", response_class=HTMLResponse, summary="上传界面")
-async def root():
     """
     返回用户友好的HTML上传表单页面。
-    提供图形化界面进行图像转换，无需编程知识。
     """
-    return HTML_UPLOAD_PAGE
 @app.get("/health", summary="服务健康检查")
 async def health_check():

     HTTPException,
     BackgroundTasks,
     Path,
+    Form,
+    Request
 )
 from fastapi.responses import FileResponse, JSONResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
 import subprocess
 import asyncio
 import tempfile
     version="4.0.0"
 )
+# 挂载静态文件目录（CSS、JS等）
+app.mount("/static", StaticFiles(directory="static"), name="static")
+# 配置模板引擎
+templates = Jinja2Templates(directory="templates")
 # 启动时确保临时目录存在
 os.makedirs(TEMP_DIR, exist_ok=True)
     except Exception as cleanup_error:
         logger.error(f"后台清理：删除 {temp_dir} 失败: {cleanup_error}", exc_info=True)
+# --- 5. API 端点 ---
+@app.get("/", summary="上传界面")
+async def root(request: Request):
     """
     返回用户友好的HTML上传表单页面。
+    提供图形化界面进行图像转换，支持4套主题切换。
     """
+    return templates.TemplateResponse("index.html", {"request": request})
 @app.get("/health", summary="服务健康检查")
 async def health_check():

requirements.txt CHANGED Viewed

@@ -1,3 +1,4 @@
 fastapi
 uvicorn[standard]
-python-multipart

 fastapi
 uvicorn[standard]
+python-multipart
+jinja2

static/css/themes.css ADDED Viewed

	@@ -0,0 +1,556 @@

+/* ========================================
+   基础样式重置
+   ======================================== */
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+/* ========================================
+   主题 1: Apple Style (经典苹果风)
+   ======================================== */
+:root,
+[data-theme="apple"] {
+    --bg-primary: #f5f5f7;
+    --bg-container: #ffffff;
+    --bg-input: #ffffff;
+    --bg-input-hover: #f9f9f9;
+    --bg-hint: #f5f5f7;
+    --color-primary: #0071e3;
+    --color-primary-hover: #0077ed;
+    --color-accent: #06c;
+    --color-success: #30d158;
+    --text-primary: #1d1d1f;
+    --text-secondary: #86868b;
+    --text-hint: #6e6e73;
+    --border-color: #d2d2d7;
+    --border-focus: #0071e3;
+    --shadow-sm: 0 2px 16px rgba(0, 0, 0, 0.08);
+    --shadow-md: 0 4px 24px rgba(0, 0, 0, 0.12);
+    --shadow-hover: 0 8px 32px rgba(0, 0, 0, 0.16);
+    --radius-sm: 8px;
+    --radius-md: 12px;
+    --radius-lg: 18px;
+    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+/* ========================================
+   主题 2: Glassmorphism (玻璃拟态)
+   ======================================== */
+[data-theme="glass"] {
+    --bg-primary: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+    --bg-container: rgba(255, 255, 255, 0.1);
+    --bg-input: rgba(255, 255, 255, 0.05);
+    --bg-input-hover: rgba(255, 255, 255, 0.15);
+    --bg-hint: rgba(255, 255, 255, 0.08);
+    --color-primary: #00d4ff;
+    --color-primary-hover: #00bfea;
+    --color-accent: #0099ff;
+    --color-success: #00ff88;
+    --text-primary: #ffffff;
+    --text-secondary: rgba(255, 255, 255, 0.7);
+    --text-hint: rgba(255, 255, 255, 0.6);
+    --border-color: rgba(255, 255, 255, 0.18);
+    --border-focus: rgba(255, 255, 255, 0.4);
+    --shadow-sm: 0 8px 32px rgba(0, 0, 0, 0.3);
+    --shadow-md: 0 12px 48px rgba(0, 0, 0, 0.4);
+    --shadow-hover: 0 16px 64px rgba(0, 0, 0, 0.5);
+    --radius-sm: 12px;
+    --radius-md: 16px;
+    --radius-lg: 20px;
+    --transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    --glass-blur: blur(10px);
+}
+/* ========================================
+   主题 3: Minimal Monochrome (极简黑白)
+   ======================================== */
+[data-theme="minimal"] {
+    --bg-primary: #fafafa;
+    --bg-container: #ffffff;
+    --bg-input: #ffffff;
+    --bg-input-hover: #f5f5f5;
+    --bg-hint: #f9f9f9;
+    --color-primary: #0066ff;
+    --color-primary-hover: #0052cc;
+    --color-accent: #000000;
+    --color-success: #000000;
+    --text-primary: #000000;
+    --text-secondary: #666666;
+    --text-hint: #999999;
+    --border-color: #e5e5e5;
+    --border-focus: #000000;
+    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
+    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
+    --shadow-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
+    --radius-sm: 4px;
+    --radius-md: 6px;
+    --radius-lg: 8px;
+    --transition: all 0.2s ease;
+}
+/* ========================================
+   主题 4: Tech Gradient (现代科技)
+   ======================================== */
+[data-theme="tech"] {
+    --bg-primary: linear-gradient(135deg, #e0e7ff 0%, #f0f4f8 100%);
+    --bg-container: rgba(255, 255, 255, 0.9);
+    --bg-input: #ffffff;
+    --bg-input-hover: #f8fafc;
+    --bg-hint: #f1f5f9;
+    --color-primary: #3b82f6;
+    --color-primary-hover: #2563eb;
+    --color-accent: #6366f1;
+    --color-success: #10b981;
+    --text-primary: #1e293b;
+    --text-secondary: #64748b;
+    --text-hint: #94a3b8;
+    --border-color: #cbd5e1;
+    --border-focus: #3b82f6;
+    --shadow-sm: 0 4px 12px rgba(59, 130, 246, 0.1);
+    --shadow-md: 0 8px 24px rgba(59, 130, 246, 0.15);
+    --shadow-hover: 0 12px 32px rgba(59, 130, 246, 0.2);
+    --radius-sm: 10px;
+    --radius-md: 14px;
+    --radius-lg: 18px;
+    --transition: all 0.3s ease-out;
+}
+/* ========================================
+   全局布局
+   ======================================== */
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    background: var(--bg-primary);
+    min-height: 100vh;
+    padding: 20px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: var(--transition);
+}
+/* 玻璃主题特殊处理 */
+[data-theme="glass"] body,
+[data-theme="tech"] body {
+    background-image: var(--bg-primary);
+}
+.container {
+    background: var(--bg-container);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-md);
+    max-width: 600px;
+    width: 100%;
+    padding: 40px;
+    transition: var(--transition);
+}
+/* 玻璃效果 */
+[data-theme="glass"] .container {
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border: 1px solid var(--border-color);
+}
+/* ========================================
+   主题切换器
+   ======================================== */
+.theme-switcher {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    gap: 8px;
+    background: var(--bg-container);
+    padding: 8px;
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-sm);
+    z-index: 1000;
+}
+[data-theme="glass"] .theme-switcher {
+    backdrop-filter: var(--glass-blur);
+    -webkit-backdrop-filter: var(--glass-blur);
+    border: 1px solid var(--border-color);
+}
+.theme-btn {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 4px;
+    padding: 10px 12px;
+    background: transparent;
+    border: 2px solid transparent;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: var(--transition);
+    color: var(--text-primary);
+}
+.theme-btn:hover {
+    background: var(--bg-input-hover);
+    border-color: var(--color-primary);
+}
+.theme-btn.active {
+    background: var(--color-primary);
+    color: white;
+    border-color: var(--color-primary);
+}
+.theme-icon {
+    font-size: 20px;
+}
+.theme-name {
+    font-size: 11px;
+    font-weight: 600;
+}
+/* ========================================
+   标题和文字
+   ======================================== */
+h1 {
+    color: var(--text-primary);
+    margin-bottom: 10px;
+    font-size: 28px;
+    text-align: center;
+    font-weight: 700;
+    transition: var(--transition);
+}
+.subtitle {
+    color: var(--text-secondary);
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 14px;
+    transition: var(--transition);
+}
+/* ========================================
+   表单元素
+   ======================================== */
+.form-group {
+    margin-bottom: 25px;
+}
+label {
+    display: block;
+    color: var(--text-primary);
+    font-weight: 600;
+    margin-bottom: 8px;
+    font-size: 14px;
+    transition: var(--transition);
+}
+/* 文件上传区域 */
+.file-input-wrapper {
+    position: relative;
+    border: 2px dashed var(--border-color);
+    border-radius: var(--radius-md);
+    padding: 30px;
+    text-align: center;
+    background: var(--bg-input);
+    cursor: pointer;
+    transition: var(--transition);
+}
+.file-input-wrapper:hover {
+    border-color: var(--color-primary);
+    background: var(--bg-input-hover);
+}
+.file-input-wrapper input[type="file"] {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    opacity: 0;
+    cursor: pointer;
+}
+.file-label {
+    color: var(--color-primary);
+    font-weight: 600;
+    transition: var(--transition);
+}
+.file-hint {
+    font-size: 12px;
+    color: var(--text-hint);
+    margin-top: 8px;
+}
+.selected-file {
+    margin-top: 10px;
+    color: var(--color-success);
+    font-size: 13px;
+    font-weight: 500;
+}
+/* 下拉选择框 */
+select {
+    width: 100%;
+    padding: 12px;
+    border: 2px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    font-size: 14px;
+    background: var(--bg-input);
+    color: var(--text-primary);
+    transition: var(--transition);
+    cursor: pointer;
+}
+select:focus {
+    outline: none;
+    border-color: var(--border-focus);
+}
+/* 单选按钮组 */
+.radio-group {
+    display: flex;
+    gap: 20px;
+    flex-wrap: wrap;
+}
+.radio-label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    font-weight: normal;
+    color: var(--text-primary);
+    transition: var(--transition);
+}
+.radio-label input[type="radio"] {
+    margin-right: 8px;
+    cursor: pointer;
+    accent-color: var(--color-primary);
+}
+/* 滑块 */
+.slider-container {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+}
+input[type="range"] {
+    flex: 1;
+    height: 6px;
+    border-radius: 3px;
+    background: var(--border-color);
+    outline: none;
+    -webkit-appearance: none;
+}
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    cursor: pointer;
+    transition: var(--transition);
+}
+input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 8px rgba(0, 113, 227, 0.1);
+}
+input[type="range"]::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--color-primary);
+    cursor: pointer;
+    border: none;
+}
+.slider-value {
+    min-width: 45px;
+    text-align: center;
+    font-weight: 700;
+    color: var(--color-primary);
+    font-size: 18px;
+    transition: var(--transition);
+}
+/* 参数提示 */
+.param-hint {
+    background: var(--bg-hint);
+    padding: 12px;
+    border-radius: var(--radius-sm);
+    font-size: 13px;
+    color: var(--text-hint);
+    margin-top: 10px;
+    border-left: 4px solid var(--color-primary);
+    transition: var(--transition);
+}
+/* ========================================
+   按钮
+   ======================================== */
+.submit-btn {
+    width: 100%;
+    padding: 15px;
+    background: var(--color-primary);
+    color: white;
+    border: none;
+    border-radius: var(--radius-md);
+    font-size: 16px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: var(--transition);
+    box-shadow: var(--shadow-sm);
+}
+.submit-btn:hover:not(:disabled) {
+    background: var(--color-primary-hover);
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-hover);
+}
+.submit-btn:active:not(:disabled) {
+    transform: translateY(0);
+}
+.submit-btn:disabled {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+/* Minimal 主题按钮特殊样式 */
+[data-theme="minimal"] .submit-btn {
+    background: var(--text-primary);
+}
+[data-theme="minimal"] .submit-btn:hover:not(:disabled) {
+    background: var(--color-primary);
+}
+/* ========================================
+   底部链接
+   ======================================== */
+.links {
+    margin-top: 25px;
+    text-align: center;
+    padding-top: 25px;
+    border-top: 1px solid var(--border-color);
+}
+.links a {
+    color: var(--color-primary);
+    text-decoration: none;
+    margin: 0 15px;
+    font-size: 14px;
+    font-weight: 500;
+    transition: var(--transition);
+}
+.links a:hover {
+    text-decoration: underline;
+    color: var(--color-primary-hover);
+}
+/* ========================================
+   响应式设计
+   ======================================== */
+@media (max-width: 768px) {
+    .container {
+        padding: 30px 20px;
+    }
+    .theme-switcher {
+        top: 10px;
+        right: 10px;
+        padding: 6px;
+        gap: 6px;
+    }
+    .theme-btn {
+        padding: 8px 10px;
+    }
+    .theme-icon {
+        font-size: 18px;
+    }
+    .theme-name {
+        font-size: 10px;
+    }
+    h1 {
+        font-size: 24px;
+    }
+    .radio-group {
+        flex-direction: column;
+        gap: 12px;
+    }
+}
+/* ========================================
+   动画效果
+   ======================================== */
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+.container {
+    animation: fadeIn 0.5s ease-out;
+}
+/* 主题切换过渡动画 */
+body,
+.container,
+h1,
+.subtitle,
+label,
+.file-label,
+.radio-label,
+.slider-value,
+.param-hint,
+select,
+.submit-btn,
+.links a {
+    transition: var(--transition);
+}

static/js/app.js ADDED Viewed

	@@ -0,0 +1,252 @@

+/**
+ * Magick 图像转换器 - 前端交互逻辑
+ * 功能：主题切换、文件上传、参数调整、表单提交
+ */
+(function() {
+    'use strict';
+    // ==========================================
+    // 1. 主题切换功能
+    // ==========================================
+    const THEME_KEY = 'magick-theme-preference';
+    const themeBtns = document.querySelectorAll('.theme-btn');
+    const body = document.body;
+    /**
+     * 应用主题到页面
+     * @param {string} theme - 主题名称 (apple|glass|minimal|tech)
+     */
+    function applyTheme(theme) {
+        body.setAttribute('data-theme', theme);
+        // 更新按钮激活状态
+        themeBtns.forEach(btn => {
+            if (btn.dataset.theme === theme) {
+                btn.classList.add('active');
+            } else {
+                btn.classList.remove('active');
+            }
+        });
+        // 保存到 localStorage
+        try {
+            localStorage.setItem(THEME_KEY, theme);
+        } catch (e) {
+            console.warn('无法保存主题偏好:', e);
+        }
+    }
+    /**
+     * 加载用户保存的主题偏好
+     */
+    function loadThemePreference() {
+        try {
+            const savedTheme = localStorage.getItem(THEME_KEY);
+            if (savedTheme && ['apple', 'glass', 'minimal', 'tech'].includes(savedTheme)) {
+                return savedTheme;
+            }
+        } catch (e) {
+            console.warn('无法读取主题偏好:', e);
+        }
+        return 'apple'; // 默认主题
+    }
+    // 初始化主题
+    const initialTheme = loadThemePreference();
+    applyTheme(initialTheme);
+    // 绑定主题切换按钮事件
+    themeBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            const theme = btn.dataset.theme;
+            applyTheme(theme);
+        });
+    });
+    // ==========================================
+    // 2. 文件上传交互
+    // ==========================================
+    const fileInput = document.getElementById('fileInput');
+    const selectedFile = document.getElementById('selectedFile');
+    const fileInputWrapper = document.querySelector('.file-input-wrapper');
+    /**
+     * 显示已选择的文件名
+     */
+    fileInput.addEventListener('change', function() {
+        if (this.files.length > 0) {
+            const file = this.files[0];
+            const fileName = file.name;
+            const fileSize = (file.size / (1024 * 1024)).toFixed(2); // MB
+            selectedFile.textContent = `✓ 已选择: ${fileName} (${fileSize} MB)`;
+        } else {
+            selectedFile.textContent = '';
+        }
+    });
+    /**
+     * 拖拽上传功能
+     */
+    fileInputWrapper.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        fileInputWrapper.style.borderColor = 'var(--color-primary)';
+        fileInputWrapper.style.background = 'var(--bg-input-hover)';
+    });
+    fileInputWrapper.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        fileInputWrapper.style.borderColor = 'var(--border-color)';
+        fileInputWrapper.style.background = 'var(--bg-input)';
+    });
+    fileInputWrapper.addEventListener('drop', (e) => {
+        e.preventDefault();
+        fileInputWrapper.style.borderColor = 'var(--border-color)';
+        fileInputWrapper.style.background = 'var(--bg-input)';
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            fileInput.files = files;
+            // 触发 change 事件以显示文件名
+            const event = new Event('change');
+            fileInput.dispatchEvent(event);
+        }
+    });
+    // ==========================================
+    // 3. 质量参数滑块交互
+    // ==========================================
+    const slider = document.getElementById('setting');
+    const sliderValue = document.getElementById('settingValue');
+    const paramHint = document.getElementById('paramHint');
+    const modeRadios = document.querySelectorAll('input[name="mode"]');
+    /**
+     * 更新参数提示文本
+     */
+    function updateHint() {
+        const mode = document.querySelector('input[name="mode"]:checked').value;
+        const value = parseInt(slider.value);
+        sliderValue.textContent = value;
+        if (mode === 'lossy') {
+            // 有损模式：质量提示
+            let quality = '中等';
+            if (value >= 90) quality = '极高';
+            else if (value >= 80) quality = '高';
+            else if (value >= 60) quality = '中等';
+            else if (value >= 40) quality = '中低';
+            else quality = '低';
+            paramHint.textContent = `质量: ${value} - ${quality}质量 (0=最低质量，100=最高质量)`;
+        } else {
+            // 无损模式：压缩速度提示
+            let speed = '平衡';
+            if (value <= 20) speed = '最慢/最佳压缩';
+            else if (value <= 40) speed = '较慢/较好压缩';
+            else if (value <= 60) speed = '平衡';
+            else if (value <= 80) speed = '较快/较差压缩';
+            else speed = '最快/最差压缩';
+            paramHint.textContent = `压缩速度: ${value} - ${speed} (0=最慢/最佳，100=最快/最差)`;
+        }
+    }
+    // 滑块移动时更新
+    slider.addEventListener('input', updateHint);
+    /**
+     * 模式切换时自动调整质量值
+     */
+    modeRadios.forEach(radio => {
+        radio.addEventListener('change', function() {
+            const mode = document.querySelector('input[name="mode"]:checked').value;
+            if (mode === 'lossless') {
+                // 无损模式：默认最佳质量（0=最慢/最佳压缩）
+                slider.value = 0;
+            } else {
+                // 有损模式：默认中等质量（80=高质量）
+                slider.value = 80;
+            }
+            updateHint();
+        });
+    });
+    // 初始化提示
+    updateHint();
+    // ==========================================
+    // 4. 表单提交处理
+    // ==========================================
+    const form = document.getElementById('uploadForm');
+    const submitBtn = form.querySelector('.submit-btn');
+    const originalBtnText = submitBtn.textContent;
+    form.addEventListener('submit', function(e) {
+        // 显示加载状态
+        submitBtn.textContent = '⏳ 转换中...';
+        submitBtn.disabled = true;
+        // 如果表单提交失败，需要恢复按钮状态
+        // 这里使用 setTimeout 作为后备方案
+        setTimeout(() => {
+            if (submitBtn.disabled) {
+                submitBtn.textContent = originalBtnText;
+                submitBtn.disabled = false;
+            }
+        }, 60000); // 60秒超时恢复
+    });
+    // ==========================================
+    // 5. 键盘快捷键
+    // ==========================================
+    document.addEventListener('keydown', function(e) {
+        // Ctrl/Cmd + K: 聚焦文件输入
+        if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+            e.preventDefault();
+            fileInput.click();
+        }
+        // Ctrl/Cmd + 1-4: 切换主题
+        if ((e.ctrlKey || e.metaKey) && e.key >= '1' && e.key <= '4') {
+            e.preventDefault();
+            const themes = ['apple', 'glass', 'minimal', 'tech'];
+            const themeIndex = parseInt(e.key) - 1;
+            applyTheme(themes[themeIndex]);
+        }
+    });
+    // ==========================================
+    // 6. 工具函数 - 参数验证
+    // ==========================================
+    /**
+     * 验证文件大小（客户端预检查）
+     */
+    fileInput.addEventListener('change', function() {
+        if (this.files.length > 0) {
+            const file = this.files[0];
+            const maxSize = 200 * 1024 * 1024; // 200MB
+            if (file.size > maxSize) {
+                alert(`文件过大！最大支持 200MB，当前文件: ${(file.size / (1024 * 1024)).toFixed(2)} MB`);
+                this.value = ''; // 清空选择
+                selectedFile.textContent = '';
+                return;
+            }
+        }
+    });
+    // ==========================================
+    // 7. 初始化完成提示
+    // ==========================================
+    console.log('%c🧙‍♂️ Magick 图像转换器', 'font-size: 20px; font-weight: bold; color: #0071e3;');
+    console.log('%c✨ 前端已加载完成', 'color: #30d158;');
+    console.log('%c快捷键提示:', 'font-weight: bold;');
+    console.log('  Ctrl/Cmd + K: 打开文件选择');
+    console.log('  Ctrl/Cmd + 1-4: 切换主题 (1:Apple, 2:Glass, 3:Minimal, 4:Tech)');
+})();

templates/index.html ADDED Viewed

	@@ -0,0 +1,103 @@

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Magick 图像转换器</title>
+    <link rel="stylesheet" href="/static/css/themes.css">
+</head>
+<body>
+    <!-- 主题切换器 -->
+    <div class="theme-switcher">
+        <button class="theme-btn" data-theme="apple">
+            <span class="theme-icon">🍎</span>
+            <span class="theme-name">Apple</span>
+        </button>
+        <button class="theme-btn" data-theme="glass">
+            <span class="theme-icon">💎</span>
+            <span class="theme-name">Glass</span>
+        </button>
+        <button class="theme-btn" data-theme="minimal">
+            <span class="theme-icon">🖤</span>
+            <span class="theme-name">Minimal</span>
+        </button>
+        <button class="theme-btn" data-theme="tech">
+            <span class="theme-icon">🚀</span>
+            <span class="theme-name">Tech</span>
+        </button>
+    </div>
+    <div class="container">
+        <h1>🧙‍♂️ Magick 图像转换器</h1>
+        <p class="subtitle">支持多格式转换 | 有损/无损模式 | 支持动画图像</p>
+        <form id="uploadForm" action="/" method="POST" enctype="multipart/form-data">
+            <!-- 文件上传区域 -->
+            <div class="form-group">
+                <label>选择图像文件</label>
+                <div class="file-input-wrapper">
+                    <input type="file" name="file" id="fileInput" accept="image/*" required>
+                    <div class="file-label">
+                        📁 点击选择或拖拽文件到此处
+                        <div class="file-hint">
+                            支持 JPG, PNG, GIF, WebP, AVIF, HEIF 等格式
+                        </div>
+                    </div>
+                </div>
+                <div id="selectedFile" class="selected-file"></div>
+            </div>
+            <!-- 目标格式选择 -->
+            <div class="form-group">
+                <label for="target_format">目标格式</label>
+                <select name="target_format" id="target_format" required>
+                    <option value="webp">WebP - 现代高效格式</option>
+                    <option value="avif">AVIF - 最新一代格式</option>
+                    <option value="jpeg">JPEG - 经典有损格式</option>
+                    <option value="png">PNG - 无损格式</option>
+                    <option value="gif">GIF - 动画格式</option>
+                    <option value="heif" selected>HEIF - 高效图像格式</option>
+                </select>
+            </div>
+            <!-- 转换模式选择 -->
+            <div class="form-group">
+                <label>转换模式</label>
+                <div class="radio-group">
+                    <label class="radio-label">
+                        <input type="radio" name="mode" value="lossy">
+                        有损压缩 (更小体积)
+                    </label>
+                    <label class="radio-label">
+                        <input type="radio" name="mode" value="lossless" checked>
+                        无损压缩 (保持质量)
+                    </label>
+                </div>
+            </div>
+            <!-- 质量参数滑块 -->
+            <div class="form-group">
+                <label for="setting">质量参数</label>
+                <div class="slider-container">
+                    <input type="range" name="setting" id="setting" min="0" max="100" value="0">
+                    <span class="slider-value" id="settingValue">0</span>
+                </div>
+                <div class="param-hint" id="paramHint">
+                    压缩速度: 0 - 最慢/最佳压缩 (0=最慢/最佳，100=最快/最差)
+                </div>
+            </div>
+            <!-- 提交按钮 -->
+            <button type="submit" class="submit-btn">🚀 开始转换</button>
+        </form>
+        <!-- 底部链接 -->
+        <div class="links">
+            <a href="/docs" target="_blank">📖 API 文档</a>
+            <a href="/health" target="_blank">🏥 健康检查</a>
+        </div>
+    </div>
+    <script src="/static/js/app.js"></script>
+</body>
+</html>