WIP

packages/@uppy/core/src/_common.scss

@@ -187,3 +187,14 @@
     color: $gray-500;
   }
 }
+
+.sr-only {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+}

packages/@uppy/image-generator/src/index.tsx

@@ -1,7 +1,6 @@
 import type { Body, Meta, UIPluginOptions, Uppy } from '@uppy/core'
 import { UIPlugin } from '@uppy/core'
 import { SearchInput } from '@uppy/provider-views'
-// eslint-disable-next-line import/no-extraneous-dependencies
 import type Transloadit from '@uppy/transloadit'
 import type { AssemblyResult } from '@uppy/transloadit'
 import locale from './locale.js'
@@ -69,7 +68,7 @@ export default class ImageGenerator<
       this.setPluginState({ loading: true })
       await this.uppy.upload()
     } catch {
-      // TODO: inform the user
+      // TODO: inform the user?
     } finally {
       // Normally uppy.upload() is only used to upload your files
       // but here we need it to _get_ the results from the AI image generator Robot.
@@ -120,7 +119,9 @@ export default class ImageGenerator<
             <input
               type="text"
               id="uppy-image-generator-prompt"
+              className="uppy-c-textInput"
               value={prompt}
+              data-uppy-super-focusable
               onInput={(e) =>
                 this.setPluginState({
                   prompt: (e.target as HTMLInputElement).value,
@@ -128,6 +129,26 @@ export default class ImageGenerator<
               }
             />
             <label for="uppy-image-generator-prompt">Prompt</label>
+            <button
+              type="button"
+              className="uppy-u-reset"
+              data-uppy-super-focusable
+            >
+              <span className="sr-only">Regenerate</span>
+              <svg
+                aria-hidden
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="currentColor"
+                class="uppy-c-icon"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M4.755 10.059a7.5 7.5 0 0 1 12.548-3.364l1.903 1.903h-3.183a.75.75 0 1 0 0 1.5h4.992a.75.75 0 0 0 .75-.75V4.356a.75.75 0 0 0-1.5 0v3.18l-1.9-1.9A9 9 0 0 0 3.306 9.67a.75.75 0 1 0 1.45.388Zm15.408 3.352a.75.75 0 0 0-.919.53 7.5 7.5 0 0 1-12.548 3.364l-1.902-1.903h3.183a.75.75 0 0 0 0-1.5H2.984a.75.75 0 0 0-.75.75v4.992a.75.75 0 0 0 1.5 0v-3.18l1.9 1.9a9 9 0 0 0 15.059-4.035.75.75 0 0 0-.53-.918Z"
+                  clip-rule="evenodd"
+                />
+              </svg>
+            </button>
           </div>
 
           <ul className="uppy-ImageGenerator-grid">

packages/@uppy/image-generator/src/style.scss

@@ -10,18 +10,38 @@
 
 .uppy-ImageGenerator-prompt {
   width: 100%;
+  display: flex;
+  padding: 12px;
+  gap: 1em;
 
   input {
+    width: 100%;
     color: $gray-800;
-    border-radius: 10px;
-    border: none;
-    font-size: 1em;
-    padding: 0.5em 1em;
+    border-radius: 8px 8px;
+    border: 0;
+    background-color: $gray-200;
+    text-align: left;
   }
 
   label {
     display: none;
   }
+
+  button {
+    color: $blue;
+    font-size: 14px;
+
+    &:hover svg {
+      transform: rotate(30deg);
+      transition: transform 100ms ease-in-out;
+    }
+
+    svg {
+      transition: transform 100ms ease-in-out;
+      height: 24px;
+      width: 24px;
+    }
+  }
 }
 
 .uppy-ImageGenerator-grid {

packages/@uppy/image-generator/turbo.json

@@ -0,0 +1,8 @@
+{
+  "extends": ["//"],
+  "tasks": {
+    "build": {
+      "dependsOn": ["^build", "@uppy/core#build", "@uppy/transloadit#build"]
+    }
+  }
+}

private/dev/index.js

@@ -1,4 +1,13 @@
-import 'uppy/dist/uppy.css'
+import '@uppy/core/css/style.css'
+import '@uppy/dashboard/css/style.css'
+import '@uppy/provider-views/css/style.css'
+import '@uppy/url/css/style.css'
+import '@uppy/webcam/css/style.css'
+import '@uppy/audio/css/style.css'
+import '@uppy/screen-capture/css/style.css'
+import '@uppy/image-editor/css/style.css'
+import '@uppy/image-generator/css/style.css'
+import '@uppy/drop-target/css/style.css'
 
 import Dashboard from './Dashboard.js'
 import DragDrop from './DragDrop.js'

yarn.lock

@@ -9432,7 +9432,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy/image-generator@workspace:packages/@uppy/image-generator":
+"@uppy/image-generator@workspace:^, @uppy/image-generator@workspace:packages/@uppy/image-generator":
   version: 0.0.0-use.local
   resolution: "@uppy/image-generator@workspace:packages/@uppy/image-generator"
   dependencies:
@@ -23901,6 +23901,7 @@ __metadata:
     "@uppy/google-drive-picker": "workspace:^"
     "@uppy/google-photos-picker": "workspace:^"
     "@uppy/image-editor": "workspace:^"
+    "@uppy/image-generator": "workspace:^"
     "@uppy/instagram": "workspace:^"
     "@uppy/locales": "workspace:^"
     "@uppy/onedrive": "workspace:^"