Merge pull request #31 from KevinBatdorf/add-dynamic-imput-support

Add dynamic inputs

src/components/InputGenerator.tsx

@@ -0,0 +1,61 @@
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { useInputsState } from '../state/inputs';
+import { PromptInputs } from '../types';
+import { NumberSelect } from './inputs/NumberSelect';
+import { PromptInput } from './inputs/PromptInput';
+
+type Props = {
+    promptInputData: PromptInputs;
+    disabled: boolean;
+};
+export const InputGenerator = ({ promptInputData, disabled }: Props) => {
+    const { width, height, prompt, setInput } = useInputsState();
+
+    useEffect(() => {
+        setInput('width', promptInputData?.width?.default ?? 512);
+        setInput('height', promptInputData?.height?.default ?? 512);
+        setInput('prompt', promptInputData?.prompt?.default ?? '');
+    }, [promptInputData, setInput]);
+
+    return (
+        <div className="flex flex-col gap-y-4">
+            {promptInputData?.prompt && (
+                <PromptInput
+                    value={prompt}
+                    onChange={(v) => setInput('prompt', v)}
+                    disabled={disabled}
+                    label={__('Text prompt', 'stable-diffusion')}
+                />
+            )}
+            <div className="flex gap-x-4">
+                {promptInputData?.width && (
+                    <NumberSelect
+                        label={__('Width', 'stable-diffusion')}
+                        value={width}
+                        disabled={disabled}
+                        onChange={(v) => setInput('width', v)}
+                        options={
+                            promptInputData?.width?.enum ?? [
+                                128, 256, 512, 768, 1024,
+                            ]
+                        }
+                    />
+                )}
+                {promptInputData?.height && (
+                    <NumberSelect
+                        label={__('Height', 'stable-diffusion')}
+                        value={height}
+                        disabled={disabled}
+                        onChange={(v) => setInput('height', v)}
+                        options={
+                            promptInputData?.height?.enum ?? [
+                                128, 256, 512, 768, 1024,
+                            ]
+                        }
+                    />
+                )}
+            </div>
+        </div>
+    );
+};

src/components/Loader.tsx

@@ -8,6 +8,7 @@ import { useGlobalState } from '../state/global';
 import { ImageLike } from '../types';
 import { Login } from './Login';
 import { Modal } from './Modal';
+import { ModelSwitch } from './ModelSwitch';
 import { SettingsModal } from './SetingsModal';
 
 type LoaderProps = {
@@ -17,13 +18,8 @@ type LoaderProps = {
 };
 
 export const Loader = ({ setAttributes, clientId }: LoaderProps) => {
-    const {
-        setImportingMessage,
-        setCurrentInterface,
-        setShowSelectScreen,
-        setImageBlockId,
-        imageBlockId,
-    } = useGlobalState();
+    const { setImportingMessage, setImageBlockId, imageBlockId } =
+        useGlobalState();
     const [open, setOpen] = useState(false);
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore-next-line - types seem outdated
@@ -39,8 +35,7 @@ export const Loader = ({ setAttributes, clientId }: LoaderProps) => {
         if (!b?.attributes?.caption) {
             removeBlock(imageBlockId);
         }
-        setShowSelectScreen(false);
-        setCurrentInterface('stability-ai/stable-diffusion');
+        // goToModel('stability-ai/stable-diffusion');
         setOpen(false);
         setImportingMessage('');
     };
@@ -70,14 +65,13 @@ export const Loader = ({ setAttributes, clientId }: LoaderProps) => {
         const open = (event: CustomEvent<{ clientId: string }>) => {
             if (event?.detail?.clientId !== clientId) return;
             setOpen(true);
-            setShowSelectScreen(true);
             setImageBlockId(clientId);
         };
         window.addEventListener(namespace, open as (e: Event) => void);
         return () => {
             window.removeEventListener(namespace, open as (e: Event) => void);
         };
-    }, [clientId, setShowSelectScreen, setImageBlockId]);
+    }, [clientId, setImageBlockId]);
 
     if (!open || !ready) return null;
 
@@ -87,6 +81,7 @@ export const Loader = ({ setAttributes, clientId }: LoaderProps) => {
             {!loggedIn && <Login onClose={onClose} />}
             <Modal onClose={onClose} setImage={handleImageImport} />
             <SettingsModal />
+            <ModelSwitch />
         </>
     );
 };

src/components/Login.tsx

@@ -59,7 +59,7 @@ export const Login = ({ onClose }: LoginProps) => {
             }}
             initialFocus={initialFocus}>
             <div className="flex flex-col justify-between flex-grow bg-white h-auto lg:h-72">
