add socket.io

frontend/src/app.js

@@ -6,11 +6,24 @@ const bodyParser = require( 'body-parser' );
 const exec = require( 'child_process' ).exec;
 const upscaling = require( './upscalingHandler.js' );
 const upscalingHandler = new upscaling();
+const http = require( 'http' );
+const server = require( 'socket.io' ).Server;
+const Server = http.createServer( app );
+
+const io = new server( Server, {
+    cors: {
+        origin: 'http://localhost:8080'
+    }
+} );
 
 app.use( bodyParser.urlencoded( { extended: false } ) );
 app.use( bodyParser.json() );
 app.use( cors() );
 
+io.on( 'connection', ( socket ) => {
+    console.log( 'connected' );
+} )
+
 
 app.get( '/api/getEngines', ( request, response ) => {
     console.log( 'engines' );
@@ -45,10 +58,10 @@ app.post( '/api/startUpscaling', ( request, response ) => {
     let checks = upscalingHandler.verifyDataIntegrity( request.body );
     if ( checks[ 0 ] ) {
         response.send( { 'data': checks[ 1 ] } );
-        upscalingHandler.upscale( request.body );
+        upscalingHandler.upscale( request.body, io );
     } else {
         response.send( { 'data': checks[ 1 ] } );
     }
 } );
 
-app.listen( 8081 );
+Server.listen( 8081 );

frontend/src/socket.js

@@ -0,0 +1,29 @@
+import { reactive } from "vue";
+import { io } from "socket.io-client";
+
+export const state = reactive({
+  connected: false,
+  fooEvents: [],
+  barEvents: []
+});
+
+// "undefined" means the URL will be computed from the `window.location` object
+const URL = process.env.NODE_ENV === "production" ? undefined : "http://localhost:8081";
+
+export const socket = io(URL);
+
+socket.on("connect", () => {
+  state.connected = true;
+});
+
+socket.on("disconnect", () => {
+  state.connected = false;
+});
+
+socket.on("foo", (...args) => {
+  state.fooEvents.push(args);
+});
+
+socket.on("bar", (...args) => {
+  state.barEvents.push(args);
+});

frontend/src/upscalingHandler.js

@@ -7,46 +7,62 @@
 *
 */
 
-const exec = require( 'child_process' ).exec;
+const child_process = require( 'child_process' );
 const process = require( 'process' );
 const Notification = require( 'electron' ).Notification;
 
-function execute(command, callback){
-    exec(command, function(error, stdout, stderr){ callback(stdout); });
-};
 
 class UpscalingHandler {
     constructor () {
         this.os = process.platform
     }
 
-    upscale( options ) {
+    upscale( options, io ) {
         // 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 ';
+            baseCommand = './imagevideoupscaler';
         } else if ( this.os === 'win32' ) {
-            baseCommand = 'imagevideoupscaler -i ';
+            baseCommand = 'imagevideoupscaler';
         }
 
-        baseCommand += options.InputFile + ' -o ' + options.OutputFile
-
+        
+        let args = []
+        args.push( '-i' + options.InputFile );
+        args.push( '-o ' + options.OutputFile );
+        
+        args.push( '-s ' + options.scale )
+        
         // add additional options
-        baseCommand += ' -s ' + options.scale + ' -S ' + options.sharpening
-        baseCommand += ' -E ' + options.engine + ' -M ' + options.algorithm
-
-        execute( baseCommand, out => {
-            console.log( out );
-            new Notification( { title: 'ImageVideoUpscaler - Job complete', body: 'Your file has been processed successfully' } )
+        // baseCommand +=  + ' -S ' + options.sharpening
+        // baseCommand += ' -E ' + options.engine + ' -M ' + options.algorithm
+        
+        let child = child_process.spawn( baseCommand, args );
+        
+        child.stdout.on( 'data', data => {
+            console.log( '' + data );
+            io.emit( 'progress', '\n' + data );
+        } );
+        
+        child.stderr.on( 'data', ( data ) => {
+            console.error(`stderr: ${ data }`);
+        } );
+        
+        child.on( 'error', ( error ) => {
+            new Notification( { title: `ImageVideoUpscaler - Error whilst upscaling', body: 'Your upscaling Job encountered an error whilst upscaling. (Error message: ${ error.message }).`} )
+        } );
+        
+        child.on( 'close', ( code ) => {
+            new Notification( { title: `ImageVideoUpscaler - Job complete', body: 'Your Upscaling job has completed successfully (Code ${ code }). You may find its output here: ` + options.OutputFile } )
         } );
     }
 
     verifyDataIntegrity ( data ) {
         if ( data[ 'InputFile' ] && data[ 'OutputFile' ] && data[ 'engine' ] && data[ 'algorithm' ] && 1 < data[ 'scale' ] <= 4 && 0 <= data[ 'sharpening' ] <= 1 ) {
-            if ( data[ 'InputFile' ][ 0 ].substring( data[ 'InputFile' ].length - 4 ) == data[ 'OutputFile' ][ 0 ].substring( data[ 'OutputFile' ].length - 4 ) ) {
+            if ( data[ 'InputFile' ][ 0 ].substring( data[ 'InputFile' ][ 0 ].length - 4 ) == data[ 'OutputFile' ].substring( data[ 'OutputFile' ].length - 4 ) ) {
                 return [ true, 'upscaling' ];
             } else { 
                 return [ false, 'differentFileExtensions' ]; 

frontend/src/views/HomeView.vue

@@ -22,9 +22,15 @@
         <button @click="runCommand( 'OutputFile' )">Output file</button><br>
         <button @click="start()">Start upscaling</button>
 
+        <div class="output-box-wrapper">
+            <p id="cmd" @click="showCmdOutput()">Command output</p>
+            <div class="output-box" v-html="output" id="output">
+            </div>
+        </div>
+
         <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.
+                Your file is being processed. You will be notified when the upscaling process has finished.
                 <form method="dialog">
                     <button>OK</button>
                 </form>
@@ -55,13 +61,16 @@
 </template>
 
 <script>
+import { socket } from "@/socket";
+
 export default {
     name: 'HomeView',
     data() {
         return {
-            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' ] },
+            upscaleSettings: { 'engine': 'ffc', 'algorithm': 'fsr', 'scale': 2, 'sharpening': 0, 'InputFile': [ '/home/janis/projects/myevent/assets/logo.png' ], 'OutputFile': '/home/janis/Downloads/test.png' },
             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,
+            output: '',
         }
     },
     methods: {
@@ -85,7 +94,7 @@ export default {
             }
             fetch( 'http://127.0.0.1:8081/api/startUpscaling', fetchOptions ).then( res => {
                 res.json().then( data => {
-                    console.log( data.data );
+                    console.log( this.upscaleSettings );
                     if ( data.data == 'upscaling' ) {
                         document.getElementById( 'processing' ).showModal();
                     } else if ( data.data == 'dataMissing' ) {
@@ -97,17 +106,52 @@ export default {
                     console.log( error );
                 } )
             } );
+            this.output = '';
+
+            socket.on( 'progress', ( ...args) => {
+                this.output += args + '<br>';
+            } )
+        },
+        showCmdOutput () {
+            document.getElementById( 'output' ).classList.toggle( 'shown' );
         },
         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.upscaleSettings.OutputFile = this.upscaleSettings.OutputFile.slice( 0, this.upscaleSettings.OutputFile[ 0 ].length - 5 ) + fileExtension;
             this.fixed = true;
         }
+    },
+    created() {
+        socket.connect();
+    },
+    deactivated() {
+        socket.disconnect();
     }
 }
 </script>
 
 <style scoped>
+    .output-box-wrapper {
+        margin-top: 5%;
+        width: 100%;
+        height: 20%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+    }
+    .output-box {
+        display: none;
+        overflow: scroll;
+        height: 100%;
+        width: 60%;
+        text-align: justify;
+    }
+
+    .shown {
+        display: block;
+    }
+
     dialog {
         border-radius: 10px;
         height: 30vh;
@@ -125,4 +169,11 @@ export default {
         align-items: center;
         flex-direction: column;
     }
+
+    #cmd {
+        text-align: justify;
+        width: 60%;
+        cursor: pointer;
+        user-select: none;
+    }
 </style>

frontend/src/views/SettingsView.vue

@@ -2,6 +2,7 @@
     <div class="about">
         <h1>Settings</h1>
         <h3>Engines</h3>
+        <p>WIP!</p>
         <p>{{ engines }}</p>
     </div>
 </template>