Merge pull request #9 from ch1ny/feat/app-modify-image

feat(app): 支持用户对置信度不高的图片进行手动修正

packages/app/.vscode/settings.json

@@ -1,5 +1,6 @@
 {
 	"cSpell.words": [
+		"cropperjs",
 		"Deque",
 		"fullscreen",
 		"imgcodecs",

packages/app/package.json

@@ -1,36 +1,38 @@
-{
-	"name": "omr-img-corrector",
-	"private": true,
-	"version": "0.9.1",
-	"type": "module",
-	"scripts": {
-		"dev": "vite",
-		"build": "tsc && vite build",
-		"preview": "vite preview",
-		"tauri": "tauri",
-		"iss": "./setup/Compiler/Compiler.exe /cc ./setup/setup.iss",
-		"preiss": "git submodule update --remote",
-		"dist": "tauri build&&yarn iss"
-	},
-	"dependencies": {
-		"@emotion/react": "^11.10.6",
-		"@emotion/styled": "^11.10.6",
-		"@mui/material": "^5.11.16",
-		"@tauri-apps/api": "^1.2.0",
-		"classnames": "^2.3.2",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"react-router-dom": "^6.8.1"
-	},
-	"devDependencies": {
-		"@tauri-apps/cli": "^1.2.2",
-		"@types/node": "^18.7.10",
-		"@types/react": "^18.0.15",
-		"@types/react-dom": "^18.0.6",
-		"@vitejs/plugin-react": "^3.0.0",
-		"@vitejs/plugin-react-swc": "^3.2.0",
-		"less": "^4.1.3",
-		"typescript": "^4.6.4",
-		"vite": "^4.0.0"
-	}
-}
+{
+	"name": "omr-img-corrector",
+	"private": true,
+	"version": "1.0.0",
+	"type": "module",
+	"scripts": {
+		"dev": "vite",
+		"build": "tsc && vite build",
+		"preview": "vite preview",
+		"tauri": "tauri",
+		"iss": "node ./setup/setup.cjs",
+		"preiss": "git submodule update --init --remote --recursive",
+		"dist": "tauri build&&pnpm iss"
+	},
+	"dependencies": {
+		"@emotion/react": "^11.10.6",
+		"@emotion/styled": "^11.10.6",
+		"@mui/material": "^5.11.16",
+		"@tauri-apps/api": "^1.2.0",
+		"classnames": "^2.3.2",
+		"cropperjs": "^1.5.13",
+		"react": "^18.2.0",
+		"react-cropper": "^2.3.3",
+		"react-dom": "^18.2.0",
+		"react-router-dom": "^6.8.1"
+	},
+	"devDependencies": {
+		"@tauri-apps/cli": "^1.2.2",
+		"@types/node": "^18.7.10",
+		"@types/react": "^18.0.15",
+		"@types/react-dom": "^18.0.6",
+		"@vitejs/plugin-react": "^3.0.0",
+		"@vitejs/plugin-react-swc": "^3.2.0",
+		"less": "^4.1.3",
+		"typescript": "^4.6.4",
+		"vite": "^4.0.0"
+	}
+}

packages/app/setup/setup.cjs

@@ -3,7 +3,8 @@ const fs = require('node:fs');
 const path = require('node:path');
 const { version } = require(path.resolve(__dirname, '..', 'package.json'));
 
-fs.appendFileSync(process.env.GITHUB_OUTPUT, `release_version=${version}`);
+if (!!process.env.GITHUB_OUTPUT)
+	fs.appendFileSync(process.env.GITHUB_OUTPUT, `release_version=${version}`);
 
 const compilerPath = path.resolve(__dirname, 'Compiler/ISCC.exe');
 const setupPath = path.resolve(__dirname, 'setup.iss');

packages/app/src-tauri/Cargo.toml

@@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
 omr-img-corrector-sdk = { version="0.9.0", path = "../../lib" }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.2", features = ["dialog-confirm", "dialog-open", "fs-all", "path-all", "process-relaunch", "protocol-all", "shell-open", "window-all"] }
+tauri = { version = "1.2", features = ["dialog-confirm", "dialog-open", "fs-all", "path-all", "process-relaunch", "protocol-all", "shell-execute", "shell-open", "window-all"] }
 sysinfo = "0.27.7"
 walkdir = "2.3.3"
 rand = "0.8.5"

packages/app/src-tauri/src/task.rs

@@ -11,6 +11,7 @@ struct StartRunningTaskEventPayload {
 #[derive(Serialize, Clone)]
 struct TaskCompletedEventPayload {
     task_id: usize,
+    output_path: String,
     result: String,
 }
 
@@ -50,10 +51,12 @@ pub fn add_task(
                 } else {
                     "finished"
                 }),
+                output_path: output_file,
             },
             Err(_) => TaskCompletedEventPayload {
                 task_id,
                 result: String::from("error"),
+                output_path: output_file,
             },
         };
         window

packages/app/src-tauri/tauri.conf.json

