🚀 Mini-GPT Interactive Showcase & Playground

Welcome to the Mini-GPT Showcase, an interactive, full-stack application designed to visualize, test, and explore a custom-built Mini-GPT language model. This platform bridges deep learning and modern web development, offering real-time text generation, rich architectural breakdown, and sleek training visualizations.

🌟 Key Features

• ⚡ Real-Time Generation Playground: Experience interactive text generation with granular control over sampling parameters (temperature, top-k, top-p, and max tokens) with beautiful, streaming UI feedback.
• 📊 Dynamic Architecture & Training Visualizations: Deep dive into the inner workings of a custom Transformer. View interactive loss curves, attention map visualizations, and layer-by-layer step-throughs.
• 🛠️ Implemented Advanced Features: Fully realized backend mechanics tracking model checkpoints, custom performance token metrics, and advanced playground presets.
• 🎨 Premium Liquid-Glass Aesthetic: Built with an eye-catching, high-fidelity visual language utilizing custom gradients, skeuomorphic gloss, responsive layouts, and snappy micro-interactions.

🛠️ The Tech Stack

The architecture leverages a robust, end-to-end typed structure ensuring performance and seamless data flow:

• Frontend: React 19, Vite, Tailwind CSS (v4), Framer Motion for high-performance physics-based animations, and shadcn/ui components.
• Backend & Router: Express 4 powered by tRPC 11 for complete, type-safe API contracts without manual REST boilerplate or Axios handlers.
• Database & ORM: Drizzle ORM managing a relational architecture via highly optimized queries, paired with built-in schema synchronization.
• Type Safety & Validation: End-to-end strict typing with TypeScript and runtime verification using Zod schemas.
• Testing: Comprehensive endpoint and validation specs covered with a Vitest execution suite.

📂 Quick Repository Structure

├── client/ # React 19 Frontend App
│ ├── src/pages/ # Playground, Dashboard & Architecture Views
│ ├── src/components/ # Custom liquid-glass & shadcn/ui components
│ └── src/lib/trpc.ts # Type-safe tRPC React client hooks
├── drizzle/ # Database schema definitions & migrations
└── server/ # Express Server & tRPC Procedures
├── _core/ # System plumbing (OAuth, LLM & environment variables)
└── routers.ts # Core application feature procedures

🏎️ Getting Started

1. Install dependencies:

   pnpm install

2. Spin up local development server (Frontend + Backend watch loop):

   pnpm dev

3. Push database schema updates:

   pnpm db:push

4. Run the testing suite:

   pnpm test

Built with passion for AI engineering, high-performance web app