diff --git a/invokeai/frontend/web/src/app/types/invokeai.ts b/invokeai/frontend/web/src/app/types/invokeai.ts index fa5c725a84..f202b66ca2 100644 --- a/invokeai/frontend/web/src/app/types/invokeai.ts +++ b/invokeai/frontend/web/src/app/types/invokeai.ts @@ -108,11 +108,7 @@ export type SDFeature = */ export type AppConfig = { /** - * Whether or not URLs should be transformed to use a different host - */ - shouldTransformUrls: boolean; - /** - * Whether or not we need to re-fetch images + * Whether or not we should update image urls when image loading errors */ shouldUpdateImageUrlsOnError: boolean; disabledTabs: InvokeTabName[]; diff --git a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx index 5a7f93747b..f31aebf596 100644 --- a/invokeai/frontend/web/src/common/components/IAIDndImage.tsx +++ b/invokeai/frontend/web/src/common/components/IAIDndImage.tsx @@ -4,7 +4,6 @@ import { useCombinedRefs } from '@dnd-kit/utilities'; import IAIIconButton from 'common/components/IAIIconButton'; import { IAIImageFallback } from 'common/components/IAIImageFallback'; import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay'; -import { useGetUrl } from 'common/util/getUrl'; import { AnimatePresence } from 'framer-motion'; import { ReactElement, SyntheticEvent } from 'react'; import { memo, useRef } from 'react'; @@ -45,7 +44,6 @@ const IAIDndImage = (props: IAIDndImageProps) => { minSize = 24, } = props; const dndId = useRef(uuidv4()); - const { getUrl } = useGetUrl(); const { isOver, setNodeRef: setDroppableRef, @@ -100,7 +98,7 @@ const IAIDndImage = (props: IAIDndImageProps) => { }} > { - if (OpenAPI.BASE && shouldTransformUrls) { - return [OpenAPI.BASE, url].join('/'); - } - - return url; -}; - -export const useGetUrl = () => { - const shouldTransformUrls = useAppSelector( - (state: RootState) => state.config.shouldTransformUrls - ); - - const getUrl = useCallback( - (url?: string) => { - if (OpenAPI.BASE && shouldTransformUrls) { - return [OpenAPI.BASE, url].join('/'); - } - - return url; - }, - [shouldTransformUrls] - ); - - return { - shouldTransformUrls, - getUrl, - }; -}; diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx index c99465cf40..ea04aa95c8 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasObjectRenderer.tsx @@ -1,6 +1,5 @@ import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; -import { useGetUrl } from 'common/util/getUrl'; import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { isEqual } from 'lodash-es'; @@ -33,7 +32,6 @@ const selector = createSelector( const IAICanvasObjectRenderer = () => { const { objects } = useAppSelector(selector); - const { getUrl } = useGetUrl(); if (!objects) return null; @@ -46,7 +44,7 @@ const IAICanvasObjectRenderer = () => { key={i} x={obj.x} y={obj.y} - url={getUrl(obj.image.image_url)} + url={obj.image.image_url} /> ); } else if (isCanvasBaseLine(obj)) { diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx index f03aeedb86..c33e0cacf5 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasStagingArea.tsx @@ -1,6 +1,5 @@ import { createSelector } from '@reduxjs/toolkit'; import { useAppSelector } from 'app/store/storeHooks'; -import { useGetUrl } from 'common/util/getUrl'; import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { GroupConfig } from 'konva/lib/Group'; import { isEqual } from 'lodash-es'; @@ -56,13 +55,12 @@ const IAICanvasStagingArea = (props: Props) => { width, height, } = useAppSelector(selector); - const { getUrl } = useGetUrl(); return ( {shouldShowStagingImage && currentStagingAreaImage && ( diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx index 91bd1a0425..6862b35fb8 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx @@ -47,7 +47,6 @@ import { import { gallerySelector } from '../store/gallerySelectors'; import { useCallback } from 'react'; import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; -import { useGetUrl } from 'common/util/getUrl'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters'; import { initialImageSelected } from 'features/parameters/store/actions'; @@ -153,8 +152,6 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { const isUpscalingEnabled = useFeatureStatus('upscaling').isFeatureEnabled; const isFaceRestoreEnabled = useFeatureStatus('faceRestore').isFeatureEnabled; - const { getUrl, shouldTransformUrls } = useGetUrl(); - const { isOpen: isDeleteDialogOpen, onOpen: onDeleteDialogOpen, @@ -197,10 +194,6 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { return; } - if (shouldTransformUrls) { - return getUrl(image.image_url); - } - if (image.image_url.startsWith('http')) { return image.image_url; } @@ -229,7 +222,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { isClosable: true, }); }); - }, [toaster, shouldTransformUrls, getUrl, t, image]); + }, [toaster, t, image]); const handleClickUseAllParameters = useCallback(() => { recallAllParameters(image); @@ -461,11 +454,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { {t('parameters.copyImageToLink')} - + } size="sm" w="100%"> {t('parameters.downloadImage')} diff --git a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx index 4dad27d4e8..ef4ed5be1c 100644 --- a/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/HoverableImage.tsx @@ -21,7 +21,6 @@ import { gallerySelector } from 'features/gallery/store/gallerySelectors'; import { setActiveTab } from 'features/ui/store/uiSlice'; import { useTranslation } from 'react-i18next'; import IAIIconButton from 'common/components/IAIIconButton'; -import { useGetUrl } from 'common/util/getUrl'; import { ExternalLinkIcon } from '@chakra-ui/icons'; import { IoArrowUndoCircleOutline } from 'react-icons/io5'; import { createSelector } from '@reduxjs/toolkit'; @@ -104,7 +103,6 @@ const HoverableImage = memo((props: HoverableImageProps) => { const { image, isSelected } = props; const { image_url, thumbnail_url, image_name } = image; - const { getUrl } = useGetUrl(); const [isHovered, setIsHovered] = useState(false); @@ -208,7 +206,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { }; const handleOpenInNewTab = () => { - window.open(getUrl(image.image_url), '_blank'); + window.open(image.image_url, '_blank'); }; return ( @@ -296,8 +294,6 @@ const HoverableImage = memo((props: HoverableImageProps) => { onMouseOver={handleMouseOver} onMouseOut={handleMouseOut} userSelect="none" - // draggable={true} - // onDragStart={handleDragStart} onClick={handleSelectImage} ref={ref} sx={{ @@ -317,7 +313,7 @@ const HoverableImage = memo((props: HoverableImageProps) => { shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit } rounded="md" - src={getUrl(thumbnail_url || image_url)} + src={thumbnail_url || image_url} fallback={} sx={{ width: '100%', diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx index 1619680ec5..1a8801fa52 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageMetaDataViewer/ImageMetadataViewer.tsx @@ -9,19 +9,6 @@ import { Tooltip, } from '@chakra-ui/react'; import { useAppDispatch } from 'app/store/storeHooks'; -import { useGetUrl } from 'common/util/getUrl'; -import promptToString from 'common/util/promptToString'; -import { - setCfgScale, - setHeight, - setImg2imgStrength, - setNegativePrompt, - setPositivePrompt, - setScheduler, - setSeed, - setSteps, - setWidth, -} from 'features/parameters/store/generationSlice'; import { setShouldShowImageDetails } from 'features/ui/store/uiSlice'; import { memo } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; @@ -30,7 +17,6 @@ import { FaCopy } from 'react-icons/fa'; import { IoArrowUndoCircleOutline } from 'react-icons/io5'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { ImageDTO } from 'services/api'; -import { Scheduler } from 'app/constants'; import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters'; type MetadataItemProps = { @@ -146,7 +132,6 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => { const metadata = image?.metadata; const { t } = useTranslation(); - const { getUrl } = useGetUrl(); const metadataJSON = JSON.stringify(image, null, 2); @@ -168,11 +153,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => { > File: - + {image.image_name} diff --git a/invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx b/invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx index b1e822c309..7ec7d23371 100644 --- a/invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx +++ b/invokeai/frontend/web/src/features/lightbox/components/ReactPanZoomImage.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import { TransformComponent, useTransformContext } from 'react-zoom-pan-pinch'; -import { useGetUrl } from 'common/util/getUrl'; import { ImageDTO } from 'services/api'; type ReactPanZoomProps = { @@ -23,7 +22,6 @@ export default function ReactPanZoomImage({ scaleY, }: ReactPanZoomProps) { const { centerView } = useTransformContext(); - const { getUrl } = useGetUrl(); return ( { const { initialImage } = useAppSelector(selector); const { shouldFetchImages } = useAppSelector(configSelector); - const { getUrl } = useGetUrl(); const dispatch = useAppDispatch(); const { t } = useTranslation(); const toaster = useAppToaster(); diff --git a/invokeai/frontend/web/src/features/system/store/configSlice.ts b/invokeai/frontend/web/src/features/system/store/configSlice.ts index 5e0d2ca472..fb00a7a5d4 100644 --- a/invokeai/frontend/web/src/features/system/store/configSlice.ts +++ b/invokeai/frontend/web/src/features/system/store/configSlice.ts @@ -4,7 +4,6 @@ import { AppConfig, PartialAppConfig } from 'app/types/invokeai'; import { merge } from 'lodash-es'; export const initialConfigState: AppConfig = { - shouldTransformUrls: false, shouldUpdateImageUrlsOnError: false, disabledTabs: [], disabledFeatures: [],