Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-23 23:21:05 +01:00
Code Releases Wiki Activity

Initial Fix

Browse Source
This commit is contained in:
Nayam Amarshe 2024-02-14 12:02:52 +05:30
parent df9ff7de27
commit 1755b26c4a
7 changed files with 56 additions and 179 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
electron/commands/double-upscayl.ts
View File

@ -4,6 +4,7 @@ import {
childProcesses,
customModelsFolderPath,
customWidth,
folderPath,
noImageProcessing,
outputFolderPath,
saveOutputFolder,

5
renderer/atoms/userSettingsAtom.ts
View File

@ -7,7 +7,10 @@ export const customModelsPathAtom = atomWithStorage<string | null>(
);
export const scaleAtom = atomWithStorage<"2" | "3" | "4">("scale", "4");
export const batchModeAtom = atom<boolean>(false);
export const outputPathAtom = atom<string | null>("");
export const outputPathAtom = atomWithStorage<string | null>(
"lastOutputFolderPath",
null,
);
export const progressAtom = atom<string>("");
export const rememberOutputFolderAtom = atomWithStorage<boolean>(

26
renderer/components/settings-tab/SaveOutputFolderToggle.tsx
View File

@ -1,20 +1,22 @@
import React from "react";
import {
outputPathAtom,
rememberOutputFolderAtom,
} from "@/atoms/userSettingsAtom";
import { useAtom } from "jotai";
type SaveOutputFolderToggleProps = {
rememberOutputFolder: boolean;
setRememberOutputFolder: (arg: any) => void;
};
export function SaveOutputFolderToggle({
rememberOutputFolder,
setRememberOutputFolder,
}: SaveOutputFolderToggleProps) {
export function SaveOutputFolderToggle() {
const [outputPath, setOutputPath] = useAtom(outputPathAtom);
const [rememberOutputFolder, setRememberOutputFolder] = useAtom(
rememberOutputFolderAtom,
);
return (
<div className="flex flex-col gap-2">
<p className="text-sm font-medium">SAVE OUTPUT FOLDER</p>
<p className="text-xs text-base-content/80">
If enabled, the output folder will be remembered between sessions.
</p>
<p>{outputPath}</p>
<input
type="checkbox"
className="toggle"
@ -22,13 +24,13 @@ export function SaveOutputFolderToggle({
onClick={() => {
setRememberOutputFolder((oldValue) => {
if (oldValue === true) {
localStorage.removeItem("lastOutputFolderPath");
setOutputPath("");
}
return !oldValue;
});
localStorage.setItem(
"rememberOutputFolder",
JSON.stringify(!rememberOutputFolder)
JSON.stringify(!rememberOutputFolder),
);
}}
/>

22
renderer/components/settings-tab/index.tsx
View File

@ -65,7 +65,6 @@ function SettingsTab({
label: null,
value: null,
});
const [rememberOutputFolder, setRememberOutputFolder] = useState(false);
const [isCopied, setIsCopied] = useState(false);
const [customModelsPath, setCustomModelsPath] = useAtom(customModelsPathAtom);
@ -126,22 +125,6 @@ function SettingsTab({
setGpuId(currentlySavedGpuId);
logit("⚙️ Getting gpuId from localStorage: ", currentlySavedGpuId);
}
if (!localStorage.getItem("rememberOutputFolder")) {
logit("⚙️ Setting rememberOutputFolder to false");
localStorage.setItem("rememberOutputFolder", "false");
} else {
const currentlySavedRememberOutputFolder = localStorage.getItem(
"rememberOutputFolder",
);
logit(
"⚙️ Getting rememberOutputFolder from localStorage: ",
currentlySavedRememberOutputFolder,
);
setRememberOutputFolder(
currentlySavedRememberOutputFolder === "true" ? true : false,
);
}
}, []);
// HANDLERS
@ -229,10 +212,7 @@ function SettingsTab({
</>
)}
<SaveOutputFolderToggle
rememberOutputFolder={rememberOutputFolder}
setRememberOutputFolder={setRememberOutputFolder}
/>
<SaveOutputFolderToggle />
<OverwriteToggle />
<TurnOffNotificationsToggle />

19
renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx
View File

@ -9,16 +9,17 @@ import {
noImageProcessingAtom,
outputPathAtom,
progressAtom,
rememberOutputFolderAtom,
scaleAtom,
} from "../../../atoms/userSettingsAtom";
import { featureFlags } from "@common/feature-flags";
import getModelScale from "@common/check-model-scale";
import COMMAND from "@common/commands";
interface IProps {
selectImageHandler: () => Promise<void>;
selectFolderHandler: () => Promise<void>;
handleModelChange: (e: any) => void;
outputHandler: () => Promise<void>;
upscaylHandler: () => Promise<void>;
batchMode: boolean;
setBatchMode: React.Dispatch<React.SetStateAction<boolean>>;
@ -39,7 +40,6 @@ function LeftPaneImageSteps({
selectImageHandler,
selectFolderHandler,
handleModelChange,
outputHandler,
upscaylHandler,
batchMode,
setBatchMode,
@ -65,12 +65,23 @@ function LeftPaneImageSteps({
const noImageProcessing = useAtomValue(noImageProcessingAtom);
const [outputPath, setOutputPath] = useAtom(outputPathAtom);
const [progress, setProgress] = useAtom(progressAtom);
const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom);
const [targetWidth, setTargetWidth] = useState<number>(null);
const [targetHeight, setTargetHeight] = useState<number>(null);
const { logit } = useLog();
const outputHandler = async () => {
var path = await window.electron.invoke(COMMAND.SELECT_FOLDER);
if (path !== null) {
logit("🗂 Setting Output Path: ", path);
setOutputPath(path);
} else {
setOutputPath(null);
}
};
useEffect(() => {
themeChange(false);
@ -166,7 +177,9 @@ function LeftPaneImageSteps({
className="toggle"
defaultChecked={batchMode}
onClick={() => {
setOutputPath("");
if (!rememberOutputFolder) {
setOutputPath("");
}
setProgress("");
setBatchMode((oldValue) => !oldValue);
}}

107
renderer/components/upscayl-tab/config/LeftPaneVideoSteps.tsx
View File

@ -1,107 +0,0 @@
import React from "react";
import Select from "react-select";
interface IProps {
progress: string;
selectVideoHandler: () => Promise<void>;
handleModelChange: (e: any) => void;
handleDrop: (e: any) => void;
outputHandler: () => Promise<void>;
upscaylHandler: () => Promise<void>;
videoPath: string;
outputPath: string;
model: string;
isVideo: boolean;
setIsVideo: (arg: boolean) => void;
}
function LeftPaneVideoSteps({
progress,
selectVideoHandler,
handleModelChange,
handleDrop,
outputHandler,
upscaylHandler,
videoPath,
outputPath,
model,
isVideo,
setIsVideo,
}: IProps) {
const customStyles = {
option: (provided, state) => ({
...provided,
borderBottom: "1px dotted pink",
color: state.isSelected ? "red" : "blue",
padding: 20,
}),
control: () => ({
// none of react-select's styles are passed to <Control />
width: 200,
}),
singleValue: (provided, state) => {
const opacity = state.isDisabled ? 0.5 : 1;
const transition = "opacity 300ms";
return { ...provided, opacity, transition };
},
};
const modelOptions = [
{ label: "2x Digital Art", value: "realesr-animevideov3-x2" },
{ label: "3x Digital Art", value: "realesr-animevideov3-x3" },
{ label: "4x Digital Art", value: "realesr-animevideov3-x4" },
];
return (
<div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden">
{/* STEP 1 */}
<div data-tip={videoPath}>
<p className="step-heading">Step 1</p>
<button className="btn-primary btn" onClick={selectVideoHandler}>
Select Video
</button>
</div>
{/* STEP 2 */}
<div className="animate-step-in">
<p className="step-heading">Step 2</p>
<p className="mb-2 text-sm">Select Scaling</p>
<Select
options={modelOptions}
components={{
IndicatorSeparator: () => null,
DropdownIndicator: () => null,
}}
onChange={handleModelChange}
className="react-select-container"
classNamePrefix="react-select"
defaultValue={modelOptions[0]}
/>
</div>
{/* STEP 3 */}
<div className="animate-step-in" data-tip={outputPath}>
<p className="step-heading">Step 3</p>
<p className="mb-2 text-sm">Defaults to Video's path</p>
<button className="btn-primary btn" onClick={outputHandler}>
Set Output Folder
</button>
</div>
{/* STEP 4 */}
<div className="animate-step-in">
<p className="step-heading">Step 4</p>
<button
className="btn-accent btn"
onClick={upscaylHandler}
disabled={progress.length > 0}>
{progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
</button>
</div>
</div>
);
}
export default LeftPaneVideoSteps;

55
renderer/pages/index.tsx
View File

@ -24,6 +24,7 @@ import {
progressAtom,
scaleAtom,
viewTypeAtom,
rememberOutputFolderAtom,
} from "../atoms/userSettingsAtom";
import useLog from "../components/hooks/useLog";
import { UpscaylCloudModal } from "../components/UpscaylCloudModal";
@ -81,6 +82,7 @@ const Home = () => {
const [showNewsModal, setShowNewsModal] = useAtom(showNewsModalAtom);
const viewType = useAtomValue(viewTypeAtom);
const lensSize = useAtomValue(lensSizeAtom);
const rememberOutputFolder = useAtomValue(rememberOutputFolderAtom);
const { logit } = useLog();
@ -275,19 +277,6 @@ const Home = () => {
}
}, [news]);
// CONFIGURE SAVED OUTPUT PATH
useEffect(() => {
const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");
const lastOutputFolderPath = localStorage.getItem("lastOutputFolderPath");
if (rememberOutputFolder === "true") {
logit("🧠 Recalling Output Folder: ", lastOutputFolderPath);
setOutputPath(lastOutputFolderPath);
} else {
setOutputPath("");
localStorage.removeItem("lastOutputFolderPath");
}
}, []);
// LOADING STATE
useEffect(() => {
setIsLoading(false);
@ -340,7 +329,9 @@ const Home = () => {
var dirname = path.match(/(.*)[\/\\]/)[1] || "";
logit("📁 Selected Image Directory: ", dirname);
if (!featureFlags.APP_STORE_BUILD) {
setOutputPath(dirname);
if (!rememberOutputFolder) {
setOutputPath(dirname);
}
}
validateImagePath(path);
};
@ -351,11 +342,15 @@ const Home = () => {
if (path !== null) {
logit("🖼 Selected Folder Path: ", path);
setBatchFolderPath(path);
setOutputPath(path);
if (!rememberOutputFolder) {
setOutputPath(path);
}
} else {
logit("🚫 Folder selection cancelled");
setBatchFolderPath("");
setOutputPath("");
if (!rememberOutputFolder) {
setOutputPath("");
}
}
};
@ -412,7 +407,11 @@ const Home = () => {
setImagePath(filePath);
var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
logit("🗂 Setting output path: ", dirname);
if (!featureFlags.APP_STORE_BUILD) setOutputPath(dirname);
if (!featureFlags.APP_STORE_BUILD) {
if (!rememberOutputFolder) {
setOutputPath(dirname);
}
}
validateImagePath(filePath);
}
};
@ -433,22 +432,9 @@ const Home = () => {
setImagePath(filePath);
var dirname = filePath.match(/(.*)[\/\\]/)[1] || "";
logit("🗂 Setting output path: ", dirname);
setOutputPath(dirname);
}
};
const outputHandler = async () => {
var path = await window.electron.invoke(COMMAND.SELECT_FOLDER);
if (path !== null) {
logit("🗂 Setting Output Path: ", path);
setOutputPath(path);
const rememberOutputFolder = localStorage.getItem("rememberOutputFolder");
if (rememberOutputFolder) {
logit("🧠 Remembering Output Folder: ", path);
localStorage.setItem("lastOutputFolderPath", path);
if (!rememberOutputFolder) {
setOutputPath(dirname);
}
} else {
setOutputPath("");
}
};
@ -564,7 +550,6 @@ const Home = () => {
selectImageHandler={selectImageHandler}
selectFolderHandler={selectFolderHandler}
handleModelChange={handleModelChange}
outputHandler={outputHandler}
upscaylHandler={upscaylHandler}
batchMode={batchMode}
setBatchMode={setBatchMode}
@ -674,7 +659,7 @@ const Home = () => {
)}
{/* BATCH UPSCALE DONE INFO */}
{batchMode && upscaledBatchFolderPath.length > 0 && (
<>
<div className="z-50 flex flex-col items-center">
<p className="select-none py-4 font-bold text-base-content">
All done!
</p>
@ -684,7 +669,7 @@ const Home = () => {
>
Open Upscayled Folder
</button>
</>
</div>
)}
<ImageOptions
zoomAmount={zoomAmount}