feat: upgrade UI, add training configs

.gitignore

@@ -17,7 +17,7 @@ __pycache__/
 
 # Distribution / packaging
 .Python
-build/
+# build/
 develop-eggs/
 dist/
 downloads/

SystemCode/src/main/environment.yml

@@ -19,6 +19,7 @@ dependencies:
   - rich=13.6.0
   - flask=2.2.2
   - werkzeug=2.2.3
+  - ipywidgets=8.0.4
   - pip:
       - accelerate==0.18.0
       - albumentations==1.3.0

SystemCode/src/main/frontend/package.json

@@ -10,6 +10,7 @@
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^24.0.0",
+    "@rollup/plugin-json": "^6.0.1",
     "@rollup/plugin-node-resolve": "^15.0.0",
     "@rollup/plugin-terser": "^0.4.0",
     "rollup": "^3.15.0",
@@ -19,6 +20,7 @@
     "svelte": "^3.55.0"
   },
   "dependencies": {
-    "sirv-cli": "^2.0.0"
+    "sirv-cli": "^2.0.0",
+    "svelte-tags-input": "^5.0.0"
   }
 }

SystemCode/src/main/frontend/rollup.config.js

@@ -1,78 +1,83 @@
-import { spawn } from 'child_process';
-import svelte from 'rollup-plugin-svelte';
-import commonjs from '@rollup/plugin-commonjs';
-import terser from '@rollup/plugin-terser';
-import resolve from '@rollup/plugin-node-resolve';
-import livereload from 'rollup-plugin-livereload';
-import css from 'rollup-plugin-css-only';
+import { spawn } from "child_process";
+import svelte from "rollup-plugin-svelte";
+import commonjs from "@rollup/plugin-commonjs";
+import terser from "@rollup/plugin-terser";
+import resolve from "@rollup/plugin-node-resolve";
+import livereload from "rollup-plugin-livereload";
+import css from "rollup-plugin-css-only";
+import json from "@rollup/plugin-json";
 
 const production = !process.env.ROLLUP_WATCH;
 
 function serve() {
-	let server;
+  let server;
 
-	function toExit() {
-		if (server) server.kill(0);
-	}
+  function toExit() {
+    if (server) server.kill(0);
+  }
 
-	return {
-		writeBundle() {
-			if (server) return;
-			server = spawn('npm', ['run', 'start', '--', '--dev'], {
-				stdio: ['ignore', 'inherit', 'inherit'],
-				shell: true
-			});
+  return {
+    writeBundle() {
+      if (server) return;
+      server = spawn("npm", ["run", "start", "--", "--dev"], {
+        stdio: ["ignore", "inherit", "inherit"],
+        shell: true,
+      });
 
-			process.on('SIGTERM', toExit);
-			process.on('exit', toExit);
-		}
-	};
+      process.on("SIGTERM", toExit);
+      process.on("exit", toExit);
+    },
+  };
 }
 
 export default {
-	input: 'src/main.js',
-	output: {
-		sourcemap: true,
-		format: 'iife',
-		name: 'app',
-		file: 'public/build/bundle.js'
-	},
-	plugins: [
-		svelte({
-			compilerOptions: {
-				// enable run-time checks when not in production
-				dev: !production
-			}
-		}),
-		// we'll extract any component CSS out into
-		// a separate file - better for performance
-		css({ output: 'bundle.css' }),
+  input: "src/main.js",
+  output: {
+    sourcemap: true,
+    format: "iife",
+    name: "app",
+    file: "public/build/bundle.js",
+  },
+  plugins: [
+    svelte({
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production,
+      },
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: "bundle.css" }),
 
-		// If you have external dependencies installed from
-		// npm, you'll most likely need these plugins. In
-		// some cases you'll need additional configuration -
-		// consult the documentation for details:
-		// https://github.com/rollup/plugins/tree/master/packages/commonjs
-		resolve({
-			browser: true,
-			dedupe: ['svelte'],
-			exportConditions: ['svelte']
-		}),
-		commonjs(),
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ["svelte"],
+      exportConditions: ["svelte"],
+    }),
+    commonjs(),
 
