TripSync — A Three-Tier Gemma 4 Travel Planner Running Live on Flask

This is a submission for the Gemma 4 Challenge: Build With Gemma 4

What I Built

TripSync is a live AI travel planner. You type one sentence — "7 days in Tokyo from Toronto" or "adventure trip for two, hiking and wildlife, off-season" — and it returns three destination cards with match scores, budget ranges, visa info, flight times, and activity suggestions. Then it takes you all the way to a booked trip.

The full user journey:

Step 1 — Search — plain English, no forms, no dropdowns required ( though we have those too for the planners who like to plan ;) )

Step 2 — Results — three destination cards with everything you need to make a decision. Instant load in Gemma 4 Expert mode.

Step 3 — Book — every card links directly to Google Flights, Skyscanner, Booking.com, Agoda, and Expedia with prefilled searches. Dates and destination already filled in. Click and book.

Step 4 — Plan — click "View Detailed Planner" on any card and Gemma 4 builds a full day-by-day itinerary. Breakfast, lunch, dinner. Activities. Hotel recommendations. Tours via Viator. Total budget estimate. Full 5-day plan in about 10 seconds. ( yes, 10 seconds, I was surprised too )

That's the full loop — from one plain-English sentence to a complete, bookable trip plan.

Live app: tripsync-ilao.onrender.com

GitHub: github.com/Tripsync-justmeMedia/tripsync

Stack: Python / Flask · Vanilla HTML/JS · SQLite · Render · Ollama · Gemini API · Groq

Demo

[GIF — toggle switching from Cloud AI to Gemma 4 Expert, search running, three destination cards appearing, planner loading full 5-day itinerary]

Switch to ✨ Gemma 4 Expert mode on the live site and search "7 days in Tokyo from Toronto." Three destination cards appear almost instantly. Click 🗺️ View Detailed Planner on any card and Gemma 4 builds a complete 5-day itinerary in about 10 seconds — day by day, meal by meal, activity by activity.

About a minute total from one sentence to a complete bookable trip plan. ( that still gets me every time )

Why Gemma 4 — The Intentional Choice

