Fix model

electron/index.ts

@@ -20,10 +20,10 @@ import autoUpdate from "./commands/auto-update";
 import { FEATURE_FLAGS } from "../common/feature-flags";
 import settings from "electron-settings";
 import pasteImage from "./commands/paste-image";
+import path from "path";
 
 // INITIALIZATION
 log.initialize({ preload: true });
-logit("🚃 App Path: ", app.getAppPath());
 
 app.on("ready", async () => {
   await prepareNext("./renderer");
@@ -33,6 +33,14 @@ app.on("ready", async () => {
       const pathname = decodeURI(request.url.replace("file:///", ""));
       callback(pathname);
     });
+    protocol.registerFileProtocol("public", (request, callback) => {
+      const filePath = decodeURI(request.url.replace("public:///", ""));
+      const asarPath = path.join(app.getAppPath(), "renderer", "out", filePath);
+      console.log("🚀 => asarPath:", asarPath);
+
+      callback(asarPath);
+    });
+    logit("🚃 App Path: ", app.getAppPath());
   });
 
   createMainWindow();

electron/main-window.ts

@@ -1,4 +1,4 @@
-import { BrowserWindow, shell } from "electron";
+import { app, BrowserWindow, shell } from "electron";
 import { getPlatform } from "./utils/get-device-specs";
 import { join } from "path";
 import { ELECTRON_COMMANDS } from "../common/electron-commands";
@@ -11,6 +11,8 @@ let mainWindow: BrowserWindow | undefined;
 
 const createMainWindow = () => {
   console.log("📂 DIRNAME", __dirname);
+  console.log("🚃 App Path: ", app.getAppPath());
+
   mainWindow = new BrowserWindow({
     icon: join(__dirname, "build", "icon.png"),
     width: 1300,

electron/preload.ts

@@ -1,10 +1,9 @@
-import { ipcRenderer, contextBridge, app } from "electron";
+import { ipcRenderer, contextBridge } from "electron";
 import {
   getAppVersion,
   getDeviceSpecs,
   getPlatform,
 } from "./utils/get-device-specs";
-import { FEATURE_FLAGS } from "@common/feature-flags";
 
 // 'ipcRenderer' will be available in index.js with the method 'window.electron'
 contextBridge.exposeInMainWorld("electron", {

mac-dev.json

@@ -0,0 +1,32 @@
+{
+  "productName": "Upscayl",
+  "appId": "org.upscayl.Upscayl",
+  "buildVersion": "25.06.01",
+  "asar": true,
+  "asarUnpack": ["**/node_modules/sharp/**/*", "**/node_modules/@img/**/*"],
+  "extraFiles": [
+    {
+      "from": "resources/${os}/bin",
+      "to": "resources/bin",
+      "filter": ["**/*"]
+    },
+    {
+      "from": "resources/models",
+      "to": "resources/models",
+      "filter": ["**/*"]
+    }
+  ],
+  "mac": {
+    "hardenedRuntime": true,
+    "gatekeeperAssess": false,
+    "mergeASARs": false,
+    "minimumSystemVersion": "12.0.0",
+    "electronLanguages": ["en"],
+    "x64ArchFiles": "*",
+    "type": "distribution",
+    "icon": "build/icon.icns",
+    "category": "public.app-category.photography",
+    "identity": null,
+    "target": ["dir"]
+  }
+}

package.json

@@ -48,11 +48,12 @@
     "dist:deb": "tsc && npm run build && cross-env DEBUG=* electron-builder build -l deb",
     "dist:rpm": "tsc && npm run build && cross-env DEBUG=* electron-builder build -l rpm",
     "dist:zip": "tsc && npm run build && cross-env DEBUG=* electron-builder build -l zip",
-    "dist:mac-zip": "tsc && npm run build && cross-env DEBUG=* electron-builder build -l zip",
+    "dist:mac-zip": "tsc && npm run build && electron-builder build -m --universal",
     "dist:dmg": "tsc && npm run build && electron-builder build -m dmg",
     "dist:msi": "tsc && npm run build && cross-env DEBUG=* electron-builder build -w nsis",
     "dist:pkg": "tsc && npm run build && cross-env DEBUG=* electron-builder build -m pkg",
     "dist:mac": "tsc && npm run build && electron-builder --mac --universal",
+    "dist:mac-dev": "tsc && npm run build && electron-builder --mac --arm64 -c mac-dev.json",
     "dist:mac-arm64": "tsc && npm run build && electron-builder --mac --arm64",
     "dist:mas": "npm run enable-store && tsc && npm run build && electron-builder --mac mas --universal -c mas.json && npm run disable-store",
     "dist:mas-dev": "npm run enable-store && tsc && npm run build && electron-builder --mac mas-dev --universal -c mas-dev.json && npm run disable-store",
@@ -134,6 +135,7 @@
       "entitlements": "resources/entitlements.mac.plist",
       "entitlementsInherit": "resources/entitlements.mac.plist",
       "provisioningProfile": "embedded.provisionprofile",
+      "type": null,
       "target": [
         {
           "target": "dmg",

renderer/components/sidebar/upscayl-tab/select-model-dialog.tsx

@@ -77,12 +77,12 @@ const SelectModelDialog = () => {
                     <div className="relative h-52 w-full overflow-hidden rounded-sm">
                       <div className="flex h-full w-full">
                         <img
-                          src={`/model-comparison/${model.id}/before.webp`}
+                          src={`public:///model-comparison/${model.id}/before.webp`}
                           alt={`Model Before`}
                           className="h-full w-1/2 object-cover"
                         />
                         <img
-                          src={`/model-comparison/${model.id}/after.webp`}
+                          src={`public:///model-comparison/${model.id}/after.webp`}
                           alt={`Model After`}
                           className="h-full w-1/2 object-cover"
                         />
@@ -142,7 +142,7 @@ const SelectModelDialog = () => {
             <div className="flex h-full w-full">
               <div className="relative h-full w-1/2">
                 <img
-                  src={`/model-comparison/${MODELS[zoomedModel]?.id}/before.webp`}
+                  src={`public:///model-comparison/${MODELS[zoomedModel]?.id}/before.webp`}
                   alt={`Zoomed in Image - Before`}
                   className="h-full w-full object-contain"
                 />
@@ -152,7 +152,7 @@ const SelectModelDialog = () => {
               </div>
               <div className="relative h-full w-1/2">
                 <img
-                  src={`/model-comparison/${MODELS[zoomedModel]?.id}/after.webp`}
+                  src={`public:///model-comparison/${MODELS[zoomedModel]?.id}/after.webp`}
                   alt={`Zoomed in Image - After`}
                   className="h-full w-full object-contain"
                 />

renderer/pages/_app.tsx

@@ -13,6 +13,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
       <Head>
         <title>Upscayl</title>
       </Head>
+      <base href="./" />
 
       <Provider>
         <PostHogProviderWrapper>