Syntaxesia

Landing page
Female artwork prompt generation
Level 1 exhibit
Ground level exhibit
Art card display with placard
Art card display with placard

Inspiration

Syntaxesia is inspired by the idea that code has its own aesthetic language.

Developers talk about “elegant” functions, “messy” logic, or “clean” architecture, but those are aesthetic judgments. We were curious what would happen if we took that language literally. What if structure, repetition, and complexity weren’t just metaphors, but visual qualities?

We also wanted to explore curation. If we were building a museum for code, we felt it was important to think intentionally about who gets displayed. That led us to integrate works by women artists from The Met’s collection into the top-floor exhibition.

What it does

Users paste a GitHub repository URL, and Syntaxesia analyzes code files to generate a post-modern artwork. The most complex and substantial files are transformed into abstract visual pieces and displayed across the lower floors of a virtual museum.

Each piece is accompanied by a placard that connects artistic elements back to code quality and structure. An audio guide can read each placard aloud on demand, creating an immersive, gallery-like experience.

On the top floor, users can enter a prompt describing what they want to see. Syntaxesia uses that prompt to fetch artworks by women artists from The Met’s collection that match the description, allowing visitors to explore real art through the same interpretive lens as the AI-generated works.

How we built it

Built a React frontend using Vite, Tailwind CSS, and Framer Motion to create a smooth, museum-style exhibition experience.
Implemented a FastAPI backend to orchestrate the full AI pipeline and handle repository analysis, artwork generation, and data fetching.
Used Gemini to analyze structural code signals and convert them into weighted artistic directives.
Translated those metrics into highly constrained prompts for Imagen, which generates abstract post-modern artworks representing each file.

Per-file generation pipeline

For each file:

Cap the snippet length for stability and cost control.
Reject non-code input and return a fallback visual.
Auto-detect the programming language.
Extract structural signals such as loops, recursion, branching, nesting depth, imports, async usage, duplicate blocks, and magic numbers.
Compute extended metrics including cyclomatic complexity, comment density, and file length.

These metrics directly control the artwork.

Code-to-color system

We map structural elements to a fixed 360 degree color system:

Loops, conditionals, recursion, classes, async patterns, and more each correspond to specific hues.
The most dominant structural features become the most dominant colors.
We inject controlled accent colors for unpredictability.

Metric-driven composition

File length determines visual density (from ultra-minimal to fully saturated).
A computed “chaos score” determines intensity and mark-making aggressiveness.
Certain structural patterns determine medium:
- recursion -> layered collage
- heavy loops -> textile repetition
- many classes -> welded assemblage

Texture overlays

High complexity introduces stress fractures.
Duplicate blocks create near-identical repeated regions.
Excess try/catch introduces visible repair lines.
Unused code becomes sanded or erased layers.

Hard constraints

Full-bleed, edge-to-edge composition.
No text, symbols, or recognizable objects.
No default beige backgrounds or centered symmetry.
The piece must look like a physical artwork, not digital art.
Leveraged Gemini again to write curator-style museum placards that connect artistic elements back to the quality and structure of the underlying code.
Integrated ElevenLabs text-to-speech to provide an optional audio guide, reading placards aloud in a calm voice with play/pause controls.
Built a prompt-driven top-floor exhibition that queries The Met's public collection API to fetch artworks by women artists matching the user's description.

Challenges we ran into

Translating abstract code qualities like complexity, repetition, and structure into visual prompts without losing the essence of the source files.
Preventing image models from defaulting to generic “AI art” aesthetics (soft gradients, centered compositions, unintended text).
Managing rate limits and coordinating multiple APIs in a single generation pipeline.
Discovering that art by women artists is underrepresented in public museum datasets, which required more careful filtering and querying.

What we learned

Code structure can be meaningfully mapped to visual systems when you treat it as quantitative data rather than metaphor.
Prompt engineering becomes far more powerful when it is grounded in measurable metrics instead of vague stylistic descriptions.
Image models require strong negative constraints to avoid default behaviors.
The act of selecting which artists to highlight shapes the story the exhibition tells.

What's next for Syntaxesia

Support for larger repositories with smarter file grouping and thematic exhibitions.
Allowing users to save, share, and revisit past exhibitions.
Introducing collaborative or guided tours that compare multiple repositories side by side.
Exploring additional museum integrations and broader representation across artists and collections.