Punk ID is an AI image classifier that explores how machine learning recognizes and distinguishes speculative punk aesthetics such as Cyberpunk, Steampunk, Solarpunk, and Dieselpunk. I initially considered art-historical movements like Art Deco, Art Nouveau, Baroque, and Rococo, but those styles rely more on historical and contextual nuance, whereas punk genres have stronger visual distinctions better suited to image-based AI classification.
Punk ID: Teachable Machine & p5.js Project
Project Details
| Categories | SMC |
|---|
Context
Categories
I trained the AI using curated image datasets from four speculative “punk” genres. Each category was built using visually distinct reference images to test how machine learning recognizes patterns, aesthetics, and similarities between different retrofuturist styles.
- Cyberpunk: A dystopian future defined by neon lighting, advanced technology, dense urban environments, and dark, high-tech visuals.
- Steampunk: A retrofuturist style inspired by Victorian-era machinery, featuring brass, gears, steam-powered technology, and industrial craftsmanship.
- Solarpunk: An optimistic eco-future focused on sustainability, greenery, renewable energy, and nature integrated with high-tech design.
Process & Findings
I collected images from Pinterest for each genre, including environments, machinery, clothing, concept art, and color palettes, then used them to train an AI model in Teachable Machine to recognize different speculative punk aesthetics.
First Test: Cyberpunk
I uploaded a clearly recognizable Cyberpunk-style image featuring neon lighting, futuristic technology, and a dark sci-fi aesthetic. The AI was able to correctly identify the image as Cyberpunk with 100% confidence, showing that the model successfully recognized key visual characteristics from the training dataset.
I uploaded another Cyberpunk-style image that was a magazine cover with cybernetic body features. However, the AI incorrectly labeled it as Steampunk. This showed that the model was relying too heavily on the brown color palette instead of recognizing the technological characteristics of Cyberpunk imagery. To fix this, I needed to include more Cyberpunk images with warmer tones, magazine-style layouts, portraits, and different lighting conditions so the AI focuses more on futuristic design elements rather than color alone.
Cyberpunk Dataset Adjustments
To improve the model, I expanded the Cyberpunk dataset with a wider range of images outside of just neon environments. I added more images focused on cybernetic body parts, robotic enhancements, futuristic fashion, and character design so the AI could better recognize the technological features of Cyberpunk imagery instead of relying mainly on the color palette.
Updated Cyberpunk Results
After expanding the Cyberpunk dataset with more visual variety and stronger cybernetic design references, the AI was able to correctly identify the same image as Cyberpunk with 97% confidence. This showed that adding more diverse training examples helped the model focus on technological and stylistic features rather than relying mainly on the color palette.
p5.js Integration
I integrated the Teachable Machine model into p5.js to allow users to upload their own images and generate mood boards based on speculative punk aesthetics identified within the image.
• ml5.imageClassifier() connects the trained Teachable Machine model into p5.js.
• classifier.classify() analyzes uploaded images and predicts the closest punk aesthetic.
• loadImage() dynamically generates mood boards from the AI prediction.
• drawCroppedImageTop() crops and aligns images into a consistent grid system.