Skip to content

Commit 805f0cc

Browse files
dkotterdkotter
authored
Merge pull request #857 from 10up/fix/440-2
Fix/440 Per-image customization for quality, size, and style in Image Generation
2 parents fd704b0 + 930af29 commit 805f0cc

File tree

7 files changed

+173
-28
lines changed

7 files changed

+173
-28
lines changed

‎includes/Classifai/Features/ImageGeneration.php

Lines changed: 50 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -271,10 +271,11 @@ public function print_media_templates() {
271271
return;
272272
}
273273

274-
$settings = $this->get_settings();
275-
$provider_id = $settings['provider'];
276-
$number_of_images = absint( $settings[ $provider_id ]['number_of_images'] );
277-
$provider_instance = $this->get_feature_provider_instance( $provider_id );
274+
$settings = $this->get_settings();
275+
$provider_id = $settings['provider'];
276+
$number_of_images = absint( $settings[ $provider_id ]['number_of_images'] );
277+
$per_image_settings = $settings[ $provider_id ]['per_image_settings'] ?? false;
278+
$provider_instance = $this->get_feature_provider_instance( $provider_id );
278279
?>
279280

280281
<?php // Template for the Generate images tab content. Includes prompt input. ?>
@@ -299,6 +300,51 @@ public function print_media_templates() {
299300
?>
300301
</p>
301302
<textarea class="prompt" placeholder="<?php esc_attr_e( 'Enter prompt', 'classifai' ); ?>" rows="4" maxlength="<?php echo absint( $provider_instance->max_prompt_chars ); ?>"></textarea>
303+
<br>
304+
<?php if ( $per_image_settings ) : ?>
305+
<input type="checkbox" id="view-additional-image-generation-settings" />
306+
<label id="view-additional-image-generation-settings-label" for="view-additional-image-generation-settings">
307+
<?php esc_html_e( 'Additional settings', 'classifai' ); ?>
308+
</label>
309+
<?php endif; ?>
310+
<div class="additional-image-generation-settings hidden">
311+
<label>
312+
<span><?php esc_html_e( 'Quality:', 'classifai' ); ?></span>
313+
<select class="quality" name="quality">
314+
<?php
315+
$quality_options = DallE::get_image_quality_options();
316+
$quality = $settings[ $provider_id ]['quality'];
317+
foreach ( $quality_options as $key => $value ) {
318+
echo '<option value="' . esc_attr( $key ) . '" ' . selected( $quality, $key, false ) . '>' . esc_html( $value ) . '</option>';
319+
}
320+
?>
321+
</select>
322+
</label>
323+
<label>
324+
<span><?php esc_html_e( 'Size:', 'classifai' ); ?></span>
325+
<select class="size" name="size">
326+
<?php
327+
$size_options = DallE::get_image_size_options();
328+
$size = $settings[ $provider_id ]['image_size'];
329+
foreach ( $size_options as $key => $value ) {
330+
echo '<option value="' . esc_attr( $key ) . '" ' . selected( $size, $key, false ) . '>' . esc_html( $value ) . '</option>';
331+
}
332+
?>
333+
</select>
334+
</label>
335+
<label>
336+
<span><?php esc_html_e( 'Style:', 'classifai' ); ?></span>
337+
<select class="style" name="style">
338+
<?php
339+
$style_options = DallE::get_image_style_options();
340+
$style = $settings[ $provider_id ]['style'];
341+
foreach ( $style_options as $key => $value ) {
342+
echo '<option value="' . esc_attr( $key ) . '" ' . selected( $style, $key, false ) . '>' . esc_html( $value ) . '</option>';
343+
}
344+
?>
345+
</select>
346+
</label>
347+
</div>
302348
<button type="button" class="button button-secondary button-large button-generate">
303349
<?php
304350
if ( $number_of_images > 1 ) {

‎includes/Classifai/Providers/OpenAI/DallE.php

Lines changed: 45 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -110,10 +110,7 @@ public function render_provider_fields() {
110110
[
111111
'option_index' => static::ID,
112112
'label_for' => 'quality',
113-
'options' => [
114-
'standard' => __( 'Standard', 'classifai' ),
115-
'hd' => __( 'High Definition', 'classifai' ),
116-
],
113+
'options' => self::get_image_quality_options(),
117114
'default_value' => $settings['quality'],
118115
'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' ),
119116
'class' => 'classifai-provider-field hidden provider-scope-' . static::ID,
@@ -129,11 +126,7 @@ public function render_provider_fields() {
129126
[
130127
'option_index' => static::ID,
131128
'label_for' => 'image_size',
132-
'options' => [
133-
'1024x1024' => '1024x1024 (square)',
134-
'1792x1024' => '1792x1024 (landscape)',
135-
'1024x1792' => '1024x1792 (portrait)',
136-
],
129+
'options' => self::get_image_size_options(),
137130
'default_value' => $settings['image_size'],
138131
'description' => __( 'Size of generated images. Larger sizes cost more.', 'classifai' ),
139132
'class' => 'classifai-provider-field hidden provider-scope-' . static::ID,
@@ -149,17 +142,51 @@ public function render_provider_fields() {
149142
[
150143
'option_index' => static::ID,
151144
'label_for' => 'style',
152-
'options' => [
153-
'vivid' => __( 'Vivid', 'classifai' ),
154-
'natural' => __( 'Natural', 'classifai' ),
155-
],
145+
'options' => self::get_image_style_options(),
156146
'default_value' => $settings['style'],
157147
'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' ),
158148
'class' => 'classifai-provider-field hidden provider-scope-' . static::ID,
159149
]
160150
);
161151
}
162152

153+
/**
154+
* Returns the quality options for the provider.
155+
*
156+
* @return array
157+
*/
158+
public static function get_image_quality_options() {
159+
return array(
160+
'standard' => __( 'Standard', 'classifai' ),
161+
'hd' => __( 'High Definition', 'classifai' ),
162+
);
163+
}
164+
165+
/**
166+
* Returns the image size options for the provider.
167+
*
168+
* @return array
169+
*/
170+
public static function get_image_size_options() {
171+
return array(
172+
'1024x1024' => '1024x1024 (square)',
173+
'1792x1024' => '1792x1024 (landscape)',
174+
'1024x1792' => '1024x1792 (portrait)',
175+
);
176+
}
177+
178+
/**
179+
* Returns the style options for the provider.
180+
*
181+
* @return array
182+
*/
183+
public static function get_image_style_options() {
184+
return array(
185+
'vivid' => __( 'Vivid', 'classifai' ),
186+
'natural' => __( 'Natural', 'classifai' ),
187+
);
188+
}
189+
163190
/**
164191
* Returns the default settings for the provider.
165192
*
@@ -176,10 +203,11 @@ public function get_default_provider_settings(): array {
176203
return array_merge(
177204
$common_settings,
178205
[
179-
'number_of_images' => 1,
180-
'quality' => 'standard',
181-
'image_size' => '1024x1024',
182-
'style' => 'vivid',
206+
'number_of_images' => 1,
207+
'quality' => 'standard',
208+
'image_size' => '1024x1024',
209+
'style' => 'vivid',
210+
'per_image_settings' => false,
183211
]
184212
);
185213
}

‎src/js/features/image-generation/media-modal/collections/images.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,22 @@ const Images = Backbone.Collection.extend( {
1616
/**
1717
* Send a request to our API endpoint.
1818
*
19-
* @param {string} prompt Prompt used in generating images.
19+
* @param {string} prompt Prompt used in generating images.
20+
* @param {string} quality Quality of the image.
21+
* @param {string} size Size of the image.
22+
* @param {string} style Style of the image.
2023
*/
21-
makeRequest: function ( prompt ) {
24+
makeRequest: function ( prompt, quality, size, style ) {
2225
this.fetch( {
2326
type: 'get',
2427
beforeSend: function ( xhr ) {
2528
xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
2629
},
2730
data: {
2831
prompt: prompt,
32+
quality: quality,
33+
size: size,
34+
style: style,
2935
format: 'b64_json',
3036
},
3137
reset: true,

‎src/js/features/image-generation/media-modal/index.scss

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,5 +94,41 @@
9494
font-size: 15px;
9595
padding: 10px 0;
9696
}
97+
98+
button.button-generate {
99+
margin-top: 10px;
100+
display: block;
101+
}
102+
}
103+
104+
#view-additional-image-generation-settings {
105+
margin: 10px 3px 5px 0;
106+
display: inline-block;
107+
108+
&:checked ~ .additional-image-generation-settings.hidden {
109+
display: block;
110+
}
111+
}
112+
113+
#view-additional-image-generation-settings-label {
114+
display: inline-block;
115+
margin: 10px 0 5px;
116+
cursor: pointer;
117+
}
118+
119+
.additional-image-generation-settings {
120+
label {
121+
display: block;
122+
margin-top: 10px;
123+
}
124+
125+
span {
126+
display: inline-block;
127+
min-width: 60px;
128+
}
129+
130+
select {
131+
min-width: 200px;
132+
}
97133
}
98134
}

‎src/js/features/image-generation/media-modal/views/generated-images-container.js

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,19 @@ const GeneratedImagesContainer = wp.media.View.extend( {
2121
initialize: function ( options ) {
2222
this.collection = new Images();
2323
this.prompt = options.prompt;
24+
this.quality = options.quality;
25+
this.size = options.size;
26+
this.style = options.style;
2427

2528
this.listenTo( this.collection, 'reset', this.renderAll );
2629
this.listenTo( this.collection, 'error', this.error );
2730

28-
this.collection.makeRequest( this.prompt );
31+
this.collection.makeRequest(
32+
this.prompt,
33+
this.quality,
34+
this.size,
35+
this.style
36+
);
2937
this.render();
3038
},
3139

‎src/js/features/image-generation/media-modal/views/prompt.js

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,22 @@ const Prompt = wp.media.View.extend( {
3535
*/
3636
promptRequest: function ( event ) {
3737
let prompt = '';
38+
let quality = '';
39+
let size = '';
40+
let style = '';
41+
const parent = event.target.parentElement;
3842

3943
if ( event.which === 13 ) {
4044
prompt = event.target.value.trim();
4145
} else if ( event.target.nodeName === 'BUTTON' ) {
42-
prompt = event.target.parentElement
43-
.querySelector( '.prompt' )
44-
.value.trim();
46+
prompt = parent.querySelector( '.prompt' ).value.trim();
47+
quality = parent.querySelector( '.quality' ).value.trim();
48+
size = parent.querySelector( '.size' ).value.trim();
49+
style = parent.querySelector( '.style' ).value.trim();
4550
}
4651

4752
if ( prompt ) {
48-
new GeneratedImagesContainer( { prompt } );
53+
new GeneratedImagesContainer( { prompt, quality, size, style } );
4954
}
5055
},
5156
} );

‎src/js/settings/components/provider-settings/openai-dalle.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
import {
55
__experimentalInputControl as InputControl, // eslint-disable-line @wordpress/no-unsafe-wp-apis
66
SelectControl,
7+
ToggleControl,
78
} from '@wordpress/components';
89
import { __ } from '@wordpress/i18n';
910

@@ -157,6 +158,21 @@ export const OpenAIDallESettings = ( { isConfigured = false } ) => {
157158
__nextHasNoMarginBottom
158159
/>
159160
</SettingsRow>
161+
<SettingsRow
162+
label={ __( 'Per-image settings', 'classifai' ) }
163+
description={ __(
164+
'If enabled, allows users to select the quality, size, and style when generating an image.',
165+
'classifai'
166+
) }
167+
>
168+
<ToggleControl
169+
id={ `${ providerName }_per_image_settings` }
170+
onChange={ ( value ) =>
171+
onChange( { per_image_settings: value } )
172+
}
173+
checked={ providerSettings.per_image_settings || false }
174+
/>
175+
</SettingsRow>
160176
</>
161177
);
162178
};

0 commit comments

Comments
 (0)