PaletteMind is an AI-powered tool that translates abstract themes and ideas into functional, five-color palettes. It allows designers and creators to bridge the gap between language and color theory, generating harmonious color schemes complete with hex codes from simple text prompts like "1970s sci-fi nostalgia."
Inspiration
The project was inspired by the creative challenge of converting abstract concepts into visual reality. Often, a specific feeling, era, or idea is hard to translate into a concrete color scheme. I wanted to create a simple, intuitive web application that could use the power of large language models to act as a creative partner for designers, developers, and artists.
How It Was Built
The entire application was built from the ground up using vanilla HTML, CSS, and JavaScript, without any external frameworks.
The process involved several key stages:
Initial UI: I started by creating a clean, user-friendly interface with an input field for the theme and a display area for the generated color swatches.
API Integration: The core challenge was integrating with an AI model. The initial attempt was with the Hugging Face Inference API, which led to a significant debugging journey involving persistent 404 errors.
Troubleshooting: After extensive troubleshooting that included direct curl commands, network log analysis, and testing multiple models, we determined the issue was a network or account-specific block.
Pivoting to Google AI: To solve the blocking issue, the project was migrated to the Google AI Gemini API. This required rewriting the API call function to match Google's endpoint, request structure, and response format.
Feature Enhancement: Once the core functionality was working, additional user-friendly features were added, including a click-to-copy function for the hex codes and a persistent light/dark mode theme toggle.
Security: To protect the API key, the final architecture was designed around a serverless function acting as a secure backend proxy, ensuring the key is never exposed on the client-side.
Challenges & Learning
The biggest challenge was diagnosing the persistent 404 Not Found errors from the Hugging Face API. This was a valuable real-world lesson in debugging, teaching me that the problem isn't always in the code. It forced me to learn how to use command-line tools like curl, analyze network headers, and understand how CDNs and regional blocks can affect API accessibility.
Through this project, I learned how to securely integrate with two different major AI platforms, implement modern front-end features with vanilla JavaScript, and the critical importance of protecting API keys by using a backend proxy.
Log in or sign up for Devpost to join the conversation.