DEV Community

Cover image for I Built a Space App That Gives You Real-Time Planetary Data — Powered by Gemma 4, No Backend
Ishant gupta
Ishant gupta

Posted on

I Built a Space App That Gives You Real-Time Planetary Data — Powered by Gemma 4, No Backend

#devchallenge #gemmachallenge #gemma

Gemma 4 Challenge: Build With Gemma 4 Submission

I Built a Retro Space Mission Control Powered by Gemma 4 — and It Talks Like a NASA Commander 🚀

best

What happens when you give an open-source AI model the keys to the solar system?

Astronaut floating in space

I've been obsessed with space since I was a kid. But every space app I found was either too boring (just static facts) or too complex (needs a PhD to use).

So I built Cosmos Explorer — a retro, terminal-aesthetic space mission control center that runs entirely in the browser, powered by Gemma 4.

🔗 Live Demo → cosmos-explorer-ishant.netlify.app
🔗 Github

No downloads. No installs. Just open it and feel like you're at NASA.

The Idea: What if space exploration felt alive?

Static facts are boring. I wanted something that reacted — that felt intelligent, cinematic, and immersive.

That's where Gemma 4 came in.

Instead of hardcoding descriptions, I let Gemma 4 generate real-time mission briefings, reveal hidden planetary secrets, narrate the night sky like a planetarium, and compare worlds with the insight of an actual scientist.

Gemma 4 isn't just a feature in this app. It's the soul of it.

What is Cosmos Explorer?

It's a 7-in-one space dashboard built as a single HTML file:

Module What it does
🌍 Solar System Animated real-physics orbits, click any planet
🤖 Mission Briefings Gemma 4 generates NASA-style planet briefings
💡 Discovery Mode Gemma 4 reveals obscure scientific secrets
🛰️ Satellites Live mission data for Hubble, JWST, Voyager 1 & more
📡 ISS Tracker Real orbital physics, updates every second
🔭 Sky CAM Point your camera at the sky — Gemma 4 narrates it
⚖️ Planet Compare Gemma 4 analyzes any two worlds side by side

Let me walk you through each one.

Feature 1: The Solar System — Click a Planet, Get a Mission Briefing

Solar system view with Saturn selected and Gemma mission briefing

The moment you click a planet, Gemma 4 kicks in. No loading spinner for 5 seconds. Just instant, cinematic text that typewriters across the screen like a real mission computer.

Gemma's output for Saturn:

TARGET ACQUIRED: SATURN. Ring system spans 282,000 km yet only 10-100 
meters thick. Density lower than water — it would float. Enceladus moon 
sprays water geysers at 1,400 km/h. Titan has liquid methane lakes. 
145 moons confirmed.
Enter fullscreen mode Exit fullscreen mode

This isn't hardcoded. Gemma 4 writes this fresh every time. I just gave it a persona:

callGemma(
  'You are a NASA mission commander. Cite specific instruments and missions 
   by exact name. Begin with TARGET ACQUIRED:. Be cinematic. 2-3 sentences maximum.',
  `Generate a mission briefing for ${planetName}`
)
Enter fullscreen mode Exit fullscreen mode

That system prompt is doing a LOT of work. The model picks up on tone, format, and scientific precision instantly. That's the power of a 27B instruction-tuned model.

Feature 2: Discovery Mode — Secrets Gemma Reveals

Discovery mode showing Gemma revealing a hidden fact about Saturn's rings

Every planet has a Discovery Mode button. Press it, and Gemma 4 digs up something genuinely obscure — not the usual "Saturn has rings" stuff.

Real output for Saturn:

DISCOVERY: Saturn's rings are geologically young — only 10 to 100 million years old, formed when dinosaurs walked on Earth. Cassini measured ring mass and dust accumulation rates, shocking scientists who expected billion-year-old rings. The rings may disappear in 100 million years as Saturn's gravity pulls them inward.

