adding image processing pipeline immich -> paperless

raggr-frontend/src/App.tsx

@@ -33,50 +33,56 @@ const App = () => {
 		setQuery(event.target.value);
 	};
 	return (
-		<div className="flex flex-row justify-center py-4">
-			<div className="flex flex-col gap-4 min-w-xl max-w-xl">
-				<div className="flex flex-row justify-center gap-2 grow">
-					<h1 className="text-3xl">ask simba!</h1>
-				</div>
-				<div className="flex flex-row justify-between gap-2 grow">
-					<textarea
-						type="text"
-						className="p-4 border border-blue-200 rounded-md grow"
-						onChange={handleQueryChange}
-					/>
-				</div>
-				<div className="flex flex-row justify-between gap-2 grow">
-					<button
-						className="p-4 border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow"
-						onClick={() => handleQuestionSubmit()}
-						type="submit"
-					>
-						Submit
-					</button>
-				</div>
-				<div className="flex flex-row justify-center gap-2 grow">
-					<input
-						type="checkbox"
-						onChange={(event) => setSimbaMode(event.target.checked)}
-					/>
-					<p>simba mode?</p>
-				</div>
-				{loading ? (
-					<div className="flex flex-col w-full animate-pulse gap-2">
-						<div className="flex flex-row gap-2 w-full">
-							<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
-							<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
+		<div className="bg-[url('./simba_cute.jpeg')] bg-cover bg-center bg-no-repeat h-screen bg-opacity-20">
+			<div className="bg-white/85 h-screen">
+				<div className="flex flex-row justify-center py-4">
+					<div className="flex flex-col gap-4 min-w-xl max-w-xl">
+						<div className="flex flex-row justify-center gap-2 grow">
+							<h1 className="text-3xl">ask simba!</h1>
 						</div>
-						<div className="flex flex-row gap-2 w-full">
-							<div className="bg-gray-400 w-1/3 p-3 rounded-lg" />
-							<div className="bg-gray-400 w-2/3 p-3 rounded-lg" />
+						<div className="flex flex-row justify-between gap-2 grow">
+							<textarea
+								type="text"
+								className="p-4 border border-blue-200 rounded-md grow bg-white"
+								onChange={handleQueryChange}
+							/>
 						</div>
+						<div className="flex flex-row justify-between gap-2 grow">
+							<button
+								className="p-4 border border-blue-400 bg-blue-200 hover:bg-blue-400 cursor-pointer rounded-md flex-grow"
+								onClick={() => handleQuestionSubmit()}
+								type="submit"
+							>
+								Submit
+							</button>
+						</div>
+						<div className="flex flex-row justify-center gap-2 grow">
+							<input
+								type="checkbox"
+								onChange={(event) =>
+									setSimbaMode(event.target.checked)
+								}
+							/>
+							<p>simba mode?</p>
+						</div>
+						{loading ? (
+							<div className="flex flex-col w-full animate-pulse gap-2">
+								<div className="flex flex-row gap-2 w-full">
+									<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
+									<div className="bg-gray-400 w-1/2 p-3 rounded-lg" />
+								</div>
+								<div className="flex flex-row gap-2 w-full">
+									<div className="bg-gray-400 w-1/3 p-3 rounded-lg" />
+									<div className="bg-gray-400 w-2/3 p-3 rounded-lg" />
+								</div>
+							</div>
+						) : (
+							<div className="flex flex-col">
+								<ReactMarkdown>{answer}</ReactMarkdown>
+							</div>
+						)}
 					</div>
-				) : (
-					<div className="flex flex-col">
-						<ReactMarkdown>{answer}</ReactMarkdown>
-					</div>
-				)}
+				</div>
 			</div>
 		</div>
 	);