feat(ui): remove shouldTransformUrls

This is no longer used.
This commit is contained in:
psychedelicious 2023-06-05 20:24:18 +10:00
parent 2fc0a4d53b
commit 8283d23b74
11 changed files with 10 additions and 93 deletions
invokeai/frontend/web/src
app/types
common
features
canvas/components
gallery/components
lightbox/components
parameters/components/Parameters/ImageToImage
system/store

View File

@ -108,11 +108,7 @@ export type SDFeature =
*/ */
export type AppConfig = { export type AppConfig = {
/** /**
* Whether or not URLs should be transformed to use a different host * Whether or not we should update image urls when image loading errors
*/
shouldTransformUrls: boolean;
/**
* Whether or not we need to re-fetch images
*/ */
shouldUpdateImageUrlsOnError: boolean; shouldUpdateImageUrlsOnError: boolean;
disabledTabs: InvokeTabName[]; disabledTabs: InvokeTabName[];

View File

@ -4,7 +4,6 @@ import { useCombinedRefs } from '@dnd-kit/utilities';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { IAIImageFallback } from 'common/components/IAIImageFallback'; import { IAIImageFallback } from 'common/components/IAIImageFallback';
import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay'; import ImageMetadataOverlay from 'common/components/ImageMetadataOverlay';
import { useGetUrl } from 'common/util/getUrl';
import { AnimatePresence } from 'framer-motion'; import { AnimatePresence } from 'framer-motion';
import { ReactElement, SyntheticEvent } from 'react'; import { ReactElement, SyntheticEvent } from 'react';
import { memo, useRef } from 'react'; import { memo, useRef } from 'react';
@ -45,7 +44,6 @@ const IAIDndImage = (props: IAIDndImageProps) => {
minSize = 24, minSize = 24,
} = props; } = props;
const dndId = useRef(uuidv4()); const dndId = useRef(uuidv4());
const { getUrl } = useGetUrl();
const { const {
isOver, isOver,
setNodeRef: setDroppableRef, setNodeRef: setDroppableRef,
@ -100,7 +98,7 @@ const IAIDndImage = (props: IAIDndImageProps) => {
}} }}
> >
<Image <Image
src={getUrl(image.image_url)} src={image.image_url}
fallbackStrategy="beforeLoadOrError" fallbackStrategy="beforeLoadOrError"
fallback={fallback} fallback={fallback}
onError={onError} onError={onError}

View File

@ -1,34 +0,0 @@
import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { useCallback } from 'react';
import { OpenAPI } from 'services/api';
export const getUrlAlt = (url: string, shouldTransformUrls: boolean) => {
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,
};
};

View File

