github/upscayl
1
1
Fork 0
mirror of https://github.com/upscayl/upscayl.git synced 2026-04-03 03:00:13 -04:00
Code Issues Packages Projects Releases Wiki Activity

Fixed progress text and version

Browse Source
This commit is contained in:
Feenix
2023-03-12 13:29:07 +05:30
parent b1b0731925
commit 0d0545dcae
5 changed files with 160 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
renderer/components/Header.tsx
View File

@@ -1,6 +1,6 @@
import React from "react";
export default function Header() {
export default function Header({ version }: { version: string }) {
return (
<a
href="https://github.com/upscayl/upscayl"
@@ -10,7 +10,9 @@ export default function Header() {
<div className="flex items-center gap-3 px-5 py-5">
<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>
<h1 className="text-3xl font-bold">
Upscayl <span className="text-xs">{version}</span>
</h1>
<p className="">AI Image Upscaler</p>
</div>
</div>

10
renderer/components/ProgressBar.tsx
View File

@@ -1,18 +1,20 @@
import React from "react";
import Animated from "../public/loading.svg";
import Image from "next/image";
import Spinner from "./icons/Spinner";
function ProgressBar({ progress, doubleUpscaylCounter }) {
return (
<div className="absolute flex h-full w-full flex-col items-center justify-center bg-black/50 backdrop-blur-lg">
<div className="absolute flex h-full w-full flex-col items-center justify-center bg-base-300/50 backdrop-blur-lg">
<div className="flex flex-col items-center gap-2">
<Image src={Animated} alt="Progress Bar" />
<Spinner />
<p className="font-bold">
{doubleUpscaylCounter > 0
? `${progress}\nPass ${doubleUpscaylCounter}`
: `${progress}`}
</p>
<p className="text-sm font-medium">Doing the Upscayl magic...</p>
<p className="rounded-full bg-base-300 px-2 py-1 text-sm font-medium">
Doing the Upscayl magic...
</p>
</div>
</div>
);

137
renderer/components/icons/Spinner.tsx Normal file
View File

@@ -0,0 +1,137 @@
// React SVG Component
import React from "react";
function Spinner() {
return (
// By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL
<svg
viewBox="0 0 58 58"
fill="#fff"
stroke="#fff"
xmlns="http://www.w3.org/2000/svg"
className="h-16 w-16 rounded-full bg-base-300 p-2">
<g fill="none" fill-rule="evenodd">
<g transform="translate(2 1)" stroke="currentColor" stroke-width="1.5">
<circle
cx="42.601"
cy="11.462"
r="5"
fill-opacity="1"
fill="currentColor">
<animate
attributeName="fill-opacity"
begin="0s"
dur="1.3s"
values="1;0;0;0;0;0;0;0"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle
cx="49.063"
cy="27.063"
r="5"
fill-opacity="0"
fill="currentColor">
<animate
attributeName="fill-opacity"
begin="0s"
dur="1.3s"
values="0;1;0;0;0;0;0;0"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle
cx="42.601"
cy="42.663"
r="5"
fill-opacity="0"
fill="currentColor">
<animate
attributeName="fill-opacity"
begin="0s"
dur="1.3s"
values="0;0;1;0;0;0;0;0"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle
cx="27"
cy="49.125"
r="5"
fill-opacity="0"
fill="currentColor">
<animate
attributeName="fill-opacity"
begin="0s"
dur="1.3s"
values="0;0;0;1;0;0;0;0"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle
cx="11.399"
cy="42.663"
r="5"
fill-opacity="0"
fill="currentColor">
<animate
attributeName="fill-opacity"
begin="0s"
dur="1.3s"
values="0;0;0;0;1;0;0;0"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle
cx="4.938"
cy="27.063"
r="5"
fill-opacity="0"
fill="currentColor">
<animate
attributeName="fill-opacity"
begin="0s"
dur="1.3s"
values="0;0;0;0;0;1;0;0"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle
cx="11.399"
cy="11.462"
r="5"
fill-opacity="0"
fill="currentColor">
<animate
attributeName="fill-opacity"
begin="0s"
dur="1.3s"
values="0;0;0;0;0;0;1;0"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
<circle cx="27" cy="5" r="5" fill-opacity="0" fill="currentColor">
<animate
attributeName="fill-opacity"
begin="0s"
dur="1.3s"
values="0;0;0;0;0;0;0;1"
calcMode="linear"
repeatCount="indefinite"
/>
</circle>
</g>
</g>
</svg>
);
}
export default Spinner;

7
renderer/pages/index.tsx
View File

@@ -388,7 +388,7 @@ const Home = () => {
<div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
<div className="flex h-screen w-128 flex-col rounded-r-3xl bg-base-100">
{/* HEADER */}
<Header />
<Header version={version} />
{/* <div className="flex items-center justify-center gap-2 pb-4 font-medium">
<p>Image</p>
<input
@@ -474,7 +474,10 @@ const Home = () => {
doubleUpscaylCounter={doubleUpscaylCounter}
/>
) : null}
<ProgressBar
progress={progress}
doubleUpscaylCounter={doubleUpscaylCounter}
/>
{/* DEFAULT PANE INFO */}
{((!isVideo &&
!batchMode &&

16
renderer/public/loading.svg
View File

@@ -1,50 +1,50 @@
<!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
<svg width="58" height="58" viewBox="0 0 58 58" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd">
<g transform="translate(2 1)" stroke="#FFF" stroke-width="1.5">
<g transform="translate(2 1)" stroke="currentColor" stroke-width="1.5">
<circle cx="42.601" cy="11.462" r="5" fill-opacity="1" fill="#fff">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="1;0;0;0;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="#fff">
<circle cx="49.063" cy="27.063" r="5" fill-opacity="0" fill="currentColor">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;1;0;0;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="#fff">
<circle cx="42.601" cy="42.663" r="5" fill-opacity="0" fill="currentColor">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;1;0;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="#fff">
<circle cx="27" cy="49.125" r="5" fill-opacity="0" fill="currentColor">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;1;0;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="#fff">
<circle cx="11.399" cy="42.663" r="5" fill-opacity="0" fill="currentColor">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;1;0;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="#fff">
<circle cx="4.938" cy="27.063" r="5" fill-opacity="0" fill="currentColor">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;0;1;0;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="#fff">
<circle cx="11.399" cy="11.462" r="5" fill-opacity="0" fill="currentColor">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;0;0;1;0" calcMode="linear"
repeatCount="indefinite" />
</circle>
<circle cx="27" cy="5" r="5" fill-opacity="0" fill="#fff">
<circle cx="27" cy="5" r="5" fill-opacity="0" fill="currentColor">
<animate attributeName="fill-opacity"
begin="0s" dur="1.3s"
values="0;0;0;0;0;0;0;1" calcMode="linear"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.7 KiB

After

Width:  |  Height:  |  Size: 2.8 KiB