My Cloudflare AI Challenge: Image Alt Text Generator

This is a submission for the Cloudflare AI Challenge.

What I Built

As a developer, prioritizing accessibility in web design has always been crucial. Crafting meaningful alt text for images, especially in consumer-facing websites, presents a challenge. Each image tells a unique story, from simple depictions to intricate scenes. Leveraging Cloudflare's models, I embarked on a project to streamline this process. My solution? An alt text generator capable of producing five descriptive alt texts for any given image.

Demo

Live Demo

My Code

yaldram / image-altext

Cloudflare-powered AI image alt text generator using TypeScript and Hono framework for edge environments.

Cloudflare AI Image to Text

As a developer, prioritizing accessibility in web design has always been crucial. Crafting meaningful alt text for images, especially in consumer-facing websites, presents a challenge. Each image tells a unique story, from simple depictions to intricate scenes. Leveraging Cloudflare's models, I embarked on a project to streamline this process. My solution? An alt text generator capable of producing five descriptive alt texts for any given image. Now, developers can effortlessly ensure accessibility without compromising on quality.

Working

Upload your image, wait briefly, and instantly receive the top 5 generated alt texts for accessibility.

Api Details

• "/": Serves the index.html file, providing the entry point for the application.
• "/generate-alt-texts": It first utilizes Cloudflare's image-to-text model, @cf/unum/uform-gen2-qwen-500m, to generate a description of the image. This description is then fed into the text generation model, @hf/thebloke/zephyr-7b-beta-awq, to produce the alt texts

Tech Stack

• Cloudflare…

View on GitHub

Journey

My journey into Cloudflare began with a desire to explore their Workers and edge environment, inspired by Kristian's exceptional tutorials on Cloudflare's YouTube channel. Transitioning from AWS serverless to Cloudflare was remarkably straightforward with Wrangler Bindings, simplifying deployment and eliminating concerns about environment variables.

Cloudflare's AI capabilities & a generous free tier, including models like Llama, Mixtral, and Zephyr, opened new avenues for me. Leveraging these models through user-friendly APIs, I developed an application that generates alt text for images effortlessly, enhancing accessibility.

Using Cloudflare's models @cf/unum/uform-gen2-qwen-500m and @hf/thebloke/zephyr-7b-beta-awq, I created a seamless process for image alt text generation, empowering users to improve accessibility for their images on their websites without hassle.

Multiple Models and/or Triple Task Types

• Image Description: Utilizing the Cloudflare model @cf/unum/uform-gen2-qwen-500m the application generates a detailed textual description of the uploaded image.

• Alt Text Generation: Leveraging the description obtained, the application feeds it into the Cloudflare model @hf/thebloke/zephyr-7b-beta-awq to produce relevant alt texts, ensuring accessibility for users relying on screen readers.