reportAIge

AI generated art based on trending Twitter topics from around the globe.

---

Table of Contents

1. What is this?
2. Getting Started
3. Seeding the Database
4. Where is the artwork API route being used?
5. Example artwork API reponse
6. Acknowledgements
7. License

What is this?

This is a Typescript NextJS app that uses OpenAI's GPT-3 API to generate artwork based on trending Twitter topics from around the globe. The app is hosted on Vercel and uses MongoDB Atlas for the database and Google Cloud Storage for image storage.

The overall process for creating these images is as follows:

1. Fetch the top trending topics for each of the designated cities
2. Limit the number of trends to 10 and filter out any inappropriate trends
3. Aggregate the total number of tweets for each each city (to render weight on the globe)
4. Create a piece of artwork using the DALL-E image generation API
5. Rinse and repeat at 12:00pm local time for each city using cron jobs

Getting started

1. Fork and clone the repo to your local development environment.
2. Install the dependencies

pnpm install

3. Rename .env.example to .env
4. Obtain a Twitter API key & bearer token and update the TWITTER_BEARER_TOKEN env var
5. Sign up for an OpenAI Account, obtain an API key and update the OPENAI_API_KEY env var
6. Generate an api key secret

node
> require('crypto').randomBytes(32).toString('hex')

7. Update the API_SECRET_KEY env var with the randomly generated string
8. Signup for a Google Cloud Account, create a new Storage Bucket, and create a new Service Account with the Storage Object Admin role
9. Update the GCP_BUCKET_NAME, GCP_PROJECT_ID, GCP_CLIENT_EMAIL, and GCP_PRIVATE_KEY env vars
10. Create a MongoDB Atlas database and update the MONGODB_URI env var with the database connection string
11. Start the local development environment

pnpm dev

12. Navigate to http://localhost:3000

Seeding the database

Hit the api/artwork route with a POST request for each city to populate mongoDB and Google Cloud Storage with some data with the following script.

⚠️ Make sure you have completed all the above steps and your local development environment is running before running this ⚠️

pnpm seed

You should be good to go now. Happy coding 😁

Where is the artwork api route being used?

You may have noticed that the api route /api/artwork is never called within our NextJS app. This endpoint is hit at 12pm local time for each city using GitHub action cron jobs. Once the api route is hit, a Vercel deploy hook is called to rebuild the application:

// pages/api/artwork

...
if (process.env.NODE_ENV !== "development") {
  await fetch(process.env.VERCEL_DEPLOY_HOOK_URL!, {
    method: "POST",
  });
}
...

Example artwork api response

Check out the example response data to see an actual example of the /api/artwork response data. The structure is an array of the following objects (one for each city):

{
  "_id": "63befd9ee007932fb0a9ec17",
  "name": "berlin",
  "twitterLocationId": 638242,
  "lat": 52.520008,
  "lng": 13.404954,
  "artwork": {
    "_id": "63bf5c4685b772a8cb284234",
    "cityId": "63befd9ee007932fb0a9ec17",
    "imgFilename": "berlin-1673485382080.jpeg",
    "totalTweets": 657522,
    "hashtags": [
      "LOVE YOU ALBA",
      "Jeff Beck",
      "Southampton",
      "Schiff",
      "Luetzerath",
      "Protest",
      "KELLY SAVE OUR NUNS",
      "Sinan",
      "Räumung",
      "Kohle",
      "Lanz",
      "Klimaterroristen",
      "Merz"
    ],
    "createdAt": "2023-01-12T01:03:02.932Z"
  }
}

Acknowledgements

This project was created by Seth.

Additional contributors are more than welcome and encouraged!

License

This project is licensed under the MIT License