InfogrAIphify: Create Infographics from Articles

This is a submission for the Cloudflare AI Challenge.

What I Built

InfogrAIphify is a web app that crawls any given URL, searches for or tags, and uses their content to create a meaningful infographic for you! With it, summarization reaches new levels! ( an image :P )

The main problem with the original Python script is that it demands an openAI API key, which is paid, so when the opportunity to use a free service, well, I embraced it as an alternative.

Layout and code is a Next.js project bootstrapped with c3.

Features:

• Analyze website content and extract key points.
• Generate a visually appealing infographic.
• User-friendly interface for easy input and interaction.

Demo

The demo can be seen and here

IMPORTANT: check notes below

My Code

phalkmin / InfogrAIphify-nodejs-edition

InfogrAIphify: Create Infographics from Articles

This repository contains the code for InfogrAIphify, a web application that automatically generates infographics from article URLs, a version of the Python script that uses FREE LLMs AND a submission for the Cloudflare AI Challenge.

Layout and code is a Next.js project bootstrapped with c3.

Features:

• Analyze website content and extract key points.
• Generate a visually appealing infographic.
• User-friendly interface for easy input and interaction.

Demo

Demo can be seen here

Getting Started

To run InfogrAIphify locally, follow these steps:

1. Clone the repository:

     git clone https://github.com/phalkmin/InfogrAIphify-nodejs-edition/

2. Install dependencies:

  cd infogrAIphify
  npm install

3. Create a CF Worker

Get the file from WF folder, copy and paste on the worker you created

3. Create a .env file

NEXT_PUBLIC_CF_WORKER=<WORKER URL YOU CREATED>

3. Start the development server:

npm run dev

Open http://localhost:3000 with your browser to see the result.

Cloudflare integration

Besides the dev script mentioned above c3…

View on GitHub

Journey

This time, I decided to use a CloudFlare Page starter instead and if the whole app wasn't complex enough, it would be a breeze to finish and deploy.

Some obstacles:

• The original script uses GPT4 to analyze the , which is fine, as he accepts a large input. The free LLMs of CloudFlare have a smaller limit, so I had to summarize the article using Bart first;
• BUT: Bart on CloudFlare doesn't have (at least I wasn't able to make it work this way) a setting to make the summarization larger and more complete. So the LLM would have just a small phrase to use as a basis for the infographics;
• Another problem: the Models for text-to-image available on CloudFlare aren't exactly customized to create images like those described by the LLM, something that DALL3 does flawlessly. An infographic is created, but its final result isn't as cool as if you try the Python script.
• FINALLY: it wasn't exactly a good idea to upload TWO high-usage apps on the same free-tier account, so, probably, the example may not work. Try later.

I'm sure that with more time to code, test, and check the models for better prompts, I can improve the infographic's final result. For now, as a PoC, the status of the demo is:

Multiple Models and/or Triple Task Types

Models in use:
bart-large-cnn

mistral-7b-instruct-v0.1

stable-diffusion-xl-lightning

Comments

[Michael Tharrington]

Wow, this is dope, Paulo! Lovin' the idea behind this one. 🙌