How to Create AI Tools in WordPress in 5 Minutes ?

@admin Are those prompts that you use to create that code available?

@techprieto 

Unfortunately, I was disorganized while creating the tools. I must have sent the request during an unrelated chat session because I can't locate the prompts in my ChatGPT history. I apologize for the inconvenience.

@techprieto I am testing and optimizing some prompts, I will add to the prompts library when done.

@michael-brannon no worries

hi am trying to create a a.i tool just like the one on your website "YouTube Title Generator" but i keep runinng into problems like the code not running pls help

@emma2023 you've got to help us help you. You don't give any information that is relevant to your problem. Please give a screenshot of your results so we can better determine the problems. Also, are you registered for the classes?  If so then please use the Premium Forum to ask your questions.

@michael-brannon Great!

but the link you sent is not the tool

@ssadvisor

this is the code re-writing by chatgpt

<div id="text-generation-tool">
<input type="text" id="topic" placeholder="Your Topic...">
<select id="description">
<option value="">Select Description...</option>
<option value="tutorial">Tutorial</option>
<option value="review">Review</option>
<option value="analysis">Analysis</option>
</select>
<button id="generate-button">Generate Story!</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 text generation tool */
#text-generation-tool {
width: 100%;
max-width: 600px;
margin: 0 auto;
font-family: Arial, sans-serif;
}

#topic, #description {
width: calc(100% - 30px);
padding: 15px;
margin-bottom: 20px;
font-size: 16px;
border-radius: 5px;
border: 1px solid #ddd;
}

#generate-button {
display: block;
width: 100%;
padding: 15px;
margin-bottom: 20px;
font-size: 16px;
border: none;
border-radius: 5px;
color: #fff;
background-color: #3498db;
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>

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

var topic = document.getElementById('topic').value;
var description = document.getElementById('description').value;
if (!description) {
alert("Please select a description.");
return;
}
var prompt = "Generate 5 " " " + description "youtube video title on " + topic;

var generateButton = document.getElementById("generate-button");

if (generateButton.disabled) {
return; // Prevent multiple clicks while content is being generated
}

generateButton.disabled = true;

var loading = document.getElementById('loading');
var result = document.getElementById('result');
var resultC = document.getElementById('result-container');

loading.style.display = 'block';
result.style.display = 'none'; // hide result textarea
resultC.style.display = 'none';

var formData = new FormData();
formData.append('action', 'openai_generate_text');
formData.append('prompt', prompt);

fetch('/wp-admin/admin-ajax.php', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
loading.style.display = 'none';
if(data.success) {
result.value = data.data.choices[0].message.content;
result.style.display = 'block'; // show result textarea
resultC.style.display = 'block';
generateButton.disabled = false;
} else {
result.value = 'An error occurred: ' + data.data;
result.style.display = 'block'; // show result textarea
resultC.style.display = 'block';
generateButton.disabled = false;
}
})
.catch(error => {
loading.style.display = 'none';
result.value = 'An error occurred: ' + error.message;
result.style.display = 'block'; // show result textarea
resultC.style.display = 'block';
generateButton.disabled = false;
});
});

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

@emma2023 when sharing code please use the code icon (<>) above so that the indentation remains in effect. Also give a link to the website if possible so we don't mistype it from the screenshot. Have you used the "inspect" option of your browser? "Left click" the page and choose inspect in the menu options. Sometimes you can find errors this way.

@ssadvisor this is the link to the web page
https://temmykonect.com.ng/youtube-title-generator/

and have not use the inspect option of my browser i will try that now

@emma2023 do you have active OpenAI Subscribtion? with the api key set?

@admin no but am using the free plan and i have an api key set

@emma2023 you cannot use the OpenAI API unless you have paid to use it. As of this month you need to pre-purchase token credits to use the API.

@emma2023 here is the error:

Uncaught ReferenceError: generateTitle is not defined
    at HTMLButtonElement.onclick (youtube-title-generator/:283:47)

@ssadvisor

Thanks but how will I fix it

@emma2023 You need to buy tokens from OpenAI's website, then you could use their API until the tokens are finished, so you purchase again depending on how much you use.

I have the code in WP code snippet and also have created the page and copied the UI code. But when I run the code it throws error "Oops! Something went wrong. Please try again.". Am I missing something?

@google-prateeksenapati Please provide more details about which code you are using (I see you arent a Power Member, so which code are you referring to)

@google-prateeksenapati did you change the URL in the JS code?