Findtheclosesttailwindcolors V2
💻 Sobre o projeto
Tailwind CSS é um framework CSS que visa a utilidade, para isso, ele fornece diversas classes utilitárias. Acerca de cores, o Tailwind apresenta uma grande lista de opções, o que facilita a construção de um projeto. Entretanto, ao desenvolver uma aplicação, é comum que o desenvolvedor possua uma cor que deseja utilizar no projeto e que não está na paleta do Tailwind, logo, precisa encontrar uma cor que seja semelhante a desejada. (ainda que seja possível adicionar cores personalizadas, a utilização da própria paleta acaba sendo mais fácil e rápida).
Foi com esse propósito que o "Find the closest Tailwind CSS Colors" surgiu, tornando-se uma ferramenta que todo desenvolvedor Tailwind precisa. Fácil e intuitivo, nesse site você pode inserir uma cor em código Hex/RGB ou selecioná-la de um seletor de cores e obter instantaneamente as cores mais próximas da paleta Tailwind. Além disso, é possível ver sugestões de cores próximas dadas pelo Gemini, IA do Google, que, em diversos casos, sugere cores melhores do que as encontradas pelos cálculos.
Você pode acessar/usar a ferramenta clicando aqui.
Nota: Para ampliar o alcance da ferramenta, o projeto foi escrito em inglês. Já a documentação, em português, para facilitar a análise dos avaliadores da Alura.
Sobre a versão 2 e a inserção da Google Gemini AI no projeto
Por mais que o principal problema citado tenha sido solucionado no lançamento da v1, ainda havia uma questão que me tirava o sono.
Como o "Find the closest Tailwind CSS Colors" se utiliza de cálculos matemáticos para encontrar as cores mais próximas, cores menos saturadas faziam com que o resultado fossem, principalmente, de diversos tons de cinza(como mostrado na imagem a seguir). Porém, como solucionar isso?
Foi, então, assistindo às aulas da Imersão de Inteligência Artificial com o Google Gemini da Alura que me veio a solução. O Gemini, IA do Google, seria capaz de identificar a qual cor determinada tonalidade pertence, e, consequentemente, encontrar cores próximas melhor do que os cálculos matemáticos. (a imagem abaixo mostra as cores mais próximas encontradas pelo Gemini a partir da mesma cor do exemplo anterior)
A partir disso, um botão foi adicionado abaixo dos inputs de cor para visualizar as sugestões de cores dadas pelo Gemini. Dessa forma, a versão 2 do "Find the closest Tailwind CSS Colors" surgiu, criando um pequeno botão, mas resultado de um grande avanço tecnológico.
Você pode acessar/usar a ferramenta clicando aqui.
🔧 Executando localmente
1. Clone o repositório
git clone https://github.com/GabrielCenteioFreitas/FindTheClosestTailwindColors-v2.git
2. Entre na pasta do projeto
cd FindTheClosestTailwindColors-v2
3. Instale as dependências
npm install
4. Crie o arquivo .env e adicione sua API Key dessa forma:
# .env
REACT_APP_API_KEY="insira aqui sua API Key"
5. Inicie o servidor de desenvolvimento
npm start
6. Acesse http://localhost:3000 para visualizar a aplicação
🚀 Tecnologias
Esse projeto foi desenvolvido com as seguintes tecnologias:
- ReactJS
- Create React App
- Javascript
- HTML
- CSS
- Google Gemini API
🤝 Contribuições
Issues e pull requests são muito bem-vindos!
👨🏻💻 Autor: Gabriel Centeio Freitas
