From fdf3b9406051eeb4927842d612f8025acb1e14c6 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 12 Mar 2026 00:25:03 +0000 Subject: [PATCH 1/5] docs: rewrite README and user guide, update homescreen slogan - README completely rewritten: both Slide Generation and Matrix Generation are top-level peer sections with equal depth. New tagline reflects the dual-mode tool. Matrix section documents input modes (theme/description), grid sizing, style modes, streaming, image generation, revalidation, all three views (grid/poster/reveal), and the full settings schema. - docs/user-guide.md restructured: Matrix Generation is now a full top-level section alongside the carousel pipeline (not appended after Tips). Expanded with views, revalidation, settings temperatures, and concurrency controls. - ModeSelector.tsx: replaced Instagram-specific slide card description with a broader slogan that covers the six-stage pipeline. https://claude.ai/code/session_0188EvRkkj6RFujggzp2bean --- README.md | 341 +++++++++++++++-------- docs/user-guide.md | 306 +++++++++++++------- frontend/src/components/ModeSelector.tsx | 2 +- 3 files changed, 422 insertions(+), 227 deletions(-) diff --git a/README.md b/README.md index 190c5ad..6d43426 100644 --- a/README.md +++ b/README.md @@ -1,54 +1,171 @@ # Lucid 🌠 [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/FloLey/Lucid) -**Transform rough drafts into polished, high-converting social media carousels.** -Lucid is a containerized web application that orchestrates a sophisticated pipeline to convert your messy, unstructured ideas into beautiful, ready-to-publish 4:5 carousel slides. Built with a FastAPI backend and a React/TypeScript frontend, it leverages Google Gemini for creative heavy lifting and a deterministic rendering engine for pixel-perfect typography. +**AI-powered creative content studio β€” turn ideas into polished slides and concept matrices.** + +Lucid is a containerized web application with two first-class creation modes: a **6-stage carousel pipeline** that converts rough drafts into pixel-perfect social media slides, and a **Concept Matrix Generator** that maps any theme or cross-axis relationship into a streamed nΓ—n visual grid. Built with a FastAPI backend and a React/TypeScript frontend, it uses Google Gemini for creative heavy lifting and a deterministic rendering engine for reliable typography. + --- -## The Philosophy: The Progressive Pipeline Architecture -Why does Lucid exist? Because **Generative AI struggles with rendering text inside images.** Relying on a single zero-shot prompt to generate a complete, spelled-correctly, well-laid-out slide is a recipe for hallucinations and warped artifacts. -Lucid solves this by implementing a **Progressive Pipeline Architecture**. We treat AI as a chain of specialized workers rather than a magic black box: -1. **Separation of Concerns:** The AI is strictly relegated to structural writing and generating *text-free* background imagery. A deterministic engine (Pillow/PIL) handles all typography. -2. **Grounding & Context:** Each stage's output grounds the next. Search-grounded research feeds a structured draft $\rightarrow$ Draft is split into slide text $\rightarrow$ Text informs global visual styles $\rightarrow$ Styles dictate slide-specific image prompts $\rightarrow$ Prompts generate clean backgrounds $\rightarrow$ Text is accurately layered on top. -3. **Human-in-the-Loop Intercession:** By breaking the process into 6 discrete stages, users can audit, edit, and safely course-correct at any step without having to start over. + +## Slide Generation + +### The Pipeline Architecture + +Why a pipeline instead of a single prompt? Because **Generative AI struggles with rendering text inside images.** Asking one model to generate a complete, correctly-spelled, well-laid-out slide in a single shot reliably produces hallucinations and warped artifacts. + +Lucid solves this with a **Progressive Pipeline Architecture** β€” AI as a chain of specialized workers, not a magic black box: + +1. **Separation of Concerns:** The AI handles structural writing and generates *text-free* background imagery. A deterministic engine (Pillow/PIL) handles all typography. +2. **Grounding & Context:** Each stage's output grounds the next. Search-grounded research feeds a structured draft β†’ Draft is split into slide text β†’ Text informs global visual styles β†’ Styles dictate slide-specific image prompts β†’ Prompts generate clean backgrounds β†’ Text is accurately layered on top. +3. **Human-in-the-Loop:** Six discrete stages let you audit, edit, and course-correct at any step without starting over. + +### The 6-Stage Workflow + +Lucid uses a strict, bi-directional 6-stage workflow. You can regenerate individual slides, edit any output, or step backward without losing downstream configuration. + +#### πŸ” Stage 1: Research +Chat with an AI research assistant grounded in real-time Google Search to brainstorm ideas, gather facts, and explore angles. When ready, click **Create Draft** to synthesise the conversation into a structured draft β€” or skip if you already have content. + +#### πŸ“ Stage 2: Draft +Paste or refine your draft text. The AI acts as a content strategist, splitting it into a logically flowing sequence of slides with distinct Titles and Bodies. + +*Customise language, slide count, and toggle title generation.* + +#### 🎨 Stage 3: Style Proposals +The AI analyses your slide text and generates distinct style proposals (e.g. *Minimalist geometric, warm watercolour washes, dark moody photography*). Picking one here guarantees that all images generated later share a consistent visual vocabulary. + +#### 🧠 Stage 4: Image Prompts +Instead of generating images directly, the AI first writes highly specific, text-free image prompts for *each individual slide*, prepending the global style chosen in Stage 3. + +*Edit or regenerate individual prompts before spending API calls on images.* + +#### πŸ–ΌοΈ Stage 5: Image Generation +Lucid sends all image prompts in parallel to Gemini and renders clean, consistent 4:5 background images (1080Γ—1350 px). + +#### πŸ”€ Stage 6: Typography & Layout +The deterministic rendering engine takes over. Drag, drop, and resize text boxes on the canvas. Adjust fonts, weights, colours, drop shadows, and strokes. The system binary-searches for the mathematically perfect font size to fit your text. Hit **Export ZIP** to download your ready-to-post carousel. + --- -## The Workflow -Lucid is designed around a strict, bi-directional 6-stage workflow. At any point, you can regenerate an individual slide, edit the output, or step backward without losing your downstream configurations. -### πŸ” Stage 1: Research -Chat with an AI research assistant grounded in real-time Google Search to brainstorm ideas, gather facts, and explore angles for your carousel. When you're ready, hit **Create Draft** to synthesise the conversation into a structured draft β€” or skip this stage if you already have content. -*Add research instructions to guide how the conversation is summarised into a draft.* -### πŸ“ Stage 2: Draft -Paste or refine your draft text. The AI acts as a content strategist, splitting it into a cohesive, logically flowing sequence of slides with distinct Titles and Bodies. -*Customize language, slide count, and toggle title generation.* -### 🎨 Stage 3: Style Proposals -The AI analyzes your slide text and generates distinct "Style Proposals" (e.g., *Minimalist geometric, warm watercolor washes, dark moody photography*). This guarantees that every image generated later will share a consistent visual vocabulary. -### 🧠 Stage 4: Image Prompts -Instead of generating images directly, the AI first writes highly specific, text-free image prompts for *each individual slide*, prepending the global style you chose in Stage 3. -*Don't like a specific slide's concept? Edit the prompt manually or ask the AI to regenerate it.* -### πŸ–ΌοΈ Stage 5: Image Generation -Lucid triggers parallel execution of image generation requests, creating clean, consistent background images mapped to your 4:5 layout. -### πŸ”€ Stage 6: Typography & Layout -The deterministic rendering engine takes over. Drag, drop, and resize text boxes directly on the canvas. Adjust fonts, weights, colors, drop shadows, and strokes. The system automatically calculates perfect scaling to fit your text into the layout. Finally, hit **Export ZIP** to download your ready-to-post carousel. + +## Matrix Generation + +### Overview + +The Concept Matrix Generator creates an nΓ—n grid of AI-generated cells. Each cell represents the intersection of two descriptive axes and carries its own title, body text, and optional background image. Cells stream to the UI as they complete β€” you see the grid fill in live. + +Matrices are fully independent of the carousel pipeline. They have their own home screen, project list, settings, and views. + +### Input Modes + +When creating a matrix you choose one of two modes: + +| Mode | What you provide | What the AI does | +| :--- | :--- | :--- | +| **Theme** | A theme string (e.g. *"The philosophy of time and consciousness"*) | Picks n distinct diagonal concepts from the theme; invents a unique pair of descriptive axes for each concept; then populates all nΓ—n cells at the intersection of those axes. Grid is square (nΓ—n). | +| **Description** | A cross-axis relationship (e.g. *"feels like a certain generation but is actually from a different one"*) | A single LLM call derives both axis labels and n shared labels for rows and columns, producing a rectangular grid (rowsΓ—cols). | + +### Grid Size + +- **Theme mode:** choose n ∈ {2, 3, 4, 5, 6} β†’ produces an nΓ—n grid (4–36 cells). +- **Description mode:** choose rows and columns independently from {2, 3, 4, 5, 6}. + +### Style Mode + +Each matrix is generated with one of four style modes that shape the tone of every cell: + +| Style | Character | +| :--- | :--- | +| **Neutral** | Balanced, informative | +| **Fun** | Playful, informal | +| **Absurd** | Unexpected, surreal juxtapositions | +| **Academic** | Analytical, precise | + +### Generation & Streaming + +Clicking **Generate Matrix** starts an async generation job on the backend. Cells are generated in parallel (bounded by `max_concurrency`) and streamed to the UI via SSE. You can watch the grid populate cell by cell without waiting for the full job to finish. + +A generation job has four statuses: **Pending β†’ Generating β†’ Complete / Failed**. + +### Image Generation + +Images are optional and can be added at any time: + +- **At creation time:** check **Generate images for each cell** in the New Matrix modal. +- **After generation:** click **Generate Images** from the matrix view to bulk-generate backgrounds for all cells. +- **Per cell:** click **Regen** on any individual cell to regenerate its image without touching others. + +Images are produced by Gemini from an AI-written prompt that combines the cell's content with the matrix's global style. + +### Revalidation + +If some cells fail during generation (or produce low-quality content), click **Revalidate** from the matrix view. This runs a validation pass that identifies failed or weak cells and regenerates only those. You can optionally supply a **user comment** (e.g. *"cells should be more specific"*) which is injected into the validator prompt as extra instructions. + +Progress streams via the same SSE endpoint as initial generation. + +### Views + +Once a matrix is generated, three views are available: + +| View | Description | +| :--- | :--- | +| **Grid** | Default interactive view. Shows all cells in the nΓ—n grid with axis labels. Click any cell to expand it. | +| **Poster** | Full-page visual layout designed for screenshots or sharing β€” renders all cells in a clean grid with large axis headers. | +| **Reveal** | Presentation mode: cycles through cells one at a time for storytelling or slide-by-slide review. | + +### Settings + +Click **Settings** in the Matrix workspace to configure: + +| Setting | Description | +| :--- | :--- | +| **Text Model** | Gemini model ID used for cell text generation | +| **Image Model** | Gemini model ID used for cell image generation | +| **Diagonal Temperature** | LLM temperature for seed concept generation (higher = more surprising) | +| **Axes Temperature** | Temperature for descriptor/axis generation | +| **Cell Temperature** | Temperature for off-diagonal cell content | +| **Validation Temperature** | Temperature for the revalidation pass | +| **Max Concurrency** | Number of parallel LLM calls during generation (1–20) | +| **Max Retries** | Automatic retry attempts for failed cells (0–5) | + +Settings are persisted in `matrix_settings.json` and can be reset to factory defaults. + --- + ## Feature Highlights -Lucid packs several advanced technical implementations to make the pipeline robust and seamless: -* **Binary Search Text Fitting:** The `RenderingService` uses an $O(\log n)$ binary search algorithm (`_find_fitting_size`) to calculate the mathematically perfect font size for a given bounding box, replacing brittle linear decrements and ensuring text never overflows. -* **Fuzzy Font Matching:** The `FontManager` builds an indexed registry of your TTF/OTF files on startup. If the UI requests "Inter 600" but only "Inter 700" is available, it gracefully degrades to the nearest available mathematical weight. -* **Debounced Sync & Render Loop:** The frontend `useDebouncedRender` hook eliminates React state race conditions. It ensures rapid keystrokes trigger a single, synchronous database save followed by a PIL background render, using monotonic request IDs to silently drop stale in-flight responses. -* **Hot-Swappable, Validated Prompts:** LLM system instructions live in version-controlled `.prompt` files (e.g., `slide_generation.prompt`), editable directly via the UI. The backend runs AST-style validation to ensure required `{variables}` aren't accidentally deleted by the user. -* **Concurrency & Rate Limiting:** Outbound AI calls use `bounded_gather()` β€” a thin wrapper around `asyncio.Semaphore` β€” to strictly limit concurrent LLM text and image requests, preventing `429 Too Many Requests` API limits. -* **Concept Matrix Generator:** A standalone side-feature that produces nΓ—n visual concept grids. Accepts a **theme** (AI picks diagonal concepts and per-concept axes) or a **description** of a cross-axis relationship (a single LLM call derives both axis labels). Results stream via SSE as each cell is generated in parallel. + +- **Binary Search Text Fitting:** The `RenderingService` uses an O(log n) binary search algorithm to find the mathematically perfect font size for a given bounding box β€” text never overflows or runs short. +- **Fuzzy Font Matching:** The `FontManager` indexes all TTF/OTF files on startup. If the UI requests "Inter 600" but only "Inter 700" is available, it gracefully uses the nearest weight. +- **Debounced Sync & Render Loop:** `useDebouncedRender` eliminates React state race conditions. Rapid keystrokes trigger a single synchronous database save followed by a deterministic PIL render, using monotonic request IDs to drop stale in-flight responses. +- **SSE Streaming:** Both slide text regeneration and matrix cell generation use Server-Sent Events. The `useStreamingText` and `useMatrixStream` hooks share a common `parseSSELine` utility. +- **Hot-Swappable, Validated Prompts:** LLM instructions live in version-controlled `.prompt` files editable via the UI. The backend runs AST-style validation to ensure required `{variables}` aren't accidentally deleted. +- **Concurrency Control:** `bounded_gather()` β€” a thin `asyncio.Semaphore` wrapper β€” limits concurrent LLM calls for both the carousel pipeline and matrix generator, preventing 429 errors. +- **Per-Template Prompt Overrides:** Root `.prompt` files are shared defaults. Files in `prompts/carousel/` or `prompts/painting/` override only the templates that need different behaviour. + --- -## Configuration & Customization -Lucid behavior is highly customizable via the **Templates** editor (Templates button on the home screen) or the `config.json` file. -### App Config Schema (`config.json`) -* **`global_defaults`**: Set default languages (e.g., "English"), slide counts, and toggle title inclusion. -* **`image`**: Controls backend rendering resolutions (defaults to `1080x1350`, aspect ratio `4:5`). -* **`style`**: Base typography configurations (`default_font_family`, colors, stroke properties). -* **`stage_instructions`**: Pre-seed standard instructions into specific pipeline stages (e.g., "Always use an energetic tone" for Stage 1). -### Templates -You can save any project configuration as a reusable **Template**. Future projects launched from a template will inherit the slide counts, configuration defaults, and even the exact prompt logic of the template base. + +## Configuration & Customisation + +### Carousel β€” `config.json` + +| Key | Description | +| :--- | :--- | +| `global_defaults` | Default language, slide count, title inclusion | +| `image` | Output resolution (default: 1080Γ—1350, aspect ratio 4:5) | +| `style` | Base typography: font family, colours, stroke properties | +| `stage_instructions` | Pre-seeded instructions for specific pipeline stages | + +### Carousel β€” Templates + +Any project configuration can be saved as a reusable **Template**. Future projects launched from a template inherit its slide count, configuration defaults, and prompt logic. Templates are managed via the **Templates** button on the carousel home screen. + +### Matrix β€” Settings + +Matrix generation parameters (models, temperatures, concurrency, retries) are configured through the **Settings** button in the Matrix workspace and persisted in `matrix_settings.json`. + --- + ## Quick Start β€” GitHub Codespaces + The fastest way to run Lucid with zero local setup: 1. **Set your API key** as a Codespaces secret β€” go to [github.com/settings/codespaces](https://github.com/settings/codespaces), add a secret named `GOOGLE_API_KEY` with your key from [aistudio.google.com/apikey](https://aistudio.google.com/apikey), and grant it access to this repository. @@ -58,48 +175,55 @@ The fastest way to run Lucid with zero local setup: > The `GOOGLE_API_KEY` secret is injected into the Docker Compose environment automatically β€” no `.env` file needed. --- + ## Installation & Requirements + Lucid is built for containerized, Docker-first development. + **Prerequisites:** - Docker & Docker Compose - A Google Generative AI API Key (https://aistudio.google.com/apikey) + ### 1. Environment Setup -Clone the repository and set up your `.env` file: + ```bash git clone https://github.com/FloLey/Lucid.git cd Lucid cp .env.example .env ``` -Add your `GOOGLE_API_KEY` to the `.env` file. *(Note: Without an API key, the app gracefully falls back to generating placeholder gradient images).* + +Add your `GOOGLE_API_KEY` to the `.env` file. *(Without an API key the app falls back to gradient placeholder images and text generation is unavailable.)* + ### 2. Initialize Configuration -Ensure the base config file exists before Docker boots: + ```bash echo '{}' > config.json ``` + ### 3. Build and Run + ```bash docker-compose up --build ``` -*Docker will automatically download the required open-source fonts during the build process.* -Access the application at **`http://localhost:5173`**. -Access the Swagger API documentation at **`http://localhost:8000/docs`**. + +*Docker downloads required open-source fonts during the build.* + +- App: **`http://localhost:5173`** +- API docs: **`http://localhost:8000/docs`** + --- + ## Deploy on VPS (private access via Tailscale) -This section describes how to run Lucid on a VPS so that the frontend and API -are reachable **only from devices on your Tailscale network** β€” not from the -public internet. +Run Lucid on a VPS with the frontend and API reachable **only from devices on your Tailscale network**. -The key idea: instead of binding ports to `0.0.0.0` (all interfaces), we bind -them exclusively to the Tailscale IP (`100.x.y.z`). Docker's port-publishing -mechanism goes through iptables, which bypasses UFW β€” binding to the Tailscale -interface sidesteps this entirely. +Instead of binding ports to `0.0.0.0`, we bind exclusively to the Tailscale IP (`100.x.y.z`). Docker's iptables rules only forward traffic that arrives on that interface β€” no public exposure, no UFW rules needed for app ports. ### Prerequisites -- Docker & Docker Compose installed on the VPS -- [Tailscale](https://tailscale.com/download) installed and connected on the VPS (`tailscale up`) -- Tailscale also installed on any client device you want to access the app from +- Docker & Docker Compose on the VPS +- [Tailscale](https://tailscale.com/download) installed and connected (`tailscale up`) +- Tailscale on any client device you want to access from ### 1. Clone and configure @@ -107,12 +231,7 @@ interface sidesteps this entirely. git clone https://github.com/FloLey/Lucid.git cd Lucid cp .env.example .env -# Edit .env and set your GOOGLE_API_KEY -``` - -Ensure the base config file exists: - -```bash +# Edit .env and set GOOGLE_API_KEY echo '{}' > config.json ``` @@ -122,96 +241,72 @@ echo '{}' > config.json ./scripts/prod_up.sh ``` -The script will: -1. Detect your Tailscale IPv4 address via `tailscale ip -4`. -2. Bind the frontend (port 5173) and backend (port 8000) **only** to that IP. -3. Build and start the containers in detached mode. -4. Print the private URLs. - -Example output: +The script detects your Tailscale IPv4 address, binds the frontend (port 5173) and backend (port 8000) to it, builds, and starts in detached mode. ``` Tailscale IP detected: 100.64.0.12 Starting Lucid (production mode) on 100.64.0.12 ... -... Lucid is running (Tailscale-private access only): Frontend : http://100.64.0.12:5173 API docs : http://100.64.0.12:8000/docs - -These URLs are reachable only from devices on your Tailscale network. ``` -### 3. Verify access - -From any device on your Tailscale network, open: - -- `http://:5173` β€” Lucid UI -- `http://:8000/docs` β€” Swagger API docs - -The same URLs will return "connection refused" from the public internet. - -### 4. Stop +### 3. Stop ```bash ./scripts/prod_down.sh ``` -This stops the containers. The `lucid-data` volume (database + generated images) -is **preserved**. To also delete the data volume, run -`docker compose down -v` manually. - -### Firewall notes +The `lucid-data` volume (database + generated images) is preserved. To also remove the data volume: `docker compose down -v`. -Binding ports to the Tailscale IP is sufficient to prevent public access β€” -Docker's iptables rules will only forward traffic that arrives on the Tailscale -interface. You do **not** need UFW rules for the app ports. - -If you want defence-in-depth, a minimal UFW policy: +### Firewall notes (optional defence-in-depth) ```bash sudo ufw default deny incoming -sudo ufw allow ssh # or: ufw allow in on tailscale0 +sudo ufw allow ssh sudo ufw allow in on tailscale0 sudo ufw enable ``` -### Manual usage (without the script) - -If you prefer to run the compose command directly, export `LUCID_BIND_IP` first: +### Manual usage ```bash export LUCID_BIND_IP="$(tailscale ip -4 | head -n1)" docker compose -f docker-compose.yml -f docker-compose.prod.yml up -d --build ``` -The `docker-compose.prod.yml` overlay has **no fallback** for `LUCID_BIND_IP`. -If the variable is unset, Docker Compose will error out rather than silently -bind on `0.0.0.0`. +--- -### Future auto-deploy +## API Reference -When automating deployments (e.g. via GitHub Actions or a deploy hook), always -invoke `./scripts/prod_up.sh` rather than a plain `docker compose up`. This -guarantees that the Tailscale IP is detected at deploy time and the ports are -never accidentally exposed publicly. +All routes are under the `/api` prefix. The full interactive docs are at `http://localhost:8000/docs`. + +### Carousel Pipeline + +| Route | Method | Description | +| :--- | :--- | :--- | +| `/api/projects/` | `POST` | Create a new project (optionally from a template) | +| `/api/projects/{id}/reorder` | `POST` | Reorder slides within a project | +| `/api/stage-research/chat` | `POST` | Send a message to the search-grounded research assistant | +| `/api/stage-research/extract-draft` | `POST` | Synthesise the research conversation into a draft | +| `/api/stage-draft/generate` | `POST` | Convert draft text β†’ slide array | +| `/api/stage-draft/regenerate-stream` | `POST` | Regenerate a single slide's text via SSE | +| `/api/stage-style/generate` | `POST` | Generate visual style proposals | +| `/api/stage-prompts/generate` | `POST` | Generate per-slide image prompts | +| `/api/stage-images/generate` | `POST` | Generate background images from prompts | +| `/api/stage-typography/apply-all` | `POST` | Composite text over backgrounds via PIL | +| `/api/export/zip` | `POST` | Download project as a ZIP archive | +| `/api/prompts/validate` | `POST` | Validate `.prompt` template edits without saving | + +### Matrix Generator ---- -## API & CLI Reference -The FastAPI backend exposes a clean REST API. Here are the core architectural routes: | Route | Method | Description | | :--- | :--- | :--- | -| `/api/projects/` | `POST` | Create a new project state (optionally from a Template). | -| `/api/stage-research/chat` | `POST` | Send a user message and receive a search-grounded AI reply. | -| `/api/stage-research/extract-draft` | `POST` | Summarise the research conversation into a draft text. | -| `/api/stage-draft/generate` | `POST` | Convert draft string $\rightarrow$ JSON slide array using Gemini Flash. | -| `/api/stage-style/generate` | `POST` | Propose visual theme prompts. | -| `/api/stage-prompts/generate` | `POST` | Generate individual image prompts in parallel. | -| `/api/stage-images/generate` | `POST` | Render image prompts $\rightarrow$ Base64/Disk PNGs using Gemini 2.5 Image. | -| `/api/stage-typography/apply-all` | `POST` | Run PIL typography engine to composite text over backgrounds. | -| `/api/projects/{id}/reorder` | `POST` | Reorder slides within a project. | -| `/api/stage-draft/regenerate-stream` | `POST` | Regenerate a single slide's text via SSE streaming. | -| `/api/export/zip` | `POST` | Archive project metadata and final composited images. | -| `/api/prompts/validate` | `POST` | Dry-run validation of `.prompt` template edits. | -| `/api/matrix/` | `POST` | Start a new Concept Matrix generation job (theme or description mode). | -| `/api/matrix/{id}/generate-images` | `POST` | Bulk-generate background images for an existing matrix. | -*Local Dev Note: If running without Docker, utilize the provided `install-deps.sh` script to install Node/Python requirements and trigger the `download_fonts.py` hook.* +| `/api/matrix/` | `POST` | Start a new matrix generation job (theme or description mode) | +| `/api/matrix/` | `GET` | List all matrices | +| `/api/matrix/{id}` | `GET` | Get a matrix with all cells | +| `/api/matrix/{id}/events` | `GET` | SSE stream of generation progress | +| `/api/matrix/{id}/generate-images` | `POST` | Bulk-generate background images for an existing matrix | +| `/api/matrix/{id}/revalidate` | `POST` | Run a validation pass; accepts `{"user_comment": "..."}` for extra instructions | + +*Local dev note: if running without Docker, use `install-deps.sh` to install Node/Python requirements and run `download_fonts.py` to fetch fonts.* diff --git a/docs/user-guide.md b/docs/user-guide.md index 0777ffc..4169660 100644 --- a/docs/user-guide.md +++ b/docs/user-guide.md @@ -1,6 +1,6 @@ # Lucid β€” User Guide -This guide walks you through creating a complete social media carousel from a rough draft to a ready-to-export ZIP of slides. +Lucid has two independent creation modes: a **6-stage Slide Generation pipeline** that converts rough drafts into polished social media carousels, and a **Matrix Generation** tool that maps any theme or cross-axis relationship into a live-streaming nΓ—n visual grid. Choose your mode on the home screen. --- @@ -12,11 +12,13 @@ This guide walks you through creating a complete social media carousel from a ro --- -## Projects +## Slide Generation -Everything in Lucid lives inside a **project**. The home screen lists all your projects as thumbnail cards showing the project name, mode, slide count, and how far through the pipeline it has reached. +### Projects -### Creating a project +Everything in Lucid's slide pipeline lives inside a **project**. The Slide Generation home screen lists all your projects as thumbnail cards showing the project name, mode, slide count, and how far through the pipeline it has reached. + +#### Creating a project Click **New Project**. A modal asks for three things: @@ -28,25 +30,25 @@ Click **New Project**. A modal asks for three things: Click **Create** to open the project at Stage 1 (Research). -### Renaming a project +#### Renaming a project Projects are auto-named (*Untitled β€’ YYYY-MM-DD β€’ …*) when created. Click the project name at the top of the editor to rename it inline. -### Reopening a project +#### Reopening a project Click any project card on the home screen to reopen it exactly where you left off β€” the pipeline remembers your current stage and all generated content. -### Deleting a project +#### Deleting a project Hover over a project card and click the **trash icon** to delete it. This also removes all associated generated images. --- -## Templates +### Templates A **template** is a reusable configuration blueprint. It stores defaults for mode, slide count, LLM prompts, typography style, and stage instructions β€” so you can start a new project with a consistent setup without reconfiguring from scratch. -### Built-in templates +#### Built-in templates Lucid ships with two default templates seeded on first run: @@ -55,7 +57,7 @@ Lucid ships with two default templates seeded on first run: | **Carousel Default** | Carousel | 5 | | **Single Image Default** | Single Image | 1 | -### Viewing and managing templates +#### Viewing and managing templates Click **Templates** on the home screen to open the Templates panel. Each card shows the template name, mode, and default slide count. From here you can: @@ -64,23 +66,23 @@ Click **Templates** on the home screen to open the Templates panel. Each card sh > **Note:** Deleting a template does not affect projects already created from it β€” each project stores a private copy of its configuration. -### Using a template +#### Using a template -When creating a new project, select a template from the **Template** dropdown in the New Project modal. The project will inherit that template's prompt configuration, typography defaults, and stage instructions. Once created, the project's config is independent β€” changes to the template will not retroactively affect existing projects. +When creating a new project, select a template from the **Template** dropdown in the New Project modal. The project will inherit that template's prompt configuration, typography defaults, and stage instructions. Once created, the project's config is independent β€” changes to the template do not retroactively affect existing projects. -### Customising a template's configuration +#### Customising a template's configuration -Template configuration (prompts, style defaults, image settings) is edited through the **Settings** modal inside a project. If you want to build a custom template, the recommended workflow is: +Template configuration (prompts, style defaults, image settings) is edited through the **Settings** modal inside a project. Recommended workflow: 1. Create a project from an existing template. -2. Open **Settings** (gear icon) and adjust Prompts, Style, Image, and Instructions tabs to your liking. -3. Create a new template and note that future projects can use the settings you'd refined β€” you can port settings by adjusting the template via the API or by iterating in a project first. +2. Open **Settings** (gear icon) and adjust Prompts, Style, Image, and Instructions tabs. +3. Future projects can be created from templates that reflect your refined defaults. --- -## Overview +### The Pipeline -Lucid uses a 6-stage pipeline. Each stage builds on the last, and you can always step **backward** to revise without losing downstream work. +Lucid uses a strict, bi-directional 6-stage pipeline. Each stage builds on the last, and you can always step **backward** to revise without losing downstream work. ``` Stage 1: Research β†’ Stage 2: Draft β†’ Stage 3: Style β†’ Stage 4: Image Prompts β†’ Stage 5: Images β†’ Stage 6: Typography @@ -88,161 +90,151 @@ Stage 1: Research β†’ Stage 2: Draft β†’ Stage 3: Style β†’ Stage 4: Image Promp --- -## Stage 1: Research - -The Research stage lets you brainstorm and gather information through a chat interface before writing your draft. The AI assistant is grounded in real-time Google Search, so answers are current and factual. +### Stage 1: Research -### 1. Ask questions +The Research stage lets you brainstorm and gather information through a chat interface before writing your draft. The AI assistant is grounded in real-time Google Search. -Type your message in the input box at the bottom of the chat panel and press **Enter** (or click **Send**). The AI will respond with search-grounded information relevant to your carousel topic. +#### 1. Ask questions -Continue the conversation to explore angles, gather statistics, or refine your ideas. The full conversation is saved as part of your project. +Type your message and press **Enter** (or click **Send**). Continue the conversation to explore angles, gather statistics, or refine ideas. The full conversation is saved as part of your project. -### 2. Add research instructions (optional) +#### 2. Add research instructions (optional) -In the right panel, enter any specific guidance for how the conversation should be synthesised into a draft β€” for example, *"Focus on three key arguments"* or *"Keep it beginner-friendly"*. +In the right panel, enter guidance for how the conversation should be synthesised into a draft β€” for example, *"Focus on three key arguments"* or *"Keep it beginner-friendly"*. -### 3. Create your draft +#### 3. Create your draft -When you're satisfied with the research, click **Create Draft & Proceed β†’**. Lucid synthesises the entire conversation into a structured draft text and advances you to Stage 2. +When satisfied with the research, click **Create Draft & Proceed β†’**. Lucid synthesises the entire conversation into a structured draft and advances you to Stage 2. -### 4. Skip research +#### 4. Skip research If you already have content, click **Skip Research** to go straight to Stage 2 with an empty draft. --- -## Stage 2: Draft +### Stage 2: Draft -### 1. Paste your draft +#### 1. Paste your draft -Click the **Your Draft** text area and paste your raw content. It can be anything β€” bullet points, stream-of-consciousness notes, an existing article. Lucid will restructure it into slides. If you came from Stage 1, the draft has been pre-populated from the research conversation. +Click the **Your Draft** text area and paste your raw content β€” bullet points, notes, an existing article. Lucid will restructure it. If you came from Stage 1, the draft has been pre-populated from the research conversation. -### 2. Configure generation +#### 2. Configure generation | Option | Description | | :--- | :--- | | **Number of Slides** | Pick a fixed count (3–10) or choose **Auto** to let the AI decide. | | **Language** | Output language for slide text (defaults to English). | | **Include Titles** | Toggle whether each slide gets a title. | -| **Additional Instructions** | Optional free-form guidance, e.g. *"Make it conversational, target entrepreneurs"*. | +| **Additional Instructions** | Optional guidance, e.g. *"Make it conversational, target entrepreneurs"*. | -### 3. Generate slides +#### 3. Generate slides -Click **Generate Slides**. The right panel will populate with a card per slide showing its title (if enabled) and body text. +Click **Generate Slides**. The right panel populates with a card per slide showing its title (if enabled) and body text. -### 4. Review and edit +#### 4. Review and edit Each slide card offers two actions: - **Edit** β€” Opens an inline editor. Modify the title and/or body text, then click **Save** (or **Cancel** to discard). -- **Regenerate** β€” Expands an instruction input. Type an optional instruction (e.g. *"Make this punchier"*) and press **Enter** or click **Go** to regenerate just that slide. +- **Regenerate** β€” Expands an instruction input. Type an optional instruction (e.g. *"Make this punchier"*) and press **Enter** or click **Go** to regenerate just that slide via SSE streaming. -When you're happy with the slide text, click **Next: Choose Style β†’**. +When happy with the slide text, click **Next: Choose Style β†’**. --- -## Stage 3: Style Proposals +### Stage 3: Style Proposals -Lucid generates visual style proposals based on your slide content. All images generated later will follow the style you pick here, ensuring a coherent look across the carousel. +Lucid generates visual style proposals based on your slide content. All images generated later follow the style you pick here. -### 1. Configure proposals +#### 1. Configure proposals | Option | Description | | :--- | :--- | | **Number of Proposals** | Choose 2, 3, or 4 style proposals to generate. | | **Additional Instructions** | Optional style guidance, e.g. *"Warm colors, minimalist, professional photography"*. | -### 2. Generate proposals +#### 2. Generate proposals Click **Generate Style Proposals**. Each proposal card shows a preview image and a text description of the visual style. -### 3. Select a style +#### 3. Select a style -Click a proposal card to select it β€” it will highlight with a blue border and a **Selected** badge. You must select a style before advancing. +Click a proposal card to select it β€” it highlights with a blue border and a **Selected** badge. You must select a style before advancing. -Click **Next: Image Prompts β†’** (top-right of the panel) when ready, or **← Back** to revise your draft. +Click **Next: Image Prompts β†’** when ready, or **← Back** to revise your draft. --- -## Stage 4: Image Prompts +### Stage 4: Image Prompts -Instead of generating images immediately, Lucid first writes a specific, text-free image prompt for each slide. This lets you review and refine what will be generated before spending API calls on images. +Instead of generating images immediately, Lucid first writes a specific, text-free image prompt for each slide. This lets you review and refine before spending API calls. -### 1. Optionally add image style instructions +#### 1. Optionally add image style instructions -The **Image Style Instructions** field lets you add extra guidance on top of the chosen style (e.g. *"Always include natural light, avoid people"*). +The **Image Style Instructions** field adds extra guidance on top of the chosen style (e.g. *"Always include natural light, avoid people"*). -### 2. Generate prompts +#### 2. Generate prompts -Click **Generate Image Prompts**. Each slide gets an individual prompt. A **Shared Style prefix** box (in blue) shows the common style context prepended to every prompt. +Click **Generate Image Prompts**. Each slide gets an individual prompt. A **Shared Style prefix** box shows the common style context prepended to every prompt. -### 3. Review and edit prompts +#### 3. Review and edit prompts Each prompt card offers: - **Edit** β€” Opens a textarea to rewrite the prompt manually. Click **Save** when done. - **Regenerate** β€” Asks the AI to rewrite just that prompt (keeps the shared style prefix). -Once you're satisfied with all prompts, click **Next: Generate Images β†’**, or **← Back** to revisit style proposals. +Once satisfied with all prompts, click **Next: Generate Images β†’**, or **← Back** to revisit style proposals. --- -## Stage 5: Image Generation +### Stage 5: Image Generation Lucid sends all image prompts in parallel to Gemini and displays the results. -### 1. Generate images +#### 1. Generate images Click **Generate Images**. A spinner appears over each slide thumbnail while it loads. Generation runs concurrently β€” all slides process at the same time. -### 2. Regenerate individual images +#### 2. Regenerate individual images If a specific background doesn't look right, click **Regen** next to that slide to regenerate it alone without touching the others. -### 3. Advance +#### 3. Advance Once images look good, click **Next: Apply Typography β†’**, or **← Back** to edit image prompts. --- -## Stage 6: Typography & Layout +### Stage 6: Typography & Layout -This is where your slides come together. A deterministic rendering engine lays text over the backgrounds β€” no AI involved, pixel-perfect every time. +A deterministic rendering engine lays text over the backgrounds β€” no AI, pixel-perfect every time. -### Navigating slides +#### Navigating slides Click any **thumbnail** at the bottom of the canvas to switch the active slide. -### Editing text +#### Editing text Click directly on the **title** or **body** text box on the canvas and type to edit. Text is saved automatically. -### Repositioning text boxes +#### Repositioning text boxes Click and drag a text box to move it anywhere on the canvas. -### Resizing text boxes - -Drag the **edges** of a text box to resize it. The font size scales automatically to fit the available space (binary search fitting β€” no text ever overflows). - -### Styling text +#### Resizing text boxes -Use the **Style Toolbar** above the canvas to adjust: +Drag the **edges** of a text box to resize it. The font size scales automatically to fit (binary search fitting β€” no text ever overflows). -- Font family and weight -- Text color -- Alignment (left / center / right) -- Drop shadow and stroke properties -- Vertical position presets +#### Styling text -Select a text box (title or body) first, then make toolbar changes β€” they apply to the selected box on the active slide. +Use the **Style Toolbar** above the canvas to adjust font family, weight, text colour, alignment, drop shadow, and stroke properties. Select a text box first, then make toolbar changes. -### Applying a style to all slides +#### Applying a style to all slides -After styling one slide exactly how you want, click **Apply to All Slides** in the toolbar. This copies the current slide's style settings to every slide in the carousel. +After styling one slide, click **Apply to All Slides** in the toolbar to copy that style to every slide in the carousel. -### Exporting +#### Exporting Click **Export ZIP** (top-right) to download a ZIP archive containing: @@ -251,53 +243,161 @@ Click **Export ZIP** (top-right) to download a ZIP archive containing: --- -## Settings & Configuration +### Settings & Configuration -Click the **gear icon** in the top-right header to open the Settings modal. Changes here affect the defaults for new projects. - -### Tabs +Click the **gear icon** in the top-right header to open the Settings modal. | Tab | What you can configure | | :--- | :--- | -| **Prompts** | Edit the LLM prompt templates used at each stage. The backend validates that required `{variables}` are preserved before saving. | +| **Prompts** | Edit LLM prompt templates. The backend validates required `{variables}` are preserved before saving. | | **Instructions** | Pre-seed stage-specific instructions (e.g. always use a certain tone in Stage 2). | | **Global** | Default slide count, language, and title inclusion. | | **Image** | Output resolution (default: 1080Γ—1350) and the image model. | -| **Style** | Base typography defaults (font family, colors, stroke). | +| **Style** | Base typography defaults (font family, colours, stroke). | -Click **Save Changes** to apply. Use **Reset All to Defaults** (red button) to restore factory settings β€” a confirmation dialog will appear first. +Click **Save Changes** to apply. **Reset All to Defaults** (red button) restores factory settings. --- -## Tips +## Matrix Generation -- **Use Research for unfamiliar topics.** Stage 1 is powered by Google Search β€” it's especially valuable when you need current statistics, recent news, or want to explore a topic you're less familiar with. -- **Start messy.** The Stage 2 Draft AI is designed to handle unstructured input. Don't clean up your draft before pasting β€” let Lucid do the restructuring. -- **Edit prompts before generating images.** Image generation is the most expensive step. Spend time in Stage 4 to get prompts right before triggering Stage 5. -- **Use "Apply to All Slides" early.** Style one slide to your liking in Stage 6, then apply to all before fine-tuning individual slides. -- **No API key?** The app still works β€” images will be gradient placeholders, and you can test the typography/layout stage with your own content. +The Concept Matrix Generator is a fully independent mode β€” it has its own home screen, project list, settings, and views, all separate from the carousel pipeline. + +### Accessing Matrix Generation + +On the Lucid home screen, click **Matrix Generation**. You'll see the Matrix workspace with a list of all your past matrices. + +### Creating a Matrix + +Click **New Matrix**. Choose a generation mode, configure grid size and style, then click **Generate Matrix**. + +#### Mode: Theme + +Enter a theme string (e.g. *"The philosophy of time and consciousness"*). The AI picks n distinct diagonal concepts from the theme and invents a unique pair of descriptive axes for each concept. It then populates every cell at the intersection of those axes. + +- Grid is square: nΓ—n +- Size picker: n ∈ {2, 3, 4, 5, 6} + +#### Mode: Description + +Describe a cross-axis relationship (e.g. *"feels like a certain generation but is actually from a different one"*). A single LLM call derives both axis labels and n shared labels, producing a rectangular grid. + +- Grid is rectangular: rows Γ— columns +- Rows and columns are picked independently from {2, 3, 4, 5, 6} + +#### Style Mode + +Controls the tone of every cell's content: + +| Style | Character | +| :--- | :--- | +| **Neutral** | Balanced, informative | +| **Fun** | Playful, informal | +| **Absurd** | Unexpected, surreal juxtapositions | +| **Academic** | Analytical, precise | + +#### Other Options + +| Option | Description | +| :--- | :--- | +| **Language** | Output language for cell text | +| **Name** | Optional display name (auto-generated if left blank) | +| **Generate images** | Check to generate a background image for each cell immediately (slower; can be triggered later) | + +--- + +### The Matrix Grid β€” Cells, Axes, and Streaming + +Once generation starts, cells appear in the grid as they complete β€” you don't wait for the full matrix before reviewing results. The status badge on each matrix card tracks progress: **Pending β†’ Generating β†’ Done / Failed**. + +Each cell contains: +- A **title** summarising the intersection +- A **body** with a short explanation or example +- An optional **background image** generated from the cell's content + +Axis labels appear along the top row and left column of the grid. --- -## Concept Matrix Generator +### Views -The Concept Matrix Generator is a standalone feature β€” separate from the 6-stage carousel pipeline β€” that creates an nΓ—n grid of visual concept cells. Each cell represents the intersection of two axes and gets its own AI-generated image. +Three views are available from inside any completed matrix: -### Accessing the Matrix +#### Grid View (default) -Click **Matrix** in the top navigation header to switch to the Matrix workspace. +Interactive nΓ—n grid with axis labels. Click any cell to expand it and read its full content. -### Creating a matrix +#### Poster View -Click **New Matrix** and choose a generation mode: +Full-page visual layout designed for screenshots or sharing. Renders the entire matrix in a clean grid with large axis headers β€” ideal for exporting as a single image. -| Mode | Description | +#### Reveal View + +Presentation mode: cycles through cells one at a time. Use this for storytelling or to walk an audience through the matrix cell by cell. + +--- + +### Adding Images + +Images can be added at any point: + +- **At creation:** check **Generate images for each cell** in the New Matrix modal. +- **After generation:** click **Generate Images** in the matrix toolbar to bulk-generate images for all cells in parallel. +- **Per cell:** click **Regen** on an individual cell to regenerate only that cell's image. + +Image prompts are AI-written from each cell's content, styled to match the matrix's global style mode. + +--- + +### Revalidating a Matrix + +If some cells fail (or produce low-quality content), click **Revalidate**. This runs a validation pass that checks every cell, identifies failures or weak outputs, and regenerates only those. + +You can supply a **user comment** in the revalidation dialog (e.g. *"cells should be more specific and concrete"*). This text is injected into the validator prompt and used as extra instructions when regenerating failed cells. + +Progress streams via SSE, the same way as initial generation. + +--- + +### Matrix Settings + +Click **Settings** in the Matrix workspace to configure generation parameters. Changes are persisted in `matrix_settings.json`. + +#### Models + +| Setting | Description | | :--- | :--- | -| **Theme** | Enter a theme string (e.g. *"nostalgia"*). The AI picks n diagonal concepts and invents a unique pair of axes for each concept, then populates the entire grid. | -| **Description** | Describe a cross-axis relationship (e.g. *"feels like a generation but is actually from one"*). A single LLM call derives both axis labels and n shared labels, producing a rectangular grid. | +| **Text Model** | Gemini model ID for cell text generation | +| **Image Model** | Gemini model ID for cell image generation | -Choose the grid size (n) and click **Generate**. Cells stream in as they complete β€” you don't need to wait for the full grid before reviewing results. +#### Temperatures -### Adding images +Higher temperature = more creative/unexpected output, lower = more consistent/predictable. -Once generation is complete, click **Generate Images** to trigger parallel AI background generation for every cell in the grid. Individual cells can be regenerated via their **Regen** button. +| Setting | Controls | +| :--- | :--- | +| **Diagonal (seed concepts)** | Creativity when picking the n diagonal concepts (theme mode) | +| **Axes (descriptors)** | Creativity when inventing axis labels | +| **Cell (off-diagonal)** | Creativity for the majority of cell content | +| **Validation** | Creativity during the revalidation/regeneration pass | + +#### Performance + +| Setting | Description | +| :--- | :--- | +| **Max Concurrency** | Number of parallel LLM calls during generation (1–20) | +| **Max Retries** | Automatic retry attempts for failed cells before marking them failed (0–5) | + +Click **Save settings** to apply, or **Reset to defaults** to restore factory values. + +--- + +## Tips + +- **Use Research for unfamiliar topics.** Stage 1 is powered by Google Search β€” valuable when you need current statistics, recent news, or want to explore an unfamiliar topic. +- **Start messy in Stage 2.** The Draft AI handles unstructured input well. Don't clean up your draft before pasting. +- **Edit image prompts before generating.** Image generation is the most expensive step. Spend time in Stage 4 to get prompts right before triggering Stage 5. +- **Use "Apply to All Slides" early.** Style one slide to your liking in Stage 6, then apply to all before fine-tuning individual slides. +- **Try different Matrix style modes.** *Absurd* produces the most surprising and memorable grids; *Neutral* gives the most consistent educational output. +- **Use Matrix revalidation iteratively.** After a first revalidate pass, review the grid and run another pass with a more specific user comment if cells are still weak. +- **No API key?** The app still works β€” images will be gradient placeholders, and you can test the typography/layout stage and matrix grid structure with your own content. diff --git a/frontend/src/components/ModeSelector.tsx b/frontend/src/components/ModeSelector.tsx index d9c324e..9399988 100644 --- a/frontend/src/components/ModeSelector.tsx +++ b/frontend/src/components/ModeSelector.tsx @@ -40,7 +40,7 @@ export default function ModeSelector({ onSelect, isDark, onToggleDark }: ModeSel Slide Generation

