possibly working GUI, compiling missing

2023-06-03 11:34:39 +02:00
parent 58e114e368
commit bf2931085f
13 changed files with 186 additions and 26 deletions
--- a/frontend/package-lock.json
+++ b/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==",
-      "dev": true
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="
    },
    "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==",
-      "dev": true
+      "integrity": "sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg=="
    },
    "verror": {
      "version": "1.10.1",
--- a/frontend/package.json
+++ b/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"
--- a/frontend/public/lang/about/en.json
+++ b/frontend/public/lang/about/en.json
--- a/frontend/public/lang/home/en.json
+++ b/frontend/public/lang/home/en.json
--- a/frontend/public/lang/settings/en.json
+++ b/frontend/public/lang/settings/en.json
--- a/frontend/src/app.js
+++ b/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 );
--- a/frontend/src/upscalingHandler.js
+++ b/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;
--- a/frontend/src/views/AboutView.vue
+++ b/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,
        }
--- a/frontend/src/views/HomeView.vue
+++ b/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>
--- a/frontend/src/views/SettingsView.vue
+++ b/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>