VE.AI

OmniStudio AI — Advanced Multi-Modal Intelligence Platform

OmniStudio AI is a production-grade, ChatGPT Plus-inspired multi-modal AI platform designed for seamless creation across Text, Image, and Video modalities.

Built with Next.js 14 App Router, React 18, Tailwind CSS, Lucide Icons, and Zustand.

---

🌟 Key Features

1. Multi-Modal Intelligence Hub

• Text & Code Generation:
  • Unified streaming responses (Server-Sent Events) with zero perceivable delay.
  • Full GitHub-flavored Markdown rendering with tables, blockquotes, and lists.
  • Dedicated code syntax blocks with language tags, copy-to-clipboard buttons, and visual feedback.
  • Text-to-Speech (TTS) read aloud and thumbs up/down user feedback.
  • Ready for GPT-4o and Claude 3.5 Sonnet.
• Photorealistic Image Synthesis:
  • Aspect ratio selector (1:1 Square, 16:9 Landscape, 9:16 Portrait, 4:3 Standard).
  • Style presets: Photorealistic, Cinematic, Anime, 3D Render, Cyberpunk, Minimalist.
  • Multi-image responsive grid with skeletal shimmer loading states.
  • Interactive hover actions: Direct high-res download, 4X Upscale enhancement, and full-screen Lightbox Modal.
  • Ready for OpenAI DALL-E 3 and FLUX.1 Pro.
• Cinematic Video Synthesis:
  • Specialized video controls: Aspect ratio toggle, Motion Intensity Slider (1–10), Camera Movement Presets (Static, Pan Right, Pan Left, Zoom In, Orbit), and duration (4s, 8s).
  • Custom HTML5 Video Player with play/pause, timeline scrubber, time elapsed / duration counters, mute/unmute, and MP4 direct download.
  • Ready for Runway Gen-3 Alpha and Luma Dream Machine.

2. Sleek Dark Glassmorphism UI/UX

• Collapsible Sidebar:
  • Chronological history grouping: Today, Previous 7 Days, Older.
  • Fast search filter for past conversations.
  • Inline title editing and thread deletion.
  • Keyboard shortcut: Ctrl + K (or Cmd + K) for instant new chat creation.
• Sticky Glassmorphism Header:
  • Multi-modal dropdown with model capability badges, context window size, and speed ratings.
  • Real-time system status indicators.
  • One-click conversation export to JSON.
  • Clear conversation action with safety confirmation.
• Floating Intelligent Input:
  • Auto-expanding textarea up to 180px height.
  • Dynamic modality control bar adapting on model change.
  • File attachments with live chips and size badges.
  • Voice dictation / microphone integration with speech recognition.
  • Prominent generate button with loading spinners and stop/cancel controls.

---

🚀 Quick Start

1. Requirements

• Node.js 18+ or 20+ (LTS)
• npm or pnpm

2. Running Locally

# Start development server
npm run dev

# Open in browser
http://localhost:3000

3. Production Build

npm run build
npm run start

4. Optional API Keys Configuration

Copy .env.example to .env.local and add your keys:

OPENAI_API_KEY=your_openai_api_key_here
ANTHROPIC_API_KEY=your_anthropic_api_key_here
REPLICATE_API_TOKEN=your_replicate_token_here
RUNWAY_API_SECRET=your_runway_secret_here

Note: If no API keys are provided, OmniStudio AI runs with an intelligent, realistic simulation engine.

---

📂 Project Architecture

f:\ai project\
├── src/
│   ├── app/
│   │   ├── api/
│   │   │   ├── chat/route.ts            # Streaming chat endpoint (SSE)
│   │   │   ├── generate-image/route.ts  # Image generation endpoint
│   │   │   └── generate-video/route.ts  # Video generation endpoint
│   │   ├── globals.css                  # Dark theme & glassmorphism tokens
│   │   ├── layout.tsx                   # Font & root layout
│   │   └── page.tsx                     # Main Studio application page
│   ├── components/
│   │   ├── layout/
│   │   │   ├── Sidebar.tsx              # History sidebar
│   │   │   ├── Header.tsx               # Sticky header
│   │   │   └── ModelSelector.tsx        # Model switcher dropdown
│   │   ├── chat/
│   │   │   ├── ChatContainer.tsx        # Message feed & scroll
│   │   │   ├── ChatMessage.tsx          # Dual user/AI message bubble
│   │   │   ├── MarkdownContent.tsx      # Markdown parser & code block
│   │   │   ├── ImageGrid.tsx            # Multi-image grid with upscale & lightbox
│   │   │   ├── ImageLightbox.tsx        # High-res modal preview
│   │   │   ├── VideoPlayer.tsx          # Video player with scrubber
│   │   │   └── WelcomeHero.tsx          # Prompt suggestions
│   │   └── input/
│   │       ├── ChatInput.tsx            # Expanding input & action bar
│   │       ├── ImageControls.tsx        # Aspect ratio & style preset selectors
│   │       └── VideoControls.tsx        # Motion slider & camera presets
│   ├── store/
│   │   └── useChatStore.ts              # Zustand state store with LocalStorage sync
│   ├── types/
│   │   └── index.ts                     # TypeScript definitions
│   └── lib/
│       ├── models.ts                    # Model catalog & metadata
│       └── utils.ts                     # Classname merge & utilities
├── tailwind.config.ts
├── tsconfig.json
└── package.json