Hi! I'm Vivian, a member of the team at Replicate. I've created Daily Dose of News: an interactive news feed that renders AI-generated visualizations of today's top headlines. In this post, I'll show you how I used Replicate, Flask, and Vercel to create the app!
To use Daily Dose of News, choose a category (business, health, sports, entertainment, etc...) and country (source of the article), then click anywhere to start loading up your news feed! A new article is loaded every 10 seconds by default.
To generate the visualizations, I use VQGAN-CLIP. VQGAN-CLIP is capable of producing high-quality images from complex text prompts without any training by using a unified vision and language encoder to guide image generations.
This Flask-based website uses Replicate for the model, News API for generating news headlines, and Vercel for deployment.
I use Flask as a web framework for the app, though you can use any web framework you like.
To use Flask, I import the Flask class and create an instance of the class:
Then, I define various routes using the route decorator, including a prediction route:
To make predictions with Replicate, I first import the package in the main script app.py
:
As I mentioned, I use the VQGAN-CLIP model to generate the images. I fetched the latest version of VQGAN-CLIP as follows:
In static/index.js
, I then make a POST request to /api/predict
, which in turn creates a replicate.prediction
object that feeds in the news headline as our text prompt, and outputs an AI-synthesized image.
To run the app locally, I set up my local environment:
As well as set up my API tokens as environment variables:
After, I run python app.py
and open localhost:5000 to see the web app in action!
I use Vercel to deploy my web app. To deploy your own app on Vercel like I did, you first need to create an account on Vercel.
To deploy onto Vercel, I created a vercel.json
file to configure the root directory/main program script to app.py
.
Then, I created "New Project" and configure from an existing Git repo/commit. I'm able to specify the API tokens as environment variables under "Project Settings".
Finally, I installed the Vercel CLI. From the command line, I ran vercel login
followed by vercel --prod
.
We'd love to see what you're working on! If you want to chat about this post, or whatever project you’re working on, hop into our Discord and say hello.