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!

Daily Dose of News

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.

Getting set up

This Flask-based website uses Replicate for the model, News API for generating news headlines, and Vercel for deployment.

Using Flask

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:

from flask import (
    Flask,
    jsonify,
    render_template,
    send_from_directory,
    request,
)

app = Flask(__name__)

Then, I define various routes using the route decorator, including a prediction route:

@app.route("/api/predict", methods=["POST"])

Making predictions

To make predictions with Replicate, I first import the package in the main script app.py:

import replicate

As I mentioned, I use the VQGAN-CLIP model to generate the images. I fetched the latest version of VQGAN-CLIP as follows:

# Fetch model
model = replicate.models.get("mehdidc/feed_forward_vqgan_clip")

# Get model version
version = model.versions.get(
"28b5242dadb5503688e17738aaee48f5f7f5c0b6e56493d7cf55f74d02f144d8"
)

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.

prediction = replicate.predictions.create(
    version=version,
    input={
        "prompt":headline,
        "model": 'cc12m_32x1024_mlp_mixer_openclip_laion2b_ViTB32_256x256_v0.4.th',
        "prior": False,
        "grid": '1x1',
        "seed": random.randint(0, 2**15-1),
    },
)

Running the app locally

To run the app locally, I set up my local environment:

python3 -m venv .venv
source .venv/bin/activate
pip install -r requirements.txt

As well as set up my API tokens as environment variables:

export REPLICATE_API_TOKEN=<my-replicate-api-token>
export NEWS_API_TOKEN=<my-news-api-token>

After, I run python app.py and open localhost:5000 to see the web app in action!

Deploying the app

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.

Create your own apps

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.