You are an expert AI startup consultant and a senior full-stack developer. Your task is to generate a comprehensive AI Master Prompt for creating a single-page SPA (Single Page Application) for an innovative SaaS platform called 'LLM Architecture Gallery'. This platform aims to provide an interactive and visual way for users to explore, compare, and understand the architectures of various Large Language Models (LLMs).
**1. PROJECT OVERVIEW:**
- **Application Name:** LLM Architecture Gallery
- **Purpose:** To serve as a centralized, interactive visual repository for LLM architectures, making complex model designs accessible and understandable.
- **Problem Solved:** The rapid evolution of LLMs has led to a proliferation of diverse architectures, making it difficult for researchers, engineers, and enthusiasts to keep track of, compare, and deeply understand their underlying structures. Existing resources are often scattered, static, or lack visual interactivity.
- **Value Proposition:** Empower users with a clear, visual, and interactive understanding of LLM architectures, facilitating informed decision-party-making for research, development, and adoption. Users can easily compare different models side-by-side, dive into specific architectural components, and access relevant technical documentation directly from the gallery.
**2. TECH STACK:**
- **Frontend Framework:** React (using Vite for fast development environment)
- **Styling:** Tailwind CSS (for utility-first styling and rapid UI development)
- **State Management:** Zustand (lightweight and efficient for managing application state, especially for managing filter states, selected models, and comparison lists)
- **Routing:** React Router DOM (for handling navigation within the SPA, although minimal in a single-page context, useful for potential deep linking or future expansion)
- **Charting/Diagramming:** Mermaid.js or a similar library for rendering the architecture diagrams dynamically based on data. Alternatively, SVG manipulation for custom, interactive diagrams.
- **HTTP Client:** Axios (for fetching data from a mock API or a real backend)
- **Icons:** Heroicons or Font Awesome
- **Deployment:** Vercel or Netlify (for seamless deployment and hosting)
**3. CORE FEATURES & USER FLOWS:**
- **Interactive Architecture Gallery:**
- **User Flow:** Upon loading the app, the user sees a gallery view of LLM architecture cards. Each card displays the model name, a thumbnail/icon, key specs (e.g., parameters, date). Users can scroll through these cards.
- **Details:** The gallery is the main landing page. It should support filtering and sorting.
- **Model Detail View:**
- **User Flow:** Clicking on a gallery card navigates the user (or opens a modal/section) to a detailed view of that specific LLM architecture. This view prominently features an interactive diagram of the architecture. Users can hover over components for tooltips or click to expand/collapse sections.
- **Details:** This view also includes sections for "Key Details", "Related Concepts", links to "config.json", "Tech Report", and "View in article".
- **Filtering and Sorting:**
- **User Flow:** Users can interact with filter controls (e.g., dropdowns, checkboxes) at the top of the gallery to narrow down the list of LLMs based on criteria like parameter count, decoder type, attention mechanism, or release date. A sort control allows ordering the results.
- **Details:** Filters should update the displayed gallery in real-time.
- **Comparison Feature (MVP+ or core):**
- **User Flow:** Users can select multiple models (e.g., via a checkbox on gallery cards or detail view) to add to a comparison list. A dedicated "Compare" button or section allows users to view the selected models side-by-side, highlighting architectural differences.
- **Details:** This feature will focus on comparing key architectural components and parameters.
- **Link Integration:**
- **User Flow:** All provided links (config.json, Tech Report, View in article, Zazzle poster) should be clearly accessible from the Model Detail View.
- **Details:** These links should open in new tabs.
**4. UI/UX DESIGN:**
- **Layout:** Single Page Application. A header containing the app title/logo and potentially main navigation/filter controls. The main content area will display the gallery or the detailed model view. A footer for additional links (about, contact, etc.). Use a clean, modern, and slightly dark theme suitable for technical content.
- **Color Palette:** Primary: Dark charcoal/near-black (#121212). Secondary: Deep blues or purples for accents and interactive elements (#4A90E2, #7F5AF0). Tertiary: Lighter grays for text and borders (#A0A0A0, #E0E0E0). Accent: A vibrant color for highlights or CTAs (e.g., bright cyan or green).
- **Typography:** Use a clean, readable sans-serif font like Inter or Poppins for headings and body text. Ensure good contrast ratios.
- **Component Hierarchy:** Card components for the gallery, modal or dedicated page section for model details, filter/sort UI elements, comparison view.
- **Responsive Design:** Mobile-first approach. Ensure the layout adapts gracefully to various screen sizes. On mobile, filters might be hidden behind a button. Gallery cards should stack vertically. Detail views should be easily navigable on smaller screens.
- **Visual Style:** Minimalist, data-focused. Emphasize clarity and readability. Use subtle animations to indicate state changes and interactions.
**5. DATA MODEL:**
- **State Structure (Zustand Store):**
- `models`: Array of LLM objects.
- `filteredModels`: Array of LLM objects after applying filters.
- `selectedFilters`: Object storing current filter criteria (e.g., `{ decoderType: 'Dense', minParams: 7 }`).
- `comparisonList`: Array of model IDs or full model objects currently selected for comparison.
- `currentView`: String indicating current view ('gallery', 'detail', 'comparison').
- `selectedModel`: Object representing the currently viewed model in detail view.
- `isLoading`: Boolean for loading states.
- `error`: String or null for error handling.
- **LLM Object Structure (Mock Data Example):**
```json
{
"id": "llama3-8b",
"title": "Llama 3 8B",
"parameters": 8,
"scaleUnit": "Billion",
"date": "2024-04-18",
"decoderType": "Dense",
"attention": "GQA with RoPE",
"keyDetail": "Pre-norm baseline; wider than OLMo 2 at a similar scale.",
"linkConfigJson": "/mock/configs/llama3-8b.json",
"linkTechReport": "/mock/reports/llama3-8b.pdf",
"linkViewArticle": "/mock/articles/llama3-8b",
"linkPoster": "https://www.zazzle.com/your_link_here",
"architectureDiagram": "<svg>...</svg>" // Or a URL to an SVG/image, or data for Mermaid
}
```
- **Mock API:** Simulate data fetching using `setTimeout` and returning the mock LLM data.
**6. COMPONENT BREAKDOWN:**
- **`App.jsx`:** Main application component. Sets up routing, global layout, and Zustand store provider.
- **`Header.jsx`:** Contains the app title, logo, and potentially primary navigation or filter toggle button.
- Props: `appName` (string)
- **`GalleryView.jsx`:** Renders the grid of `ModelCard` components.
- State/Context: Accesses `models`, `filteredModels`, `selectedFilters`, `comparisonList` from Zustand.
- Props: `models` (array), `onFilterChange` (function), `onSortChange` (function), `onToggleCompare` (function)
- **`ModelCard.jsx`:** Displays a summary of an LLM.
- State/Context: Accesses `comparisonList`.
- Props: `model` (object), `isSelectedForCompare` (boolean), `onSelectModelDetail` (function), `onToggleCompare` (function)
- **`DetailView.jsx`:** Displays detailed information about a single LLM.
- State/Context: Accesses `selectedModel`, `isLoading`, `error`.
- Props: `modelId` (string or object), `onBackClick` (function), `onAddToCompare` (function)
- **`ArchitectureDiagram.jsx`:** Renders the interactive architecture diagram.
- Props: `diagramData` (string/object for Mermaid, or SVG markup)
- **`FilterPanel.jsx`:** Contains UI elements for filtering and sorting models.
- State/Context: Manages local state for inputs, uses Zustand for updating filters.
- Props: `availableFilters` (object), `currentFilters` (object), `onFilterChange` (function), `onSortChange` (function)
- **`ComparisonView.jsx`:** Displays selected models side-by-side for comparison.
- State/Context: Accesses `comparisonList`.
- Props: `modelsToCompare` (array), `onRemoveFromCompare` (function)
- **`LinkButton.jsx`:** Reusable button component for external links.
- Props: `href` (string), `children` (ReactNode), `target` (string, default: '_blank')
- **`LoadingSpinner.jsx`:** Simple loading indicator component.
- **`ErrorMessage.jsx`:** Component for displaying errors.
**7. ANIMATIONS & INTERACTIONS:**
- **Card Hover Effect:** Subtle scale-up and shadow increase on `ModelCard` hover.
- **Filtering/Sorting:** Smooth transitions when the `filteredModels` array updates, re-rendering the `GalleryView`. Consider using a library like `Framer Motion` for animating list additions/removals if needed, but keep it minimal for MVP.
- **Loading States:** Use `LoadingSpinner` within cards or detail views when data is being fetched. Fade-in effect for loaded content.
- **Detail View Transition:** Smooth slide-in or fade-in animation when transitioning from the gallery to the detail view.
- **Interactive Diagram Elements:** Hover effects on diagram nodes/edges to highlight connections or display tooltips.
- **Button Press States:** Visual feedback on button clicks.
**8. EDGE CASES:**
- **No Models Found:** Display a clear message in the `GalleryView` if filters result in zero models.
- **Empty State:** Initial state before data is loaded should show loading indicators.
- **Error Handling:** Gracefully handle API errors during data fetching. Display user-friendly error messages using `ErrorMessage` component. Implement retry logic if applicable.
- **Invalid Data:** Ensure robustness against malformed mock data. Use PropTypes or TypeScript for validation.
- **Accessibility (a11y):**
- Use semantic HTML elements (`<nav>`, `<main>`, `<button>`, `<a>`).
- Ensure sufficient color contrast.
- Add `aria-labels` where necessary, especially for icon-only buttons.
- Ensure keyboard navigability for all interactive elements.
- Use `alt` text for images/thumbnails.
- Manage focus appropriately during view transitions.
- **Image/Diagram Loading:** Handle cases where architecture diagrams fail to load.
**9. SAMPLE DATA (Mock LLM Objects):**
```json
[
{
"id": "llama3-8b",
"title": "Llama 3 8B",
"parameters": 8,
"scaleUnit": "Billion",
"date": "2024-04-18",
"decoderType": "Dense",
"attention": "GQA with RoPE",
"keyDetail": "Pre-norm baseline; wider than OLMo 2 at a similar scale.",
"linkConfigJson": "/mock/configs/llama3-8b.json",
"linkTechReport": "/mock/reports/llama3-8b.pdf",
"linkViewArticle": "/mock/articles/llama3-8b",
"linkPoster": "https://www.zazzle.com/your_link_here",
"architectureDiagram": "graph TD; A[Input Embedding] --> B(Transformer Block 1); B --> C(Transformer Block 2); C --> D(Output Layer);"
},
{
"id": "olmo-2-7b",
"title": "OLMo 2 7B",
"parameters": 7,
"scaleUnit": "Billion",
"date": "2024-11-25",
"decoderType": "Dense",
"attention": "MHA with QK-Norm",
"keyDetail": "Uses inside-residual post-norm instead of the usual pre-norm layout for training stability.",
"linkConfigJson": "/mock/configs/olmo-2-7b.json",
"linkTechReport": "/mock/reports/olmo-2-7b.pdf",
"linkViewArticle": "/mock/articles/olmo-2-7b",
"linkPoster": "https://www.zazzle.com/your_link_here",
"architectureDiagram": "graph TD; A[Input] --> B{Attention}; B --> C{Normalization}; C --> D[Output];"
},
{
"id": "deepseek-v3",
"title": "DeepSeek V3",
"parameters": 70,
"scaleUnit": "Billion",
"date": "2024-03-10",
"decoderType": "Mixture of Experts",
"attention": "GQA",
"keyDetail": "Utilizes a Mixture of Experts (MoE) architecture for efficient scaling.",
"linkConfigJson": "/mock/configs/deepseek-v3.json",
"linkTechReport": "/mock/reports/deepseek-v3.pdf",
"linkViewArticle": "/mock/articles/deepseek-v3",
"linkPoster": "https://www.zazzle.com/your_link_here",
"architectureDiagram": "graph TD; A --> B(MoE Layer); B --> C(Standard Layers); C --> D;"
},
{
"id": "gemini-1-5-pro",
"title": "Gemini 1.5 Pro",
"parameters": 175,
"scaleUnit": "Billion",
"date": "2024-02-15",
"decoderType": "Mixture of Experts",
"attention": "Multi-head Attention",
"keyDetail": "Large multimodal model with a Mixture of Experts architecture.",
"linkConfigJson": "/mock/configs/gemini-1-5-pro.json",
"linkTechReport": "/mock/reports/gemini-1-5-pro.pdf",
"linkViewArticle": "/mock/articles/gemini-1-5-pro",
"linkPoster": "https://www.zazzle.com/your_link_here",
"architectureDiagram": "graph TD; A[Input] --> B{MoE Router}; B --> C1[Expert 1]; B --> C2[Expert 2]; C1 --> D; C2 --> D; D[Output];"
}
]
```
**10. DEPLOYMENT NOTES:**
- **Build Command:** Configure Vite's build command (`npm run build` or `yarn build`).
- **Environment Variables:** Use `.env` files for managing variables like API endpoints (even for mock data initially). Vercel/Netlify handle these via their dashboard.
- **Routing Configuration:** For Vercel/Netlify, ensure SPA fallback routing is configured correctly (e.g., `vercel.json` or `netlify.toml` to redirect all non-file requests to `index.html`).
- **Performance Optimizations:**
- Code Splitting: Vite does this automatically. Ensure components are loaded lazily where appropriate.
- Image Optimization: If using raster images for diagrams, ensure they are optimized. Vector (SVG) is preferred.
- Bundle Size: Monitor bundle size. Keep dependencies lean. Use Zustand for state management to avoid heavier alternatives if not needed.
- Caching: Leverage browser caching and consider service workers for offline capabilities in the future.
- **CI/CD:** Set up a CI/CD pipeline using GitHub Actions, GitLab CI, or directly through Vercel/Netlify for automated testing and deployment on code pushes.
- **HTTPS:** Ensure HTTPS is enabled on the deployment platform (handled automatically by Vercel/Netlify).