mirror of
https://github.com/transloadit/uppy.git
synced 2026-07-30 13:30:31 +00:00
Update
This commit is contained in:
Murderlon
parent
6c17d745c1
commit
000b8c9052
3 changed files with 179 additions and 157 deletions
119
packages/@uppy/image-generator/src/icons.tsx
Normal file
119
packages/@uppy/image-generator/src/icons.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
|||
export function EmptyStateIcon() {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<title>image</title>
|
||||
<g fill="none">
|
||||
<path
|
||||
d="M18 3C20.2091 3 22 4.79086 22 7V15C22 17.2091 20.2091 19 18 19H6C3.79086 19 2 17.2091 2 15L2 7C2 4.79086 3.79086 3 6 3L18 3Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_0_javw1hgdp)"
|
||||
data-glass="origin"
|
||||
mask="url(#1752500502792-4934513_image_mask_g3cets1it)"
|
||||
></path>
|
||||
<path
|
||||
d="M18 3C20.2091 3 22 4.79086 22 7V15C22 17.2091 20.2091 19 18 19H6C3.79086 19 2 17.2091 2 15L2 7C2 4.79086 3.79086 3 6 3L18 3Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_0_javw1hgdp)"
|
||||
data-glass="clone"
|
||||
filter="url(#1752500502792-4934513_image_filter_0uoir1e4h)"
|
||||
clip-path="url(#1752500502792-4934513_image_clipPath_m7fya5ytl)"
|
||||
></path>
|
||||
<path
|
||||
d="M14.2168 7.89746C14.7172 7.68454 15.2828 7.68453 15.7832 7.89746C16.3562 8.1414 16.8052 8.85075 17.7031 10.2686L21.3887 16.0879C22.4031 17.6896 22.9108 18.4908 22.8604 19.1523C22.8163 19.7287 22.525 20.258 22.0615 20.6035C21.5296 21.0001 20.5815 21 18.6855 21H11.3145C9.41854 21 8.47039 21.0001 7.93848 20.6035C7.47504 20.258 7.18368 19.7287 7.13965 19.1523C7.08925 18.4908 7.59692 17.6896 8.61133 16.0879L12.2969 10.2686C13.1948 8.85076 13.6438 8.1414 14.2168 7.89746ZM7 5.5C8.38071 5.5 9.5 6.61929 9.5 8C9.5 9.38071 8.38071 10.5 7 10.5C5.61929 10.5 4.5 9.38071 4.5 8C4.5 6.61929 5.61929 5.5 7 5.5Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_1_bj56bphon)"
|
||||
data-glass="blur"
|
||||
></path>
|
||||
<path
|
||||
d="M18.6853 20.2497V20.9997H11.3142V20.2497H18.6853ZM14.2166 7.8981C14.7171 7.68501 15.2834 7.68501 15.7839 7.8981C16.3567 8.14225 16.8062 8.85079 17.7039 10.2682L21.3894 16.0876C22.4038 17.6893 22.9105 18.4905 22.8601 19.152L22.8328 19.3659C22.7412 19.8581 22.4669 20.3008 22.0613 20.6032C21.5294 20.9997 20.5812 20.9997 18.6853 20.9997V20.2497C19.6479 20.2497 20.3181 20.2494 20.8162 20.2038C21.3199 20.1576 21.5179 20.0734 21.613 20.0026C21.9027 19.7867 22.0845 19.4556 22.1121 19.0954C22.1211 18.9772 22.0869 18.7648 21.8562 18.3141C21.6283 17.8689 21.2707 17.3023 20.7556 16.4889L17.0701 10.6696C16.6133 9.94839 16.2974 9.45162 16.0271 9.10025C15.7568 8.74889 15.5978 8.63351 15.49 8.58756C15.1772 8.4544 14.8233 8.45444 14.5105 8.58756C14.4027 8.63346 14.2437 8.74887 13.9734 9.10025C13.7031 9.45159 13.3871 9.94848 12.9304 10.6696L9.24488 16.4889C8.72982 17.3022 8.3722 17.8689 8.14429 18.3141C7.91358 18.7648 7.87845 18.9772 7.88746 19.0954C7.91502 19.4556 8.09781 19.7867 8.38746 20.0026C8.48268 20.0734 8.68021 20.1576 9.18336 20.2038C9.68136 20.2494 10.3516 20.2497 11.3142 20.2497V20.9997C9.53729 20.9997 8.59308 21.0001 8.04371 20.6735L7.93922 20.6032C7.53362 20.3008 7.25929 19.8581 7.16773 19.3659L7.14039 19.152C7.08999 18.4905 7.59668 17.6893 8.61109 16.0876L12.2966 10.2682C13.1383 8.93932 13.5855 8.23305 14.1101 7.94889L14.2166 7.8981Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_2_j9i9duif7)"
|
||||
></path>
|
||||
<path
|
||||
d="M8.75 8C8.75 7.0335 7.9665 6.25 7 6.25C6.0335 6.25 5.25 7.0335 5.25 8C5.25 8.9665 6.0335 9.75 7 9.75V10.5C5.61929 10.5 4.5 9.38071 4.5 8C4.5 6.61929 5.61929 5.5 7 5.5C8.38071 5.5 9.5 6.61929 9.5 8C9.5 9.38071 8.38071 10.5 7 10.5V9.75C7.9665 9.75 8.75 8.9665 8.75 8Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_3_1gmx3q2tv)"
|
||||
></path>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="1752500502792-4934513_image_existing_0_javw1hgdp"
|
||||
x1="12"
|
||||
y1="3"
|
||||
x2="12"
|
||||
y2="19"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#575757"></stop>
|
||||
<stop offset="1" stop-color="#151515"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="1752500502792-4934513_image_existing_1_bj56bphon"
|
||||
x1="13.682"
|
||||
y1="5.5"
|
||||
x2="13.682"
|
||||
y2="21"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#E3E3E5" stop-opacity=".6"></stop>
|
||||
<stop offset="1" stop-color="#BBBBC0" stop-opacity=".6"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="1752500502792-4934513_image_existing_2_j9i9duif7"
|
||||
x1="15"
|
||||
y1="7.738"
|
||||
x2="15"
|
||||
y2="15.418"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#fff"></stop>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="1752500502792-4934513_image_existing_3_1gmx3q2tv"
|
||||
x1="7"
|
||||
y1="5.5"
|
||||
x2="7"
|
||||
y2="9"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#fff" stop-opacity="1"></stop>
|
||||
<stop offset="1" stop-color="#fff" stop-opacity="0"></stop>
|
||||
</linearGradient>
|
||||
<filter
|
||||
id="1752500502792-4934513_image_filter_0uoir1e4h"
|
||||
x="-100%"
|
||||
y="-100%"
|
||||
width="400%"
|
||||
height="400%"
|
||||
filterUnits="objectBoundingBox"
|
||||
primitiveUnits="userSpaceOnUse"
|
||||
>
|
||||
<feGaussianBlur
|
||||
stdDeviation="2"
|
||||
x="0%"
|
||||
y="0%"
|
||||
width="100%"
|
||||
height="100%"
|
||||
in="SourceGraphic"
|
||||
edgeMode="none"
|
||||
result="blur"
|
||||
></feGaussianBlur>
|
||||
</filter>
|
||||
<clipPath id="1752500502792-4934513_image_clipPath_m7fya5ytl">
|
||||
<path
|
||||
d="M14.2168 7.89746C14.7172 7.68454 15.2828 7.68453 15.7832 7.89746C16.3562 8.1414 16.8052 8.85075 17.7031 10.2686L21.3887 16.0879C22.4031 17.6896 22.9108 18.4908 22.8604 19.1523C22.8163 19.7287 22.525 20.258 22.0615 20.6035C21.5296 21.0001 20.5815 21 18.6855 21H11.3145C9.41854 21 8.47039 21.0001 7.93848 20.6035C7.47504 20.258 7.18368 19.7287 7.13965 19.1523C7.08925 18.4908 7.59692 17.6896 8.61133 16.0879L12.2969 10.2686C13.1948 8.85076 13.6438 8.1414 14.2168 7.89746ZM7 5.5C8.38071 5.5 9.5 6.61929 9.5 8C9.5 9.38071 8.38071 10.5 7 10.5C5.61929 10.5 4.5 9.38071 4.5 8C4.5 6.61929 5.61929 5.5 7 5.5Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_1_bj56bphon)"
|
||||
></path>
|
||||
</clipPath>
|
||||
<mask id="1752500502792-4934513_image_mask_g3cets1it">
|
||||
<rect width="100%" height="100%" fill="#FFF"></rect>
|
||||
<path
|
||||
d="M14.2168 7.89746C14.7172 7.68454 15.2828 7.68453 15.7832 7.89746C16.3562 8.1414 16.8052 8.85075 17.7031 10.2686L21.3887 16.0879C22.4031 17.6896 22.9108 18.4908 22.8604 19.1523C22.8163 19.7287 22.525 20.258 22.0615 20.6035C21.5296 21.0001 20.5815 21 18.6855 21H11.3145C9.41854 21 8.47039 21.0001 7.93848 20.6035C7.47504 20.258 7.18368 19.7287 7.13965 19.1523C7.08925 18.4908 7.59692 17.6896 8.61133 16.0879L12.2969 10.2686C13.1948 8.85076 13.6438 8.1414 14.2168 7.89746ZM7 5.5C8.38071 5.5 9.5 6.61929 9.5 8C9.5 9.38071 8.38071 10.5 7 10.5C5.61929 10.5 4.5 9.38071 4.5 8C4.5 6.61929 5.61929 5.5 7 5.5Z"
|
||||
fill="#000"
|
||||
></path>
|
||||
</mask>
|
||||
</defs>
|
||||
</g>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
import type { Body, Meta, UIPluginOptions, Uppy } from '@uppy/core'
|
||||
import Uppy from '@uppy/core'
|
||||
import type { Body, Meta, UIPluginOptions } from '@uppy/core'
|
||||
import { UIPlugin } from '@uppy/core'
|
||||
import { SearchInput } from '@uppy/provider-views'
|
||||
import type Transloadit from '@uppy/transloadit'
|
||||
import Transloadit from '@uppy/transloadit'
|
||||
import type { AssemblyResult } from '@uppy/transloadit'
|
||||
import { EmptyStateIcon } from './icons.js'
|
||||
import locale from './locale.js'
|
||||
|
||||
export interface ImageGeneratorOptions extends UIPluginOptions {}
|
||||
|
|
@ -56,10 +57,14 @@ export default class ImageGenerator<
|
|||
if (!transloadit) {
|
||||
throw new Error('ImageGenerator requires the Transloadit plugin')
|
||||
}
|
||||
// TODO: override the template_id
|
||||
const localUppy = new Uppy<M, B>().use(Transloadit, transloadit.opts)
|
||||
const localTransloadit =
|
||||
localUppy.getPlugin<Transloadit<M, B>>('Transloadit')!
|
||||
|
||||
transloadit.setFields({ prompt: this.getPluginState().prompt })
|
||||
localTransloadit.setFields({ prompt: this.getPluginState().prompt })
|
||||
|
||||
this.uppy.on('transloadit:result', (step, result) => {
|
||||
localUppy.on('transloadit:result', (step, result) => {
|
||||
console.log('transloadit:result', step, result)
|
||||
const { results } = this.getPluginState()
|
||||
// For some reason this event can be called twice with the same result
|
||||
|
|
@ -70,16 +75,15 @@ export default class ImageGenerator<
|
|||
})
|
||||
|
||||
try {
|
||||
this.setPluginState({ loading: true, results: [] })
|
||||
await this.uppy.upload()
|
||||
this.setPluginState({
|
||||
loading: true,
|
||||
results: [],
|
||||
checkedResultIds: new Set(),
|
||||
})
|
||||
await localUppy.upload()
|
||||
} catch {
|
||||
// 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.
|
||||
// That means users who set `allowMultipleUploadBatches: false` will not
|
||||
// be able to actually upload their files, so we reset the state here.
|
||||
this.uppy.setState({ allowNewUpload: true })
|
||||
this.setPluginState({ loading: false })
|
||||
}
|
||||
}
|
||||
|
|
@ -101,7 +105,7 @@ export default class ImageGenerator<
|
|||
const files = results
|
||||
.filter((result) => checkedResultIds.has(result.id))
|
||||
.map((result) => ({
|
||||
name: result.name,
|
||||
name: `ai-image-${new Date().toISOString()}`,
|
||||
type: result.mime,
|
||||
isRemote: true,
|
||||
source: 'Transloadit',
|
||||
|
|
@ -148,26 +152,17 @@ export default class ImageGenerator<
|
|||
data-uppy-super-focusable
|
||||
>
|
||||
<span className="">Generate</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>
|
||||
|
||||
{results.length > 0 ? (
|
||||
<ul className="uppy-ImageGenerator-grid">
|
||||
<ul
|
||||
className={`uppy-ImageGenerator-grid ${
|
||||
results.length === 1 ? 'uppy-ImageGenerator-grid--single' : ''
|
||||
}`}
|
||||
>
|
||||
{results.map((result) => (
|
||||
<li>
|
||||
<li key={result.id}>
|
||||
<input
|
||||
type="checkbox"
|
||||
onChange={() => this.onCheckboxChange(result)}
|
||||
|
|
@ -185,135 +180,9 @@ export default class ImageGenerator<
|
|||
) : (
|
||||
<div className="uppy-ImageGenerator-empty-state">
|
||||
<div>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="48"
|
||||
height="48"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<title>image</title>
|
||||
<g fill="none">
|
||||
<path
|
||||
d="M18 3C20.2091 3 22 4.79086 22 7V15C22 17.2091 20.2091 19 18 19H6C3.79086 19 2 17.2091 2 15L2 7C2 4.79086 3.79086 3 6 3L18 3Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_0_javw1hgdp)"
|
||||
data-glass="origin"
|
||||
mask="url(#1752500502792-4934513_image_mask_g3cets1it)"
|
||||
></path>
|
||||
<path
|
||||
d="M18 3C20.2091 3 22 4.79086 22 7V15C22 17.2091 20.2091 19 18 19H6C3.79086 19 2 17.2091 2 15L2 7C2 4.79086 3.79086 3 6 3L18 3Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_0_javw1hgdp)"
|
||||
data-glass="clone"
|
||||
filter="url(#1752500502792-4934513_image_filter_0uoir1e4h)"
|
||||
clip-path="url(#1752500502792-4934513_image_clipPath_m7fya5ytl)"
|
||||
></path>
|
||||
<path
|
||||
d="M14.2168 7.89746C14.7172 7.68454 15.2828 7.68453 15.7832 7.89746C16.3562 8.1414 16.8052 8.85075 17.7031 10.2686L21.3887 16.0879C22.4031 17.6896 22.9108 18.4908 22.8604 19.1523C22.8163 19.7287 22.525 20.258 22.0615 20.6035C21.5296 21.0001 20.5815 21 18.6855 21H11.3145C9.41854 21 8.47039 21.0001 7.93848 20.6035C7.47504 20.258 7.18368 19.7287 7.13965 19.1523C7.08925 18.4908 7.59692 17.6896 8.61133 16.0879L12.2969 10.2686C13.1948 8.85076 13.6438 8.1414 14.2168 7.89746ZM7 5.5C8.38071 5.5 9.5 6.61929 9.5 8C9.5 9.38071 8.38071 10.5 7 10.5C5.61929 10.5 4.5 9.38071 4.5 8C4.5 6.61929 5.61929 5.5 7 5.5Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_1_bj56bphon)"
|
||||
data-glass="blur"
|
||||
></path>
|
||||
<path
|
||||
d="M18.6853 20.2497V20.9997H11.3142V20.2497H18.6853ZM14.2166 7.8981C14.7171 7.68501 15.2834 7.68501 15.7839 7.8981C16.3567 8.14225 16.8062 8.85079 17.7039 10.2682L21.3894 16.0876C22.4038 17.6893 22.9105 18.4905 22.8601 19.152L22.8328 19.3659C22.7412 19.8581 22.4669 20.3008 22.0613 20.6032C21.5294 20.9997 20.5812 20.9997 18.6853 20.9997V20.2497C19.6479 20.2497 20.3181 20.2494 20.8162 20.2038C21.3199 20.1576 21.5179 20.0734 21.613 20.0026C21.9027 19.7867 22.0845 19.4556 22.1121 19.0954C22.1211 18.9772 22.0869 18.7648 21.8562 18.3141C21.6283 17.8689 21.2707 17.3023 20.7556 16.4889L17.0701 10.6696C16.6133 9.94839 16.2974 9.45162 16.0271 9.10025C15.7568 8.74889 15.5978 8.63351 15.49 8.58756C15.1772 8.4544 14.8233 8.45444 14.5105 8.58756C14.4027 8.63346 14.2437 8.74887 13.9734 9.10025C13.7031 9.45159 13.3871 9.94848 12.9304 10.6696L9.24488 16.4889C8.72982 17.3022 8.3722 17.8689 8.14429 18.3141C7.91358 18.7648 7.87845 18.9772 7.88746 19.0954C7.91502 19.4556 8.09781 19.7867 8.38746 20.0026C8.48268 20.0734 8.68021 20.1576 9.18336 20.2038C9.68136 20.2494 10.3516 20.2497 11.3142 20.2497V20.9997C9.53729 20.9997 8.59308 21.0001 8.04371 20.6735L7.93922 20.6032C7.53362 20.3008 7.25929 19.8581 7.16773 19.3659L7.14039 19.152C7.08999 18.4905 7.59668 17.6893 8.61109 16.0876L12.2966 10.2682C13.1383 8.93932 13.5855 8.23305 14.1101 7.94889L14.2166 7.8981Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_2_j9i9duif7)"
|
||||
></path>
|
||||
<path
|
||||
d="M8.75 8C8.75 7.0335 7.9665 6.25 7 6.25C6.0335 6.25 5.25 7.0335 5.25 8C5.25 8.9665 6.0335 9.75 7 9.75V10.5C5.61929 10.5 4.5 9.38071 4.5 8C4.5 6.61929 5.61929 5.5 7 5.5C8.38071 5.5 9.5 6.61929 9.5 8C9.5 9.38071 8.38071 10.5 7 10.5V9.75C7.9665 9.75 8.75 8.9665 8.75 8Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_3_1gmx3q2tv)"
|
||||
></path>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="1752500502792-4934513_image_existing_0_javw1hgdp"
|
||||
x1="12"
|
||||
y1="3"
|
||||
x2="12"
|
||||
y2="19"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#575757"></stop>
|
||||
<stop offset="1" stop-color="#151515"></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="1752500502792-4934513_image_existing_1_bj56bphon"
|
||||
x1="13.682"
|
||||
y1="5.5"
|
||||
x2="13.682"
|
||||
y2="21"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#E3E3E5" stop-opacity=".6"></stop>
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#BBBBC0"
|
||||
stop-opacity=".6"
|
||||
></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="1752500502792-4934513_image_existing_2_j9i9duif7"
|
||||
x1="15"
|
||||
y1="7.738"
|
||||
x2="15"
|
||||
y2="15.418"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#fff"></stop>
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
></stop>
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="1752500502792-4934513_image_existing_3_1gmx3q2tv"
|
||||
x1="7"
|
||||
y1="5.5"
|
||||
x2="7"
|
||||
y2="9"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stop-color="#fff" stop-opacity="1"></stop>
|
||||
<stop
|
||||
offset="1"
|
||||
stop-color="#fff"
|
||||
stop-opacity="0"
|
||||
></stop>
|
||||
</linearGradient>
|
||||
<filter
|
||||
id="1752500502792-4934513_image_filter_0uoir1e4h"
|
||||
x="-100%"
|
||||
y="-100%"
|
||||
width="400%"
|
||||
height="400%"
|
||||
filterUnits="objectBoundingBox"
|
||||
primitiveUnits="userSpaceOnUse"
|
||||
>
|
||||
<feGaussianBlur
|
||||
stdDeviation="2"
|
||||
x="0%"
|
||||
y="0%"
|
||||
width="100%"
|
||||
height="100%"
|
||||
in="SourceGraphic"
|
||||
edgeMode="none"
|
||||
result="blur"
|
||||
></feGaussianBlur>
|
||||
</filter>
|
||||
<clipPath id="1752500502792-4934513_image_clipPath_m7fya5ytl">
|
||||
<path
|
||||
d="M14.2168 7.89746C14.7172 7.68454 15.2828 7.68453 15.7832 7.89746C16.3562 8.1414 16.8052 8.85075 17.7031 10.2686L21.3887 16.0879C22.4031 17.6896 22.9108 18.4908 22.8604 19.1523C22.8163 19.7287 22.525 20.258 22.0615 20.6035C21.5296 21.0001 20.5815 21 18.6855 21H11.3145C9.41854 21 8.47039 21.0001 7.93848 20.6035C7.47504 20.258 7.18368 19.7287 7.13965 19.1523C7.08925 18.4908 7.59692 17.6896 8.61133 16.0879L12.2969 10.2686C13.1948 8.85076 13.6438 8.1414 14.2168 7.89746ZM7 5.5C8.38071 5.5 9.5 6.61929 9.5 8C9.5 9.38071 8.38071 10.5 7 10.5C5.61929 10.5 4.5 9.38071 4.5 8C4.5 6.61929 5.61929 5.5 7 5.5Z"
|
||||
fill="url(#1752500502792-4934513_image_existing_1_bj56bphon)"
|
||||
></path>
|
||||
</clipPath>
|
||||
<mask id="1752500502792-4934513_image_mask_g3cets1it">
|
||||
<rect width="100%" height="100%" fill="#FFF"></rect>
|
||||
<path
|
||||
d="M14.2168 7.89746C14.7172 7.68454 15.2828 7.68453 15.7832 7.89746C16.3562 8.1414 16.8052 8.85075 17.7031 10.2686L21.3887 16.0879C22.4031 17.6896 22.9108 18.4908 22.8604 19.1523C22.8163 19.7287 22.525 20.258 22.0615 20.6035C21.5296 21.0001 20.5815 21 18.6855 21H11.3145C9.41854 21 8.47039 21.0001 7.93848 20.6035C7.47504 20.258 7.18368 19.7287 7.13965 19.1523C7.08925 18.4908 7.59692 17.6896 8.61133 16.0879L12.2969 10.2686C13.1948 8.85076 13.6438 8.1414 14.2168 7.89746ZM7 5.5C8.38071 5.5 9.5 6.61929 9.5 8C9.5 9.38071 8.38071 10.5 7 10.5C5.61929 10.5 4.5 9.38071 4.5 8C4.5 6.61929 5.61929 5.5 7 5.5Z"
|
||||
fill="#000"
|
||||
></path>
|
||||
</mask>
|
||||
</defs>
|
||||
</g>
|
||||
</svg>
|
||||
<EmptyStateIcon />
|
||||
{loading ? (
|
||||
<p>Generating</p>
|
||||
<p className="uppy-ImageGenerator-generating">Generating</p>
|
||||
) : (
|
||||
<p>Generate a new image using Transloadit AI</p>
|
||||
)}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,13 @@
|
|||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
// Ensure the footer sticks to the bottom when using uppy-ProviderBrowser-footer
|
||||
.uppy-ProviderBrowser-footer {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.uppy-ImageGenerator-prompt {
|
||||
|
|
@ -65,6 +72,12 @@
|
|||
padding: 16px;
|
||||
flex: 1;
|
||||
|
||||
&.uppy-ImageGenerator-grid--single {
|
||||
grid-template-columns: 1fr;
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
|
@ -89,8 +102,10 @@
|
|||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 150px;
|
||||
height: 50%;
|
||||
min-height: 200px;
|
||||
object-fit: cover;
|
||||
border-radius: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -110,5 +125,24 @@
|
|||
p {
|
||||
font-size: 14px;
|
||||
color: $gray-600;
|
||||
|
||||
&.uppy-ImageGenerator-generating {
|
||||
background: linear-gradient(90deg, $gray-400, $gray-600, $gray-400);
|
||||
background-size: 200% 100%;
|
||||
background-clip: text;
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
animation: uppy-gradient-slide 2s ease-in-out infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes uppy-gradient-slide {
|
||||
0% {
|
||||
background-position: -200% 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 200% 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue