possibly working GUI, compiling missing

README.md

@@ -70,15 +70,15 @@ If you have any suggestions or features you'd like to have implemented, you may
 
 
 # Roadmap
-V1.1.0: 
+V2.0.0: 
 - Migrate to Electron app
-- Make python app CLI only -- ✅
 - Package Windows & Linux Version
+- Make python app CLI only -- ✅
 - Refactor backend to add plugin support -- ✅
+
+V2.1.0:
 - Add more scaling engines 
 - Expand Wiki to feature documentation on how to create a plugin (and maybe add a project website)
-
-V1.2.0:
 - Show progress of scaling
 
 # Issues
@@ -86,6 +86,7 @@ If you encounter any problems with this app, please don't hesitate to open an is
 
 ## Known issues
 - Electron App is not available yet
+- Electron App shows that it is out of date if running in the development version
 - GTK version only runs on Linux
 
 # FAQ

frontend/package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "child_process": "^1.0.2",
         "core-js": "^3.8.3",
+        "cors": "^2.8.5",
         "electron": "^24.3.1",
         "vue": "^3.2.13",
         "vue-router": "^4.0.3"
@@ -5686,6 +5687,18 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
+    "node_modules/cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "dependencies": {
+        "object-assign": "^4",
+        "vary": "^1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -10682,7 +10695,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14018,7 +14030,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
       "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
-      "dev": true,
       "engines": {
         "node": ">= 0.8"
       }
@@ -20080,6 +20091,15 @@
       "integrity": "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==",
       "dev": true
     },
