SparkLumina Feature Guide

Below are SparkLumina feature screenshots.

---

Table of Contents

• 1. Create Room
• 2. Join Room
• 3. Room Features
• 4. Whiteboard Tools
• 5. Application Features
• 6. LLM & TTS Configuration

---

1. Create Room

On the homepage, select the Create Room tab, fill in Manager Name (admin nickname) and Room Name (room display name), then click Create & Enter to create and enter a new room.

• Manager Name is cached locally and auto-filled on next visit.
• Room Name is for display only, not used as join credentials.
• A unique 10-character Room ID is generated for inviting others.
• The creator automatically gets Manager role with permissions to delete the room, transfer Manager, etc.

---

2. Join Room

On the homepage, switch to the Join Room tab, enter Room ID or Link (supports plain Room ID or full invite link) and Nickname (any name), then click Join Room.

• Full share links are supported; the system auto-extracts the Room ID.
• Visiting /room/:id via invite link redirects to a quick-join page where you only need to enter a nickname.
• Room existence is validated before joining; a clear message is shown if the room does not exist.

---

3. Room Features

After entering a room, the top navigation bar provides core room management actions.

3.1 Real-time Collaboration

Multiple users can join the same room and collaborate on the shared whiteboard.

• All canvas changes sync to all members in real time, with latency 100ms.
• The top user avatar area (👥 icon + count) shows online members; hover to expand the list and see Manager vs regular members.
• Each user has a distinct avatar color.
• Auto-reconnect: after network loss, the client retries and restores the latest room state on reconnect.

3.2 Room Status

The top status indicator reflects the current connection:

Local edits during disconnection are synced automatically after reconnect.

3.3 Save State

Click the top Save button to persist the current whiteboard snapshot to the server.

• While saving: button shows spinner + Saving....
• After save: button shows ✔ Saved!, then reverts.
• Canvas content is retained after everyone leaves; the server does not auto-clear. Re-enter with the same Room ID to restore.

3.4 Video Replay

Click the top 回看 (Replay) button to open the list of historical recordings for this room.

• Lists all MP4 recordings saved in this room via BrushGenius / DeepExplainar / Xchat.
• Click an entry to preview and play.
• Recordings are bound to Room ID; different rooms have separate recordings.

3.5 Delete Room

The 🗑️ (red) button on the top right is visible only to Manager. Click to open a confirmation dialog; confirm to permanently delete the room and all its content.

• Deletion cannot be undone; use with care.
• Regular members do not see this button.

3.6 Leave Room

Click the top Leave button to exit the room and return to the homepage.

• Regular members: Leave directly; room and others are unaffected.
• Manager with other members present: Must transfer Manager to another member before leaving to avoid losing room ownership.
• Canvas content is preserved; re-enter with the same Room ID to restore.

3.7 Share Room

Click the 📋 copy button next to the Room ID to copy the invite link (or Room ID) to the clipboard.

• Icon changes to ✔ after copy to indicate success.
• Recipients can paste the link or ID in Join Room on the homepage.
• In App (Capacitor), only the Room ID is copied; in browser, the full link is copied.

---

4. Whiteboard Tools

The whiteboard is built on the Excalidraw engine with an infinite canvas and rich drawing tools.

4.1 Whiteboard Menu

Click the ☰ (hamburger menu) in the top-left to open the main menu:

4.2 Toolbar

The top toolbar provides the full drawing toolset:

Object actions (when selected):

• Shift + click — Multi-select
• Group / Ungroup (right-click or shortcut)
• Layer order: Bring forward / Send backward
• Copy / Paste / Delete

4.3 Library

The Excalidraw library is on the right side of the toolbar; click to open the side panel.

• Built-in shapes, bubbles, flowchart elements, etc.
• Click to insert, drag to place.
• AI Agent (Xchat / BrushGenius) can use library shapes when generating content.

4.4 Custom Library

Click the 🎨 (Palette) button in the top-right of the canvas to open the custom library panel.

• Add: Select elements on the canvas, click "Add to custom library", enter name and description.
• Use: Click a library item to insert into the canvas.
• Manage: Rename or delete saved items.
• AI usage: Xchat ExAgent can reference your custom library for consistent style.
• Data is stored in localStorage, per device.

---

5. Application Features

After entering a room, the right Dock (frosted glass vertical buttons) provides three AI feature entries; only one panel can be open at a time.

---

5.1 BrushGenius

BrushGenius is an AI drawing assistant that generates structured Excalidraw diagrams from natural language, with audio-visual sync and video recording.

Top Action Bar

Scene & Chart Templates

• Adaptive best scene: When checked, AI auto-selects the best scene and template from input.
• Manual: Uncheck to manually choose in the Scene / Chart template selector:

Generation Flow

1. Enter a "why" question or drawing request in the input, then send.
2. AI streams Excalidraw skeleton JSON with live preview.
3. After generation, the "Generated code (editable)" area shows the full JSON.
4. Click Apply to canvas to insert; Sync from canvas to backfill from canvas; Copy to copy to clipboard.

