Browse Source

docs: update README with multi-provider beta info and add docs link

- Add Multi-Provider Support (Beta) section for Replicate and fal.ai
- Update Tech Stack and Environment Variables with new providers
- Add docs link to welcome modal (https://node-banana-docs.vercel.app/)
- Remove debug console.log statements from gridSplitter and WorkflowCanvas

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
handoff-20260429-1057
shrimbly 6 months ago
parent
commit
ade1ca8948
  1. 14
      README.md
  2. 1
      src/components/WorkflowCanvas.tsx
  3. 12
      src/components/quickstart/QuickstartInitialView.tsx
  4. 3
      src/utils/gridSplitter.ts

14
README.md

@ -17,6 +17,14 @@ Node Banana is node-based workflow application for generating images with NBP. B
- **Save/Load Workflows** - Export and import workflows as JSON files
- **Group Locking** - Lock node groups to skip them during execution
## Multi-Provider Support (Beta)
In addition to Google Gemini, Node Banana now supports:
- **Replicate** - Access thousands of open-source models
- **fal.ai** - Fast inference for image and video generation
Configure API keys in Project Settings to enable these providers.
## Tech Stack
- **Framework**: Next.js 16 (App Router)
@ -25,7 +33,7 @@ Node Banana is node-based workflow application for generating images with NBP. B
- **Canvas**: Konva.js / react-konva
- **State Management**: Zustand
- **Styling**: Tailwind CSS
- **AI**: Google Gemini API, OpenAI API
- **AI**: Google Gemini API, OpenAI API, Replicate (Beta), fal.ai (Beta)
## Getting Started
@ -40,7 +48,9 @@ Create a `.env.local` file in the root directory:
```env
GEMINI_API_KEY=your_gemini_api_key
OPENAI_API_KEY=your_openai_api_key # Optional, for OpenAI LLM provider
OPENAI_API_KEY=your_openai_api_key # Optional, for OpenAI LLM provider
REPLICATE_API_KEY=your_replicate_api_key # Optional, beta
FAL_API_KEY=your_fal_api_key # Optional, beta
```
### Installation

1
src/components/WorkflowCanvas.tsx

@ -501,7 +501,6 @@ export function WorkflowCanvas() {
img.src = imageData;
});
console.log(`[SplitGrid] Created ${images.length} nodes from ${grid.rows}x${grid.cols} grid (confidence: ${Math.round(grid.confidence * 100)}%)`);
} catch (error) {
console.error("[SplitGrid] Error:", error);
alert("Failed to split image grid: " + (error instanceof Error ? error.message : "Unknown error"));

12
src/components/quickstart/QuickstartInitialView.tsx

@ -32,9 +32,11 @@ export function QuickstartInitialView({
</p>
<div className="flex flex-col gap-2.5 mt-auto">
<span
className="flex items-center gap-2 text-sm text-neutral-600 cursor-default"
title="Coming soon"
<a
href="https://node-banana-docs.vercel.app/"
target="_blank"
rel="noopener noreferrer"
className="flex items-center gap-2 text-sm text-neutral-400 hover:text-neutral-200 transition-colors"
>
<svg
className="w-4 h-4"
@ -49,8 +51,8 @@ export function QuickstartInitialView({
d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"
/>
</svg>
Docs (coming soon)
</span>
Docs
</a>
<a
href="https://discord.com/invite/89Nr6EKkTf"
target="_blank"

3
src/utils/gridSplitter.ts

@ -254,9 +254,6 @@ function analyzeGridFromImageData(imageData: ImageData): GridDetectionResult {
}
}
console.log(`[GridSplitter] Best candidate: ${bestCandidate.rows}x${bestCandidate.cols}, ` +
`cell AR: ${bestCandidate.cellAspectRatio.toFixed(2)}, score: ${bestCandidate.score.toFixed(3)}`);
// Build the grid cells
const result = createGridForDimensions(width, height, bestCandidate.rows, bestCandidate.cols);
result.confidence = bestCombinedScore;

Loading…
Cancel
Save