X7ROOT File Manager
Current Path:
/home/notabjze/pyirates.net/wp-content/plugins/extendify/src/Draft/pages
home
/
notabjze
/
pyirates.net
/
wp-content
/
plugins
/
extendify
/
src
/
Draft
/
pages
/
ðŸ“
..
📄
GenerateImage.jsx
(3.74 KB)
📄
Home.jsx
(1.35 KB)
📄
Unsplash.jsx
(3.05 KB)
Editing: GenerateImage.jsx
import { BaseControl, Panel, PanelBody, __experimentalHeading as Heading, } from '@wordpress/components'; import { useState, useEffect, useRef } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { generateImage } from '@draft/api/Data'; import { GenerateForm } from '@draft/components/image-generation/GenerateForm'; import { ImagePreview } from '@draft/components/image-generation/ImagePreview'; import { useRouter } from '@draft/hooks/useRouter'; import { pageState } from '@draft/state/factory'; import { useGlobalStore } from '@draft/state/global'; import { backArrow } from '@draft/svg/BackArrow'; const usePageState = pageState('AI Image', (set) => ({ imageDetails: { src: '', id: undefined }, setImageDetails: (newState) => { set((state) => ({ ...state, imageDetails: newState })); }, })); export const GenerateImage = () => { const { imageCredits: curCredits, updateImageCredits, subtractOneCredit, aiImageOptions, } = useGlobalStore(); const [isGenerating, setIsGenerating] = useState(false); const [errorMessage, setErrorMessage] = useState(''); const abortController = useRef(null); const noCredits = curCredits.remaining === 0; const { imageDetails, setImageDetails } = usePageState(); const { goBack } = useRouter(); const clearImageResponse = () => setImageDetails({ src: '', id: undefined }); const handleSubmit = async (event) => { event.preventDefault(); setErrorMessage(''); if (noCredits || isGenerating) { abortController.current?.abort(); return; } try { setIsGenerating(true); subtractOneCredit(); abortController.current = new AbortController(); const { imageCredits, images, id } = await generateImage( aiImageOptions, abortController.current.signal, ); updateImageCredits(imageCredits); setImageDetails({ src: images[0].url, id }); } catch (error) { // If the request was aborted (cancelled), don't show an error if (error?.code === 20) return; // If we didn't get back any credit info, it was a server error if (!error?.imageCredits) { // Pause to prefent flickering await new Promise((resolve) => setTimeout(resolve, 1000)); setErrorMessage(error.message); // Add back the credit we subtracted updateImageCredits({ remaining: curCredits.remaining }); return; } // Probably out of credits here updateImageCredits(error.imageCredits); setErrorMessage(error.message); } finally { setIsGenerating(false); } }; useEffect(() => { if (imageDetails.src || isGenerating) return; // refocus when image is removed document.getElementById('draft-ai-image-textarea')?.focus(); }, [imageDetails.src, isGenerating]); return ( <Panel> <div className="flex h-12 items-center gap-1 pl-1"> <button className="h-9 w-9 cursor-pointer border-0 bg-transparent" onClick={goBack} type="button" aria-label={__('Go Back', 'extendify-local')}> {backArrow} </button> <Heading className="mb-0"> {__('AI Image Generator', 'extendify-local')} </Heading> </div> <PanelBody className="-mt-4 border-t-0"> <BaseControl label={__('Image Description', 'extendify-local')}> <ImagePreview prompt={aiImageOptions.prompt} size={aiImageOptions.size} isGenerating={isGenerating} id={imageDetails?.id} src={imageDetails?.src} clearImageResponse={clearImageResponse} /> {imageDetails.src ? null : ( <form onSubmit={handleSubmit} className="flex flex-col gap-5"> <GenerateForm isGenerating={isGenerating} errorMessage={errorMessage} /> </form> )} </BaseControl> </PanelBody> </Panel> ); }; export const routes = [ { slug: 'ai-image', title: __('AI Image', 'extendify-local'), component: GenerateImage, }, ];
Upload File
Create Folder