SOLO·FM

MVP Version (Minimum Viable Product)

Turn your daily screenshots, photos, and notes into a personal AI-generated morning podcast that helps you organize yesterday and start today with clarity.

🌟 Features

MVP Core Features

🎙️ AI Podcast Generation - Transform daily captures into a morning briefing
📸 Multi-format Input Support - Upload photos, screenshots mixed with text
🎯 Three-dimensional Analysis Framework - Life Archive, Deep Dive, Cognitive Check
💾 Local Audio Download - Save generated podcasts directly to your device
🎵 Built-in Audio Player - Play podcasts with speed control (1.0x - 3.0x)
🎭 AI Voice Host Selection - Multiple AI voices, preview before choosing
🔄 Dual TTS Engine - ListenHub primary + Gemini TTS fallback
🌍 Bilingual Interface - Full English/Chinese UI and content generation

🚀 Quick Start

Prerequisites

Node.js 16+
API Keys (Choose at least one):
- Google Gemini API Key - For text generation and TTS (Recommended)
  - Get from: Google AI Studio
- ListenHub API Key - For high-quality TTS (Alternative)
  - Get from: ListenHub Console

Installation

# Clone repository
git clone <repository-url>
cd solo-fm

# Install dependencies
npm install

# Configure environment variables
echo "GEMINI_API_KEY=your_api_key_here" > .env.local
echo "VITE_GEMINI_API_KEY=your_api_key_here" >> .env.local

# Start development server
npm run dev

The application will be available at: http://localhost:3000

🎯 User Workflow

1. First-time Setup

Enter your preferred name for AI host to address you

2. Daily Data Input

Upload or provide:

Visual Moments: Life photos, food photos, scenery shots (establish life archive)
Digital Memories: Screenshots of notes, work materials, todos, reading notes
Text Context: Paste or type additional thoughts, reflections, text content

3. Generate Podcast

Click "Synthesize Podcast" button
AI processes inputs and generates personalized morning briefing

4. Listen & Download

Play podcast in built-in audio player with speed control
Download WAV file to your local device

🔧 Technical Stack

Frontend

React 19 - UI framework
TypeScript - Type safety
Vite - Build tool and dev server
Tailwind CSS - Styling and responsive design
Framer Motion - Animation library
Lucide React - Icon library

AI Integration

Google Gemini 2.5 Flash - Text generation and analysis
Google Gemini 2.5 Flash Preview TTS - Text-to-Speech synthesis

Key Dependencies

{
  "dependencies": {
    "react": "^19.2.0",
    "react-dom": "^19.2.0",
    "@google/genai": "^1.30.0",
    "lucide-react": "^0.555.0",
    "framer-motion": "^12.23.24"
  }
}

📂 Project Structure

solo-fm/
├── components/          # React components
│   ├── AudioPlayer.tsx      # Audio playback interface
│   └── UIComponents.tsx     # Reusable UI elements
├── services/            # API services
│   └── geminiService.ts     # Gemini AI integration
├── utils/               # Utility functions
│   ├── audioUtils.ts       # Audio processing
│   └── dateUtils.ts        # Date/time formatting
├── types.ts            # TypeScript type definitions
├── App.tsx             # Main application component
├── index.html          # Entry HTML
├── index.tsx           # React root
├── vite.config.ts      # Vite configuration
└── package.json

🎨 Design Philosophy

The SOLO·FM podcast is structured around a three-dimensional analytical framework:

1. Life Archive

"We do not remember days, we remember moments."

Analyzes visual moments from daily life
Captures the beauty of ordinary moments
Emphasizes "stolen fragments" that construct life

2. Deep Dive

Three-Step Framework:

Step 1: Primary Consensus

Direct, high-quality summary or analysis based on provided information

Step 2: Wall-Breaking Perspective

Contrarian or alternative viewpoint that challenges the consensus

Step 3: Cognitive Check

Reflective question to challenge assumptions and blind spots

3. Bridge to Today

Helps users start their day with order, control, and confidence

⚙️ Configuration

Environment Variables

Create .env.local file:

# Required
GEMINI_API_KEY=your_google_gemini_api_key
VITE_GEMINI_API_KEY=your_google_gemini_api_key

# Optional
# Add other API keys if using alternative services

Vite Configuration

The vite.config.ts includes:

Port configuration (default: 3000)
React plugin setup
Environment variable injection
Path aliases (@/ → root directory)

🌐 Core Methodology

Input Processing

The system processes three types of inputs:

Visual Files (Life Archive) → Sent to Gemini for image analysis
Screenshots (Digital Memories) → OCR and content extraction
Text Context → Direct integration into prompt

AI Prompt Strategy

Multi-stage Prompting Approach:

