Welcome to SynapseAI

Enterprise Multi-Modal AI Studio & SaaS Dashboard

SynapseAI is a commercial-grade, multi-modal artificial intelligence workspace designed for machine learning platforms, LLMOps startups, and generative AI SaaS applications. Crafted with pure semantic HTML5, pre-compiled Tailwind CSS v3.4, and zero-dependency Vanilla JavaScript (ES6+).

22 HTML Screens

Complete multi-modal studios from chat, agents, and code to token billing and observability.

100% Offline Ready

Zero external CDN reliance. All libraries (Lucide, ApexCharts) are packaged locally.

Dual Theme Engine

Dark mode by default, session light mode persistence, and reload reset.

2. Quick Start Guide

No Node.js compilation, npm installs, or build tools are required. You can preview and run the template immediately.

A

Open directly in any modern browser

Unzip the package and double-click index.html or dashboard.html. All styling, SVG icons, and charts render offline.

B

Run with a local development server

Terminal — Python 3

python -m http.server 3000   # Open http://localhost:3000

Terminal — Node.js / NPX

npx serve . -p 3000          # Open http://localhost:3000

3. Complete Folder & File Architecture

The distribution package follows an organized static file hierarchy with modular scripts and self-contained assets.

Directory Tree Root Directory

synapse-ai-template/
├── index.html                  # Marketing Landing Page & Showcase
├── dashboard.html              # AI Analytics Command Center & KPI Gauges
├── ai-chat.html                # Multi-Model Streaming AI Chat Studio
├── ai-image-generator.html     # Text-to-Image Generation & Aspect Playground
├── ai-voice-studio.html        # Neural Voice Synthesis & Audio Waveform Player
├── ai-code-assistant.html      # Side-by-Side AST Diff Refactoring Viewer
├── ai-video-generator.html     # Scene Storyboard Video Generator
├── ai-agent-builder.html       # Visual DAG Node Autonomous Agent Pipeline
├── knowledge-base.html         # RAG Vector Knowledge Base & Document Chunks
├── prompt-library.html         # Curated Prompt Engineering Template Hub
├── model-comparison.html       # Multi-Axis Capability Radar & Benchmarks
├── llm-observability.html      # Latency Waterfall Traces & LLMOps Telemetry
├── api-keys.html               # Scoped API Credentials & Webhook Endpoints
├── token-billing.html          # Token Meter Quotas, Pricing Plans & Invoices
├── team.html                   # Team Workspaces, RBAC & Seat Controls
├── profile.html                # User Profile & Security Credentials
├── edit-profile.html           # Profile Photo Upload, Bio & Timezone Editor
├── settings.html               # Model Hyperparameters, Theme & RTL Layout
├── ui-components.html          # Atomic Design Kit (Buttons, Badges, Modals)
├── login.html                  # Cyber Neural Particle Authentication Screen
├── register.html               # Account Signup with Live Password Strength Meter
├── documentation.html          # Interactive Developer Documentation Center
├── README.md                   # Markdown Quick Start Guide
└── assets/
    ├── css/
    │   ├── tailwind.min.css    # Pre-compiled Tailwind CSS v3.4 Bundle
    │   └── synapseai.css       # Custom Tokens, Glassmorphism & Aurora Animations
    ├── js/
    │   ├── main.js             # ThemeManager, Sidebar & Quick Search Controller
    │   ├── charts.js           # ApexCharts instances with auto theme updates
    │   ├── ai-chat.js          # Simulated LLM streaming & code formatting
    │   ├── agent-builder.js    # Interactive DAG Node canvas pipeline simulator
    │   └── neural-login.js     # Neural Canvas Particles & Interactive Auth
    ├── libs/
    │   ├── apexcharts.min.js   # Local self-hosted ApexCharts v3
    │   └── lucide.min.js       # Local self-hosted Lucide Icons
    └── images/
        ├── logo.svg            # Dark Theme Brand Logo
        ├── logo-dark.svg       # Light Theme Brand Logo
        ├── logo-icon.svg       # Brand Icon Glyph
        ├── favicon.svg         # Neural Synapse Favicon
        └── avatars/            # Vector User & Model Avatars (avatar-1 to avatar-10)

4. Complete 22 Template Pages Catalog

Every screen is fully functional with interactive state simulation, responsive breakpoints, and instant theme switching:

Landing Showcase index.html

High-impact marketing hero, live feature breakdown, and direct preview links.

Command Center dashboard.html

Multi-modal KPI metrics, real-time charts, model quotas, and transaction logs.

AI Chat Studio ai-chat.html

Multi-model prompt conversations with simulated thinking, syntax highlighting, and copy buttons.

AI Agent Builder ai-agent-builder.html

Interactive DAG node workflow builder with execution simulator and live log stream.

AI Code Assistant ai-code-assistant.html

Side-by-side code editor with inline diffs, language selector, and refactoring actions.

Image Generator ai-image-generator.html

Diffusion playground with aspect ratios, negative prompts, and style presets.

AI Video Generator ai-video-generator.html

Scene storyboard timeline, motion speed controls, and export settings.

