I am building a Plugin for wordpress to use ChatGPT but getting the error, anyone know why?
Failed to load resource: the server responded with a status of 404 ()
(index):312 Uncaught ReferenceError: OpenAIChat is not defined
// API credentials
define('CHATGPT_API_KEY', 'your_api_key_here');
define('CHATGPT_API_ENDPOINT', 'https://api.openai.com/v1/');
// Register options page
add_action('admin_menu', 'chatgpt_plugin_options');
function chatgpt_plugin_options()
{
add_options_page('ChatGPT Plugin Options', 'ChatGPT Plugin', 'manage_options', 'chatgpt-plugin', 'chatgpt_plugin_options_page');
}
// Define options page content
function chatgpt_plugin_options_page()
{
?>
<div class="wrap">
<h1>ChatGPT API Settings</h1>
<form method="post" action="options.php">
<?php settings_fields('chatgpt-plugin-settings'); ?>
<?php do_settings_sections('chatgpt-plugin-settings'); ?>
<table class="form-table">
<tr valign="top">
<th scope="row">API Key</th>
<td><input type="text" name="chatgpt_api_key" value="<?php echo esc_attr(get_option('chatgpt_api_key')); ?>" /></td>
</tr>
<tr valign="top">
<th scope="row">Chatbot ID</th>
<td><input type="text" name="chatgpt_chatbot_id" value="<?php echo esc_attr(get_option('chatgpt_chatbot_id')); ?>" /></td>
</tr>
</table>
<?php submit_button(); ?>
</form>
</div>
<?php
}
// Register settings
add_action('admin_init', 'chatgpt_plugin_settings');
function chatgpt_plugin_settings()
{
register_setting('chatgpt-plugin-settings', 'chatgpt_api_key');
register_setting('chatgpt-plugin-settings', 'chatgpt_chatbot_id');
}
// Shortcode
add_shortcode('chatgpt', 'chatgpt_shortcode');
function chatgpt_shortcode()
{
wp_enqueue_script('chatgpt-api', 'https://cdn.openai.com/api/v1/chat.js', array(), '1.0.0', true);
ob_start();
?>
<div id="chatgpt-container">
<div id="chatgpt-chatbox"></div>
<form id="chatgpt-form">
<input type="text" id="chatgpt-input" autocomplete="off" placeholder="Type your message here...">
<button type="submit" id="chatgpt-submit">Send</button>
</form>
</div>
<script>
OpenAIChat.initialize({
api_key: '<?php echo esc_js(get_option('chatgpt_api_key')); ?>',
chatbot_id: '<?php echo esc_js(get_option('chatgpt_chatbot_id')); ?>',
examples: []
});
// Handle form submission
jQuery('#chatgpt-form').submit(function (event) {
event.preventDefault();
var prompt = jQuery('#chatgpt-input').val();
var chatbot_id = '<?php echo esc_js(get_option('chatgpt_chatbot_id')); ?>';
send_chatgpt_request(prompt, chatbot_id);
jQuery('#chatgpt-input').val('');
return false;
});
// Define function to send ChatGPT request
function send_chatgpt_request(prompt, chatbot_id) {
// Define the request headers
var headers = {
'Content-Type': 'application/json',
'Authorization': 'Bearer ' + '<?php echo esc_js(get_option('chatgpt_api_key')); ?>'
};
// Define the request data
var data = {
'model': chatbot_id,
'prompt': prompt,
'temperature': 0.7,
'max_tokens': 50,
'stop': ['\n']
};
// Send the request
jQuery.ajax({
url: '<?php echo esc_js(CHATGPT_API_ENDPOINT); ?>completions',
type: 'POST',
headers: headers,
data: JSON.stringify(data),
success: function (response) {
var chatbox = document.getElementById('chatgpt-chatbox');
chatbox.innerHTML += '<p><strong>You:</strong> ' + prompt + '</p>';
chatbox.innerHTML += '<p><strong>Chatbot:</strong> ' + response.choices[0].text.trim() + '</p>';
chatbox.scrollTop = chatbox.scrollHeight;
},
error: function (error) {
console.log(error);
}
});
}
</script>
<?php
return ob_get_clean();
}
// Scripts
function chatgpt_enqueue_scripts()
{
wp_enqueue_style('chatgpt-style', plugin_dir_url(__FILE__) . 'css/chatgpt.css', array(), '1.0.0', 'all');
wp_enqueue_script('chatgpt-script', plugin_dir_url(__FILE__) . 'js/chatgpt.js', array('jquery'), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'chatgpt_enqueue_scripts');