feat: download model (#79)

## Motivation

- live-painting: added a button to download sd-turbo & vae when those
don't exist yet

package.json

@@ -38,10 +38,10 @@
     "sharp": "0.33.2"
   },
   "devDependencies": {
-    "@captn/joy": "^0.6.0",
-    "@captn/react": "^0.6.0",
-    "@captn/theme": "^0.6.0",
-    "@captn/utils": "^0.6.0",
+    "@captn/joy": "^0.7.0",
+    "@captn/react": "^0.7.0",
+    "@captn/theme": "^0.7.0",
+    "@captn/utils": "^0.7.0",
     "@commitlint/cli": "^19.0.3",
     "@commitlint/config-conventional": "^19.0.3",
     "@dnd-kit/core": "^6.1.0",

scripts/move-translations.mjs

@@ -5,7 +5,7 @@ import { globby } from "globby";
 // Add keys to be moved
 const keys = [];
 const originFile = "labels.json";
-const targetFile = "texts.json";
+const targetFile = "common.json";
 const move = false;
 
 const pattern = `src/client/public/locales/*/${originFile}`;
@@ -27,7 +27,9 @@ try {
 					json[key] = undefined;
 				}
 
-				await fsp.writeFile(filePath, JSON.stringify(json, null, 2));
+				if (move) {
+					await fsp.writeFile(filePath, JSON.stringify(json, null, 2));
+				}
 
 				return partial;
 			})

src/client/apps/live-painting/index.tsx

@@ -4,6 +4,7 @@ import BrushIcon from "@mui/icons-material/Brush";
 import CasinoIcon from "@mui/icons-material/Casino";
 import CheckIcon from "@mui/icons-material/Check";
 import ClearIcon from "@mui/icons-material/Clear";
+import DownloadIcon from "@mui/icons-material/Download";
 import PaletteIcon from "@mui/icons-material/Palette";
 import PlayIcon from "@mui/icons-material/PlayArrow";
 import SaveIcon from "@mui/icons-material/Save";
@@ -34,6 +35,7 @@ import type { IllustrationStyles } from "./text-to-image";
 import { illustrationStyles } from "./text-to-image";
 
 import { randomSeed } from "#/number";
+import type { Repository } from "#/types";
 import { APP_ID } from "@/apps/live-painting/constants";
 import { FlagUs } from "@/atoms/flags/us";
 import { useResettableState } from "@/ions/hooks/resettable-state";
