local dev

frontend/package-lock.json

@@ -21,12 +21,12 @@
 				"eslint-config-prettier": "^8.3.0",
 				"eslint-plugin-svelte3": "^4.0.0",
 				"postcss": "^8.4.14",
-				"prettier": "^2.6.2",
+				"prettier": "^2.7.0",
 				"prettier-plugin-svelte": "^2.7.0",
 				"svelte": "^3.44.0",
 				"svelte-check": "^2.7.1",
 				"svelte-preprocess": "^4.10.7",
-				"tailwindcss": "^3.1.2",
+				"tailwindcss": "^3.1.3",
 				"tslib": "^2.3.1",
 				"typescript": "^4.7.2"
 			}
@@ -2304,9 +2304,9 @@
 			}
 		},
 		"node_modules/prettier": {
-			"version": "2.6.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
-			"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.0.tgz",
+			"integrity": "sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==",
 			"dev": true,
 			"bin": {
 				"prettier": "bin-prettier.js"
@@ -2781,12 +2781,12 @@
 			}
 		},
 		"node_modules/tailwindcss": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.2.tgz",
-			"integrity": "sha512-yJ6L5s1U5AeS5g7HHy212zdQfjwD426FBfm59pet/JsyneuZuD4C2W7PpJEg4ppisiB21uLqtNagv8KXury3+Q==",
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.3.tgz",
+			"integrity": "sha512-PRJNYdSIthrb8hjmAyymEyEN8Yo61TMXpzyFUpxULeeyRn3Y3gpvuw6FlRTKrJvK7thSGKRnhT36VovVx4WeMA==",
 			"dev": true,
 			"dependencies": {
-				"arg": "^5.0.1",
+				"arg": "^5.0.2",
 				"chokidar": "^3.5.3",
 				"color-name": "^1.1.4",
 				"detective": "^5.2.1",
@@ -4558,9 +4558,9 @@
 			"dev": true
 		},
 		"prettier": {
-			"version": "2.6.2",
-			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
-			"integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
+			"version": "2.7.0",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.7.0.tgz",
+			"integrity": "sha512-nwoX4GMFgxoPC6diHvSwmK/4yU8FFH3V8XWtLQrbj4IBsK2pkYhG4kf/ljF/haaZ/aii+wNJqISrCDPgxGWDVQ==",
 			"dev": true
 		},
 		"prettier-plugin-svelte": {
@@ -4842,12 +4842,12 @@
 			}
 		},
 		"tailwindcss": {
-			"version": "3.1.2",
-			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.2.tgz",
-			"integrity": "sha512-yJ6L5s1U5AeS5g7HHy212zdQfjwD426FBfm59pet/JsyneuZuD4C2W7PpJEg4ppisiB21uLqtNagv8KXury3+Q==",
+			"version": "3.1.3",
+			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.3.tgz",
+			"integrity": "sha512-PRJNYdSIthrb8hjmAyymEyEN8Yo61TMXpzyFUpxULeeyRn3Y3gpvuw6FlRTKrJvK7thSGKRnhT36VovVx4WeMA==",
 			"dev": true,
 			"requires": {
-				"arg": "^5.0.1",
+				"arg": "^5.0.2",
 				"chokidar": "^3.5.3",
 				"color-name": "^1.1.4",
 				"detective": "^5.2.1",

frontend/package.json

@@ -24,12 +24,12 @@
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"postcss": "^8.4.14",
-		"prettier": "^2.6.2",
+		"prettier": "^2.7.0",
 		"prettier-plugin-svelte": "^2.7.0",
 		"svelte": "^3.44.0",
 		"svelte-check": "^2.7.1",
 		"svelte-preprocess": "^4.10.7",
-		"tailwindcss": "^3.1.2",
+		"tailwindcss": "^3.1.3",
 		"tslib": "^2.3.1",
 		"typescript": "^4.7.2"
 	},

frontend/src/lib/Result.svelte

@@ -8,6 +8,7 @@
 	export let imagePaths: string[];
 
 	import domtoimage from 'dom-to-image';
+	const imageBaseUrl = import.meta.env.MODE === 'development' ? 'http://localhost:7860/' : '';
 
 	let elToShare: HTMLDivElement;
 	// let domToImage: DomToImage;
@@ -25,7 +26,7 @@
 			copyState = true;
 			setTimeout(() => (copyState = false), 1000);
 			console.log('Fetched image copied.');
-		} catch (err) {
+		} catch (err: DomToImageError) {
 			console.log(err.name, err.message);
 		}
 	}
@@ -44,7 +45,7 @@
 				<div class="grid grid-cols-3 gap-2 max-w-md mx-auto p-3">
 					{#each imagePaths as image}
 						<div>
-							<img src={image} alt="" class="w-full h-full" />
+							<img src={imageBaseUrl + image} alt="" class="w-full h-full" />
 						</div>
 					{/each}
 				</div>

frontend/src/routes/index.svelte

@@ -9,10 +9,10 @@
 	import Message from '$lib/Message.svelte';
 
 	import { onMount } from 'svelte';
-	import image from '$lib/assets/image1.jpg';
 
 	const totalTime = 1000;
-
+	const apiUrl = import.meta.env.MODE === 'development' ? 'http://localhost:7860/data' : 'data';
+	const imageBaseUrl = import.meta.env.MODE === 'development' ? 'http://localhost:7860/' : '';
 	// Get word of the day
 	let answer: string;
 	let imagePaths: string[];
@@ -35,7 +35,7 @@
 	let allowInput = true;
 
 	onMount(async () => {
-		const data = await fetch('data').then((d) => d.json());
+		const data = await fetch(apiUrl).then((d) => d.json());
 		const prompts: string[] = Object.keys(data);
 		const randomPrompt: string = prompts[~~(Math.random() * prompts.length)];
 		answer = randomPrompt.replace(/_/g, ' ');
@@ -180,7 +180,7 @@
 		<div class="grid grid-cols-3 gap-2 max-w-md mx-auto p-3">
 			{#each imagePaths as image}
 				<div>
-					<img src={image} alt="" class="w-full h-full" />
+					<img src={imageBaseUrl + image} alt="" class="w-full h-full" />
 				</div>
 			{/each}
 		</div>