Overview: The Modern Food Logging Architecture
Building a food tracking app used to require writing massive search databases, licensing clunky legacy SQL catalogs, and building manual search autocompletes that forced users to weigh every single ingredient.
With FoodVivo's multi-modal Edge API, you can implement an instant camera-to-macro logging flow in your mobile app in under 10 minutes.
5-Step Mobile Implementation Workflow
[ 1. Camera Capture ] ──► [ 2. Local Image Resizing (80% JPEG) ]
│
▼
[ 5. Render Macro Pie Chart ] ◄── [ 4. FoodVivo Edge API (/analyze) ]
▲
│ (If Offline)
[ 3. SQLite Local Queue ]
Step 1: Client-Side Image Optimization
High-end smartphone cameras (iPhone 16 Pro, Samsung Galaxy S25) capture photos between 4MB and 12MB in HEIC or RAW formats. Uploading raw camera images over cellular 4G/5G connections adds 2,000ms to 4,000ms of pure network latency.
Always resize and compress on-device before transmission:
- Max Dimension: 1200 x 1200 pixels (sufficient for granular culinary segmentation).
- Format: JPEG with 80-85% compression quality.
- Result: File size drops from 8MB to ~140KB — reducing upload time to under 150ms.
Step 2: Querying the FoodVivo Edge API
Post the base64 string or natural language text to /v1/food/analyze:
curl -X POST https://foodvivo-api.flappybird-assets.workers.dev/v1/food/analyze \
-H "Authorization: Bearer sk_live_your_api_key" \
-H "Content-Type: application/json" \
-d '{
"text": "2 poached eggs, avocado toast, flat white",
"context": "Breakfast"
}'
Step 3: Handling Offline Gym Scenarios
Fitness enthusiasts frequently log post-workout shakes or meals in basement gyms with zero cellular reception.
Best Practice Offline Strategy:
- When offline, save the compressed photo and timestamp into a local SQLite table.
- Render an optimistic placeholder card in the user's daily timeline: "Analyzing meal when connection restores..."
- Listen to network connectivity events via
connectivity_plus (Flutter) or @react-native-community/netinfo (React Native).
- When online, dequeue pending captures and batch upload to FoodVivo.
Step 4: Line-Item Ingredient Adjustments
Every FoodVivo response includes a granular foods array with USDA FoodData Central IDs:
{
"foods": [
{
"name": "Grilled Chicken Breast",
"quantity": 1,
"serving_size": 1,
"serving_unit": "portion (180g)",
"weight_g": 180,
"calories": 297,
"protein_g": 55.8,
"carbs_g": 0.0,
"fat_g": 6.4,
"confidence": 0.98
},
{
"name": "Steamed White Rice",
"quantity": 1,
"serving_size": 1,
"serving_unit": "cup (150g)",
"weight_g": 150,
"calories": 195,
"protein_g": 4.1,
"carbs_g": 42.3,
"fat_g": 0.4,
"confidence": 0.96
}
]
}
If a user weighs their chicken on a digital food scale and taps "+20g" in your UI, your frontend can scale the macros linearly without needing another AI call.