How We Built an Automated Content Pipeline for Infinite Coloring Pages

From Manual Task to Automated Magic

At ColorCraft.ai, our goal is to provide a massive, ever-growing library of free coloring pages. But how do you scale content creation from a handful of pages to thousands without a massive team? The answer for us was automation, powered by a modern stack: Google's Gemini API, Supabase, and a couple of clever Node.js scripts.

This post is a developer-focused look at how we built a content pipeline that takes a simple idea and automatically turns it into a ready-to-download coloring page, complete with optimized images and PDFs.

Our Automated Content Strategy: A 3-Step Overview

The entire workflow can be broken down into three core stages:

1. AI-Powered Idea Generation: We use a prompt to ask Google's Gemini to generate a structured JSON file containing dozens of creative ideas for coloring pages based on a theme.

2. Seeding the Generation Queue: A Node.js script reads the JSON file and uploads the data into a pending_generations table in our Supabase database.

3. Automated Asset Creation: A second, more powerful script works through the queue, using the data to generate images, watermark them, create PDFs, and upload the final assets back to Supabase Storage.

Let's break down each step.

Step 1: Generating Content Ideas with Gemini

The process starts with a simple, structured prompt to Gemini. We ask it to return a JSON array of objects, with each object representing a single coloring page idea. This gives us a consistent, machine-readable foundation to build upon.

For a batch of Pokémon pages, the output from Gemini looks like this:

``json

[

{

"category": "pokemon",

"tags": ["pikachu", "electric", "cute"],

"title": "Pikachu",

"description": "A cute Pikachu ready for some color.",

"prompt": "Coloring page of a cute Pikachu, simple lines, white background",

"model": "gemini-1.5-pro"

},

{

"category": "pokemon",

"tags": ["charmander", "fire", "starter"],

"title": "Charmander",

"description": "A fiery Charmander waiting to be colored.",

"prompt": "Coloring page of a happy Charmander, simple lines, white background",

"model": "gemini-1.5-pro"

}

]

`

This file gives us everything we need for the next step: the page title, a pre-written prompt for image generation, and relevant metadata like categories and tags for SEO.

Step 2: Seeding the Database with Supabase

Once we have our JSON file, we use a "seeding" script to get this data into our database. The scripts/seed-pokemon-pages.cjs script connects to our Supabase instance, reads the JSON, and transforms each object into a row to be inserted into our pending_generations table.

The script handles important data normalization tasks, such as creating URL-friendly slugs from titles using a helper function:

`javascript

function slugify(text) {

return text.toString().toLowerCase()

.replace(/\s+/g, '-') // Replace spaces with -

.replace(/[^\w\-]+/g, '') // Remove all non-word chars

.replace(/\-\-+/g, '-') // Replace multiple - with single -

.replace(/^-+/, '') // Trim - from start of text

.replace(/-+$/, ''); // Trim - from end of text

}

`

It then maps over the array from the JSON file, expanding the basic data into a full record that matches our table schema, including pre-generating metadata for SEO and setting the initial status to pending.

`javascript

const jobs = pages.map((page) => ({

category: page.category,

category_slug: slugify(page.category),

page_name_base: page.title,

page_slug: slugify(page.title),

ai_image_prompt_suffix: page.prompt,

keywords_addon: page.tags,

// ... other fields like meta_title, meta_description, etc.

status: 'pending',

model_name: page.model

}));

// Insert the jobs into Supabase

const { data, error } = await supabase

.from('pending_generations')

.insert(jobs)

.select();

`

With one command, we can queue up hundreds of pages to be generated.

Step 3: Automated Asset Creation

This is where the real magic happens. Our scripts/bulkGenerate.cjs script runs on a schedule. It queries the pending_generations table for any jobs with a pending status and processes them one by one.

For each job, the script performs several actions:

1. Image Generation: It constructs a detailed prompt and uses an AI image generation model to create a black and white line art image.

2. Watermarking: Using the sharp library, it adds our "ColorCraft.AI" watermark to the bottom-right corner of the image.

3. High-Quality PNG Creation: It processes the image and saves it as a high-quality PNG. We don't need to over-optimize it here, because we let Vercel's Image Optimization handle that on the fly for the end-user.

4. PDF Generation: It creates a standard 8.5x11 inch letter-sized PDF document with the coloring page image neatly centered, ready for printing.

5. Uploading to Storage: It uploads the final PNG and PDF to our Supabase Storage bucket and retrieves the public URLs.

6. Creating the Public Record: Finally, it inserts a new record into the public coloring_pages table with all the metadata and the URLs to the assets, making the page live on the site.

The script updates the job status to generating, completed, or failed` as it works, so we can easily monitor the progress of our content pipeline.

The Result: A Scalable Content Engine

By combining the creative power of Gemini with the robust backend services of Supabase and the flexibility of Node.js, we've built a powerful, automated content engine. This system allows us to focus on high-level content strategy and curating themes, while the pipeline handles the repetitive, time-consuming work of asset creation. It's a scalable solution that will allow ColorCraft.ai to grow its library exponentially in the months and years to come.