---
title: Steam Graphic Universe Explorer
emoji: 🌌
colorFrom: blue
colorTo: yellow
sdk: gradio
sdk_version: 5.9.1
pinned: false
---

# 🌌 Steam Graphic Universe Explorer

The app maps the visual landscape of over 9,800 Steam games, allowing users to discover new titles based purely on art style, composition, and mood boards instead of traditional text genres. We set out to build this by extracting storefront box art, converting those images into high-dimensional latent vectors, and segmenting them into distinct aesthetic neighborhoods. By pairing this visual-to-visual backend matching system with a premium, minimalist front-end dashboard, we created a seamless web experience that redirects players straight to their next gaming destination.

---

## 📦 Dataset Origin & Original Features
The engine is built upon a subset of the widely recognized, open-source **Steam Games Dataset** (initially compiled and hosted by contributor `biga666` on the Hugging Face Hub). 

### Feature Lineage
The original dataset tracks comprehensive structural metadata pulled directly from the Steam Web API via automated scraping routines. Its feature engineering origin includes:
* **Identification Core:** `appid` (unique integer matching Steam’s internal directory storefront routing) and `name` (the application's official global retail title).
* **Engagement Metrics:** Operational telemetry tracking user interest, including total recommendation volume, pricing models, and community review scores.
* **Visual Identity Assets:** The `header_image` text field, which hosts the live CDN URL pointing to the official horizontal marketing banner artwork assigned by game developers for their storefront listings.

---

## 📊 Exploratory Data Analysis (EDA) Process
Before building the recommendation pipeline, a thorough Exploratory Data Analysis (EDA) was performed on a filtered subset of the top 10,000 games ranked by recommendation volume from the raw dataset. The primary goal was to run structural sanity checks, map out feature distributions, and uncover potential anomalies or data-quality issues that could disrupt or skew the downstream machine-learning pipeline (the Vision Embedding engine).

### Key Notes from EDA:
* **Zero Null Values & Duplicate Pruning:** The clean dataset structure showed no missing values (`NO NULL FOUND`). However, 91 duplicate records caused by historical game updates were successfully identified and removed to protect the integrity of the embedding matrix.
* **Removal of Non-Game Software:** The data audit flagged and eliminated utility entries such as video editing suites and design software masquerading as games, refining the final collection to a pure game ecosystem.
* **Extreme Popularity Skew:** The distribution of user recommendations is heavily skewed due to industry mega-hits (like Counter-Strike 2, GTA V, or PUBG). These titles form massive vertical peaks climbing past 100,000 to over 1,000,000+ recommendations.

![Distribution of Game Popularity and Recommendation Volume](eda_popularity_distribution.png)

* **Demand Independence from Price:** While developers rarely select random retail price points, these mega-hits span dynamically from entirely free-to-play ($0) up to premium configurations ($60). This visually proves that high market demand on Steam operates independently of a game's retail entry price, justifying a purely visual similarity model rather than one restricted by pricing metadata.

![Steam Price vs User Recommendation Density Scatter Plot](eda_price_vs_demand.png)

* **Genres distribution:** The final refined dataset maintains a highly diverse and well-distributed mix of game categories, which we mapped in a distribution plot to guarantee our visual recommendation engine spans across the entire creative spectrum of Steam rather than over-indexing on a single dominant genre..
![Game genres distribution plot](genres.png)


---

## 🧠 Model & Embedding Strategy
* **Model Selection:** We integrated OpenAI's **CLIP** (`clip-vit-base-patch32`) multimodal framework rather than a standard convolutional classifier. CLIP's dual contrastive training gives its vision tower an unparalleled, semantic understanding of abstract concepts, lighting variations, micro-tonalities, and artistic genres.
* **Embedding Extraction:** We bypassed the standard 512-dimensional compressed output shortcut to preserve fine-grained stylistic nuances. Instead, we extracted the raw, unprojected **768-dimensional vision pooler states** (`pooler_output`), maximizing our spatial resolution.

---

## 🌌 Dimensionality Reduction & Density Clustering
* **UMAP Projection:** We used Uniform Manifold Approximation and Projection (UMAP) to downsample the dense 768-dimensional space. This step is mathematically necessary to eliminate the curse of dimensionality while strictly preserving both local neighboring structures and global geometric groupings.
* **HDBSCAN Segmentation:** Hierarchical Density-Based Spatial Clustering of Applications with Noise (HDBSCAN) was selected to segment the latent space. Unlike K-Means, HDBSCAN doesn't force data into arbitrary circular boundaries or require pre-defined cluster numbers; it organically identifies clusters based on varied spatial densities and isolates unusual art styles cleanly as background noise.

![PCA before clustering](pca_initial.png)
![UMAP Latent Space Neighborhood Clustering Map](hdbscan_clusters.png)


### Cluster Reasoning & Aesthetic Neighborhood Analysis:
* **Cluster 0:** This isolated cluster groups sports and simulation titles characterized by real-world athlete photography, vibrant monochrome backgrounds, and large, centered 3D branding typography.
* **Cluster 1:** Representing the vast majority of the dataset, this core continent captures mainstream gaming aesthetics ranging from cinematic action shots and gritty realism to high-contrast digital illustrations.
* **Cluster 2:** This visually distinct group isolates traditional East Asian art styles, utilizing calligraphic ink brushwork, parchment textures, and specialized cultural typography layouts.
* **Cluster 3:** This neighborhood highlights stylized 2D illustration styles, focusing heavily on anime, manga, and cel-shaded character designs with vibrant pastel or neon color framing.
* **Noise (-1):** These outlier titles consist of highly unique, dark, or erratic promotional art layouts that HDBSCAN purposefully left unclustered to preserve the purity of the primary design categories.


## 💾 Data Architecture & Core Palette Motif
* **Data Storage Optimization:** The system stores vectors and metadata in a production **Apache Parquet database**. Parquet natively preserves nested, high-dimensional floating-point arrays directly inside continuous memory blocks, ensuring rapid I/O processing and zero vector data corruption during live runtime execution.
* **Design Palette Motif:** The interface utilizes an **impeccable minimalist aesthetic** inspired by modern landing page architecture. it pairs a bold abyssal blue interaction circle and clear instructions stripping away traditional data-science clutter to focus entirely on visual-first exploration.

![Initial idea for the layout](layout_preview.jpeg)
![Minimalist Ocean App User Interface Mockup](interface_preview.png)