mirror of
https://github.com/upscayl/upscayl.git
synced 2024-11-12 01:40:53 +01:00
Added localStorage save and more options
This commit is contained in:
parent
6c7ccc9328
commit
527f6992fc
15
package.json
15
package.json
@ -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"
|
||||||
|
@ -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>
|
||||||
|
@ -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" },
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user