- Turn rough drafts into polished Instagram carousels, slide by slide. + Research, draft, style, and export polished social media slides β€” six stages, pixel-perfect typography.

From cfb2c81fc1df46c8269bd77948ab0382c2695033 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 12 Mar 2026 00:30:46 +0000 Subject: [PATCH 2/5] fix: broaden homescreen subtitle to reflect both Lucid modes The app-level subtitle now describes both Slide Generation and Matrix Generation ("Design polished slide carousels or explore ideas as visual concept matrices."). The Slide card description is simplified back to a concise carousel-focused line without the Instagram specificity. https://claude.ai/code/session_0188EvRkkj6RFujggzp2bean --- frontend/src/components/ModeSelector.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ModeSelector.tsx b/frontend/src/components/ModeSelector.tsx index 9399988..f860f6c 100644 --- a/frontend/src/components/ModeSelector.tsx +++ b/frontend/src/components/ModeSelector.tsx @@ -21,7 +21,7 @@ export default function ModeSelector({ onSelect, isDark, onToggleDark }: ModeSel What would you like to create?

- Choose a mode to get started. + Design polished slide carousels or explore ideas as visual concept matrices.

@@ -40,7 +40,7 @@ export default function ModeSelector({ onSelect, isDark, onToggleDark }: ModeSel Slide Generation

- Research, draft, style, and export polished social media slides β€” six stages, pixel-perfect typography. + Turn rough drafts into polished social media carousels, stage by stage.

From 1e454367d4e25e58e3204ec0e6dd05ac119767bf Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 12 Mar 2026 00:32:24 +0000 Subject: [PATCH 3/5] fix: update Header tagline to reflect both Lucid modes Replaced "Transform drafts into carousels" with "Slides and concept matrices, AI-powered" so the persistent app header no longer implies Lucid is carousel-only. https://claude.ai/code/session_0188EvRkkj6RFujggzp2bean --- frontend/src/components/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx index bdd12b8..7313c45 100644 --- a/frontend/src/components/Header.tsx +++ b/frontend/src/components/Header.tsx @@ -91,7 +91,7 @@ export default function Header({

Lucid

-

Transform drafts into carousels

+

Slides and concept matrices, AI-powered

)} From 6fcf0e951ee89722007075d2fbae5a5b981312c3 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 12 Mar 2026 00:32:54 +0000 Subject: [PATCH 4/5] revert: restore ModeSelector subtitle to original MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reverts the subtitle change in ModeSelector β€” the Header tagline update was the intended fix. https://claude.ai/code/session_0188EvRkkj6RFujggzp2bean --- frontend/src/components/ModeSelector.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ModeSelector.tsx b/frontend/src/components/ModeSelector.tsx index f860f6c..20dd004 100644 --- a/frontend/src/components/ModeSelector.tsx +++ b/frontend/src/components/ModeSelector.tsx @@ -21,7 +21,7 @@ export default function ModeSelector({ onSelect, isDark, onToggleDark }: ModeSel What would you like to create?

