add electron forge + fixes
This commit is contained in:
22
frontend/forge.config.js
Normal file
22
frontend/forge.config.js
Normal file
@@ -0,0 +1,22 @@
|
||||
module.exports = {
|
||||
packagerConfig: {},
|
||||
rebuildConfig: {},
|
||||
makers: [
|
||||
{
|
||||
name: '@electron-forge/maker-squirrel',
|
||||
config: {},
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-zip',
|
||||
platforms: ['darwin'],
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-deb',
|
||||
config: {},
|
||||
},
|
||||
{
|
||||
name: '@electron-forge/maker-rpm',
|
||||
config: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
7140
frontend/package-lock.json
generated
7140
frontend/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -9,24 +9,33 @@
|
||||
"electron:build": "vue-cli-service electron:build",
|
||||
"electron:serve": "vue-cli-service electron:serve",
|
||||
"postinstall": "electron-builder install-app-deps",
|
||||
"postuninstall": "electron-builder install-app-deps"
|
||||
"postuninstall": "electron-builder install-app-deps",
|
||||
"start": "electron-forge start",
|
||||
"package": "electron-forge package",
|
||||
"make": "electron-forge make"
|
||||
},
|
||||
"main": "background.js",
|
||||
"dependencies": {
|
||||
"child_process": "^1.0.2",
|
||||
"core-js": "^3.8.3",
|
||||
"cors": "^2.8.5",
|
||||
"electron": "^24.3.1",
|
||||
"electron-squirrel-startup": "^1.0.0",
|
||||
"vue": "^3.2.13",
|
||||
"vue-router": "^4.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@electron-forge/cli": "^6.1.1",
|
||||
"@electron-forge/maker-deb": "^6.1.1",
|
||||
"@electron-forge/maker-rpm": "^6.1.1",
|
||||
"@electron-forge/maker-squirrel": "^6.1.1",
|
||||
"@electron-forge/maker-zip": "^6.1.1",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"electron": "^24.4.1",
|
||||
"electron-devtools-installer": "^3.1.0",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
|
||||
@@ -50,6 +50,7 @@ export default {
|
||||
<style>
|
||||
:root, :root.light {
|
||||
--background-color: rgb(224, 222, 222);
|
||||
--dialog-color: rgb(243, 241, 241);
|
||||
--foreground-color: #2c3e50;
|
||||
--highlight-color: rgb(221, 0, 0);
|
||||
}
|
||||
@@ -57,6 +58,7 @@ export default {
|
||||
:root.dark {
|
||||
--background-color: rgb(34, 34, 34);
|
||||
--foreground-color: white;
|
||||
--dialog-color: rgb(51, 51, 51);
|
||||
}
|
||||
|
||||
body, html {
|
||||
|
||||
@@ -42,11 +42,12 @@ app.get( '/api/getOutputFile', ( request, response ) => {
|
||||
} );
|
||||
|
||||
app.post( '/api/startUpscaling', ( request, response ) => {
|
||||
if ( upscalingHandler.verifyDataIntegrity( request.body ) ) {
|
||||
response.send( { 'data': 'upscaling' } );
|
||||
let checks = upscalingHandler.verifyDataIntegrity( request.body );
|
||||
if ( checks[ 0 ] ) {
|
||||
response.send( { 'data': checks[ 1 ] } );
|
||||
upscalingHandler.upscale( request.body );
|
||||
} else {
|
||||
response.send( { 'data': 'dataIncorrect' } );
|
||||
response.send( { 'data': checks[ 1 ] } );
|
||||
}
|
||||
} );
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
|
||||
const exec = require( 'child_process' ).exec;
|
||||
const process = require( 'process' );
|
||||
const Notification = require( 'electron' ).Notification;
|
||||
|
||||
function execute(command, callback){
|
||||
exec(command, function(error, stdout, stderr){ callback(stdout); });
|
||||
@@ -39,14 +40,19 @@ class UpscalingHandler {
|
||||
|
||||
execute( baseCommand, out => {
|
||||
console.log( out );
|
||||
new Notification( { title: 'ImageVideoUpscaler - Job complete', body: 'Your file has been processed successfully' } )
|
||||
} );
|
||||
}
|
||||
|
||||
verifyDataIntegrity ( data ) {
|
||||
if ( data[ 'InputFile' ] && data[ 'OutputFile' ] && data[ 'engine' ] && data[ 'algorithm' ] && 1 < data[ 'scale' ] <= 4 && 0 <= data[ 'sharpening' ] <= 1 ) {
|
||||
return true;
|
||||
if ( data[ 'InputFile' ][ 0 ].substring( data[ 'InputFile' ].length - 4 ) == data[ 'OutputFile' ][ 0 ].substring( data[ 'OutputFile' ].length - 4 ) ) {
|
||||
return [ true, 'upscaling' ];
|
||||
} else {
|
||||
return false;
|
||||
return [ false, 'differentFileExtensions' ];
|
||||
}
|
||||
} else {
|
||||
return [ false, 'dataMissing' ];
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -21,6 +21,36 @@
|
||||
<button @click="runCommand( 'InputFile' )">Input file</button><br>
|
||||
<button @click="runCommand( 'OutputFile' )">Output file</button><br>
|
||||
<button @click="start()">Start upscaling</button>
|
||||
|
||||
<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.
|
||||
<form method="dialog">
|
||||
<button>OK</button>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="wrong">
|
||||
<div class="dialog-container">
|
||||
Some entries are missing. Please ensure that you have specified an input and output file!
|
||||
<form method="dialog">
|
||||
<button>OK</button>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="fileExtension">
|
||||
<div class="dialog-container">
|
||||
File extension of input and output file don't match! Please ensure that they are the same.
|
||||
Click the button below to fix it.
|
||||
<button @click="fixFileExtension();">Fix</button>
|
||||
<p v-if="fixed">Fixed!</p>
|
||||
<form method="dialog">
|
||||
<button @click="this.fixed = false;">OK</button>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -29,8 +59,9 @@ export default {
|
||||
name: 'HomeView',
|
||||
data() {
|
||||
return {
|
||||
upscaleSettings: { 'engine': 'ffc', 'algorithm': 'fsr', 'scale': 2, 'sharpening': 0, 'InputFile': '', 'OutputFile': '' },
|
||||
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' ] },
|
||||
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,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@@ -54,12 +85,44 @@ export default {
|
||||
}
|
||||
fetch( 'http://127.0.0.1:8081/api/startUpscaling', fetchOptions ).then( res => {
|
||||
res.json().then( data => {
|
||||
console.log( data );
|
||||
console.log( data.data );
|
||||
if ( data.data == 'upscaling' ) {
|
||||
document.getElementById( 'processing' ).showModal();
|
||||
} else if ( data.data == 'dataMissing' ) {
|
||||
document.getElementById( 'wrong' ).showModal();
|
||||
} else {
|
||||
document.getElementById( 'fileExtension' ).showModal();
|
||||
}
|
||||
} ).catch( error => {
|
||||
console.log( error );
|
||||
} )
|
||||
} );
|
||||
},
|
||||
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.fixed = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
dialog {
|
||||
border-radius: 10px;
|
||||
height: 30vh;
|
||||
width: 30vw;
|
||||
background-color: var( --background-color );
|
||||
border-style: none;
|
||||
color: var( --primary-color );
|
||||
}
|
||||
|
||||
.dialog-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user