I prompted it as a planetary scientist with access to mission data:

'You are a planetary scientist revealing a genuinely obscure fact. 
 Choose something highly specific. Cite missions, instruments, or datasets. 
 2-3 sentences. Begin with "DISCOVERY: "'
Enter fullscreen mode Exit fullscreen mode

What I love here: Gemma 4 doesn't just recite Wikipedia. It connects facts. The dinosaur comparison? That's Gemma making an analogy on its own.

Feature 3: Sky CAM — Your Camera Becomes a Planetarium

Sky CAM view showing Orion constellation overlay with Gemma AI analysis panel

This is the feature I'm most proud of.

Point your device camera at the sky (or just use the direction/tilt sliders), and Sky CAM overlays constellation lines in real time. But the real magic? Hit "GEMMA AI ANALYSIS" and watch this happen:

"Turn your gaze southward, where Orion strides across the winter sky — Betelgeuse blazing with the light of a star 700 times larger than our own Sun, a red supergiant in its final cosmic act. In 2019, Betelgeuse dimmed so dramatically that astronomers worldwide predicted imminent supernova — a reminder that even celestial constants can surprise us. The ancient Egyptians saw Orion as Osiris, god of death and resurrection, his belt stars aligned with the three pyramids of Giza."

I gave Gemma 4 a very specific persona here:

'You are a live planetarium narrator with deep astronomy expertise. 
 Be vivid, poetic, scientifically precise, and cinematic.'
Enter fullscreen mode Exit fullscreen mode

The prompt also feeds in the current compass direction, tilt angle, and which constellations are visible. Gemma uses all of that context to write something specific to what you're actually looking at.

This is where the 128K context window of Gemma 4 shines — I can pass rich contextual data and get nuanced, location-aware responses.

Feature 4: Planet Comparison — Gemma as Data Analyst

Planet comparison tool showing Mercury vs Mars with Gemma analysis

Pick any two planets, hit ANALYZE, and Gemma 4 breaks down the comparison like a scientist explaining it to a curious friend.

Mercury vs Mars:

SIZE CONTRAST: Mars is 1.4× wider than Mercury. DISTANCE: Mercury orbits at 57.9M KM from the Sun, while Mars orbits at 227.9M KM — a vast difference in solar energy received. TEMPERATURE: Mercury surface reads -180→430°C vs Mars's -125→20°C — Mercury and Mars represent extreme thermal environments.

The structured breakdown format comes entirely from the prompt. I didn't template the output — Gemma 4 just... organizes it that way when you ask it to.

Feature 5: The Space Q&A Chat

Space Q&A chat showing Gemma answering a question about the ISS

At the bottom of the Solar System view, there's a chat bar. Ask anything about space.

The system prompt is simple but effective:

'You are an expert space scientist. Answer questions about planets, moons, 
 satellites, black holes, and galaxies enthusiastically. Keep answers 2-4 
 sentences with specific numbers and surprising facts.'
Enter fullscreen mode Exit fullscreen mode

The "specific numbers" instruction is key — it stops Gemma from giving vague answers and forces it to ground responses in real data.

Why Gemma 4? The Model Selection Decision

Thinking hard

This was a deliberate choice, not a default.

I needed a model that could:

  1. Switch personas instantly — NASA commander, planetarium narrator, planetary scientist, data analyst. All in the same app.
  2. Produce short, precise outputs — The UI doesn't have space for essays. 2-3 sentences max.
  3. Work reliably via API — The whole app runs client-side, so I needed a stable, fast endpoint.
  4. Handle creative + factual tasks — Mission briefings need drama. Discovery Mode needs accuracy. Both at once is hard.

I went with gemma-4-27b-it (the 27B dense model via Google AI Studio's Gemini API).

Why 27B and not 2B or 4B?

The smaller models are amazing for edge/mobile deployment — but they struggled with the tonal range this app demands. A 4B model would give me a decent mission briefing or a poetic sky narration, but not both reliably. The 27B model handles persona-switching cleanly.

Why not the 26B MoE?

The MoE is built for high-throughput reasoning. My use case is lots of short creative + factual bursts, not long-chain reasoning. The dense 27B was the better fit here.

The killer feature: instruction following

Every Gemma 4 call in this app has a very specific system prompt. The model follows them precisely — it doesn't ramble, doesn't break character, doesn't exceed the sentence limit I set. That level of instruction-following made the entire UI feel polished.

Architecture (The Short Version)

The entire app is one HTML file. No frameworks, no build step, no server.

Cosmos Explorer
├── Canvas-based solar system (vanilla JS + requestAnimationFrame)
├── Real orbital mechanics (Kepler's equations)
├── ISS tracker (simulated TLE physics)
├── NASA images via JPL/APOD APIs
├── Space news via curated data
└── Gemma 4 via Gemini API (gemma-4-27b-it)
    ├── Mission briefings (on planet click)
    ├── Discovery Mode (on button press)
    ├── Sky CAM narration (on analyze)
    ├── Planet comparison (on analyze)
    └── Space Q&A (persistent chat)
Enter fullscreen mode Exit fullscreen mode

The Gemma integration is surprisingly clean — one callGemma() function that every AI feature uses:

async function callGemma(systemText, userText, maxTokens = 350) {
  const url = `https://generativelanguage.googleapis.com/v1beta/models/gemma-4-27b-it:generateContent?key=${API_KEY}`;
  const res = await fetch(url, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      system_instruction: { parts: [{ text: systemText }] },
      contents: [{ role: 'user', parts: [{ text: userText }] }],
      generationConfig: { temperature: 0.85, maxOutputTokens: maxTokens }
    })
  });
  const data = await res.json();
  return data.candidates[0].content.parts[0].text.trim();
}
Enter fullscreen mode Exit fullscreen mode

That's it. Every Gemma feature in the entire app flows through that one function. Clean, simple, powerful.

The Moment That Made Me Go "Whoa"

Mind blown reaction

During testing, I clicked on Earth and asked Gemma to generate a mission briefing.

It said:

"TARGET ACQUIRED: EARTH. The only confirmed biosphere in the known universe. Magnetic field generated by liquid iron outer core deflects solar wind at 400 km/s. 71% surface liquid water. 8.1 billion crew members aboard. Protect at all costs."

"8.1 billion crew members aboard. Protect at all costs."

I didn't prompt that. The model extrapolated from the NASA commander persona and added something genuinely moving. That's the difference between a language model and a creative language model.

That line stayed in the app.

What's Next

  • Exoplanet Explorer — Gemma 4 generating habitability reports for Kepler catalog planets
  • Mission Planner — Ask Gemma to plan a hypothetical mission to any planet
  • Night Sky Events — Gemma narrating upcoming eclipses, conjunctions, meteor showers
  • Offline mode — Gemma 4 2B/4B running locally via WebGPU (no API key needed)

The offline idea excites me most. The 4B model is small enough to run in the browser — imagine a space education tool that works with zero internet, perfect for schools and rural areas.

Try It Yourself

🚀 Live Demo: cosmos-explorer-ishant.netlify.app

Open it, click Saturn, hit Discovery Mode, then go to Sky CAM and press Gemma AI Analysis. That sequence will show you everything Gemma 4 can do in about 60 seconds.

Final Thought

People talk about AI like it's a search engine replacement. But Gemma 4 did something different here — it became a narrator. It gave this app a voice, a personality, a sense of drama.

Space is the most dramatic story humanity has ever told. I just needed an AI good enough to tell it.

Gemma 4 was that AI. 🌌

Built with vanilla JS, Canvas API, and Gemma 4 via Google AI Studio.

No frameworks were harmed in the making of this app.

Tags: #gemma4 #googleai #javascript #space #webdev #ai #opensource

Top comments (0)