OpenAI image generation tweaks

includes/Classifai/Providers/OpenAI/ChatGPT.php

@@ -72,28 +72,25 @@ public function can_register() {
 	 * This only fires if can_register returns true.
 	 */
 	public function register() {
-		add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_editor_assets' ] );
-	}
-
-	/**
-	 * Enqueue the editor scripts.
-	 */
-	public function enqueue_editor_assets() {
 		$settings = $this->get_settings();
 
-		// Don't load our custom post excerpt if excerpt functionality isn't turned on.
-		if ( ! isset( $settings['enable_excerpt'] ) || 1 !== (int) $settings['enable_excerpt'] ) {
-			return;
-		}
-
-		// Check if the current user has permission to use the generate excerpt button.
+		// Check if the current user has permission.
 		$roles      = $settings['roles'] ?? [];
 		$user_roles = wp_get_current_user()->roles ?? [];
 
-		if ( empty( $roles ) || ! empty( array_diff( $user_roles, $roles ) ) ) {
-			return;
+		if (
+			( ! empty( $roles ) && empty( array_diff( $user_roles, $roles ) ) )
+			&& ( isset( $settings['enable_excerpt'] ) && 1 === (int) $settings['enable_excerpt'] )
+		) {
+			add_action( 'enqueue_block_editor_assets', [ $this, 'enqueue_editor_assets' ] );
+			add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_admin_assets' ] );
 		}
+	}
 
+	/**
+	 * Enqueue the editor scripts.
+	 */
+	public function enqueue_editor_assets() {
 		// This script removes the core excerpt panel and replaces it with our own.
 		wp_enqueue_script(
 			'classifai-post-excerpt',
@@ -104,6 +101,25 @@ public function enqueue_editor_assets() {
 		);
 	}
 
+	/**
+	 * Enqueue the admin scripts.
+	 *
+	 * @param string $hook_suffix The current admin page.
+	 */
+	public function enqueue_admin_assets( $hook_suffix = '' ) {
+		if ( 'post.php' !== $hook_suffix && 'post-new.php' !== $hook_suffix ) {
+			return;
+		}
+
+		wp_enqueue_style(
+			'classifai-language-processing-style',
+			CLASSIFAI_PLUGIN_URL . 'dist/language-processing.css',
+			[],
+			CLASSIFAI_PLUGIN_VERSION,
+			'all'
+		);
+	}
+
 	/**
 	 * Setup fields
 	 */

includes/Classifai/Providers/OpenAI/DallE.php

@@ -82,6 +82,14 @@ public function enqueue_admin_scripts( $hook_suffix = '' ) {
 			return;
 		}
 
+		wp_enqueue_style(
+			'classifai-image-processing-style',
+			CLASSIFAI_PLUGIN_URL . 'dist/media-modal.css',
+			[],
+			CLASSIFAI_PLUGIN_VERSION,
+			'all'
+		);
+
 		wp_enqueue_script(
 			'classifai-generate-images',
 			CLASSIFAI_PLUGIN_URL . 'dist/media-modal.js',
@@ -137,7 +145,7 @@ public function print_media_templates() {
 				<p>
 					<?php esc_html_e( 'Once images are generated, choose one or more of those to import into your Media Library and then choose one image to insert.', 'classifai' ); ?>
 				</p>
-				<input type="search" class="prompt" placeholder="<?php esc_attr_e( 'Enter prompt', 'classifai' ); ?>" />
+				<textarea class="prompt" placeholder="<?php esc_attr_e( 'Enter prompt', 'classifai' ); ?>" rows="4"></textarea>
 				<button type="button" class="button button-secondary button-large button-generate"><?php esc_html_e( 'Generate images', 'classifai' ); ?></button>
 				<span class="error"></span>
 			</div>

src/js/media-modal/index.js

@@ -1,6 +1,7 @@
 /* eslint object-shorthand: 0 */
 
 import Prompt from './views/prompt';
+import '../../scss/media-modal.scss';
 
 const currentMediaFrame = wp.media.view.MediaFrame.Select;
 
@@ -33,7 +34,7 @@ wp.media.view.MediaFrame.Select = currentMediaFrame.extend( {
 		routerView.set( {
 			generate: {
 				text: classifaiDalleData.tabText,
-				priority: 60,
+				priority: 30,
 			},
 		} );
 	},

src/js/media-modal/views/generated-image.js

@@ -65,6 +65,7 @@ const GeneratedImage = wp.media.View.extend( {
 						.removeClass( 'button-import' )
 						.addClass( 'button-media-library' )
 						.text( classifaiDalleData.buttonText );
+					self.$( '.button-import-insert' ).remove();
 					self.disableLoadingState();
 				}
 			},
@@ -75,6 +76,7 @@ const GeneratedImage = wp.media.View.extend( {
 			additionalData: {
 				post: wp.media.model.settings.post.id ?? 0,
 				caption: classifaiDalleData.caption,
+				alt_text: this.prompt,
 			},
 		} );
 

src/js/media-modal/views/generated-images-container.js

@@ -71,7 +71,6 @@ const GeneratedImagesContainer = wp.media.View.extend( {
 
 			this.collection.each( this.renderImage, this );
 
-			this.$el.prev().find( '.prompt' ).val( '' );
 			this.$el.prev().find( 'button' ).prop( 'disabled', false );
 		}
 	},

src/scss/language-processing.scss

@@ -138,82 +138,6 @@
     }
 }
 
-.media-frame-content {
-	.generated-images,
-	.prompt-view {
-		padding: 0 16px
-	}
-
-	.generated-images {
-		ul {
-			display: flex;
-			flex-wrap: wrap;
-			list-style-type: none;
-			gap: 18px;
-			margin: 0;
-			padding: 0;
-		}
-
-		li {
-			margin-bottom: 20px;
-		}
-
-		.generated-image {
-			img {
-				box-shadow: inset 0 0 15px rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 5%);
-				border: 1px solid rgb(0 0 0 / 10%);
-				background: #f0f0f1;
-				display: block;
-				margin-bottom: 10px;
-				width: 460px;
-				height: 460px;
-			}
-
-			button {
-				display: block;
-				float: left;
-				margin-right: 10px;
-			}
-
-			.spinner {
-				float: left;
-				margin: 6px;
-			}
-		}
-
-		.spinner {
-			float: none;
-			visibility: hidden;
-
-			&.active {
-				visibility: visible;
-			}
-		}
-
-		.error {
-			color: #cf2e2e;
-			font-size: 15px;
-		}
-	}
-
-	.prompt-view {
-		margin-top: 20px;
-
-		.prompt {
-			margin-right: 10px;
-			padding: 1px 8px;
-			width: 25%;
-		}
-
-		.error {
-			color: #cf2e2e;
-			display: block;
-			font-size: 15px;
-			padding: 10px 0;
-		}
-	}
-}
-
 .editor-post-excerpt {
 	button {
 		margin-top: 10px;

src/scss/media-modal.scss

@@ -0,0 +1,77 @@
+.media-frame-content {
+	.generated-images,
+	.prompt-view {
+		padding: 0 16px;
+	}
+
+	.generated-images {
+		ul {
+			display: flex;
+			flex-wrap: wrap;
+			list-style-type: none;
+			gap: 15px;
+			margin: 0;
+			padding: 0;
+		}
+
+		li {
+			margin-bottom: 20px;
+		}
+
+		.generated-image {
+			img {
+				box-shadow: inset 0 0 15px rgb(0 0 0 / 10%), inset 0 0 0 1px rgb(0 0 0 / 5%);
+				border: 1px solid rgb(0 0 0 / 10%);
+				background-color: #f0f0f1;
+				display: block;
+				margin-bottom: 10px;
+				width: 365px;
+				max-width: 100%;
+				height: auto;
+				object-fit: cover;
+			}
+
+			button {
+				display: block;
+				float: left;
+				margin-right: 10px;
+			}
+
+			.spinner {
+				float: left;
+				margin: 6px;
+			}
+		}
+
+		.spinner {
+			float: none;
+			visibility: hidden;
+
+			&.active {
+				visibility: visible;
+			}
+		}
+
+		.error {
+			color: #cf2e2e;
+			font-size: 15px;
+		}
+	}
+
+	.prompt-view {
+		margin-top: 20px;
+
+		.prompt {
+			margin-right: 10px;
+			padding: 5px 8px;
+			width: 40%;
+		}
+
+		.error {
+			color: #cf2e2e;
+			display: block;
+			font-size: 15px;
+			padding: 10px 0;
+		}
+	}
+}