Tool not functioning

Friend, we were going in the right direction fixing the errors one by one; now, I see the backend function is not working anymore. what happened?!

@vickywm33 I was thinking you were executing the production backend code with uvicorn or a similar service. Restarting the service is dependent on the OS you're using but usually just stopping the process and issuing the original start command should work.

Can we do a quick zoom call, 10 mins max. 

In the course and the instructions, I didn't come across running or starting the service and how to do it. So I am a bit clueless with the service thing. I do have VS code installed and python as well. my python gives me error when I install Openai. 

@vickywm33 Friend. I think we are now handling different problems at once.

Do you want to fix the first tool? or do you wanna go over the course and ask something related to it?

Please, let's focus on one thing, solve it, and then we can move on to something else.

If you want to continue working with your tool, please get it back as it was, and let's continue. 

If not, I will be publishing it in the next 48 hours, it is a step by step guide on how to build the tool on WordPress. I think it will be better than the SaaS course for you.

@admin Hi Hasan, Yes, the focus is still on the tool. Earnie metioned that I needed to restart some services, I got confused about what it meant to start the service. 
Zoom call requested for a walkthrough for solve the coding issue I am having, you can just guide me online, live and I will make the suggested changes. if possibe

@vickywm33 we were in the last step; just get your tool back so we can fix it together.

@admin Thank you Hasan, 

The tool is still there in fact previously nothing was happening when I clicked the button but now when I click the button, I can see the button going round and round but it does't fetch any response or communicate with Open AI. What should be our next step? Below is the code situation.

Also just to let you know I did create the tool on your website FreeAIToolkit and it works fine. Do you think we can copy code from there and put to my website? I will put my API key of course. 

HTML CODE

<div id="recipe-generation-tool">
    <br>
    <input type="text" id="ingredients" placeholder="ingredients...">
    <br>
    <br>
    <button id="generate-button">Generate Recipe!</button>
    <div id="result-container" style="display: none;">
        <div class="result-wrapper">
            <div class="result-content">
                <textarea id="result" readonly></textarea>
            </div>
            <div class="copy-button-container">
                <button id="copy-button">Copy</button>
            </div>
        </div>
    </div>
    <div id="loading" class="loader" style="display: none;"></div>
</div>

<style>
    /* Basic styles for the recipe generation tool */
    #recipe-generation-tool {
        width: 100%;
height: 400px;
        max-width: 600px;
        margin: 0 auto;
        font-family: Arial, sans-serif;
    }

    #recipe{
        width: 200%;
        padding: 20px;
        margin-bottom: 20px;
        font-size: 16px;
        border-radius: 9px;
        border: 2px solid #fff;
    }

    #generate-button {
        display: block;
        width: 100%;
        padding: 15px;
        margin-bottom: 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        color: #fff;
        background-color: #000000;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #generate-button:hover {
        background-color: #2980b9;
    }

    #result-container {
        display: none;
        margin-bottom: 20px;
    }

    .result-wrapper {
        position: relative;
        overflow: hidden;
    }

    .result-content {
        display: flex;
    }

    #result {
        flex: 1;
        height: 400px;
        padding: 15px;
        font-size: 16px;
        border-radius: 5px;
        border: 1px solid #ddd;
        background-color: #f9f9f9;
    }

    .copy-button-container {
        margin-top: 10px;
        text-align: right;
    }

    #copy-button {
        padding: 8px 12px;
        font-size: 14px;
        border: none;
        border-radius: 5px;
        color: #fff;
        background-color: #3498db;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }

    #copy-button:hover {
        background-color: #2980b9;
    }

    /* CSS for the loader */
    .loader {
        display: block;
        margin: 50px auto;
        border: 16px solid #f3f3f3; /* Light grey */
        border-top: 16px solid #3498db; /* Blue */
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 1s linear infinite;
    }

    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
</style>

JAVASCRIPT IS BELOW

<script>
document.getElementById("generate-button").addEventListener("click", async function(event) {
    event.preventDefault();

    const generateButton = event.target;
    if (generateButton.disabled) return;

    generateButton.disabled = true;

    const ingredients = document.getElementById('ingredients').value;
    const prompt = `Generate 2 yummy recipes and provide a step-by-step guide on how to cook these. Do not use any other ingredients, for every step also list down the ingredient quantity required ${ingredients}`;
    const loading = document.getElementById('loading');
    const result = document.getElementById('result');
    const resultContainer = document.getElementById('result-container');

    try {
        loading.style.display = 'block';
        result.style.display = 'none';
        resultContainer.style.display = 'none';

        const formData = new FormData();
        formData.append('action', 'openai_generate_recipe');
        formData.append('prompt', prompt);

        const response = await fetch('/wp-admin/admin-ajax.php', {
            method: 'POST',
            body: formData
        });

        if (!response.ok) throw new Error('Failed to fetch data');

        const data = await response.json();
        loading.style.display = 'none';

        if (data.success) {
            result.value = data.choices[0].text;
            result.style.display = 'block';
            resultContainer.style.display = 'block';
        } else {
            throw new Error(`An error occurred: ${data}`);
        }
    } catch (error) {
        console.error('An error occurred:', error.message);
        result.value = `An error occurred: ${error.message}`;
    } finally {
        generateButton.disabled = false;
    }
});

