Generate Stunning Colors with AI: A Flutter & Firebase Vertex AI App

Want to effortlessly create and explore colors using just your words? This guide introduces "Colorist," a Flutter application that uses the power of Google's Gemini AI and Firebase Vertex AI to translate your natural language color descriptions into vibrant visual representations. Learn how to set it up and discover its amazing features for color exploration and design.

Transform Your Words into Colors: An App Powered by Gemini AI

Colorist bridges the gap between creative expression and technical color specifications. Ever struggled to articulate the exact shade you envision? Simply describe the color you want, and let Gemini handle the rest! This Flutter-based application is more than just a color generator; it's a tool for understanding how Large Language Models (LLMs) interpret and manipulate color data.

Key Features:

• Natural Language to Color: Describe any color in plain language and watch the app generate it.
• Real-time Color Visualization: Instantly see the color you described displayed in a dedicated rectangle.
• Gemini LLM Integration: Uses Gemini AI via Firebase Vertex AI with tool calls to process your color requests.
• Detailed Color Information: Get the RGB values and hex code of the generated color for precise use.
• Color History: Quickly access the last 10 generated colors as clickable thumbnails in your history.
• LLM Interaction Logging: See a live stream of the LLM's thought process, including tool calls and responses.
• Dynamic Context Updates Interacts with your color history to provide the most accurate color representations.
• Streaming Status Indicator: Visual cues that let you know when loading is complete.

Getting Started: Firebase Vertex AI Setup

To use Colorist, you'll need a Firebase project with access to the Gemini API. The easiest way to accomplish this is to follow the official guide: Get started with the Gemini API using the Vertex AI in Firebase SDKs.

Once you have your project configured, use the FlutterFire CLI tool to configure your Flutter project:

1. Install FlutterFire CLI:

   flutter pub global activate flutterfire_cli
   

   Copy
2. Configure Your Project:

   rm lib/firebase_options.dart
   flutterfire configure
   

   Copy

This process links your Flutter application to your Firebase project, enabling the app to communicate with the Gemini API.

Platform Support: Use Colorist Anywhere

Colorist is designed for cross-platform compatibility, ensuring you can explore colors on your preferred device.

• Desktop: macOS, Windows
• Mobile: iOS, Android
• Web: Accessible on both desktop and mobile web browsers.

App Architecture and UI Design

Colorist leverages a modern technology stack for a robust and responsive user experience.

• Framework: Flutter/Dart
• LLM: Gemini via Firebase Vertex AI (chat turn by turn with function calling)
• State Management: Riverpod
• Data Modeling: freezed for immutable data classes
• Firebase Configuration: FlutterFire CLI
• Responsive Design: Adaptive layouts

User Interface Layouts

The application adapts its layout based on the platform:

Desktop Layout (Split-Screen):

• Left Side (Interaction Area):
  • Color display rectangle
  • RGB value and hex code labels
  • History strip of thumbnails (last 10 colors)
  • Chat interface with streaming state indicators
  • Text input field for color descriptions
  • Submit button
• Right Side (Log Area):
  • Real-time display of LLM interactions
  • Tool calls and responses visualization
  • Formatted log entries for debugging

Mobile Layout (Tabbed):

• The same elements as the desktop layout are organized into two tabs for a cleaner mobile experience, with finger interactions in mind.

By understanding the interplay between natural language prompts and AI-generated color data, you can gain valuable insights into the capabilities of LLMs and their potential applications in design and beyond. Start exploring the world of colors today!