{"msg":"Missing credentials","status":"error"}

API
1

I have written a script to implement a generate art button on my website using html and Javascript,

upon testing I am getting the error in the headline. I have the proper API key in the code.

Any ideas?

2

Can you share a code snippet of how you are doing this (with sensitive info omitted)?

4 
<script>
  // JavaScript code to generate AI art when the button is clicked
  document.getElementById("generate-ai-art-button").addEventListener("click", function() {
    // Use DALL-E API to generate the AI art
    const url = 'https://api.openai.com/v1/images/generations';
    const prompt = 'generate a painting of a landscape';
    const apiKey = 'YOUR_API_KEY';

    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({prompt: prompt, model: 'image-alpha-001'})
    };

    fetch(url, options)
        .then(response => response.json())
        .then(data => {
            const imageUrl = data.data[0].url;
            // insert the image into the container
            document.getElementById("ai-art-container").innerHTML = `<img src='${imageUrl}'/>`;
        })
        .catch(error => {
            console.log(error);
        });
  });
</script>
5 
<script>
  // JavaScript code to generate AI art when the button is clicked
  document.getElementById("generate-ai-art-button").addEventListener("click", function() {
    // Use DALL-E API to generate the AI art
    const url = 'https://api.openai.com/v1/images/generations';
    const prompt = 'generate a painting of a landscape';
    const apiKey = 'YOUR_API_KEY';

    const options = {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify({prompt: prompt, model: 'image-alpha-001'})
    };

    fetch(url, options)
        .then(response => response.json())
        .then(data => {
            const imageUrl = data.data[0].url;
            // insert the image into the container
            document.getElementById("ai-art-container").innerHTML = `<img src='${imageUrl}'/>`;
        })
        .catch(error => {
            console.log(error);
        });
  });
</script>
7

When you put your API key in JavaScript anyone can read that. It is very much not suggested to ever do. Also “image-alpha-001” doesn’t seem to be a model that can be accessed. Maybe this can help you Questions about the API and Dall-e! or this https://platform.openai.com/docs/guides/images/introduction?context=node
Are you having ChatGPT write this code for you?

8

That user has not been seen on the forum for 14 months.

It is important to review the date of forum posts and try to address just ongoing concerns…

node.js is a backend written in Javascript and does not run in the browser. So not all javascript seen on the forum will be as naive as putting it within a web page as above.

9

This topic appeared as “new” to me. I did not note the date. So that advice has been noted, thanks. As for node.js, there is no mention of that, and from my cursory examination of the code provided, this is vanilla javascript, front end, not node. Thanks for blowing me up though. Great use of your time I’m sure.