Merge pull request #32 from KevinBatdorf/release/0.3.0

Release 0.3.0

.github/workflows/cypress.yml

@@ -30,6 +30,8 @@ jobs:
               run: wp-env start
             - name: Cypress run
               uses: cypress-io/github-action@v4
+              with:
+                  browser: chrome
               env:
                   GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
                   API_TOKEN: ${{ secrets.API_TOKEN }}

README.md

@@ -10,5 +10,5 @@ If using the repo here, you need to first build it. Run `npm ci && npm run build
 
 
 ## Example Screenshots
-![alt text](.wordpress-org/screenshot-1.gif "Example")
+![alt text](.wordpress-org/screenshot-1.png "Example")
 ![alt text](.wordpress-org/screenshot-2.png "Example 2")

cypress/e2e/models.cy.js

@@ -0,0 +1,25 @@
+context('Model checks', () => {
+    it('Can switch between models', () => {
+        cy.addOurBlock();
+
+        cy.maybeLogin();
+
+        // First we should see the stable diffusion model
+        cy.get('[data-cy="modal-controls"]').should('contain', 'Text to Image');
+
+        cy.get('[data-cy="modal-controls"]').contains('Switch Models').click();
+
+        cy.get('[data-cy="modal-switch"]').should('exist');
+
+        cy.get('[data-cy="model-switch-grid"] button')
+            .contains('lambdal/text-to-pokemon')
+            .click();
+
+        cy.get('[data-cy="modal-controls"]').should(
+            'contain',
+            'Text to Pokémon',
+        );
+
+        cy.closeModal();
+    });
+});

readme.txt

@@ -2,7 +2,7 @@
 Contributors:      kbat82
 Tags:              block, stable diffusion, ai, prompt, artificial intelligence
 Tested up to:      6.1
-Stable tag:        0.2.0
+Stable tag:        0.3.0
 License:           GPL-2.0-or-later
 License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 
@@ -17,7 +17,8 @@ This plugin interfaces with the Replicate API and allows you to run open-source
 Semi interactive demo at [https://www.block-diffusion.com/](https://www.block-diffusion.com/)
 
 = Features =
-- Stable Diffusion
+- Stable Diffusion model
+- Text to Pokémon model
 - Prompt suggestion + preview
 
 = Pro version =
@@ -29,7 +30,6 @@ There are no plans to lock any features behind a pro or premium plugin. All feat
 - Run multiple image predictions at once
 - Have more control over the image generation steps
 - View your prediction history
-- Model selection from collections
 
 = More Info =
 - Follow [@kevinbatdorf](https://twitter.com/kevinbatdorf) on Twitter
@@ -50,11 +50,15 @@ We also offer additional features on top of the Replicate API, such as prompt/ou
 
 == Screenshots ==
 
-1. "phase shift into an era of human+AI art collab"
+1. A view of the interface
 2. Choose from various models to run
 
 == Changelog ==
 
+= 0.3.0 - 2022-10-09 =
+- Feature: Add support for image to Pokémon generation
+- Tweak: Various UI changes
+
 = 0.2.0 - 2022-10-05 =
 - Feature: Help with prompt ideas and inspiration (opt in)
 - Feature: Prompt sharing with the community (opt in)

src/components/Modal.tsx

@@ -1,5 +1,4 @@
 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';
@@ -20,6 +19,8 @@ export const Modal = ({ setImage, onClose }: ModalProps) => {
     const name = models.find((m) => m.id === currentModel)?.name;
     const initialFocus = useRef(null);
 
+    if (!name) return null;
+
     return (
         <Dialog
             className="stable-diffusion-editor stable-diffusion-modal"
@@ -42,12 +43,7 @@ export const Modal = ({ setImage, onClose }: ModalProps) => {
                         className="sm:flex relative shadow-2xl sm:overflow-hidden max-w-screen-2xl mx-auto bg-white h-full">
                         <Dialog.Title className="sr-only">{name}</Dialog.Title>
                         <div className="md:flex flex-col w-full relative h-screen md:h-auto">
-                            <ModalDefault
-                                onClose={onClose}
-                                title={
-                                    name ??
-                                    __('Stable Diffusion', 'stable-diffusion')
-                                }>
+                            <ModalDefault onClose={onClose} title={name}>
                                 <UserInferface
                                     initialFocus={initialFocus}
                                     modelName={currentModel}

src/components/ModalControls.tsx

@@ -10,7 +10,9 @@ type ModalControlsProps = {
 };
 export const ModalControls = ({ onClose, title }: ModalControlsProps) => {
     return (
-        <div className="flex items-center w-full border-b fixed md:static top-0 bg-white h-10">
+        <div
+            data-cy="modal-controls"
+            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>

src/components/ModelSwitch.tsx

@@ -14,7 +14,9 @@ export const ModelSwitch = () => {
     return (
         <ModalContainer initialFocus={initialFocus}>
             <FocusHelperButton initialFocus={initialFocus} />
-            <div className="grid md:grid-cols-2 lg:grid-cols-3 h-screen md:h-auto overflow-y-scroll pb-10 md:pb-0 w-full">
+            <div
+                data-cy="model-switch-grid"
+                className="grid md:grid-cols-2 lg:grid-cols-3 h-screen md:h-auto overflow-y-scroll pb-10 md:pb-0 w-full">
                 {models.map((model) => (
                     <button
                         key={model.id}
@@ -30,10 +32,10 @@ export const ModelSwitch = () => {
                             }}
                         />
                         <div>
-                            <h2 className="font-mono text-lg m-0 mb-1 text-left">
+                            <h2 className="font-mono text-base m-0 mb-1 text-left">
                                 {model.id}
                             </h2>
-                            <p className="m-0 text-left text-base">
+                            <p className="m-0 text-left text-sm">
                                 {model.description}
                             </p>
                         </div>

src/components/UserInterface.tsx

@@ -235,7 +235,7 @@ export const UserInferface = ({
             <div className="flex flex-col justify-between md:w-96 flex-shrink-0 overflow-y-scroll bg-white">
                 <form
                     ref={focusArea}
-                    className="flex flex-col justify-between gap-y-4 flex-shrink-0 p-6 pb-0 flex-grow"
+                    className="flex flex-col gap-y-6 flex-shrink-0 p-6 pb-0 flex-grow"
                     onSubmit={(e) => {
                         e.preventDefault();
                         handleSubmit();

src/components/inputs/GoButton.tsx

@@ -61,7 +61,7 @@ export const GoButton = ({
                 type="submit"
                 onClick={onSubmit}
                 disabled={disabled}>
-                {__('Submit', 'stable-diffusion')}
+                {__('Run model', 'stable-diffusion')}
             </button>
         </motion.span>
     );

src/components/inputs/PromptInput.tsx

@@ -18,7 +18,7 @@ export const PromptInput = ({
     onChange,
 }: PromptSelectProps) => {
     const formItemClass = classNames(
-        'w-full text-lg rounded-none focus:outline-none focus:ring-wp ring-wp-theme-500 focus:shadow-none border pr-8',
+        'block w-full text-lg rounded-none focus:outline-none focus:ring-wp ring-wp-theme-500 focus:shadow-none border pr-8',
         {
             'bg-gray-200 border-gray-200': disabled,
             'border-gray-900': !disabled,

stable-diffusion.php

@@ -4,7 +4,7 @@
  * Description:       Generate unique images from text prompts using machine learning, all in the cloud.
  * Requires at least: 5.8
  * Requires PHP:      7.0
- * Version:           0.2.0
+ * Version:           0.3.0
  * Author:            Kevin Batdorf
  * License:           GPL-2.0-or-later
  * License URI:       https://www.gnu.org/licenses/gpl-2.0.html