From 10e36ea7895296ec909fff4aff0875424071e734 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 20:00:14 +0530
Subject: [PATCH 01/27] add `get_image_quality_options()`

---
 includes/Classifai/Providers/OpenAI/DallE.php | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/includes/Classifai/Providers/OpenAI/DallE.php b/includes/Classifai/Providers/OpenAI/DallE.php
index aaf3d63de..dcd417254 100644
--- a/includes/Classifai/Providers/OpenAI/DallE.php
+++ b/includes/Classifai/Providers/OpenAI/DallE.php
@@ -110,10 +110,7 @@ public function render_provider_fields() {
 			[
 				'option_index'  => static::ID,
 				'label_for'     => 'quality',
-				'options'       => [
-					'standard' => __( 'Standard', 'classifai' ),
-					'hd'       => __( 'High Definition', 'classifai' ),
-				],
+				'options'       => self::get_image_quality_options(),
 				'default_value' => $settings['quality'],
 				'description'   => __( 'The quality of the image that will be generated. High Definition creates images with finer details and greater consistency across the image but costs more.', 'classifai' ),
 				'class'         => 'classifai-provider-field hidden provider-scope-' . static::ID,
@@ -160,6 +157,18 @@ public function render_provider_fields() {
 		);
 	}
 
+	/**
+	 * Returns the quality options for the provider.
+	 *
+	 * @return array
+	 */
+	public static function get_image_quality_options() {
+		return array(
+			'standard' => __( 'Standard', 'classifai' ),
+			'hd'       => __( 'High Definition', 'classifai' ),
+		);
+	}
+
 	/**
 	 * Returns the default settings for the provider.
 	 *

From d3efe1199ae079851c105bea80ccbd50a869b89f Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 20:00:43 +0530
Subject: [PATCH 02/27] add `get_image_size_options()`

---
 includes/Classifai/Providers/OpenAI/DallE.php | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/includes/Classifai/Providers/OpenAI/DallE.php b/includes/Classifai/Providers/OpenAI/DallE.php
index dcd417254..e5c5b8611 100644
--- a/includes/Classifai/Providers/OpenAI/DallE.php
+++ b/includes/Classifai/Providers/OpenAI/DallE.php
@@ -126,11 +126,7 @@ public function render_provider_fields() {
 			[
 				'option_index'  => static::ID,
 				'label_for'     => 'image_size',
-				'options'       => [
-					'1024x1024' => '1024x1024 (square)',
-					'1792x1024' => '1792x1024 (landscape)',
-					'1024x1792' => '1024x1792 (portrait)',
-				],
+				'options'       => self::get_image_size_options(),
 				'default_value' => $settings['image_size'],
 				'description'   => __( 'Size of generated images. Larger sizes cost more.', 'classifai' ),
 				'class'         => 'classifai-provider-field hidden provider-scope-' . static::ID,
@@ -169,6 +165,19 @@ public static function get_image_quality_options() {
 		);
 	}
 
+	/**
+	 * Returns the image size options for the provider.
+	 *
+	 * @return array
+	 */
+	public static function get_image_size_options() {
+		return array(
+			'1024x1024' => '1024x1024 (square)',
+			'1792x1024' => '1792x1024 (landscape)',
+			'1024x1792' => '1024x1792 (portrait)',
+		);
+	}
+
 	/**
 	 * Returns the default settings for the provider.
 	 *

From 15831d7e41f91a285330d557ee1c167bdd031ffb Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 20:01:03 +0530
Subject: [PATCH 03/27] add `get_image_style_options()`

---
 includes/Classifai/Providers/OpenAI/DallE.php | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/includes/Classifai/Providers/OpenAI/DallE.php b/includes/Classifai/Providers/OpenAI/DallE.php
index e5c5b8611..8198b8155 100644
--- a/includes/Classifai/Providers/OpenAI/DallE.php
+++ b/includes/Classifai/Providers/OpenAI/DallE.php
@@ -142,10 +142,7 @@ public function render_provider_fields() {
 			[
 				'option_index'  => static::ID,
 				'label_for'     => 'style',
-				'options'       => [
-					'vivid'   => __( 'Vivid', 'classifai' ),
-					'natural' => __( 'Natural', 'classifai' ),
-				],
+				'options'       => self::get_image_style_options(),
 				'default_value' => $settings['style'],
 				'description'   => __( 'The style of the generated images. Vivid causes more hyper-real and dramatic images. Natural causes more natural, less hyper-real looking images.', 'classifai' ),
 				'class'         => 'classifai-provider-field hidden provider-scope-' . static::ID,
@@ -178,6 +175,18 @@ public static function get_image_size_options() {
 		);
 	}
 
+	/**
+	 * Returns the style options for the provider.
+	 *
+	 * @return array
+	 */
+	public static function get_image_style_options() {
+		return array(
+			'vivid'   => __( 'Vivid', 'classifai' ),
+			'natural' => __( 'Natural', 'classifai' ),
+		);
+	}
+
 	/**
 	 * Returns the default settings for the provider.
 	 *

From ae45710f902e20b2399e3273d40247443ab59cd6 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 20:01:34 +0530
Subject: [PATCH 04/27] add HTML markup

---
 .../Classifai/Features/ImageGeneration.php    | 47 +++++++++++++++++++
 1 file changed, 47 insertions(+)

diff --git a/includes/Classifai/Features/ImageGeneration.php b/includes/Classifai/Features/ImageGeneration.php
index 3f7e67c86..26c94e7bc 100644
--- a/includes/Classifai/Features/ImageGeneration.php
+++ b/includes/Classifai/Features/ImageGeneration.php
@@ -299,6 +299,53 @@ public function print_media_templates() {
 					?>
 				</p>
 				<textarea class="prompt" placeholder="<?php esc_attr_e( 'Enter prompt', 'classifai' ); ?>" rows="4" maxlength="<?php echo absint( $provider_instance->max_prompt_chars ); ?>"></textarea>
+				<br>
+				<div class="prompt-options">
+					<!-- View Additional Settings check box -->
+					<label>
+						<input type="checkbox" class="view-additional-image-generation-settings" />
+						<?php esc_html_e( 'View Additional Settings', 'classifai' ); ?>
+					</label>
+				</div>
+				<div class="additional-image-generation-settings hidden">
+					<label>
+						<?php esc_html_e( 'Quality:', 'classifai' ); ?>
+						<select class="quality" name="quality">
+							<?php
+								$quality_options = DallE::get_image_quality_options();
+								$quality         = $settings[ $provider_id ]['quality'];
+								foreach ( $quality_options as $key => $value ) {
+									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $quality, $key, false ) . '>' . esc_html( $value ) . '</option>';
+								}
+							?>
+						</select>
+					</label>
+					<label>
+						<?php esc_html_e( 'Size:', 'classifai' ); ?>
+						<select class="size" name="size">
+							<?php
+								$size_options = DallE::get_image_size_options();
+								$size         = $settings[ $provider_id ]['image_size'];
+								foreach ( $size_options as $key => $value ) {
+									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $size, $key, false ) . '>' . esc_html( $value ) . '</option>';
+								}
+							?>
+						</select>
+					</label>
+					<label>
+						<?php esc_html_e( 'Style:', 'classifai' ); ?>
+						<select class="style" name="style">
+							<?php
+								$style_options = DallE::get_image_style_options();
+								$style         = $settings[ $provider_id ]['image_style'];
+								foreach ( $style_options as $key => $value ) {
+									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $style, $key, false ) . '>' . esc_html( $value ) . '</option>';
+								}
+							?>
+						</select>
+					</label>
+				</div>
+				<br>
 				<button type="button" class="button button-secondary button-large button-generate">
 					<?php
 					if ( $number_of_images > 1 ) {

From 82e225811c360ea6b68b8fb7e165f444002f731a Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 20:04:15 +0530
Subject: [PATCH 05/27] show settings on checkbox click

---
 src/js/admin.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/js/admin.js b/src/js/admin.js
index ab1b69d89..724abcfbc 100644
--- a/src/js/admin.js
+++ b/src/js/admin.js
@@ -491,3 +491,18 @@ document.addEventListener( 'DOMContentLoaded', function () {
 		} );
 	}, 30000 ); // 30000 milliseconds = 30 seconds
 } )( jQuery );
+
+(function ($) {
+	$( document ).ready( function () {
+		// Toggle the additional settings section when the checkbox is clicked
+		$( '.view-additional-image-generation-settings' ).on( 'change', function () {
+			var additionalSettings = $( '.additional-image-generation-settings' );
+
+			if ( $( this ).prop( 'checked' ) ) {
+				additionalSettings.removeClass( 'hidden' );
+			} else {
+				additionalSettings.addClass( 'hidden' );
+			}
+		} );
+	} );    
+} )( jQuery );

From 122d7bb069a8016541ad04834409b203577ce122 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 20:04:56 +0530
Subject: [PATCH 06/27] pass params in `makeRequest`

---
 .../image-generation/media-modal/collections/images.js       | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/js/features/image-generation/media-modal/collections/images.js b/src/js/features/image-generation/media-modal/collections/images.js
index 839fdccc7..b55acb80e 100644
--- a/src/js/features/image-generation/media-modal/collections/images.js
+++ b/src/js/features/image-generation/media-modal/collections/images.js
@@ -18,7 +18,7 @@ const Images = Backbone.Collection.extend( {
 	 *
 	 * @param {string} prompt Prompt used in generating images.
 	 */
-	makeRequest: function ( prompt ) {
+	makeRequest: function ( prompt, quality, size, style ) {
 		this.fetch( {
 			type: 'get',
 			beforeSend: function ( xhr ) {
@@ -26,6 +26,9 @@ const Images = Backbone.Collection.extend( {
 			},
 			data: {
 				prompt: prompt,
+				quality: quality,
+				size: size,
+				style: style,
 				format: 'b64_json',
 			},
 			reset: true,

From bc411e35baea6a941575e2b08dc8cf6824e7a814 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 20:05:26 +0530
Subject: [PATCH 07/27] transfer the additional data

---
 .../media-modal/views/generated-images-container.js          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/js/features/image-generation/media-modal/views/generated-images-container.js b/src/js/features/image-generation/media-modal/views/generated-images-container.js
index 8ce68341c..c5045fcff 100644
--- a/src/js/features/image-generation/media-modal/views/generated-images-container.js
+++ b/src/js/features/image-generation/media-modal/views/generated-images-container.js
@@ -21,11 +21,14 @@ const GeneratedImagesContainer = wp.media.View.extend( {
 	initialize: function ( options ) {
 		this.collection = new Images();
 		this.prompt = options.prompt;
+		this.quality = options.quality;
+		this.size = options.size;
+		this.style = options.style;
 
 		this.listenTo( this.collection, 'reset', this.renderAll );
 		this.listenTo( this.collection, 'error', this.error );
 
-		this.collection.makeRequest( this.prompt );
+		this.collection.makeRequest( this.prompt, this.quality, this.size, this.style );
 		this.render();
 	},
 

From 569b8ffd64f73ef332c34bc627ed9df6fa239355 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 20:05:39 +0530
Subject: [PATCH 08/27] detect the settings and pass

---
 .../image-generation/media-modal/views/prompt.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/js/features/image-generation/media-modal/views/prompt.js b/src/js/features/image-generation/media-modal/views/prompt.js
index 98c08e188..945696c19 100644
--- a/src/js/features/image-generation/media-modal/views/prompt.js
+++ b/src/js/features/image-generation/media-modal/views/prompt.js
@@ -35,6 +35,9 @@ const Prompt = wp.media.View.extend( {
 	 */
 	promptRequest: function ( event ) {
 		let prompt = '';
+		let quality = '';
+		let size = '';
+		let style = '';
 
 		if ( event.which === 13 ) {
 			prompt = event.target.value.trim();
@@ -42,10 +45,21 @@ const Prompt = wp.media.View.extend( {
 			prompt = event.target.parentElement
 				.querySelector( '.prompt' )
 				.value.trim();
+			quality = event.target.parentElement
+				.querySelector( '.quality' )
+				.value.trim();
+
+			size = event.target.parentElement
+				.querySelector( '.size' )
+				.value.trim();
+
+			style = event.target.parentElement
+				.querySelector( '.style' )
+				.value.trim();
 		}
 
 		if ( prompt ) {
-			new GeneratedImagesContainer( { prompt } );
+			new GeneratedImagesContainer( { prompt, quality, size, style } );
 		}
 	},
 } );

From 4fae4252d606c288001b0fd3cfc1bdc0d7bf6390 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 20:59:54 +0530
Subject: [PATCH 09/27] add a global settings to native settings page

---
 includes/Classifai/Providers/OpenAI/DallE.php | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/includes/Classifai/Providers/OpenAI/DallE.php b/includes/Classifai/Providers/OpenAI/DallE.php
index 8198b8155..f534814ba 100644
--- a/includes/Classifai/Providers/OpenAI/DallE.php
+++ b/includes/Classifai/Providers/OpenAI/DallE.php
@@ -148,6 +148,22 @@ public function render_provider_fields() {
 				'class'         => 'classifai-provider-field hidden provider-scope-' . static::ID,
 			]
 		);
+
+		add_settings_field(
+			static::ID . '_per_image_settings',
+			esc_html__( 'Enable per-image settings for quality, size, and style', 'classifai' ),
+			[ $this, 'render_input' ],
+			$this->feature_instance->get_option_name(),
+			$this->feature_instance->get_option_name() . '_section',
+			[
+				'option_index'  => static::ID,
+				'label_for'     => 'per_image_settings',
+				'input_type'    => 'checkbox',
+				'default_value' => $settings['per_image_settings'] ?? false,
+				'description'   => __( 'Enable this to allow users to select the quality, size, and style of the generated image.', 'classifai' ),
+				'class'         => 'classifai-user-based-opt-out',
+			]
+		);
 	}
 
 	/**

From 6b75f91af6d478d61f15175798975297015e217a Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 21:00:11 +0530
Subject: [PATCH 10/27] add a global settings to block-based settings page

---
 .../components/provider-settings/openai-dalle.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/js/settings/components/provider-settings/openai-dalle.js b/src/js/settings/components/provider-settings/openai-dalle.js
index bbc6fbb16..060a36eaa 100644
--- a/src/js/settings/components/provider-settings/openai-dalle.js
+++ b/src/js/settings/components/provider-settings/openai-dalle.js
@@ -4,6 +4,7 @@
 import {
 	__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
 	SelectControl,
+	ToggleControl,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 
@@ -157,6 +158,21 @@ export const OpenAIDallESettings = ( { isConfigured = false } ) => {
 					__nextHasNoMarginBottom
 				/>
 			</SettingsRow>
+			<SettingsRow
+				label={ __( 'Per Image Settings', 'classifai' ) }
+				description={ __(
+					'Enable this to allow users to select the quality, size, and style of the generated image.',
+					'classifai'
+				) }
+			>
+				<ToggleControl
+					id={ `${ providerName }_per_image_settings` }
+					onChange={ ( value ) =>
+						onChange( { per_image_settings: value } )
+					}
+					checked={ providerSettings.per_image_settings || false }
+				/>
+			</SettingsRow>
 		</>
 	);
 };

From d760b0c0485c79799a9f93c140519f7ba3d9353d Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 21:00:35 +0530
Subject: [PATCH 11/27] show additional options as per the global settings

---
 .../Classifai/Features/ImageGeneration.php    | 105 +++++++++---------
 1 file changed, 54 insertions(+), 51 deletions(-)

diff --git a/includes/Classifai/Features/ImageGeneration.php b/includes/Classifai/Features/ImageGeneration.php
index 26c94e7bc..424767204 100644
--- a/includes/Classifai/Features/ImageGeneration.php
+++ b/includes/Classifai/Features/ImageGeneration.php
@@ -271,10 +271,11 @@ public function print_media_templates() {
 			return;
 		}
 
-		$settings          = $this->get_settings();
-		$provider_id       = $settings['provider'];
-		$number_of_images  = absint( $settings[ $provider_id ]['number_of_images'] );
-		$provider_instance = $this->get_feature_provider_instance( $provider_id );
+		$settings           = $this->get_settings();
+		$provider_id        = $settings['provider'];
+		$number_of_images   = absint( $settings[ $provider_id ]['number_of_images'] );
+		$per_image_settings = isset( $settings[ $provider_id ]['per_image_settings'] ) ? $settings[ $provider_id ]['per_image_settings'] : false;
+		$provider_instance  = $this->get_feature_provider_instance( $provider_id );
 		?>
 
 		<?php // Template for the Generate images tab content. Includes prompt input. ?>
@@ -299,53 +300,55 @@ public function print_media_templates() {
 					?>
 				</p>
 				<textarea class="prompt" placeholder="<?php esc_attr_e( 'Enter prompt', 'classifai' ); ?>" rows="4" maxlength="<?php echo absint( $provider_instance->max_prompt_chars ); ?>"></textarea>
-				<br>
-				<div class="prompt-options">
-					<!-- View Additional Settings check box -->
-					<label>
-						<input type="checkbox" class="view-additional-image-generation-settings" />
-						<?php esc_html_e( 'View Additional Settings', 'classifai' ); ?>
-					</label>
-				</div>
-				<div class="additional-image-generation-settings hidden">
-					<label>
-						<?php esc_html_e( 'Quality:', 'classifai' ); ?>
-						<select class="quality" name="quality">
-							<?php
-								$quality_options = DallE::get_image_quality_options();
-								$quality         = $settings[ $provider_id ]['quality'];
-								foreach ( $quality_options as $key => $value ) {
-									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $quality, $key, false ) . '>' . esc_html( $value ) . '</option>';
-								}
-							?>
-						</select>
-					</label>
-					<label>
-						<?php esc_html_e( 'Size:', 'classifai' ); ?>
-						<select class="size" name="size">
-							<?php
-								$size_options = DallE::get_image_size_options();
-								$size         = $settings[ $provider_id ]['image_size'];
-								foreach ( $size_options as $key => $value ) {
-									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $size, $key, false ) . '>' . esc_html( $value ) . '</option>';
-								}
-							?>
-						</select>
-					</label>
-					<label>
-						<?php esc_html_e( 'Style:', 'classifai' ); ?>
-						<select class="style" name="style">
-							<?php
-								$style_options = DallE::get_image_style_options();
-								$style         = $settings[ $provider_id ]['image_style'];
-								foreach ( $style_options as $key => $value ) {
-									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $style, $key, false ) . '>' . esc_html( $value ) . '</option>';
-								}
-							?>
-						</select>
-					</label>
-				</div>
-				<br>
+				<?php if ( $per_image_settings ) : ?>
+					<br>
+					<div class="prompt-options">
+						<!-- View Additional Settings check box -->
+						<label>
+							<input type="checkbox" class="view-additional-image-generation-settings" />
+							<?php esc_html_e( 'View Additional Settings', 'classifai' ); ?>
+						</label>
+					</div>
+					<div class="additional-image-generation-settings hidden">
+						<label>
+							<?php esc_html_e( 'Quality:', 'classifai' ); ?>
+							<select class="quality" name="quality">
+								<?php
+									$quality_options = DallE::get_image_quality_options();
+									$quality         = $settings[ $provider_id ]['quality'];
+									foreach ( $quality_options as $key => $value ) {
+										echo '<option value="' . esc_attr( $key ) . '" ' . selected( $quality, $key, false ) . '>' . esc_html( $value ) . '</option>';
+									}
+								?>
+							</select>
+						</label>
+						<label>
+							<?php esc_html_e( 'Size:', 'classifai' ); ?>
+							<select class="size" name="size">
+								<?php
+									$size_options = DallE::get_image_size_options();
+									$size         = $settings[ $provider_id ]['image_size'];
+									foreach ( $size_options as $key => $value ) {
+										echo '<option value="' . esc_attr( $key ) . '" ' . selected( $size, $key, false ) . '>' . esc_html( $value ) . '</option>';
+									}
+								?>
+							</select>
+						</label>
+						<label>
+							<?php esc_html_e( 'Style:', 'classifai' ); ?>
+							<select class="style" name="style">
+								<?php
+									$style_options = DallE::get_image_style_options();
+									$style         = $settings[ $provider_id ]['image_style'];
+									foreach ( $style_options as $key => $value ) {
+										echo '<option value="' . esc_attr( $key ) . '" ' . selected( $style, $key, false ) . '>' . esc_html( $value ) . '</option>';
+									}
+								?>
+							</select>
+						</label>
+					</div>
+					<br>
+				<?php endif; ?>
 				<button type="button" class="button button-secondary button-large button-generate">
 					<?php
 					if ( $number_of_images > 1 ) {

From eeac32021110095c1b7e23b0858125a39fa7c904 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 21:01:24 +0530
Subject: [PATCH 12/27] prefix with "Enable"

---
 src/js/settings/components/provider-settings/openai-dalle.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/settings/components/provider-settings/openai-dalle.js b/src/js/settings/components/provider-settings/openai-dalle.js
index 060a36eaa..c2d779e02 100644
--- a/src/js/settings/components/provider-settings/openai-dalle.js
+++ b/src/js/settings/components/provider-settings/openai-dalle.js
@@ -159,7 +159,7 @@ export const OpenAIDallESettings = ( { isConfigured = false } ) => {
 				/>
 			</SettingsRow>
 			<SettingsRow
-				label={ __( 'Per Image Settings', 'classifai' ) }
+				label={ __( 'Enable per-image settings', 'classifai' ) }
 				description={ __(
 					'Enable this to allow users to select the quality, size, and style of the generated image.',
 					'classifai'

From b56cd42ea53548d47e29c585e98af01255ff2bb5 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 22:42:14 +0530
Subject: [PATCH 13/27] tweaks for edit post view compat

---
 .../Classifai/Features/ImageGeneration.php    | 19 ++++++++-----------
 1 file changed, 8 insertions(+), 11 deletions(-)

diff --git a/includes/Classifai/Features/ImageGeneration.php b/includes/Classifai/Features/ImageGeneration.php
index 424767204..f499fed9f 100644
--- a/includes/Classifai/Features/ImageGeneration.php
+++ b/includes/Classifai/Features/ImageGeneration.php
@@ -302,16 +302,13 @@ public function print_media_templates() {
 				<textarea class="prompt" placeholder="<?php esc_attr_e( 'Enter prompt', 'classifai' ); ?>" rows="4" maxlength="<?php echo absint( $provider_instance->max_prompt_chars ); ?>"></textarea>
 				<?php if ( $per_image_settings ) : ?>
 					<br>
-					<div class="prompt-options">
-						<!-- View Additional Settings check box -->
-						<label>
-							<input type="checkbox" class="view-additional-image-generation-settings" />
-							<?php esc_html_e( 'View Additional Settings', 'classifai' ); ?>
-						</label>
-					</div>
+					<input type="checkbox" id="view-additional-image-generation-settings" />
+					<label id="view-additional-image-generation-settings-label" for="view-additional-image-generation-settings">
+						<?php esc_html_e( 'View Additional Settings', 'classifai' ); ?>
+					</label>
 					<div class="additional-image-generation-settings hidden">
 						<label>
-							<?php esc_html_e( 'Quality:', 'classifai' ); ?>
+							<span><?php esc_html_e( 'Quality:', 'classifai' ); ?></span>
 							<select class="quality" name="quality">
 								<?php
 									$quality_options = DallE::get_image_quality_options();
@@ -323,7 +320,7 @@ public function print_media_templates() {
 							</select>
 						</label>
 						<label>
-							<?php esc_html_e( 'Size:', 'classifai' ); ?>
+							<span><?php esc_html_e( 'Size:', 'classifai' ); ?></span>
 							<select class="size" name="size">
 								<?php
 									$size_options = DallE::get_image_size_options();
@@ -335,11 +332,11 @@ public function print_media_templates() {
 							</select>
 						</label>
 						<label>
-							<?php esc_html_e( 'Style:', 'classifai' ); ?>
+							<span><?php esc_html_e( 'Style:', 'classifai' ); ?></span>
 							<select class="style" name="style">
 								<?php
 									$style_options = DallE::get_image_style_options();
-									$style         = $settings[ $provider_id ]['image_style'];
+									$style         = $settings[ $provider_id ]['style'];
 									foreach ( $style_options as $key => $value ) {
 										echo '<option value="' . esc_attr( $key ) . '" ' . selected( $style, $key, false ) . '>' . esc_html( $value ) . '</option>';
 									}

From 9a081961db612a11eb0fcfd666db4aae53da3148 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 22:42:22 +0530
Subject: [PATCH 14/27] remove js code

---
 src/js/admin.js | 15 ---------------
 1 file changed, 15 deletions(-)

diff --git a/src/js/admin.js b/src/js/admin.js
index 724abcfbc..ab1b69d89 100644
--- a/src/js/admin.js
+++ b/src/js/admin.js
@@ -491,18 +491,3 @@ document.addEventListener( 'DOMContentLoaded', function () {
 		} );
 	}, 30000 ); // 30000 milliseconds = 30 seconds
 } )( jQuery );
-
-(function ($) {
-	$( document ).ready( function () {
-		// Toggle the additional settings section when the checkbox is clicked
-		$( '.view-additional-image-generation-settings' ).on( 'change', function () {
-			var additionalSettings = $( '.additional-image-generation-settings' );
-
-			if ( $( this ).prop( 'checked' ) ) {
-				additionalSettings.removeClass( 'hidden' );
-			} else {
-				additionalSettings.addClass( 'hidden' );
-			}
-		} );
-	} );    
-} )( jQuery );

From 3593be1d9ae8c06887a6249e94ea1bf520c90df2 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 22:42:41 +0530
Subject: [PATCH 15/27] CSS + handle toggle in CSS

---
 .../image-generation/media-modal/index.scss   | 31 +++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/js/features/image-generation/media-modal/index.scss b/src/js/features/image-generation/media-modal/index.scss
index 71eeabdd9..6715fdf4a 100644
--- a/src/js/features/image-generation/media-modal/index.scss
+++ b/src/js/features/image-generation/media-modal/index.scss
@@ -95,4 +95,35 @@
 			padding: 10px 0;
 		}
 	}
+
+	#view-additional-image-generation-settings {
+		margin: 10px 3px 15px 0;
+		display: inline-block;
+
+		&:checked ~ .additional-image-generation-settings.hidden {
+			display: block;
+		}
+	}
+
+	#view-additional-image-generation-settings-label {
+		display: inline-block;
+		margin: 10px 0 15px;
+		cursor: pointer;
+	}
+
+	.additional-image-generation-settings {
+		label {
+			display: block;
+			margin-top: 10px;
+		}
+
+		span {
+			display: inline-block;
+			min-width: 60px;
+		}
+
+		select {
+			min-width: 200px;
+		}
+	}
 }

From 9a8f17d53de1531ad31d15e910547adc496cc47b Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 23:33:46 +0530
Subject: [PATCH 16/27] eslint fixes,
 /home/runner/work/classifai/classifai/src/js/features/image-generation/media-modal/collections/images.js
 Error:   16:2  error  Missing JSDoc @param "quality" declaration 
 jsdoc/require-param Error:   16:2  error  Missing JSDoc @param "size"
 declaration     jsdoc/require-param Error:   16:2  error  Missing JSDoc
 @param "style" declaration    jsdoc/require-param
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/home/runner/work/classifai/classifai/src/js/features/image-generation/media-modal/views/generated-images-container.js
Error:   31:31  error  Replace `·this.prompt,·this.quality,·this.size,·this.style·` with `⏎↹↹↹this.prompt,⏎↹↹↹this.quality,⏎↹↹↹this.size,⏎↹↹↹this.style⏎↹↹`  prettier/prettier

✖ 4 problems (4 errors, 0 warnings)
  4 errors and 0 warnings potentially fixable with the `--fix` option.

Error: Process completed with exit code 1.
---
 .../image-generation/media-modal/collections/images.js     | 3 +++
 .../media-modal/views/generated-images-container.js        | 7 ++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/js/features/image-generation/media-modal/collections/images.js b/src/js/features/image-generation/media-modal/collections/images.js
index b55acb80e..b0218ca2f 100644
--- a/src/js/features/image-generation/media-modal/collections/images.js
+++ b/src/js/features/image-generation/media-modal/collections/images.js
@@ -17,6 +17,9 @@ const Images = Backbone.Collection.extend( {
 	 * Send a request to our API endpoint.
 	 *
 	 * @param {string} prompt Prompt used in generating images.
+	 * @param {string} quality Quality of the image.
+	 * @param {string} size Size of the image.
+	 * @param {string} style Style of the image.
 	 */
 	makeRequest: function ( prompt, quality, size, style ) {
 		this.fetch( {
diff --git a/src/js/features/image-generation/media-modal/views/generated-images-container.js b/src/js/features/image-generation/media-modal/views/generated-images-container.js
index c5045fcff..7e6611190 100644
--- a/src/js/features/image-generation/media-modal/views/generated-images-container.js
+++ b/src/js/features/image-generation/media-modal/views/generated-images-container.js
@@ -28,7 +28,12 @@ const GeneratedImagesContainer = wp.media.View.extend( {
 		this.listenTo( this.collection, 'reset', this.renderAll );
 		this.listenTo( this.collection, 'error', this.error );
 
-		this.collection.makeRequest( this.prompt, this.quality, this.size, this.style );
+		this.collection.makeRequest(
+			this.prompt,
+			this.quality,
+			this.size,
+			this.style
+		);
 		this.render();
 	},
 

From 1afa66d63d019d86947970007809aa92a8235b7c Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 23:36:32 +0530
Subject: [PATCH 17/27] phpcs fixes, FILE:
 includes/Classifai/Features/ImageGeneration.php
 -----------------------------------------------------------------------------------------------
 FOUND 6 ERRORS AND 0 WARNINGS AFFECTING 6 LINES
 -----------------------------------------------------------------------------------------------
  316 | ERROR | Line indented incorrectly; expected 8 tabs, found 9
 (Generic.WhiteSpace.ScopeIndent.IncorrectExact)  318 | ERROR | Line indented
 incorrectly; expected 8 tabs, found 9
 (Generic.WhiteSpace.ScopeIndent.IncorrectExact)  328 | ERROR | Line indented
 incorrectly; expected 8 tabs, found 9
 (Generic.WhiteSpace.ScopeIndent.IncorrectExact)  330 | ERROR | Line indented
 incorrectly; expected 8 tabs, found 9
 (Generic.WhiteSpace.ScopeIndent.IncorrectExact)  340 | ERROR | Line indented
 incorrectly; expected 8 tabs, found 9
 (Generic.WhiteSpace.ScopeIndent.IncorrectExact)  342 | ERROR | Line indented
 incorrectly; expected 8 tabs, found 9
 (Generic.WhiteSpace.ScopeIndent.IncorrectExact)
 -----------------------------------------------------------------------------------------------
 Error: Process completed with exit code 1.

---
 .../Classifai/Features/ImageGeneration.php    | 30 +++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/includes/Classifai/Features/ImageGeneration.php b/includes/Classifai/Features/ImageGeneration.php
index f499fed9f..60a7e3a4a 100644
--- a/includes/Classifai/Features/ImageGeneration.php
+++ b/includes/Classifai/Features/ImageGeneration.php
@@ -311,11 +311,11 @@ public function print_media_templates() {
 							<span><?php esc_html_e( 'Quality:', 'classifai' ); ?></span>
 							<select class="quality" name="quality">
 								<?php
-									$quality_options = DallE::get_image_quality_options();
-									$quality         = $settings[ $provider_id ]['quality'];
-									foreach ( $quality_options as $key => $value ) {
-										echo '<option value="' . esc_attr( $key ) . '" ' . selected( $quality, $key, false ) . '>' . esc_html( $value ) . '</option>';
-									}
+								$quality_options = DallE::get_image_quality_options();
+								$quality         = $settings[ $provider_id ]['quality'];
+								foreach ( $quality_options as $key => $value ) {
+									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $quality, $key, false ) . '>' . esc_html( $value ) . '</option>';
+								}
 								?>
 							</select>
 						</label>
@@ -323,11 +323,11 @@ public function print_media_templates() {
 							<span><?php esc_html_e( 'Size:', 'classifai' ); ?></span>
 							<select class="size" name="size">
 								<?php
-									$size_options = DallE::get_image_size_options();
-									$size         = $settings[ $provider_id ]['image_size'];
-									foreach ( $size_options as $key => $value ) {
-										echo '<option value="' . esc_attr( $key ) . '" ' . selected( $size, $key, false ) . '>' . esc_html( $value ) . '</option>';
-									}
+								$size_options = DallE::get_image_size_options();
+								$size         = $settings[ $provider_id ]['image_size'];
+								foreach ( $size_options as $key => $value ) {
+									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $size, $key, false ) . '>' . esc_html( $value ) . '</option>';
+								}
 								?>
 							</select>
 						</label>
@@ -335,11 +335,11 @@ public function print_media_templates() {
 							<span><?php esc_html_e( 'Style:', 'classifai' ); ?></span>
 							<select class="style" name="style">
 								<?php
-									$style_options = DallE::get_image_style_options();
-									$style         = $settings[ $provider_id ]['style'];
-									foreach ( $style_options as $key => $value ) {
-										echo '<option value="' . esc_attr( $key ) . '" ' . selected( $style, $key, false ) . '>' . esc_html( $value ) . '</option>';
-									}
+								$style_options = DallE::get_image_style_options();
+								$style         = $settings[ $provider_id ]['style'];
+								foreach ( $style_options as $key => $value ) {
+									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $style, $key, false ) . '>' . esc_html( $value ) . '</option>';
+								}
 								?>
 							</select>
 						</label>

From 3e72034b3066e94f6afb2e24e630d3668863cc1a Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 21 Feb 2025 23:47:28 +0530
Subject: [PATCH 18/27] eslint error for vertical inline,
 /home/runner/work/classifai/classifai/src/js/features/image-generation/media-modal/collections/images.js
 Error:   16:2  error  Expected JSDoc block lines to be aligned 
 jsdoc/check-line-alignment

---
 .../image-generation/media-modal/collections/images.js      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/js/features/image-generation/media-modal/collections/images.js b/src/js/features/image-generation/media-modal/collections/images.js
index b0218ca2f..75a0783b2 100644
--- a/src/js/features/image-generation/media-modal/collections/images.js
+++ b/src/js/features/image-generation/media-modal/collections/images.js
@@ -16,10 +16,10 @@ const Images = Backbone.Collection.extend( {
 	/**
 	 * Send a request to our API endpoint.
 	 *
-	 * @param {string} prompt Prompt used in generating images.
+	 * @param {string} prompt  Prompt used in generating images.
 	 * @param {string} quality Quality of the image.
-	 * @param {string} size Size of the image.
-	 * @param {string} style Style of the image.
+	 * @param {string} size    Size of the image.
+	 * @param {string} style   Style of the image.
 	 */
 	makeRequest: function ( prompt, quality, size, style ) {
 		this.fetch( {

From b98cff0bae85b4372bf5caa22c9ae8ec8dd1a9fa Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 28 Feb 2025 14:17:50 +0530
Subject: [PATCH 19/27] suggestions implemented

---
 includes/Classifai/Features/ImageGeneration.php  |  4 ++--
 includes/Classifai/Providers/OpenAI/DallE.php    | 16 ----------------
 .../image-generation/media-modal/views/prompt.js |  9 +++++----
 .../components/provider-settings/openai-dalle.js |  4 ++--
 4 files changed, 9 insertions(+), 24 deletions(-)

diff --git a/includes/Classifai/Features/ImageGeneration.php b/includes/Classifai/Features/ImageGeneration.php
index 60a7e3a4a..94b779093 100644
--- a/includes/Classifai/Features/ImageGeneration.php
+++ b/includes/Classifai/Features/ImageGeneration.php
@@ -274,7 +274,7 @@ public function print_media_templates() {
 		$settings           = $this->get_settings();
 		$provider_id        = $settings['provider'];
 		$number_of_images   = absint( $settings[ $provider_id ]['number_of_images'] );
-		$per_image_settings = isset( $settings[ $provider_id ]['per_image_settings'] ) ? $settings[ $provider_id ]['per_image_settings'] : false;
+		$per_image_settings = $settings[ $provider_id ]['per_image_settings'] ?? false;
 		$provider_instance  = $this->get_feature_provider_instance( $provider_id );
 		?>
 
@@ -304,7 +304,7 @@ public function print_media_templates() {
 					<br>
 					<input type="checkbox" id="view-additional-image-generation-settings" />
 					<label id="view-additional-image-generation-settings-label" for="view-additional-image-generation-settings">
-						<?php esc_html_e( 'View Additional Settings', 'classifai' ); ?>
+						<?php esc_html_e( 'Additional settings', 'classifai' ); ?>
 					</label>
 					<div class="additional-image-generation-settings hidden">
 						<label>
diff --git a/includes/Classifai/Providers/OpenAI/DallE.php b/includes/Classifai/Providers/OpenAI/DallE.php
index f534814ba..8198b8155 100644
--- a/includes/Classifai/Providers/OpenAI/DallE.php
+++ b/includes/Classifai/Providers/OpenAI/DallE.php
@@ -148,22 +148,6 @@ public function render_provider_fields() {
 				'class'         => 'classifai-provider-field hidden provider-scope-' . static::ID,
 			]
 		);
-
-		add_settings_field(
-			static::ID . '_per_image_settings',
-			esc_html__( 'Enable per-image settings for quality, size, and style', 'classifai' ),
-			[ $this, 'render_input' ],
-			$this->feature_instance->get_option_name(),
-			$this->feature_instance->get_option_name() . '_section',
-			[
-				'option_index'  => static::ID,
-				'label_for'     => 'per_image_settings',
-				'input_type'    => 'checkbox',
-				'default_value' => $settings['per_image_settings'] ?? false,
-				'description'   => __( 'Enable this to allow users to select the quality, size, and style of the generated image.', 'classifai' ),
-				'class'         => 'classifai-user-based-opt-out',
-			]
-		);
 	}
 
 	/**
diff --git a/src/js/features/image-generation/media-modal/views/prompt.js b/src/js/features/image-generation/media-modal/views/prompt.js
index 945696c19..7203384b6 100644
--- a/src/js/features/image-generation/media-modal/views/prompt.js
+++ b/src/js/features/image-generation/media-modal/views/prompt.js
@@ -38,22 +38,23 @@ const Prompt = wp.media.View.extend( {
 		let quality = '';
 		let size = '';
 		let style = '';
+		let parent = event.target.parentElement;
 
 		if ( event.which === 13 ) {
 			prompt = event.target.value.trim();
 		} else if ( event.target.nodeName === 'BUTTON' ) {
-			prompt = event.target.parentElement
+			prompt = parent
 				.querySelector( '.prompt' )
 				.value.trim();
-			quality = event.target.parentElement
+			quality = parent
 				.querySelector( '.quality' )
 				.value.trim();
 
-			size = event.target.parentElement
+			size = parent
 				.querySelector( '.size' )
 				.value.trim();
 
-			style = event.target.parentElement
+			style = parent
 				.querySelector( '.style' )
 				.value.trim();
 		}
diff --git a/src/js/settings/components/provider-settings/openai-dalle.js b/src/js/settings/components/provider-settings/openai-dalle.js
index c2d779e02..dfb17fbb9 100644
--- a/src/js/settings/components/provider-settings/openai-dalle.js
+++ b/src/js/settings/components/provider-settings/openai-dalle.js
@@ -159,9 +159,9 @@ export const OpenAIDallESettings = ( { isConfigured = false } ) => {
 				/>
 			</SettingsRow>
 			<SettingsRow
-				label={ __( 'Enable per-image settings', 'classifai' ) }
+				label={ __( 'Per-image settings', 'classifai' ) }
 				description={ __(
-					'Enable this to allow users to select the quality, size, and style of the generated image.',
+					'If enabled, allows users to select the quality, size, and style when generating an image.',
 					'classifai'
 				) }
 			>

From b4c2074faca92f161f3392efe7ec2ad349d042e2 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 28 Feb 2025 14:36:56 +0530
Subject: [PATCH 20/27] adding default for pre-image setting

---
 includes/Classifai/Providers/OpenAI/DallE.php | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/includes/Classifai/Providers/OpenAI/DallE.php b/includes/Classifai/Providers/OpenAI/DallE.php
index 8198b8155..cf1886489 100644
--- a/includes/Classifai/Providers/OpenAI/DallE.php
+++ b/includes/Classifai/Providers/OpenAI/DallE.php
@@ -203,10 +203,11 @@ public function get_default_provider_settings(): array {
 				return array_merge(
 					$common_settings,
 					[
-						'number_of_images' => 1,
-						'quality'          => 'standard',
-						'image_size'       => '1024x1024',
-						'style'            => 'vivid',
+						'number_of_images'   => 1,
+						'quality'            => 'standard',
+						'image_size'         => '1024x1024',
+						'style'              => 'vivid',
+						'per_image_settings' => false,
 					]
 				);
 		}

From 83d24e0ec1514c4b4e594bda6d080bc01d7ab021 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 28 Feb 2025 14:36:59 +0530
Subject: [PATCH 21/27] eslint fixes

---
 .../image-generation/media-modal/views/prompt.js  | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/js/features/image-generation/media-modal/views/prompt.js b/src/js/features/image-generation/media-modal/views/prompt.js
index 7203384b6..702355d7f 100644
--- a/src/js/features/image-generation/media-modal/views/prompt.js
+++ b/src/js/features/image-generation/media-modal/views/prompt.js
@@ -38,24 +38,21 @@ const Prompt = wp.media.View.extend( {
 		let quality = '';
 		let size = '';
 		let style = '';
-		let parent = event.target.parentElement;
+		const parent = event.target.parentElement;
 
 		if ( event.which === 13 ) {
 			prompt = event.target.value.trim();
 		} else if ( event.target.nodeName === 'BUTTON' ) {
-			prompt = parent
-				.querySelector( '.prompt' )
+			prompt = parent.querySelector( '.prompt' )
 				.value.trim();
-			quality = parent
-				.querySelector( '.quality' )
+
+			quality = parent.querySelector( '.quality' )
 				.value.trim();
 
-			size = parent
-				.querySelector( '.size' )
+			size = parent.querySelector( '.size' )
 				.value.trim();
 
-			style = parent
-				.querySelector( '.style' )
+			style = parent.querySelector( '.style' )
 				.value.trim();
 		}
 

From 4e5ed36c1243459d71c763a89a9dae2eee24ac4f Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 28 Feb 2025 14:43:05 +0530
Subject: [PATCH 22/27] try to fix e2e; making generic selector

---
 .../image-processing/image-generation-openai-dalle.test.js    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/cypress/integration/image-processing/image-generation-openai-dalle.test.js b/tests/cypress/integration/image-processing/image-generation-openai-dalle.test.js
index bdd789930..0b939715c 100644
--- a/tests/cypress/integration/image-processing/image-generation-openai-dalle.test.js
+++ b/tests/cypress/integration/image-processing/image-generation-openai-dalle.test.js
@@ -84,7 +84,7 @@ describe( 'Image Generation (OpenAI DALL·E) Tests', () => {
 			cy.get( '.prompt-view .prompt' ).type(
 				'A sunset over the mountains'
 			);
-			cy.get( '.prompt-view .button-generate' ).click();
+			cy.get( '.prompt-view button' ).click();
 
 			// Verify images show up.
 			cy.get( '.generated-images ul li' ).should( 'have.length', 2 );
@@ -127,7 +127,7 @@ describe( 'Image Generation (OpenAI DALL·E) Tests', () => {
 		// Click into the tab and submit a prompt.
 		cy.get( '#menu-item-generate' ).click();
 		cy.get( '.prompt-view .prompt' ).type( 'A sunset over the mountains' );
-		cy.get( '.prompt-view .button-generate' ).click();
+		cy.get( '.prompt-view button' ).click();
 
 		// Verify images show up.
 		cy.get( '.generated-images ul li' ).should( 'have.length', 2 );

From e36135438177189e7c54b0661b4d32390c48a2d3 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 28 Feb 2025 14:49:51 +0530
Subject: [PATCH 23/27] =?UTF-8?q?eslint=20fix,=20/home/runner/work/classif?=
 =?UTF-8?q?ai/classifai/src/js/features/image-generation/media-modal/views?=
 =?UTF-8?q?/prompt.js=20Error:=20=20=2046:46=20=20error=20=20Delete=20`?=
 =?UTF-8?q?=E2=8F=8E=E2=86=B9=E2=86=B9=E2=86=B9=E2=86=B9`=20=20prettier/pr?=
 =?UTF-8?q?ettier=20Error:=20=20=2049:48=20=20error=20=20Delete=20`?=
 =?UTF-8?q?=E2=8F=8E=E2=86=B9=E2=86=B9=E2=86=B9=E2=86=B9`=20=20prettier/pr?=
 =?UTF-8?q?ettier=20Error:=20=20=2052:42=20=20error=20=20Delete=20`?=
 =?UTF-8?q?=E2=8F=8E=E2=86=B9=E2=86=B9=E2=86=B9=E2=86=B9`=20=20prettier/pr?=
 =?UTF-8?q?ettier=20Error:=20=20=2055:44=20=20error=20=20Delete=20`?=
 =?UTF-8?q?=E2=8F=8E=E2=86=B9=E2=86=B9=E2=86=B9=E2=86=B9`=20=20prettier/pr?=
 =?UTF-8?q?ettier?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

/home/runner/work/classifai/classifai/tests/cypress/integration/image-processing/image-generation-openai-dalle.test.js
  0:0  warning  File ignored because of a matching ignore pattern. Use "--no-ignore" to override

✖ 5 problems (4 errors, 1 warning)
  4 errors and 0 warnings potentially fixable with the `--fix` option.
---
 .../image-generation/media-modal/views/prompt.js  | 15 ++++-----------
 1 file changed, 4 insertions(+), 11 deletions(-)

diff --git a/src/js/features/image-generation/media-modal/views/prompt.js b/src/js/features/image-generation/media-modal/views/prompt.js
index 702355d7f..20bf73f8d 100644
--- a/src/js/features/image-generation/media-modal/views/prompt.js
+++ b/src/js/features/image-generation/media-modal/views/prompt.js
@@ -43,17 +43,10 @@ const Prompt = wp.media.View.extend( {
 		if ( event.which === 13 ) {
 			prompt = event.target.value.trim();
 		} else if ( event.target.nodeName === 'BUTTON' ) {
-			prompt = parent.querySelector( '.prompt' )
-				.value.trim();
-
-			quality = parent.querySelector( '.quality' )
-				.value.trim();
-
-			size = parent.querySelector( '.size' )
-				.value.trim();
-
-			style = parent.querySelector( '.style' )
-				.value.trim();
+			prompt = parent.querySelector( '.prompt' ).value.trim();
+			quality = parent.querySelector( '.quality' ).value.trim();
+			size = parent.querySelector( '.size' ).value.trim();
+			style = parent.querySelector( '.style' ).value.trim();
 		}
 
 		if ( prompt ) {

From 81b92bed5be583ab7d49ebbdbefb9f016006f134 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 28 Feb 2025 17:07:51 +0530
Subject: [PATCH 24/27] revert test change

---
 .../image-processing/image-generation-openai-dalle.test.js    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tests/cypress/integration/image-processing/image-generation-openai-dalle.test.js b/tests/cypress/integration/image-processing/image-generation-openai-dalle.test.js
index 0b939715c..bdd789930 100644
--- a/tests/cypress/integration/image-processing/image-generation-openai-dalle.test.js
+++ b/tests/cypress/integration/image-processing/image-generation-openai-dalle.test.js
@@ -84,7 +84,7 @@ describe( 'Image Generation (OpenAI DALL·E) Tests', () => {
 			cy.get( '.prompt-view .prompt' ).type(
 				'A sunset over the mountains'
 			);
-			cy.get( '.prompt-view button' ).click();
+			cy.get( '.prompt-view .button-generate' ).click();
 
 			// Verify images show up.
 			cy.get( '.generated-images ul li' ).should( 'have.length', 2 );
@@ -127,7 +127,7 @@ describe( 'Image Generation (OpenAI DALL·E) Tests', () => {
 		// Click into the tab and submit a prompt.
 		cy.get( '#menu-item-generate' ).click();
 		cy.get( '.prompt-view .prompt' ).type( 'A sunset over the mountains' );
-		cy.get( '.prompt-view button' ).click();
+		cy.get( '.prompt-view .button-generate' ).click();
 
 		// Verify images show up.
 		cy.get( '.generated-images ul li' ).should( 'have.length', 2 );

From 34a93a2c83af2238835b897c9958d96e7a762ff7 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 28 Feb 2025 17:08:07 +0530
Subject: [PATCH 25/27] fix E2E

---
 .../media-modal/views/prompt.js                 | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/js/features/image-generation/media-modal/views/prompt.js b/src/js/features/image-generation/media-modal/views/prompt.js
index 20bf73f8d..e7fa46177 100644
--- a/src/js/features/image-generation/media-modal/views/prompt.js
+++ b/src/js/features/image-generation/media-modal/views/prompt.js
@@ -43,10 +43,19 @@ const Prompt = wp.media.View.extend( {
 		if ( event.which === 13 ) {
 			prompt = event.target.value.trim();
 		} else if ( event.target.nodeName === 'BUTTON' ) {
-			prompt = parent.querySelector( '.prompt' ).value.trim();
-			quality = parent.querySelector( '.quality' ).value.trim();
-			size = parent.querySelector( '.size' ).value.trim();
-			style = parent.querySelector( '.style' ).value.trim();
+			// Ensure parent exists before querying elements.
+			if ( parent ) {
+				const promptEl = parent.querySelector( '.prompt' );
+				const qualityEl = parent.querySelector( '.quality' );
+				const sizeEl = parent.querySelector( '.size' );
+				const styleEl = parent.querySelector( '.style' );
+
+				// Check if elements exist before accessing .value
+				prompt = promptEl ? promptEl.value.trim() : '';
+				quality = qualityEl ? qualityEl.value.trim() : '';
+				size = sizeEl ? sizeEl.value.trim() : '';
+				style = styleEl ? styleEl.value.trim() : '';
+			}
 		}
 
 		if ( prompt ) {

From b92b2dc841e4f0aaf4e3361ca2bff1d13c44f7ae Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 28 Feb 2025 20:13:14 +0530
Subject: [PATCH 26/27] keep dropdowns to pass default values, fixing e2e

---
 .../Classifai/Features/ImageGeneration.php    | 80 ++++++++++---------
 .../media-modal/views/prompt.js               | 17 +---
 2 files changed, 45 insertions(+), 52 deletions(-)

diff --git a/includes/Classifai/Features/ImageGeneration.php b/includes/Classifai/Features/ImageGeneration.php
index 94b779093..8d9dc9e35 100644
--- a/includes/Classifai/Features/ImageGeneration.php
+++ b/includes/Classifai/Features/ImageGeneration.php
@@ -300,50 +300,52 @@ public function print_media_templates() {
 					?>
 				</p>
 				<textarea class="prompt" placeholder="<?php esc_attr_e( 'Enter prompt', 'classifai' ); ?>" rows="4" maxlength="<?php echo absint( $provider_instance->max_prompt_chars ); ?>"></textarea>
+				<br>
 				<?php if ( $per_image_settings ) : ?>
-					<br>
 					<input type="checkbox" id="view-additional-image-generation-settings" />
 					<label id="view-additional-image-generation-settings-label" for="view-additional-image-generation-settings">
 						<?php esc_html_e( 'Additional settings', 'classifai' ); ?>
 					</label>
-					<div class="additional-image-generation-settings hidden">
-						<label>
-							<span><?php esc_html_e( 'Quality:', 'classifai' ); ?></span>
-							<select class="quality" name="quality">
-								<?php
-								$quality_options = DallE::get_image_quality_options();
-								$quality         = $settings[ $provider_id ]['quality'];
-								foreach ( $quality_options as $key => $value ) {
-									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $quality, $key, false ) . '>' . esc_html( $value ) . '</option>';
-								}
-								?>
-							</select>
-						</label>
-						<label>
-							<span><?php esc_html_e( 'Size:', 'classifai' ); ?></span>
-							<select class="size" name="size">
-								<?php
-								$size_options = DallE::get_image_size_options();
-								$size         = $settings[ $provider_id ]['image_size'];
-								foreach ( $size_options as $key => $value ) {
-									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $size, $key, false ) . '>' . esc_html( $value ) . '</option>';
-								}
-								?>
-							</select>
-						</label>
-						<label>
-							<span><?php esc_html_e( 'Style:', 'classifai' ); ?></span>
-							<select class="style" name="style">
-								<?php
-								$style_options = DallE::get_image_style_options();
-								$style         = $settings[ $provider_id ]['style'];
-								foreach ( $style_options as $key => $value ) {
-									echo '<option value="' . esc_attr( $key ) . '" ' . selected( $style, $key, false ) . '>' . esc_html( $value ) . '</option>';
-								}
-								?>
-							</select>
-						</label>
-					</div>
+				<?php endif; ?>
+				<div class="additional-image-generation-settings hidden">
+					<label>
+						<span><?php esc_html_e( 'Quality:', 'classifai' ); ?></span>
+						<select class="quality" name="quality">
+							<?php
+							$quality_options = DallE::get_image_quality_options();
+							$quality         = $settings[ $provider_id ]['quality'];
+							foreach ( $quality_options as $key => $value ) {
+								echo '<option value="' . esc_attr( $key ) . '" ' . selected( $quality, $key, false ) . '>' . esc_html( $value ) . '</option>';
+							}
+							?>
+						</select>
+					</label>
+					<label>
+						<span><?php esc_html_e( 'Size:', 'classifai' ); ?></span>
+						<select class="size" name="size">
+							<?php
+							$size_options = DallE::get_image_size_options();
+							$size         = $settings[ $provider_id ]['image_size'];
+							foreach ( $size_options as $key => $value ) {
+								echo '<option value="' . esc_attr( $key ) . '" ' . selected( $size, $key, false ) . '>' . esc_html( $value ) . '</option>';
+							}
+							?>
+						</select>
+					</label>
+					<label>
+						<span><?php esc_html_e( 'Style:', 'classifai' ); ?></span>
+						<select class="style" name="style">
+							<?php
+							$style_options = DallE::get_image_style_options();
+							$style         = $settings[ $provider_id ]['style'];
+							foreach ( $style_options as $key => $value ) {
+								echo '<option value="' . esc_attr( $key ) . '" ' . selected( $style, $key, false ) . '>' . esc_html( $value ) . '</option>';
+							}
+							?>
+						</select>
+					</label>
+				</div>
+				<?php if ( $per_image_settings ) : ?>
 					<br>
 				<?php endif; ?>
 				<button type="button" class="button button-secondary button-large button-generate">
diff --git a/src/js/features/image-generation/media-modal/views/prompt.js b/src/js/features/image-generation/media-modal/views/prompt.js
index e7fa46177..20bf73f8d 100644
--- a/src/js/features/image-generation/media-modal/views/prompt.js
+++ b/src/js/features/image-generation/media-modal/views/prompt.js
@@ -43,19 +43,10 @@ const Prompt = wp.media.View.extend( {
 		if ( event.which === 13 ) {
 			prompt = event.target.value.trim();
 		} else if ( event.target.nodeName === 'BUTTON' ) {
-			// Ensure parent exists before querying elements.
-			if ( parent ) {
-				const promptEl = parent.querySelector( '.prompt' );
-				const qualityEl = parent.querySelector( '.quality' );
-				const sizeEl = parent.querySelector( '.size' );
-				const styleEl = parent.querySelector( '.style' );
-
-				// Check if elements exist before accessing .value
-				prompt = promptEl ? promptEl.value.trim() : '';
-				quality = qualityEl ? qualityEl.value.trim() : '';
-				size = sizeEl ? sizeEl.value.trim() : '';
-				style = styleEl ? styleEl.value.trim() : '';
-			}
+			prompt = parent.querySelector( '.prompt' ).value.trim();
+			quality = parent.querySelector( '.quality' ).value.trim();
+			size = parent.querySelector( '.size' ).value.trim();
+			style = parent.querySelector( '.style' ).value.trim();
 		}
 
 		if ( prompt ) {

From 930af2974ec912b3c94a0c93c10a5a9ba7960738 Mon Sep 17 00:00:00 2001
From: faisal-alvi <faisalalvi33@gmail.com>
Date: Fri, 28 Feb 2025 21:56:38 +0530
Subject: [PATCH 27/27] fix button position

---
 includes/Classifai/Features/ImageGeneration.php         | 3 ---
 src/js/features/image-generation/media-modal/index.scss | 9 +++++++--
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/includes/Classifai/Features/ImageGeneration.php b/includes/Classifai/Features/ImageGeneration.php
index 8d9dc9e35..a512d6d0f 100644
--- a/includes/Classifai/Features/ImageGeneration.php
+++ b/includes/Classifai/Features/ImageGeneration.php
@@ -345,9 +345,6 @@ public function print_media_templates() {
 						</select>
 					</label>
 				</div>
-				<?php if ( $per_image_settings ) : ?>
-					<br>
-				<?php endif; ?>
 				<button type="button" class="button button-secondary button-large button-generate">
 					<?php
 					if ( $number_of_images > 1 ) {
diff --git a/src/js/features/image-generation/media-modal/index.scss b/src/js/features/image-generation/media-modal/index.scss
index 6715fdf4a..e36cc914b 100644
--- a/src/js/features/image-generation/media-modal/index.scss
+++ b/src/js/features/image-generation/media-modal/index.scss
@@ -94,10 +94,15 @@
 			font-size: 15px;
 			padding: 10px 0;
 		}
+
+		button.button-generate {
+			margin-top: 10px;
+			display: block;
+		}
 	}
 
 	#view-additional-image-generation-settings {
-		margin: 10px 3px 15px 0;
+		margin: 10px 3px 5px 0;
 		display: inline-block;
 
 		&:checked ~ .additional-image-generation-settings.hidden {
@@ -107,7 +112,7 @@
 
 	#view-additional-image-generation-settings-label {
 		display: inline-block;
-		margin: 10px 0 15px;
+		margin: 10px 0 5px;
 		cursor: pointer;
 	}