new images endpoint

frontend/src/lib/App.svelte

@@ -31,7 +31,7 @@
 	};
 	myPresence.update(initialPresence);
 
-	function getKey({ position }: PromptImgObject): PromptImgKey {
+	function getKey(position: { x: number; y: number }): PromptImgKey {
 		return `${position.x}_${position.y}`;
 	}
 
@@ -121,8 +121,9 @@
 							if (isNSWF) {
 								throw new Error('NFSW');
 							}
+							const key = getKey(position);
 							const imgBlob = await base64ToBlob(imgBase64);
-							const imgURL = await uploadImage(imgBlob, prompt);
+							const imgURL = await uploadImage(imgBlob, prompt, key);
 							const promptImg = {
 								prompt,
 								imgURL: imgURL,
@@ -130,7 +131,6 @@
 								date: new Date().getTime(),
 								id: nanoid()
 							};
-							const key = getKey(promptImg);
 							$promptImgStorage.set(key, promptImg);
 							console.log(imgURL);
 							$loadingState = data.success ? 'Complete' : 'Error';

frontend/src/lib/PaintCanvas.svelte

@@ -90,8 +90,7 @@
 							canvasCtx.drawImage(img, position.x, position.y, img.width, img.height);
 							resolve(res);
 						};
-						const url = imgURL.split('/');
-						img.src = `${PUBLIC_UPLOADS}/${url.slice(3).join('/')}`;
+						img.src = `${PUBLIC_UPLOADS}/${imgURL}`;
 					})
 			)
 		).then((images) => {

frontend/src/lib/utils.ts

@@ -20,30 +20,29 @@ export function base64ToBlob(base64image: string): Promise<Blob> {
 		img.src = base64image;
 	});
 }
-export async function uploadImage(imagBlob: Blob, prompt: string): Promise<string> {
+export async function uploadImage(imagBlob: Blob, prompt: string, key: string): Promise<string> {
 	// simple regex slugify string	for file name
 	const promptSlug = slugify(prompt);
-	const UPLOAD_URL = dev ? 'moon/uploads' : 'https://huggingface.co/uploads';
+	const UPLOAD_URL = dev ? 'server/uploadfile/' : 'uploadfile/';
 
 	const hash = crypto.randomUUID().split('-')[0];
-	const fileName = `color-palette-${hash}-${promptSlug}.jpeg`;
+	const fileName = `color-palette-${hash}-${promptSlug}-${key}.jpeg`;
 
 	const file = new File([imagBlob], fileName, { type: 'image/jpeg' });
 
+	const formData = new FormData()
+	formData.append('file', file)
+
 	console.log('uploading image', file);
 
 	const response = await fetch(UPLOAD_URL, {
 		method: 'POST',
-		headers: {
-			'Content-Type': file.type,
-			'X-Requested-With': 'XMLHttpRequest'
-		},
-		body: file /// <- File inherits from Blob
+		body: formData
 	});
-	const url = await response.text();
+	const res = await response.json();
 
-	console.log('uploaded images', url);
-	return url;
+	console.log('uploaded images', res);
+	return res.filename;
 }
 const MAX = 512 * 5 - 512
 

frontend/vite.config.dev.ts

@@ -6,11 +6,11 @@ const config: UserConfig = {
 	server: {
 		// host: "0.0.0.0",
 		proxy: {
-			'/moon': {
-				target: 'https://huggingface.co',
+			'/server': {
+				target: 'http://localhost:7860',
 				changeOrigin: true,
 				cookieDomainRewrite: 'localhost',
-				rewrite: (path) => path.replace(/^\/moon/, '')
+				rewrite: (path) => path.replace(/^\/server/, '')
 			}
 		}
 	}