AI Generated Human Photo Database (with API Access)

In this post, we’re going to show you an awesome free service to generate a human photo using AI. Since the human in these photos don’t exist, you can use them without any problem. Very useful for making the mockup site, presentation or demo database. We’ll also talk about how to use their free API access to dynamically generate photos with javascript. Let’s check it out!

Genereted.Photos

So let start with go to generated.photos website and click browse photos.

These photos are all pre-generated with AI. You also customize the filters such as gender , age hair and eye color etc. For each image you can pick the background color. Unfortunately for transparent background and high resolution photos you’ll need to purchase their plan. Or you can buy each photo separately for $1.

Note: you’ll need to add credit link to generated.photos website when using the it.

API Access

Now if you plan to use these images dynamically or populate a mockup database, you might want to use their API.

Just create a free account and go the dashboard, you will get the API key for access. The free plan allows you to make a 500 API requests per month which should be enough for personal project.

Making API request is very easy. You’ll only need to pass the API key in the header and make a GET request to the provided based url. you can also add parameters like number of return photos, gender, age, hair color , etc.

Here is the example of how to request a single random female image via REST API

https://api.generated.photos/api/v1/faces?per_page=1&gender=female&order_by=random

And the response will be in JSON format with the url of the images. The API will provide 5 different sizes of the image.

Let’s work on the example. First, I’m going to create asynchronous javascript function call getFace. Then I’ll use a javascript fetch to make an API GET request and provide the api key in the authorization header.

async function getFace() {
  let response = await fetch('https://api.generated.photos/api/v1/faces?per_page=1&gender=female&order_by=random',{
    method: 'GET',
    headers: {
      'Authorization': 'API-Key ******[your API key]*******'
    }
  });

We’ll use json method to parse to parse the response. Then I’ll set the the img element src to the return image url.

<img id="myImg" src="">

let result = await response.json();
document.getElementById("myImg").src = result.faces[0].urls[4]["512"];

Here is the result. You’ll get a new random image on every page reload.

Final Source Code

<img id="myImg" src="">
<script>
  async function getFace() {
    let response = await fetch('https://api.generated.photos/api/v1/faces?per_page=1&gender=female&order_by=random',{
      method: 'GET',
      headers: {
        'Authorization': 'API-Key ******[your API key]******'
      }
    });

    let result = await response.json();
    document.getElementById("myImg").src = result.faces[0].urls[4]["512"];
  }
  getFace();
</script>

And that’s all for this tutorial. If you want to see more web development tips and tutorial. Subscribe our YouTube channel to stay tune