-                <div className="flex flex-col flex-grow p-4">
+                <div className="flex flex-col flex-grow">
                     <form
                         className="mb-2"
                         onSubmit={(e) => {
@@ -79,7 +79,7 @@ export const Login = ({ onClose }: LoginProps) => {
                                     type="text"
                                     value={token}
                                     onChange={(e) => setToken(e.target.value)}
-                                    className="w-full h-10 rounded-none border border-gray-900 focus:outline-none focus:ring-1 ring-offset-1 ring-wp-theme-500 focus:shadow-none"
+                                    className="w-full h-10 rounded-none border border-gray-900 outline-none focus:shadow-none focus:ring-wp focus:ring-wp-theme-500"
                                 />
                                 {errorMsg && (
                                     <p

src/components/Modal.tsx

@@ -1,35 +1,32 @@
-import { useEffect, useRef } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Dialog } from '@headlessui/react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { ModalDefault } from '../layouts/ModalDefault';
 import { models } from '../models';
-import { StableDiffusion } from '../models/StableDiffusion';
 import { useAuthStore } from '../state/auth';
 import { useGlobalState } from '../state/global';
-import { AvailableModels, ImageLike } from '../types';
+import { ImageLike } from '../types';
+import { UserInferface } from './UserInterface';
 
 type ModalProps = {
     setImage: (image: ImageLike) => void;
     onClose: () => void;
 };
 
 export const Modal = ({ setImage, onClose }: ModalProps) => {
-    const initialFocus = useRef(null);
-    const { currentInterface, setShowSelectScreen } = useGlobalState();
+    const { currentModel } = useGlobalState();
     const { apiToken } = useAuthStore();
-
-    useEffect(() => {
-        if (currentInterface) setShowSelectScreen(false);
-    }, [currentInterface, setShowSelectScreen]);
+    const name = models.find((m) => m.id === currentModel)?.name;
+    const initialFocus = useRef(null);
 
     return (
         <Dialog
             className="stable-diffusion-editor stable-diffusion-modal"
-            initialFocus={initialFocus}
             data-cy="model-screen"
+            initialFocus={initialFocus}
             key="main-modal"
-            open={Boolean(currentInterface) && Boolean(apiToken)}
+            open={Boolean(currentModel) && Boolean(apiToken)}
             onClose={onClose}>
             <div className="absolute mx-auto w-full h-full overflow-hidden md:p-8 md:flex justify-center items-center z-high">
                 <div
@@ -43,51 +40,24 @@ export const Modal = ({ setImage, onClose }: ModalProps) => {
                         animate={{ y: 0 }}
                         exit={{ y: 0, opacity: 0 }}
                         className="sm:flex relative shadow-2xl sm:overflow-hidden max-w-screen-2xl mx-auto bg-white h-full">
-                        <Dialog.Title className="sr-only">
-                            {
-                                models.find((m) => m.id === currentInterface)
-                                    ?.name
-                            }
-                        </Dialog.Title>
+                        <Dialog.Title className="sr-only">{name}</Dialog.Title>
                         <div className="md:flex flex-col w-full relative h-screen md:h-auto">
-                            <ModalContent
-                                setImage={setImage}
-                                modelName={currentInterface}
+                            <ModalDefault
                                 onClose={onClose}
-                                initialFocus={initialFocus}
-                            />
+                                title={
+                                    name ??
+                                    __('Stable Diffusion', 'stable-diffusion')
+                                }>
+                                <UserInferface
+                                    initialFocus={initialFocus}
+                                    modelName={currentModel}
+                                    setImage={setImage}
+                                />
+                            </ModalDefault>
                         </div>
                     </motion.div>
                 </AnimatePresence>
             </div>
         </Dialog>
     );
 };
-
-type ModalContent = {
-    setImage: (image: ImageLike) => void;
-    modelName?: AvailableModels;
-    onClose: () => void;
-    // eslint-disable-next-line
-    initialFocus: any;
-};
-const ModalContent = ({
-    setImage,
-    modelName,
-    onClose,
-    initialFocus,
-}: ModalContent) => {
-    if (modelName === 'stability-ai/stable-diffusion') {
-        return (
-            <ModalDefault
-                onClose={onClose}
-                title={__('Stable Diffusion', 'stable-diffusion')}>
-                <StableDiffusion
-                    initialFocus={initialFocus}
-                    setImage={setImage}
-                />
-            </ModalDefault>
-        );
-    }
-    return null;
-};

src/components/ModalControls.tsx

@@ -1,7 +1,7 @@
 import { Icon, Tooltip } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useAuth } from '../hooks/useAuth';
-import { closeXIcon, logOutIcon, settingsIcon } from '../icons';
+import { closeXIcon } from '../icons';
 import { useGlobalState } from '../state/global';
 
 type ModalControlsProps = {
@@ -10,58 +10,76 @@ type ModalControlsProps = {
 };
 export const ModalControls = ({ onClose, title }: ModalControlsProps) => {
     return (
-        <div className="flex items-center justify-between w-full border-b gap-x-4 fixed md:static top-0 bg-white px-6 h-10">
-            <div className="text-lg font-medium">{title}</div>
-            <div className="flex gap-x-10 h-full items-center">
-                <div className="flex gap-x-2">
+        <div className="flex items-center w-full border-b fixed md:static top-0 bg-white h-10">
+            <div className="flex-shrink-0 font-mono font-semibold text-sm px-6">
+                {title}
+            </div>
+            <div className="flex justify-between items-center w-full">
+                <div className="flex items-center gap-2">
+                    <SwitchButton />
                     <SettingsButton />
+                </div>
+                <div className="flex gap-x-2 h-full items-center justify-end">
                     <LogoutButton />
+                    <ModalCloseButton onClose={onClose} />
                 </div>
-                <ModalCloseButton onClose={onClose} />
             </div>
         </div>
     );
 };
 
+const toolbarBtnClx =
+    'flex gap-1 items-center justify-center text-xs text-gray-900 px-2 bg-transparent hover:bg-gray-100 h-8 cursor-pointer outline-none focus:shadow-none focus:ring-wp focus:ring-wp-theme-500';
+
 export const SettingsButton = () => {
     const { setSettingsTab } = useGlobalState();
     return (
-        <Tooltip text={__('Settings', 'stable-diffusion')}>
-            <button
-                className="block w-6 h-6 text-gray-900 p-px bg-transparent cursor-pointer outline-none focus:shadow-none focus:ring-wp focus:ring-wp-theme-500"
-                type="button"
-                onClick={() => setSettingsTab('optins')}
-                aria-label={__('settings', 'stable-diffusion')}>
-                <Icon icon={settingsIcon} size={24} />
-            </button>
-        </Tooltip>
+        <button
+            className={toolbarBtnClx}
+            type="button"
+            onClick={() => setSettingsTab('optins')}>
+            {/* <Icon icon={settingsIcon} size={20} /> */}
+            {__('Settings', 'stable-diffusion')}
+        </button>
+    );
+};
+
+export const SwitchButton = () => {
+    const { setShowSelectScreen } = useGlobalState();
+    return (
+        <button
+            className={toolbarBtnClx}
+            type="button"
+            onClick={() => setShowSelectScreen(true)}>
+            {/* <Icon icon={switchModelIcon} size={20} /> */}
+            {__('Switch Models', 'stable-diffusion')}
+        </button>
     );
 };
 
 export const LogoutButton = () => {
     const { logout } = useAuth();
     return (
-        <Tooltip text={__('Logout', 'stable-diffusion')}>
-            <button
-                className="block w-6 h-6 text-gray-900 p-px bg-transparent cursor-pointer outline-none focus:shadow-none focus:ring-wp focus:ring-wp-theme-500"
-                type="button"
-                data-cy="logout"
-                onClick={logout}
-                aria-label={__('Logout', 'stable-diffusion')}>
-                <Icon icon={logOutIcon} size={24} />
-            </button>
-        </Tooltip>
+        <button
+            className={toolbarBtnClx}
+            type="button"
+            data-cy="logout"
+            onClick={logout}
+            aria-label={__('Logout', 'stable-diffusion')}>
+            {/* <Icon icon={logOutIcon} size={20} /> */}
+            {__('Logout', 'stable-diffusion')}
+        </button>
     );
 };
 
 export const ModalCloseButton = ({ onClose }: { onClose: () => void }) => (
     <Tooltip text={__('Close', 'stable-diffusion')}>
         <button
-            className="w-10 h-10 text-white bg-gray-900 cursor-pointer outline-none focus:shadow-none border border-gray-900 focus:border-wp-theme-500 -mx-6 flex items-center justify-center"
+            className="w-10 h-10 text-white bg-gray-900 cursor-pointer outline-none focus:shadow-none border border-gray-900 focus:border-wp-theme-500 flex items-center justify-center"
             type="button"
             onClick={onClose}
             aria-label={__('Close', 'stable-diffusion')}>
-            <Icon icon={closeXIcon} size={24} />
+            <Icon icon={closeXIcon} size={20} />
         </button>
     </Tooltip>
 );

src/components/ModelCard.tsx

@@ -10,9 +10,9 @@ export const ModelCard = ({ modelInfo }: ModelCardProps) => {
         return null;
     }
     return (
-        <div className="flex items-end" style={{ minHeight: '250px' }}>
+        <div className="flex items-end">
             <motion.div
-                className="p-6 pt-0 pb-4"
+                className="p-6 pt-0 pb-4 w-full"
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}>
                 <ModelMetadata {...modelInfo} />