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.
101 Commits
30 Branches
0 Tags
1.2 GiB
 
 
Tree: 1bf6520d86
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1bf6520d86'
${ noResults }
popiart-node-canvas/.planning/phases/03-generate-node-refactor/03-01-PLAN.md

5.6 KiB
Raw Blame History

phase plan type
03-generate-node-refactor 1 execute
Rename NanoBanana node to Generate and add multi-provider model selector.

Purpose: Transform the hardcoded Gemini-only node into a generic generation node that can use any provider's models. Output: Generate node component with provider/model dropdown, updated types, store functions renamed.

<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:

@.planning/phases/01-provider-infrastructure/01-02-SUMMARY.md @.planning/phases/02-model-discovery/02-03-SUMMARY.md

Key source files:

@src/components/nodes/NanoBananaNode.tsx @src/types/index.ts @src/store/workflowStore.ts @src/lib/providers/types.ts

Tech stack available: Zustand, React, ProviderModel interface, /api/models endpoint Established patterns: Provider self-registration, localStorage settings persistence Constraining decisions:

  • Keep nanoBanana node type internally for backward compatibility
  • Gemini models use internal names (nano-banana, nano-banana-pro)
Task 1: Update types for multi-provider model selection src/types/index.ts 1. Add new types for selected model: - `SelectedModel` interface with { provider: ProviderType, modelId: string, displayName: string } - Keep existing ModelType for backward compatibility

  1. Update NanoBananaNodeData interface:

    • Add optional selectedModel?: SelectedModel field
    • Keep existing model: ModelType field for Gemini backward compatibility

  2. Add "gemini" to ProviderType union if not already present (it should be the Gemini provider identifier)

WHY: NanoBananaNodeData needs to store either legacy Gemini model selection OR new multi-provider selection. The optional selectedModel field enables graceful migration. npx tsc --noEmit passes Types compile, SelectedModel interface exists, NanoBananaNodeData has selectedModel field

Task 2: Rename component to GenerateNode with model selector UI src/components/nodes/NanoBananaNode.tsx, src/components/nodes/index.ts 1. Rename file from NanoBananaNode.tsx to GenerateNode.tsx

  1. Rename component from NanoBananaNode to GenerateNode (keep function export name)

  2. Add model selector UI that shows:

    • Provider dropdown (gemini, replicate, fal) - only show enabled providers
    • Model dropdown (fetched from /api/models for selected provider)
    • For Gemini, show existing hardcoded models (Nano Banana, Nano Banana Pro)
    • For other providers, fetch models dynamically

  3. When provider/model changes:

    • Update node data with selectedModel: { provider, modelId, displayName }
    • For Gemini, also update legacy model field for backward compatibility

  4. Keep existing aspect ratio/resolution controls for Gemini models

    • Hide them for non-Gemini models (parameters will come from provider schema later)

  5. Update index.ts to export GenerateNode and alias it as NanoBananaNode for backward compatibility:

    export { GenerateNode } from "./GenerateNode";
export { GenerateNode as NanoBananaNode } from "./GenerateNode";

WHY: The component rename reflects its new multi-provider purpose. The alias maintains backward compatibility with existing imports. npm run build succeeds, component renders in browser GenerateNode.tsx exists, shows provider selector, model dropdown fetches from API for non-Gemini providers

Task 3: Update store and canvas references src/store/workflowStore.ts, src/components/WorkflowCanvas.tsx 1. In workflowStore.ts: - Rename saveNanoBananaDefaults to saveGenerateDefaults (keep old name as alias) - Rename loadNanoBananaDefaults to loadGenerateDefaults (keep old name as alias) - Update localStorage key comment but keep actual key for migration - Update createDefaultNodeData for "nanoBanana" case to include default selectedModel for Gemini

  1. In WorkflowCanvas.tsx:

    • Update nodeTypes registration to use GenerateNode
    • Keep "nanoBanana" as the type key (internal type name unchanged)
    • Update minimap color mapping if it references "nanoBanana"

  2. In any file using NanoBananaNode import:

    • Update import to use GenerateNode
    • Files: ConnectionDropMenu.tsx, FloatingActionBar.tsx, etc.

WHY: Internal references update to new names while keeping the node type string "nanoBanana" for workflow file compatibility. npm run build succeeds, existing workflows load correctly All imports updated, store functions renamed with aliases, workflows still load

Before declaring plan complete: - [ ] `npm run build` succeeds without errors - [ ] `npx tsc --noEmit` passes type checking - [ ] GenerateNode renders with provider dropdown - [ ] Gemini models show in model selector - [ ] Existing workflows with nanoBanana nodes still load

<success_criteria>

  • All tasks completed
  • All verification checks pass
  • GenerateNode component exists with multi-provider UI
  • Types support both legacy Gemini and new multi-provider selection
  • Backward compatibility maintained for existing workflows </success_criteria>
After completion, create `.planning/phases/03-generate-node-refactor/03-01-SUMMARY.md`