@@ -53,6 +55,11 @@ export function LivePainting() {
 	const [isLoading, setIsLoading] = useState(false);
 	const [saved, setSaved] = useResettableState(false, 3000);
 
+	const [checkpoints, setCheckpoints] = useState<Repository[]>([]);
+	const [vae, setVae] = useState<Repository[]>([]);
+	const [isDownloading, setIsDownloading] = useState(false);
+	const hasModelAndVae = checkpoints.length > 0 && vae.length > 0;
+
 	const { send, writeFile } = useSDK<unknown, string>(APP_ID, {
 		onMessage(message) {
 			console.log(message);
@@ -84,6 +91,39 @@ export function LivePainting() {
 		setSaved(true);
 	}, [image, writeFile, setSaved]);
 
+	useEffect(() => {
+		window.ipc.inventoryStore
+			.get<Repository[]>("stable-diffusion.checkpoints", [])
+			.then(checkpoints => {
+				setCheckpoints(checkpoints);
+			});
+
+		window.ipc.inventoryStore.get<Repository[]>("stable-diffusion.vae", []).then(vae => {
+			setVae(vae);
+		});
+
+		const unsubscribeCheckpoints = window.ipc.on(
+			"stable-diffusion.checkpoints",
+			checkpoints => {
+				setCheckpoints(checkpoints);
+			}
+		);
+
+		const unsubscribeVae = window.ipc.on("stable-diffusion.vae", vae => {
+			setVae(vae);
+		});
+		return () => {
+			unsubscribeCheckpoints();
+			unsubscribeVae();
+		};
+	}, []);
+
+	useEffect(() => {
+		if (hasModelAndVae) {
+			setIsDownloading(false);
+		}
+	}, [hasModelAndVae]);
+
 	useEffect(() => {
 		async function handleSave(event: KeyboardEvent) {
 			if (event.key === "s" && event.ctrlKey) {
@@ -147,6 +187,8 @@ export function LivePainting() {
 					{running ? (
 						<Button
 							disabled={isLoading}
+							color="danger"
+							variant="soft"
 							startDecorator={isLoading ? <CircularProgress /> : <StopIcon />}
 							onClick={() => {
 								setIsLoading(true);
@@ -157,7 +199,9 @@ export function LivePainting() {
 						</Button>
 					) : (
 						<Button
-							disabled={isLoading}
+							disabled={isLoading || !hasModelAndVae}
+							color="success"
+							variant="soft"
 							startDecorator={isLoading ? <CircularProgress /> : <PlayIcon />}
 							onClick={() => {
 								setIsLoading(true);
@@ -297,9 +341,6 @@ export function LivePainting() {
 							<CasinoIcon />
 						</IconButton>
 					</Tooltip>
-					<Select variant="plain" defaultValue="sd-turbo">
-						<Option value="sd-turbo">SD Turbo</Option>
-					</Select>
 
 					<Tooltip title={t("labels:clear")}>
 						<IconButton
@@ -325,6 +366,41 @@ export function LivePainting() {
 						height: 44,
 					}}
 				>
+					{hasModelAndVae ? (
+						<Select variant="plain" defaultValue={checkpoints[0].id}>
+							{checkpoints.map(checkpoint => (
+								<Option key={checkpoint.id} value={checkpoint.id}>
+									{checkpoint.label}
+								</Option>
+							))}
+						</Select>
+					) : (
+						<Button
+							disabled={isDownloading}
+							startDecorator={isDownloading ? <CircularProgress /> : <DownloadIcon />}
+							onClick={() => {
+								setIsDownloading(true);
+								send({
+									action: "cloneRepositories:start",
+									payload: [
+										{
+											repository: "Blib-la/sd-turbo-fp16",
+											destination: "stable-diffusion/checkpoints",
+											label: "SD Turbo",
+										},
+										{
+											repository: "madebyollin/taesd",
+											destination: "stable-diffusion/vae",
+											label: "Taesd",
+										},
+									],
+								});
+							}}
+						>
+							{t("labels:download")}
+						</Button>
+					)}
+
 					<Box sx={{ flex: 1 }} />
 
 					<Button

src/client/public/locales/de/common.json

@@ -100,12 +100,12 @@
   "searchAndReplace": "Suchen & Ersetzen",
   "seeAll": "Alle ansehen",
   "selectAll": "Alle auswählen",
+  "selected": "Ausgewählt",
   "selectFolder": "Ordner auswählen",
   "selectImages": "Bilder auswählen",
-  "selected": "Ausgewählt",
   "send": "Senden",
-  "settingUpApp": "Die App wird eingerichtet. Dies kann je nach Server und Internetgeschwindigkeit eine Weile dauern.",
   "settings": "Einstellungen",
+  "settingUpApp": "Die App wird eingerichtet. Dies kann je nach Server und Internetgeschwindigkeit eine Weile dauern.",
   "show": "anzeigen",
   "submit": "Einreichen",
   "suffix": "Suffix",

src/client/public/locales/de/labels.json

@@ -11,6 +11,7 @@
   "dashboard": "Dashboard",
   "delete": "Löschen",
   "deleted": "Gelöscht",
+  "download": "Herunterladen",
   "downloading": "Herunterladen",
   "finishing": "Abschluss",
   "formLabel": {
@@ -60,8 +61,8 @@
   "readStory": "Erzählung lesen",
   "removeAllImages": "Alle Bilder entfernen",
   "save": "Speichern",
-  "saveImage": "Bild speichern",
   "saved": "Gespeichert",
+  "saveImage": "Bild speichern",
   "security": "Sicherheit",
   "sideBySide": "Nebeneinander",
   "start": "Start",

src/client/public/locales/en/common.json

@@ -100,12 +100,12 @@
   "searchAndReplace": "Search & Replace",
   "seeAll": "See all",
   "selectAll": "Select All",
+  "selected": "Selected",
   "selectFolder": "select folder",
   "selectImages": "Select Images",
-  "selected": "Selected",
   "send": "Send",
-  "settingUpApp": "Setting up the app. This might take a while depending on server and internet speed.",
   "settings": "Settings",
+  "settingUpApp": "Setting up the app. This might take a while depending on server and internet speed.",
   "show": "show",
   "submit": "Submit",
   "suffix": "Suffix",

src/client/public/locales/en/labels.json

@@ -11,6 +11,7 @@
   "dashboard": "Dashboard",
   "delete": "Delete",
   "deleted": "Deleted",
+  "download": "Download",
   "downloading": "Downloading",
   "finishing": "Finishing",
   "formLabel": {
@@ -60,8 +61,8 @@
   "readStory": "Read Story",
   "removeAllImages": "Remove all Images",
   "save": "Save",
-  "saveImage": "Save Image",
   "saved": "Saved",
+  "saveImage": "Save Image",
   "security": "Security",
   "sideBySide": "Side by Side",
   "start": "Start",

src/client/public/locales/es/common.json

@@ -100,12 +100,12 @@
   "searchAndReplace": "Buscar y reemplazar",
   "seeAll": "Ver todos",
   "selectAll": "Seleccionar todo",
+  "selected": "Seleccionadas",
   "selectFolder": "seleccionar carpeta",
   "selectImages": "Seleccionar imágenes",
-  "selected": "Seleccionadas",
   "send": "Enviar",
-  "settingUpApp": "Configurando la aplicación. Esto puede tardar un tiempo dependiendo del servidor y la velocidad de internet.",
   "settings": "Configuración",
+  "settingUpApp": "Configurando la aplicación. Esto puede tardar un tiempo dependiendo del servidor y la velocidad de internet.",
   "show": "mostrar",
   "submit": "Enviar",
   "suffix": "Sufijo",

src/client/public/locales/es/labels.json

@@ -11,6 +11,7 @@
   "dashboard": "Tablero",
   "delete": "Eliminar",
   "deleted": "Eliminado",
+  "download": "Descargar",
   "downloading": "Descargando",
   "finishing": "Finalizando",
   "formLabel": {
@@ -60,8 +61,8 @@
   "readStory": "Leer Historia",
   "removeAllImages": "Eliminar todas las imágenes",
   "save": "Guardar",
-  "saveImage": "Guardar imagen",
   "saved": "Guardado",
+  "saveImage": "Guardar imagen",
   "security": "Seguridad",
   "sideBySide": "Lado a Lado",
   "start": "Iniciar",

src/client/public/locales/fr/common.json

@@ -100,12 +100,12 @@
   "searchAndReplace": "Rechercher et remplacer",
   "seeAll": "Voir tout",
   "selectAll": "Tout sélectionner",
+  "selected": "Sélectionnés",
   "selectFolder": "sélectionner un dossier",
   "selectImages": "Sélectionner des images",
-  "selected": "Sélectionnés",
   "send": "Envoyer",
-  "settingUpApp": "Configuration de l'application. Cela peut prendre un certain temps en fonction du serveur et de la vitesse d'internet.",
   "settings": "Paramètres",
+  "settingUpApp": "Configuration de l'application. Cela peut prendre un certain temps en fonction du serveur et de la vitesse d'internet.",
   "show": "afficher",
   "submit": "Soumettre",
   "suffix": "Suffixe",