Voice Assistant - iPhone Web App

A Flutter-based voice assistant web application optimized for iPhone with PWA (Progressive Web App) capabilities.

Features

• 🎤 Voice interaction interface with visual feedback
• 📱 iPhone-optimized responsive design
• 🌓 Automatic light/dark mode support
• 📲 PWA support for home screen installation
• 🔒 Safe area support for iPhone notch/Dynamic Island
• ⚡ Fast and lightweight
• 🎨 iOS-style UI with smooth animations

Getting Started

Running Locally

1. Make sure you have Flutter installed
2. Run the development server:

   flutter run -d chrome

Building for Production

Build the web app for deployment:

flutter build web --release

The build output will be in the build/web directory.

Installing on iPhone

Method 1: Deploy to a Web Server

1. Deploy the build/web folder to any web hosting service:

   • GitHub Pages
   • Firebase Hosting
   • Netlify
   • Vercel
   • Any static hosting provider

2. Visit the deployed URL on your iPhone using Safari

3. Tap the Share button (square with arrow)

4. Scroll down and tap "Add to Home Screen"

5. Customize the name if desired and tap "Add"

6. The app will appear on your home screen like a native app!

Method 2: Local Network Testing

For testing on your local network:

1. Build the app:

   flutter build web --release

2. Serve it on your local network:

   cd build/web
   python -m http.server 8000

   Or use any static file server

3. Find your computer's IP address:

   • Windows: ipconfig (look for IPv4 Address)
   • Mac/Linux: ifconfig or ip addr

4. On your iPhone, open Safari and navigate to:

   http://YOUR_IP_ADDRESS:8000
   

5. Follow the "Add to Home Screen" steps above

PWA Features for iPhone

Once installed on your iPhone home screen:

• ✅ Launches in fullscreen (no Safari UI)
• ✅ Respects iPhone safe areas (notch/Dynamic Island)
• ✅ Prevents accidental pull-to-refresh
• ✅ Optimized touch interactions
• ✅ Native app-like experience
• ✅ Works in portrait orientation

Customization

Colors & Theming

Edit lib/main.dart to customize colors:

colorScheme: ColorScheme.fromSeed(
  seedColor: Colors.blue,  // Change this!
  brightness: Brightness.light,
),

App Name & Description

Edit web/manifest.json:

{
  "name": "Your App Name",
  "short_name": "App Name",
  "description": "Your app description"
}

App Icons

Replace icons in web/icons/ with your custom icons:

• Icon-192.png (192x192)
• Icon-512.png (512x512)
• Icon-maskable-192.png (192x192, with safe area)
• Icon-maskable-512.png (512x512, with safe area)

Development

Hot Reload

When running in development mode, press r in the terminal for hot reload.

Debugging on iPhone

Use Safari's Web Inspector:

1. Enable Web Inspector on iPhone (Settings > Safari > Advanced)
2. Connect iPhone to Mac
3. Open Safari on Mac > Develop > [Your iPhone] > [Your App]

Technologies

• Flutter: Cross-platform UI framework
• Material 3: Modern Material Design
• PWA: Progressive Web App standards
• CSS: iPhone-specific optimizations

Browser Compatibility

• ✅ Safari on iOS/iPadOS (recommended)
• ✅ Chrome on iOS
• ✅ Firefox on iOS
• ✅ Desktop browsers (for testing)

Tips for Best iPhone Experience

1. Always use Safari for initial installation (other browsers may not support "Add to Home Screen" properly)
2. Grant permissions when prompted for microphone access
3. Keep landscape lock off for best orientation handling
4. Update regularly by visiting the web app URL and reinstalling

Future Enhancements

• Real speech recognition integration
• Voice synthesis for responses
• Offline support with service workers
• Cloud synchronization
• Multiple language support

License

This project is open source and available under the MIT License.