+    "cors": {
+      "version": "2.8.5",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.5.tgz",
+      "integrity": "sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==",
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
     "cosmiconfig": {
       "version": "7.1.0",
       "resolved": "https://registry.npmmirror.com/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -24046,8 +24066,7 @@
     "object-assign": {
       "version": "4.1.1",
       "resolved": "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
-      "dev": true
     },
     "object-inspect": {
       "version": "1.12.3",
@@ -26686,8 +26705,7 @@
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz",
-      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==",
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
-      "dev": true
     },
     "verror": {
       "version": "1.10.1",

frontend/package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "child_process": "^1.0.2",
     "core-js": "^3.8.3",
+    "cors": "^2.8.5",
     "electron": "^24.3.1",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"

frontend/src/app.js

@@ -1,21 +1,53 @@
 const express = require( 'express' );
 let app = express();
-const path = require( 'path' );
+const dialog = require( 'electron' ).dialog;
-const fs = require( 'fs' );
+const cors = require( 'cors' );
 const bodyParser = require( 'body-parser' );
 const exec = require( 'child_process' ).exec;
+const upscaling = require( './upscalingHandler.js' );
+const upscalingHandler = new upscaling();
 
 app.use( bodyParser.urlencoded( { extended: false } ) );
 app.use( bodyParser.json() );
+app.use( cors() );
 
-function execute(command, callback){
-    exec(command, function(error, stdout, stderr){ callback(stdout); });
-};
 
 app.get( '/api/getEngines', ( request, response ) => {
-    execute( 'ImageVideoUpscaler-cli -p', out => {
+    console.log( 'engines' );
-        response.send( out );
+    response.send( { 'data': 'not finished yet' } );
-    } );
+} );
+
+app.get( '/api/getInputFile', ( request, response ) => {
+    response.send( { 'data': dialog.showOpenDialogSync( { 
+        properties: [ 'openFile' ], 
+        title: 'Select an input file to upscale',
+        filters: [
+            { name: 'Images (.jpg, .png)', extensions: ['jpg', 'png'] },
+            { name: 'Movies (.mkv, .mp4)', extensions: ['mkv', 'mp4'] },
+            { name: 'All Files', extensions: ['*'] }
+        ]
+    } ) } );
+} );
+
+app.get( '/api/getOutputFile', ( request, response ) => {
+    response.send( { 'data': dialog.showSaveDialogSync( { 
+        properties: [ 'promptToCreate' ], 
+        title: 'Select an output file',
+        filters: [
+            { name: 'Images (.jpg, .png)', extensions: ['jpg', 'png'] },
+            { name: 'Movies (.mkv, .mp4)', extensions: ['mkv', 'mp4'] },
+            { name: 'All Files', extensions: ['*'] }
+        ] 
+    } ) } );
+} );
+
+app.post( '/api/startUpscaling', ( request, response ) => {
+    if ( upscalingHandler.verifyDataIntegrity( request.body ) ) {
+        response.send( { 'data': 'upscaling' } );
+        upscalingHandler.upscale( request.body );
+    } else {
+        response.send( { 'data': 'dataIncorrect' } );
+    }
 } );
 
 app.listen( 8081 );

frontend/src/upscalingHandler.js

@@ -0,0 +1,54 @@
+/*
+*				ImageVideoUpscaler - upscalingHandler.js
+*
+*	Created by Janis Hutz 06/03/2023, Licensed under the GPL V3 License
+*			https://janishutz.com, development@janishutz.com
+*
+*
+*/
+
+const exec = require( 'child_process' ).exec;
+const process = require( 'process' );
+
+function execute(command, callback){
+    exec(command, function(error, stdout, stderr){ callback(stdout); });
+};
+
+class UpscalingHandler {
+    constructor () {
+        this.os = process.platform
+    }
+
+    upscale( options ) {
+        // required options: engine, algorithm, scale, sharpening, InputFile & OutputFile
+        // Options is an object!
+
+        let baseCommand = '';
+        // Create cli command to upscale
+        if ( this.os === 'linux' ) {
+            baseCommand = './imagevideoupscaler -i ';
+        } else if ( this.os === 'win32' ) {
+            baseCommand = 'imagevideoupscaler -i ';
+        }
+
+        baseCommand += options.InputFile + ' -o ' + options.OutputFile
+
+        // add additional options
+        baseCommand += ' -s ' + options.scale + ' -S ' + options.sharpening
+        baseCommand += ' -E ' + options.engine + ' -M ' + options.algorithm
+
+        execute( baseCommand, out => {
+            console.log( out );
+        } );
+    }
+
+    verifyDataIntegrity ( data ) {
+        if ( data[ 'InputFile' ] && data[ 'OutputFile' ] && data[ 'engine' ] && data[ 'algorithm' ] && 1 < data[ 'scale' ] <= 4 && 0 <= data[ 'sharpening' ] <= 1 ) {
+            return true;
+        } else {
+            return false;
+        };
+    }
+}
+
+module.exports = UpscalingHandler;

frontend/src/views/AboutView.vue

@@ -3,14 +3,8 @@
         <img src="@/assets/logo.png">
         <h1>About ImageVideoUpscaler</h1>
         <p>ImageVideoUpscaler is an application that allows you to upscale your videos and / or images. It uses an Electron GUI (Graphical User Interface) and a Python CLI (Command Line Interface).</p>
-        <h3>Contributors</h3>
-        <ul>
-            <li>Janis Hutz (simplePCBuilding): Maintainer, CLI & GUI development, Packaging</li>
-            <li>ThatPlasma: App name, Logo, testing, Windows installer</li>
-        </ul>
-        <br><br>
         <div class="version-info">
-            <h3>You are currently running version {{ appVersion }}. {{ versionNotice[ isUpToDate ] }}</h3>
+            <h3>You are currently running version {{ appVersion }}. {{ versionNotice[ isUpToDate ] }}.</h3>
         </div>
     </div>
 </template>
@@ -20,7 +14,7 @@ export default {
     data() {
         return {
             versionNotice: { true: '==> up to date', false: '==> New version available' },
-            appVersion: 'V1.1.0',
+            appVersion: 'V2.0.0',
             latestVersion: '',
             isUpToDate: true,
         }

frontend/src/views/HomeView.vue

@@ -1,11 +1,65 @@
 <template>
     <div class="home">
         <h1>ImageVideoUpscaler</h1>
+
+        <label for="algorithm">Upscaler engine</label><br>
+        <select name="engine" id="engine" v-model="upscaleSettings.engine">
+            <option v-for="engine in engines" :key="engine.id" :value="engine.id">{{ engine.displayName }}</option>
+        </select><br>
+
+        <label for="algorithm">Upscaling algorithm</label><br>
+        <select name="algorithm" id="algorithm" v-model="upscaleSettings.algorithm">
+            <option v-for="engine in engines[ upscaleSettings.engine ][ 'modes' ]" :key="engine.id" :value="engine.id">{{ engine.displayName }}</option>
+        </select><br>
+
+        <label for="scale" v-if="engines[ upscaleSettings.engine ][ 'supports' ].includes( 'upscaling' )">Scale factor</label><br>
+        <input type="number" name="scale" id="scale" v-model="upscaleSettings.scale" min="2" max="4" onkeydown="return false">x<br>
+
+        <label for="sharpening" v-if="engines[ upscaleSettings.engine ][ 'supports' ].includes( 'sharpening' )">Sharpening factor</label><br>
+        <input type="number" step="0.01" name="scale" id="scale" v-model="upscaleSettings.sharpening" min="0" max="1"><br>
+
+        <button @click="runCommand( 'InputFile' )">Input file</button><br>
+        <button @click="runCommand( 'OutputFile' )">Output file</button><br>
+        <button @click="start()">Start upscaling</button>
     </div>
 </template>
 
 <script>
 export default {
     name: 'HomeView',
+    data() {
+        return {
+            upscaleSettings: { 'engine': 'ffc', 'algorithm': 'fsr', 'scale': 2, 'sharpening': 0, 'InputFile': '', 'OutputFile': '' },
+            engines: { 'ffc':{ 'displayName': 'FidelityFX CLI', 'id': 'ffc', 'modes': { 'fsr': { 'displayName': 'FidelityFX Super Resolution', 'id': 'fsr' } }, 'supports': [ 'upscaling', 'sharpening' ] }, 'ss':{ 'displayName': 'REAL-ESGRAN', 'id': 'ss' } },
+        }
+    },
+    methods: {
+        runCommand ( command ) {
+            fetch( 'http://127.0.0.1:8081/api/get' + command ).then( res => {
+                res.json().then( data => {
+                    this.upscaleSettings[ command ] = data[ 'data' ];
+                } ).catch( error => {
+                    console.log( error );
+                } );
+            } );
+        },
+        start() {
+            let fetchOptions = {
+                method: 'post',
+                body: JSON.stringify( this.upscaleSettings ),
+                headers: {
+                    'Content-Type': 'application/json',
+                    'charset': 'utf-8'
+                },
+            }
+            fetch( 'http://127.0.0.1:8081/api/startUpscaling', fetchOptions ).then( res => {
+                res.json().then( data => {
+                    console.log( data );
+                } ).catch( error => {
+                    console.log( error );
+                } )
+            } );
+        }
+    }
 }
 </script>

frontend/src/views/SettingsView.vue

@@ -16,11 +16,17 @@ export default {
     methods: {
         run() {
             fetch( 'http://127.0.0.1:8081/api/getEngines' ).then( res => {
+                console.log( res );
                 res.json().then( data => {
                     this.engines = data.body;
                 } );
+            } ).catch( error => {
+                console.log( error );
             } );
         }
+    },
+    created() {
+        this.run();
     }
 }
 </script>