Skip to content

README.md

Latest commit

 

History

History
85 lines (68 loc) · 6.13 KB

README.md

File metadata and controls

85 lines (68 loc) · 6.13 KB

Nodal (Visual AI Background Automation)

A full-stack, dynamic Next.js Directed Acyclic Graph orchestrator explicitly mapping visual drag-and-drop user interfaces seamlessly traversing deep background serverless Trigger.dev execution queues securely mapping Google Gemini interactions securely alongside Transloadit CDNs bypassing standard backend pipelines gracefully.

✨ Features

  • Visual Workflow Builder: Drag-and-drop React Flow canvas to design automation graphs visually.
  • AI Automation: Native "LLM" blocks process contextual text visually bridging gemini-3-flash-preview.
  • Media File Processing: "Upload Image" and "Upload Video" blocks stream 4K physical binaries to Transloadit CDNs bypass Next.js API rate-limits natively.
  • Background Extraction/Crop: Native mock FFmpeg processing blocks isolate frames and intelligently crop remote CDN URLs cleanly.
  • Topological DAG Execution: A high-level algorithm traversing nodes backwards invoking massive parallel queue sub-routines safely awaiting sequential requirements.
  • Historical Execution Replays: Robust right-hand persistent sidebar restoring deeply nested hierarchical JSON structural arrays mapped natively out from Serverless PostgreSQL.

🚀 How a Normal User Operates the App

  1. Login & Authenticate: Navigate to the platform seamlessly traversing Clerk's authentication flow.
  2. Build the Application Logic: On the Canvas Dashboard, open the Left Tool Sidebar and drag custom automation blocks into the vast center grid.
  3. Connect Nodes Natively: Connect a Text node handle to the intake handle of an LLM node creating rigid logical paths. Add Media assets into Upload Image nodes seamlessly syncing local hard-drives natively up to the UI.
  4. Initiate Global Execution: Click "Run" in the Right Sidebar. The active node boundaries will pulse in vivid purple, evaluating operations contextually on backend servers. Successful outcomes will stamp solid green badges above the bounding nodes.
  5. Review Historical Assets: The Right Sidebar preserves your historical footprint in nested expandable structures dynamically logging exact JSON completion mappings forever.

💡 Example Workflows

Users can assemble limitless creative visual flows. Here are three core architectural examples natively supported:

1. AI Image Analysis (Upload Image → LLM)

  • Action: Drag an Upload Image block and connect its output to an LLM block. Input a prompt inside the LLM like, "Extract the text from this receipt."
  • Result: Uppy streams the image to Transloadit. The DAG Orchestrator intercepts the secure CDN URL and pipes it physically into Google Gemini Vision parameters synchronously, extracting the text natively.

image analysis

2. Automated Media Cropping (Upload Image → Crop Image)

  • Action: Connect an Upload Image block to a Crop Image block.
  • Result: Visual asset is securely stored. The orchestrator triggers an isolated serverless FFmpeg routine that crops the physical asset coordinates, resolving a fresh cropped URL payload downstream.

image cropping

3. Video Intelligence (Upload Video → Extract Frame → LLM)

  • Action: Upload a raw .mp4 into the Upload Video node. Plumb its output into the Extract Frame node, and connect the extracted keyframe into an LLM node.
  • Result: Transloadit evaluates the video. The Trigger.dev Master DAG intelligently evaluates dependencies—halting execution to await FFmpeg's isolated video extraction snippet, passing the resulting still frame dynamically into Gemini for conversational analysis.

video analysis

Architectural Tooling

  • Frontend / Graphics: Next.js 14 App Router, Tailwind CSS, Zustand global context mappings, @xyflow/react
  • System Automations / Queue Evaluation: Trigger.dev Core SDK (v3) spanning multiple discrete tasks (execute-dag, run-llm, etc.)
  • Database Architecture: Prisma v7 (Neon edge adaptations), Serverless PostgreSQL, @clerk/nextjs
  • File Systems / Compute Logic: Native React Uppy CDN streaming, external cloud Transloadit FFmpeg manipulations natively tied to custom DAG React Nodes.

Initial Setup & Local Deployment Guide

Follow these explicit steps to spin up the entire architectural environment securely isolating user APIs mimicking production workloads.

1. Repository Instantiation

Deploy the foundational layout and synchronize node dependencies natively traversing local node environments.

git clone https://github.com/somilgupta/nodal
cd nodal
npm install

2. Variable Preparations

Initialize .env.local directly imitating the parameter strings internally populated across .env.example:

Required Cloud Gateway Proxies:

  • Clerk Auth Keys: Retrieve via global clerk.com dashboards binding the Next.js middleware natively.
  • Neon Postgres Pools: Mint a PostgreSQL pooling string via neon.tech aligning explicitly inside DATABASE_URL.
  • Transloadit API Identifiers: Extract native physical Auth Keys locally inside transloadit.com templates.
  • Trigger.dev Secret: Access trigger.dev capturing backend REST communication logic keys natively.
  • Google Gemini Generative AI: Access native AI generation endpoints locally via aistudio.google.com.

3. Database Synchronization

Synchronize physical Neon SQL mappings enforcing relational schemas via local CLI logic natively instantiating nested Typescript typings globally.

npx prisma generate
npx prisma db push

4. Background Execution Orchestrators

To completely evaluate native parallel queue structures locally, systematically invoke the Trigger.dev tunneling application bypassing external execution bottlenecks globally syncing webhooks natively:

npx trigger.dev@latest dev

5. Running the Vercel Execution Nodes

Initialize parallel Next.js processes traversing React routing native mappings locally mimicking physical browser interactions:

npm run dev

Navigate efficiently towards http://localhost:3000 invoking graphical interface executions securely instantiating active application shells!