Every search on TripSync hits an AI API. Every destination card, every itinerary, every refinement — that's a call to a cloud model. Free tiers end. Traffic grows. And suddenly the thing you built for enjoyment is costing you money before it's made you a cent. ( we've all seen this movie )

Gemma 4 solved two problems at once:

The cost problem — Gemma 4 via the Gemini API free tier means zero marginal cost per query for real live users. No traffic spike will break the budget.

The privacy problem — travel data is personal. Budgets, travel dates, who you're travelling with, where you're going. The local Ollama mode means that data never leaves the user's machine. That's a real feature, not a marketing claim.

Why gemma-4-26b-a4b-it specifically:

The 26B model handles TripSync's strict JSON schema reliably. Every response needs to parse into destination cards with specific fields — city, country, match score, budget, visa info, highlights, flight estimates. Smaller models hallucinate the structure. The 26B gets it right consistently, and the advanced reasoning capability means the destination matching is genuinely good, not just keyword matching.

For local inference I pulled the full gemma4 model via Ollama (9.6GB) on an M1 MacBook with 16GB unified memory — the real limit of consumer hardware. Cold start is 30-45 seconds. Warm queries: under 1 second. Apple Silicon unified memory punches well above what the spec sheet suggests.

The Three-Tier Architecture

TripSync runs three AI modes, switchable with one toggle in the header:

☁️ Cloud AI — Groq with llama-3.3-70b. Fast, reliable, the default fallback.

✨ Gemma 4 Expert — gemma-4-26b-a4b-it via Gemini API. Full Gemma 4 quality for every live user with zero local setup required. This is the primary mode.

💻 Local AI (Ollama) — full gemma4 model running locally via Ollama. Zero data leaving the device. Requires local setup — see GitHub.

One toggle. All three live right now on the public site.

The Code

Gemma 4 via Gemini API with silent fallback:

GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY")

def call_gemma_api(prompt):
    if not GEMINI_API_KEY:
        logging.error("No GEMINI_API_KEY found")
        return call_groq(prompt)

    url = f"https://generativelanguage.googleapis.com/v1beta/models/gemma-4-26b-a4b-it:generateContent?key={GEMINI_API_KEY}"
    payload = {
        "contents": [{"parts": [{"text": prompt}]}],
        "generationConfig": {
            "temperature": 0.7,
            "maxOutputTokens": 2000
        }
    }
    try:
        resp = requests.post(url, json=payload, timeout=15)
        if resp.status_code in [429, 502, 503]:
            logging.warning(f"Gemma API {resp.status_code} — falling back to Groq")
            return call_groq(prompt)
        if resp.status_code == 200:
            data = resp.json()
            if "candidates" in data and len(data["candidates"]) > 0:
                return data["candidates"][0]["content"]["parts"][0]["text"]
        return call_groq(prompt)
    except Exception as e:
        logging.error(f"Gemma API error: {e}")
        return call_groq(prompt)

Local Gemma 4 endpoint:

@app.route('/api/tripsync-local', methods=['POST'])
def tripsync_local():
    data = request.get_json()
    prompt = build_prompt(data)
    result = call_ollama(prompt)
    if not result:
        return jsonify({"error": "Local AI unavailable — is Ollama running?"}), 503
    parsed = extract_json_safe(result)
    if not parsed:
        return jsonify({"error": "Could not parse response"}), 500
    return jsonify(parsed)

Frontend toggle — three modes, one click:

const modes = ['cloud', 'gemma', 'local'];
const labels = {
  cloud: { icon: '☁️', label: 'Cloud AI' },
  gemma: { icon: '✨', label: 'Gemma 4 Expert' },
  local: { icon: '💻', label: 'Local AI (Ollama)' }
};

function cycleAIMode() {
  const current = localStorage.getItem('tripsync_ai_mode') || 'cloud';
  const currentIndex = modes.indexOf(current);
  const next = modes[(currentIndex + 1) % modes.length];
  localStorage.setItem('tripsync_ai_mode', next);
  updateToggleUI(next);
}

Local Setup (For 💻 Local AI Mode)

# 1. Clone the repo
git clone https://github.com/Tripsync-justmeMedia/tripsync
cd tripsync

# 2. Install dependencies
pip install -r requirements.txt

# 3. Pull Gemma 4 via Ollama (9.6GB — grab a coffee)
ollama pull gemma4

# 4. Add your API key to .env
echo "GROQ_API_KEY=your_key_here" > .env

# 5. Run
python3 server.py

Open http://localhost:5001, switch to 💻 Local AI mode, search anything.

Hardware requirements: 16GB RAM minimum. M1/M2 Mac recommended. The unified memory architecture handles the 9.6GB model well. ( Intel Mac with 16GB will be slower but workable )

Honest Performance Notes

Gemma 4 Expert on the live site is actually faster than Cloud AI for destination search. ( did not expect that )

The local cold start is real — 30-45 seconds while Ollama loads the model into memory. After that it's instant. Like anything in life, the first run needs to fill all the empty spaces. After that it's just use and maintain.

Silent fallback is in place throughout — if Gemma API rate limits or times out, Groq catches it. Users never see an error.

What Gemma 4 Unlocked

Before this build TripSync had one AI mode. Every query left the user's machine. Free tier limits were a ceiling on growth.

After Gemma 4:

• Every live user gets Gemma 4 quality via the Expert mode — no local setup, no friction
• Users who want true local inference have a working path via Ollama
• The architecture scales — local for privacy, API for quality, cloud for speed and fallback
• Zero marginal cost on the Gemini free tier means traffic growth doesn't trigger an infrastructure bill Gemma 4 didn't just add a feature. It changed the architecture of the whole app and removed the cost ceiling that every solo builder worries about at 2am. ( and yes, I do worry about it at 2am, in my housecoat, in Minesing Ontario )

Try It Right Now

tripsync-ilao.onrender.com

1. Switch to ✨ Gemma 4 Expert mode using the toggle in the header
2. Search "7 days in Tokyo from Toronto" or anything you wish.
3. Click 🗺️ View Detailed Planner on any result
4. Watch Gemma 4 build a complete trip plan in about 10 seconds GitHub: github.com/Tripsync-justmeMedia/tripsync

William Commu — Just Me Media
Minesing, Ontario
@nightowl on DEV
Built at night. In a housecoat. With stubbornness. ✌️