possibly working GUI, compiling missing

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>