Studio Guide
Operate the Fantom Interio Studio flagship page, exports, and automations.
Fantom Interio Studio — Feature Guide
Fantom Interio Studio (/studio) is an AI-powered interior design and smart home planning workspace.
Navigation
| Tab | Description |
|---|---|
| 📊 Overview | Project stats, quick actions, recent projects |
| 📁 Projects | All saved projects with thumbnails |
| 🎨 Design Studio | AI room rendering with chat interface |
| 🧊 3D Studio | Interactive 3D floor plan viewer |
| 🏠 Smart Home | Per-project device control & energy hub |
| 📤 Exports | Download designs as images |
| ⚙️ Settings | Style, budget, theme preferences |
Design Studio
Upload
- Drag & drop or click to upload room photos (JPG/PNG) or floor plans
- Videos (MP4/MOV) supported for video walkthroughs
Style Lock
Select a design style that persists across all AI edits: Modern Minimal, Scandinavian, Japandi Zen, Industrial, Bohemian, Luxury Gold, Coastal, Art Deco, Traditional Indian, Mid-Century, Biophilic, Monochrome Tech
Reference Style
Upload an inspiration image and apply its visual style to your room or whole house.
Chat Interface
Describe changes in natural language. Examples:
- "Add wooden flooring and warm lighting"
- "Replace sofa with a dark blue velvet sectional"
- "Make the walls terracotta"
Budget Band
Controls AI suggestions: Economy / Mid / Premium
3D Studio
Views
| Mode | Description |
|---|---|
| 3D | Perspective with orbit controls |
| ISO | Isometric (top-angled) |
| TOP | Orthographic top-down |
| WIRE | Wireframe overlay |
Layers
Toggle visibility: Structure, Furniture, Wiring, Devices
Compass
The bottom-left compass rotates with your camera orientation (North = Red).
AI Smart Home Plan
From the ⚙️ settings dropdown, click Generate Smart Home Plan to auto-mark devices, wiring paths, and the main electrical panel.
3D Chat
Ask the AI to modify the 3D model:
- "Show only the living room"
- "Highlight bedroom in red"
- "Move the main panel to the kitchen"
Projects
Projects auto-save when you click 💾 in the sidebar. Each project stores:
- All uploaded files
- Full chat history
- Analysis results
- Smart home plan
- Style & budget settings
Keyboard Shortcuts
| Key | Action |
|---|---|
Esc |
Exit fullscreen viewer |
Enter (in chat) |
Send message |
Shift+Enter |
New line in chat |
Smart Home Hub Tab (updated)
The Smart Home tab now includes a full ESP Board Setup Panel directly inside Studio.
ESP Board Setup Panel
Supports all ESP board types:
| Board | Chip | Best For |
|---|---|---|
| ESP32 DevKit V1 | CP210x | Most common, 30/38-pin dev boards |
| ESP32-S3 | Native USB | AI/ML, high-compute |
| ESP32-S2 | Native USB | Low-power, USB OTG |
| ESP32-C3 | Native USB | Ultra-compact, BLE 5 |
| ESP32-C6 | Native USB | WiFi 6, Zigbee, Thread |
| ESP32-H2 | Native USB | Matter, Thread specialist |
| ESP32 (generic) | Auto | Unknown / custom variants |
| ESP8266 NodeMCU | CH340 | Budget WiFi boards |
| Wemos D1 Mini | CH340 | Compact ESP8266 |
Connection Methods
| Method | Description | Requirements |
|---|---|---|
| ⚡ Auto-Find | Tries saved USB ports, then scans WiFi subnets | Chrome/Edge recommended |
| 📶 WiFi / IP | Connect via local network IP + WebSocket port 81 | Board on same network |
| 🔌 USB Serial | Reads IP via WebSerial API from board's serial output | Chrome/Edge on HTTPS |
| 🔷 Bluetooth | BLE scan for ESP32 advertising device | Web Bluetooth capable browser |
| 📴 Offline/AP | Connect to ESP32's own access point (192.168.4.1) | No router needed |
When a connection succeeds, discovered devices are automatically imported into your current project.
Authentication & Credits (new)
- New users receive 5 free AI uses upon sign-in
- Each AI feature (image analysis, room generation, etc.) consumes 1 credit
- Unauthenticated users or users with 0 credits see the AuthGate modal prompting sign-in or upgrade
- The floating AI chatbot opens the sign-in flow directly
Floating AI Chatbot (updated)
The floating orb now opens a vertical fan menu instead of radial buttons:
- Tapping the orb expands 4 action pills upward (or downward if near the top of screen)
- Each pill shows an icon and label: Ask AI, Smart Home, Design Room, Find Devices
- The menu direction adapts based on available screen space
- Fully accessible via keyboard and screen readers
Admin Dashboard
Administrators can access /admin for:
| Section | Description |
|---|---|
| 📊 Overview | App-wide stats: users, AI calls, credits, active features |
| 👥 Users | Search users, grant/revoke premium, reset credits |
| 🚩 Feature Flags | Toggle AI features, smart home integrations, UI elements |
| 💎 Credits | Set free credit amount, grant credits to individual users |
| 🏠 Smart Home | Enable hub admin mode, firmware guide links |
Access is restricted to emails listed in ADMIN_EMAILS environment variable.
Architecture
Built with:
- Next.js 13 App Router + TypeScript
- React Three Fiber / Three.js for 3D rendering
- Zustand for smart home state & credits store
- NextAuth v4 with Google OAuth — sign-in at
/login - Framer Motion for animations
- Tailwind CSS + Apple design system
- Gemini / OpenAI for AI analysis and rendering
- Web Speech API for voice commands
- WebSerial API for USB ESP board detection
- Web Bluetooth API for BLE board scanning
See SMART_HOME_SETUP.md for full smart home documentation. See ESP32_QUICKSTART.md for firmware setup.