Merge remote-tracking branch 'origin/main' into suvojit/add-upscayl-cloud-modal

2024-11-12 01:40:53 +01:00 · 2023-08-30 10:32:31 +05:30 · 2023-08-30 10:32:31 +05:30 · 0f0de851cb
commit 0f0de851cb
parent b6ddab8fa8 73c526d147
16 changed files with 117 additions and 35 deletions
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@ -15,7 +15,7 @@ body:
 - type: textarea
  attributes: 
    label: Paste the logs
-    description: 💥 Paste the logs below - Read [Wiki](https://github.com/upscayl/upscayl/wiki) if you don't know how to
+    description: 💥 Paste the logs below ([Guide](https://github.com/upscayl/upscayl/wiki/Guide#logs))
    value: |
      <details><summary>Logs</summary><pre>
      <!-- 📃 PASTE THE LOG BELOW THIS LINE! -->
--- a/.github/ISSUE_TEMPLATE/doc_issue.yml
+++ b/.github/ISSUE_TEMPLATE/doc_issue.yml
@ -1,5 +1,5 @@
 name: Documentation Issue
-description: Something wrong with the docs, release, etc
+description: "Any issue that's not with the software itself: docs, release notes, etc"
 labels: documentation
 body:
 - type: checkboxes
--- a/README.md
+++ b/README.md
@ -6,7 +6,10 @@

 # v2.5 is out!

+<a href="https://upscayl.org/#download">
  <img src="https://img.shields.io/github/downloads/upscayl/upscayl/total.svg?style=for-the-badge&logo=data:image/png;base64,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&labelColor=ede9fe&color=8e6bf6" width="200px" style="border-radius:50%"/>
+</a>
+
  </br>
  </br>

--- a/electron/index.ts
+++ b/electron/index.ts
@ -78,6 +78,7 @@ app.on("ready", async () => {
      webSecurity: false,
      preload: join(__dirname, "preload.js"),
    },
+    titleBarStyle: getPlatform() === "mac" ? "hiddenInset" : "default",
  });
  const url = isDev
    ? "http://localhost:8000"
@ -159,20 +160,11 @@ app.on("ready", async () => {
  // GET IMAGE QUALITY (NUMBER) TO LOCAL STORAGE
  mainWindow.webContents
    .executeJavaScript('localStorage.getItem("quality");', true)
-    .then((overwriteToggle: string | null) => {
-      if (overwriteToggle !== null) {
-        quality = parseInt(overwriteToggle);
+    .then((lastSavedQuality: string | null) => {
+      if (lastSavedQuality !== null) {
+        quality = parseInt(lastSavedQuality);
      }
    });
-  // GET OVERWRITE SETTINGS FROM LOCAL STORAGE
-  mainWindow.webContents
-    .executeJavaScript('localStorage.getItem("overwrite");', true)
-    .then((lastSavedOverwrite: boolean | null) => {
-      if (lastSavedOverwrite !== null) {
-        overwrite = lastSavedOverwrite;
-      }
-    });
-
  mainWindow.webContents.send(commands.OS, getPlatform());
 });

@ -379,6 +371,7 @@ ipcMain.handle(commands.SELECT_CUSTOM_MODEL_FOLDER, async (event, message) => {
 //------------------------Image Upscayl-----------------------------//
 ipcMain.on(commands.UPSCAYL, async (event, payload) => {
  if (!mainWindow) return;
+  overwrite = payload.overwrite;
  const model = payload.model as string;
  const gpuId = payload.gpuId as string;
  const saveImageAs = payload.saveImageAs as string;
@ -416,8 +409,18 @@ ipcMain.on(commands.UPSCAYL, async (event, payload) => {
    "." +
    saveImageAs;

+  // GET OVERWRITE SETTINGS FROM LOCAL STORAGE
+  mainWindow.webContents
+    .executeJavaScript('localStorage.getItem("overwrite");', true)
+    .then((lastSavedOverwrite: boolean | null) => {
+      if (lastSavedOverwrite !== null) {
+        console.log("Overwrite: ", lastSavedOverwrite);
+        overwrite = lastSavedOverwrite;
+      }
+    });
+
  // UPSCALE
-  if (fs.existsSync(outFile) && !overwrite) {
+  if (fs.existsSync(outFile) && overwrite === false) {
    // If already upscayled, just output that file
    logit("✅ Already upscayled at: ", outFile);
    mainWindow.webContents.send(commands.UPSCAYL_DONE, outFile);
--- a/electron/preload.ts
+++ b/electron/preload.ts
@ -1,4 +1,5 @@
 import { ipcRenderer, contextBridge } from "electron";
+import getPlatform from "./getPlatform";

 // 'ipcRenderer' will be available in index.js with the method 'window.electron'
 contextBridge.exposeInMainWorld("electron", {
@ -9,4 +10,5 @@ contextBridge.exposeInMainWorld("electron", {
    }),
  invoke: (command: string, payload: any) =>
    ipcRenderer.invoke(command, payload),
+  platform: getPlatform(),
 });
--- a/renderer/components/Header.tsx
+++ b/renderer/components/Header.tsx
@ -5,7 +5,7 @@ export default function Header({ version }: { version: string }) {
    <a
      href="https://github.com/upscayl/upscayl"
      target="_blank"
-      className="outline-none focus-visible:ring-2"
+      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" />
--- a/renderer/components/settings-tab/ImageFormatSelect.tsx
+++ b/renderer/components/settings-tab/ImageFormatSelect.tsx
@ -42,14 +42,14 @@ export function ImageFormatSelect({
            onClick={() => setExportType("jpg")}>
            JPG
          </button>
-          {/* WEBP */}
+          {/* WEBP
          <button
            className={`btn-primary btn ${
              saveImageAs === "webp" && "btn-accent"
            }`}
            onClick={() => setExportType("webp")}>
            WEBP
-          </button>
+          </button> */}
        </div>
      </div>
    </div>
--- a/renderer/components/settings-tab/QualityInput.tsx
+++ b/renderer/components/settings-tab/QualityInput.tsx
@ -11,9 +11,12 @@ export function QualityInput({
 }: QualityInputProps) {
  return (
    <div className="flex flex-col gap-2">
-      <p className="text-sm font-medium uppercase">
-        Image Compression ({quality}%)
-      </p>
+      <div className="flex gap-1 text-sm font-medium uppercase">
+        <p className="shrink-0">Image Compression ({quality}%)</p>
+        <p className="badge-primary badge text-[10px] font-medium">
+          EXPERIMENTAL
+        </p>
+      </div>
      <input
        type="range"
        placeholder="Type here"
--- a/renderer/components/settings-tab/ThemeSelect.tsx
+++ b/renderer/components/settings-tab/ThemeSelect.tsx
@ -1,6 +1,7 @@
 import React from "react";
 export function ThemeSelect() {
  const availableThemes = [
+    { label: "upscayl", value: "upscayl" },
    { label: "light", value: "light" },
    { label: "dark", value: "dark" },
    { label: "cupcake", value: "cupcake" },
--- a/renderer/components/settings-tab/ToggleOverwrite.tsx
+++ b/renderer/components/settings-tab/ToggleOverwrite.tsx
@ -10,22 +10,28 @@ const ToggleOverwrite = ({ overwrite, setOverwrite }: ToggleOverwriteProps) => {
    if (!localStorage.getItem("overwrite")) {
      localStorage.setItem("overwrite", JSON.stringify(overwrite));
    } else {
-      setOverwrite(localStorage.getItem("overwrite"));
+      const currentlySavedOverwrite = localStorage.getItem("overwrite");
+      if (currentlySavedOverwrite) {
+        setOverwrite(JSON.parse(currentlySavedOverwrite));
+      }
    }
  }, []);
+
  return (
    <div className="flex flex-col gap-2">
      <p className="text-sm font-medium">OVERWRITE PREVIOUS UPSCALE</p>
      <input
        type="checkbox"
-        className="toggle-primary toggle"
+        className="toggle"
        checked={overwrite}
        onClick={() => {
-          setOverwrite((oldValue) => {
-            if (oldValue === true) {
+          setOverwrite((oldValue: boolean) => {
+            if (oldValue) {
              localStorage.removeItem("overwrite");
+              return false;
+            } else {
+              return true;
            }
-            return !oldValue;
          });
          localStorage.setItem("overwrite", JSON.stringify(!overwrite));
        }}
--- a/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx
+++ b/renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx
@ -130,7 +130,8 @@ function LeftPaneImageSteps({
  };

  return (
-    <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden">
+    <div
+      className={`animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden`}>
      {/* BATCH OPTION */}
      <div className="flex flex-row items-center gap-2">
        <input
@ -139,7 +140,7 @@ function LeftPaneImageSteps({
          defaultChecked={batchMode}
          onClick={() => setBatchMode((oldValue) => !oldValue)}></input>
        <p
-          className="mr-1 inline-block  cursor-help text-sm"
+          className="mr-1 inline-block cursor-help text-sm"
          data-tooltip-id="tooltip"
          data-tooltip-content="This will let you Upscayl all files in a folder at once">
          Batch Upscayl
--- a/renderer/components/upscayl-tab/view/RightPaneInfo.tsx
+++ b/renderer/components/upscayl-tab/view/RightPaneInfo.tsx
@ -2,18 +2,22 @@ import React from "react";

 function RightPaneInfo({ version, batchMode }) {
  return (
-    <>
-      <p className="p-5 pb-1 text-lg font-semibold">
+    <div className="flex flex-col items-center bg-base-200 p-4 rounded-btn">
+      <p className="pb-1 text-lg font-semibold">
        Select {batchMode ? "a Folder" : "an Image"} to Upscayl
      </p>
-      {batchMode && (
-        <p className="w-full pb-5 text-center md:w-96">
+      {batchMode ? (
+        <p className="w-full pb-5 text-center md:w-96 text-primary-content/80">
          Make sure that the folder doesn't contain anything except PNG, JPG,
          JPEG & WEBP images.
        </p>
+      ) : (
+        <p className="w-full pb-5 text-center md:w-96 text-primary-content/80">
+          Select or drag and drop a PNG, JPG, JPEG or WEBP image.
+        </p>
      )}
-      <p className="text-sm">Upscayl v{version}</p>
-    </>
+      <p className="text-sm badge badge-primary">Upscayl v{version}</p>
+    </div>
  );
 }

--- a/renderer/pages/index.tsx
+++ b/renderer/pages/index.tsx
@ -410,6 +410,7 @@ const Home = () => {
          gpuId: gpuId.length === 0 ? null : gpuId,
          saveImageAs,
          scale,
+          overwrite,
        });
        logit("🏁 UPSCAYL");
      }
@ -438,10 +439,27 @@ const Home = () => {

  const allowedFileTypes = ["png", "jpg", "jpeg", "webp"];

+  if (typeof window === "undefined") {
+    return (
+      <img
+        src="/icon.png"
+        alt="Upscayl icon"
+        className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-36 animate-pulse"
+      />
+    );
+  }
+
  return (
    <div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
+<<<<<<< HEAD
      <div className="flex h-screen w-128 flex-col rounded-r-3xl bg-base-100">
        <UpscaylCloudModal show={showCloudModal} setShow={setShowCloudModal} />
+=======
+      <div className={`flex h-screen w-128 flex-col bg-base-100`}>
+        {window.electron.platform === "mac" && (
+          <div className="pt-8 mac-titlebar"></div>
+        )}
+>>>>>>> origin/main
        {/* HEADER */}
        <div className="flex flex-row items-center">
          <Header version={version} />
@ -498,6 +516,10 @@ const Home = () => {
        onDragEnter={(e) => handleDragEnter(e)}
        onDragLeave={(e) => handleDragLeave(e)}
        onPaste={(e) => handlePaste(e)}>
+        {window.electron.platform === "mac" && (
+          <div className="absolute top-0 w-full h-8 mac-titlebar"></div>
+        )}
+
        {progress.length > 0 &&
        upscaledImagePath.length === 0 &&
        upscaledBatchFolderPath.length === 0 ? (
@ -576,7 +598,7 @@ const Home = () => {
              All done!
            </p>
            <button
-              className="btn btn-primary bg-gradient-blue rounded-lg p-3 font-medium text-white/90 transition-colors"
+              className="btn btn-primary bg-gradient-blue rounded-btn p-3 font-medium text-white/90 transition-colors"
              onClick={openFolderHandler}>
              Open Upscayled Folder
            </button>
--- a/renderer/renderer.d.ts
+++ b/renderer/renderer.d.ts
@ -4,6 +4,7 @@ export interface IElectronAPI {
  on: (command, func?) => IpcRenderer;
  send: (command, func?) => IpcRenderer;
  invoke: (command, func?) => any;
+  platform: "mac" | "win" | "linux";
 }

 declare global {
--- a/renderer/styles/globals.css
+++ b/renderer/styles/globals.css
@ -149,6 +149,22 @@
  animation: animate-step-in 0.6s cubic-bezier(0.07, 0.43, 0.02, 1);
 }

+[data-theme="upscayl"] .btn {
+  @apply ring-1 ring-slate-500 font-medium normal-case !min-h-min h-10 py-2 px-3;
+}
+
+[data-theme="upscayl"] input[type="range"] {
+  @apply rounded-full;
+}
+
+[data-theme="upscayl"] .react-select-container .react-select__control {
+  @apply rounded-btn h-10 ring-1 ring-slate-500 cursor-pointer !border-0 !border-none !border-transparent bg-primary shadow-none;
+}
+
+.mac-titlebar {
+  -webkit-app-region: drag;
+}
+
@keyframes animate-step-in {
  0% {
    opacity: 0;
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -20,6 +20,26 @@ module.exports = {
  plugins: [require("daisyui"), require("tailwind-scrollbar")],
  daisyui: {
    themes: [
+      {
+        upscayl: {
+          primary: "#334155",
+          secondary: "#4f46e5",
+          accent: "#6d28d9",
+          neutral: "#475569",
+          "base-100": "#1e293b",
+          "base-200": "#0f172a",
+          "base-300": "#020617",
+          "--rounded-btn": "2rem", // border radius rounded-btn utility class, used in buttons and similar element
+          "--rounded-badge": "2rem", // border radius rounded-badge utility class, used in badges and similar
+          "--animation-btn": "0.5s", // duration of animation when you click on button
+          "--animation-input": "0.5s", // duration of animation for inputs like checkbox, toggle, radio, etc
+          "--btn-text-case": "uppercase", // set default text transform for buttons
+          "--btn-focus-scale": "0.95", // scale transform of button when you focus on it
+          "--border-btn": "1px", // border width of buttons
+          "--tab-border": "1px", // border width of tabs
+          "--tab-radius": "0.5rem", // border radius of tabs
+        },
+      },
      "light",
      "dark",
      "cupcake",