Add UTM tracking

app.py

@@ -1,506 +1,514 @@
-"""
-FLUX 2 Klein 9B Edit - Powered by WaveSpeed AI
-Auto-generated by Space Generator
-"""
-
-import gradio as gr
-import requests
-import time
-from typing import Dict, Any
-
-# ============ API Configuration ============
-WAVESPEED_API_BASE = "https://api.wavespeed.ai/api/v3"
-UPLOAD_ENDPOINT = "https://api.wavespeed.ai/api/v3/media/upload/binary"
-MODEL_ENDPOINT = "wavespeed-ai/flux-2-klein-9b/edit"
-POLL_INTERVAL = 1.5
-POLL_MAX_SECONDS = 120
-
-
-
-# ============ CSS ============
-CUSTOM_CSS = """
-/* ===== Base Styles ===== */
-html, body, .gradio-container {
-    background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 50%, #e0e7ff 100%) !important;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
-}
-
-.gradio-container {
-    max-width: 960px !important;
-    margin: 0 auto !important;
-    padding: 24px !important;
-}
-
-/* ===== Hero Section ===== */
-.hero-container {
-    text-align: center;
-    padding: 48px 20px 36px;
-}
-
-.hero-badge {
-    display: inline-block;
-    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-    padding: 10px 24px;
-    border-radius: 50px;
-    font-size: 0.7rem;
-    color: #fff;
-    font-weight: 700;
-    letter-spacing: 1.5px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35);
-}
-
-.hero-title {
-    font-size: 3rem;
-    font-weight: 800;
-    margin: 0 0 16px 0;
-    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    letter-spacing: -0.5px;
-}
-
-.hero-desc {
-    font-size: 1.05rem;
-    color: #64748b;
-    max-width: 100%;
-    margin: 0 auto 20px;
-    line-height: 1.6;
-}
-
-.hero-badges {
-    display: flex;
-    gap: 28px;
-    justify-content: center;
-    flex-wrap: wrap;
-}
-
-.hero-badges span {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    color: #475569;
-    font-size: 0.9rem;
-    font-weight: 600;
-}
-
-/* ===== Hero Image ===== */
-.hero-image {
-    max-width: 100%;
-    max-height: 300px;
-    border-radius: 16px;
-    margin: 24px auto;
-    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
-}
-
-/* ===== Main Card ===== */
-.main-card {
-    background: #ffffff;
-    border: 1px solid rgba(139, 92, 246, 0.1);
-    border-radius: 20px;
-    padding: 28px;
-    margin-bottom: 20px;
-    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
-    transition: box-shadow 0.3s ease;
-}
-
-.main-card:hover {
-    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
-}
-
-/* ===== API Key Section ===== */
-.api-key-row {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    margin-bottom: 12px;
-}
-
-.api-key-label {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: #1e293b;
-    font-weight: 700;
-    font-size: 1rem;
-}
-
-.get-key-btn {
-    padding: 10px 20px;
-    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
-    border: none;
-    border-radius: 10px;
-    color: #fff !important;
-    text-decoration: none;
-    font-weight: 600;
-    font-size: 0.85rem;
-    transition: all 0.25s ease;
-    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
-}
-
-.get-key-btn:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
-    color: #fff;
-}
-
-/* ===== Section Title ===== */
-.section-title {
-    color: #1e293b;
-    font-weight: 700;
-    font-size: 1rem;
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    margin-bottom: 16px;
-}
-
-/* ===== Upload Area ===== */
-.upload-area {
-    border: 2px dashed rgba(139, 92, 246, 0.3) !important;
-    border-radius: 16px !important;
-    background: linear-gradient(145deg, #faf5ff 0%, #f5f3ff 100%) !important;
-    transition: all 0.3s ease !important;
-    min-height: 220px !important;
-}
-
-.upload-area:hover {
-    border-color: rgba(139, 92, 246, 0.5) !important;
-    background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%) !important;
-}
-
-/* ===== Result Area ===== */
-.result-area {
-    border: 2px solid rgba(139, 92, 246, 0.15) !important;
-    border-radius: 16px !important;
-    background: #fafafa !important;
-    min-height: 220px !important;
-}
-
-/* ===== Button Styling ===== */
-.primary-btn {
-    width: 100%;
-    margin-top: 20px !important;
-    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
-    border: none !important;
-    color: #fff !important;
-    font-weight: 700 !important;
-    font-size: 1rem !important;
-    padding: 14px 28px !important;
-    border-radius: 12px !important;
-    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35) !important;
-    transition: all 0.25s ease !important;
-    cursor: pointer !important;
-}
-
-.primary-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.45) !important;
-}
-
-/* ===== CTA Section ===== */
-.cta-container {
-    text-align: center;
-    padding: 44px 32px;
-    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
-    border-radius: 20px;
-    margin-top: 8px;
-    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.35);
-    position: relative;
-    overflow: hidden;
-}
-
-.cta-container::before {
-    content: '';
-    position: absolute;
-    top: -50%;
-    right: -50%;
-    width: 100%;
-    height: 100%;
-    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
-    pointer-events: none;
-}
-
-.cta-title {
-    color: #fff;
-    font-size: 1.5rem;
-    font-weight: 800;
-    margin: 0 0 8px 0;
-    position: relative;
-}
-
-.cta-desc {
-    color: rgba(255, 255, 255, 0.9);
-    font-size: 1rem;
-    margin: 0 0 24px 0;
-    position: relative;
-}
-
-.cta-btn {
-    display: inline-block;
-    padding: 14px 36px;
-    background: #fff;
-    border-radius: 12px;
-    color: #7c3aed !important;
-    text-decoration: none;
-    font-weight: 700;
-    font-size: 1rem;
-    transition: all 0.25s ease;
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
-    position: relative;
-}
-
-.cta-btn:hover {
-    transform: translateY(-3px);
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
-    color: #6d28d9 !important;
-}
-
-/* ===== Hide Elements ===== */
-footer { display: none !important; }
-
-/* ===== Input Styling ===== */
-.gradio-container input[type="password"],
-.gradio-container input[type="text"] {
-    border: 2px solid #e2e8f0 !important;
-    border-radius: 12px !important;
-    padding: 14px 16px !important;
-    font-size: 0.95rem !important;
-    transition: all 0.2s ease !important;
-}
-
-.gradio-container input[type="password"]:focus,
-.gradio-container input[type="text"]:focus {
-    border-color: #8b5cf6 !important;
-    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
-    outline: none !important;
-}
-"""
-
-
-# ============ API Functions ============
-def upload_image(api_key: str, file_path: str) -> str:
-    headers = {"Authorization": f"Bearer {api_key.strip()}"}
-    with open(file_path, "rb") as f:
-        resp = requests.post(UPLOAD_ENDPOINT, headers=headers, files={"file": f}, timeout=60)
-    if resp.status_code == 401:
-        raise Exception("Invalid API Key")
-    elif resp.status_code >= 400:
-        raise Exception(f"Upload failed: {resp.status_code}")
-    data = resp.json()
-    if data.get("code") != 200:
-        raise Exception(data.get("message", "Upload failed"))
-    return data.get("data", {}).get("download_url")
-
-
-def call_api(api_key: str, endpoint: str, payload: Dict[str, Any]) -> Dict[str, Any]:
-    headers = {"Authorization": f"Bearer {api_key.strip()}", "Content-Type": "application/json"}
-    resp = requests.post(f"{WAVESPEED_API_BASE}/{endpoint}", json=payload, headers=headers, timeout=30)
-    if resp.status_code == 401:
-        raise Exception("Invalid API Key")
-    elif resp.status_code == 429:
-        raise Exception("Quota exceeded")
-    elif resp.status_code >= 400:
-        raise Exception(f"API error: {resp.status_code}")
-    data = resp.json()
-    if data.get("code") != 200:
-        raise Exception(data.get("message", "Unknown error"))
-    return data.get("data", {})
-
-
-def poll_result(api_key: str, request_id: str) -> Dict[str, Any]:
-    headers = {"Authorization": f"Bearer {api_key.strip()}"}
-    url = f"{WAVESPEED_API_BASE}/predictions/{request_id}/result"
-    start_time = time.time()
-    while time.time() - start_time < POLL_MAX_SECONDS:
-        resp = requests.get(url, headers=headers, timeout=30)
-        if resp.status_code >= 400:
-            raise Exception("Failed to get result")
-        result = resp.json().get("data", {})
-        status = result.get("status", "")
-        if status == "completed":
-            return result
-        elif status == "failed":
-            raise Exception("Generation failed")
-        time.sleep(POLL_INTERVAL)
-    raise Exception("Timeout")
-
-
-def download_video(url: str) -> str:
-    """下载视频到临时文件，返回文件路径"""
-    import tempfile
-    import os
-    try:
-        resp = requests.get(url, timeout=120, stream=True)
-        if resp.status_code != 200:
-            return None
-        # 从 URL 或 Content-Type 确定扩展名
-        ext = ".mp4"
-        if "webm" in url.lower() or "webm" in resp.headers.get("content-type", ""):
-            ext = ".webm"
-        # 创建临时文件
-        fd, path = tempfile.mkstemp(suffix=ext)
-        with os.fdopen(fd, 'wb') as f:
-            for chunk in resp.iter_content(chunk_size=8192):
-                f.write(chunk)
-        return path
-    except Exception as e:
-        print(f"Download error: {e}")
-        return None
-
-
-def process(api_key: str, image_path: str, prompt: str):
-    if not api_key or not api_key.strip():
-        gr.Warning("Please enter your API Key")
-        return None
-    if not image_path:
-        gr.Warning("Please upload an image")
-        return None
-    if not prompt or not prompt.strip():
-        gr.Warning("Please enter a prompt")
-        return None
-
-    try:
-        gr.Info("Uploading image...")
-        image_url = upload_image(api_key, image_path)
-
-        gr.Info("Processing...")
-        payload = {
-            "images": [image_url],
-            "prompt": prompt.strip(),
-            "enable_base64_output": False,
-            "enable_sync_mode": False,
-            "seed": -1,
-        }
-        result = call_api(api_key, MODEL_ENDPOINT, payload)
-        request_id = result.get("id")
-        if not request_id:
-            gr.Warning("Failed to start")
-            return None
-
-        final_result = poll_result(api_key, request_id)
-        outputs = final_result.get("outputs", [])
-        if outputs:
-            gr.Info("Done!")
-            return outputs[0]
-        return None
-
-    except Exception as e:
-        error_msg = str(e).lower()
-        if "invalid" in error_msg or "401" in error_msg:
-            gr.Warning("Invalid API Key")
-        elif "quota" in error_msg or "429" in error_msg:
-            gr.Warning("Quota exceeded")
-        elif "timeout" in error_msg:
-            gr.Warning("Timeout - please try again")
-        else:
-            gr.Warning(str(e))
-        return None
-
-
-# ============ Gradio UI ============
-with gr.Blocks(css=CUSTOM_CSS, title="FLUX 2 Klein 9B Edit - WaveSpeed") as demo:
-
-    # Hero Section
-    gr.HTML("""
-        <div class="hero-container">
-            <div class="hero-badge">WAVESPEED AI</div>
-            <h1 class="hero-title">FLUX 2 Klein 9B Edit</h1>
-            <p class="hero-desc">AI-powered image editing with FLUX 2 Klein 9B. Try on <a href="https://wavespeed.ai" target="_blank" style="color: #8b5cf6; text-decoration: none; font-weight: 600;">wavespeed</a></p>
-            <div class="hero-badges">
-                <span>
-                    <svg width="18" height="18" fill="#10b981" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                    Fast Processing
-                </span>
-                <span>
-                    <svg width="18" height="18" fill="#10b981" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                    High Quality
-                </span>
-                <span>
-                    <svg width="18" height="18" fill="#10b981" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
-                    Easy to Use
-                </span>
-            </div>
-        </div>
-    """)
-
-    
-
-    # API Key Card
-    with gr.Group(elem_classes="main-card"):
-        gr.HTML("""
-            <div class="api-key-row">
-                <span class="api-key-label">
-                    <svg width="20" height="20" fill="#8b5cf6" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd"/></svg>
-                    API Key
-                </span>
-                <a href="https://wavespeed.ai/accesskey" target="_blank" class="get-key-btn">Get API Key</a>
-            </div>
-        """)
-        api_key_input = gr.Textbox(
-            placeholder="Enter your WaveSpeed API key",
-            type="password",
-            show_label=False
-        )
-
-    # Main Content Card
-    with gr.Group(elem_classes="main-card"):
-        with gr.Row():
-            # Left Column - Input
-            with gr.Column(scale=1):
-                gr.HTML("""
-                    <div class="section-title">
-                        <svg width="20" height="20" fill="#8b5cf6" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/></svg>
-                        Upload Image
-                    </div>
-                """)
-                image_input = gr.Image(
-                    label="Upload Image",
-                    type="filepath",
-                    source="upload",
-                    elem_classes=["upload-area"]
-                )
-                prompt_input = gr.Textbox(
-                    label="Prompt",
-                    placeholder="Describe what you want...",
-                    lines=3
-                )
-                submit_btn = gr.Button("Process", variant="primary", elem_classes="primary-btn")
-
-            # Right Column - Output
-            with gr.Column(scale=1):
-                gr.HTML("""
-                    <div class="section-title">
-                        <svg width="20" height="20" fill="#8b5cf6" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg>
-                        Result
-                    </div>
-                """)
-                output_image = gr.Image(
-                    label="",
-                    type="filepath",
-                    interactive=False,
-                    elem_classes=["hide-label", "result-area"]
-                )
-
-    # CTA Section
-    gr.HTML("""
-        <div class="cta-container">
-            <h3 class="cta-title">Want More Features?</h3>
-            <p class="cta-desc">Higher resolutions, batch processing, and 700+ AI models</p>
-            <a href="https://wavespeed.ai/models" target="_blank" class="cta-btn">
-                Explore WaveSpeed.ai
-            </a>
-        </div>
-    """)
-
-    # Event binding
-    submit_btn.click(
-        fn=process,
-        inputs=[api_key_input, image_input, prompt_input],
-        outputs=output_image,
-    )
-
-
-if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860)
+"""
+FLUX 2 Klein 9B Edit - Powered by WaveSpeed AI
+Auto-generated by Space Generator
+"""
+
+import gradio as gr
+import requests
+import time
+from typing import Dict, Any
+
+# ============ API Configuration ============
+WAVESPEED_API_BASE = "https://api.wavespeed.ai/api/v3"
+UPLOAD_ENDPOINT = "https://api.wavespeed.ai/api/v3/media/upload/binary"
+MODEL_ENDPOINT = "wavespeed-ai/flux-2-klein-9b/edit"
+POLL_INTERVAL = 1.5
+POLL_MAX_SECONDS = 120
+
+
+
+
+# ============ UTM Tracking ============
+UTM_CAMPAIGN = "flux2_klein_9b_edit"
+
+def add_utm(base_url: str, content: str) -> str:
+    separator = "&" if "?" in base_url else "?"
+    return f"{base_url}{separator}utm_source=huggingface&utm_medium=space&utm_campaign={UTM_CAMPAIGN}&utm_content={content}"
+
+# ============ CSS ============
+CUSTOM_CSS = """
+/* ===== Base Styles ===== */
+html, body, .gradio-container {
+    background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 50%, #e0e7ff 100%) !important;
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
+}
+
+.gradio-container {
+    max-width: 960px !important;
+    margin: 0 auto !important;
+    padding: 24px !important;
+}
+
+/* ===== Hero Section ===== */
+.hero-container {
+    text-align: center;
+    padding: 48px 20px 36px;
+}
+
+.hero-badge {
+    display: inline-block;
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+    padding: 10px 24px;
+    border-radius: 50px;
+    font-size: 0.7rem;
+    color: #fff;
+    font-weight: 700;
+    letter-spacing: 1.5px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 20px rgba(139, 92, 246, 0.35);
+}
+
+.hero-title {
+    font-size: 3rem;
+    font-weight: 800;
+    margin: 0 0 16px 0;
+    background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 50%, #a78bfa 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    letter-spacing: -0.5px;
+}
+
+.hero-desc {
+    font-size: 1.05rem;
+    color: #64748b;
+    max-width: 100%;
+    margin: 0 auto 20px;
+    line-height: 1.6;
+}
+
+.hero-badges {
+    display: flex;
+    gap: 28px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.hero-badges span {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: #475569;
+    font-size: 0.9rem;
+    font-weight: 600;
+}
+
+/* ===== Hero Image ===== */
+.hero-image {
+    max-width: 100%;
+    max-height: 300px;
+    border-radius: 16px;
+    margin: 24px auto;
+    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.15);
+}
+
+/* ===== Main Card ===== */
+.main-card {
+    background: #ffffff;
+    border: 1px solid rgba(139, 92, 246, 0.1);
+    border-radius: 20px;
+    padding: 28px;
+    margin-bottom: 20px;
+    box-shadow: 0 4px 24px rgba(139, 92, 246, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
+    transition: box-shadow 0.3s ease;
+}
+
+.main-card:hover {
+    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
+}
+
+/* ===== API Key Section ===== */
+.api-key-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.api-key-label {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    color: #1e293b;
+    font-weight: 700;
+    font-size: 1rem;
+}
+
+.get-key-btn {
+    padding: 10px 20px;
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
+    border: none;
+    border-radius: 10px;
+    color: #fff !important;
+    text-decoration: none;
+    font-weight: 600;
+    font-size: 0.85rem;
+    transition: all 0.25s ease;
+    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
+}
+
+.get-key-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
+    color: #fff;
+}
+
+/* ===== Section Title ===== */
+.section-title {
+    color: #1e293b;
+    font-weight: 700;
+    font-size: 1rem;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 16px;
+}
+
+/* ===== Upload Area ===== */
+.upload-area {
+    border: 2px dashed rgba(139, 92, 246, 0.3) !important;
+    border-radius: 16px !important;
+    background: linear-gradient(145deg, #faf5ff 0%, #f5f3ff 100%) !important;
+    transition: all 0.3s ease !important;
+    min-height: 220px !important;
+}
+
+.upload-area:hover {
+    border-color: rgba(139, 92, 246, 0.5) !important;
+    background: linear-gradient(145deg, #f5f3ff 0%, #ede9fe 100%) !important;
+}
+
+/* ===== Result Area ===== */
+.result-area {
+    border: 2px solid rgba(139, 92, 246, 0.15) !important;
+    border-radius: 16px !important;
+    background: #fafafa !important;
+    min-height: 220px !important;
+}
+
+/* ===== Button Styling ===== */
+.primary-btn {
+    width: 100%;
+    margin-top: 20px !important;
+    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
+    border: none !important;
+    color: #fff !important;
+    font-weight: 700 !important;
+    font-size: 1rem !important;
+    padding: 14px 28px !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.35) !important;
+    transition: all 0.25s ease !important;
+    cursor: pointer !important;
+}
+
+.primary-btn:hover {
+    transform: translateY(-2px) !important;
+    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.45) !important;
+}
+
+/* ===== CTA Section ===== */
+.cta-container {
+    text-align: center;
+    padding: 44px 32px;
+    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%);
+    border-radius: 20px;
+    margin-top: 8px;
+    box-shadow: 0 8px 32px rgba(139, 92, 246, 0.35);
+    position: relative;
+    overflow: hidden;
+}
+
+.cta-container::before {
+    content: '';
+    position: absolute;
+    top: -50%;
+    right: -50%;
+    width: 100%;
+    height: 100%;
+    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 60%);
+    pointer-events: none;
+}
+
+.cta-title {
+    color: #fff;
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin: 0 0 8px 0;
+    position: relative;
+}
+
+.cta-desc {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    margin: 0 0 24px 0;
+    position: relative;
+}
+
+.cta-btn {
+    display: inline-block;
+    padding: 14px 36px;
+    background: #fff;
+    border-radius: 12px;
+    color: #7c3aed !important;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 1rem;
+    transition: all 0.25s ease;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    position: relative;
+}
+
+.cta-btn:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    color: #6d28d9 !important;
+}
+
+/* ===== Hide Elements ===== */
+footer { display: none !important; }
+
+/* ===== Input Styling ===== */
+.gradio-container input[type="password"],
+.gradio-container input[type="text"] {
+    border: 2px solid #e2e8f0 !important;
+    border-radius: 12px !important;
+    padding: 14px 16px !important;
+    font-size: 0.95rem !important;
+    transition: all 0.2s ease !important;
+}
+
+.gradio-container input[type="password"]:focus,
+.gradio-container input[type="text"]:focus {
+    border-color: #8b5cf6 !important;
+    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
+    outline: none !important;
+}
+"""
+
+
+# ============ API Functions ============
+def upload_image(api_key: str, file_path: str) -> str:
+    headers = {"Authorization": f"Bearer {api_key.strip()}"}
+    with open(file_path, "rb") as f:
+        resp = requests.post(UPLOAD_ENDPOINT, headers=headers, files={"file": f}, timeout=60)
+    if resp.status_code == 401:
+        raise Exception("Invalid API Key")
+    elif resp.status_code >= 400:
+        raise Exception(f"Upload failed: {resp.status_code}")
+    data = resp.json()
+    if data.get("code") != 200:
+        raise Exception(data.get("message", "Upload failed"))
+    return data.get("data", {}).get("download_url")
+
+
+def call_api(api_key: str, endpoint: str, payload: Dict[str, Any]) -> Dict[str, Any]:
+    headers = {"Authorization": f"Bearer {api_key.strip()}", "Content-Type": "application/json"}
+    resp = requests.post(f"{WAVESPEED_API_BASE}/{endpoint}", json=payload, headers=headers, timeout=30)
+    if resp.status_code == 401:
+        raise Exception("Invalid API Key")
+    elif resp.status_code == 429:
+        raise Exception("Quota exceeded")
+    elif resp.status_code >= 400:
+        raise Exception(f"API error: {resp.status_code}")
+    data = resp.json()
+    if data.get("code") != 200:
+        raise Exception(data.get("message", "Unknown error"))
+    return data.get("data", {})
+
+
+def poll_result(api_key: str, request_id: str) -> Dict[str, Any]:
+    headers = {"Authorization": f"Bearer {api_key.strip()}"}
+    url = f"{WAVESPEED_API_BASE}/predictions/{request_id}/result"
+    start_time = time.time()
+    while time.time() - start_time < POLL_MAX_SECONDS:
+        resp = requests.get(url, headers=headers, timeout=30)
+        if resp.status_code >= 400:
+            raise Exception("Failed to get result")
+        result = resp.json().get("data", {})
+        status = result.get("status", "")
+        if status == "completed":
+            return result
+        elif status == "failed":
+            raise Exception("Generation failed")
+        time.sleep(POLL_INTERVAL)
+    raise Exception("Timeout")
+
+
+def download_video(url: str) -> str:
+    """下载视频到临时文件，返回文件路径"""
+    import tempfile
+    import os
+    try:
+        resp = requests.get(url, timeout=120, stream=True)
+        if resp.status_code != 200:
+            return None
+        # 从 URL 或 Content-Type 确定扩展名
+        ext = ".mp4"
+        if "webm" in url.lower() or "webm" in resp.headers.get("content-type", ""):
+            ext = ".webm"
+        # 创建临时文件
+        fd, path = tempfile.mkstemp(suffix=ext)
+        with os.fdopen(fd, 'wb') as f:
+            for chunk in resp.iter_content(chunk_size=8192):
+                f.write(chunk)
+        return path
+    except Exception as e:
+        print(f"Download error: {e}")
+        return None
+
+
+def process(api_key: str, image_path: str, prompt: str):
+    if not api_key or not api_key.strip():
+        gr.Warning("Please enter your API Key")
+        return None
+    if not image_path:
+        gr.Warning("Please upload an image")
+        return None
+    if not prompt or not prompt.strip():
+        gr.Warning("Please enter a prompt")
+        return None
+
+    try:
+        gr.Info("Uploading image...")
+        image_url = upload_image(api_key, image_path)
+
+        gr.Info("Processing...")
+        payload = {
+            "images": [image_url],
+            "prompt": prompt.strip(),
+            "enable_base64_output": False,
+            "enable_sync_mode": False,
+            "seed": -1,
+        }
+        result = call_api(api_key, MODEL_ENDPOINT, payload)
+        request_id = result.get("id")
+        if not request_id:
+            gr.Warning("Failed to start")
+            return None
+
+        final_result = poll_result(api_key, request_id)
+        outputs = final_result.get("outputs", [])
+        if outputs:
+            gr.Info("Done!")
+            return outputs[0]
+        return None
+
+    except Exception as e:
+        error_msg = str(e).lower()
+        if "invalid" in error_msg or "401" in error_msg:
+            gr.Warning("Invalid API Key")
+        elif "quota" in error_msg or "429" in error_msg:
+            gr.Warning("Quota exceeded")
+        elif "timeout" in error_msg:
+            gr.Warning("Timeout - please try again")
+        else:
+            gr.Warning(str(e))
+        return None
+
+
+# ============ Gradio UI ============
+with gr.Blocks(css=CUSTOM_CSS, title="FLUX 2 Klein 9B Edit - WaveSpeed") as demo:
+
+    # Hero Section
+    gr.HTML("""
+        <div class="hero-container">
+            <div class="hero-badge">WAVESPEED AI</div>
+            <h1 class="hero-title">FLUX 2 Klein 9B Edit</h1>
+            <p class="hero-desc">AI-powered image editing with FLUX 2 Klein 9B. Try on <a href="{add_utm(\'https://wavespeed.ai\', \'hero_link\')}" target="_blank" style="color: #8b5cf6; text-decoration: none; font-weight: 600;">wavespeed</a></p>
+            <div class="hero-badges">
+                <span>
+                    <svg width="18" height="18" fill="#10b981" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+                    Fast Processing
+                </span>
+                <span>
+                    <svg width="18" height="18" fill="#10b981" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+                    High Quality
+                </span>
+                <span>
+                    <svg width="18" height="18" fill="#10b981" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z"/></svg>
+                    Easy to Use
+                </span>
+            </div>
+        </div>
+    """)
+
+    
+
+    # API Key Card
+    with gr.Group(elem_classes="main-card"):
+        gr.HTML("""
+            <div class="api-key-row">
+                <span class="api-key-label">
+                    <svg width="20" height="20" fill="#8b5cf6" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd"/></svg>
+                    API Key
+                </span>
+                <a href="{add_utm(\'https://wavespeed.ai/accesskey\', \'api_key_button\')}" target="_blank" class="get-key-btn">Get API Key</a>
+            </div>
+        """)
+        api_key_input = gr.Textbox(
+            placeholder="Enter your WaveSpeed API key",
+            type="password",
+            show_label=False
+        )
+
+    # Main Content Card
+    with gr.Group(elem_classes="main-card"):
+        with gr.Row():
+            # Left Column - Input
+            with gr.Column(scale=1):
+                gr.HTML("""
+                    <div class="section-title">
+                        <svg width="20" height="20" fill="#8b5cf6" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z" clip-rule="evenodd"/></svg>
+                        Upload Image
+                    </div>
+                """)
+                image_input = gr.Image(
+                    label="Upload Image",
+                    type="filepath",
+                    source="upload",
+                    elem_classes=["upload-area"]
+                )
+                prompt_input = gr.Textbox(
+                    label="Prompt",
+                    placeholder="Describe what you want...",
+                    lines=3
+                )
+                submit_btn = gr.Button("Process", variant="primary", elem_classes="primary-btn")
+
+            # Right Column - Output
+            with gr.Column(scale=1):
+                gr.HTML("""
+                    <div class="section-title">
+                        <svg width="20" height="20" fill="#8b5cf6" viewBox="0 0 20 20"><path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/><path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/></svg>
+                        Result
+                    </div>
+                """)
+                output_image = gr.Image(
+                    label="",
+                    type="filepath",
+                    interactive=False,
+                    elem_classes=["hide-label", "result-area"]
+                )
+
+    # CTA Section
+    gr.HTML("""
+        <div class="cta-container">
+            <h3 class="cta-title">Want More Features?</h3>
+            <p class="cta-desc">Higher resolutions, batch processing, and 700+ AI models</p>
+            <a href="{add_utm(\'https://wavespeed.ai/models\', \'cta_button\')}" target="_blank" class="cta-btn">
+                Explore WaveSpeed.ai
+            </a>
+        </div>
+    """)
+
+    # Event binding
+    submit_btn.click(
+        fn=process,
+        inputs=[api_key_input, image_input, prompt_input],
+        outputs=output_image,
+    )
+
+
+if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", server_port=7860)