possibly working GUI, compiling missing

frontend/src/app.js

@@ -1,21 +1,53 @@
 const express = require( 'express' );
 let app = express();
-const path = require( 'path' );
-const fs = require( 'fs' );
+const dialog = require( 'electron' ).dialog;
+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 => {
-        response.send( out );
-    } );
+    console.log( 'engines' );
+    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>