mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): remove shouldTransformUrls
This is no longer used.
This commit is contained in:
parent
2fc0a4d53b
commit
8283d23b74
invokeai/frontend/web/src
app/types
common
features
canvas/components
gallery/components
lightbox/components
parameters/components/Parameters/ImageToImage
system/store
@ -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[];
|
||||||
|
@ -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}
|
||||||
|
@ -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,
|
|
||||||
};
|
|
||||||
};
|
|
@ -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)) {
|
||||||
|
@ -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}
|
||||||
/>
|
/>
|
||||||
|
@ -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>
|
||||||
|
@ -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%',
|
||||||
|
@ -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>
|
||||||
|
@ -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 : ''}
|
||||||
|
@ -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();
|
||||||
|
@ -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: [],
|
||||||
|
Loading…
Reference in New Issue
Block a user