Fix CSP headers & image url

Author: jpggvilaca

ui/rsbuild.config.ts

@@ -55,13 +55,14 @@ export default defineConfig({
     },
     server: {
         headers: {
-            'Cross-Origin-Embedder-Policy': 'require-corp',
+            'Cross-Origin-Embedder-Policy': 'credentialless',
             'Cross-Origin-Opener-Policy': 'same-origin',
             'Content-Security-Policy':
                 "default-src 'self'; " +
                 "script-src 'self' 'unsafe-eval' blob:; " +
                 "worker-src 'self' blob:; " +
                 "connect-src 'self' http://localhost:7860 data:; " +
+                "img-src 'self' http://localhost:7860 data: blob:; " +
                 "style-src 'self' 'unsafe-inline';",
         },
     },

ui/src/features/annotator/hooks/use-load-image-query.hook.ts

@@ -3,22 +3,26 @@
 
 import { useQuery, UseQueryResult } from '@tanstack/react-query';
 
+import { useProjectIdentifier } from '../../../hooks/use-project-identifier.hook';
 import { getImageData, loadImage } from '../tools/utils';
-import { MediaItem } from '../types';
+import { DatasetItem } from '../types';
+
+export const useLoadImageQuery = (mediaItem: DatasetItem | undefined): UseQueryResult<ImageData, unknown> => {
+    const projectId = useProjectIdentifier();
 
-export const useLoadImageQuery = (mediaItem: MediaItem | undefined): UseQueryResult<ImageData, unknown> => {
     return useQuery({
-        queryKey: ['mediaItem', mediaItem?.id],
+        queryKey: ['mediaItem', mediaItem?.id, projectId],
         queryFn: async () => {
             if (mediaItem === undefined) {
                 throw new Error("Can't fetch undefined media item");
             }
 
-            const image = await loadImage(mediaItem.thumbhash);
+            const imageUrl = `http://localhost:7860/api/projects/${projectId}/dataset/items/${mediaItem.id}/binary`;
+            const image = await loadImage(imageUrl);
 
             return getImageData(image);
         },
-        enabled: mediaItem !== undefined,
+        enabled: mediaItem !== undefined && !!projectId,
         // The image of a media item never changes so we don't want to refetch stale data
         staleTime: Infinity,
         retry: 0,

ui/src/features/annotator/tools/segment-anything-tool/use-segment-anything.hook.ts

@@ -8,7 +8,7 @@ import { useQuery } from '@tanstack/react-query';
 import { Remote, wrap } from 'comlink';
 
 import { useAnnotator } from '../../annotator-provider.component';
-import { MediaItem } from '../../types';
+import { DatasetItem } from '../../types';
 import { convertToolShapeToGetiShape } from '../utils';
 import { InteractiveAnnotationPoint } from './segment-anything.interface';
 
@@ -53,7 +53,11 @@ const useSegmentAnythingWorker = (algorithmType: 'SEGMENT_ANYTHING_DECODER' | 'S
     return modelRef.current;
 };
 
-const useEncodingQuery = (model: Remote<SegmentAnythingModel> | undefined, mediaItem: MediaItem, image: ImageData) => {
+const useEncodingQuery = (
+    model: Remote<SegmentAnythingModel> | undefined,
+    mediaItem: DatasetItem,
+    image: ImageData
+) => {
     return useQuery({
         queryKey: ['segment-anything-model', 'encoding', mediaItem?.id],
         queryFn: async () => {

ui/src/features/annotator/tools/utils.ts

@@ -343,7 +343,7 @@ export const getRelativePoint = (element: ElementType, point: Point, zoom: numbe
 export const loadImage = (link: string): Promise<HTMLImageElement> =>
     new Promise<HTMLImageElement>((resolve, reject) => {
         const image = new Image();
-        image.crossOrigin = 'use-credentials';
+        image.crossOrigin = 'anonymous';
 
         image.onload = () => resolve(image);
         image.onerror = (error) => reject(error);