Create designs based on your interests and taste.

I wanted to help my wife kickstart her print-on-demand business. She often has a concept or theme in mind, but struggles to come up with specific design ideas. Finding out "what's popular" based on a certain concept is difficult and time consuming. I wanted to build her something to inspire her designs.

I made the user flow as simple as possible. The user simply just have to type in some ideas they had in mind and the tool will automatically figure out designs related to those ideas for them.

Under the hood, the process is split into multiple steps:

1. After the user types in the inspiration, LLM extracts the entity type, filters, signals and output from their enquiry.
2. Keywords from entities and tags are extracted from the output of Step 1 so that IDs can be retrieved using Qloo's Entity Search and Tag Search APIs using keywords.
3. IDs for entity and tags are combined with the analysis output of Step 1. This replaces the keywords for entities and tags with IDs.
4. The combined result from Step 3 is mapped to real parameters of Insights API
5. Insights API is called using the parameters
6. The insights from Qloo and the original user input are combined to create image generation prompts
7. Images are generated from the prompts

This app was built using the following core technologies:

Qloo API:

• Provides insights on related data based on user "taste".

Gemini:

• Analyses text and translate the information the something that Qloo API can understand.
• Transforms outputs to generate prompts to create designs.
• Generates images based on automatically generated prompts

Supabase:

• Used to store generates images and data. (Side Note: Firebase can also be used to support this but they've recently removed storage options in the free-tier)

Firebase:

• Provides a secure backend to integrate with Gemini and keep API keys safe.
• App Check is used to protect against spam and API misuse. This ensures that I do not exceed their free quota.

• Due to the unpredictable nature of LLMs, you sometimes get parsing errors on some steps. This happens when the LLM produces an output that is not a JSON object.

• Refine prompts so that it can consistently return JSON objects
• Use different models to produce higher quality images
• Extend the tool to show insights such as how to market the images

1. Set up a Firebase project.
2. Follow these steps to set up reCAPTCHA v3 for App Check
3. Follow these steps to enable AI Logic in Firebase

1. Sign up for Supabase and create project

Use docs for reference: https://supabase.com/docs/guides/database/tables

1. Create a database table called "generated-images" with the following schema
2. Set up table policy to enable table insertion
3. Set up table policy to enable table selection

1. Navigate to "Authentication"
2. Open Configuration > Sign In / Providers
3. Enable "Allow anonymous sign-ins"

See docs for reference: https://supabase.com/docs/guides/storage/buckets/creating-buckets

1. Create a bucket called "trendprints-images"
2. Make sure that Public is enabled
3. Open Configuration > Policies
4. Create a bucket policy for "trendprint-images" with the following configuration:

1. Create a .env file with the following contents

    VITE_FIREBASE_API_KEY=<CHECK_FIREBASE_CONSOLE>
    VITE_FIREBASE_AUTH_DOMAIN=<CHECK_FIREBASE_CONSOLE>
    VITE_FIREBASE_PROJECT_ID=<CHECK_FIREBASE_CONSOLE>
    VITE_FIREBASE_STORAGE_BUCKET=<CHECK_FIREBASE_CONSOLE>
    VITE_FIREBASE_MESSAGING_SENDER_ID=<CHECK_FIREBASE_CONSOLE>
    VITE_FIREBASE_APP_ID=<CHECK_FIREBASE_CONSOLE>
    VITE_FIREBASE_MEASUREMENT_ID=<CHECK_FIREBASE_CONSOLE>
    VITE_RECAPTCHA_SITE_KEY=<CHECK_RECAPTCHA_SITE_ID>
    VITE_QLOO_API_URL=
    VITE_QLOO_API_KEY=
    VITE_SUPABASE_URL=<CHECK_SUPABASE_DASHBOARD>
    VITE_SUPABASE_ANON_KEY=<CHECK_SUPABASE_DASHBOARD>
   

2. Define values for the environment variables in the .env file
3. Run npm install
4. Run npm run dev