Skip to content

Commit

Permalink
Merge pull request #535 from 10up/feature/inserter-media-category
Browse files Browse the repository at this point in the history
Add ability to generate images in the Media Inserter
  • Loading branch information
dkotter authored Aug 10, 2023
2 parents 098a172 + ff29908 commit 99388b4
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 0 deletions.
8 changes: 8 additions & 0 deletions includes/Classifai/Providers/OpenAI/DallE.php
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,14 @@ public function enqueue_admin_scripts( $hook_suffix = '' ) {
true
);

wp_enqueue_script(
'classifai-inserter-media-category',
CLASSIFAI_PLUGIN_URL . 'dist/inserter-media-category.js',
get_asset_info( 'inserter-media-category', 'dependencies' ),
get_asset_info( 'inserter-media-category', 'version' ),
true
);

/**
* Filter the default attribution added to generated images.
*
Expand Down
67 changes: 67 additions & 0 deletions src/js/gutenberg-plugins/inserter-media-category.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
/**
* Some code here was copied from Jetpack's implementation of the inserter media category.
* See https://github.com/Automattic/jetpack/pull/31914
*/
import apiFetch from '@wordpress/api-fetch';
import { dispatch, select, subscribe } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';

const { classifaiDalleData } = window;

const isInserterOpened = () =>
select( 'core/edit-post' )?.isInserterOpened() ||
select( 'core/edit-site' )?.isInserterOpened() ||
select( 'core/edit-widgets' )?.isInserterOpened?.();

const waitFor = async ( selector ) =>
new Promise( ( resolve ) => {
const unsubscribe = subscribe( () => {
if ( selector() ) {
unsubscribe();
resolve();
}
} );
} );

waitFor( isInserterOpened ).then( () =>
dispatch( 'core/block-editor' )?.registerInserterMediaCategory?.(
registerGenerateImageMediaCategory()
)
);

const registerGenerateImageMediaCategory = () => ( {
name: 'classifai-generate-image',
labels: {
name: classifaiDalleData.tabText,
search_items: __( 'Enter a prompt', 'classifai' ),
},
mediaType: 'image',
fetch: async ( { search = '' } ) => {
if ( ! search ) {
return [];
}

const images = await apiFetch( {
path: addQueryArgs( classifaiDalleData.endpoint, {
prompt: search,
format: 'b64_json',
} ),
method: 'GET',
} )
.then( ( response ) =>
response.map( ( item ) => ( {
title: search,
url: `data:image/png;base64,${ item.url }`,
previewUrl: `data:image/png;base64,${ item.url }`,
id: undefined,
alt: search,
caption: classifaiDalleData.caption,
} ) )
)
.catch( () => [] );

return images;
},
isExternalResource: true,
} );
3 changes: 3 additions & 0 deletions webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ module.exports = {
],
'post-excerpt': [ './src/js/post-excerpt/index.js' ],
'media-modal': [ './src/js/media-modal/index.js' ],
'inserter-media-category': [
'./src/js/gutenberg-plugins/inserter-media-category.js',
],
'generate-title-classic': [
'./src/js/openai/classic-editor-title-generator.js',
],
Expand Down

0 comments on commit 99388b4

Please sign in to comment.