Image of the Day: experimenting with AI on the web

Last week, while taking my dog for a walk, a small idea came to mind: what if I created a tool that reads the day’s news and generates an image using AI based on the news itself? Who knows what would come out!

Since I’m a web developer and I enjoy experimenting, I decided to implement it.
The “project,” if we can call it that, consists of two main parts:

• a Python script that handles image generation
• a Next.js/React app that displays the generated images along with the news used as input

One of the main requirements was minimal maintenance costs. In reality, there are some costs, but very low: mainly the image storage on a Cloudflare R2 bucket.

Python Engine: image generation

The core of Image of the Day is a Python script that transforms the day’s news into AI-generated images.

The script is lightweight, modular, and fully automatic: you just run it (or let it run daily via GitHub Actions) and it produces images ready for the frontend.

How it works

1. Fetching news
2. • The script reads RSS feeds to get the latest news headlines and content.
   • Five headlines are randomly selected.
2. Prompt creation
3. • These five headlines are fed into Gemini, which creates an “artistic prompt.”
   • The result is a narrative or visual scene that will guide the image generation.
3. Image generation
4. • The generated artistic prompt is used as input for the image generation.
   • The current model used is @cf/stabilityai/stable-diffusion-xl-base-1.0, running on Cloudflare Workers AI (which has a free tier).
4. Saving image + metadata
5. • The image is stored in Cloudflare R2.
   • A JSON file contains metadata: news title, date, source link, image URL, timestamp, and optional tags.
   • This JSON is used by the frontend to automatically populate the gallery.
5. Daily automation
6. • The script runs automatically every day via GitHub Actions using a cron expression.
   • This way, the gallery updates without any manual intervention.

Frontend Next.js/React: interactive gallery

The frontend of Image of the Day is a Next.js/React app that consumes the images and metadata generated by the Python script and displays them in an interactive gallery.

How it works

1. Fetching data
2. • A custom React hook (useGalleryData) reads the JSON file generated by the Python script.
   • The data is stored in the app’s state to be displayed immediately.
2. Displaying images
3. • Images are shown in a responsive grid that adapts from mobile to desktop.
   • Each gallery card contains:
   • • The AI-generated image
     • The generation date
     • The news titles used
     • A “View Details” button to open more information (full titles, source, date, and the generated artistic prompt)

If you’re curious and want to take a look:

• 🖼️ Live project: Image of the Day (gallery)
• 📂 Engine source code: GitHub – image-of-the-day
• 📂 Frontend source code: GitHub – image-of-the-day-fe