add electron forge + fixes

frontend/forge.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  packagerConfig: {},
+  rebuildConfig: {},
+  makers: [
+    {
+      name: '@electron-forge/maker-squirrel',
+      config: {},
+    },
+    {
+      name: '@electron-forge/maker-zip',
+      platforms: ['darwin'],
+    },
+    {
+      name: '@electron-forge/maker-deb',
+      config: {},
+    },
+    {
+      name: '@electron-forge/maker-rpm',
+      config: {},
+    },
+  ],
+};

frontend/package.json

@@ -9,24 +9,33 @@
     "electron:build": "vue-cli-service electron:build",
     "electron:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
-    "postuninstall": "electron-builder install-app-deps"
+    "postuninstall": "electron-builder install-app-deps",
+    "start": "electron-forge start",
+    "package": "electron-forge package",
+    "make": "electron-forge make"
   },
   "main": "background.js",
   "dependencies": {
     "child_process": "^1.0.2",
     "core-js": "^3.8.3",
     "cors": "^2.8.5",
-    "electron": "^24.3.1",
+    "electron-squirrel-startup": "^1.0.0",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.16",
     "@babel/eslint-parser": "^7.12.16",
+    "@electron-forge/cli": "^6.1.1",
+    "@electron-forge/maker-deb": "^6.1.1",
+    "@electron-forge/maker-rpm": "^6.1.1",
+    "@electron-forge/maker-squirrel": "^6.1.1",
+    "@electron-forge/maker-zip": "^6.1.1",
     "@vue/cli-plugin-babel": "~5.0.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
     "@vue/cli-plugin-router": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "electron": "^24.4.1",
     "electron-devtools-installer": "^3.1.0",
     "eslint": "^7.32.0",
     "eslint-plugin-vue": "^8.0.3",

frontend/src/App.vue

@@ -50,6 +50,7 @@ export default {
 <style>
 :root, :root.light {
     --background-color: rgb(224, 222, 222);
+    --dialog-color: rgb(243, 241, 241);
     --foreground-color: #2c3e50;
     --highlight-color: rgb(221, 0, 0);
 }
@@ -57,6 +58,7 @@ export default {
 :root.dark {
     --background-color: rgb(34, 34, 34);
     --foreground-color: white;
+    --dialog-color: rgb(51, 51, 51);
 }
 
 body, html {

frontend/src/app.js

@@ -42,11 +42,12 @@ app.get( '/api/getOutputFile', ( request, response ) => {
 } );
 
 app.post( '/api/startUpscaling', ( request, response ) => {
-    if ( upscalingHandler.verifyDataIntegrity( request.body ) ) {
+    let checks = upscalingHandler.verifyDataIntegrity( request.body );
-        response.send( { 'data': 'upscaling' } );
+    if ( checks[ 0 ] ) {
+        response.send( { 'data': checks[ 1 ] } );
         upscalingHandler.upscale( request.body );
     } else {
-        response.send( { 'data': 'dataIncorrect' } );
+        response.send( { 'data': checks[ 1 ] } );
     }
 } );
 

frontend/src/upscalingHandler.js

@@ -9,6 +9,7 @@
 
 const exec = require( 'child_process' ).exec;
 const process = require( 'process' );
+const Notification = require( 'electron' ).Notification;
 
 function execute(command, callback){
     exec(command, function(error, stdout, stderr){ callback(stdout); });
@@ -39,14 +40,19 @@ class UpscalingHandler {
 
         execute( baseCommand, out => {
             console.log( out );
+            new Notification( { title: 'ImageVideoUpscaler - Job complete', body: 'Your file has been processed successfully' } )
         } );
     }
 
     verifyDataIntegrity ( data ) {
         if ( data[ 'InputFile' ] && data[ 'OutputFile' ] && data[ 'engine' ] && data[ 'algorithm' ] && 1 < data[ 'scale' ] <= 4 && 0 <= data[ 'sharpening' ] <= 1 ) {
-            return true;
+            if ( data[ 'InputFile' ][ 0 ].substring( data[ 'InputFile' ].length - 4 ) == data[ 'OutputFile' ][ 0 ].substring( data[ 'OutputFile' ].length - 4 ) ) {
+                return [ true, 'upscaling' ];
+            } else { 
+                return [ false, 'differentFileExtensions' ]; 
+            }
         } else {
-            return false;
+            return [ false, 'dataMissing' ];
         };
     }
 }

frontend/src/views/HomeView.vue

@@ -21,6 +21,36 @@
         <button @click="runCommand( 'InputFile' )">Input file</button><br>
         <button @click="runCommand( 'OutputFile' )">Output file</button><br>
         <button @click="start()">Start upscaling</button>
+
+        <dialog id="processing">
+            <div class="dialog-container">
+                Your file is being processed. You will be notified when the upscaling process has finished. A future version of this app will show progress here.
+                <form method="dialog">
+                    <button>OK</button>
+                </form>
+            </div>
+        </dialog>
+
+        <dialog id="wrong">
+            <div class="dialog-container">
+                Some entries are missing. Please ensure that you have specified an input and output file!
+                <form method="dialog">
+                    <button>OK</button>
+                </form>
+            </div>
+        </dialog>
+
+        <dialog id="fileExtension">
+            <div class="dialog-container">
+                File extension of input and output file don't match! Please ensure that they are the same.
+                Click the button below to fix it.
+                <button @click="fixFileExtension();">Fix</button>
+                <p v-if="fixed">Fixed!</p>
+                <form method="dialog">
+                    <button @click="this.fixed = false;">OK</button>
+                </form>
+            </div>
+        </dialog>
     </div>
 </template>
 
@@ -29,8 +59,9 @@ export default {
     name: 'HomeView',
     data() {
         return {
-            upscaleSettings: { 'engine': 'ffc', 'algorithm': 'fsr', 'scale': 2, 'sharpening': 0, 'InputFile': '', 'OutputFile': '' },
+            upscaleSettings: { 'engine': 'ffc', 'algorithm': 'fsr', 'scale': 2, 'sharpening': 0, 'InputFile': [ '/home/janis/projects/myevent/assets/logo.png' ], 'OutputFile': [ '/home/janis/projects/myevent/assets/logo.jpg' ] },
             engines: { 'ffc':{ 'displayName': 'FidelityFX CLI', 'id': 'ffc', 'modes': { 'fsr': { 'displayName': 'FidelityFX Super Resolution', 'id': 'fsr' } }, 'supports': [ 'upscaling', 'sharpening' ] }, 'ss':{ 'displayName': 'REAL-ESGRAN', 'id': 'ss' } },
+            fixed: false,
         }
     },
     methods: {
@@ -54,12 +85,44 @@ export default {
             }
             fetch( 'http://127.0.0.1:8081/api/startUpscaling', fetchOptions ).then( res => {
                 res.json().then( data => {
-                    console.log( data );
+                    console.log( data.data );
+                    if ( data.data == 'upscaling' ) {
+                        document.getElementById( 'processing' ).showModal();
+                    } else if ( data.data == 'dataMissing' ) {
+                        document.getElementById( 'wrong' ).showModal();
+                    } else {
+                        document.getElementById( 'fileExtension' ).showModal();
+                    }
                 } ).catch( error => {
                     console.log( error );
                 } )
             } );
+        },
+        fixFileExtension () {
+            let fileExtension = this.upscaleSettings.InputFile[ 0 ].substring( this.upscaleSettings.InputFile[ 0 ].length - 4 );
+            this.upscaleSettings.OutputFile[ 0 ] = this.upscaleSettings.OutputFile[ 0 ].slice( 0, this.upscaleSettings.OutputFile[ 0 ].length - 4 ) + fileExtension;
+            this.fixed = true;
         }
     }
 }
 </script>
+
+<style scoped>
+    dialog {
+        border-radius: 10px;
+        height: 30vh;
+        width: 30vw;
+        background-color: var( --background-color );
+        border-style: none;
+        color: var( --primary-color );
+    }
+
+    .dialog-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+</style>