@ -1,6 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { rgbaColorToString } from 'features/canvas/util/colorToString'; import { rgbaColorToString } from 'features/canvas/util/colorToString';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
@ -33,7 +32,6 @@ const selector = createSelector(
const IAICanvasObjectRenderer = () => { const IAICanvasObjectRenderer = () => {
const { objects } = useAppSelector(selector); const { objects } = useAppSelector(selector);
const { getUrl } = useGetUrl();
if (!objects) return null; if (!objects) return null;
@ -46,7 +44,7 @@ const IAICanvasObjectRenderer = () => {
key={i} key={i}
x={obj.x} x={obj.x}
y={obj.y} y={obj.y}
url={getUrl(obj.image.image_url)} url={obj.image.image_url}
/> />
); );
} else if (isCanvasBaseLine(obj)) { } else if (isCanvasBaseLine(obj)) {

View File

@ -1,6 +1,5 @@
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks'; import { useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl';
import { canvasSelector } from 'features/canvas/store/canvasSelectors'; import { canvasSelector } from 'features/canvas/store/canvasSelectors';
import { GroupConfig } from 'konva/lib/Group'; import { GroupConfig } from 'konva/lib/Group';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
@ -56,13 +55,12 @@ const IAICanvasStagingArea = (props: Props) => {
width, width,
height, height,
} = useAppSelector(selector); } = useAppSelector(selector);
const { getUrl } = useGetUrl();
return ( return (
<Group {...rest}> <Group {...rest}>
{shouldShowStagingImage && currentStagingAreaImage && ( {shouldShowStagingImage && currentStagingAreaImage && (
<IAICanvasImage <IAICanvasImage
url={getUrl(currentStagingAreaImage.image.image_url) ?? ''} url={currentStagingAreaImage.image.image_url}
x={x} x={x}
y={y} y={y}
/> />

View File

@ -47,7 +47,6 @@ import {
import { gallerySelector } from '../store/gallerySelectors'; import { gallerySelector } from '../store/gallerySelectors';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import { useGetUrl } from 'common/util/getUrl';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters'; import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
import { initialImageSelected } from 'features/parameters/store/actions'; import { initialImageSelected } from 'features/parameters/store/actions';
@ -153,8 +152,6 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
const isUpscalingEnabled = useFeatureStatus('upscaling').isFeatureEnabled; const isUpscalingEnabled = useFeatureStatus('upscaling').isFeatureEnabled;
const isFaceRestoreEnabled = useFeatureStatus('faceRestore').isFeatureEnabled; const isFaceRestoreEnabled = useFeatureStatus('faceRestore').isFeatureEnabled;
const { getUrl, shouldTransformUrls } = useGetUrl();
const { const {
isOpen: isDeleteDialogOpen, isOpen: isDeleteDialogOpen,
onOpen: onDeleteDialogOpen, onOpen: onDeleteDialogOpen,
@ -197,10 +194,6 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
return; return;
} }
if (shouldTransformUrls) {
return getUrl(image.image_url);
}
if (image.image_url.startsWith('http')) { if (image.image_url.startsWith('http')) {
return image.image_url; return image.image_url;
} }
@ -229,7 +222,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
isClosable: true, isClosable: true,
}); });
}); });
}, [toaster, shouldTransformUrls, getUrl, t, image]); }, [toaster, t, image]);
const handleClickUseAllParameters = useCallback(() => { const handleClickUseAllParameters = useCallback(() => {
recallAllParameters(image); recallAllParameters(image);
@ -461,11 +454,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
{t('parameters.copyImageToLink')} {t('parameters.copyImageToLink')}
</IAIButton> </IAIButton>
<Link <Link download={true} href={image?.image_url} target="_blank">
download={true}
href={getUrl(image?.image_url ?? '')}
target="_blank"
>
<IAIButton leftIcon={<FaDownload />} size="sm" w="100%"> <IAIButton leftIcon={<FaDownload />} size="sm" w="100%">
{t('parameters.downloadImage')} {t('parameters.downloadImage')}
</IAIButton> </IAIButton>

View File

@ -21,7 +21,6 @@ import { gallerySelector } from 'features/gallery/store/gallerySelectors';
import { setActiveTab } from 'features/ui/store/uiSlice'; import { setActiveTab } from 'features/ui/store/uiSlice';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import IAIIconButton from 'common/components/IAIIconButton'; import IAIIconButton from 'common/components/IAIIconButton';
import { useGetUrl } from 'common/util/getUrl';
import { ExternalLinkIcon } from '@chakra-ui/icons'; import { ExternalLinkIcon } from '@chakra-ui/icons';
import { IoArrowUndoCircleOutline } from 'react-icons/io5'; import { IoArrowUndoCircleOutline } from 'react-icons/io5';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
@ -104,7 +103,6 @@ const HoverableImage = memo((props: HoverableImageProps) => {
const { image, isSelected } = props; const { image, isSelected } = props;
const { image_url, thumbnail_url, image_name } = image; const { image_url, thumbnail_url, image_name } = image;
const { getUrl } = useGetUrl();
const [isHovered, setIsHovered] = useState<boolean>(false); const [isHovered, setIsHovered] = useState<boolean>(false);
@ -208,7 +206,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
}; };
const handleOpenInNewTab = () => { const handleOpenInNewTab = () => {
window.open(getUrl(image.image_url), '_blank'); window.open(image.image_url, '_blank');
}; };
return ( return (
@ -296,8 +294,6 @@ const HoverableImage = memo((props: HoverableImageProps) => {
onMouseOver={handleMouseOver} onMouseOver={handleMouseOver}
onMouseOut={handleMouseOut} onMouseOut={handleMouseOut}
userSelect="none" userSelect="none"
// draggable={true}
// onDragStart={handleDragStart}
onClick={handleSelectImage} onClick={handleSelectImage}
ref={ref} ref={ref}
sx={{ sx={{
@ -317,7 +313,7 @@ const HoverableImage = memo((props: HoverableImageProps) => {
shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit shouldUseSingleGalleryColumn ? 'contain' : galleryImageObjectFit
} }
rounded="md" rounded="md"
src={getUrl(thumbnail_url || image_url)} src={thumbnail_url || image_url}
fallback={<FaImage />} fallback={<FaImage />}
sx={{ sx={{
width: '100%', width: '100%',

View File

@ -9,19 +9,6 @@ import {
Tooltip, Tooltip,
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { useAppDispatch } from 'app/store/storeHooks'; 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 { setShouldShowImageDetails } from 'features/ui/store/uiSlice';
import { memo } from 'react'; import { memo } from 'react';
import { useHotkeys } from 'react-hotkeys-hook'; import { useHotkeys } from 'react-hotkeys-hook';
@ -30,7 +17,6 @@ import { FaCopy } from 'react-icons/fa';
import { IoArrowUndoCircleOutline } from 'react-icons/io5'; import { IoArrowUndoCircleOutline } from 'react-icons/io5';
import { OverlayScrollbarsComponent } from 'overlayscrollbars-react'; import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
import { ImageDTO } from 'services/api'; import { ImageDTO } from 'services/api';
import { Scheduler } from 'app/constants';
import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters'; import { useRecallParameters } from 'features/parameters/hooks/useRecallParameters';
type MetadataItemProps = { type MetadataItemProps = {
@ -146,7 +132,6 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
const metadata = image?.metadata; const metadata = image?.metadata;
const { t } = useTranslation(); const { t } = useTranslation();
const { getUrl } = useGetUrl();
const metadataJSON = JSON.stringify(image, null, 2); const metadataJSON = JSON.stringify(image, null, 2);
@ -168,11 +153,7 @@ const ImageMetadataViewer = memo(({ image }: ImageMetadataViewerProps) => {
> >
<Flex gap={2}> <Flex gap={2}>
<Text fontWeight="semibold">File:</Text> <Text fontWeight="semibold">File:</Text>
<Link <Link href={image.image_url} isExternal maxW="calc(100% - 3rem)">
href={getUrl(image.image_url)}
isExternal
maxW="calc(100% - 3rem)"
>
{image.image_name} {image.image_name}
<ExternalLinkIcon mx="2px" /> <ExternalLinkIcon mx="2px" />
</Link> </Link>

View File

@ -1,6 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { TransformComponent, useTransformContext } from 'react-zoom-pan-pinch'; import { TransformComponent, useTransformContext } from 'react-zoom-pan-pinch';
import { useGetUrl } from 'common/util/getUrl';
import { ImageDTO } from 'services/api'; import { ImageDTO } from 'services/api';
type ReactPanZoomProps = { type ReactPanZoomProps = {
@ -23,7 +22,6 @@ export default function ReactPanZoomImage({
scaleY, scaleY,
}: ReactPanZoomProps) { }: ReactPanZoomProps) {
const { centerView } = useTransformContext(); const { centerView } = useTransformContext();
const { getUrl } = useGetUrl();
return ( return (
<TransformComponent <TransformComponent
@ -37,7 +35,7 @@ export default function ReactPanZoomImage({
transform: `rotate(${rotation}deg) scaleX(${scaleX}) scaleY(${scaleY})`, transform: `rotate(${rotation}deg) scaleX(${scaleX}) scaleY(${scaleY})`,
width: '100%', width: '100%',
}} }}
src={getUrl(image.image_url)} src={image.image_url}
alt={alt} alt={alt}
ref={ref} ref={ref}
className={styleClass ? styleClass : ''} className={styleClass ? styleClass : ''}

View File

@ -1,7 +1,6 @@
import { Flex } from '@chakra-ui/react'; import { Flex } from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit'; import { createSelector } from '@reduxjs/toolkit';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { useGetUrl } from 'common/util/getUrl';
import { import {
clearInitialImage, clearInitialImage,
initialImageChanged, initialImageChanged,
@ -30,7 +29,6 @@ const selector = createSelector(
const InitialImagePreview = () => { const InitialImagePreview = () => {
const { initialImage } = useAppSelector(selector); const { initialImage } = useAppSelector(selector);
const { shouldFetchImages } = useAppSelector(configSelector); const { shouldFetchImages } = useAppSelector(configSelector);
const { getUrl } = useGetUrl();
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const { t } = useTranslation(); const { t } = useTranslation();
const toaster = useAppToaster(); const toaster = useAppToaster();

View File

@ -4,7 +4,6 @@ import { AppConfig, PartialAppConfig } from 'app/types/invokeai';
import { merge } from 'lodash-es'; import { merge } from 'lodash-es';
export const initialConfigState: AppConfig = { export const initialConfigState: AppConfig = {
shouldTransformUrls: false,
shouldUpdateImageUrlsOnError: false, shouldUpdateImageUrlsOnError: false,
disabledTabs: [], disabledTabs: [],
disabledFeatures: [], disabledFeatures: [],