Mobile app

[jhr-debug]

Smart Playground + MaskEditor Mobile Adaptation

Summary

• Smart Playground: Replace the old "click variant → standard Playground" flow with a unified Smart Playground per model family.
  Users see one merged form; the system auto-resolves which variant API to call based on filled fields and toggle values.
• MaskEditor Mobile: Add touch drawing support and responsive layout to the shared MaskEditor component, benefiting all current
  and future models that use mask input.

Smart Playground — 7 Families
┌──────────────────────────┬───────────────────────────┬────────────────────────────────────────────┐
│ Family │ Toggle │ Auto-detect │
├──────────────────────────┼───────────────────────────┼────────────────────────────────────────────┤
│ Seedream 4.5 │ Mode (Normal/Sequential) │ Image → edit variant │
├──────────────────────────┼───────────────────────────┼────────────────────────────────────────────┤
│ Seedance 1.5 Pro │ Speed (Normal/Fast) │ Video > Image > Text │
├──────────────────────────┼───────────────────────────┼────────────────────────────────────────────┤
│ Wan Spicy │ — │ Lora + Video/Image │
├──────────────────────────┼───────────────────────────┼────────────────────────────────────────────┤
│ Wan Animate │ — │ Single variant │
├──────────────────────────┼───────────────────────────┼────────────────────────────────────────────┤
│ InfiniteTalk │ Speed (Normal/Fast) │ Video > Both audios (multi) > Single audio │
├──────────────────────────┼───────────────────────────┼────────────────────────────────────────────┤
│ Kling 2.6 Motion Control │ Quality (Pro/Std) │ Toggle only │
├──────────────────────────┼───────────────────────────┼────────────────────────────────────────────┤
│ Nano Banana Pro │ Quality (Std/Ultra/Multi) │ Image → edit variant │
└──────────────────────────┴───────────────────────────┴────────────────────────────────────────────┘
Smart Playground — Key Features

• Dynamic field visibility: only shows resolved variant's fields + trigger fields (file/loras) for variant switching
• Batch mode: sequential runs with seed randomization via Run button dropdown
• Last-uploaded-media priority: when both image and video are uploaded, last one wins
• Auto-clean select values: switching variant removes invalid options (e.g. 480p unavailable in fast mode)
• InfiniteTalk audio mapping: single left/right audio auto-maps to audio field; excludeFields hides redundant upload
• FeaturedModelsPage: removed per-variant list from cards (Smart Playground handles switching internally)

MaskEditor Mobile Adaptation

• Touch events: added onTouchStart/onTouchMove/onTouchEnd handlers sharing unified pointer logic with mouse events
• Responsive canvas: container uses width: 100% + maxWidth + aspectRatio instead of fixed pixel dimensions — scales to any screen
  size while maintaining correct proportions
• Scroll support: dialog uses flex layout with overflow-auto content area, shrink-0 toolbar/footer always visible
• No-scroll-while-drawing: touch-action: none on canvas prevents page scrolling during drawing
• Global impact: all models using mask_image field (current and future) automatically benefit from this fix on both desktop and
  mobile

Other Fixes

• FileUpload: fallback preview based on accept type when URL has no standard extension (e.g. last_image field)
• schemaToForm: broader lora field detection (includes('lora') instead of exact match)
• OutputDisplay: grid layout support for batch/multi outputs

Files Changed

• New: smartFormConfig.ts, SmartPlaygroundPage.tsx
• Modified: App routes (desktop + mobile), FeaturedModelsPage, MaskEditor, OutputDisplay, FileUpload, schemaToForm, 23 locale
  files

Test Plan

• Smart Playground: all 7 families tested (variant switching, toggles, field visibility)
• MaskEditor: mobile touch drawing, responsive canvas, correct aspect ratio
• MaskEditor: desktop unchanged (mouse events still work)
• Lora detection: Wan Spicy lora add/remove triggers variant switch
• Mobile build: vite build + cap sync android + Android emulator verified
• End-to-end API runs (pricing, output display, error handling)