-		// In dev mode, call `npm run start` once
-		// the bundle has been generated
-		!production && serve(),
+    json({
+      compact: true,
+    }),
 
-		// Watch the `public` directory and refresh the
-		// browser on changes when not in production
-		!production && livereload('public'),
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
 
-		// If we're building for production (npm run build
-		// instead of npm run dev), minify
-		production && terser()
-	],
-	watch: {
-		clearScreen: false
-	}
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload("public"),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser(),
+  ],
+  watch: {
+    clearScreen: false,
+  },
 };

SystemCode/src/main/frontend/src/App.svelte

@@ -1,19 +1,33 @@
 <script>
+import roomObjects from './room_objects.json'
+import Tags from "svelte-tags-input";
+
 const ROOMS = {
 	living: "Living Room",
 	bedroom: "Bedroom",
 	dining: "Dining Room",
 }
 
+let tags = [];
 let room = 'living';
 let prompt = '';
 let imgSrc = null;
 let loading = false;
 
+function onAutocomplete(input = '') {
+	const array = roomObjects[room || 'living'].filter((item) => {
+		return item.toLowerCase().includes(input.toLowerCase())
+	})
+	return array;
+}
+
 function submit() {
 	loading = true;
+	const roomName = ROOMS[room || 'living'];
+	const tagString = (tags || []).join(', ');
+
 	fetch("./api/generate?" + new URLSearchParams({
-		prompt: prompt,
+		prompt: `${roomName} with ${tagString}`,
 		room: room
 	}))
 	.then(response => {
@@ -29,21 +43,37 @@ function submit() {
 <main>
 	<div class="container">
 		<form on:submit|preventDefault={submit}>
+			<div class="block title">Select a room</div>
 			<label class="block">
 				<select name="prompt" bind:value={room} class="input" disabled={loading}>
 					{#each Object.entries(ROOMS) as [key, label]}
 						<option value={key}>{label}</option>
 					{/each}
 				</select>
 			</label>
-
 
-			<label class="block">
-				<textarea name="prompt" bind:value={prompt} class="input" disabled={loading} />
-			</label>
+			<div class="input block">
+				<Tags bind:tags={tags} addKeys={[9]}
+					maxTags={100}
+					splitWith={','}
+					onlyUnique={true} 
+					removeKeys={[27]}
+					placeholder={"What is in this room?"}
+					autoComplete={onAutocomplete}
+					name={"tags"}
+					id={"tags-id"}
+					allowBlur={true}
+					disable={loading}
+					readonly={false}
+					minChars={3}
+					onlyAutocomplete
+					labelText=" "
+					labelShow
+					onTagClick={tag => console.log(tag)}  />
+			</div>
 
-			<button type="submit" class="submit_btn" disabled={loading}>
-				{loading ? "Loading..." : "Generate!"}
+			<button type="submit" class={`submit_btn ${loading ? 'loading' : ''}`} disabled={loading}>
+				{loading ? "Loading. This will take several minutes..." : "Generate!"}
 			</button>
 
 			{#if imgSrc}
@@ -76,19 +106,24 @@ function submit() {
 		}
 	}
 
+	.title {
+		color: white;
+	}
+
 	.container {
 		padding: 2rem 2rem;
 	}
 
 	.input {
 		width: 100%;
 		max-width: 50rem;
-		margin: 0.5rem 0;
+		margin: 0.5rem auto;
 	}
 
 	.image {
 		width: 360px;
 		height: 360px;
+		padding: 1rem;
 	}
 
 	.submit_btn {
@@ -98,4 +133,26 @@ function submit() {
 		max-width: 50rem;
 		margin: 0.5rem 0;
 	}
+
+	.loading {
+		transform: scale(1);
+		animation: pulse 2s infinite;
+	}
+
+	@keyframes pulse {
+	0% {
+		transform: scale(0.95);
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
+	}
+
+	70% {
+		transform: scale(1);
+		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+	}
+
+	100% {
+		transform: scale(0.95);
+		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
+	}
+}
 </style>