Forum in maintenance, we will back soon 🙂
ChatGPT OpenAI API question -
Is using a separate API Key for each tool good practice, or should we use the same one? Also, should we create a separate snippet for each tool?
I'm getting a Fatal Error "Cannot redeclare openai_generate_text() (previously declared..." when I create a new snippet tied to the new key.
Any suggestions?
@michael-brannon Glad to hear, you ask chatGPT for any update, just give it the HTML code, and ask for any changes you want
@michael-brannon When you create another PHP function, you should give it another name. make sure to also change the name in the JS code.
No need to use multiple API keys.
@admin Hasan
I changed the Title of the snippet and the "Title" in the JSON code. I still get an error when I try activating the new snippet, even when I use the same API. My old tool still functions, but I am unable to establish communication between my new tool and the code snippet.
Is the function for generating text still called "text-generation-tool"?
Thanks for your help!
@michael-brannon can you share the code please to check. did you change the hook names also?
Snippet Code
"Property Tour Generator Assistant"
function openai_generate_text() {
// Get the topic from the AJAX request
$prompt = $_POST['prompt'];
// OpenAI API URL and key
$api_url = 'https://api.openai.com/v1/chat/completions';
$api_key = 'sk- ------------------------'; // 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'])) {
wp_send_json_error('API request failed. Response: ' . $body);
} else {
wp_send_json_success($data);
}
}
// Always die in functions echoing AJAX content
wp_die();
}
add_action('wp_ajax_openai_generate_text', 'openai_generate_text');
add_action('wp_ajax_nopriv_openai_generate_text', 'openai_generate_text');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Property Tour Generator Assistant</title>
<style>
/* Your existing styles here */
/* Style for the generate button */
#generate-button {
background-color: #004aad;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
#generate-button:hover {
background-color: #22a2e3;
}
/* Spinning faces loader style */
#loading {
display: inline-block;
font-size: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div id="text-generation-tool">
<input type="text" id="agent-name" placeholder="Agent Name and Company">
<input type="text" id="city-neighborhood" placeholder="City/Neighborhood">
<input type="text" id="property-address" placeholder="Property Address">
<textarea id="features-designs" placeholder="Features and Designs"></textarea>
<button id="generate-button">Generate 🏡 Description</button>
<div id="loading" class="loader" style="display: none;">🎭</div> <!-- Spinning masks icon -->
<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>
<script>
const generateButton = document.getElementById("generate-button");
const loading = document.getElementById('loading');
const result = document.getElementById('result');
const resultC = document.getElementById('result-container');
generateButton.addEventListener("click", async function(e) {
e.preventDefault();
if (generateButton.disabled) {
return;
}
generateButton.disabled = true;
loading.style.display = 'block';
result.style.display = 'none';
resultC.style.display = 'none';
const agentName = document.getElementById('agent-name').value;
const cityNeighborhood = document.getElementById('city-neighborhood').value;
const propertyAddress = document.getElementById('property-address').value;
const featuresDesigns = document.getElementById('features-designs').value;
const inputText = `${agentName} ${cityNeighborhood} ${propertyAddress} ${featuresDesigns}`;
try {
const response = await fetch('/your-api-endpoint', { // Replace with your actual API endpoint
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ prompt: inputText })
});
const data = await response.json();
if (data.success) {
result.value = data.data.choices[0].message.content;
} else {
result.value = 'An error occurred: ' + data.data;
}
} catch (error) {
result.value = 'An error occurred: ' + error.message;
} finally {
loading.style.display = 'none';
result.style.display = 'block';
resultC.style.display = 'block';
generateButton.disabled = false;
}
});
const copyButton = document.getElementById('copy-button');
copyButton.addEventListener('click', function() {
result.select();
document.execCommand('copy');
alert('Copied to clipboard!');
});
</script>
</body>
</html>
Change the function name: "openai_generate_text"
and here:
add_action('wp_ajax_openai_generate_text', 'openai_generate_text');
add_action('wp_ajax_nopriv_openai_generate_text', 'openai_generate_text');
and make sure to change in the JS code
@admin I finally got it. Many thanks, Hasan!
Another question:
Is the fetch code from the snippet generator the same no matter which tool is created, '/wp-admin/admin-ajax.php'? If not, where do I find the code for each tool? I changed the placeholders for the name of the tool in the code. However, I'm getting an error when the script runs from my website.
Thanks
Continued from earlier:
I need to understand where to find the actual API endpoint. So that I am able to incorporate it into any new tool I create.
@michael-brannon yes, you change the function name, and you can customize it by adding more parameters if you want.
I need to understand where to find the actual API endpoint. So that I am able to incorporate it into any new tool I create.
Hi Hasan,
Piggybacking off of the general thread topic, I too am inspired by your video about creating no code AI tools as a traffic generator for my website. I took a look at the ones available on codecanyon and the majority are general writing tools and image generator tools. I would need to modify them to give the focused output I am trying to achieve, (example: a script that generates amazon descriptions using a copywriting formula). I can do small modifications to code but I am not a coder myself. How would I go about customizing the pre-made codes like these to suit my specific needs? Any point in the right direction would be most appreciated! 😀
@michael-brannon an API end-point is something that either takes or returns (often both) JSON data that you use to control the data stored on your server and/or service.
Regards,
Earnie Boyd, CEO
Seasoned Solutions Advisor LLC
Schedule 1-on-1 help
Join me on Slack
@kamaria-hill Thank you!
In this case I prefer to develop mine and not update codecanyon scripts. as it will be hard to manage, especially when you get new updates from the script author.
Did you check my tutorial on building AI tools on WordPress?
@admin yes, i believe so but I will rewatch to see if i missed something. is it possible to have chatgpt write a custom code for me with the right prompting instead of trying to modify a codecanyon one? i'm just digging into the prompting course so maybe it will be illuminated there?
The code reminds you to update the code with your actual API end-point.
const response = await fetch('/your-api-endpoint', { // Replace with your actual API endpoint
I am trying to verify that I am updating it correctly when I create a new snippet. Does this refer to the WP AJAX Code, the API key, or something else?
I had it working, but I tried to update the user interface, and now I can't get it to send a response.
Any help would be greatly appreciated.
@kamaria-hill yes ChatGPT can you help build tools like the one I explained in the WordPress Tutorial, as I write the full code with ChatGPT.
@michael-brannon The Snippet is the PHP function.
the code you shared is a JS code for the UI that calls the PHP function. it is better to keep the main working code a template that you can go back anytime you get a problem.
and when you want to change the design, don't give the JS code to ChatGPT, just the HTML, CSS, then when you are satisfied with the design, you ask chatGPT to update the JS code.
always break down the tasks with ChatGPT to get the best results
