DEV Community

Cover image for APOD Mood Gallery: A visually rich, AI-powered interactive astronomy gallery
Bibhu Pradhan
Bibhu Pradhan

Posted on

APOD Mood Gallery: A visually rich, AI-powered interactive astronomy gallery

DEV Weekend Challenge: Community

This is a submission for the DEV Weekend Challenge: Community

The Community

This project was built for the community of space enthusiasts, astronomy lovers, and astrophotography fans who follow NASA's Astronomy Picture of the Day (APOD). It serves anyone who wants to explore the cosmos not just scientifically, but through visual aesthetics, emotional moods, and personalized collections.

What I Built

I built the APOD Mood Gallery, a Progressive Web App (PWA) that takes NASA's iconic APOD archive and transforms it into an interactive, visually stunning, and intelligent experience. The application includes the following features:

  • AI Image Analysis: Completely private, in-browser image analysis using TensorFlow.js to identify visual characteristics and classify images by their "mood".

  • Dynamic Color Palettes: Automatic extraction and display of beautiful color palettes from astronomical imagery, utilizing Web Workers to maintain a snappy UI.

  • 3D Solar System & Exoplanets: Interactive exploration of real-time planetary positions using 3D rendering.

  • Personalized "For You" Feed: A local recommendation engine that learns what types of space images you appreciate over time.

  • Mood Board Creator: A tool to curate favorite images into a visual mood board that can be exported locally via PDF or ZIP.

Demo


✨LIVE DEMO: APOD Mood Gallery

Code

GitHub logo bibhupradhanofficial / APOD-Mood-Gallery

A visually rich, AI-powered interactive gallery using NASA’s Astronomy Picture of the Day (APOD) API, featuring mood classification, color palette extraction, and immersive space exploration.

🌌 APOD Mood Gallery

React Vite Tailwind TensorFlow.js Three.js

NASA Astronomy Pictures - Explore the cosmos through moods, palettes, and AI-powered collections.

APOD Mood Gallery takes NASA's iconic Astronomy Picture of the Day (APOD) archive and transforms it into an interactive, visually stunning, and intelligent experience. Using client-side machine learning and advanced 3D rendering, it analyzes celestial images to extract dominant color palettes, classify emotional moods, and provide personalized space discoveries.

✨ Features

  • PWA Support: Installable Progressive Web App with offline capabilities and background APOD synchronization.
  • AI Image Analysis: Completely private, in-browser image analysis using TensorFlow.js (MobileNet). Identifies visual characteristics and content to classify images by "mood".
  • Dynamic Color Palettes: Automatically extracts and displays beautiful, harmonious color palettes from astronomical imagery using Web Workers to keep the UI snappy.
  • 3D Solar System & Exoplanets: Explore real-time planetary positions using astronomy-engine and react-three-fiber.
  • Personalized "For You" Feed: A local recommendation…

How I Built It

The application was built with a strong focus on client-side performance, intelligent processing, and modern web standards:

  • Frontend Framework: Developed using React 19 and Vite for a fast, modern development experience.
  • Styling: Crafted with Tailwind CSS, PostCSS, and AutoPrefixer.
  • Machine Learning: Integrated @tensorflow/tfjs and the MobileNet model (@tensorflow-models/mobilenet) to run image classification directly in the browser.
  • 3D Rendering: Built the interactive space environments using three, @react-three/fiber, and @react-three/drei, combined with astronomy-engine for accurate celestial math.
  • State & Performance: Utilized custom local storage services and Web Workers for parallel processing of image pixels to prevent main-thread blocking.

Top comments (0)