Posted July 28, 2022 by @vccheng2001
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's API, 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's API for the model, News API for generating news headlines, and Vercel for deployment.
To integrate Replicate into your web app, you'll need to subscribe to Replicate and get your own Replicate API token.
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"])
To make predictions with Replicate's API, 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),
},
)
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!
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.
We're bringing people together to explore what's being created with machine learning.
August 11, 2022
Using CLIP and LAION5B to collect thousands of captioned images.
August 5, 2022
Creating a web app to illustrate news headlines with AI-generated visualizations
July 28, 2022 👀
The basics of using the API to create your own images from text.
July 18, 2022
Inspired by model cards, we've created templates for documenting models on Replicate.
July 5, 2022
An introduction to differentiable programming and the process of refining generative art models.
May 27, 2022
We're a small team of engineers and machine learning enthusiasts working to make machine learning more accessible.
May 16, 2022