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

Fix lens and update errors.

Browse Source
This commit is contained in:
Nayam Amarshe 2024-02-07 06:53:19 +05:30
parent b1b122c5b2
commit 649f2d239d
6 changed files with 42 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc Normal file
View File

@ -0,0 +1,3 @@
{
"plugins": ["prettier-plugin-tailwindcss"]
}

1
electron/utils/convert-and-scale.ts
View File

@ -106,7 +106,6 @@ const convertAndScale = async (
lossless: compression === 0, lossless: compression === 0,
smartSubsample: true, smartSubsample: true,
}), }),
force: true, force: true,
}) })
.toFile(processedImagePath); .toFile(processedImagePath);

8
package-lock.json generated
View File

@ -40,7 +40,7 @@
"electron-builder": "^24.9.1", "electron-builder": "^24.9.1",
"next": "^13.5.6", "next": "^13.5.6",
"postcss": "^8.4.31", "postcss": "^8.4.31",
"prettier": "^3.0.0", "prettier": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.4.1", "prettier-plugin-tailwindcss": "^0.4.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
@ -6156,9 +6156,9 @@
} }
}, },
"node_modules/prettier": { "node_modules/prettier": {
"version": "3.2.4", "version": "3.2.5",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz", "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz",
"integrity": "sha512-FWu1oLHKCrtpO1ypU6J0SbK2d9Ckwysq6bHj/uaCP26DxrPpppCLQRGVuqAxSTvhF00AcvDRyYrLNW7ocBhFFQ==", "integrity": "sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A==",
"dev": true, "dev": true,
"bin": { "bin": {
"prettier": "bin/prettier.cjs" "prettier": "bin/prettier.cjs"

2
package.json
View File

@ -216,7 +216,7 @@
"electron-builder": "^24.9.1", "electron-builder": "^24.9.1",
"next": "^13.5.6", "next": "^13.5.6",
"postcss": "^8.4.31", "postcss": "^8.4.31",
"prettier": "^3.0.0", "prettier": "^3.2.5",
"prettier-plugin-tailwindcss": "^0.4.1", "prettier-plugin-tailwindcss": "^0.4.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",

55
renderer/pages/index.tsx
View File

@ -74,7 +74,7 @@ const Home = () => {
const [modelOptions, setModelOptions] = useAtom(modelsListAtom); const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
const [scale] = useAtom(scaleAtom); const [scale] = useAtom(scaleAtom);
const [dontShowCloudModal, setDontShowCloudModal] = useAtom( const [dontShowCloudModal, setDontShowCloudModal] = useAtom(
dontShowCloudModalAtom dontShowCloudModalAtom,
); );
const noImageProcessing = useAtomValue(noImageProcessingAtom); const noImageProcessing = useAtomValue(noImageProcessingAtom);
const [news, setNews] = useAtom(newsAtom); const [news, setNews] = useAtom(newsAtom);
@ -99,7 +99,7 @@ const Home = () => {
useEffect(() => { useEffect(() => {
// UPSCAYL VERSION // UPSCAYL VERSION
const upscaylVersion = navigator?.userAgent?.match( const upscaylVersion = navigator?.userAgent?.match(
/Upscayl\/([\d\.]+\d+)/ /Upscayl\/([\d\.]+\d+)/,
)[1]; )[1];
setVersion(upscaylVersion); setVersion(upscaylVersion);
}, []); }, []);
@ -109,7 +109,7 @@ const Home = () => {
const handleErrors = (data: string) => { const handleErrors = (data: string) => {
if (data.includes("invalid gpu")) { if (data.includes("invalid gpu")) {
alert( alert(
"Error. Please make sure you have a Vulkan compatible GPU (Most modern GPUs support Vulkan). Upscayl does not work with CPU or iGPU sadly." "Error. Please make sure you have a Vulkan compatible GPU (Most modern GPUs support Vulkan). Upscayl does not work with CPU or iGPU sadly.",
); );
resetImagePaths(); resetImagePaths();
} else if (data.includes("failed")) { } else if (data.includes("failed")) {
@ -117,12 +117,12 @@ const Home = () => {
alert( alert(
data.includes("encode") data.includes("encode")
? `ENCODING ERROR: ${data}. For troubleshooting, please read the Upscayl Wiki.` ? `ENCODING ERROR: ${data}. For troubleshooting, please read the Upscayl Wiki.`
: `DECODING ERROR: ${data}. Additional Info: This image is possibly corrupt or not supported by Upscayl, or your GPU drivers are acting funny (PLEASE READ THE UPSCAYL WIKI). You could try converting the image into another format and upscaling again. Also make sure that the output path is correct and you have the proper write permissions for the directory. If not, then unfortunately there's not much we can do to help, sorry.` : `DECODING ERROR: ${data}. Additional Info: This image is possibly corrupt or not supported by Upscayl, or your GPU drivers are acting funny (PLEASE READ THE UPSCAYL WIKI). You could try converting the image into another format and upscaling again. Also make sure that the output path is correct and you have the proper write permissions for the directory. If not, then unfortunately there's not much we can do to help, sorry.`,
); );
resetImagePaths(); resetImagePaths();
} else if (data.includes("uncaughtException")) { } else if (data.includes("uncaughtException")) {
alert( alert(
"Upscayl encountered an error. Possibly, the upscayl binary failed to execute the commands properly. Try checking the logs to see if you get any information. You can post an issue on Upscayl's GitHub repository for more help." "Upscayl encountered an error. Possibly, the upscayl binary failed to execute the commands properly. Try checking the logs to see if you get any information. You can post an issue on Upscayl's GitHub repository for more help.",
); );
resetImagePaths(); resetImagePaths();
} }
@ -134,7 +134,7 @@ const Home = () => {
if (data) { if (data) {
setOs(data); setOs(data);
} }
} },
); );
// LOG // LOG
window.electron.on(COMMAND.LOG, (_, data: string) => { window.electron.on(COMMAND.LOG, (_, data: string) => {
@ -217,7 +217,7 @@ const Home = () => {
const uniqueModelOptions = combinedModelOptions.filter( const uniqueModelOptions = combinedModelOptions.filter(
// Check if any model in the array appears more than once // Check if any model in the array appears more than once
(model, index, array) => (model, index, array) =>
array.findIndex((t) => t.value === model.value) === index array.findIndex((t) => t.value === model.value) === index,
); );
setModelOptions(uniqueModelOptions); setModelOptions(uniqueModelOptions);
}); });
@ -226,7 +226,7 @@ const Home = () => {
// FETCH CUSTOM MODELS FROM CUSTOM MODELS PATH // FETCH CUSTOM MODELS FROM CUSTOM MODELS PATH
useEffect(() => { useEffect(() => {
const customModelsPath = JSON.parse( const customModelsPath = JSON.parse(
localStorage.getItem("customModelsPath") localStorage.getItem("customModelsPath"),
); );
if (customModelsPath !== null) { if (customModelsPath !== null) {
window.electron.send(COMMAND.GET_MODELS_LIST, customModelsPath); window.electron.send(COMMAND.GET_MODELS_LIST, customModelsPath);
@ -364,7 +364,7 @@ const Home = () => {
logit("🔀 Model changed: ", e.value); logit("🔀 Model changed: ", e.value);
localStorage.setItem( localStorage.setItem(
"model", "model",
JSON.stringify({ label: e.label, value: e.value }) JSON.stringify({ label: e.label, value: e.value }),
); );
}; };
@ -517,7 +517,7 @@ const Home = () => {
<img <img
src="icon.png" src="icon.png"
alt="Upscayl icon" alt="Upscayl icon"
className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-36 animate-pulse" className="absolute left-1/2 top-1/2 w-36 -translate-x-1/2 -translate-y-1/2 animate-pulse"
/> />
); );
} }
@ -533,16 +533,17 @@ const Home = () => {
/> />
)} )}
{window.electron.platform === "mac" && ( {window.electron.platform === "mac" && (
<div className="pt-8 mac-titlebar"></div> <div className="mac-titlebar pt-8"></div>
)} )}
{/* HEADER */} {/* HEADER */}
<Header version={version} /> <Header version={version} />
{!dontShowCloudModal && featureFlags.SHOW_UPSCAYL_CLOUD_INFO && ( {!dontShowCloudModal && featureFlags.SHOW_UPSCAYL_CLOUD_INFO && (
<button <button
className="mb-5 rounded-btn p-1 mx-5 bg-success shadow-lg shadow-success/40 text-slate-50 animate-pulse text-sm" className="rounded-btn mx-5 mb-5 animate-pulse bg-success p-1 text-sm text-slate-50 shadow-lg shadow-success/40"
onClick={() => { onClick={() => {
setShowCloudModal(true); setShowCloudModal(true);
}}> }}
>
Introducing Upscayl Cloud Introducing Upscayl Cloud
</button> </button>
)} )}
@ -613,9 +614,10 @@ const Home = () => {
selectImageHandler(); selectImageHandler();
} }
}} }}
onPaste={(e) => handlePaste(e)}> onPaste={(e) => handlePaste(e)}
>
{window.electron.platform === "mac" && ( {window.electron.platform === "mac" && (
<div className="absolute top-0 w-full h-8 mac-titlebar"></div> <div className="mac-titlebar absolute top-0 h-8 w-full"></div>
)} )}
{progress.length > 0 && {progress.length > 0 &&
upscaledImagePath.length === 0 && upscaledImagePath.length === 0 &&
@ -677,8 +679,9 @@ const Home = () => {
All done! All done!
</p> </p>
<button <button
className="btn btn-primary bg-gradient-blue rounded-btn p-3 font-medium text-white/90 transition-colors" className="bg-gradient-blue btn btn-primary rounded-btn p-3 font-medium text-white/90 transition-colors"
onClick={openFolderHandler}> onClick={openFolderHandler}
>
Open Upscayled Folder Open Upscayled Folder
</button> </button>
</> </>
@ -693,10 +696,11 @@ const Home = () => {
upscaledImagePath && upscaledImagePath &&
imagePath && ( imagePath && (
<div <div
className="relative group overflow-hidden h-full w-full" className="img-with-border group relative h-full w-full overflow-hidden"
onMouseMove={handleMouseMoveCompare}> onMouseMove={handleMouseMoveCompare}
>
<img <img
className={`absolute left-0 top-0 object-contain w-full h-full transition-transform group-hover:scale-[${ className={`absolute left-0 top-0 h-full w-full object-contain transition-transform group-hover:scale-[${
zoomAmount + "%" zoomAmount + "%"
}]`} }]`}
src={"file:///" + imagePath} src={"file:///" + imagePath}
@ -706,27 +710,28 @@ const Home = () => {
}} }}
/> />
<div <div
className={`absolute left-0 top-0 bg-white mix-blend-difference w-full h-full transition-transform group-hover:visible invisible group-hover:scale-[${ className={`invisible absolute left-0 top-0 h-full w-full bg-red-500 mix-blend-difference group-hover:visible group-hover:scale-[${
zoomAmount + "%" zoomAmount + "%"
}]`} }]`}
style={{ style={{
clipPath: `circle(${ clipPath: `circle(${
(lensSize + 2) / (parseInt(zoomAmount) / 100) lensSize / (parseInt(zoomAmount) / 100)
}px at ${cursorPosition.x}px ${cursorPosition.y}px)`, }px at ${cursorPosition.x}px ${cursorPosition.y}px)`,
backgroundPosition: "0% 0%", backgroundPosition: "0% 0%",
transformOrigin: backgroundPosition, transformOrigin: backgroundPosition,
}} }}
/> />
<img <img
className={`absolute top-0 object-contain left-0 w-full h-full transition-transform group-hover:scale-[${ className={`absolute h-full w-full object-contain transition-transform group-hover:scale-[${
zoomAmount + "%" zoomAmount + "%"
}]`} }]`}
src={"file:///" + upscaledImagePath} src={"file:///" + upscaledImagePath}
style={{ style={{
clipPath: `circle(${ clipPath: `circle(${
lensSize / (parseInt(zoomAmount) / 100) (lensSize - parseInt(zoomAmount) / 100) /
(parseInt(zoomAmount) / 100)
}px at ${cursorPosition.x}px ${cursorPosition.y}px)`, }px at ${cursorPosition.x}px ${cursorPosition.y}px)`,
backgroundPosition: "0% 0%", backgroundPosition: backgroundPosition,
transformOrigin: backgroundPosition, transformOrigin: backgroundPosition,
}} }}
/> />

8
renderer/styles/globals.css
View File

@ -153,7 +153,7 @@
} }
[data-theme="upscayl"] .btn { [data-theme="upscayl"] .btn {
@apply font-medium normal-case !min-h-min h-10 py-2 px-3; @apply h-10 !min-h-min px-3 py-2 font-medium normal-case;
} }
[data-theme="upscayl"] input[type="range"] { [data-theme="upscayl"] input[type="range"] {
@ -165,15 +165,15 @@
} }
[data-theme="upscayl"] .react-select-container .react-select__single-value { [data-theme="upscayl"] .react-select-container .react-select__single-value {
@apply text-primary-content normal-case font-medium; @apply font-medium normal-case text-primary-content;
} }
[data-theme="upscayl"] .react-select-container .react-select__input-container { [data-theme="upscayl"] .react-select-container .react-select__input-container {
@apply text-xs text-primary-content normal-case font-medium; @apply text-xs font-medium normal-case text-primary-content;
} }
[data-theme="upscayl"] .react-select-container .react-select__menu { [data-theme="upscayl"] .react-select-container .react-select__menu {
@apply rounded-lg bg-primary p-1 normal-case font-medium; @apply rounded-lg bg-primary p-1 font-medium normal-case;
} }
.mac-titlebar { .mac-titlebar {