4.1 KiB
| phase | plan | type |
|---|---|---|
| 03-generate-node-refactor | 1 | execute |
Purpose: Transform the Gemini-only node into a multi-provider image generation node. Output: GenerateImageNode component with provider/model dropdowns filtering to image-capable models only.
Note: Video generation will use a separate GenerateVideo node in Phase 6.
<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 @.planning/phases/01-provider-infrastructure/01-02-SUMMARY.md @.planning/phases/02-model-discovery/02-03-SUMMARY.md @src/components/nodes/NanoBananaNode.tsx @src/types/index.ts @src/store/workflowStore.ts @src/lib/providers/types.tsTech available: ProviderModel interface, /api/models endpoint, provider registry Patterns: Provider self-registration, localStorage settings persistence Constraints: Keep "nanoBanana" node type string for backward compatibility
Task 1: Add SelectedModel type and update NanoBananaNodeData src/types/index.ts Add SelectedModel interface: ```typescript export interface SelectedModel { provider: ProviderType; modelId: string; displayName: string; } ```Update NanoBananaNodeData to add optional selectedModel field (keep existing model field for Gemini backward compatibility).
Add "gemini" to ProviderType if not present. npx tsc --noEmit SelectedModel type exists, NanoBananaNodeData has selectedModel field, types compile
Task 2: Create GenerateImageNode with provider/model selector src/components/nodes/NanoBananaNode.tsx, src/components/nodes/index.ts 1. Rename NanoBananaNode.tsx to GenerateImageNode.tsx 2. Rename component function to GenerateImageNode 3. Add provider dropdown showing enabled providers (gemini always, others if configured) 4. Add model dropdown: - For gemini: hardcoded Nano Banana / Nano Banana Pro - For replicate/fal: fetch from /api/models?provider=X&capabilities=text-to-image,image-to-image 5. Filter to image capabilities only (text-to-image, image-to-image) 6. Keep aspect ratio/resolution controls for Gemini, hide for others 7. Update index.ts exports: ```typescript export { GenerateImageNode } from "./GenerateImageNode"; export { GenerateImageNode as NanoBananaNode } from "./GenerateImageNode"; ``` npm run build GenerateImageNode renders with provider/model dropdowns, shows only image models Task 3: Update store and canvas references src/store/workflowStore.ts, src/components/WorkflowCanvas.tsx, src/components/ConnectionDropMenu.tsx, src/components/FloatingActionBar.tsx 1. workflowStore.ts: Rename helper functions (keep aliases for compatibility): - loadNanoBananaDefaults → loadGenerateImageDefaults - saveNanoBananaDefaults → saveGenerateImageDefaults 2. Update createDefaultNodeData "nanoBanana" case to set default selectedModel for Gemini 3. WorkflowCanvas.tsx: Update nodeTypes to use GenerateImageNode 4. Update imports in ConnectionDropMenu.tsx, FloatingActionBar.tsx npm run build succeeds, app loads without errors All references updated, existing workflows load correctly - [ ] `npm run build` succeeds - [ ] GenerateImageNode renders with provider dropdown - [ ] Model selector shows only image-capable models - [ ] Existing workflows with nanoBanana nodes load<success_criteria>
- GenerateImageNode component exists with multi-provider UI
- Model selector filters to text-to-image and image-to-image only
- Backward compatibility maintained </success_criteria>