Audio-visual sync: With recording on, each generated element appears in script order with TTS narration for a "draw while speaking" demo.

Export & Share

• Export PNG — Current canvas screenshot
• Export SVG — Vector format for documents
• Export Excalidraw — .excalidraw source file
• Export MP4 — Full video with audio-visual demo
• Share — Upload to server for shareable link, or publish to Xiaohongshu

---

5.2 DeepExplainar

DeepExplainar is an AI problem-solving assistant. Enter any problem, and AI explains step-by-step while drawing on the whiteboard and reading aloud with TTS.

Usage Flow

1. Configure model: Click ⚙️ to set LLM (API Key, model, Base URL). Active config is shown at the top (green dot + model name).
2. Enter problem: Fill in the problem in the input; supports math, physics, chemistry, etc.
3. Optional recording: Check "Record this lecture (save as MP4)" to save the full video with audio.
4. Start: Click Start lecture; AI streams the explanation.

Playback

• Content is shown as multiple Steps with text and Excalidraw diagrams.
• Left area renders Markdown; right area renders Excalidraw.
• TTS reads each step; text and graphics sync.
• Controls: Previous / Next, Pause / Resume, jump to any step.

Interactive Q&A

During or after the lecture, you can ask follow-up questions in the input ("Ask the teacher"); AI answers in conversation form.

Share & Export

• Export MP4 with board content + diagrams + audio.
• Generate share link or publish to Xiaohongshu.

---

5.3 Xchat

Xchat is a canvas Agent assistant. Chat with AI in natural language; the Agent creates, edits, and deletes shapes on the whiteboard for a "speak to draw" experience.

Core Capabilities

Context Selection

Xchat supports attaching selected elements or box-selected area as context:

• Selected elements: Select one or more elements on the canvas, then send a message; the bubble shows the selection type (e.g. Selection · Ellipse); Agent uses it as the target.
• Area: Click Area next to the input, drag a rectangle on the canvas; a screenshot is attached; Agent can perceive the content.
• Add Context: Manually pick elements from the canvas list.

Todo List

For complex multi-step tasks, the Agent maintains a live todo list at the bottom:

• Click to expand subtasks.
• Subtasks are marked complete automatically.
• User can intervene; Agent re-evaluates and updates the plan.

Top Action Bar

First-time tip: Configure LLM via ⚙️ and ensure the AI Agent service (port 8652) is running before using Xchat.

---

6. LLM & TTS Configuration

LLM config is shared by BrushGenius, DeepExplainar, and Xchat. Config is stored in local localStorage only, not uploaded.

6.1 Config Entry

The ⚙️ button on any AI panel opens the config dialog. The title may vary (AI Teaching · LLM Config / AI Assets · LLM Config), but the same config is edited.

• Config list: Shows all saved configs; click to set as active (green dot).
• Multiple configs: Save multiple (e.g. internal Flybird + personal Anthropic) and switch as needed.
• Actions: Edit (✏️) or delete (🗑️) each config.

---

6.2 LLM Provider & Basic Config

Click "Add config" or edit existing to fill:

Supported providers and default Base URLs:

Base URL supports any OpenAI-compatible proxy for flexible model integration.

---

6.3 Model Selection

Field: actual_model (model version)

• Flybird: Enter model version manually (default doubao-seed-1-8-251228).
• OpenAI / Anthropic: After filling URL and Key, click "Fetch model list" to load available models; or type manually (e.g. gpt-4o, claude-sonnet-4-5).
• Others: Enter model name manually.

---

6.4 TTS Engine Config

DeepExplainar and BrushGenius audio-visual sync rely on TTS. Two engines are supported:

CustomBridge (default)

For self-hosted or internal TTS.

MiniMax TTS

Voice cloning is available when MiniMax TTS is selected (see next section).

---

6.5 Custom TTS Voice (MiniMax Voice Cloning)

When MiniMax TTS is selected, the "Clone real voice" section appears at the bottom.

Cloning Steps

1. Provide audio (choose one):

   • Upload file: mp3 / mp4 / m4a / wav, etc.
   • Web recording: Click "🎙️ Start recording", use mic, then "⏹️ Stop recording" to upload.
   • Duration: 10 seconds to 5 minutes; clearer and cleaner audio works better.

2. Fill cloning params (after upload):

3. Click "Start cloning": MiniMax speech-2.8-turbo runs; new voice ID is filled into the config.

4. Done: Config shows "Current cloned voice ID: xxx, ready"; save to apply.

Cloned voices are stored in your MiniMax account and remain available.

---

6.6 Voice Control

When MiniMax TTS is used:

---

6.7 Advanced LLM Params

Three groups of advanced params at the bottom:

• temperature: Higher = more random, lower = more deterministic. Range 0–2.
• top_p: Nucleus sampling. Range 0–1.
• Classification tasks: use low temperature (e.g. 0.1) for stability.

All params optional; backend uses defaults when empty.

---

Last updated: 2026-03-06