feat(ui): remove shouldTransformUrls

This is no longer used.

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[];

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) => {
           }}
         >
           <Image
-            src={getUrl(image.image_url)}
+            src={image.image_url}
             fallbackStrategy="beforeLoadOrError"
             fallback={fallback}
             onError={onError}

invokeai/frontend/web/src/common/util/getUrl.ts

@@ -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,
-  };
-};

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)) {

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 (
     <Group {...rest}>
       {shouldShowStagingImage && currentStagingAreaImage && (
         <IAICanvasImage
-          url={getUrl(currentStagingAreaImage.image.image_url) ?? ''}
+          url={currentStagingAreaImage.image.image_url}
           x={x}
           y={y}
         />

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')}
               </IAIButton>
 
-              <Link
-                download={true}
-                href={getUrl(image?.image_url ?? '')}
-                target="_blank"
-              >
+              <Link download={true} href={image?.image_url} target="_blank">
                 <IAIButton leftIcon={<FaDownload />} size="sm" w="100%">
                   {t('parameters.downloadImage')}
                 </IAIButton>

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<boolean>(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={<FaImage />}
               sx={{
                 width: '100%',

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) => {
     >
       <Flex gap={2}>
         <Text fontWeight="semibold">File:</Text>
-        <Link
-          href={getUrl(image.image_url)}
-          isExternal
-          maxW="calc(100% - 3rem)"
-        >
+        <Link href={image.image_url} isExternal maxW="calc(100% - 3rem)">
           {image.image_name}
           <ExternalLinkIcon mx="2px" />
         </Link>

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 (
     <TransformComponent
@@ -37,7 +35,7 @@ export default function ReactPanZoomImage({
           transform: `rotate(${rotation}deg) scaleX(${scaleX})  scaleY(${scaleY})`,
           width: '100%',
         }}
-        src={getUrl(image.image_url)}
+        src={image.image_url}
         alt={alt}
         ref={ref}
         className={styleClass ? styleClass : ''}

invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImagePreview.tsx

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

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: [],