An error occurred: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

API
1

When i created an image generator website through open AI APi key all is done after generate image than coming this error "An error occurred: Unexpected token ‘<’, "<!DOCTYPE “… is not valid JSON”

2

Welcome to the forums. Can you share the code that you are using to generate the image?

3

HTML Code

Generate Image

javascript code

document.getElementById(“generate-button”).addEventListener(“click”, function() {
var prompt = document.getElementById(‘prompt’).value.trim();
var loading = document.getElementById(‘loading’);
var result = document.getElementById(‘result’);
var downloadLink = document.getElementById(‘download-link’);

if (prompt === '') {
    alert('Please enter a prompt before generating an image.');
    return;
}

loading.style.display = 'block';
result.style.display = 'none';
downloadLink.style.display = 'none';

fetch('generate_image.php', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: 'prompt=' + encodeURIComponent(prompt)
})
.then(response => response.json())
.then(data => {
    loading.style.display = 'none';
    result.style.display = 'block';
    downloadLink.style.display = 'block';
    result.src = data.choices[0].image; // Make sure the path is correct
    downloadLink.href = data.choices[0].image; // Make sure the path is correct
})
.catch(error => {
    loading.style.display = 'none';
    alert('An error occurred: ' + error.message);
});

});

Php Code

function openai_generate_image() {
// Check if a prompt has been submitted
if (isset($_POST[‘prompt’])) {
prompt = sanitize_text_field(_POST[‘prompt’]);

    // Validate the prompt (add more validation as needed)
    if (empty($prompt)) {
        wp_send_json_error('Please enter a prompt.');
    }

    // Your OpenAI API key
    $api_key = 'Your Openai API'; // Replace with your actual API key

    // API endpoint
    $api_url = 'https://api.openai.com/v1/completions';

    // Request data
    $data = array(
        'model' => 'image-alpha-001', // Replace with the correct DALL·E model name
        'prompt' => $prompt,
        'n' => 1
    );

    // Headers for the OpenAI API
    $headers = array(
        'Content-Type' => 'application/json',
        'Authorization' => 'Bearer ' . $api_key
    );

    // Args for the WordPress HTTP API
    $args = array(
        'body' => json_encode($data),
        'headers' => $headers,
        'timeout' => 30
    );

    // Send the request to OpenAI
    $response = wp_safe_remote_post($api_url, $args);

    // Check for errors
    if (is_wp_error($response)) {
        wp_send_json_error('Error connecting to OpenAI: ' . $response->get_error_message());
    }

    // Get the API response
    $body = wp_remote_retrieve_body($response);
    $result = json_decode($body);

    // Check for errors in the OpenAI response
    if (empty($result->choices) || !isset($result->choices[0]->image)) {
        wp_send_json_error('Image generation failed. Please try again.');
    }

    // Get the generated image URL
    $image_url = $result->choices[0]->image;

    // Send success response with the image URL
    wp_send_json_success(array('image_url' => $image_url));
} else {
    // No prompt submitted
    wp_send_json_error('No prompt provided.');
}

}

// Add the AJAX action for generating images
add_action(‘wp_ajax_openai_generate_image’, ‘openai_generate_image’);
add_action(‘wp_ajax_nopriv_openai_generate_image’, ‘openai_generate_image’);
?>

4

GPT is not good at generating GPT API code because it didn’t exist before the training. You’ve got the wrong endpoint and API call. Take a look at the official API docs, they’re pretty short:

1 Like
5

PLEASE Tell me main issue which code line can you highlight code are where error

6

That endpoint is for text not images. See the docs.

1 Like
7

please provide me endpoint for image i have all concept clear but here i confused

8

Read the API documentation I linked earlier.

1 Like
9

Hello, I just tried to generate an outpainting frame on an image ON the openai website and got the same error in the info pop-up.