Analysis Stage - Analyze images and text for key themes
Synthesis Stage - Structure content using three-dimensional framework
Generation Stage - Produce final podcast script in specified language

Prompt Structure:

[System Instruction]
  - Style guidelines (e.g., "NPR Morning Edition" style)
  - Language specification
  - Three-dimensional framework rules

[Input Sections]
  - Section A: Visuals (Life Archive)
  - Section B: Screenshots & Notes (Deep Dive)
  - Section C: User Context (Brain Dump)

[Output Format]
  - Intro template
  - Body paragraphs (following framework)
  - Outro template
  - [Stage Directions] for display

Audio Generation

Text-to-Speech:

Model: gemini-2.5-flash-preview-tts
Voices: Kore (Female), Fenrir (Male)
Format: PCM data → WAV Blob
BGM Integration: Mixed with background music

🎼 Audio Processing

Backend Audio Pipeline

TTS Generation - Gemini API returns base64 encoded PCM
Decoding - Base64 → PCM byte array
PCM to WAV - Convert raw PCM to WAV format
BGM Mixing - Mix podcast with background music
Blob Creation - Final WAV blob for playback and download

Frontend Playback

Native HTML5 Audio API
Custom controls with playback rate adjustment (1.0x - 3.0x)
Progress bar with seek functionality
Download button for local saving

📱 User Interface

Key Components

Welcome Modal - First-time user name collection
Upload Zones - Drag-and-drop file upload (images, screenshots)
Text Area - Brain dump and context input
Loading Screen - Progress indicators during generation
Audio Player - Playback controls with speed adjustment
Script Preview - Generated podcast script display
Download Button - Save podcast locally

Responsive Design

Mobile-first approach
Tailwind CSS responsive utilities
Touch-friendly controls
Optimized for morning routine use

🎯 MVP Scope

✅ Implemented

Basic file upload (images)
Gemini API integration for script generation
Text-to-Speech synthesis
Audio playback controls
Speed control (1.0x - 3.0x)
Local audio download
Bilingual UI (Chinese/English)
Three-dimensional analysis framework
Loading states and progress indicators

🚫 Not in MVP

🛠 Development

Commands

# Install dependencies
npm install

# Run development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Development Tips

Use React DevTools for debugging
Monitor network tab for API calls to Gemini
Check browser console for audio processing logs
Test with various file types and sizes
Verify download functionality across browsers

📊 Performance Considerations

File Size: Recommend uploading < 10MB images for optimal processing
API Rate Limits: Monitor Gemini API usage
Audio Processing: Client-side processing may be slow on older devices
Memory Usage: Large audio files may consume significant memory

🔐 Privacy & Security

All processing happens client-side (no server storage)
API keys stored in .env.local (not committed to git)
User data not persisted (refresh clears all inputs)
Audio files generated as temporary blob URLs
No user tracking or analytics in MVP

🐛 Troubleshooting

Common Issues

1. API Key Not Working

Verify key format in .env.local
Check Gemini API quota/limitations
Ensure correct API key permissions

2. Audio Not Playing

Check browser console for errors
Verify audio file format (should be WAV)
Refresh and try generating again

3. Download Not Working

Check browser download permissions
Verify sufficient disk space
Try different browser

4. Slow Generation

Large image files may slow processing
Check internet connection
Gemini API response time varies

📞 Support

For MVP version:

This is a proof-of-concept implementation
Not recommended for production use
For testing and feedback purposes only

🎓 Learn More

AI Models Used

Gemini 2.5 Flash - Multimodal large language model
Gemini 2.5 Flash TTS - Text-to-speech synthesis

Design Inspiration

NPR Morning Edition
声动早咖啡 (Morning Coffee)
Personal knowledge management systems (e.g., Notion, Obsidian)

Related Concepts

📄 License

MIT License - Feel free to use and modify for personal projects.

🙏 Acknowledgments

Google Gemini team for AI APIs
Open-source community for React ecosystem
Design inspiration from modern podcast platforms

Remember: No Record, No Happen

Build Order, Reconstruct Life

🎙️ SOLO·FM

Your Personal AI Morning Briefing

MVP Version 1.0

Start Your Day with Clarity

Name		Name	Last commit message	Last commit date
Latest commit History 13 Commits
.claude		.claude
api		api
assets		assets
components		components
services		services
utils		utils
.gitignore		.gitignore
App.tsx		App.tsx
Kapture 2025-12-01 at 14.36.43.mp4		Kapture 2025-12-01 at 14.36.43.mp4
README-zh.md		README-zh.md
README.md		README.md
index.html		index.html
index.tsx		index.tsx
metadata.json		metadata.json
package.json		package.json
tsconfig.json		tsconfig.json
types.ts		types.ts
vercel.json		vercel.json
vite.config.ts		vite.config.ts

Folders and files

Latest commit

History

Repository files navigation