Building Online Tool errors.

 

 

body {

  font-family: Arial, sans-serif;

  background-color: #f4f4f4;

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

 

.container {

  background-color: white;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  width: 400px;

}

 

h1 {

  text-align: center;

  color: #333;

}

 

.form-group {

  margin-bottom: 20px;

}

 

label {

  display: block;

  margin-bottom: 5px;

  color: #666;

}

 

input[type="text"], select, textarea {

  width: 100%;

  padding: 10px;

  border-radius: 4px;

  border: 1px solid #ddd;

  box-sizing: border-box;

}

 

textarea {

  height: 100px;

  resize: vertical;

}

 

button {

  width: 100%;

  padding: 10px;

  background-color: #007bff;

  color: white;

  border: none;

  border-radius: 4px;

  cursor: pointer;

}

 

button:hover {

  background-color: #0056b3;

}

 

</style>

 

 

 

 

 

 

 

<div class="container">
<h1>The Hook Generator</h1>
<div class="form-group">
<label for="topic">Enter Topic:</label>
<input type="text" id="topic" name="topic" placeholder="Enter your topic here">
</div>
<div class="form-group">
<label for="contextType">Select Context Type:</label>
<select id="contextType" name="contextType">
<option value="shortVideo">Short Video</option>
<option value="blogPost">Blog Post</option>
<option value="ad">Ad</option>
<!-- Add more options as needed -->
</select>
</div>
<button id="generateButton">Generate</button>
<br>
<br>
<div class="form-group">
<label for="result">Result:</label>
<textarea id="result" name="result" readonly></textarea>
</div>
</div>

<script src="https://marketingparaautores.com.br/wp-includes/js/script.js"></script>

 

 

 

 

 

 

<script>
document.addEventListener('DOMContentLoaded', function() {
var generateButton = document.getElementById('generateButton');
var resultArea = document.getElementById('result');
var topicInput = document.getElementById('topic');
var usageSelect = document.getElementById('contextType');

generateButton.addEventListener('click', function() {
var topic = topicInput.value;
var usage = usageSelect.value;

if (topic.trim() === '') {
alert('Please enter a topic.');
return;
}

resultArea.value = 'Loading...';

var data = new FormData();
data.append('action', 'generate_hooks_basic');
data.append('topic', topic);
data.append('usage', usage);

fetch('https://marketingparaautores.com.br/wp-admin/admin-ajax.php', { // Replace `ajaxurl` with the actual AJAX URL if necessary
method: 'POST',
body: data
})
.then(response => response.json())
.then(data => {

resultArea.value = data;
})
.catch(error => {
resultArea.value = 'An error occurred: ' + error;
});
});
});

</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

Also, in the HTML section I changed the link to:

<script src="https://marketingparaautores.com.br/wp-includes/js/script.js"></script>

 

 

Did I miss something?

<style>

body {

  font-family: Arial, sans-serif;

  background-color: #f4f4f4;

  margin: 0;

  padding: 0;

  display: flex;

  justify-content: center;

  align-items: center;

  height: 100vh;

}

 

.container {

  background-color: white;

  padding: 20px;

  border-radius: 8px;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  width: 400px;

}

 

h1 {

  text-align: center;

  color: #333;

}

 

.form-group {

  margin-bottom: 20px;

}

 

label {

  display: block;

  margin-bottom: 5px;

  color: #666;

}

 

input[type="text"], select, textarea {

  width: 100%;

  padding: 10px;

  border-radius: 4px;

  border: 1px solid #ddd;

  box-sizing: border-box;

}

 

textarea {

  height: 100px;

  resize: vertical;

}

 

button {

  width: 100%;

  padding: 10px;

  background-color: #007bff;

  color: white;

  border: none;

  border-radius: 4px;

  cursor: pointer;

}

 

button:hover {

  background-color: #0056b3;

}

 

</style>

 

 

 

<div class="container">
<h1>The Hook Generator</h1>
<div class="form-group">
<label for="topic">Enter Topic:</label>
<input type="text" id="topic" name="topic" placeholder="Enter your topic here">
</div>
<div class="form-group">
<label for="contextType">Select Context Type:</label>
<select id="contextType" name="contextType">
<option value="shortVideo">Short Video</option>
<option value="blogPost">Blog Post</option>
<option value="ad">Ad</option>
<!-- Add more options as needed -->
</select>
</div>
<button id="generateButton">Generate</button>
<br>
<br>
<div class="form-group">
<label for="result">Result:</label>
<textarea id="result" name="result" readonly></textarea>
</div>
</div>

<script src="script.js"></script>

 

 

 

<script>
document.addEventListener('DOMContentLoaded', function() {
var generateButton = document.getElementById('generateButton');
var resultArea = document.getElementById('result');
var topicInput = document.getElementById('topic');
var usageSelect = document.getElementById('contextType');

generateButton.addEventListener('click', function() {
var topic = topicInput.value;
var usage = usageSelect.value;

if (topic.trim() === '') {
alert('Please enter a topic.');
return;
}

resultArea.value = 'Loading...';

var data = new FormData();
data.append('action', 'generate_hooks_basic');
data.append('topic', topic);
data.append('usage', usage);

fetch('https://marketingparaautores.com.br/wp-admin/admin-ajax.php', { // Replace `ajaxurl` with the actual AJAX URL if necessary
method: 'POST',
body: data
})
.then(response => response.json())
.then(data => {

resultArea.value = data;
})
.catch(error => {
resultArea.value = 'An error occurred: ' + error;
});
});
});

</script>

Hey! Here goes:

 

 

 

 

 

function openai_generate_text_basic() {    

 

     header('Access-Control-Allow-Origin: *'); // Allows all origins

     header('Access-Control-Allow-Methods: GET, POST, OPTIONS'); // Specifies the allowed methods

     header('Access-Control-Allow-Headers: Content-Type, Authorization'); // Specifies the allowed headers 

 

 

 

    // Get the topic from the AJAX request

    $topic = $_POST['topic'];

    $usage = $_POST['usage'];

    $prompt = "As an expert copywriter specialized in hook generation, your task is to Generate 3 hooks for the following topic: {" . $topic . "} for using it in a: {" . $usage . "}. The output should be a Only The list of Hooks with the type.

 

The Hooks List:\n\n";

 

    // OpenAI API URL and key

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

    $api_key = 'sk-proj-xxxxxx';  // 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)) {

        $error_message = $response->get_error_message();

        wp_send_json_error("Something went wrong: $error_message");

    } else {

        $body = wp_remote_retrieve_body($response);

        $data = json_decode($body, true);

        

        if (json_last_error() !== JSON_ERROR_NONE) {

            wp_send_json_error('Invalid JSON in API response');

        } elseif (!isset($data['choices']) || !isset($data['choices'][0]['message']['content'])) {

            wp_send_json_error('API request failed. Response: ' . $body);

        } else {

            $content = $data['choices'][0]['message']['content'];

            

            wp_send_json($content);

        }

    }

 

    // Always die in functions echoing AJAX content

   wp_die();

}

 

add_action('wp_ajax_openai_generate_text_basic', 'openai_generate_text_basic');

add_action('wp_ajax_nopriv_openai_generate_text_basic', 'openai_generate_text_basic');