Cool_Tools/upscayl
1
0
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2025-02-17 11:18:36 +01:00
Code Releases Wiki Activity

Added select

Browse Source
This commit is contained in:
Feenix 2022-12-08 08:55:26 +05:30
parent ea16ae4c0a
commit 875519a8c6
7 changed files with 123 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
package.json
View File

@ -157,7 +157,8 @@
"react-select": "^5.6.0",
"react-tooltip": "^4.5.0",
"tailwind-scrollbar": "^2.0.1",
"upscayl-ffmpeg": "^5.1.0"
"theme-change": "^2.2.0",
"upscayl-ffmpeg": "^5.1.1"
},
"volta": {
"node": "16.17.0"

9
renderer/components/Header.tsx
View File

@ -6,14 +6,9 @@ export default function Header() {
href="https://github.com/upscayl/upscayl"
target="_blank"
className="outline-none focus-visible:ring-2"
>
data-tip="Star us on GitHub 😁">
<div className="flex items-center gap-3 px-5 py-5">
<img
src="icon.png"
className="inline-block w-14"
alt="Upscayl Logo"
data-tip="Star us on GitHub 😁"
/>
<img src="icon.png" className="inline-block w-14" alt="Upscayl Logo" />
<div className="flex flex-col justify-center">
<h1 className="text-3xl font-bold">Upscayl</h1>
<p className="">AI Image Upscaler</p>

66
renderer/components/LeftPaneImageSteps.tsx
View File

@ -1,6 +1,7 @@
import React from "react";
import React, { useEffect } from "react";
import Select from "react-select";
import ReactTooltip from "react-tooltip";
import { themeChange } from "theme-change";
interface IProps {
progress: string;
@ -39,6 +40,42 @@ function LeftPaneImageSteps({
isVideo,
setIsVideo,
}: IProps) {
useEffect(() => {
themeChange(false);
}, []);
const availableThemes = [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
];
const handleBatchMode = () => {
setBatchMode((oldValue) => !oldValue);
};
@ -161,6 +198,33 @@ function LeftPaneImageSteps({
disabled={progress.length > 0}>
{progress.length > 0 ? "Upscayling⏳" : "Upscayl"}
</button>
<div className="rounded-btn collapse mt-5">
<input type="checkbox" className="peer" />
<div className="collapse-title bg-neutral text-neutral-content peer-checked:bg-primary peer-checked:text-primary-content">
Advanced Options
</div>
<div className="collapse-content flex flex-col gap-4 bg-neutral text-neutral-content peer-checked:bg-base-300 peer-checked:py-4 peer-checked:text-base-content">
<div className="flex flex-col gap-2">
<p>Save Image As:</p>
<div className="flex gap-2">
<button className="btn-primary btn">PNG</button>
<button className="btn-primary btn">JPG</button>
<button className="btn-primary btn">WEBP</button>
</div>
</div>
<div className="flex flex-col gap-2">
<p>Upscayl Theme:</p>
<select data-choose-theme className="select-primary select">
<option value="dark">Default</option>
{availableThemes.map((theme) => {
return (
<option value={theme} key={theme}>{theme.toLocaleUpperCase()}</option>
);
})}
</select>
</div>
</div>
</div>
</div>
<ReactTooltip class="max-w-sm" />

8
renderer/pages/_app.tsx
View File

@ -1,15 +1,17 @@
import "../styles/globals.css";
import Head from "next/head";
import { AppProps } from "next/app";
import { useEffect } from "react";
import { themeChange } from "theme-change";
const MyApp = ({ Component, pageProps }: AppProps) => {
return (
<div data-theme="dark">
<>
<Head>
<title>Upscayl</title>
</Head>
<Component {...pageProps} />
</div>
<Component {...pageProps} data-theme="dark" />
</>
);
};

4
renderer/pages/index.tsx
View File

@ -340,7 +340,7 @@ const Home = () => {
)}
{/* HEADER */}
<Header />
<div className="flex items-center justify-center gap-2 pb-4 font-medium">
{/* <div className="flex items-center justify-center gap-2 pb-4 font-medium">
<p>Image</p>
<input
type="radio"
@ -363,7 +363,7 @@ const Home = () => {
}}
/>
<p>Video</p>
</div>
</div> */}
{/* LEFT PANE */}
{isVideo ? (
<LeftPaneVideoSteps

38
tailwind.config.js
View File

@ -10,5 +10,43 @@ module.exports = {
},
},
},
safelist: [
{
pattern: /data-theme$/,
},
],
plugins: [require("daisyui"), require("tailwind-scrollbar")],
daisyui: {
themes: [
"light",
"dark",
"cupcake",
"bumblebee",
"emerald",
"corporate",
"synthwave",
"retro",
"cyberpunk",
"valentine",
"halloween",
"garden",
"forest",
"aqua",
"lofi",
"pastel",
"fantasy",
"wireframe",
"black",
"luxury",
"dracula",
"cmyk",
"autumn",
"business",
"acid",
"lemonade",
"night",
"coffee",
"winter",
],
},
};

13
yarn.lock
View File

@ -2794,6 +2794,11 @@ temp-file@^3.4.0:
async-exit-hook "^2.0.1"
fs-extra "^10.0.0"
theme-change@^2.2.0:
version "2.2.0"
resolved "https://registry.yarnpkg.com/theme-change/-/theme-change-2.2.0.tgz#dcc48ffe6b806258bc5f1caf8220527589e354c0"
integrity sha512-vvgZEEfmH3yZGq2bWHyzs2AOG1SRfNnCvWbEnPzGpdvvCmAWtOsEdg4H6k/OMapegG+LEQvQ76tQoN9B+FT7rg==
tmp-promise@^3.0.2:
version "3.0.3"
resolved "https://registry.npmjs.org/tmp-promise/-/tmp-promise-3.0.3.tgz"
@ -2877,10 +2882,10 @@ update-browserslist-db@^1.0.9:
escalade "^3.1.1"
picocolors "^1.0.0"
upscayl-ffmpeg@^5.1.0:
version "5.1.0"
resolved "https://registry.yarnpkg.com/upscayl-ffmpeg/-/upscayl-ffmpeg-5.1.0.tgz#6fe3355338bb8304bf52bcf9703124d2c07b97a9"
integrity sha512-l3klTtO7h6rxC8SwMHQRBmmQoxNhz+dAyWjTlNOkYN1imLL1PXIN/Tqm1wM15M1x7Ax8H9SvNyQy52hhzaY2Yg==
upscayl-ffmpeg@^5.1.1:
version "5.1.1"
resolved "https://registry.yarnpkg.com/upscayl-ffmpeg/-/upscayl-ffmpeg-5.1.1.tgz#0e89250aed1037b206a1bed59d96fb055e97c56a"
integrity sha512-Rmc8S56weUs6N92/PAhDvdwbbUhNhQs4BazTbifeFadsYFrsAOlYZep/JCUdsvEzz7sNrUveOjxcRBnYYWjENA==
uri-js@^4.2.2:
version "4.4.1"