const copyButton = document.getElementById('copy-button');
copyButton.addEventListener('click', function() {
    const result = document.getElementById('result');
    result.select();
    document.execCommand('copy');
    alert('Copied to clipboard!');
});

</script>

BELOW IS THE CODE SNIPPET

function openai_generate_recipe() {
    // Get the ingredients from the AJAX request
		$ingredients = $_POST['prompt'];
	$prompt = "Generate 2 yummy recipes and provide a step-by-step guide on how to cook these. Do not use any other ingredients, for every step also list down the ingredient quantity required" . $ingredients;

    // OpenAI API URL and key
    $api_url = 'https://api.openai.com/v1/chat/completions';
    $api_key = 'sk-my key';  // Replace with your actual OpenAI API key

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

    // Body for the OpenAI API
    $body = [
        'model' => 'gpt-3.5-turbo',
        'messages' => [['role' => 'user', 'content' => $prompt]],
        'temperature' => 0.7
    ];

    // Args for the WordPress HTTP API
    $args = [
        'method' => 'POST',
        'headers' => $headers,
        'body' => json_encode($body),
        'timeout' => 120
    ];

    // Send the request
   $response = wp_remote_request($api_url, $args);

// Handle the response
if (is_wp_error($response)) {
    wp_send_json_error("Something went wrong: " . $response->get_error_message());
}

$body = wp_remote_retrieve_body($response);
$data = json_decode($body, true);

if (json_last_error() !== JSON_ERROR_NONE || !isset($data['choices'])) {
    wp_send_json_error('API request failed. Response: ' . $body);
}

wp_send_json_success($data);

    }

    // Always die in functions echoing AJAX content
   wp_die();
}

add_action('wp_ajax_openai_generate_recipe', 'openai_generate_recipe');
add_action('wp_ajax_nopriv_openai_generate_recipe', 'openai_generate_recipe');

I tried the above codes on another Wesbite of mine, didn't work. Makes me think its wither the code snippet or the API not communicating. Please advise. I am clueless. 

@vickywm33 no friend, freeaikit is totally different structure.

Please lets go again step by step so we understand what is going on, forget about the UI now.

Is your function openai_generate_recipe working? Did you test it?

What I mean, it was working before, and now it is not. look at the screenshot,

showing forbidden. So the UI will not work anyway, we must first finish step one, and make sure the function is working. Did you get my point?

I didn't change anything brother. Not sure what the issue could be. I tried following your new course step by step, copied the code, and didn't change anything except the API key , even left the functions to remain as your code. It gave me the same error as you.  See below. 

I asked ChatGpt and it gave me the following suggestions; My APi keys are enabled, DO I need to allow any other permission from Open AI? Is there

The error message "403 Forbidden" indicates that the server understood the request, but it refuses to authorize it. This typically occurs when the server denies access to the requested resource due to lack of proper permissions.

Here are some potential reasons for receiving a "403 Forbidden" error and possible solutions:

1. **Insufficient Permissions:**
- Ensure that the user making the request has sufficient permissions to access the resource. If you're accessing a web page or API endpoint, check the permissions settings on the server to ensure that the user has appropriate access rights.

2. **Incorrect URL or Endpoint:**
- Double-check the URL or endpoint you are trying to access. Make sure it is correct and properly formatted. Typos or incorrect URLs can result in a "403 Forbidden" error.

3. **IP Whitelisting or Firewall Restrictions:**
- The server may be configured to block requests from certain IP addresses or ranges. Check if your IP address is whitelisted or if there are any firewall restrictions in place that could be causing the error.

4. **Authentication Required:**
- Some servers require authentication (e.g., username/password or API key) to access certain resources. If authentication is required, ensure that you provide the necessary credentials with your request.

5. **Rate Limiting:**
- The server may be rate-limiting requests, which could result in a "403 Forbidden" error if you exceed the allowed limit. If applicable, check the rate-limiting policies and ensure that you are not making too many requests in a short period.

6. **Server Misconfiguration:**
- It's possible that the server is misconfigured, leading to improper handling of requests. Contact the server administrator or hosting provider to investigate and resolve any server-side issues.

7. **Check HTTP Headers and Request Parameters:**
- Review the HTTP headers and request parameters to ensure they are correctly formatted and comply with any requirements specified by the server.

If you continue to encounter the "403 Forbidden" error after checking the above points, you may need to troubleshoot further or contact the server administrator for assistance in resolving the issue.

I tried the code on another website of mine, didnt work, same issue

Update, Spoke to my Hosting provider UK2.net to check if there is any issue with excessive security on the site. They enabled a few features while keeping the site secure. Still no luck. They asked me which program I used for this coding/ fucntion. I told its PHP Snippet made in python. Is that correct? The technical team is still looking at it. 

Should we do a 10 minutes zoom meeting? @Hasan?

@vickywm33 when I enter the URL into my browser and inspect the result I see a 400 response. Try disabling the code snippet and if the wp-admin/wp-ajax.php works for you then.

@ssadvisor Thank you buddy, tried that, still didn't work. Gives 404.

@vickywm33 the other things to try are to deactivate any plugins one at a time to determine if a plugin is responsible for the issue.

@vickywm33 can you share your site credentials please.

@admin Sure, here you are:

https://whattocook.club/wp-login

username: admin

Password: Sent to your email