AI-powered song recommendations for your Instagram posts and stories.
Upload a photo → VisTracks analyzes the mood, energy, and vibe → get 8 perfect songs instantly.
| Home | Analyzing | Results |
|---|---|---|
| (coming soon) | (coming soon) | (coming soon) |
- 📷 Image Upload — pick from gallery or take a new photo
- 🤖 Dual AI Pipeline — vision model extracts scene/mood, LLM recommends songs
- 🎵 8 Song Recommendations — popular + hidden gems, real tracks used on Instagram
- 📋 One-tap Copy — copy "Song - Artist" to clipboard instantly
- 📤 Share Results — share your full song list with friends
- ⚡ Haptic Feedback — satisfying press responses throughout
- 🌑 Dark Mode — deep dark theme with purple accent (#6C63FF)
git clone https://github.com/your-username/vistracks.git
cd vistracks
npm installCopy the example env file and fill in your key:
cp .env.example .envEdit .env:
EXPO_PUBLIC_GROQ_API_KEY=gsk_your_actual_key_hereGet your free API key at console.groq.com
npx expo startThen scan the QR code with Expo Go on your phone (iOS or Android).
User selects image
↓
📐 Compress to max 800px (saves API tokens)
↓
🔍 Call 1 — Vision Model
Model: meta-llama/llama-4-scout-17b-16e-instruct
Input: image as base64
Output: { mood, energy, scene, colors, vibe }
↓
🎵 Call 2 — LLM Model
Model: llama-3.3-70b-versatile
Input: mood JSON from Call 1
Output: [{ title, artist }] × 8
↓
📱 Results rendered with song cards
Both API calls go through Groq — extremely fast inference (usually < 5 seconds total).
LLMs sometimes wrap responses in markdown code fences (```json). VisTracks automatically strips these before parsing, and retries with a stricter prompt if parsing fails.
| Layer | Technology |
|---|---|
| Framework | React Native + Expo SDK 54 |
| Language | TypeScript |
| Navigation | React Navigation v6 (Stack) |
| AI (Vision) | Groq — meta-llama/llama-4-scout-17b-16e-instruct |
| AI (LLM) | Groq — llama-3.3-70b-versatile |
| Image Processing | expo-image-manipulator |
| Camera/Gallery | expo-image-picker |
| Animations | react-native-reanimated v3 |
| Haptics | expo-haptics |
| Clipboard | expo-clipboard |
| Styling | React Native StyleSheet (custom dark theme) |
├── App.tsx # Root entry point
├── app.json # Expo config
├── babel.config.js # Reanimated plugin
├── .env # API keys (not committed)
└── src/
├── theme.ts # Design tokens (colors, spacing)
├── types/
│ └── index.ts # TypeScript interfaces
├── utils/
│ └── imageUtils.ts # Image compression + base64
├── services/
│ └── groqService.ts # Two-call Groq AI pipeline
├── components/
│ ├── SongCard.tsx # Animated song card
│ ├── MoodTag.tsx # Mood chip/pill
│ ├── ImageUploader.tsx # Gallery + camera picker
│ └── LoadingAnimation.tsx # Pulsing loader
├── screens/
│ ├── HomeScreen.tsx # Upload screen
│ ├── LoadingScreen.tsx # Analysis progress screen
│ └── ResultsScreen.tsx # Song list + share
└── navigation/
└── AppNavigator.tsx # Stack navigator
MIT — feel free to fork and build on this!