@@ -41,7 +41,15 @@
 			},
 			"shell": {
 				"all": false,
-				"open": true
+				"execute": true,
+				"open": true,
+				"scope": [
+					{
+						"name": "windows-explorer",
+						"cmd": "explorer",
+						"args": [{ "validator": ".*" }]
+					}
+				]
 			},
 			"window": {
 				"all": true

packages/app/src/views/Main/Task/index.tsx

@@ -1,10 +1,11 @@
-import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from 'react';
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useState } from 'react';
 import { convertFileSrc } from '@tauri-apps/api/tauri';
 import * as event from '@tauri-apps/api/event';
 import styles from './index.module.less';
-import { Button, Chip, CircularProgress, Divider, LinearProgress } from '@mui/material';
+import { Chip, CircularProgress, Divider, LinearProgress } from '@mui/material';
 import { Invokers } from '@/utils';
 import { CaretRightIcon, CheckIcon, CloseIcon, DeleteIcon, ExclamationIcon } from '@/components';
+import openModifyWindow from '../openModifyWindow';
 
 export interface ITaskProps {
 	id: number;
@@ -30,11 +31,16 @@ interface ITaskComponentProps extends ITaskProps {
 }
 
 export default forwardRef<ITaskRef, ITaskComponentProps>((props, ref) => {
-	const { id, src, omrConfig, onDelete } = props;
+	const { id, src, onDelete } = props;
 	const previewSrc = useMemo(() => convertFileSrc(src), [src]);
 
 	const [status, setStatus] = useState<TTaskStatus>('ready');
 
+	const [outputPath, setOutputPath] = useState('');
+	const onDebate = useCallback(() => {
+		openModifyWindow(id, outputPath);
+	}, [id, outputPath]);
+
 	useEffect(() => {
 		const unListenOnTaskRunning = event.listen('start_running_task', (ev) => {
 			// console.log(ev);
@@ -51,14 +57,15 @@ export default forwardRef<ITaskRef, ITaskComponentProps>((props, ref) => {
 		const unListenOnTaskCompleted = event.listen('task_completed', (ev) => {
 			// console.log(ev);
 			if (ev.windowLabel !== 'main') return;
-			const { task_id, result } = ev.payload as {
+			const { task_id, result, output_path } = ev.payload as {
 				task_id: number;
 				result: 'finished' | 'debatable' | 'error';
+				output_path: string;
 			};
 			if (task_id !== id) return;
 			setStatus((currentStatus) => {
 				if (currentStatus !== 'running') return currentStatus;
-
+				setOutputPath(output_path);
 				return result;
 			});
 		});
@@ -70,18 +77,14 @@ export default forwardRef<ITaskRef, ITaskComponentProps>((props, ref) => {
 		};
 	}, [id]);
 
-	const runTask = useMemo(() => {
-		if (status !== 'ready') {
-			return () => {
-				// TODO:
-			};
-		} else {
-			return () => {
-				setStatus('waiting');
-				Invokers.addTask(props);
-			};
-		}
-	}, [status, props]);
+	const runTask = useCallback(() => {
+		setStatus((oldStatus) => {
+			if (oldStatus !== 'ready') return oldStatus;
+
+			Invokers.addTask(props);
+			return 'waiting';
+		});
+	}, [props]);
 	useImperativeHandle(
 		ref,
 		() => ({
@@ -187,13 +190,15 @@ export default forwardRef<ITaskRef, ITaskComponentProps>((props, ref) => {
 					</div>
 				</div>
 				<div className={styles.panel}>
-					<div>
+					<div
+						style={{ cursor: status === 'ready' || status === 'debatable' ? 'pointer' : 'auto' }}
+					>
 						<Chip
 							label={chipLabel}
 							color={progressColor}
 							clickable={status === 'ready' || status === 'debatable'}
 							icon={chipIcon}
-							onClick={runTask}
+							onClick={status === 'debatable' ? onDebate : runTask}
 						/>
 					</div>
 					<div>

packages/app/src/views/Main/openModifyWindow.ts

@@ -0,0 +1,13 @@
+import { WebviewWindow } from '@tauri-apps/api/window';
+
+export default async function (taskId: number, src: string) {
+	const webview = new WebviewWindow(`modify-${taskId}`, {
+		title: `人工审查 - ${src}`,
+		url: `views/modify.html?src=${encodeURIComponent(src)}`,
+		width: 600,
+		height: 650,
+		center: true,
+		resizable: false,
+	});
+	webview.setFocus();
+}

packages/app/src/views/Modify/App.module.less

@@ -0,0 +1,34 @@
+.app {
+	width: 100vw;
+	height: 100vh;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+
+	.editorWrapper {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+	}
+
+	.panel {
+		width: 100%;
+		height: 15rem;
+		padding: 0.15rem 1.5rem;
+		box-sizing: border-box;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		.rotate {
+			display: flex;
+		}
+
+		.buttons {
+			width: 100%;
+			display: flex;
+			justify-content: space-evenly;
+		}
+	}
+}