void;
title: string;
+ hide?: boolean;
};
-export const ModalControls = ({ onClose, title }: ModalControlsProps) => {
+export const ModalControls = ({ onClose, title, hide }: ModalControlsProps) => {
return (
+ className="flex items-center justify-between w-full border-b fixed md:static top-0 bg-white h-10">
{title}
-
-
+ {hide ? (
+
+ ) : (
+
+
+ )}
@@ -60,7 +66,16 @@ export const SwitchButton = () => {
};
export const LogoutButton = () => {
- const { logout } = useAuth();
+ const { setImageBlockId } = useGlobalState();
+ const logout = async () => {
+ await apiFetch({
+ path: '/kevinbatdorf/stable-diffusion/save-token',
+ method: 'POST',
+ data: { token: '' },
+ });
+ setImageBlockId(undefined);
+ mutate(() => true, undefined, { revalidate: true });
+ };
return (
({});
@@ -93,7 +91,6 @@ export const UserInferface = ({
const response = await apiFetch({
path: `kevinbatdorf/stable-diffusion/generate?cache=${Date.now()}`,
method: 'POST',
- headers: { Authorization: `Token ${apiToken}` },
data: {
input: {
width: width || undefined,
@@ -131,7 +128,6 @@ export const UserInferface = ({
apiFetch({
path: 'kevinbatdorf/stable-diffusion/cancel',
method: 'POST',
- headers: { Authorization: `Token ${apiToken}` },
data: { id: generateId },
});
diff --git a/src/components/features/PromptGenerator.tsx b/src/filters/modal/components/features/PromptGenerator.tsx
similarity index 100%
rename from src/components/features/PromptGenerator.tsx
rename to src/filters/modal/components/features/PromptGenerator.tsx
diff --git a/src/components/inputs/GoButton.tsx b/src/filters/modal/components/inputs/GoButton.tsx
similarity index 100%
rename from src/components/inputs/GoButton.tsx
rename to src/filters/modal/components/inputs/GoButton.tsx
diff --git a/src/components/inputs/ImageUploader.tsx b/src/filters/modal/components/inputs/ImageUploader.tsx
similarity index 100%
rename from src/components/inputs/ImageUploader.tsx
rename to src/filters/modal/components/inputs/ImageUploader.tsx
diff --git a/src/components/inputs/MediaUploader.tsx b/src/filters/modal/components/inputs/MediaUploader.tsx
similarity index 100%
rename from src/components/inputs/MediaUploader.tsx
rename to src/filters/modal/components/inputs/MediaUploader.tsx
diff --git a/src/components/inputs/NumberSelect.tsx b/src/filters/modal/components/inputs/NumberSelect.tsx
similarity index 100%
rename from src/components/inputs/NumberSelect.tsx
rename to src/filters/modal/components/inputs/NumberSelect.tsx
diff --git a/src/components/inputs/PromptInput.tsx b/src/filters/modal/components/inputs/PromptInput.tsx
similarity index 100%
rename from src/components/inputs/PromptInput.tsx
rename to src/filters/modal/components/inputs/PromptInput.tsx
diff --git a/src/components/misc/FocusHelperButton.tsx b/src/filters/modal/components/misc/FocusHelperButton.tsx
similarity index 100%
rename from src/components/misc/FocusHelperButton.tsx
rename to src/filters/modal/components/misc/FocusHelperButton.tsx
diff --git a/src/components/outputs/ImageActions.tsx b/src/filters/modal/components/outputs/ImageActions.tsx
similarity index 97%
rename from src/components/outputs/ImageActions.tsx
rename to src/filters/modal/components/outputs/ImageActions.tsx
index 8e1256f..60d6cba 100644
--- a/src/components/outputs/ImageActions.tsx
+++ b/src/filters/modal/components/outputs/ImageActions.tsx
@@ -1,7 +1,7 @@
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
import { fabric } from 'fabric';
-import { downloadImage, copyImage } from '../../lib/image';
+import { downloadImage, copyImage } from '../../../../lib/image';
import { useCanvasState } from '../../state/canvas';
import { useGlobalState } from '../../state/global';
import { ImageLike } from '../../types';
diff --git a/src/components/outputs/ImagesOutput.tsx b/src/filters/modal/components/outputs/ImagesOutput.tsx
similarity index 100%
rename from src/components/outputs/ImagesOutput.tsx
rename to src/filters/modal/components/outputs/ImagesOutput.tsx
diff --git a/src/components/panels/CanvasPanel.tsx b/src/filters/modal/components/panels/CanvasPanel.tsx
similarity index 100%
rename from src/components/panels/CanvasPanel.tsx
rename to src/filters/modal/components/panels/CanvasPanel.tsx
diff --git a/src/components/panels/SimplePanel.tsx b/src/filters/modal/components/panels/SimplePanel.tsx
similarity index 100%
rename from src/components/panels/SimplePanel.tsx
rename to src/filters/modal/components/panels/SimplePanel.tsx
diff --git a/src/filters/modal/hooks/useAuth.ts b/src/filters/modal/hooks/useAuth.ts
new file mode 100644
index 0000000..7e26c25
--- /dev/null
+++ b/src/filters/modal/hooks/useAuth.ts
@@ -0,0 +1,26 @@
+import apiFetch from '@wordpress/api-fetch';
+import { __ } from '@wordpress/i18n';
+import useSWR from 'swr';
+
+const fetcher = () =>
+ apiFetch({
+ method: 'POST',
+ path: `kevinbatdorf/stable-diffusion/login?cache=${Date.now()}`,
+ });
+export const useAuth = () => {
+ const { data, error, mutate } = useSWR('login', fetcher);
+
+ // if the error detail includes "authentication" then we're not logged in, check that
+ const errorMessage = error?.detail
+ ?.toLowerCase()
+ ?.includes('authentication')
+ ? __('You are not logged in.', 'block-diffusion')
+ : error?.detail;
+
+ return {
+ loggedIn: data,
+ error: errorMessage,
+ loggingIn: !error && !data,
+ mutate,
+ };
+};
diff --git a/src/hooks/useFabric.tsx b/src/filters/modal/hooks/useFabric.tsx
similarity index 100%
rename from src/hooks/useFabric.tsx
rename to src/filters/modal/hooks/useFabric.tsx
diff --git a/src/filters/modal/hooks/useModel.ts b/src/filters/modal/hooks/useModel.ts
new file mode 100644
index 0000000..29efbd3
--- /dev/null
+++ b/src/filters/modal/hooks/useModel.ts
@@ -0,0 +1,14 @@
+import apiFetch from '@wordpress/api-fetch';
+import useSWRImmutable from 'swr/immutable';
+import { AvailableModels, ModelData } from '../types';
+
+const fetcher = (model: AvailableModels): Promise =>
+ apiFetch({
+ method: 'GET',
+ path: `kevinbatdorf/stable-diffusion/get-model?model=${model}&cache=${Date.now()}`,
+ });
+
+export const useModel = (model: AvailableModels) => {
+ const { data, error } = useSWRImmutable(model, fetcher);
+ return { data, error, loading: !error && !data };
+};
diff --git a/src/hooks/usePrediction.ts b/src/filters/modal/hooks/usePrediction.ts
similarity index 77%
rename from src/hooks/usePrediction.ts
rename to src/filters/modal/hooks/usePrediction.ts
index 456c7dd..3699af1 100644
--- a/src/hooks/usePrediction.ts
+++ b/src/filters/modal/hooks/usePrediction.ts
@@ -1,24 +1,18 @@
import apiFetch from '@wordpress/api-fetch';
import { useEffect, useRef } from '@wordpress/element';
import useSWRImmutable from 'swr/immutable';
-import { useAuthStore } from '../state/auth';
import { PredictionData } from '../types';
-const fetcher = (
- predictionId: string,
- apiToken: string,
-): Promise =>
+const fetcher = (predictionId: string): Promise =>
apiFetch({
method: 'GET',
path: `kevinbatdorf/stable-diffusion/get-prediction?id=${predictionId}&cache=${Date.now()}`,
- headers: { Authorization: `Token ${apiToken}` },
});
export const usePrediction = (id: string) => {
- const { apiToken } = useAuthStore();
const paused = useRef(false);
const { data, error } = useSWRImmutable(
- id ? [id, apiToken] : null,
+ id ? id : null,
fetcher,
{
refreshInterval: 1000,
diff --git a/src/icons.tsx b/src/filters/modal/icons.tsx
similarity index 100%
rename from src/icons.tsx
rename to src/filters/modal/icons.tsx
diff --git a/src/filters/modal/layouts/ModalDefault.tsx b/src/filters/modal/layouts/ModalDefault.tsx
new file mode 100644
index 0000000..adff4f1
--- /dev/null
+++ b/src/filters/modal/layouts/ModalDefault.tsx
@@ -0,0 +1,63 @@
+import { useEffect } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+import { ModalControls } from '../components/ModalControls';
+import { useAuth } from '../hooks/useAuth';
+import { useGlobalState } from '../state/global';
+
+type ContentWrapperProps = {
+ children: React.ReactNode;
+ title: string;
+ onClose: () => void;
+};
+export const ModalDefault = ({
+ children,
+ title,
+ onClose,
+}: ContentWrapperProps) => {
+ const { loggingIn, error, mutate } = useAuth();
+ const { imageBlockId } = useGlobalState();
+
+ useEffect(() => {
+ if (!imageBlockId) {
+ return () => {
+ mutate(undefined, { revalidate: false });
+ };
+ }
+ }, [mutate, imageBlockId]);
+
+ return (
+ <>
+
+ {loggingIn ? (
+
+ {__('Checking access...', 'stable-diffusion')}
+
+ ) : (
+
{children}
+ )}
+
+ {error}
+
+ );
+ }
+ return <>{children};
+};
diff --git a/src/layouts/DialogWithImage.tsx b/src/filters/modal/layouts/SimpleDialog.tsx
similarity index 69%
rename from src/layouts/DialogWithImage.tsx
rename to src/filters/modal/layouts/SimpleDialog.tsx
index 3a602e4..88a660f 100644
--- a/src/layouts/DialogWithImage.tsx
+++ b/src/filters/modal/layouts/SimpleDialog.tsx
@@ -9,19 +9,13 @@ type ModalProps = {
testingId?: string;
children: React.ReactNode;
initialFocus: React.RefObject;
- image: {
- url: string;
- href: string;
- title: string;
- };
};
-export const DialogWithImageModal = ({
+export const SimpleDialog = ({
title,
onClose,
open,
testingId,
initialFocus,
- image,
children,
}: ModalProps) => {
return (
@@ -42,20 +36,9 @@ export const DialogWithImageModal = ({
initial={{ y: 5 }}
animate={{ y: 0 }}
exit={{ y: 0, opacity: 0 }}
- className="sm:flex relative shadow-2xl max-w-screen-md2 mx-auto bg-white overflow-y-auto md:overflow-hidden h-screen md:h-auto flex-grow">
+ className="sm:flex relative shadow-2xl max-w-screen-sm mx-auto bg-white overflow-y-auto md:overflow-hidden h-screen md:h-auto flex-grow">
{title}
-
-
- {image.title}
-
+
diff --git a/src/models.ts b/src/filters/modal/models.ts
similarity index 100%
rename from src/models.ts
rename to src/filters/modal/models.ts
diff --git a/src/state/canvas.ts b/src/filters/modal/state/canvas.ts
similarity index 96%
rename from src/state/canvas.ts
rename to src/filters/modal/state/canvas.ts
index f949def..a227e73 100644
--- a/src/state/canvas.ts
+++ b/src/filters/modal/state/canvas.ts
@@ -1,5 +1,5 @@
import { fabric } from 'fabric';
-import create from 'zustand';
+import {create} from 'zustand';
import { devtools } from 'zustand/middleware';
type CanvasState = {
diff --git a/src/state/global.ts b/src/filters/modal/state/global.ts
similarity index 90%
rename from src/state/global.ts
rename to src/filters/modal/state/global.ts
index decaf06..5618235 100644
--- a/src/state/global.ts
+++ b/src/filters/modal/state/global.ts
@@ -1,4 +1,4 @@
-import create from 'zustand';
+import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
import { models } from '../models';
import { AvailableModels } from '../types';
@@ -9,13 +9,13 @@ type GlobalState = {
importingMessage: string;
currentModel: AvailableModels;
showSelectScreen: boolean;
- imageBlockId: string;
+ imageBlockId?: string;
maybeImporting: boolean;
settingsTab?: SettingsTabs;
setImportingMessage: (loading: string) => void;
goToModel: (id: AvailableModels) => void;
setShowSelectScreen: (show: boolean) => void;
- setImageBlockId: (imageBlockId: string) => void;
+ setImageBlockId: (imageBlockId?: string) => void;
setMaybeImporting: (maybeImporting: boolean) => void;
setSettingsTab: (tab?: SettingsTabs) => void;
};
@@ -39,7 +39,7 @@ export const useGlobalState = create
()(
get().setShowSelectScreen(false);
},
setShowSelectScreen: (show) => set({ showSelectScreen: show }),
- setImageBlockId: (imageBlockId: string) => {
+ setImageBlockId: (imageBlockId) => {
set({ imageBlockId });
},
setMaybeImporting: (maybeImporting) => set({ maybeImporting }),
diff --git a/src/state/inputs.ts b/src/filters/modal/state/inputs.ts
similarity index 95%
rename from src/state/inputs.ts
rename to src/filters/modal/state/inputs.ts
index 6fb06ff..f4d0540 100644
--- a/src/state/inputs.ts
+++ b/src/filters/modal/state/inputs.ts
@@ -1,4 +1,4 @@
-import create from 'zustand';
+import { create } from 'zustand';
import { devtools } from 'zustand/middleware';
type InputsState = {
diff --git a/src/state/settings.ts b/src/filters/modal/state/settings.ts
similarity index 68%
rename from src/state/settings.ts
rename to src/filters/modal/state/settings.ts
index 2152509..6c84d0b 100644
--- a/src/state/settings.ts
+++ b/src/filters/modal/state/settings.ts
@@ -1,8 +1,27 @@
import apiFetch from '@wordpress/api-fetch';
import { useEffect, useState } from '@wordpress/element';
-import create from 'zustand';
-import { devtools, persist } from 'zustand/middleware';
-import { getSettings } from '../lib/wp';
+import { create } from 'zustand';
+import { createJSONStorage, devtools, persist } from 'zustand/middleware';
+
+type OptIns = typeof optInsOptions[number];
+type DisabledFeatures = typeof disabledFeatures[number];
+type SettingsFn = (
+ type: T,
+ value: typeof initialState[T][number],
+) => void;
+type SettingsTypes = {
+ seenNotices: string[];
+ optIns: OptIns[];
+ disabledFeatures: DisabledFeatures[];
+
+ add: SettingsFn;
+ remove: SettingsFn;
+ toggle: SettingsFn;
+ has: (
+ type: T,
+ value: typeof initialState[T][number],
+ ) => boolean;
+};
const optInsOptions = [
'prompt-accept', // user has accepted to request prompts
@@ -17,6 +36,40 @@ const initialState = {
disabledFeatures: [] as DisabledFeatures[],
};
+export const getSettings = async (name: string) => {
+ const settings = await apiFetch({
+ path: '/kevinbatdorf/stable-diffusion/options',
+ });
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore-next-line
+ return settings?.[name];
+};
+const storage = {
+ getItem: async (name: string) => {
+ const settings = await getSettings(name);
+ return JSON.stringify({
+ version: settings.version,
+ state: settings || initialState,
+ });
+ },
+ setItem: async (name: string, value: string) => {
+ const { state, version } = JSON.parse(value);
+ const data = {
+ [name]: Object.assign(
+ (await getSettings(name)) || initialState,
+ state,
+ { version },
+ ),
+ };
+ await apiFetch({
+ path: '/kevinbatdorf/stable-diffusion/options',
+ method: 'POST',
+ data,
+ });
+ },
+ removeItem: () => undefined,
+};
+
export const useSettingsStore = create()(
persist(
devtools(
@@ -47,32 +100,7 @@ export const useSettingsStore = create()(
),
{
name: 'stable_diffusion_options',
- getStorage: () => ({
- getItem: async (name: string) => {
- const settings = await getSettings(name, initialState);
- return JSON.stringify({
- version: settings.version,
- state: settings,
- });
- },
- setItem: async (name: string, value: string) => {
- const { state, version } = JSON.parse(value);
- const data = {
- [name]: Object.assign(
- await getSettings(name, initialState),
- // filter out items not in the initial state
- state,
- { version },
- ),
- };
- await apiFetch({
- path: '/wp/v2/settings',
- method: 'POST',
- data,
- });
- },
- removeItem: () => undefined,
- }),
+ storage: createJSONStorage(() => storage),
},
),
);
@@ -91,23 +119,3 @@ export const useSettingsStoreReady = () => {
}, []);
return hydrated;
};
-
-type OptIns = typeof optInsOptions[number];
-type DisabledFeatures = typeof disabledFeatures[number];
-type SettingsFn = (
- type: T,
- value: typeof initialState[T][number],
-) => void;
-type SettingsTypes = {
- seenNotices: string[];
- optIns: OptIns[];
- disabledFeatures: DisabledFeatures[];
-
- add: SettingsFn;
- remove: SettingsFn;
- toggle: SettingsFn;
- has: (
- type: T,
- value: typeof initialState[T][number],
- ) => boolean;
-};
diff --git a/src/types.ts b/src/filters/modal/types.ts
similarity index 100%
rename from src/types.ts
rename to src/filters/modal/types.ts
diff --git a/src/utils.ts b/src/filters/modal/utils.ts
similarity index 100%
rename from src/utils.ts
rename to src/filters/modal/utils.ts
diff --git a/src/global.tsx b/src/global.tsx
new file mode 100644
index 0000000..b34e736
--- /dev/null
+++ b/src/global.tsx
@@ -0,0 +1,12 @@
+import domReady from '@wordpress/dom-ready';
+import { render, createRoot } from '@wordpress/element';
+import { LoginPrompt } from './components/LoginPrompt';
+import './editor.css';
+
+domReady(() => {
+ const span = document.createElement('span');
+ document.body.appendChild(span);
+
+ if (createRoot) createRoot(span).render( =>
- apiFetch({
- method: 'GET',
- path: `kevinbatdorf/stable-diffusion/get-model?model=${model}&cache=${Date.now()}`,
- headers: { Authorization: `Token ${apiToken}` },
- });
-
-export const useModel = (model: AvailableModels) => {
- const { apiToken, storeApiToken } = useAuthStore();
- const { data, error } = useSWRImmutable(
- [model, apiToken],
- fetcher,
- );
- // check if error is 401
- if (error?.detail === 'Invalid token.') {
- console.error(error);
- storeApiToken('');
- }
- return { data, error, loading: !error && !data };
-};
diff --git a/src/index.tsx b/src/index.tsx
index fc0989e..796852c 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,21 +1,17 @@
import { registerBlockType } from '@wordpress/blocks';
-import domReady from '@wordpress/dom-ready';
-import { render } from '@wordpress/element';
import { addFilter } from '@wordpress/hooks';
import { __ } from '@wordpress/i18n';
import blockConfig from './block.json';
-import { AutoInject } from './components/AutoInject';
-import { BlockFilter } from './components/BlockFilter';
-import { BlockReplacer } from './components/BlockReplacer';
import './editor.css';
-import { blockIcon } from './icons';
+import { BlockFilter } from './filters/modal/components/BlockFilter';
+import { blockIcon } from './filters/modal/icons';
registerBlockType('kevinbatdorf/stable-diffusion', {
...blockConfig,
icon: blockIcon,
attributes: {},
title: __('Block Diffusion', 'stable-diffusion'),
- edit: ({ clientId }) =>
- {children}
-
-
- );
-};
diff --git a/src/lib/wp.ts b/src/lib/wp.ts
index 1d95b2e..fef7458 100644
--- a/src/lib/wp.ts
+++ b/src/lib/wp.ts
@@ -1,5 +1,5 @@
import apiFetch from '@wordpress/api-fetch';
-import { ImageLike, WpImage } from '../types';
+import { ImageLike, WpImage } from '../filters/modal/types';
import { imageUrlToBlob } from './image';
export const importImage = async (
@@ -33,11 +33,3 @@ export const setImage = async (
caption: image.caption,
});
};
-
-// eslint-disable-next-line
-export const getSettings = async (name: string, defaultSettings: any) => {
- const allSettings = await apiFetch({ path: '/wp/v2/settings' });
- // eslint-disable-next-line @typescript-eslint/ban-ts-comment
- // @ts-ignore-next-line
- return allSettings?.[name] || { ...defaultSettings, version: 0 };
-};
diff --git a/src/state/auth.ts b/src/state/auth.ts
deleted file mode 100644
index fe6acb9..0000000
--- a/src/state/auth.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-import apiFetch from '@wordpress/api-fetch';
-import { useEffect, useState } from '@wordpress/element';
-import create from 'zustand';
-import { devtools, persist } from 'zustand/middleware';
-import { getSettings } from '../lib/wp';
-
-type AuthTypes = {
- apiToken: string;
- storeApiToken: (apiToken: string) => void;
- deleteApiToken: () => void;
-};
-const initialState = { apiToken: '' };
-
-export const useAuthStore = create()(
- persist(
- devtools(
- (set) => ({
- ...initialState,
- storeApiToken: (apiToken) => set({ apiToken }),
- deleteApiToken: () => set({ apiToken: '' }),
- }),
- { name: 'Block Diffusion Auth' },
- ),
- {
- name: 'stable_diffusion_settings',
- getStorage: () => ({
- getItem: async (name: string) => {
- const settings = await getSettings(name, initialState);
- return JSON.stringify({
- version: settings.version,
- state: settings,
- });
- },
- setItem: async (name: string, value: string) => {
- const { state, version } = JSON.parse(value);
- const data = {
- [name]: Object.assign(
- await getSettings(name, initialState),
- // filter out items not in the initial state
- state,
- { version },
- ),
- };
- await apiFetch({
- path: '/wp/v2/settings',
- method: 'POST',
- data,
- });
- },
- removeItem: () => undefined,
- }),
- },
- ),
-);
-
-export const useAuthStoreReady = () => {
- const [hydrated, setHydrated] = useState(useAuthStore.persist.hasHydrated);
- useEffect(() => {
- const unsubFinishHydration = useAuthStore.persist.onFinishHydration(
- () => setHydrated(true),
- );
- return () => {
- unsubFinishHydration();
- };
- }, []);
- return hydrated;
-};
diff --git a/stable-diffusion.php b/stable-diffusion.php
index 6eabede..ce8b790 100644
--- a/stable-diffusion.php
+++ b/stable-diffusion.php
@@ -18,16 +18,6 @@
wp_set_script_translations('kevinbatdorf/stable-diffusion', 'stable-diffusion');
});
-add_filter('plugin_action_links_' . plugin_basename(__FILE__), function ($links) {
- $links[] = sprintf(
- '%s ',
- esc_url(admin_url('post-new.php?post_type=page&block-diffusion-open')),
- __('Loads a new page and opens the application', 'stable-diffusion'),
- __('Enter API Token', 'stable-diffusion')
- );
- return $links;
-});
-
-include_once(__DIR__ . '/php/settings.php');
+include_once(__DIR__ . '/php/global-scripts.php');
include_once(__DIR__ . '/php/router.php');
include_once(__DIR__ . '/php/routes.php');
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..4f561f5
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,10 @@
+const defaultConfig = require('@wordpress/scripts/config/webpack.config');
+
+module.exports = {
+ ...defaultConfig,
+ plugins: [...defaultConfig.plugins],
+ entry: {
+ index: './src/index.tsx',
+ global: './src/global.tsx',
+ },
+};