Add Kling Motion Control: character image + driving video via WaveSpeed

src/content_engine/api/routes_video.py

@@ -261,6 +261,147 @@ async def generate_video_higgsfield(
     }
 
 
+@router.post("/api/video/generate/kling-motion")
+async def generate_kling_motion(
+    image: UploadFile = File(...),
+    driving_video: UploadFile = File(...),
+    prompt: str = Form("smooth motion, high quality video"),
+    duration: int = Form(5),
+    seed: int = Form(-1),
+):
+    """Generate video using Kling Motion Control (character image + driving video)."""
+    import random
+
+    if not _wavespeed_provider:
+        raise HTTPException(500, "WaveSpeed API not configured")
+
+    job_id = str(uuid.uuid4())[:8]
+    seed = seed if seed >= 0 else random.randint(0, 2**32 - 1)
+
+    image_bytes = await image.read()
+    video_bytes = await driving_video.read()
+
+    _video_jobs[job_id] = {
+        "status": "running",
+        "seed": seed,
+        "started_at": time.time(),
+        "model": "kling-motion",
+        "backend": "cloud",
+        "message": "Uploading files...",
+    }
+
+    asyncio.create_task(_generate_kling_motion_video(job_id, image_bytes, video_bytes, prompt, duration))
+
+    return {"job_id": job_id, "status": "running", "estimated_time": "~60-120 seconds"}
+
+
+async def _generate_kling_motion_video(
+    job_id: str,
+    image_bytes: bytes,
+    video_bytes: bytes,
+    prompt: str,
+    duration: int,
+):
+    """Background task: upload image + driving video, call Kling Motion Control API."""
+    import httpx
+    import aiohttp
+
+    try:
+        _video_jobs[job_id]["message"] = "Uploading character image..."
+        image_url = await _wavespeed_provider._upload_temp_image(image_bytes)
+        logger.info("Kling motion: character image uploaded: %s", image_url[:80])
+
+        _video_jobs[job_id]["message"] = "Uploading driving video..."
+        video_url = await _upload_temp_video(video_bytes)
+        logger.info("Kling motion: driving video uploaded: %s", video_url[:80])
+
+        api_key = _wavespeed_provider._api_key
+        endpoint = "https://api.wavespeed.ai/api/v3/kwaivgi/kling-v2.6-pro/motion-control"
+
+        payload = {
+            "image": image_url,
+            "video": video_url,
+            "prompt": prompt,
+            "duration": duration,
+            "enable_sync_mode": False,
+        }
+
+        _video_jobs[job_id]["message"] = "Calling Kling Motion Control API..."
+        logger.info("Calling Kling Motion Control: %s", endpoint)
+
+        async with httpx.AsyncClient(timeout=300) as client:
+            resp = await client.post(
+                endpoint,
+                json=payload,
+                headers={"Authorization": f"Bearer {api_key}", "Content-Type": "application/json"},
+            )
+
+            if resp.status_code != 200:
+                error_text = resp.text[:500]
+                logger.error("Kling Motion API error: %s", error_text)
+                _video_jobs[job_id]["status"] = "failed"
+                _video_jobs[job_id]["error"] = f"API error: {error_text[:200]}"
+                return
+
+            result = resp.json()
+            data = result.get("data", result)
+            logger.info("Kling Motion API response: %s", str(result)[:300])
+
+            # Poll if async
+            outputs = data.get("outputs", [])
+            urls_data = data.get("urls", {})
+            if not outputs and urls_data.get("get"):
+                _video_jobs[job_id]["message"] = "Waiting for Kling Motion to complete..."
+                video_url_out = await _poll_wavespeed_video(urls_data["get"], api_key, job_id)
+            elif outputs:
+                video_url_out = outputs[0] if isinstance(outputs[0], str) else outputs[0].get("url")
+            else:
+                _video_jobs[job_id]["status"] = "failed"
+                _video_jobs[job_id]["error"] = "No output URL in response"
+                return
+
+            if not video_url_out:
+                return  # poll already set status
+
+            # Download and save
+            _video_jobs[job_id]["message"] = "Downloading video..."
+            output_dir = Path(os.environ.get("OUTPUT_DIR", "outputs")) / "videos"
+            output_dir.mkdir(parents=True, exist_ok=True)
+            filename = f"kling_motion_{job_id}.mp4"
+            output_path = output_dir / filename
+
+            async with httpx.AsyncClient(timeout=120) as dl_client:
+                r = await dl_client.get(video_url_out)
+                output_path.write_bytes(r.content)
+
+            _video_jobs[job_id]["status"] = "done"
+            _video_jobs[job_id]["filename"] = filename
+            _video_jobs[job_id]["message"] = "Done"
+            logger.info("Kling Motion video saved: %s", filename)
+
+    except Exception as e:
+        logger.exception("Kling Motion generation failed: %s", e)
+        _video_jobs[job_id]["status"] = "failed"
+        _video_jobs[job_id]["error"] = str(e)
+
+
+async def _upload_temp_video(video_bytes: bytes) -> str:
+    """Upload a video file to litterbox.catbox.moe and return the URL."""
+    import aiohttp
+
+    async with aiohttp.ClientSession() as session:
+        data = aiohttp.FormData()
+        data.add_field("reqtype", "fileupload")
+        data.add_field("time", "1h")
+        data.add_field("fileToUpload", video_bytes, filename="driving.mp4", content_type="video/mp4")
+        async with session.post("https://litterbox.catbox.moe/resources/internals/api.php", data=data) as resp:
+            if resp.status == 200:
+                url = (await resp.text()).strip()
+                if url.startswith("http"):
+                    return url
+    raise RuntimeError("Failed to upload driving video to litterbox.catbox.moe")
+
+
 async def _generate_higgsfield_video(
     job_id: str,
     image_bytes: bytes,

src/content_engine/api/ui.html

@@ -1011,6 +1011,7 @@ select { cursor: pointer; }
             <div class="chips" id="video-submode-chips" style="margin-bottom:10px">
               <div class="chip selected" onclick="selectVideoSubMode(this,'i2v')">Image to Video</div>
               <div class="chip" onclick="selectVideoSubMode(this,'animate')">Animate (Dance)</div>
+              <div class="chip" onclick="selectVideoSubMode(this,'kling-motion')">Kling Motion</div>
             </div>
 
             <!-- Standard Image-to-Video -->
@@ -1121,6 +1122,33 @@ select { cursor: pointer; }
               </div>
             </div>
 
+            <!-- Kling Motion Control sub-section -->
+            <div id="kling-motion-sub-section" style="display:none">
+              <div class="section-title">Character Image</div>
+              <div class="drop-zone" id="kling-motion-char-zone" onclick="document.getElementById('kling-motion-char-input').click()">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>
+                <div>Character photo</div>
+              </div>
+              <input type="file" id="kling-motion-char-input" accept="image/*" style="display:none" onchange="handleKlingMotionChar(this)">
+
+              <div class="section-title" style="margin-top:10px">Driving Video</div>
+              <div class="drop-zone" id="kling-motion-video-zone" onclick="document.getElementById('kling-motion-video-input').click()">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="2"/><polygon points="10,8 16,12 10,16"/></svg>
+                <div>Motion reference video (mp4)</div>
+              </div>
+              <input type="file" id="kling-motion-video-input" accept="video/*" style="display:none" onchange="handleKlingMotionVideo(this)">
+
+              <label style="margin-top:10px">Duration</label>
+              <select id="kling-motion-duration">
+                <option value="5" selected>5s (~$0.56)</option>
+                <option value="10">10s (~$1.12)</option>
+              </select>
+
+              <div style="font-size:11px;color:var(--text-secondary);margin-top:6px">
+                Kling Motion Control via WaveSpeed. ~1 min generation. Requires WAVESPEED_API_KEY.
+              </div>
+            </div>
+
           </div>
 
           <!-- Reference image upload for img2img -->
@@ -1684,6 +1712,8 @@ let selectedVideoBackend = 'cloud';
 let videoSubMode = 'i2v';
 let animateCharFile = null;
 let animateDrivingVideoFile = null;
+let klingMotionCharFile = null;
+let klingMotionVideoFile = null;
 let selectedMode = 'txt2img';
 let templatesData = [];
 let charactersData = [];
@@ -1939,6 +1969,7 @@ function selectVideoSubMode(chip, mode) {
   videoSubMode = mode;
   document.getElementById('i2v-sub-section').style.display = mode === 'i2v' ? '' : 'none';
   document.getElementById('animate-sub-section').style.display = mode === 'animate' ? '' : 'none';
+  document.getElementById('kling-motion-sub-section').style.display = mode === 'kling-motion' ? '' : 'none';
 }
 
 function handleAnimateChar(input) {
@@ -1970,6 +2001,35 @@ function handleAnimateVideo(input) {
   `;
 }
 
+function handleKlingMotionChar(input) {
+  if (!input.files[0]) return;
+  klingMotionCharFile = input.files[0];
+  const zone = document.getElementById('kling-motion-char-zone');
+  zone.classList.add('has-file');
+  const reader = new FileReader();
+  reader.onload = e => {
+    zone.innerHTML = `
+      <img src="${e.target.result}" style="max-height:120px;border-radius:6px">
+      <div style="margin-top:4px;font-size:11px">${input.files[0].name}</div>
+      <button class="btn btn-secondary btn-small" onclick="event.stopPropagation();klingMotionCharFile=null;this.closest('.drop-zone').classList.remove('has-file');this.closest('.drop-zone').innerHTML='<svg viewBox=\\'0 0 24 24\\' fill=\\'none\\' stroke=\\'currentColor\\' stroke-width=\\'1.5\\'><path d=\\'M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\\'/><polyline points=\\'17 8 12 3 7 8\\'/><line x1=\\'12\\' y1=\\'3\\' x2=\\'12\\' y2=\\'15\\'/></svg><div>Character photo</div>'" style="margin-top:6px">Remove</button>
+    `;
+  };
+  reader.readAsDataURL(input.files[0]);
+}
+
+function handleKlingMotionVideo(input) {
+  if (!input.files[0]) return;
+  klingMotionVideoFile = input.files[0];
+  const zone = document.getElementById('kling-motion-video-zone');
+  zone.classList.add('has-file');
+  zone.innerHTML = `
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="2" width="20" height="20" rx="2"/><polygon points="10,8 16,12 10,16"/></svg>
+    <div style="font-size:12px;margin-top:4px">${input.files[0].name}</div>
+    <div style="font-size:11px;color:var(--text-secondary)">${(input.files[0].size/1024/1024).toFixed(1)} MB</div>
+    <button class="btn btn-secondary btn-small" onclick="event.stopPropagation();klingMotionVideoFile=null;this.closest('.drop-zone').classList.remove('has-file');this.closest('.drop-zone').innerHTML='<svg viewBox=\\'0 0 24 24\\' fill=\\'none\\' stroke=\\'currentColor\\' stroke-width=\\'1.5\\'><rect x=\\'2\\' y=\\'2\\' width=\\'20\\' height=\\'20\\' rx=\\'2\\'/><polygon points=\\'10,8 16,12 10,16\\'/></svg><div>Motion reference video (mp4)</div>'" style="margin-top:6px">Remove</button>
+  `;
+}
+
 function handleVideoImage(input) {
   if (input.files[0]) {
     videoImageFile = input.files[0];
@@ -2469,6 +2529,24 @@ async function doGenerate() {
     // img2video mode — video generation
     if (selectedMode === 'img2video') {
 
+      // Kling Motion Control
+      if (videoSubMode === 'kling-motion') {
+        if (!klingMotionCharFile) throw new Error('Please upload a character image');
+        if (!klingMotionVideoFile) throw new Error('Please upload a driving video');
+        const formData = new FormData();
+        formData.append('image', klingMotionCharFile);
+        formData.append('driving_video', klingMotionVideoFile);
+        formData.append('prompt', document.getElementById('gen-positive').value || 'smooth motion, high quality video');
+        formData.append('duration', document.getElementById('kling-motion-duration').value || '5');
+        formData.append('seed', document.getElementById('gen-seed').value || '-1');
+        const res = await fetch(API + '/api/video/generate/kling-motion', { method: 'POST', body: formData });
+        const data = await res.json();
+        if (!res.ok) throw new Error(data.detail || 'Kling Motion generation failed');
+        toast('Kling Motion generating via WaveSpeed (~1 min)...', 'info');
+        await pollForVideo(data.job_id);
+        return;
+      }
+
       // Animate (Dance) sub-mode — WAN 2.2 Animate on RunPod
       if (videoSubMode === 'animate') {
         if (!animateCharFile) throw new Error('Please upload a character image');

src/content_engine/services/cloud_providers/wavespeed_provider.py

@@ -90,6 +90,7 @@ VIDEO_MODEL_MAP = {
     # Kling (Kuaishou)
     "kling-o3-pro": "kwaivgi/kling-video-o3-pro/image-to-video",
     "kling-o3": "kwaivgi/kling-video-o3-std/image-to-video",
+    "kling-motion": "kwaivgi/kling-v2.6-pro/motion-control",
     # Veo (Google)
     "veo-3.1": "google/veo-3.1",
     # Seedance (ByteDance)