Skip to content

Commit 4902f04

Browse files
committed
Code cleanup and organization
1 parent b98dd84 commit 4902f04

File tree

5 files changed

+384
-401
lines changed

5 files changed

+384
-401
lines changed

README.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,4 +41,10 @@ A Wordpress plugin that utilizes the power of OpenAI GPT-3/GPT-4 API to generate
4141
- OpenAI API Key
4242
- Tested on clean install of Wordpress 6.3.2
4343

44-
[![screenshot](https://raw.githubusercontent.com/g023/SuperEZ-AI-SEO-Wordpress-Plugin/main/wp-superez-ai-seo-page.png)](#screenshot)
44+
[![screenshot](https://raw.githubusercontent.com/g023/SuperEZ-AI-SEO-Wordpress-Plugin/main/wp-superez-ai-seo-page.png)](#screenshot)
45+
46+
47+
## Notes
48+
v1.0.1a
49+
- Code cleanup. Release .zip should install as a wordpress zipped plugin.
50+

wp-content/plugins/superez-ai-seo/_inc.css/styles.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,11 @@
9999

100100

101101

102-
102+
.config-container {
103+
}
104+
.config-container textarea {
105+
width: 100%;
106+
}
103107

104108

105109

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!-- include from plugin dir -->
2+
<script src="{{{PLUGIN_DIR}}}_inc.js/superez-gpt-builder.gptapi.js"></script>
3+
<script src="{{{PLUGIN_DIR}}}_inc.js/superez-gpt-builder.editor.js"></script>
4+
<!-- include style from plugin dir -->
5+
<link rel="stylesheet" href="{{{PLUGIN_DIR}}}_inc.css/styles.css" type="text/css" media="all" />
6+
7+
<div class='ezseo'>
8+
9+
<div class='d-footer' site-id=''>
10+
<div class='d-footer-container'>
11+
<div class='row'>
12+
<label for="the-aikey">OpenAI API Key:</label>
13+
</div>
14+
<div class='row'>
15+
<div class='col row-fld'><input id="the-aikey" type="password" placeholder="Enter your OpenAI API key here."></div>
16+
<br>
17+
<div class='col row-btn'><button id="the-aikey-btn" class='btn button'>set api key</button></div>
18+
</div>
19+
</div>
20+
</div>
21+
22+
<br>
23+
24+
25+
26+
<!-- BEGIN: -->
27+
28+
<div class='d-ai-assistant'>
29+
<div class='d-assistant-container'>
30+
<div class='row title'>
31+
<label>: : Your AI Assistant : :</label>
32+
</div>
33+
<div class='row ai-assistant'>
34+
<br>
35+
<div class='col row-fld'><input id="the-prompt" type="text" placeholder="Make your request here (use {PAGE_TITLE} if you want):"></div>
36+
<br><br>
37+
<div class='col row-btn'><button id="the-ai-assistant-btn" class='btn button'>Get Answer</button></div>
38+
<br><br>
39+
<!-- temperature slider between 0.0 and 1.2 -->
40+
<div class='col row-fld'><input id="the-ai-assistant-temperature" type="range" min="0.0" max="1.2" step="0.1" value="0.7"></div>
41+
<!-- make slider display value -->
42+
<div class='col row-fld'><input id="the-ai-assistant-temperature-2" type="number" min="0.0" max="1.2" step="0.1" value="0.7"></div>
43+
44+
<script>
45+
46+
</script>
47+
48+
<br><br>
49+
<!-- max token input -->
50+
<span>max tokens:</span>
51+
<div class='col row-fld'><input id="the-ai-assistant-max-tokens" type="number" min="1" max="16000" step="1" value="500"></div>
52+
<br><br>
53+
<div>output:</div>
54+
<textarea id='assistant-output' rows=10 ></textarea>
55+
<br><br>
56+
<div class='col row-btn'><button id="the-ai-assistant-add-block" class='btn button'>Add Block</button></div>
57+
</div>
58+
</div>
59+
</div>
60+
<br><br>
61+
62+
<script>
63+
64+
</script>
Lines changed: 261 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,261 @@
1+
// BEGIN :: UPDATE API KEY //
2+
// when we click the the-aikey-btn we set the api key for current window. (at moment just storing in a global variable)
3+
// begin.
4+
g_apiKey = '';
5+
g_GPT = new ChatGPTClient(g_apiKey);
6+
7+
8+
// when we click the the-aikey-btn we set the api key for current window. (at moment just storing in a global variable)
9+
jQuery(document).ready(function($) {
10+
jQuery('#the-aikey-btn').click(function() {
11+
var key = $('#the-aikey').val();
12+
g_apiKey = key;
13+
g_GPT = new ChatGPTClient(g_apiKey);
14+
alert('API key set.');
15+
// blank field
16+
$('#the-aikey').val('');
17+
});
18+
});
19+
// END :: UPDATE API KEY //
20+
21+
// BEGIN :: HANDLE UPDATE TITLE FROM REVISED //
22+
/*
23+
// Get the current post title.
24+
const currentTitle = wp.data.select('core/editor').getCurrentPost().title;
25+
26+
// Define the new title.
27+
const newTitle = 'New Page Title';
28+
29+
// Update the post title using the `wp.data.dispatch` method.
30+
wp.data.dispatch('core/editor').editPost({ title: newTitle });
31+
32+
// You can also console log the old and new titles for verification.
33+
console.log('Old Title:', currentTitle);
34+
console.log('New Title:', newTitle);
35+
*/
36+
// when we click the update-main-title button we update the main title with the revised title
37+
jQuery(document).ready(function($) {
38+
jQuery('.update-main-title').click(function() {
39+
var revised_title = $('#ez-base-title').val();
40+
41+
// update the title
42+
wp.data.dispatch('core/editor').editPost({ title: revised_title });
43+
});
44+
});
45+
// END :: HANDLE UPDATE TITLE FROM REVISED //
46+
47+
48+
// -- end: 1
49+
50+
51+
// begin: 2
52+
53+
// when slider changes, update the number
54+
jQuery(document).ready(function($) {
55+
$('#the-ai-assistant-temperature').on('input', function() {
56+
$('#the-ai-assistant-temperature-2').val($(this).val());
57+
});
58+
});
59+
// when number changes, update the slider
60+
jQuery(document).ready(function($) {
61+
$('#the-ai-assistant-temperature-2').on('input', function() {
62+
$('#the-ai-assistant-temperature').val($(this).val());
63+
});
64+
});
65+
// -- end: 2
66+
67+
68+
69+
70+
// begin: 3
71+
72+
// find first {ai} tag in document and return the result after processing with the prompt
73+
// return error if prompt empty
74+
// if {PAGE_TITLE} in prompt, use the page title in place of that tag
75+
jQuery(document).ready(function($) {
76+
77+
// when + block clicked, take assistant output and insert it as a block in wp editor
78+
// BEGIN :: HOW TO INSERT A BLOCK INTO THE EDITOR
79+
/*
80+
// create a block
81+
var block = wp.blocks.createBlock('core/paragraph', {
82+
content: 'Hello World!',
83+
});
84+
// add the block to the editor
85+
wp.data.dispatch('core/editor').insertBlocks(block);
86+
*/
87+
// END :: HOW TO INSERT A BLOCK INTO THE EDITOR
88+
jQuery('#the-ai-assistant-add-block').on('click', function() {
89+
// get the output
90+
var output = $('#assistant-output').val();
91+
// if it is empty, error
92+
if (output == '') {
93+
alert('No content to add.');
94+
return;
95+
}
96+
97+
// create a block
98+
var block = wp.blocks.createBlock('core/paragraph', {
99+
content: output,
100+
});
101+
102+
// add the block to the editor
103+
// wp.data.dispatch('core/editor').insertBlocks(block); // deprecated
104+
// new: wp.data.dispatch( 'core/block-editor' ).insertBlocks`
105+
wp.data.dispatch( 'core/block-editor' ).insertBlocks( block );
106+
});
107+
108+
// when title clicked, slidetoggle
109+
jQuery('.d-ai-assistant .title').on('click', function() {
110+
jQuery('.d-ai-assistant .ai-assistant').slideToggle(10);
111+
});
112+
113+
// when assistant button clicked
114+
jQuery('#the-ai-assistant-btn').click(function() {
115+
// createBlock from wordpress
116+
117+
var prompt = $('#the-prompt').val();
118+
if (prompt == '') {
119+
alert('Please enter a prompt.');
120+
return;
121+
}
122+
// get the page title
123+
var title = $('h1.editor-post-title').html();
124+
// replace {PAGE_TITLE} with title
125+
prompt = prompt.replace('{PAGE_TITLE}', title);
126+
// get the content
127+
var content = $('.editor-post-text-editor').val();
128+
// replace {PAGE_CONTENT} with content
129+
prompt = prompt.replace('{PAGE_CONTENT}', content);
130+
// get the model
131+
var model = 'gpt-3.5-turbo-16k';
132+
// get the temperature
133+
// var temperature = 0.7;
134+
var temperature = $('#the-ai-assistant-temperature').val();
135+
console.log('temperature',temperature);
136+
// get the max tokens
137+
// var max_tokens = 60;
138+
var max_tokens = $('#the-ai-assistant-max-tokens').val();
139+
console.log('max_tokens',max_tokens);
140+
// make temperate a float
141+
temperature = parseFloat(temperature);
142+
// make max tokens an int
143+
max_tokens = parseInt(max_tokens);
144+
// set the prompt up
145+
messages = [{ role: 'user', content: prompt }];
146+
// send the request, and await a response
147+
get_response(model,messages,temperature,max_tokens, '.d-ai-assistant #assistant-output');
148+
149+
});
150+
});
151+
152+
153+
// BEGIN ::
154+
// create a function based off the code in .my-seo-fetch-revise-title
155+
async function update_output(parent_class)
156+
{
157+
// theButton is $(this)
158+
// title = jQuery('h1.editor-post-title').html();
159+
// use wp. javascript functions to get title
160+
const title = wp.data.select('core/editor').getCurrentPost().title;
161+
content = jQuery('.editor-post-text-editor').val(); // need a better option
162+
// get the parent div
163+
var parent_div = jQuery(parent_class);
164+
// get the target to send the output to
165+
var update_class = parent_class + ' .output';
166+
167+
console.log('parent_class',parent_class);
168+
console.log('update_class',update_class);
169+
170+
console.log('current_output',jQuery(update_class).val());
171+
172+
// get the prompt // parent gpt-field // child prompt
173+
// var prompt = parent_div.find('.prompt').val();
174+
var prompt = parent_div.find('.the-preprompt').val();
175+
176+
console.log('prompt',prompt);
177+
178+
// replace {POST_TITLE} with title
179+
prompt = prompt.replace('{POST_TITLE}', title);
180+
181+
// replace {POST_CONTENT} with content
182+
prompt = prompt.replace('{POST_CONTENT}', content);
183+
184+
console.log('prompt',prompt);
185+
// get the model
186+
// var model = parent_div.find('.ai-model').val();
187+
var model = parent_div.find('.the-model').val();
188+
console.log('model',model);
189+
// get the temperature
190+
// var temperature = $('.gpt-field .ai-temperature').val();
191+
// var temperature = parent_div.find('.ai-temperature').val();
192+
var temperature = parent_div.find('.the-temp').val();
193+
console.log('temperature',temperature);
194+
// get the max tokens
195+
// var max_tokens = $('.gpt-field .ai-max-tokens').val();
196+
// var max_tokens = parent_div.find('.ai-max-tokens').val();
197+
var max_tokens = parent_div.find('.the-maxtokens').val();
198+
console.log('max_tokens',max_tokens);
199+
// make temperate a float
200+
temperature = parseFloat(temperature);
201+
// make max tokens an int
202+
max_tokens = parseInt(max_tokens);
203+
// set the prompt up
204+
messages = [{ role: 'user', content: prompt }];
205+
206+
// send the request, and await a response
207+
await get_response(model,messages,temperature,max_tokens, update_class);
208+
}
209+
210+
// make an array of updateables
211+
var updateables = [
212+
'.my-seo-fetch-revise-title',
213+
'.my-seo-fetch-title',
214+
'.my-seo-fetch-ai-description',
215+
'.my-seo-fetch-ai-keywords',
216+
'.my-seo-fetch-ai-categories',
217+
'.my-seo-fetch-ai-tags',
218+
];
219+
220+
// attach click handlers to each updateable
221+
jQuery(document).ready(function($) {
222+
updateables.forEach(function(updateable) {
223+
jQuery(updateable).on('click', async function( theButton ) {
224+
var parent_class = '.gpt-field[fld='+jQuery(this).attr('fld')+']';
225+
await update_output(parent_class);
226+
});
227+
});
228+
});
229+
230+
// when we click my-seo-fetch-revise-title
231+
232+
// END ::
233+
234+
235+
// -- end: 3
236+
237+
238+
// begin: 4
239+
240+
// handle sliders for gpt-fields
241+
jQuery(document).ready(function($) {
242+
$('.gpt-field input[type=range]').on('input', function() {
243+
$(this).next().val($(this).val());
244+
});
245+
$('.gpt-field input[type=number]').on('input', function() {
246+
$(this).prev().val($(this).val());
247+
});
248+
});
249+
250+
// default hide config
251+
jQuery(document).ready(function($) {
252+
$('.gpt-field .config-container').hide();
253+
});
254+
// when click show config
255+
jQuery(document).ready(function($) {
256+
$('.gpt-field .show-hide-config').on('click', function() {
257+
$(this).parent().find('.config-container').slideToggle(10);
258+
});
259+
});
260+
261+
// -- end: 4

0 commit comments

Comments
 (0)