How to generate URL for a PNG file in repository

Question

How to generate URL for a PNG file in repository

532 Views Asked by Banned User At 24 August 2023 at 16:39

I am using the Stable Diffusion API for image generation, one of whose parameters is an image I will have to pass in as an URL string.

For example, if I want to use the image of a monkey, I can use

url: 'https://media.npr.org/assets/img/2017/09/12/macaca_nigra_self-portrait-3e0070aa19a7fe36e802253048411a38f14a79f8-s1100-c50.jpg'

However, I plan on using some images (PNG format) that I have stored in my local repository instead. Is there a quick possible way, or library (preferably in JavaScript) that allows me to dynamically generate an URL for the image? Thanks

Original Q&A

There are 2 best solutions below

Musa On 24 August 2023 at 19:47

If uploading the images to the internet for the API to get access to them is not an option you can use data urls. Encode the file into a data url and use that in the request.

**Natália** · Accepted Answer · 2023-08-30T07:03:10.553000

Yes, when hitting the img2img endpoint of the stable diffusion API, the init_image parameter in the request body takes the image URL. Initially, I thought using the URL.createObjectURL() method in JavaScript to generate a temporary blob URL for local files would be the quickest way.

So I wrote a .html file:

<!DOCTYPE html>
<html>
<head>
  <title>Stable Diffusion API Example</title>
</head>
<body>
  <input type="file" id="input-file">
  <button id="generate-button">Generate Image</button>
 
  <script>
    const inputFile = document.getElementById('input-file');
    const generateButton = document.getElementById('generate-button');

    inputFile.addEventListener('change', (event) => {
      const selectedFile = event.target.files[0];

      if (selectedFile) {
        const imageUrl = URL.createObjectURL(selectedFile);

        generateButton.addEventListener('click', () => {
        const apiParams = {
            "key": "my-api-key",
            "prompt": "Penguins swimming",
            "negative_prompt": null,
            "init_image": imageUrl,
            "width": "512",
            "height": "512",
            "samples": "1",
            "num_inference_steps": "30",
            "safety_checker": "no",
            "enhance_prompt": "yes",
            "guidance_scale": 7.5,
            "strength": 0.7,
            "seed": null,
            "webhook": null,
            "track_id": null
        };

          callStableDiffusionAPI(apiParams);
        });
      }
    });

    function callStableDiffusionAPI(params) {
      const apiEndpoint = 'https://stablediffusionapi.com/api/v3/img2img';
      const myHeaders = new Headers();
      myHeaders.append("Content-Type", "application/json");

      const requestOptions = {
        method: 'POST',
        headers: myHeaders,
        body: JSON.stringify(params),
        redirect: 'follow'
      };

      fetch(apiEndpoint, requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
    }
  </script>
</body>
</html>

When I uploaded an image and clicked on the Generate button, I got the following error in the console: {"status":"error","messege":"Invalid init_image URL"}

However, when I stored a image URL from the internet in the imageURL variable and ran clicked on the Generate button, the API request was successful. Similarly, if I upload my local image to a cloud platform and use its public URL and store it in the imageURL variable, the API request is successful.

Thus, the Stable Diffusion API requires an image URL that's accessible from the internet, not a local blob URL. If you want to use a local image, the quickest way actually seems to be to upload it to a server or an image hosting service and use its internet-accessible URL. There are several platforms and services you can use to host images. Some common options for you would be: Imgur, Cloudinary, GitHub Pages, and Google Drive. Some of these options actually allows to do uploads programmatically which would be efficient in the long run.

How to generate URL for a PNG file in repository

There are 2 best solutions below

Related Questions in JAVASCRIPT

Related Questions in IMAGE

Related Questions in URL

Related Questions in IMAGEURL

Trending Questions

Popular # Hahtags

Popular Questions