# Project export: NeuroBlocks This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small. ## Project metadata - Hackathon: TreeHacks 2026 - Tagline: No setup. No code. Just drag, connect, and learn ML. - Devpost: https://devpost.com/software/neuroblocks-cz7n9k - GitHub: https://github.com/tupdaily/AIPlayground - Demo: https://neuroblocks.vercel.app/login - Video: https://www.youtube.com/embed/kGlmRMJCSdg?enablejsapi=1&hl=en_US&rel=0&start=&version=3&wmode=transparent - Result: winner ([Runpod] Best use of Flash (1st Place: 200 Runpod credits per team member (up to 4). 2nd Place: 100 Runpod credits per team member (up to 4). 3rd Place: 50 Runpod credits per team member (up to 4).)) - Team: 5 GitHub contributor(s) — sreekara (29 commits), tupdaily (13 commits), Cursor (10 commits), Claude Sonnet 4.5 (2 commits), Ryan6407 (1 commits) ## Devpost submission (written by the team) ### Inspiration For all of us on the team, our first interaction with programming was block coding. It taught us logic and thinking without memorization or messy syntax. It developed our love for computer programming. Our goal with NeuroBlocks is to do the same for the next generation of engineers. Machine learning and deep learning are the foundations of the tech products we’ve become familiar with, such as ChatGPT, Gemini, and Claude. By teaching students about the fundamentals of Artificial Intelligence, our team proudly can say that we contributed to a new revolution. ### What it does NeuroBlocks is a visual, drag-and-drop educational platform for building and understanding complex neural architectures. Think of it as a "LEGO for AI"—not only do we provide the manual for you to learn and understand, but we also give you a playground to create. You can learn the foundation skills in research papers in a sand-boxed environment or choose to start from scratch and figure it all out on your own! Key Features: BlockAI Agent Understand neural architectures better using our AI agent that can design its own networks and help you improve yours Drag-and-Drop Interface: Build neural networks by dragging blocks (layers) onto a canvas and connecting them Real-Time Shape Propagation: Visualize and understand tensor dimensions flow through your network as you build it Interactive Training: Train your networks with live loss graphs and accuracy metrics Custom Datasets: Solve challenges you are interested in by uploading your data Challenge Mode: Complete pre-built challenges to learn neural network concepts progressively Supabase Integration: Save and load your trained models PyTorch Backend: Real training powered by PyTorch, not just simulations Inference: Run inference on your trained models through the UI Whether you're learning the basics with an MNIST digit classifier or experimenting with complex architectures like ResNets, NeuroBlocks makes the abstract concrete. ### How we built it NeuroBlocks is a full-stack application with a sophisticated visual canvas system: Frontend (Next.js + TypeScript + Tailwind) Built with Next.js 14 using the App Router for modern React patterns Custom-built NeuralCanvas system for the block-based graph editor Block palette with draggable neural network components (Linear, Conv2d, ReLU, Dropout, etc.) Real-time shape propagation engine that validates and displays tensor dimensions Training panel with live loss/accuracy graphs Backend (FastAPI + PyTorch + RunPod) Python REST API built with FastAPI for async operations PyTorch integration for actual neural network training (not just visualization) Dynamic model construction from graph JSON Training endpoints with real-time progress updates Scalable training models on RunPod Database (Supabase) PostgreSQL database for storing user playgrounds and challenges Supabase Auth for user authentication Architecture Highlights: Modular component system: NeuralCanvas is a self-contained feature within the frontend Type-safe with TypeScript throughout Graph-based data model: networks are represented as nodes and edges Shape inference system that validates network architectures before training ### Challenges we ran into Shape Propagation: Getting tensor dimensions to flow correctly through arbitrary network graphs was complex. We had to implement a topological sort algorithm and handle branching/merging paths (like ResNet skip connections). Shape Propagation: Getting tensor dimensions to flow correctly through arbitrary network graphs was complex. We had to implement a topological sort algorithm and handle branching/merging paths (like ResNet skip connections). Real-Time Visualization: Rendering activations and weights for large layers without killing browser performance required careful optimization—we ended up implementing sampling and WebGL rendering for larger tensors. Real-Time Visualization: Rendering activations and weights for large layers without killing browser performance required careful optimization—we ended up implementing sampling and WebGL rendering for larger tensors. Backend-Frontend Sync: Keeping the visual representation synchronized with the actual PyTorch model was tricky. We built a graph-to-PyTorch translator that validates user-defined architectures. Backend-Frontend Sync: Keeping the visual representation synchronized with the actual PyTorch model was tricky. We built a graph-to-PyTorch translator that validates user-defined architectures. Edge Routing: Drawing smooth, non-overlapping connections between blocks required a custom routing algorithm that considers block positions and avoids collisions. Edge Routing: Drawing smooth, non-overlapping connections between blocks required a custom routing algorithm that considers block positions and avoids collisions. Challenge System: Designing progressive challenges that teach neural network concepts while remaining solvable required careful educational design and testing. Challenge System: Designing progressive challenges that teach neural network concepts while remaining solvable required careful educational design and testing. ### Accomplishments we're proud of The Agent: The BlockAI agent that can understand our custom block language, reason about proper neural architecture design, and drag in blocks to the playground itself. Not only did it help users, but it also helped us propose our own AI systems. The Agent: The BlockAI agent that can understand our custom block language, reason about proper neural architecture design, and drag in blocks to the playground itself. Not only did it help users, but it also helped us propose our own AI systems. Shape Propagation That Just Works: The system automatically validates your architecture and shows you exactly what tensor shapes flow through each layer. No more cryptic "dimension mismatch" errors—you see the problem visually. Shape Propagation That Just Works: The system automatically validates your architecture and shows you exactly what tensor shapes flow through each layer. No more cryptic "dimension mismatch" errors—you see the problem visually. Real Training, Real Models: Unlike many educational tools that just simulate, NeuroBlocks trains actual PyTorch models that could be exported and used in production. Real Training, Real Models: Unlike many educational tools that just simulate, NeuroBlocks trains actual PyTorch models that could be exported and used in production. Smooth User Experience: The drag-and-drop interface feels natural and responsive. Building networks is genuinely fun. Smooth User Experience: The drag-and-drop interface feels natural and responsive. Building networks is genuinely fun. Educational Impact: We've had complete beginners build their first neural network and understand concepts like convolution, pooling, and activation functions through hands-on experimentation. Educational Impact: We've had complete beginners build their first neural network and understand concepts like convolution, pooling, and activation functions through hands-on experimentation. ### What we learned Visual abstraction is powerful: Representing complex mathematical operations as draggable blocks makes them accessible. The right metaphor (LEGO blocks) helps people build mental models. Visual abstraction is powerful: Representing complex mathematical operations as draggable blocks makes them accessible. The right metaphor (LEGO blocks) helps people build mental models. Real-time feedback accelerates learning: Seeing shape propagation and activations as you build helps users catch mistakes immediately and understand architecture decisions. Real-time feedback accelerates learning: Seeing shape propagation and activations as you build helps users catch mistakes immediately and understand architecture decisions. Graph-based UIs are hard: Managing state in a visual node-based editor is significantly more complex than traditional forms. We learned a lot about data structures and state management. Graph-based UIs are hard: Managing state in a visual node-based editor is significantly more complex than traditional forms. We learned a lot about data structures and state management. Performance matters for interactivity: Smooth 60fps interactions were crucial for the "playground" feel. We optimized heavily and learned techniques like Canvas batching and request animation frames. Performance matters for interactivity: Smooth 60fps interactions were crucial for the "playground" feel. We optimized heavily and learned techniques like Canvas batching and request animation frames. Educational design is an art: Creating challenges that teach without frustrating required iterating on difficulty curves and providing the right hints at the right times. Educational design is an art: Creating challenges that teach without frustrating required iterating on difficulty curves and providing the right hints at the right times. ### What's next We truly want to connect with educators to spread our product to students: Partner with high schools or universities to integrate our software into the classroom Work with course platforms like Coursera or Udemy to supplement lecture material with interactive network design Connect with researchers who upload their work to our site, which can then be broken down for users Tech Stack Frontend: Next.js 14, TypeScript, Tailwind CSS, React Backend: FastAPI, PyTorch, Python, OpenAI API, RunPod Database: Supabase (PostgreSQL), Supabase Auth Visualization: Chart.js, HTML Canvas API Deployment: Vercel (frontend), GCS (backend) Links GitHub Repository: https://github.com/tupdaily/AIPlayground Live Demo: https://neuroblocks.vercel.app/login Team Motivate others to be smarter, just as others motivated us. ## README (from the GitHub repository) # NeuroBlocks A visual playground for building and training neural networks: drag-and-drop blocks, connect layers, save to Supabase, and run challenges. ## Repo structure Everything lives under two main folders: ``` neuroblocks/ ├── frontend/ # Next.js app (App Router, TypeScript, Tailwind) │ └── src/ │ ├── app/ # Routes: /, /playground, /playground/[id], /login, etc. │ ├── components/ # App-level UI: HomeDashboard, PlaygroundNeuralCanvas, etc. │ ├── lib/ # Supabase clients, levels, playgrounds, levelGraphAdapter │ ├── neuralcanvas/ # Visual canvas feature (blocks, canvas, peep-inside, training) │ └── types/ ├── backend/ # Python API (FastAPI, PyTorch for training) │ └── main.py ├── package.json # Root scripts delegate to frontend (npm run dev, build, start) └── README.md ``` - **frontend** — The only frontend app. It contains the **NeuralCanvas** (the block-based graph editor) under `frontend/src/neuralcanvas/`: canvas, block palette, shape propagation, peep-inside visualizations, training panel. - **backend** — Single Python service for training and any server-side APIs. There is no separate “NeuralCanvas” repo or folder at the top level; the canvas is a feature inside the frontend. ## Quick start ```bash # From repo root npm install npm run dev # Frontend: http://localhost:3000 # Backend (separate terminal) cd backend && python -m uvicorn main:app --reload --port 8000 # API: http://localhost:8000 ``` See `frontend/SUPABASE_SETUP.md` for Supabase (auth, playgrounds, levels). ## Detected evidence (automated analysis) Indexed codebase: 151 recognized source files, 1086 KB. - CSS (language) — detected in the code - FastAPI (technology) — detected in the code - Next.js (technology) — detected in the code - OpenAI (technology) — detected in the code - Python (language) — detected in the code - PyTorch (technology) — detected in the code - React (technology) — detected in the code - SQL (language) — detected in the code - Supabase (technology) — detected in the code - Tailwind CSS (technology) — detected in the code - TypeScript (language) — detected in the code - Anthropic (technology) — claimed on Devpost, not found in the code - PostgreSQL (technology) — claimed on Devpost, not found in the code - Vercel (technology) — claimed on Devpost, not found in the code - AI coding agent: Claude Code — evidence: commit authorship or trailers - AI coding agent: Cursor — evidence: commit authorship or trailers ## Codebase structure (from repository index) ### Files (120 of 167) ``` .gitignore backend/.dockerignore backend/.gitignore backend/.python-version backend/auth.py backend/compiler/__init__.py backend/compiler/model_builder.py backend/compiler/normalize_graph.py backend/compiler/shape_inference.py backend/compiler/validator.py backend/config.py backend/debug_model.py backend/Dockerfile backend/main.py backend/migrations/001_create_trained_models_table.sql backend/models/__init__.py backend/models/schemas.py backend/README.md backend/requirements.txt backend/routers/__init__.py backend/routers/datasets.py backend/routers/feedback.py backend/routers/graphs.py backend/routers/models.py backend/routers/training.py backend/setup.py backend/storage.py backend/supabase_client.py backend/training/__init__.py backend/training/dataset_validation.py backend/training/datasets.py backend/training/inference.py backend/training/input_processor.py backend/training/peep_extraction.py backend/training/runpod_flash_trainer.py backend/training/runpod_inference.py backend/training/shape_validator.py backend/training/trainer.py cloudbuild.yaml frontend/.gitignore frontend/eslint.config.mjs frontend/middleware.ts frontend/next.config.ts frontend/package.json frontend/postcss.config.mjs frontend/README.md frontend/scripts/seed-levels.ts frontend/src/app/auth/callback/route.ts frontend/src/app/globals.css frontend/src/app/layout.tsx frontend/src/app/login/layout.tsx frontend/src/app/login/page.tsx frontend/src/app/page.tsx frontend/src/app/playground/[id]/page.tsx frontend/src/app/playground/page.tsx frontend/src/components/editor/Canvas.tsx frontend/src/components/editor/PropertiesPanel.tsx frontend/src/components/editor/Sidebar.tsx frontend/src/components/editor/Toolbar.tsx frontend/src/components/home/HomeDashboard.tsx frontend/src/components/nodes/MLNode.tsx frontend/src/components/playground/PlaygroundNeuralCanvas.tsx frontend/src/components/ThemeProvider.tsx frontend/src/components/ThemeToggle.tsx frontend/src/components/training/TrainingDashboard.tsx frontend/src/lib/blockRegistry.ts frontend/src/lib/levelGraphAdapter.ts frontend/src/lib/paperWalkthroughs.ts frontend/src/lib/serialization.ts frontend/src/lib/supabase/client.ts frontend/src/lib/supabase/levelCompletions.ts frontend/src/lib/supabase/levels.ts frontend/src/lib/supabase/middleware.ts frontend/src/lib/supabase/paperProgress.ts frontend/src/lib/supabase/playgrounds.ts frontend/src/lib/supabase/server.ts frontend/src/lib/supabase/userHistories.ts frontend/src/neuralcanvas/components/.gitkeep frontend/src/neuralcanvas/components/augment/AugmentPreviewModal.tsx frontend/src/neuralcanvas/components/blocks/ActivationBlock.tsx frontend/src/neuralcanvas/components/blocks/AddBlock.tsx frontend/src/neuralcanvas/components/blocks/AttentionBlock.tsx frontend/src/neuralcanvas/components/blocks/AugmentBlock.tsx frontend/src/neuralcanvas/components/blocks/BaseBlock.tsx frontend/src/neuralcanvas/components/blocks/BoardBlock.tsx frontend/src/neuralcanvas/components/blocks/ConcatBlock.tsx frontend/src/neuralcanvas/components/blocks/Conv2DBlock.tsx frontend/src/neuralcanvas/components/blocks/DisplayBlock.tsx frontend/src/neuralcanvas/components/blocks/DropoutBlock.tsx frontend/src/neuralcanvas/components/blocks/EmbeddingBlock.tsx frontend/src/neuralcanvas/components/blocks/FlattenBlock.tsx frontend/src/neuralcanvas/components/blocks/index.ts frontend/src/neuralcanvas/components/blocks/InputBlock.tsx frontend/src/neuralcanvas/components/blocks/InputSpaceBlock.tsx frontend/src/neuralcanvas/components/blocks/LinearBlock.tsx frontend/src/neuralcanvas/components/blocks/LSTMBlock.tsx frontend/src/neuralcanvas/components/blocks/MaxPool1DBlock.tsx frontend/src/neuralcanvas/components/blocks/MaxPool2DBlock.tsx frontend/src/neuralcanvas/components/blocks/ModelBlock.tsx frontend/src/neuralcanvas/components/blocks/NormBlock.tsx frontend/src/neuralcanvas/components/blocks/OutputBlock.tsx frontend/src/neuralcanvas/components/blocks/PositionalEmbeddingBlock.tsx frontend/src/neuralcanvas/components/blocks/PositionalEncodingBlock.tsx frontend/src/neuralcanvas/components/blocks/SoftmaxBlock.tsx frontend/src/neuralcanvas/components/blocks/TextEmbeddingBlock.tsx frontend/src/neuralcanvas/components/blocks/TextInputBlock.tsx frontend/src/neuralcanvas/components/canvas/BlockNode.tsx frontend/src/neuralcanvas/components/canvas/BlockPalette.tsx frontend/src/neuralcanvas/components/canvas/ConnectionWire.tsx frontend/src/neuralcanvas/components/canvas/NeuralCanvas.tsx frontend/src/neuralcanvas/components/canvas/PlaygroundIdContext.tsx frontend/src/neuralcanvas/components/canvas/PredictionContext.tsx frontend/src/neuralcanvas/components/canvas/ShapeContext.tsx frontend/src/neuralcanvas/components/canvas/ShapeEdge.tsx frontend/src/neuralcanvas/components/datasets/DatasetUploadModal.tsx frontend/src/neuralcanvas/components/inference/ImageInput.tsx frontend/src/neuralcanvas/components/inference/InferencePanel.tsx frontend/src/neuralcanvas/components/inference/TensorInput.tsx frontend/src/neuralcanvas/components/inference/TextInput.tsx frontend/src/neuralcanvas/components/peep-inside/ActivationHistogram.tsx [47 more files omitted for size] ``` ### Dependencies - backend/requirements.txt: certifi@>=2024.0.0, fastapi@==0.115.6, google-api-core@>=2.0.0, google-auth@>=2.0.0, google-cloud-storage@>=2.14.0, openai@>=2.20.0, pydantic@>=2.11.7,<3, pydantic-settings@>=2.0.0, python-dotenv@>=1.0.0, python-multipart@>=0.0.9, runpod-flash, supabase@>=2.28.0, torch@>=2.0.0, torchvision@>=0.15.0, uvicorn[standard]@==0.34.0, websockets@>=12.0 - frontend/package.json: @supabase/ssr@^0.8.0, @supabase/supabase-js@^2.95.3, @tailwindcss/postcss@^4, @types/canvas-confetti@^1.9.0, @types/d3@^7.4.3, @types/node@^20, @types/react@^19, @types/react-dom@^19, @xyflow/react@^12.10.0, canvas-confetti@^1.9.4, d3@^7.9.0, eslint@^9, eslint-config-next@16.1.6, framer-motion@^12.34.0, lucide-react@^0.564.0, next@16.1.6, next-themes@^0.4.6, react@19.2.3, react-dom@19.2.3, react-markdown@^10.1.0, recharts@^3.7.0, socket.io-client@^4.8.3, tailwindcss@^4, typescript@^5, zustand@^5.0.11 - package.json: ngrok@^5.0.0-beta.2 ### Recent commits (newest first) - Merge branch 'main' of github.com:Ryan6407/AIPlayground - migration to new gcloud - Rename project and update README structure - fix base api - fixed base api url for prod - Merge branch 'main' of github.com:Ryan6407/AIPlayground - locking in runpod deployment for demo - Model block, Display prediction, inference validation and comments - fixed bug in layer norm - updated gpt - Merge branch 'main' of https://github.com/Ryan6407/AIPlayground - improved visuals - Merge branch 'main' of github.com:Ryan6407/AIPlayground - more fixes - Rebrand to NeuroBlocks: name, logo, font, and login UI - more test - Merge branch 'main' of github.com:Ryan6407/AIPlayground - glob url issues - test classification - Merge YOUI into main: Augment block, dataset sample API, canvas zoom, certifi SSL, comments ## Key source files (fetched from GitHub, selected and truncated for size) ### frontend/SUPABASE_SETUP.md ```markdown # Supabase setup for NeuroBlocks auth ## 1. Create a Supabase project 1. Go to [supabase.com](https://supabase.com) and sign in. 2. Create a new project (or use an existing one). 3. Wait for the project to be ready. ## 2. Get your keys 1. In the Supabase dashboard, open **Project Settings** (gear icon) → **API**. 2. Copy: - **Project URL** → use as `NEXT_PUBLIC_SUPABASE_URL` - **anon public** key → use as `NEXT_PUBLIC_SUPABASE_ANON_KEY` Create a `.env.local` in the `frontend` directory: ```env NEXT_PUBLIC_SUPABASE_URL=https://xxxxxxxxxxxx.supabase.co NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9... ``` ## 3. Enable Google and GitHub sign-in ### Google (fix for "redirect_uri_mismatch") 1. In Supabase: **Authentication** → **Providers** → enable **Google**. 2. Get your **exact** redirect URI: - Supabase dashboard → **Project Settings** (gear) → **API**. - Copy the **Project URL** (e.g. `https://abcdefghijk.supabase.co`). - Your **Authorized redirect URI for Google** is that URL + `/auth/v1/callback`: - Example: `https://abcdefghijk.supabase.co/auth/v1/callback` - Do **not** use `http://localhost:3000/auth/callback` here — that is only for Supabase URL config below; Google must redirect to **Supabase**, not your app. 3. In [Google Cloud Console](https://console.cloud.google.com/): - Create or select a project. - **APIs & Services** → **Credentials** → **Create credentials** → **OAuth client ID**. - Application type: **Web application**. - Under **Authorized redirect URIs** click **Add URI** and paste **exactly**: `https://YOUR_PROJECT_REF.supabase.co/auth/v1/callback` (replace `YOUR_PROJECT_REF` with the middle part of your Supabase Project URL; no trailing slash). - Save. Copy **Client ID** and **Client Secret**. 4. Back in Supabase **Google** provider settings, paste **Client ID** and **Client Secret** and save. ### GitHub 1. In Supabase: **Authentication** → **Providers** → enable **GitHub**. 2. In [GitHub Developer Settings](https://github.com/settings/developers): - **OAuth Apps** → **New OAuth App**. - **Authorization callback URL**: `https://.supabase.co/auth/v1/callback` - Create and copy **Client ID** and **Client Secret**. 3. In Supabase **GitHub** provider settings, paste **Client ID** and **Client Secret** and save. ## 4. Set your app URL for redirects 1. In Supabase: **Authentication** → **URL Configuration**. 2. Set **Site URL** to your app URL, e.g.: - Local: `http://localhost:3000` - Production: `https://your-domain.com` 3. Add **Redirect URLs** (one per line) if you use extra redirect URLs, e.g.: - `http://localhost:3000/auth/callback` - `https://your-domain.com/auth/callback` After this, sign in with Google and GitHub will work and redirect back to your app. ## 5. Create the playgrounds table (for saving graphs) To store each user’s saved playgrounds (graphs as JSON), run the migration in the S [truncated — 371 more characters] ``` ### package.json ``` { "name": "aiplayground", "private": true, "scripts": { "dev": "npm run dev --prefix frontend", "build": "npm run build --prefix frontend", "start": "npm run start --prefix frontend" }, "dependencies": { "ngrok": "^5.0.0-beta.2" } } ``` ### backend/requirements.txt ``` fastapi==0.115.6 uvicorn[standard]==0.34.0 pydantic>=2.11.7,<3 pydantic-settings>=2.0.0 torch>=2.0.0 torchvision>=0.15.0 websockets>=12.0 python-multipart>=0.0.9 runpod-flash python-dotenv>=1.0.0 certifi>=2024.0.0 openai>=2.20.0 supabase >=2.28.0 google-cloud-storage>=2.14.0 google-auth>=2.0.0 google-api-core>=2.0.0 ``` ### backend/Dockerfile ``` # Use Python 3.12 slim image to reduce size FROM python:3.12-slim # Set working directory WORKDIR /app # Install system dependencies needed for PyTorch RUN apt-get update && apt-get install -y \ build-essential \ && rm -rf /var/lib/apt/lists/* # Copy requirements first for better caching COPY requirements.txt . # Install Python dependencies RUN pip install --no-cache-dir -r requirements.txt # Copy the rest of the application COPY . . # Cloud Run sets PORT environment variable ENV PORT=8080 EXPOSE 8080 # Run the FastAPI application CMD uvicorn main:app --host 0.0.0.0 --port ${PORT:-8080} ``` ### frontend/package.json ``` { "name": "frontend", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint", "seed-levels": "npx tsx scripts/seed-levels.ts" }, "dependencies": { "@supabase/ssr": "^0.8.0", "@supabase/supabase-js": "^2.95.3", "@xyflow/react": "^12.10.0", "canvas-confetti": "^1.9.4", "d3": "^7.9.0", "framer-motion": "^12.34.0", "lucide-react": "^0.564.0", "next": "16.1.6", "next-themes": "^0.4.6", "react": "19.2.3", "react-dom": "19.2.3", "react-markdown": "^10.1.0", "recharts": "^3.7.0", "socket.io-client": "^4.8.3", "zustand": "^5.0.11" }, "devDependencies": { "@tailwindcss/postcss": "^4", "@types/canvas-confetti": "^1.9.0", "@types/d3": "^7.4.3", "@types/node": "^20", "@types/react": "^19", "@types/react-dom": "^19", "eslint": "^9", "eslint-config-next": "16.1.6", "tailwindcss": "^4", "typescript": "^5" } } ``` ### backend/main.py ```python """AIPlayground Backend - FastAPI server for visual ML model building.""" import os # Set SSL certs before any imports that trigger downloads (e.g. torchvision # datasets). Ensures MNIST/CIFAR-10 etc. can download on systems where Python # doesn't use the system CA bundle (e.g. some macOS installs). try: import certifi os.environ.setdefault("SSL_CERT_FILE", certifi.where()) os.environ.setdefault("REQUESTS_CA_BUNDLE", certifi.where()) except ImportError: pass from fastapi import FastAPI from fastapi.middleware.cors import CORSMiddleware from routers import feedback, graphs, datasets, training, models from config import settings app = FastAPI( title="AIPlayground API", description="Backend for visual ML model building, training, and evaluation", version="0.1.0", ) # CORS: allow frontend to connect # Get allowed origins from environment variable or use defaults ALLOWED_ORIGINS = os.getenv( "ALLOWED_ORIGINS", "http://localhost:3000,http://127.0.0.1:3000" ).split(",") app.add_middleware( CORSMiddleware, allow_origins=ALLOWED_ORIGINS, allow_origin_regex=r"https://.*\.vercel\.app", allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) app.include_router(feedback.router) app.include_router(graphs.router) app.include_router(datasets.router) app.include_router(training.router) app.include_router(models.router) @app.get("/") async def root(): return {"status": "ok", "service": "AIPlayground API"} @app.get("/health") async def health(): import torch return { "status": "healthy", "cuda_available": torch.cuda.is_available(), "device": str(torch.device("cuda" if torch.cuda.is_available() else "cpu")), "runpod_enabled": settings.runpod_enabled, "mode": "runpod" if settings.runpod_enabled else "local", } ``` ### frontend/src/app/layout.tsx ```typescript import type { Metadata } from "next"; import { Inter, JetBrains_Mono, Outfit } from "next/font/google"; import "./globals.css"; import { ThemeProvider } from "@/components/ThemeProvider"; const inter = Inter({ variable: "--font-inter", subsets: ["latin"], }); const jetbrainsMono = JetBrains_Mono({ variable: "--font-jetbrains-mono", subsets: ["latin"], }); const outfit = Outfit({ variable: "--font-outfit", subsets: ["latin"], display: "swap", }); export const metadata: Metadata = { title: "NeuroBlocks — Learn AI Visually", description: "Build, train, and understand neural networks — visually.", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( {children} ); } ``` ### frontend/src/app/page.tsx ```typescript import { createClient } from "@/lib/supabase/server"; import { redirect } from "next/navigation"; import { HomeDashboard } from "@/components/home/HomeDashboard"; export default async function Home() { let user = null; try { const supabase = await createClient(); const { data } = await supabase.auth.getUser(); user = data.user; } catch (e) { const msg = e instanceof Error ? e.message : String(e); if (msg.includes("Missing Supabase env")) { return (

Supabase not configured

Add NEXT_PUBLIC_SUPABASE_URL and{" "} NEXT_PUBLIC_SUPABASE_ANON_KEY to{" "} frontend/.env.local, then restart the dev server.

Get your URL and anon key →
); } throw e; } if (!user) { redirect("/login"); } return ; } ``` ### frontend/src/app/login/layout.tsx ```typescript export default function LoginLayout({ children, }: { children: React.ReactNode; }) { return <>{children}; } ``` ### frontend/src/app/playground/page.tsx ```typescript "use client"; import dynamic from "next/dynamic"; const PlaygroundNeuralCanvas = dynamic( () => import("@/components/playground/PlaygroundNeuralCanvas"), { ssr: false } ); export default function PlaygroundPage() { return ; } ``` [135 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]