A web application built on React that serves computer-generated images of birds based on text submitted by the user. The user can save save their favourite images along with the text that seeded the generation.
This project was initially started as a one-day hackathon with Tommosaurus whilst attending School of Code. Our challenge was to make a a web application using React that hooked up to an external API of our choice.
When we first found the API, we thought the submitted text was a search string and that we were accessing a database of bird images. As we were testing the API, we noticed two things:
- The API was very slow.
- The birds didn't really look like birds.
We finally noticed that the name of the API's creator was OpenedAI and connected the dots. We loved the strange dreamlike images that came back, and designed our project around it. We deployed the original version on Netlify.
After the hackathon, I couldn't stop thinking about how the weird birds deserved more than one day's work. I copied our codebase here so that I could develop it further.
Category | Link |
---|---|
Tickets: | Trello |
Visual Design: | Figma |
Deployment: | TBC |
This is how all of the React components are structured and information is passed down through them.
This web application uses the machine learning API DALL-E Bird Images from Text made by OpenedAI.
The API takes a POST request and generates a bird image based on text submitted in the request body. The API expects the following structure for the request:
{
method: 'POST',
headers: {
'Content-Type': 'application/json',
'x-rapidapi-host': 'dall-e-bird-images-from-text.p.rapidapi.com',
'x-rapidapi-key': /* Your key here */
},
// The value of body must be a JSON object
body: {"text": /* String to base bird image on */}
}