use .env for public uploads

frontend/.env.development.example

@@ -1,2 +1,3 @@
 PUBLIC_WS_INPAINTING="ws://0.0.0.0:7860/gradio/queue/join"
-PUBLIC_UPLOADS="http://0.0.0.0:7860/uploads"
+PUBLIC_UPLOADS="https://d26smi9133w0oo.cloudfront.net/uploads"
+PUBLIC_UPLOAD_URL="/server/uploadfile/"

frontend/.env.example

@@ -1,2 +1,3 @@
 PUBLIC_WS_INPAINTING="wss://spaces.huggingface.tech/huggingface-projects/stable-diffusion-multiplayer/gradio/queue/join"
-PUBLIC_UPLOADS="https://hf.space/embed/huggingface-projects/stable-diffusion-multiplayer/uploads"
+PUBLIC_UPLOADS="https://d26smi9133w0oo.cloudfront.net/uploads"
+PUBLIC_UPLOAD_URL="/embed/huggingface-projects/stable-diffusion-multiplayer/uploadfile/"

frontend/src/lib/utils.ts

@@ -1,4 +1,4 @@
-import { dev } from '$app/environment';
+import { PUBLIC_UPLOAD_URL } from '$env/static/public';
 
 export function base64ToBlob(base64image: string): Promise<Blob> {
 	return new Promise((resolve) => {
@@ -23,7 +23,6 @@ export function base64ToBlob(base64image: string): Promise<Blob> {
 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 ? '/server/uploadfile/' : '/embed/huggingface-projects/stable-diffusion-multiplayer/uploadfile/';
 
 	const hash = crypto.randomUUID().split('-')[0];
 	const fileName = `color-palette-${hash}-${promptSlug}-${key}.jpeg`;
@@ -35,7 +34,7 @@ export async function uploadImage(imagBlob: Blob, prompt: string, key: string):
 
 	console.log('uploading image', file);
 
-	const response = await fetch(UPLOAD_URL, {
+	const response = await fetch(PUBLIC_UPLOAD_URL, {
 		method: 'POST',
 		body: formData
 	});