1
0
mirror of https://github.com/upscayl/upscayl.git synced 2024-11-27 17:00:52 +01:00

Added localStorage save and more options

This commit is contained in:
Feenix 2022-12-21 21:54:13 +05:30
parent 6c7ccc9328
commit 527f6992fc
4 changed files with 41 additions and 35 deletions

View File

@ -105,10 +105,14 @@
], ],
"target": [ "target": [
"AppImage", "AppImage",
"flatpak", "zip",
"zip" "deb",
"rpm",
"tar.gz"
], ],
"category": "Graphics;2DGraphics;RasterGraphics;ImageProcessing;" "category": "Graphics;2DGraphics;RasterGraphics;ImageProcessing;",
"synopsis": "AI Image Upscaler",
"description": "Upscayl is a free and open source AI image upscaler for Linux. It uses the latest AI technology to upscale images to higher resolutions."
}, },
"win": { "win": {
"publish": [ "publish": [
@ -119,6 +123,11 @@
], ],
"icon": "main/build/icon.png" "icon": "main/build/icon.png"
}, },
"nsis": {
"allowToChangeInstallationDirectory": true,
"allowElevation": true,
"perMachine": true
},
"files": [ "files": [
"main", "main",
"renderer/out" "renderer/out"

View File

@ -1,4 +1,4 @@
import React from "react"; import React, { useEffect } from "react";
const ImageOptions = ({ const ImageOptions = ({
zoomAmount, zoomAmount,
@ -13,27 +13,13 @@ const ImageOptions = ({
rightImageRef: React.RefObject<HTMLImageElement>; rightImageRef: React.RefObject<HTMLImageElement>;
resetImagePaths: () => void; resetImagePaths: () => void;
}) => { }) => {
const [zoomLevel, setZoomLevel] = React.useState("125"); useEffect(() => {
if (!localStorage.getItem("zoomAmount")) {
const handleZoom = (direction: number) => { localStorage.setItem("zoomAmount", zoomAmount);
if (direction === 0) { } else {
setZoomAmount(""); setZoomAmount(localStorage.getItem("zoomAmount"));
setZoomLevel("100");
console.log("🚀 => file: ImageOptions.tsx:24 => zoomLevel", zoomLevel);
} else if (direction === 1 && zoomLevel < "200") {
setZoomLevel((parseInt(zoomLevel) + direction * 25).toString());
setZoomAmount("zoom-" + zoomLevel);
console.log("🚀 => file: ImageOptions.tsx:24 => zoomLevel", zoomLevel);
} else if (direction === -1 && zoomLevel > "100") {
setZoomLevel((parseInt(zoomLevel) + direction * 25).toString());
setZoomAmount("zoom-" + zoomLevel);
console.log("🚀 => file: ImageOptions.tsx:24 => zoomLevel", zoomLevel);
} }
}, []);
if (zoomLevel > "200" || zoomLevel < "100") {
setZoomAmount("100");
}
};
return ( return (
<div className="animate rounded-btn collapse absolute top-0 z-50 m-2 opacity-25 hover:opacity-100"> <div className="animate rounded-btn collapse absolute top-0 z-50 m-2 opacity-25 hover:opacity-100">
@ -53,35 +39,50 @@ const ImageOptions = ({
className={`btn-primary btn ${ className={`btn-primary btn ${
zoomAmount === "100%" ? "btn-secondary" : "btn-primary" zoomAmount === "100%" ? "btn-secondary" : "btn-primary"
}`} }`}
onClick={() => setZoomAmount("100%")}> onClick={() => {
setZoomAmount("100%");
localStorage.setItem("zoomAmount", "100%");
}}>
100% 100%
</button> </button>
<button <button
className={`btn-primary btn ${ className={`btn-primary btn ${
zoomAmount === "125%" ? "btn-secondary" : "btn-primary" zoomAmount === "125%" ? "btn-secondary" : "btn-primary"
}`} }`}
onClick={() => setZoomAmount("125%")}> onClick={() => {
setZoomAmount("125%");
localStorage.setItem("zoomAmount", "125%");
}}>
125% 125%
</button> </button>
<button <button
className={`btn-primary btn ${ className={`btn-primary btn ${
zoomAmount === "150%" ? "btn-secondary" : "btn-primary" zoomAmount === "150%" ? "btn-secondary" : "btn-primary"
}`} }`}
onClick={() => setZoomAmount("150%")}> onClick={() => {
setZoomAmount("150%");
localStorage.setItem("zoomAmount", "150%");
}}>
150% 150%
</button> </button>
<button <button
className={`btn-primary btn ${ className={`btn-primary btn ${
zoomAmount === "175%" ? "btn-secondary" : "btn-primary" zoomAmount === "175%" ? "btn-secondary" : "btn-primary"
}`} }`}
onClick={() => setZoomAmount("175%")}> onClick={() => {
setZoomAmount("175%");
localStorage.setItem("zoomAmount", "175%");
}}>
175% 175%
</button> </button>
<button <button
className={`btn-primary btn ${ className={`btn-primary btn ${
zoomAmount === "200%" ? "btn-secondary" : "btn-primary" zoomAmount === "200%" ? "btn-secondary" : "btn-primary"
}`} }`}
onClick={() => setZoomAmount("200%")}> onClick={() => {
setZoomAmount("200%");
localStorage.setItem("zoomAmount", "200%");
}}>
200% 200%
</button> </button>
</div> </div>

View File

@ -90,9 +90,9 @@ function LeftPaneImageSteps({
}; };
const modelOptions = [ const modelOptions = [
{ label: "General Photo (Real-ESRGAN)", value: "realesrgan-x4plus" },
{ label: "General Photo (Remacri)", value: "remacri" }, { label: "General Photo (Remacri)", value: "remacri" },
{ label: "General Photo (Ultramix Balanced)", value: "ultramix_balanced" }, { label: "General Photo (Ultramix Balanced)", value: "ultramix_balanced" },
{ label: "General Photo (Real-ESRGAN)", value: "realesrgan-x4plus" },
{ label: "General Photo (Ultrasharp)", value: "ultrasharp" }, { label: "General Photo (Ultrasharp)", value: "ultrasharp" },
{ label: "Digital Art", value: "realesrgan-x4plus-anime" }, { label: "Digital Art", value: "realesrgan-x4plus-anime" },
{ label: "Sharpen Image", value: "models-DF2K" }, { label: "Sharpen Image", value: "models-DF2K" },

View File

@ -1,9 +1,6 @@
import { useState, useEffect, useRef, useCallback } from "react"; import { useState, useEffect, useRef, useCallback } from "react";
import commands from "../../electron/commands"; import commands from "../../electron/commands";
import { import { ReactCompareSlider } from "react-compare-slider";
ReactCompareSlider,
ReactCompareSliderImage,
} from "react-compare-slider";
import Header from "../components/Header"; import Header from "../components/Header";
import Footer from "../components/Footer"; import Footer from "../components/Footer";
import ProgressBar from "../components/ProgressBar"; import ProgressBar from "../components/ProgressBar";
@ -13,7 +10,6 @@ import RightPaneInfo from "../components/RightPaneInfo";
import ImageOptions from "../components/ImageOptions"; import ImageOptions from "../components/ImageOptions";
import LeftPaneVideoSteps from "../components/LeftPaneVideoSteps"; import LeftPaneVideoSteps from "../components/LeftPaneVideoSteps";
import LeftPaneImageSteps from "../components/LeftPaneImageSteps"; import LeftPaneImageSteps from "../components/LeftPaneImageSteps";
import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
const Home = () => { const Home = () => {
// STATES // STATES