weitao
/
popiart-node-canvas
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
146 Commits
28 Branches
0 Tags
1.2 GiB
 
 
Tree: 2c9874d3ca
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '2c9874d3ca'
${ noResults }
popiart-node-canvas/.planning/phases/06-video-and-polish/06-01-PLAN.md

5.1 KiB
Raw Blame History

phase plan type
06-video-and-polish 1 execute
Create GenerateVideo node supporting video-capable models from Replicate and fal.ai.

Purpose: Enable video generation workflows using the same multi-provider infrastructure built for images. Output: Working GenerateVideoNode with provider/model selection and video output display.

<execution_context> ~/.claude/get-shit-done/workflows/execute-phase.md ~/.claude/get-shit-done/templates/summary.md </execution_context>

@.planning/PROJECT.md @.planning/ROADMAP.md @.planning/STATE.md

Prior phase context (established patterns):

@.planning/phases/03-generate-node-refactor/03-01-SUMMARY.md @.planning/phases/03-generate-node-refactor/03-02-SUMMARY.md

Key source files:

@src/components/nodes/GenerateImageNode.tsx @src/app/api/generate/route.ts @src/types/index.ts @src/lib/providers/types.ts @src/store/workflowStore.ts

Tech stack available: React, @xyflow/react, Zustand, Next.js API routes Established patterns:

  • Provider dropdown with conditional visibility based on API key
  • Model selector fetching from /api/models with capabilities filter
  • selectedModel object with {provider, modelId, displayName}
  • Server-side provider dispatch in /api/generate Constraining decisions:
  • GenerateVideo as separate node type (not combined with GenerateImage)
  • video capabilities: text-to-video, image-to-video
Task 1: Create GenerateVideoNode component src/components/nodes/GenerateVideoNode.tsx, src/components/nodes/index.ts, src/types/index.ts, src/store/workflowStore.ts, src/components/WorkflowCanvas.tsx Create GenerateVideoNode based on GenerateImageNode with these changes: 1. In types/index.ts: - Add "generateVideo" to NodeType union - Create GenerateVideoNodeData interface (copy NanoBananaNodeData, change outputImage to outputVideo: string | null, remove image-specific fields like aspectRatio, resolution, imageHistory) - Add to WorkflowNodeData union 2. In GenerateVideoNode.tsx: - Copy structure from GenerateImageNode - Change VIDEO_CAPABILITIES to ["text-to-video", "image-to-video"] - Fetch models with capabilities=text-to-video,image-to-video - Remove Gemini provider option (Gemini doesn't do video) - Show fal.ai always, Replicate when configured (like image node) - Display video output using HTML5 video element with controls - Remove aspect ratio/resolution selectors (video models have their own params) 3. In workflowStore.ts: - Add createDefaultNodeData case for "generateVideo" - Add defaultDimensions entry (same as nanoBanana: 200x280) - Add to getConnectedInputs to extract video from GenerateVideo nodes (check for outputVideo) 4. In WorkflowCanvas.tsx: - Add GenerateVideoNode to nodeTypes - Add minimap color (purple: "#9333ea") 5. In nodes/index.ts: - Export GenerateVideoNode npm run build passes, no TypeScript errors GenerateVideoNode renders, shows provider/model dropdowns, can be added to canvas Task 2: Add video generation to API route src/app/api/generate/route.ts, src/types/index.ts Extend /api/generate to handle video generation: 1. Update GenerateResponse in types/index.ts: - Add optional video?: string field alongside image - Add optional contentType?: "image" | "video" field 2. In route.ts generateWithReplicate: - After fetching output, detect if output is video (check content-type header for video/*) - If video, return { type: "video", data: dataUrl } in outputs array - Video data URL format: data:video/mp4;base64,... 3. In route.ts generateWithFal: - fal.ai video models return { video: { url: "..." } } not images array - Check for result.video?.url in addition to result.images - If video URL found, fetch and convert to base64 with video mime type 4. In main POST handler: - Return video field in response when output type is video - Set contentType: "video" when returning video 5. Handle large video files: - Videos can be large, log warning if >10MB but still return - Consider returning URL directly for very large videos (>20MB) with a videoUrl field Test with curl: Create a prediction for a video model and verify video data returns API returns video base64 or URL for video-capable models, contentType field indicates output type Before declaring plan complete: - [ ] npm run build succeeds without errors - [ ] GenerateVideoNode appears in node palette - [ ] Video model dropdown populates from fal.ai/Replicate - [ ] API route handles video outputs correctly

<success_criteria>

  • All tasks completed
  • All verification checks pass
  • No TypeScript errors
  • GenerateVideoNode can be added to canvas and configured
  • Video generation API path is ready (execution tested in 06-02 with playback) </success_criteria>
After completion, create `.planning/phases/06-video-and-polish/06-01-SUMMARY.md`