From ade1ca8948f3a139e4dab8f427fa6ffbebd202ae Mon Sep 17 00:00:00 2001
From: shrimbly <falloon.willie@gmail.com>
Date: Wed, 14 Jan 2026 23:44:41 +1300
Subject: [PATCH] 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>
---
 README.md                                          | 14 ++++++++++++--
 src/components/WorkflowCanvas.tsx                  |  1 -
 .../quickstart/QuickstartInitialView.tsx           | 12 +++++++-----
 src/utils/gridSplitter.ts                          |  3 ---
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 1c742343..e4e60ec0 100644
--- a/README.md
+++ b/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
diff --git a/src/components/WorkflowCanvas.tsx b/src/components/WorkflowCanvas.tsx
index 873c2c42..425c798f 100644
--- a/src/components/WorkflowCanvas.tsx
+++ b/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"));
diff --git a/src/components/quickstart/QuickstartInitialView.tsx b/src/components/quickstart/QuickstartInitialView.tsx
index 06fcd690..b9e4e6af 100644
--- a/src/components/quickstart/QuickstartInitialView.tsx
+++ b/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"
diff --git a/src/utils/gridSplitter.ts b/src/utils/gridSplitter.ts
index 655d52cd..4bcd568a 100644
--- a/src/utils/gridSplitter.ts
+++ b/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;