Bondmap: AI-Powered Relationship Network That Maps How You're Connected to Everyone Using Gemma 4

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

What I Built

Bondmap is a social relationship network where anyone
can map their real-world connections — family, friends,
colleagues, romantic partners, long-distance relationships
— as a beautiful interactive visual graph.

The core idea: you add people and define how you know them.
Bondmap's AI (powered by Gemma 4) then reasons across your
entire network to explain hidden connections, trace
relationship paths, and suggest people you may know through
others.

The problem it solves: Most people have no clear picture
of how everyone in their life is actually connected.
LinkedIn shows work connections. WhatsApp shows contacts.
But nobody shows you that your college friend's brother
works with your current colleague — until now.

Key Features:

• Interactive D3.js network map with color-coded connections (purple = family, green = friends, blue = work, pink = romantic)
• Add people and define relationship types and labels (brother, mentor, childhood friend, long-distance etc)
• Ask Gemma 4 in plain English: "How am I connected to Rahul?"
• Upload a group photo — Gemma 4 vision analyzes who might be in it and suggests relationship types from context
• 1st, 2nd, and 3rd degree connection discovery
• Spring Boot backend + React frontend

Demo

[🔗 Live App — bondmap.web.app]

[📹 Video Walkthrough — paste your video link here]

Key demo moments:

1. Adding people with different relationship types
2. Asking "How am I connected to [person]?" and getting a warm natural language answer from Gemma 4
3. Uploading a group photo and watching Gemma 4 analyze the context

Code

[🐙 GitHub Repository — github.com/MangleshKumar1/bondmap]

Tech Stack:

• Frontend: React + Vite + D3.js
• Backend: Java Spring Boot
• Database: Firebase Firestore
• AI: Gemma 4 via Google AI Studio API
• Hosting: Firebase Hosting + Railway (backend)

How I Used Gemma 4

Model chosen: gemma-4-31b-it

I specifically chose the Gemma 4 31B Dense model for
three reasons:

1. Relationship Path Reasoning
When a user asks "How am I connected to Anjali?", Gemma 4
receives the entire relationship network as context and
traces the path across multiple hops — A knows B who knows C
— in a single inference call. This multi-hop graph reasoning
in natural language is exactly where the 31B model's
reasoning depth matters. A smaller model gave vague answers;
31B gave precise, warm, human-readable explanations every time.

2. The 128K Context Window
The entire relationship network — every person, every
connection, every label — is loaded into Gemma 4's context
window in one shot. No RAG, no chunking, no vector database.
Gemma 4 holds the whole graph in memory and reasons across
it holistically. For a social graph with dozens of people
and relationships, this is only possible with a large
context window.

3. Multimodal Vision for Photo Analysis
When a user uploads a group photo, Gemma 4 analyzes the
image — reads the occasion, body language, and positioning
— and suggests who these people might be and what
relationship types they have. This multimodal capability
is native to Gemma 4 and required no additional models.

Why not a smaller Gemma 4 model?
I tested gemma-4-e4b-it (4B) for the connection reasoning
task. The responses were correct but shallow — it couldn't
reliably trace 2nd and 3rd degree connections across a
larger network. The 31B model handled complex multi-hop
paths accurately every time, which is the core AI feature
of the app.

Architecture:
User asks question
↓
React frontend → Spring Boot API
↓
AIService.java builds prompt:
systemInstruction = rules + full network graph
user message = the question only
↓
Gemma 4 31B reasons across entire graph
↓
Clean natural language response
↓
Displayed in UI

Gemma 4 is not a wrapper here — it IS the relationship
intelligence engine. Every insight, every path explanation,
every photo analysis runs through Gemma 4.