Skip to content

Forum in maintenance, we will back soon 🙂

Building Online Too...
 
Notifications
Clear all

Building Online Tool errors.

22 Posts
4 Users
5 Reactions
291 Views
(@google-sidneyguerra)
Posts: 11
Active Member
Topic starter
 

Hello there!

Could you please help me to solve this issue?

 

hooks

 

My URL: https://marketingparaautores.com.br/gerador-de-hooks-themify/

 

the UI.html version also did not work. 🙁

 
Posted : 06/11/2024 9:54 pm
SSAdvisor
(@ssadvisor)
Posts: 1139
Noble Member
 

@google-sidneyguerra your script.js file isn't available to load.

Regards,
Earnie Boyd, CEO
Seasoned Solutions Advisor LLC
Schedule 1-on-1 help
Join me on Slack

 
Posted : 06/12/2024 12:10 am
(@google-sidneyguerra)
Posts: 11
Active Member
Topic starter
 

@ssadvisor Hey!

 

I put it in 2 places:

 

wp-includes/js/script.js

 

 

and direct in the wordpress page:

 

 
 
<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="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?

 

 
Posted : 06/12/2024 12:39 am
Hasan Aboul Hasan
(@admin)
Posts: 1256
Member Admin
 

Let's solve this step by step.

First, did you test the Ajax call without the UI? Is it working?

 
Posted : 06/12/2024 1:12 pm
(@husein)
Posts: 534
Member Moderator
 

@google-sidneyguerra There's a prolbem with your backend function i guess, can you show us your PHP code please.

When i tried your tool it gave me these errors:

Screenshot 2024 06 12 161333

 

 
Posted : 06/12/2024 1:14 pm
(@husein)
Posts: 534
Member Moderator
 

@admin I just tested it and it gave a 400 bad request error

 
Posted : 06/12/2024 1:15 pm
(@google-sidneyguerra)
Posts: 11
Active Member
Topic starter
 

Hello there!

Seems that the problem is here:

 

image

 

didn't pass in the online API testing tool.

 
Posted : 06/13/2024 12:40 am
(@google-sidneyguerra)
Posts: 11
Active Member
Topic starter
 

Here is the code at this moment:

<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>

 
Posted : 06/13/2024 12:44 am
(@husein)
Posts: 534
Member Moderator
 

@google-sidneyguerra yeah thats what i said so the problem is the backend PHP function, please provide the code.

 
Posted : 06/13/2024 12:10 pm
(@google-sidneyguerra)
Posts: 11
Active Member
Topic starter
 
Hey! Here goes:
 
 
 
 
 
function openai_generate_text_basic() {    
 
// Add CORS headers
     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');
 
Posted : 06/13/2024 1:21 pm
(@husein)
Posts: 534
Member Moderator
 

@google-sidneyguerra did you replace your $api_key with your actual API key?

 
Posted : 06/14/2024 7:27 am
Hasan Aboul Hasan
(@admin)
Posts: 1256
Member Admin
 

Ok, so before we move on to the UI. let's fix the backend API call.

I copied your code to my site, and changed the API key, it worked perfectly without changing anything. 

 

I tried to submit request to your site, it said bad request. it means that their is a problem in the function definition, please send a screenshot of the code from your site

 
Posted : 06/14/2024 8:26 am
(@google-sidneyguerra)
Posts: 11
Active Member
Topic starter
 

@husein sure, I just deleted here.

 
Posted : 06/14/2024 2:11 pm
(@google-sidneyguerra)
Posts: 11
Active Member
Topic starter
 
image
image
image

 

Hi, here goes.

 

There is a possibility of a server problem?

 
Posted : 06/14/2024 2:21 pm
SSAdvisor
(@ssadvisor)
Posts: 1139
Noble Member
 

@google-sidneyguerra

Posted by: @google-sidneyguerra

There is a possibility of a server problem?

Who are you using to host the code?

Regards,
Earnie Boyd, CEO
Seasoned Solutions Advisor LLC
Schedule 1-on-1 help
Join me on Slack

 
Posted : 06/14/2024 3:09 pm
Page 1 / 2
Share: