From 5d1b0117490b2b411a197e107bd32a0d36139f3c Mon Sep 17 00:00:00 2001
From: "Paulo H." <phalkmin@gmail.com>
Date: Tue, 16 Apr 2024 21:15:41 -0300
Subject: [PATCH] more linting and quality of life changes

---
 .vscode/settings.json   |   3 +
 admin.php               | 250 +++++++++++++++-------------------------
 auto-post.php           | 154 +++++++++++++++++--------
 css.css/admin-style.css |  38 ++++++
 gpt.php                 |  42 ++++---
 js/admin-script.js      |  45 ++++++++
 6 files changed, 317 insertions(+), 215 deletions(-)
 create mode 100644 .vscode/settings.json
 create mode 100644 css.css/admin-style.css
 create mode 100644 js/admin-script.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..51bcffd
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "docwriter.style": "Google"
+}
diff --git a/admin.php b/admin.php
index 5293acc..4a11a6e 100644
--- a/admin.php
+++ b/admin.php
@@ -1,5 +1,17 @@
 <?php
-
+/**
+ * File: admin.php
+ *
+ * This file contains functions related to the administration settings
+ * of the WP-AutoInsight plugin, including menu pages and options.
+ *
+ * @package WP-AutoInsight
+ */
+
+/**
+ * The function `abcc_add_subpages_to_menu` adds subpages for "Text Settings" and "Advanced Settings"
+ * under the main menu page "WP-AutoInsight" in WordPress admin menu.
+ */
 function abcc_add_subpages_to_menu() {
 	add_menu_page(
 		__( 'WP-AutoInsight', 'automated-blog-content-creator' ),
@@ -29,27 +41,60 @@ function abcc_add_subpages_to_menu() {
 }
 add_action( 'admin_menu', 'abcc_add_subpages_to_menu' );
 
+/**
+ * The function `wpai_category_dropdown` is used to display a dropdown of categories in the WordPress admin
+ * for the OpenAI blog post generator plugin.
+ *
+ * @param array $selected_categories An array of category IDs that should be selected by default.
+ */
+function wpai_category_dropdown( $selected_categories = array() ) {
+	$categories = get_categories( array( 'hide_empty' => 0 ) );
+	echo '<select class="wpai-category-select" name="openai_selected_categories[]" multiple="multiple" style="width:100%;">';
+	foreach ( $categories as $category ) {
+		$selected = in_array( $category->term_id, $selected_categories ) ? ' selected="selected"' : '';
+		echo '<option value="' . esc_attr( $category->term_id ) . '"' . esc_html( $selected ) . '>' . esc_html( $category->name ) . '</option>';
+	}
+	echo '</select>';
+}
+
+
+/**
+ * The function `abcc_openai_text_settings_page` is used to display and handle settings for an OpenAI
+ * blog post generator, including options for keywords, tone selection, and category selection.
+ */
 function abcc_openai_text_settings_page() {
 
-	if ( isset( $_POST['submit'], $_POST['abcc_openai_nonce'] ) && wp_verify_nonce( $_POST['abcc_openai_nonce'], 'abcc_openai_generate_post' ) ) {
-		$keywords = isset( $_POST['openai_keywords'] ) ? sanitize_text_field( wp_unslash( $_POST['openai_keywords'] ) ) : '';
-		$tone     = isset( $_POST['openai_tone'] ) ? sanitize_text_field( wp_unslash( $_POST['openai_tone'] ) ) : '';
+	if ( isset( $_POST['submit'], $_POST['abcc_openai_nonce'] ) && wp_verify_nonce( sanitize_key( $_POST['abcc_openai_nonce'] ), 'abcc_openai_generate_post' ) ) {
 
+		$keywords            = isset( $_POST['openai_keywords'] ) ? sanitize_text_field( wp_unslash( $_POST['openai_keywords'] ) ) : '';
 		$selected_categories = isset( $_POST['openai_selected_categories'] ) ? array_map( 'intval', $_POST['openai_selected_categories'] ) : array();
 
+		if ( isset( $_POST['openai_tone'] ) ) {
+			$openai_tone = sanitize_text_field( wp_unslash( $_POST['openai_tone'] ) );
+
+			if ( 'custom' === $openai_tone ) {
+				$custom_tone = isset( $_POST['custom_tone'] ) ? sanitize_text_field( wp_unslash( $_POST['custom_tone'] ) ) : '';
+				update_option( 'custom_tone', $custom_tone );
+			}
+
+			update_option( 'openai_tone', $openai_tone );
+		}
+
 		update_option( 'openai_keywords', wp_unslash( $keywords ) );
-		update_option( 'openai_tone', wp_unslash( $tone ) );
 		update_option( 'openai_selected_categories', $selected_categories );
 
 	}
 
-	$categories          = get_categories( array( 'hide_empty' => false ) );
 	$selected_categories = get_option( 'openai_selected_categories', array() );
-	$openai_tone         = get_option( 'openai_tone', 'default' );
-	$keywords            = get_option( 'openai_keywords', '' );
-	$schedule_info       = get_openai_event_schedule();
-	$selected_value      = get_option( 'openai_tone' ); // Obter o valor atualmente selecionado
 
+	$keywords      = get_option( 'openai_keywords', '' );
+	$schedule_info = get_openai_event_schedule();
+	$tone          = get_option( 'openai_tone', '' );
+	if ( get_option( 'custom_tone' ) != '' ) {
+		$custom_tone_value = get_option( 'custom_tone' );
+	} else {
+		$custom_tone_value = '';
+	}
 
 	if ( $schedule_info ) {
 		echo '<div class="notice notice-info">
@@ -61,49 +106,18 @@ function abcc_openai_text_settings_page() {
 	  		</div>';
 	}
 
+	$tones = array(
+		'default'  => 'Use a default tone',
+		'business' => 'Business-oriented',
+		'academic' => 'Academic',
+		'funny'    => 'Funny',
+		'epic'     => 'Epic',
+		'personal' => 'Personal',
+		'custom'   => 'Custom',
+	);
 	?>
-
-	<style>
-		.abcc-settings-wrapper .postbox {
-			margin-bottom: 20px;
-		}
-
-		.abcc-settings-wrapper .postbox h2 {
-			border-bottom: 1px solid #eee;
-			padding: 10px;
-		}
-
-		.abcc-settings-wrapper .postbox .inside {
-			padding: 10px 20px;
-		}
-
-		.abcc-settings-wrapper .form-table th {
-			width: 20%;
-		}
-
-		.abcc-settings-wrapper .form-table td {
-			padding: 10px 0;
-		}
-
-		.abcc-settings-wrapper .form-table input[type="text"],
-		.abcc-settings-wrapper .form-table textarea {
-			width: 100%;
-		}
-
-		.abcc-settings-wrapper .form-table input[type="checkbox"] {
-			margin-right: 5px;
-		}
-
-		.abcc-settings-wrapper .form-table .description {
-			margin-top: 5px;
-			display: block;
-		}
-
-		.abcc-settings-wrapper .submit {
-			padding: 10px 20px;
-		}
-	</style>
 	<div class="wrap">
+
 		<h1><?php echo esc_html__( 'OpenAI Blog Post Generator', 'automated-blog-content-creator' ); ?></h1>
 		<div id="poststuff">
 			<div id="post-body" class="metabox-holder columns-2">
@@ -127,28 +141,23 @@ function abcc_openai_text_settings_page() {
 											</td>
 										</tr>
 										<tr>
-											<th scope="row"><label for="openai_tone">
+											<th scope="row">
+												<label for="openai_tone">
 													<?php echo esc_html__( 'Tone you want to use:', 'automated-blog-content-creator' ); ?>
-												</label></th>
+												</label>
+											</th>
 											<td>
-												<input type="radio" id="default" name="openai_tone" value="default" <?php echo ( $selected_value == 'default' ) ? 'checked' : ''; ?>>
-												<label for="default">Use a default tone</label>
-
-												<input type="radio" id="business" name="openai_tone" value="business" <?php echo ( $selected_value == 'business' ) ? 'checked' : ''; ?>>
-												<label for="business">Business-oriented</label>
-
-												<input type="radio" id="academic" name="openai_tone" value="academic" <?php echo ( $selected_value == 'academic' ) ? 'checked' : ''; ?>>
-												<label for="academic">Academic</label>
-
-												<input type="radio" id="funny" name="openai_tone" value="funny" <?php echo ( $selected_value == 'funny' ) ? 'checked' : ''; ?>>
-												<label for="Funny">Funny</label>
-
-												<input type="radio" id="epic" name="openai_tone" value="epic" <?php echo ( $selected_value == 'epic' ) ? 'checked' : ''; ?>>
-												<label for="epic">Epic</label>
-
-												<input type="radio" id="personal" name="openai_tone" value="personal" <?php echo ( $selected_value == 'personal' ) ? 'checked' : ''; ?>>
-												<label for="personal">Personal</label>
-
+												<?php foreach ( $tones as $value => $label ) : ?>
+													<input type="radio" id="<?php echo esc_attr( $value ); ?>"
+														name="openai_tone" value="<?php echo esc_attr( $value ); ?>" <?php echo ( $tone == $value ) ? 'checked' : ''; ?>>
+													<label
+														for="<?php echo esc_attr( $value ); ?>"><?php echo esc_attr( $label ); ?></label>
+												<?php endforeach; ?>
+
+												<!-- Custom Tone Input Field -->
+												<input type="text" id="custom_tone" name="custom_tone"
+													value="<?php echo esc_attr( $custom_tone_value ); ?>" <?php echo ( $tone == $value ) ? 'checked' : ''; ?>
+													style="<?php echo ( 'custom' == $tone ) ? '' : 'display:none;'; ?>">
 											</td>
 										</tr>
 										<tr>
@@ -156,14 +165,7 @@ function abcc_openai_text_settings_page() {
 													<?php echo esc_html__( 'Select Categories:', 'automated-blog-content-creator' ); ?>
 												</label></th>
 											<td>
-												<?php foreach ( $categories as $category ) { ?>
-													<label>
-														<input type="checkbox" name="openai_selected_categories[]"
-															value="<?php echo esc_attr( $category->term_id ); ?>" <?php checked( in_array( $category->term_id, $selected_categories ) ); ?>>
-														<?php echo esc_html( $category->name ); ?>
-													</label>
-													<br>
-												<?php } ?>
+												<?php wpai_category_dropdown( $selected_categories ); ?>
 											</td>
 										</tr>
 									</table>
@@ -183,38 +185,15 @@ class="button button-secondary"><?php echo esc_attr__( 'Create post manually', '
 		</div>
 	</div>
 
-	<script>
-		(function ($) {
-			$('#generate-post').on('click', function () {
-				var $btn = $(this);
-				$btn.prop('disabled', true);
-
-				$.ajax({
-					url: ajaxurl,
-					method: 'POST',
-					data: {
-						action: 'openai_generate_post',
-						_ajax_nonce: $('#abcc_openai_nonce').val(),
-					},
-					success: function (response) {
-						alert(response.data);
-					},
-					error: function (xhr) {
-						alert('<?php echo esc_js( 'Error generating post:', 'automated-blog-content-creator' ); ?> ' + xhr.responseText);
-					},
-					complete: function () {
-						$btn.prop('disabled', false);
-					}
-				});
-			});
-		})(jQuery);
-	</script>
-
 	<?php
 }
+/**
+ * The function abcc_openai_blog_post_options_page() is used to display and handle options for an
+ * OpenAI blog post generator plugin in WordPress.
+ */
 function abcc_openai_blog_post_options_page() {
 
-	if ( isset( $_POST['submit'], $_POST['abcc_openai_nonce'] ) && wp_verify_nonce( $_POST['abcc_openai_nonce'], 'abcc_openai_generate_post' ) ) {
+	if ( isset( $_POST['submit'], $_POST['abcc_openai_nonce'] ) && wp_verify_nonce( sanitize_key( $_POST['abcc_openai_nonce'] ), 'abcc_openai_generate_post' ) ) {
 		$api_key                    = isset( $_POST['openai_api_key'] ) ? sanitize_text_field( wp_unslash( $_POST['openai_api_key'] ) ) : '';
 		$gemini_api_key             = isset( $_POST['gemini_api_key'] ) ? sanitize_text_field( wp_unslash( $_POST['gemini_api_key'] ) ) : '';
 		$auto_create                = isset( $_POST['openai_auto_create'] ) ? sanitize_text_field( wp_unslash( $_POST['openai_auto_create'] ) ) : '';
@@ -232,8 +211,8 @@ function abcc_openai_blog_post_options_page() {
 
 	$api_key                    = get_option( 'openai_api_key', '' );
 	$gemini_api_key             = get_option( 'gemini_api_key', '' );
-	$auto_create                = get_option( 'openai_auto_create', 'none' ); // Default to 'none'
-	$prompt_select              = get_option( 'prompt_select', 'openai' ); // Default to 'openai'
+	$auto_create                = get_option( 'openai_auto_create', 'none' );
+	$prompt_select              = get_option( 'prompt_select', 'openai' );
 	$char_limit                 = get_option( 'openai_char_limit', 200 );
 	$openai_email_notifications = get_option( 'openai_email_notifications', false );
 
@@ -251,47 +230,6 @@ function abcc_openai_blog_post_options_page() {
 	}
 	?>
 
-	<style>
-		.abcc-settings-wrapper .postbox {
-			margin-bottom: 20px;
-		}
-
-		.abcc-settings-wrapper .postbox h2 {
-			border-bottom: 1px solid #eee;
-			padding: 10px;
-		}
-
-		.abcc-settings-wrapper .postbox .inside {
-			padding: 10px 20px;
-		}
-
-		.abcc-settings-wrapper .form-table th {
-			width: 20%;
-		}
-
-		.abcc-settings-wrapper .form-table td {
-			padding: 10px 0;
-		}
-
-		.abcc-settings-wrapper .form-table input[type="text"],
-		.abcc-settings-wrapper .form-table textarea {
-			width: 100%;
-		}
-
-		.abcc-settings-wrapper .form-table input[type="checkbox"] {
-			margin-right: 5px;
-		}
-
-		.abcc-settings-wrapper .form-table .description {
-			margin-top: 5px;
-			display: block;
-		}
-
-		.abcc-settings-wrapper .submit {
-			padding: 10px 20px;
-		}
-	</style>
-
 	<div class="wrap">
 		<h1><?php echo esc_html__( 'OpenAI Blog Post Generator', 'automated-blog-content-creator' ); ?></h1>
 		<div id="poststuff">
@@ -307,7 +245,8 @@ function abcc_openai_blog_post_options_page() {
 								<div class="inside">
 									<table class="form-table">
 										<?php
-										if ( ! defined( 'OPENAI_API' ) ) { ?>
+										if ( ! defined( 'OPENAI_API' ) ) {
+											?>
 											<tr>
 												<th scope="row"><label for="openai_api_key">
 														<?php echo esc_html__( 'OpenAI API key:', 'automated-blog-content-creator' ); ?>
@@ -324,9 +263,11 @@ class="regular-text"><small>for extra security, it's advised to include
 											echo '<tr><th colspan="2">';
 											echo '<strong>Your OpenAI API key is already set in wp-config.php.</strong>';
 											echo '</tr></th><td></td>';
-										} ?>
+										}
+										?>
 										<?php
-										if ( ! defined( 'GEMINI_API' ) ) { ?>
+										if ( ! defined( 'GEMINI_API' ) ) {
+											?>
 											<tr>
 												<th scope="row"><label for="gemini_api_key">
 														<?php echo esc_html__( 'Gemini API key:', 'automated-blog-content-creator' ); ?>
@@ -343,7 +284,8 @@ class="regular-text"><small>for extra security, it's advised to include
 											echo '<tr><th colspan="2">';
 											echo '<strong>Your Gemini API key is already set in wp-config.php.</strong>';
 											echo '</tr></th><td></td>';
-										} ?>
+										}
+										?>
 										<tr>
 											<th scope="row"><label for="openai_api_key">
 													<?php echo esc_html__( 'Which engine will you use to create the prompt?', 'automated-blog-content-creator' ); ?>
diff --git a/auto-post.php b/auto-post.php
index d916db2..65c3fc6 100644
--- a/auto-post.php
+++ b/auto-post.php
@@ -1,40 +1,55 @@
 <?php
-/*
-Plugin Name: WP-AutoInsight - (former Automated Blog Content Creator)
-Description: Create blog posts automatically using the OpenAI and Gemini APIs!
-Version: 1.4
-Author: Paulo H. Alkmin
-Author URI: https://phalkmin.me/
-Text Domain: automated-wordpress-content-creator
-Domain Path: /languages
-*/
+/**
+ * Plugin Name: WP-AutoInsight
+ * Description: Create blog posts automatically using the OpenAI and Gemini APIs!
+ * Version: 1.5
+ * Author: Paulo H. Alkmin
+ * Author URI: https://phalkmin.me/
+ * Text Domain: automated-wordpress-content-creator
+ * Domain Path: /languages
+ *
+ * @package WP-AutoInsight
+ */
 
 if ( ! defined( 'ABSPATH' ) ) {
 	exit; // Exit if accessed directly.
 }
 
 require_once __DIR__ . '/vendor/autoload.php';
-include ( plugin_dir_path( __FILE__ ) . 'admin.php' );
-include ( plugin_dir_path( __FILE__ ) . 'gpt.php' );
+require plugin_dir_path( __FILE__ ) . 'admin.php';
+require plugin_dir_path( __FILE__ ) . 'gpt.php';
+
+
+/**
+ * The function `abcc_enqueue_scripts` is used to enqueue CSS and JavaScript files, including Select2
+ * library, for the WordPress admin area.
+ */
+function abcc_enqueue_scripts() {
+	wp_enqueue_style( 'select2-css', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css', array(), '4.1.0-rc.0' );
+	wp_enqueue_script( 'select2-js', 'https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js', 'jquery', '4.1.0-rc.0' );
+	wp_enqueue_style( 'abcc-admin-style', plugins_url( '/css/admin-style.css', __FILE__ ) );
+	wp_enqueue_script( 'abcc-admin-script', plugins_url( '/js/admin-script.js', __FILE__ ), array( 'jquery' ), '1.0', true );
+}
+add_action( 'admin_enqueue_scripts', 'abcc_enqueue_scripts' );
 
 
 
 
 /**
- * The below functions are used to create and output Gutenberg blocks in WordPress.
+ * The function abcc_create_block creates a WordPress block with specified attributes and content.
  *
- * @param string $block_name The name of the Gutenberg block being created.
- * @param array  $attributes The attributes parameter is an array that contains the attributes of a Gutenberg
- *  block. These attributes can include things like alignment, font size, background color, etc. The
- *  attributes are passed to the abcc_create_block function as the second parameter and are then encoded
- *  as a JSON string using the wp_json_encode function.
- * @param string $content The content parameter is the actual content that will be displayed within the block.
- * It can be any valid HTML or text content.
+ * @param string $block_name The `block_name` parameter in the `abcc_create_block` function is used to specify
+ * the name of the block that you want to create. This could be the name of a custom block that you
+ * have registered in WordPress or a core block like 'paragraph', 'heading', 'image', etc
+ * @param array  $attributes The `abcc_create_block` function you provided is used to create a block in
+ *  WordPress with the specified block name, attributes, and content. Here's an explanation of the
+ *  parameters:
+ * @param string $content The `abcc_create_block` function you provided is used to create a block of content
+ * for the WordPress block editor. The function takes three parameters:
  *
- * @return array The code contains three functions. The first function `abcc_create_block` takes in a block
- * name, attributes, and content and returns a string of HTML code for that block. The second function
- * `abcc_create_blocks` takes in an array of text items, creates a paragraph block for each item, and
- * returns an array of blocks. The third function `abcc_gutenberg_blocks` takes in
+ * @return $block_content - The function `abcc_create_block` returns a block of content in the format used by the
+ * WordPress block editor (Gutenberg). The content includes the block name, attributes encoded as a
+ * JSON string, and the block content itself enclosed in HTML comments.
  */
 function abcc_create_block( $block_name, $attributes = array(), $content = '' ) {
 	$attributes_string = wp_json_encode( $attributes );
@@ -42,13 +57,30 @@ function abcc_create_block( $block_name, $attributes = array(), $content = '' )
 	return $block_content;
 }
 
+
+/**
+ * The function `abcc_create_blocks` creates an array of paragraph blocks with specified attributes
+ * from a given array of text items.
+ *
+ * @param string $text_array The `abcc_create_blocks` function takes an array of text items as input and
+ * creates an array of blocks based on each text item. Each block has a predefined structure with a
+ * name, attributes, and content.
+ *
+ * @return $blocks The function `abcc_create_blocks` takes an array of text items as input, creates blocks for
+ * each non-empty item, and returns an array of blocks. Each block has a name of 'paragraph',
+ * attributes including alignment and a custom attribute with a value, and the content sanitized using
+ * `wp_kses_post`.
+ */
 function abcc_create_blocks( $text_array ) {
 	$blocks = array();
 	foreach ( $text_array as $item ) {
 		if ( ! empty( $item ) ) {
 			$block    = array(
 				'name' => 'paragraph',
-				'attributes' => array( 'align' => 'left', 'custom_attribute' => 'value' ),
+				'attributes' => array(
+					'align' => 'left',
+					'custom_attribute' => 'value',
+				),
 				'content' => wp_kses_post( $item ),
 			);
 			$blocks[] = $block;
@@ -57,6 +89,17 @@ function abcc_create_blocks( $text_array ) {
 	return $blocks;
 }
 
+
+
+/**
+ * The function abcc_gutenberg_blocks processes an array of blocks to create block contents in PHP.
+ *
+ * @param array $blocks The `abcc_gutenberg_blocks` function takes an array of blocks as a parameter. Each
+ * block in the array should have the following structure:
+ *
+ * @return $block_contents The function `abcc_gutenberg_blocks` is returning the concatenated block contents generated
+ * by calling the `abcc_create_block` function for each block in the input array ``.
+ */
 function abcc_gutenberg_blocks( $blocks = array() ) {
 	$block_contents = '';
 	foreach ( $blocks as $block ) {
@@ -66,17 +109,30 @@ function abcc_gutenberg_blocks( $blocks = array() ) {
 }
 
 /**
- * The function generates a draft post with a title and content based on given keywords using OpenAI's
- * text and image generation API.
+ * The function `abcc_openai_generate_post` generates a new post for a WordPress site using OpenAI or
+ * Gemini API based on specified keywords, tone, and other parameters, and includes content creation,
+ * image generation, and post creation functionalities.
  *
- * @param string  $api_key The API key needed to access the OpenAI API for generating text and images.
- * @param string  $keywords An array of keywords that will be used as the basis for generating the article
- *  content.
- * @param boolean $auto_create The auto_create parameter is a boolean value that determines whether or not to
- * automatically create a featured image for the post using the images generated by the OpenAI API. If
- * set to true, the function will attempt to upload the first generated image as the post's featured
- * image.
- * @param string  $char_limit The maximum number of characters that the generated text should have.
+ * @param string  $api_key The `api_key` parameter is used to authenticate and authorize access to the OpenAI
+ *  API. It is a unique key provided by OpenAI that allows your application to interact with their
+ *  services securely. This key is essential for making requests to generate text and images using
+ *  OpenAI's models and tools. Make
+ * @param string  $keywords The `abcc_openai_generate_post` function generates a new post for a WordPress site
+ *  using OpenAI or Gemini API. Here's an explanation of the parameters:
+ * @param string  $tone The `tone` parameter in the `abcc_openai_generate_post` function is used to specify the
+ *  tone or style of writing for the generated article. It defaults to 'default', but you can provide
+ *  different tones such as formal, casual, professional, friendly, etc., depending on the desired voice
+ * @param boolean $auto_create The `auto_create` parameter in the `abcc_openai_generate_post` function is a
+ * boolean parameter that determines whether the post should be automatically created or not. If set to
+ * `true`, the function will automatically create a draft post based on the provided parameters. If set
+ * to `false`, the
+ * @param string  $char_limit The `char_limit` parameter in the `abcc_openai_generate_post` function specifies
+ *  the character limit for the generated post content. In this function, the default value for
+ *  `char_limit` is set to 200 characters. This means that the generated post content will be limited to
+ *  200 characters
+ * @param string  $prompt_select The `prompt_select` parameter in the `abcc_openai_generate_post` function
+ *  determines whether to use OpenAI or Gemini for generating text content. It is used to select the
+ *  service that will be responsible for generating the article content based on the provided prompt.
  */
 function abcc_openai_generate_post( $api_key, $keywords, $tone = 'default', $auto_create = false, $char_limit = 200, $prompt_select ) {
 
@@ -93,7 +149,7 @@ function abcc_openai_generate_post( $api_key, $keywords, $tone = 'default', $aut
 	$site_name        = get_bloginfo( 'name' );
 	$site_description = get_bloginfo( 'description' );
 	$site_url         = get_bloginfo( 'url' );
-	$cat_images       = "";
+	$cat_images       = '';
 
 	$prompt = __( 'My work is to create well-optimized SEO articles for the site ', 'automated-blog-content-creator' ) . $site_name;
 
@@ -116,16 +172,20 @@ function abcc_openai_generate_post( $api_key, $keywords, $tone = 'default', $aut
 		$cat_images = __( 'Emphasize on: "', 'automated-blog-content-creator' ) . implode( ', ', $category_names ) . __( '" and other relevant visual elements.', 'automated-blog-content-creator' );
 	}
 
-	$prompt_images = sprintf( __( 'Draw images representing %1$s . %2$s Visit %3$s for inspiration.', 'automated-blog-content-creator' ), implode( ', ', array_map( 'sanitize_text_field', $keywords ) ), $cat_images, $site_url );
-
-	if ( $prompt_select == 'openai' ) {
+	$prompt_images = sprintf(
+		// translators: %1$s is a list of keywords, %2$s is a string representing category images, %3$s is the site URL.
+		__( 'Draw images representing %1$s. %2$s Visit %3$s for inspiration.', 'automated-blog-content-creator' ),
+		implode( ', ', array_map( 'sanitize_text_field', $keywords ) ),
+		$cat_images,
+		$site_url
+	);
+	if ( 'openai' == $prompt_select ) {
 		$text   = abcc_openai_generate_text( $api_key, $prompt, $char_limit );
 		$images = abcc_openai_generate_images( $api_key, $prompt_images, 1 );
-	} elseif ( $prompt_select == 'gemini' ) {
+	} elseif ( 'gemini' == $prompt_select ) {
 		$text = abcc_gemini_generate_text( $api_key, $prompt, $char_limit );
 	}
 
-
 	foreach ( $text as $key => $value ) {
 		if ( strpos( $value, '<h1>' ) !== false && strpos( $value, '</h1>' ) !== false ) {
 			$title = str_replace( array( '<h1>', '</h1>' ), '', $value );
@@ -163,7 +223,7 @@ function abcc_openai_generate_post( $api_key, $keywords, $tone = 'default', $aut
 
 			if ( is_wp_error( $attachment_id ) ) {
 				error_log( 'Error getting image: ' . $attachment_id->get_error_message() . 'image: ' . $image_url );
-			} else if ( is_numeric( $attachment_id ) ) {
+			} elseif ( is_numeric( $attachment_id ) ) {
 				set_post_thumbnail( $post_id, intval( $attachment_id ) );
 				break;
 			} else {
@@ -198,7 +258,7 @@ function get_openai_event_schedule() {
  * This function generates a post daily using OpenAI API based on specified keywords and character
  * limit.
  *
- * @return nothing if any of the following conditions are met:
+ * return nothing if any of the following conditions are met:
  * - The OpenAI API key is empty
  * - The OpenAI keywords are empty
  * - The OpenAI auto-create option is false
@@ -210,7 +270,7 @@ function abcc_openai_generate_post_scheduled() {
 	$auto_create = get_option( 'openai_auto_create', 'none' );
 	$char_limit  = get_option( 'openai_char_limit', 200 );
 
-	if ( empty( $api_key ) || empty( $keywords ) || $auto_create === 'none' ) {
+	if ( empty( $api_key ) || empty( $keywords ) || 'none' === $auto_create ) {
 		return;
 	}
 
@@ -227,8 +287,8 @@ function abcc_schedule_openai_event() {
 	wp_clear_scheduled_hook( 'abcc_openai_generate_post_hook' );
 
 	// Scheduling the event based on the selected option.
-	if ( $selected_option !== 'none' ) {
-		$schedule_interval = ( $selected_option === 'hourly' ) ? 'hourly' : ( ( $selected_option === 'weekly' ) ? 'weekly' : 'daily' );
+	if ( 'none' !== $selected_option ) {
+		$schedule_interval = ( 'hourly' === $selected_option ) ? 'hourly' : ( ( 'weekly' === $selected_option ) ? 'weekly' : 'daily' );
 		wp_schedule_event( time(), $schedule_interval, 'abcc_openai_generate_post_hook' );
 	}
 }
@@ -265,7 +325,7 @@ function abcc_openai_generate_post_ajax() {
 	$prompt_select = get_option( 'prompt_select', 'openai' );
 
 	if ( empty( $api_key ) || empty( $keywords ) ) {
-		wp_send_json_error( esc_html__( 'API Key, Prompt Engine or keywords not set.' . $api_key, 'automated-blog-content-creator' ) );
+		wp_send_json_error( esc_html__( 'API Key, Prompt Engine or keywords not set.', 'automated-blog-content-creator' ) );
 	}
 
 	abcc_openai_generate_post( $api_key, $keywords, $tone, false, $char_limit, $prompt_select );
@@ -285,4 +345,4 @@ function abcc_openai_deactivate_plugin() {
 add_action( 'admin_notices', 'display_openai_settings_errors' );
 function display_openai_settings_errors() {
 	settings_errors( 'openai-settings' );
-}
\ No newline at end of file
+}
diff --git a/css.css/admin-style.css b/css.css/admin-style.css
new file mode 100644
index 0000000..48a516e
--- /dev/null
+++ b/css.css/admin-style.css
@@ -0,0 +1,38 @@
+.abcc-settings-wrapper .postbox {
+  margin-bottom: 20px;
+}
+
+.abcc-settings-wrapper .postbox h2 {
+  border-bottom: 1px solid #eee;
+  padding: 10px;
+}
+
+.abcc-settings-wrapper .postbox .inside {
+  padding: 10px 20px;
+}
+
+.abcc-settings-wrapper .form-table th {
+  width: 20%;
+}
+
+.abcc-settings-wrapper .form-table td {
+  padding: 10px 0;
+}
+
+.abcc-settings-wrapper .form-table input[type="text"],
+.abcc-settings-wrapper .form-table textarea {
+  width: 100%;
+}
+
+.abcc-settings-wrapper .form-table input[type="checkbox"] {
+  margin-right: 5px;
+}
+
+.abcc-settings-wrapper .form-table .description {
+  margin-top: 5px;
+  display: block;
+}
+
+.abcc-settings-wrapper .submit {
+  padding: 10px 20px;
+}
diff --git a/gpt.php b/gpt.php
index 37c08dd..eee66f9 100644
--- a/gpt.php
+++ b/gpt.php
@@ -4,6 +4,24 @@
 use GeminiAPI\Client;
 use GeminiAPI\Resources\Parts\TextPart;
 
+/**
+ * The function `abcc_gemini_generate_text` uses the Gemini API to generate text based on a prompt and
+ * returns the generated text as an array of lines.
+ *
+ * @param api_key The `api_key` parameter is the API key that is required to authenticate and access
+ * the Gemini API. This key is used to identify and authorize the user making the API request. Make
+ * sure you have a valid and authorized API key to use in the `abcc_gemini_generate_text` function.
+ * @param prompt The `prompt` parameter in the `abcc_gemini_generate_text` function is the input text
+ * that will be used to generate additional text using the Gemini API. It serves as the starting point
+ * or context for the AI model to continue generating text based on the provided prompt.
+ * @param length The `` parameter in the `abcc_gemini_generate_text` function determines the
+ * maximum length of the text that will be generated by the Gemini API. This parameter specifies the
+ * number of characters or words that the generated text should contain. You can set this parameter to
+ * control the length of the text
+ *
+ * @return An array containing the text generated by the Gemini API in response to the provided prompt.
+ * Each element of the array represents a line of text from the generated content.
+ */
 function abcc_gemini_generate_text( $api_key, $prompt, $length ) {
 
 	$gemini = new Client( $api_key );
@@ -47,11 +65,11 @@ function abcc_openai_generate_text( $api_key, $prompt, $length ) {
 
 	$response = $openai->completion(
 		array(
-			'model' => 'gpt-3.5-turbo-instruct',
-			'prompt' => wp_kses_post( $prompt ),
-			'max_tokens' => absint( $length ),
-			'n' => 1,
-			'stop' => null,
+			'model'       => 'gpt-3.5-turbo-instruct',
+			'prompt'      => wp_kses_post( $prompt ),
+			'max_tokens'  => absint( $length ),
+			'n'           => 1,
+			'stop'        => null,
 			'temperature' => 0.8,
 		)
 	);
@@ -93,11 +111,11 @@ function abcc_openai_generate_images( $api_key, $prompt, $n, $image_size = '1024
 
 	$response = $openai->image(
 		array(
-			'model' => 'dall-e-3',
-			'prompt' => wp_kses_post( $prompt ),
-			'n' => absint( $n ),
-			'size' => $image_size,
-			'response_format' => 'url'
+			'model'           => 'dall-e-3',
+			'prompt'          => wp_kses_post( $prompt ),
+			'n'               => absint( $n ),
+			'size'            => $image_size,
+			'response_format' => 'url',
 		)
 	);
 
@@ -123,7 +141,3 @@ function abcc_openai_generate_images( $api_key, $prompt, $n, $image_size = '1024
 		return $urls;
 	}
 }
-
-
-
-?>
\ No newline at end of file
diff --git a/js/admin-script.js b/js/admin-script.js
new file mode 100644
index 0000000..32b3482
--- /dev/null
+++ b/js/admin-script.js
@@ -0,0 +1,45 @@
+jQuery(document).ready(function ($) {
+  // Event listener for changing tone selection
+  $('input[type="radio"][name="openai_tone"]').change(function () {
+    if ($("#custom").is(":checked")) {
+      $("#custom_tone").show();
+    } else {
+      $("#custom_tone").hide();
+    }
+  });
+
+  // Trigger the change event to set the initial visibility state
+  $('input[type="radio"][name="openai_tone"]:checked').change();
+
+  // Apply select2 to category select input for improved UX
+  $(".wpai-category-select").select2();
+  $(".wpai-category-select").trigger("change");
+
+  // Event listener for generate post button
+  $("#generate-post").on("click", function () {
+    var $btn = $(this);
+    $btn.prop("disabled", true);
+
+    $.ajax({
+      url: ajaxurl,
+      method: "POST",
+      data: {
+        action: "openai_generate_post",
+        _ajax_nonce: $("#abcc_openai_nonce").val(),
+      },
+      success: function (response) {
+        alert(response.data);
+      },
+      error: function (xhr) {
+        alert("Error generating post: " + xhr.responseText);
+      },
+      complete: function () {
+        $btn.prop("disabled", false);
+      },
+    });
+  });
+});
+
+jQuery(document).ajaxComplete(function () {
+  $(".wpai-category-select").select2();
+});