AI Voice Studio ai-voice-studio.html

Neural voice cloning, pitch/stability sliders, and live interactive audio player.

Knowledge Base RAG knowledge-base.html

Vector database management, embeddings chunk inspector, and indexing status.

Prompt Library prompt-library.html

Searchable few-shot system prompt cards with category filter tags and copy buttons.

Model Benchmarks model-comparison.html

Radar capability charts, latency TTFT comparisons, and token pricing matrix.

LLMOps Observability llm-observability.html

Real-time trace telemetry, span duration timelines, and error rate monitoring.

API Keys & Webhooks api-keys.html

Secret key generators, granular scope selectors, and webhook endpoint testers.

Token Billing token-billing.html

Tier pricing comparisons, auto-recharge sliders, and downloadable invoices.

Team & Workspaces team.html

Member invitations, RBAC permissions table, and workspace audit logs.

My Profile profile.html

Account overview, security badges, active sessions, and multi-model usage.

Edit Profile edit-profile.html

Photo upload interface, bio editor, timezone, and communication preferences.

Account Settings settings.html

Model defaults, temperature sliders, notification toggles, and RTL switch.

UI Components Kit ui-components.html

Complete atomic design system: buttons, badges, inputs, tabs, accordions, and cards.

Sign In / Login login.html

Neural particle canvas animation, instant password eye toggle, and demo autofill.

Create Account register.html

Developer signup, 4-tier live password strength evaluator, and instant demo fill.

Documentation Center documentation.html

Comprehensive developer guide, folder anatomy, API reference, and deployment docs.

5. Dark & Light Mode Architecture

SynapseAI features an intelligent dual-theme engine managed in assets/js/main.js:

Dark Mode by Default: The template opens in Dark Mode on first load and whenever the page is refreshed.
Session Navigation Persistence: If a user toggles to Light Mode and clicks links to visit other screens, the Light Mode selection persists seamlessly across that browsing session using sessionStorage.
Automatic Refresh Reset: As per marketplace requirements, refreshing the page resets the session back to default Dark mode.
Dynamic Chart Updates: When toggling themes, all ApexCharts instances re-render their grid, label colors, and tooltip palettes on the fly.

6. Global Quick Search (Ctrl+K)

Pressing Ctrl + K (or Cmd + K on macOS) summons the command palette modal from any page.

Search Highlights:

Instant filtering across all 22 pages, sub-studios, billing, and settings.
Keyboard navigation with ↑ and ↓ arrows, and Enter to launch.
Press ESC to dismiss.

7. Design Tokens & Styling Guide

Easily re-theme SynapseAI by modifying the CSS variables located at the top of assets/css/synapseai.css:

assets/css/synapseai.css — Root Tokens

:root {
  /* Core Brand Colors */
  --brand-violet: #7C3AED;
  --brand-violet-glow: rgba(124, 58, 237, 0.45);
  --brand-purple: #9333EA;
  --accent-cyan: #06B6D4;
  --accent-emerald: #10B981;
  --accent-amber: #F59E0B;
  --accent-rose: #F43F5E;

  /* Quantum Dark Surfaces */
  --bg-base: #080B14;
  --bg-surface: #0E1322;
  --bg-card: rgba(14, 19, 34, 0.7);
  --card-glass: rgba(14, 19, 34, 0.65);
  --card-border: rgba(124, 58, 237, 0.2);
}

8. Universal Production Deployment

Because SynapseAI is built with pure semantic HTML5, pre-compiled Tailwind CSS, and Vanilla JavaScript, it is 100% server-agnostic. You can deploy it to any cloud provider, container, web server, or backend stack with zero build steps required.

Any Cloud Platform (AWS, Azure, Cloudflare, Vercel, Firebase)

Upload or link the root synapse-ai-template directory. Set the publish/output directory to root (.) and leave the build command blank. Works out-of-the-box on AWS S3 / CloudFront, Azure Static Web Apps, Cloudflare Pages, Vercel, or Firebase Hosting.

Standard Web Server (Nginx / Apache / cPanel)

Copy the template directory directly into your web root (e.g., /var/www/html/ or public_html/). No Node.js runtime or database required.

Nginx Configuration Snippet

server {
    listen 80;
    server_name example.com;
    root /var/www/html/synapse-ai-template;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }
}

Docker & Container Environments

Package into a lightweight Alpine Nginx container (under 15MB total):

Dockerfile

FROM nginx:alpine
COPY . /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Backend Framework Integration

Easily serve these HTML files from Python (FastAPI/Django/Flask StaticFiles), Node.js (express.static()), PHP/Laravel, Go, or Ruby on Rails.

9. Third-Party Credits, Licenses & Support

Tailwind CSS: Released under the MIT License by Tailwind Labs Inc.

Lucide Icons: Community-driven SVG icon library released under ISC License.

ApexCharts: Interactive modern charting library released under MIT License.

Google Fonts: Plus Jakarta Sans, Inter, and JetBrains Mono under SIL Open Font License.

Template Support:

For questions or assistance regarding this template: madhunath07@gmail.com