Tall Viking

Prompt

build this application:- # Architecture: Media Aggregator ## Overview The Media Aggregator is a Single Page Application (SPA) built with React 18, TypeScript, and Tailwind CSS. It leverages lmstudio or local **Ollama** instances to allow users to upload multiple media types (Images, Text, PDF, Video, Audio) or add **Web Links** and query them as a collective context. ## Core Concepts ### 1. State Management (App.tsx) The application state is centralized in the root `App` component and is structured around **Sessions** and **Themes**. - **Session**: A self-contained object representing a specific context. ```typescript interface Session { id: string; name: string; mediaItems: MediaItem[]; // Array of Base64 data (files) or URLs (links) selectedMediaIds: string[]; // Array of IDs currently active (checked) for the context history: Message[]; // Chat conversation history (with grounding) suggestions: string[]; // AI generated questions createdAt: number; // Caching geminiCacheName?: string; // Resource ID of server-side cache geminiCacheHash?: string; // Signature of the media content cached } ``` - **Theme**: Supports `dark` (default), `light`, and `olive`. Persisted in localStorage. - **ThemeSettings**: - `bgBrightness`: 20-100% slider. - `textBrightness`: 50-150% slider. - `hue`: 0-360 degrees color rotation slider. - `textSize`: 80-140% font scaling slider. - `provider`: 'gemini' | 'ollama' | 'custom'. - `model`: 'gemini-3.5-flash' | 'gemini-3.1-pro-preview' | 'gemini-3.1-flash-lite' (Gemini). - `enableCaching`: boolean (Context Caching for Gemini). - `ollamaEndpoint`: URL (default http://localhost:11434). - `ollamaModel`: Selected local model name. - `customBaseUrl`: Base URL for OpenAI-compatible endpoint. - `customApiKey`: API key for Custom AI provider. - `customModelName`: Selected model name (e.g. gpt-4o). - `customApiPath`: API path (default /v1/chat/completions). - **Persistence**: - **IndexedDB**: Used for storing `sessions` (Media, Chat History) to overcome LocalStorage quota limits (approx 5MB). Handled via `services/storage.ts`. - **LocalStorage**: Used for lightweight preferences like `theme` and `settings`. - **Active Session**: The app tracks an `activeSessionId`. All uploads and chats occur within the context of the active session. - **Split View State**: Tracks `previewCode` (for artifacts) or `focusedMediaItem` (for media) to render a split-screen pane. ### 2. Services The app uses an abstraction layer in `App.tsx` to route requests to the correct service based on `settings.provider`. #### `services/gemini.ts` Interacts directly with the Google GenAI API. - **Model**: Selects between `gemini-3.5-flash` (balanced), `gemini-3.1-pro-preview` (complex reasoning), and `gemini-3.1-flash-lite` (lightweight fast response). - **Tools**: Uses `googleSearch` tool for resolving Web Link media items. - **Context Caching**: Implements `ai.caches.create` to store large media contexts on the server for 10 minutes (TTL), reducing token costs for subsequent queries. - **Capabilities**: Supports Text, Images, PDF, Video, Audio. - **System Prompts**: Configured to provide timestamps for AV content and self-contained HTML for UI artifacts. #### `services/ollama.ts` Interacts with a local Ollama instance via Fetch API. - **Connection**: Requires `OLLAMA_ORIGINS="*"` on the server side to allow browser CORS access. - **Capabilities**: Supports Text and Images (if model is multimodal). Non-text/image media are summarized by name/metadata in the prompt context but not processed natively. - **Endpoints**: `/api/tags` (list models), `/api/chat` (generate response). #### `services/customAi.ts` Interacts with custom OpenAI-compatible endpoints securely. - **Connection**: Proxied through `/api/custom-ai` on the local backend server to bypass client-side CORS issues and protect secrets. - **Capabilities**: Embeds text contents, Web Links, and document metadata as part of the prompt context messages. - **Endpoints**: Configured via settings (`customBaseUrl`, `customApiPath`, `customModelName`, `customApiKey`). #### `services/unifiedAi.ts` Unified provider-agnostic bridge used by interactive Creation Studio applets. - Reads active configuration (`gemini_media_aggregator_settings`) from `localStorage`. - Dynamically resolves and routes generative prompts to either Gemini API (`services/gemini`), Ollama API (`services/ollama`), or Custom OpenAI-Compatible Endpoints (`services/customAi`) to ensure the entire creation workspace flows seamlessly. ### 3. Styling & Theming (Dynamic Engine) - **Engine**: The app uses a JavaScript-driven styling engine in `App.tsx` that performs real-time color math. - **HSL Color Processing**: - The engine converts base Hex colors to HSL (Hue, Saturation, Lightness). - **Hue Rotation**: Adds the `settings.hue` (0-360) value to the base color's Hue. - **Brightness Scaling**: Scales the RGB channels of the rotated color based on `bgBrightness` and `textBrightness` sliders. - **Reconstruction**: Converts back to Hex (preserving Alpha channels) and injects into CSS variables. - **Text Scaling**: - Modifies `document.documentElement.style.fontSize` based on `settings.textSize`. This scales all Tailwind `rem` units globally. - **Presets**: Base palettes (`dark`, `light`, `olive`) are defined as JS constants. - **CSS Variables**: Injected into `:root` (e.g., `--c-bg-app`, `--c-text-main`). - **Transparency**: The engine supports 8-digit Hex codes to allow transparent backgrounds (e.g., for the "Olive" theme's glass effect). ### 4. Component Structure - **Layout**: Main container with a responsive split-pane design (Sidebar + Main Chat + Optional Preview Pane). - **SessionModal**: - Modal dialog for naming new sessions. - Triggered via the `MediaPanel` "New Session" button. - **MediaPanel (Sidebar)**: - **Settings Drawer**: A slide-up panel containing: - Icon-based Theme Switcher (Sun/Moon/Leaf). - **AI Provider**: Toggle between Gemini and Ollama. - **Model Config**: Dropdowns/Inputs specific to the selected provider. - **Context Caching**: Toggle for Gemini server-side caching. - **Color Tint Slider**: 0-360 degree hue rotation with rainbow gradient. - **Text Size Slider**: 80-140% global zoom. - Incremental Sliders for Background and Text brightness. - **Session List**: Displays available sessions with timestamps. Allows switching and deleting sessions. - **Global Search**: Search bar to filter sessions by name or chat content. - **Export**: Ability to download sessions as JSON or Markdown. - **Current Media List**: Lists active media files and links for the *selected* session. - **Selection Toggles**: Checkboxes to toggle individual media items on/off from the context. - **Master Toggle**: "Include All Sources" switch (Pill style). - **Media Player**: Renders actual HTML5 `<video>` and `<audio>` elements (visually compact) to support DOM-based timestamp seeking. - **View/Focus**: "Eye" icon button to open media in split-screen viewer. - **Upload & Link Controls**: Handles file input and web URL addition. Supports **Drag and Drop** file uploads on the entire panel. - **ChatPanel (Main)**: - Renders the chat scroll view with word-wrap enabled for long outputs. - **History Search**: Toggleable search bar to filter conversation messages. - **Voice Input (STT)**: Microphone icon to transcribe speech to text input (Web Speech API). - **Text-to-Speech (TTS)**: Speaker icon on model messages to read responses aloud (SpeechSynthesis API). - **Source Rendering**: Displays `groundingChunks` (search citations) as clickable links in model responses (Gemini only). - **Timestamp Parsing**: Detects `[mm:ss]` patterns in text and renders them as clickable links that control the media players in the sidebar. - **Artifact Detection**: Detects code blocks (HTML/JS/React). Renders an "Open Preview" button for them. - **Export/Copy**: Ability to save individual Model responses as Markdown files via a download button or Copy to Clipboard. - **Quick Action Menus**: Three colored icons (Insight, Discovery, Structure) providing slide-up menus. These now pull dynamically from the **Prompt Library** via tags. - **Prompt Library**: Book icon opens a modal to manage, add, and select reusable prompts. - **PromptLibraryModal**: - Manage custom and system prompts. - Supports JSON Export of the library. - **ArtifactPreview**: - A dedicated pane (Split-Screen) that renders generated HTML/JS code in a secure `<iframe>`. - Toggled via `ChatPanel` "Open Preview" buttons. - **MediaViewer**: - A dedicated pane (Split-Screen) for focused viewing of Images, PDFs, Videos, or Text. - Toggled via `MediaPanel` "Eye" buttons. - **SuggestionBar**: - Displays auto-generated questions in a responsive, wrapping layout. - Clicking a suggestion immediately submits it to the chat. ### 5. Data Flow 1. **New Session**: User clicks "+", triggering `SessionModal`. User enters name -> `App` creates named `Session`. 2. **Upload/Link**: User adds file (Drag & Drop or Select) or URL -> `MediaPanel` -> `App` updates the *targeted* session's `mediaItems` AND `selectedMediaIds` (auto-select). 3. **Selection**: User toggles checkboxes -> `App` updates `selectedMediaIds` -> Future chat requests only use filtered list. 4. **Suggestion**: `App` checks Provider -> Calls `gemini` or `ollama` service -> Returns questions -> `App` updates `suggestions`. 5. **Chat**: User types/clicks suggestion or uses **Voice Input** -> `ChatPanel` -> `App` appends User Message -> `App` filters media -> Service called -> Returns Text -> `App` appends Model Response. 6. **TTS**: User clicks "Listen" -> `ChatPanel` uses SpeechSynthesis to read response. 7. **Preview/Focus**: - User clicks "Open Preview" -> `App` sets `previewCode` state -> Layout splits to show `ArtifactPreview`. - User clicks "Eye" on media -> `App` sets `focusedMediaItem` state -> Layout splits to show `MediaViewer`. 8. **Seek**: User clicks `[01:30]` -> `ChatPanel` fires event -> `App` finds valid `<video>`/`<audio>` -> Sets `currentTime`. 9. **Export**: User clicks Download -> `App` generates JSON/Markdown Blob -> Trigger download. 10. **Storage**: Any change to `sessions` triggers an async write to **IndexedDB**. Theme, settings, and **Prompt Library** go to `localStorage`. --- **Last Updated**: `2026-07-07 09:00:00-07:00` - Integrated six additional interactive Creation Studio suites, completing the total interactive suite coverage: - **10. Creative Brainstorm** (`brainstormer` ID): High-divergence ideation sandbox incorporating lateral thinking lenses (e.g., Silicon Valley Disruption, Solarpunk, Sci-Fi Future) and divergence selectors to brainstorm 10 unconventional perspectives. - **11. Email Drafter** (`email_drafter` ID): Full-scale professional email compiler with tone selectors, recipient configurations, and alternative subject line matrix builders, rendered in a simulated desktop mail client preview. - **12. Marketing Copywriter** (`marketing_copy` ID): Visual copywriting bench supporting multiple conversion-rate optimization (CRO) frameworks (e.g., AIDA, PAS) with custom headline, hook, and body generators, plus live-rendered search and feed mockup components. - **13. SWOT Analysis** (`swot_analysis` ID): Analytical SWOT evaluator with perspective selectors (e.g., PMF, Security & Compliance, Moat) that maps findings in an interactive 2x2 grid alongside prioritized action blueprinting. - **14. Code Explainer** (`code_explainer` ID): Side-by-side developer workspace containing a syntax-styled input editor and an interactive breakdown view, presenting high-level summaries, step-by-step deconstructions, Big O analysis, and refactoring audits tailored for specific user profiles (ELI5 to Security Lead). - **15. Ebook Generator** (`ebook_generator` ID): A comprehensive book-drafting hub featuring automated Table of Contents structuring and an interactive Chapter Compiler to narrative-draft full, detailed Markdown pages. - Formulated `services/unifiedAi.ts` to seamlessly route Creation Studio generative prompts to the active user-configured provider (Gemini, Ollama, or Custom AI). - Documented secure server-side endpoint proxying `/api/custom-ai` in `server.ts` to manage API key secrets and CORS headers. - Described state representation and local/system prompt injection in `services/customAi.ts`.