white background

frontend/src/lib/App.svelte

@@ -27,8 +27,7 @@
 	 */
 
 	export let room: Room;
-	let CA: HTMLCanvasElement;
-	let CB: HTMLCanvasElement;
+
 	let canvasEl: HTMLCanvasElement;
 
 	onMount(() => {});
@@ -43,18 +42,18 @@
 		console.log('prompt', prompt, imgURLs);
 	}
 	function getImageMask(cursor: { x: number; y: number }) {
-		const blackImage = document.createElement('canvas');
+		const tempCanvas = document.createElement('canvas');
 		const canvasCrop = document.createElement('canvas');
 		const mask = document.createElement('canvas');
 
-		blackImage.width = 512;
-		blackImage.height = 512;
+		tempCanvas.width = 512;
+		tempCanvas.height = 512;
 		canvasCrop.width = 512;
 		canvasCrop.height = 512;
 		mask.width = 512;
 		mask.height = 512;
 
-		const blackImageCtx = blackImage.getContext('2d') as CanvasRenderingContext2D;
+		const tempCanvasCtx = tempCanvas.getContext('2d') as CanvasRenderingContext2D;
 		const ctxCrop = canvasCrop.getContext('2d') as CanvasRenderingContext2D;
 		const ctxMask = mask.getContext('2d') as CanvasRenderingContext2D;
 
@@ -62,49 +61,45 @@
 		ctxCrop.save();
 		ctxCrop.clearRect(0, 0, 512, 512);
 
-		const imageData = ctxCrop.getImageData(0, 0, 512, 512);
-		const pix = imageData.data;
-		for (let i = 0, n = pix.length; i < n; i += 4) {
-			pix[i] = Math.round(255 * Math.random());
-			pix[i + 1] = Math.round(255 * Math.random());
-			pix[i + 2] = Math.round(255 * Math.random());
-			pix[i + 3] = 255;
-		}
-		// ctxCrop.putImageData(imageData, 0, 0);
+	
 		ctxCrop.globalCompositeOperation = 'source-over';
 		ctxCrop.drawImage(canvasEl, cursor.x, cursor.y, 512, 512, 0, 0, 512, 512);
 		ctxCrop.restore();
 
 		// create black image
-		blackImageCtx.fillStyle = 'black';
-		blackImageCtx.fillRect(0, 0, 512, 512);
+		tempCanvasCtx.fillStyle = 'black';
+		tempCanvasCtx.fillRect(0, 0, 512, 512);
 
 		// create Mask
 		ctxMask.save();
 		// ctxMask.clearRect(0, 0, 512, 512);
 		ctxMask.drawImage(canvasCrop, 0, 0, 512, 512);
 		ctxMask.globalCompositeOperation = 'source-in';
-		ctxMask.drawImage(blackImage, 0, 0);
+		ctxMask.drawImage(tempCanvas, 0, 0);
 		ctxMask.restore();
 
-		const contextA = CA.getContext('2d') as CanvasRenderingContext2D;
-		const contextB = CB.getContext('2d') as CanvasRenderingContext2D;
-
-		// draw image to canvas A
-		contextA.save();
-		contextA.clearRect(0, 0, 512, 512);
-		contextA.drawImage(canvasCrop, 0, 0, 512, 512);
-		contextA.restore();
-
-		// draw mask to canvas B
-		contextB.save();
-		contextB.clearRect(0, 0, 512, 512);
-		contextB.drawImage(mask, 0, 0, 512, 512);
-		contextB.restore();
-
+		tempCanvasCtx.fillStyle = 'white';
+		tempCanvasCtx.fillRect(0, 0, 512, 512);
+		//random pixels
+		// const imageData = tempCanvasCtx.getImageData(0, 0, 512, 512);
+		// const pix = imageData.data;
+		// for (let i = 0, n = pix.length; i < n; i += 4) {
+		// 	pix[i] = Math.round(255 * Math.random());
+		// 	pix[i + 1] = Math.round(255 * Math.random());
+		// 	pix[i + 2] = Math.round(255 * Math.random());
+		// 	pix[i + 3] = 255;
+		// }
+		// tempCanvasCtx.putImageData(imageData, 0, 0);
+		tempCanvasCtx.drawImage(canvasCrop, 0, 0, 512, 512);
 		//convert canvas to base64
-		const base64Crop = canvasCrop.toDataURL('image/png');
-		const base64Mask = mask.toDataURL('image/png');
+		const base64Crop = tempCanvas.toDataURL('image/png');
+	
+		tempCanvasCtx.fillStyle = 'white';
+		tempCanvasCtx.fillRect(0, 0, 512, 512);
+		tempCanvasCtx.drawImage(mask, 0, 0, 512, 512);
+		//convert canvas to base64
+		const base64Mask = tempCanvas.toDataURL('image/png');
+		
 		return { image: base64Crop, mask: base64Mask };
 	}
 
@@ -201,11 +196,6 @@
 {#if $isPrompting}
 	<PromptModal on:prompt={onPrompt} on:close={onClose} />
 {/if}
-
-<div class="flex">
-	<canvas bind:this={CA} width="512" height="512" />
-	<canvas bind:this={CB} width="512" height="512" />
-</div>
 <div class="fixed top-0 left-0 z-0 w-screen h-screen">
 	<Canvas bind:value={canvasEl} />
 

frontend/src/lib/store.ts

@@ -8,7 +8,7 @@ export const isLoading = writable<boolean>(false);
 export const isPrompting = writable<boolean>(false);
 export const clickedPosition = writable<{ x: number; y: number }>();
 export const showFrames = writable<boolean>(false);
-export const text2img = writable<boolean>(true);
+export const text2img = writable<boolean>(false);
 
 export const currZoomTransform = writable<ZoomTransform>(zoomIdentity);