- Design polished slide carousels or explore ideas as visual concept matrices. + Choose a mode to get started.

From b44a41aba5d3496a891208316fcac69ed5ab0fb9 Mon Sep 17 00:00:00 2001 From: Claude Date: Thu, 12 Mar 2026 00:34:29 +0000 Subject: [PATCH 5/5] docs: fix template customisation workflow in user guide The previous description incorrectly implied templates are configured via the project Settings modal. Templates are edited directly in the Templates panel: select a template, use the General/Style/Image/ Instructions/Prompts tabs, click Save Template. https://claude.ai/code/session_0188EvRkkj6RFujggzp2bean --- docs/user-guide.md | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/docs/user-guide.md b/docs/user-guide.md index 4169660..3725678 100644 --- a/docs/user-guide.md +++ b/docs/user-guide.md @@ -72,11 +72,17 @@ When creating a new project, select a template from the **Template** dropdown in #### Customising a template's configuration -Template configuration (prompts, style defaults, image settings) is edited through the **Settings** modal inside a project. Recommended workflow: +Template configuration is edited directly inside the **Templates panel**. Click any template in the list to open its editor, then use the tabs to adjust settings: -1. Create a project from an existing template. -2. Open **Settings** (gear icon) and adjust Prompts, Style, Image, and Instructions tabs. -3. Future projects can be created from templates that reflect your refined defaults. +| Tab | What you can configure | +| :--- | :--- | +| **General** | Template name, default slide count, default language, title inclusion | +| **Style** | Base typography defaults (font family, colours, stroke) | +| **Image** | Output resolution and image model | +| **Instructions** | Pre-seeded stage-specific instructions | +| **Prompts** | LLM prompt templates for each pipeline stage | + +Click **Save Template** in the footer when done. Changes apply to this template only β€” existing projects created from it are unaffected. ---