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
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…
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-500mthe 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-awqto produce relevant alt texts, ensuring accessibility for users relying on screen readers.
Top comments (0)