PalettePro
Overview
PalettePro is an AI-powered tool that can provide recommendations for any color selected by users. An intuitive color picker allows users to select a color from a color wheel, or enter hex, rgb, or hsl values manually. A form guides users to provide additional details, utilizing dropdown menues with pre-populated options as much as possible in order to ensure quality prompt construction. This structure also helps to provide recommendations that are as consistent as possible. Recommendations are displayed as a full text response from the AI model, accompanied by color swatches for the originally selected color as well as any recommended colors.
PalettePro External Link
Features
Color Picker
PalettePro uses a customizable color picker. The user may choose a color from the color wheel and modify the shade, hue, saturation, and light of the chosen color. The user may input rgb, hex, or hsl values to generate a color. The chosen color is used in the prompt for the AI response.
Color Details Form
After selecting a starting color, the user enters additional details in a simple form which will help to construct the prompt sent to the Groq AI API. This ensures that the color recommendations provided by PalettePro are as relevant to the user's use case as possible. The user must enter a context using the first field on the form; this form field asks the user what they're using the selected color for, and they select options from a dropdown menu ("other" is available as an option if none of the preset options apply). Additional form fields ask users what color codes they would like their recommendation in, how many recommended colors they would like, whether they need a specific harmonious color scheme (with dropdown options to select from), whether they are trying to evoke a specific mood or emotion, and a final text field to provide any additional information that might be helpful.
Groq AI
The full text of the AI-generated color recommendation is displayed below the Color Details form. Additionally, color swatches below the recommendation display the original selected color as well as all recommended colors. Color swatches are labeled in the color code format selected by the user (defaulting to hex codes if the user did not specify).
PalettePro uses Artificial Intelligence (AI) to recommend the perfect color combinations for your use cases. It is powered by Groq's Language Processing Unit (LPU) Inference Engine, which offers industry-leading compute speed, quality, and energy efficiency. The specific Large Language Model (LLM) utilized by PalettePro is Meta's llama3-8b-8192.
You can learn more about Groq HERE.
You can learn more about Meta's llama3-8b LLM HERE.
Dependencies
- React
- React Color
- Groq AI API
- React-three/fiber
- React-three/drei
- React Icons
- Framer Motion
- Vite
- Vercel
Color Reference
| Color | Hex |
|---|---|
| background Color | |
| primary Color | |
| secondary Color | |
| accent Color |
Our Team
- Jonathan Mendez: GitHub / LinkedIn / Website
- Brian Slaby: GitHub / LinkedIn
- Tanutsapon Jinaongkan : GitHub / LinkedIn
- Matthew Neie : GitHub / LinkedIn / Website
- Sushmita Ghosh: GitHub / LinkedIn
Acknowledgements
Running This Project Locally
To install and run the project locally, follow these steps:
Prerequisites
📙 Node.js and npm (Node Package Manager) should be installed on your machine.
1. Clone or Download the Repository:
Open your terminal or command prompt. Use the git clone command to clone the project repository:
https://github.com/chingu-voyages/v49-tier2-team-182. Navigate to the Project Directory:
Use the cd command to move into the project directory:
cd project-directory-name3. Run the following command to install project dependencies using npm:
Run the following command to install project dependencies using npm:
npm install4. Start the Development Server
After the dependencies are installed, start the development server:
npm run dev5. View the Project:
Once the development server is running, open your web browser and visit:
http://localhost:3000