1
0
mirror of https://github.com/upscayl/upscayl.git synced 2025-01-31 12:13:43 +01:00

Added daisyUI

This commit is contained in:
Feenix 2022-11-12 03:02:24 +05:30
parent 5f6649c938
commit 268a1e1503
9 changed files with 126 additions and 98 deletions

View File

@ -33,6 +33,7 @@
"scripts": {
"clean": "rimraf dist renderer/.next renderer/out",
"start": "tsc && electron .",
"dev": "tsc && electron .",
"build": "next build renderer && next export renderer",
"tsc": "tsc",
"pack-app": "npm run build && electron-builder --dir",
@ -142,6 +143,7 @@
},
"dependencies": {
"app-root-dir": "^1.0.2",
"daisyui": "^2.39.1",
"electron-is-dev": "^2.0.0",
"electron-is-packaged": "^1.0.2",
"electron-next": "^3.1.5",

View File

@ -15,8 +15,8 @@ export default function Header() {
data-tip="Star us on GitHub 😁"
/>
<div className="flex flex-col justify-center">
<h1 className="text-3xl font-bold text-neutral-50">Upscayl</h1>
<p className="text-neutral-400">AI Image Upscaler</p>
<h1 className="text-3xl font-bold">Upscayl</h1>
<p className="">AI Image Upscaler</p>
</div>
</div>
</a>

View File

@ -35,54 +35,36 @@ function LeftPaneSteps(props) {
return (
<div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-auto p-5">
{/* BATCH OPTION */}
<div className="flex flex-row items-end">
<div className="flex flex-row items-center gap-2">
<input
type="checkbox"
className="checkbox"
onClick={handleBatchMode}
></input>
<p
className="mr-1 inline-block cursor-help text-sm text-white/70"
className="mr-1 inline-block cursor-help text-sm"
data-tip="This will let you upscale all files in a folder at once"
>
Batch Upscale:
Batch Upscale
</p>
<button
className={`animate relative inline-block h-5 w-8 cursor-pointer rounded-full outline-none focus-visible:shadow-lg focus-visible:shadow-purple-500 ${
props.batchMode ? "bg-gradient-purple" : "bg-neutral-500"
}`}
onClick={handleBatchMode}
>
<div
className={`${
props.batchMode ? "translate-x-4" : "translate-x-1"
} animate absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-neutral-100`}
></div>
</button>
</div>
{/* ADVANCED OPTION */}
<div className="flex flex-row items-end">
<div className="flex flex-row items-center gap-2">
<input type="checkbox" className="checkbox" onClick={handleBatchMode} />
<p
className="mr-1 inline-block cursor-help text-sm text-white/70"
className="mr-1 inline-block cursor-help text-sm"
data-tip="This will let you upscale all files in a folder at once"
>
Advanced Options:
Advanced Options
</p>
<button
className={`animate relative inline-block h-5 w-8 cursor-pointer rounded-full outline-none focus-visible:shadow-lg focus-visible:shadow-purple-500 ${
props.batchMode ? "bg-gradient-purple" : "bg-neutral-500"
}`}
onClick={handleBatchMode}
>
<div
className={`${
props.batchMode ? "translate-x-4" : "translate-x-1"
} animate absolute top-1/2 h-3 w-3 -translate-y-1/2 rounded-full bg-neutral-100`}
></div>
</button>
</div>
{/* STEP 1 */}
<div data-tip={props.imagePath}>
<p className="step-heading">Step 1</p>
<button
className="animate bg-gradient-red rounded-lg p-3 font-medium text-white/90 outline-none transition-colors focus-visible:shadow-lg focus-visible:shadow-red-500"
className="btn-primary btn"
onClick={
!props.batchMode
? props.selectImageHandler
@ -96,7 +78,7 @@ function LeftPaneSteps(props) {
{/* STEP 2 */}
<div className="animate-step-in">
<p className="step-heading">Step 2</p>
<p className="mb-2 text-sm text-white/60">Select Upscaling Type</p>
<p className="mb-2 text-sm">Select Upscaling Type</p>
<Select
options={modelOptions}
@ -105,7 +87,7 @@ function LeftPaneSteps(props) {
DropdownIndicator: () => null,
}}
onChange={props.handleModelChange}
className="react-select-container"
className="react-select-container select"
classNamePrefix="react-select"
defaultValue={modelOptions[0]}
theme={(theme) => ({
@ -143,22 +125,11 @@ function LeftPaneSteps(props) {
}}
/>
{/* <select
name="select-model"
onDrop={(e) => props.handleDrop(e)}
className="animate bg-gradient-white block cursor-pointer rounded-lg p-3 font-medium text-black/90 outline-none hover:bg-slate-200 focus-visible:ring-2 focus-visible:ring-slate-400"
onChange={props.handleModelChange}
>
<option value="realesrgan-x4plus">General Photo</option>
<option value="realesrgan-x4plus-anime">Digital Art</option>
<option value="models-DF2K">Sharpen Image</option>
</select> */}
{props.model !== "models-DF2K" && !props.batchMode && (
<div className="mt-2 flex items-center gap-1">
<input
type="checkbox"
className="checked:bg-gradient-white h-4 w-4 cursor-pointer appearance-none rounded-full bg-white/30 transition duration-200 focus:outline-none focus-visible:border focus-visible:shadow-lg focus-visible:shadow-white/40"
className="checkbox"
checked={props.doubleUpscayl}
onChange={(e) => {
if (e.target.checked) {
@ -169,11 +140,7 @@ function LeftPaneSteps(props) {
}}
/>
<p
className={`inline-block cursor-pointer select-none rounded-full text-sm font-medium ${
props.doubleUpscayl
? "bg-gradient-white px-2 text-black/90"
: "text-white/50"
}`}
className="cursor-pointer text-sm"
onClick={(e) => {
props.setDoubleUpscayl(!props.doubleUpscayl);
}}
@ -181,7 +148,7 @@ function LeftPaneSteps(props) {
Double Upscayl
</p>
<span
className="cursor-help rounded-full bg-white/20 px-3 text-center font-bold text-white/40"
className="badge-info badge cursor-help"
data-tip="Enable this option to get an 8x upscayl. Note that this may not always work properly with all images, for example, images with really large resolutions."
>
i
@ -193,11 +160,8 @@ function LeftPaneSteps(props) {
{/* STEP 3 */}
<div className="animate-step-in" data-tip={props.outputPath}>
<p className="step-heading">Step 3</p>
<p className="mb-2 text-sm text-white/60">Defaults to Image's path</p>
<button
className="animate bg-gradient mt-1 rounded-lg p-3 font-medium text-black/90 outline-none transition-colors focus-visible:shadow-lg focus-visible:shadow-green-500"
onClick={props.outputHandler}
>
<p className="mb-2 text-sm">Defaults to Image's path</p>
<button className="btn-primary btn" onClick={props.outputHandler}>
Set Output Folder
</button>
</div>
@ -206,7 +170,7 @@ function LeftPaneSteps(props) {
<div className="animate-step-in">
<p className="step-heading">Step 4</p>
<button
className="animate bg-gradient-upscayl rounded-lg p-3 font-medium text-white/90 outline-none transition-colors focus-visible:shadow-lg focus-visible:shadow-violet-500"
className="btn-accent btn"
onClick={props.upscaylHandler}
disabled={props.progress.length > 0}
>
@ -215,7 +179,7 @@ function LeftPaneSteps(props) {
</div>
<ReactTooltip
className="max-w-md break-words bg-neutral-900 text-neutral-50"
className="bg-neutral-900 text-neutral-50 max-w-md break-words"
place="top"
/>
</div>

View File

@ -3,16 +3,16 @@ import React from "react";
function RightPaneInfo({ version, batchMode }) {
return (
<>
<p className="p-5 pb-0 text-lg font-medium text-neutral-400">
<p className="p-5 pb-1 text-lg font-semibold">
Select {batchMode ? "a Folder" : "an Image"} to Upscale
</p>
{batchMode && (
<p className="w-full py-5 text-center text-neutral-500 md:w-96">
<p className="w-full pb-5 text-center md:w-96">
Make sure that the folder doesn't contain anything except PNG, JPG,
JPEG & WEBP images.
</p>
)}
<p className="text-neutral-600">Upscayl v{version}</p>
<p className="text-sm">Upscayl v{version}</p>
</>
);
}

View File

@ -4,12 +4,12 @@ import { AppProps } from "next/app";
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<>
<div data-theme="dark">
<Head>
<title>Upscayl</title>
</Head>
<Component {...pageProps} />
</>
</div>
);
};

View File

@ -263,8 +263,8 @@ const Home = () => {
};
return (
<div className="flex h-screen w-screen flex-row overflow-hidden bg-[#1d1c23]">
<div className="flex h-screen w-96 flex-col bg-[#26222c]">
<div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
<div className="flex h-screen w-96 flex-col bg-base-100">
{((!batchMode && imagePath.length > 0) ||
(batchMode && batchFolderPath.length > 0)) && (
<ResetButton resetImagePaths={resetImagePaths} />
@ -334,14 +334,14 @@ const Home = () => {
{batchMode &&
upscaledBatchFolderPath.length === 0 &&
batchFolderPath.length > 0 && (
<p className="select-none font-bold text-neutral-50">
<p className="text-neutral-50 select-none font-bold">
Selected folder: {batchFolderPath}
</p>
)}
{batchMode && upscaledBatchFolderPath.length > 0 && (
<>
<p className="select-none py-4 font-bold text-neutral-50">
<p className="text-neutral-50 select-none py-4 font-bold">
All done!
</p>
<button
@ -388,21 +388,6 @@ const Home = () => {
className="h-screen"
/>
)}
{/* {imagePath.length === 0 && batchFolderPath.length === 0 ? (
<RightPaneInfo version={version} />
) : upscaledImagePath.length === 0 &&
upscaledBatchFolderPath.length === 0 ? (
!batchMode ? (
) : (
)
) : !batchMode ? (
) : (
)} */}
</div>
</div>
);

View File

@ -11,15 +11,15 @@
}
::-webkit-scrollbar-track {
@apply rounded-full bg-neutral-700;
@apply rounded-full bg-base-300;
}
::-webkit-scrollbar-thumb {
@apply rounded-full bg-neutral-500;
@apply rounded-full bg-base-200;
}
::-webkit-scrollbar-thumb:hover {
@apply rounded-full bg-neutral-400;
@apply rounded-full bg-base-content;
}
}
@ -27,14 +27,14 @@
.animate {
@apply transition-all duration-300 ease-in-out;
}
.bg-gradient-purple {
/* .bg-gradient-purple {
@apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff];
}
.bg-gradient-red {
@apply bg-gradient-to-br from-rose-600 to-red-400 hover:from-red-400 hover:to-rose-600;
}
.bg-gradient-white {
@apply bg-gradient-to-br from-slate-400 to-neutral-100 hover:from-neutral-100 hover:to-slate-400;
@apply to-neutral-100 hover:from-neutral-100 bg-gradient-to-br from-slate-400 hover:to-slate-400;
}
.bg-gradient-upscayl {
@apply bg-gradient-to-br from-[#7741ff] to-[#af55ff] hover:from-[#af55ff] hover:to-[#7741ff];
@ -44,15 +44,15 @@
}
.bg-gradient-blue {
@apply bg-gradient-to-br from-blue-500 to-sky-400 hover:from-sky-400 hover:to-blue-500;
}
} */
.step-heading {
@apply mb-2 font-medium text-white/80;
@apply mb-2 font-semibold;
}
.react-select-container {
@apply w-40 text-black;
}
.react-select-container .react-select__control {
@apply bg-gradient-white cursor-pointer rounded-lg p-1;
@apply cursor-pointer rounded-lg p-1;
}
.react-select-container .react-select__menu {
@apply rounded-lg bg-slate-300 p-1;

View File

@ -3,9 +3,6 @@ module.exports = {
"./renderer/pages/**/*.{js,ts,jsx,tsx}",
"./renderer/components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
darkMode: "class",
plugins: [require("tailwind-scrollbar")],
theme: {},
plugins: [require("daisyui"), require("tailwind-scrollbar")],
};

View File

@ -961,11 +961,27 @@ color-name@1.1.3:
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
color-name@^1.1.4, color-name@~1.1.4:
color-name@^1.0.0, color-name@^1.1.4, color-name@~1.1.4:
version "1.1.4"
resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
color-string@^1.9.0:
version "1.9.1"
resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
dependencies:
color-name "^1.0.0"
simple-swizzle "^0.2.2"
color@^4.2:
version "4.2.3"
resolved "https://registry.yarnpkg.com/color/-/color-4.2.3.tgz#d781ecb5e57224ee43ea9627560107c0e0c6463a"
integrity sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==
dependencies:
color-convert "^2.0.1"
color-string "^1.9.0"
colors@1.0.3:
version "1.0.3"
resolved "https://registry.npmjs.org/colors/-/colors-1.0.3.tgz"
@ -1047,6 +1063,14 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.3:
shebang-command "^2.0.0"
which "^2.0.1"
css-selector-tokenizer@^0.8.0:
version "0.8.0"
resolved "https://registry.yarnpkg.com/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz#88267ef6238e64f2215ea2764b3e2cf498b845dd"
integrity sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==
dependencies:
cssesc "^3.0.0"
fastparse "^1.1.2"
cssesc@^3.0.0:
version "3.0.0"
resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
@ -1057,6 +1081,16 @@ csstype@^3.0.2:
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
integrity sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==
daisyui@^2.39.1:
version "2.39.1"
resolved "https://registry.yarnpkg.com/daisyui/-/daisyui-2.39.1.tgz#0d9fe91dba114ab98651c8712de8b5c6a153abe2"
integrity sha512-J7goHjiQ6zk7irpKJ0HyElAuWF+x8iGoebQ1IfHM6BuvKoGSOcfZC/bedTultsX2Co5XARsE+qvE7BI1amUtsQ==
dependencies:
color "^4.2"
css-selector-tokenizer "^0.8.0"
postcss-js "^4.0.0"
tailwindcss "^3"
debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.4:
version "4.3.4"
resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
@ -1376,6 +1410,11 @@ fast-json-stable-stringify@^2.0.0:
resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
fastparse@^1.1.2:
version "1.1.2"
resolved "https://registry.yarnpkg.com/fastparse/-/fastparse-1.1.2.tgz#91728c5a5942eced8531283c79441ee4122c35a9"
integrity sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==
fastq@^1.6.0:
version "1.13.0"
resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
@ -1713,6 +1752,11 @@ is-arrayish@^0.2.1:
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
is-arrayish@^0.3.1:
version "0.3.2"
resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
is-binary-path@~2.1.0:
version "2.1.0"
resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
@ -2552,6 +2596,13 @@ shebang-regex@^3.0.0:
resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
simple-swizzle@^0.2.2:
version "0.2.2"
resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
dependencies:
is-arrayish "^0.3.1"
simple-update-notifier@^1.0.7:
version "1.0.7"
resolved "https://registry.yarnpkg.com/simple-update-notifier/-/simple-update-notifier-1.0.7.tgz#7edf75c5bdd04f88828d632f762b2bc32996a9cc"
@ -2665,6 +2716,35 @@ tailwind-scrollbar@^2.0.1:
resolved "https://registry.yarnpkg.com/tailwind-scrollbar/-/tailwind-scrollbar-2.0.1.tgz#f08721173d513f1406a44601640b79726e3f9728"
integrity sha512-OcR7qHBbux4k+k6bWqnEQFYFooLK/F4dhkBz6nvswIoaA9ancZ5h20e0tyV7ifSWLDCUBtpG+1NHRA8HMRH/wg==
tailwindcss@^3:
version "3.2.4"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"
integrity sha512-AhwtHCKMtR71JgeYDaswmZXhPcW9iuI9Sp2LvZPo9upDZ7231ZJ7eA9RaURbhpXGVlrjX4cFNlB4ieTetEb7hQ==
dependencies:
arg "^5.0.2"
chokidar "^3.5.3"
color-name "^1.1.4"
detective "^5.2.1"
didyoumean "^1.2.2"
dlv "^1.1.3"
fast-glob "^3.2.12"
glob-parent "^6.0.2"
is-glob "^4.0.3"
lilconfig "^2.0.6"
micromatch "^4.0.5"
normalize-path "^3.0.0"
object-hash "^3.0.0"
picocolors "^1.0.0"
postcss "^8.4.18"
postcss-import "^14.1.0"
postcss-js "^4.0.0"
postcss-load-config "^3.1.4"
postcss-nested "6.0.0"
postcss-selector-parser "^6.0.10"
postcss-value-parser "^4.2.0"
quick-lru "^5.1.1"
resolve "^1.22.1"
tailwindcss@^3.2.2:
version "3.2.2"
resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.2.tgz#705f78cec8f4de2feb52abdb7a8a056e67f2d736"