improve python interface

.gitignore

@@ -102,3 +102,6 @@ dist
 
 # TernJS port file
 .tern-port
+
+# Mac .DS Store
+.DS_Store

electron-react-boilerplate/package.json

@@ -1,6 +1,6 @@
 {
   "name": "electron-react-boilerplate",
-  "productName": "ElectronReact",
+  "productName": "StyleGAN Electron",
   "description": "Electron application boilerplate based on React, React Router, Webpack, React Fast Refresh for rapid application development",
   "scripts": {
     "build": "concurrently \"yarn build:main\" \"yarn build:renderer\"",
@@ -30,7 +30,7 @@
     ]
   },
   "build": {
-    "productName": "ElectronReact",
+    "productName": "StyleGAN Electron",
     "appId": "org.erb.ElectronReact",
     "files": [
       "dist/",
@@ -253,6 +253,7 @@
     "electron-debug": "^3.1.0",
     "electron-is-dev": "^1.2.0",
     "electron-log": "^4.2.4",
+    "electron-store": "^8.0.2",
     "electron-updater": "^4.3.4",
     "express": "^4.17.1",
     "history": "^5.0.0",

electron-react-boilerplate/src/App.global.css

@@ -2,7 +2,7 @@
  * @NOTE: Prepend a `~` to css file paths that are in your node_modules
  *        See https://github.com/webpack-contrib/sass-loader#imports
  */
-body {
+ body {
   position: relative;
   color: white;
   height: 100vh;
@@ -50,9 +50,38 @@ a:hover {
   cursor: pointer;
 }
 
-.Hello {
+.Title {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 20px 0;
 }
+
+.Image {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+}
+
+.Parameter {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+}
+
+
+.Button {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+}
+
+.PythonInterface {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 20px 0;
+}

electron-react-boilerplate/src/App.tsx

@@ -1,10 +1,11 @@
-import React,{Fragment, useState} from 'react';
+import React, { Fragment, useState } from 'react';
 import Slider from '@material-ui/core/Slider';
+import TextField from '@material-ui/core/TextField';
 import { withStyles } from '@material-ui/core/styles';
 import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
 import './App.global.css';
 //Import Inter-Process Communication
-const ipcRenderer  = window.require("electron").ipcRenderer;
+const ipcRenderer = window.require("electron").ipcRenderer;
 
 //Create a slider style
 const PrettoSlider = withStyles({
@@ -41,115 +42,136 @@ const MainFrame = () => {
 
   // Number of slider per row
   const chunkSize = 5;
+  // Application State
+  const [isSetupReady, setIsSetupReady] = useState(false);
+  // Python Path
+  const [pythonPath, setPythonPath] = useState('');
   // Variable to store ImageURI
-  const [imageData, setImageData] = useState()
+  const [imageData, setImageData] = useState();
   // Variable to Loop Create Slider
-  const [chunklists,setChunkLists] = useState<string[][]>([[],[]]) 
+  const [chunklists, setChunkLists] = useState<string[][]>([[], []]);
   // List of all avaiable tag
-  const [lists, setlists] = useState<string[]>([])
+  const [lists, setlists] = useState<string[]>([]);
   // Variable to store TagValue
-  const [tagValue, setTagValue] = useState<{}>({"test":1.0})
+  const [tagValue, setTagValue] = useState<{}>({ "test": 1.0 });
 
   // Handle on Slider Value Changes
-  function handleInputChange(event,value,id)
-  {
+  function handleInputChange(event, value, id) {
     interface CustomDict {
       [index: string]: number;
     }
     let updatedValue: CustomDict;
-    let updatedKey = id.item
-    updatedValue = {}
-    updatedValue[updatedKey] = value
-    setTagValue({...tagValue, ...updatedValue});
+    let updatedKey = id.item;
+    updatedValue = {};
+    updatedValue[updatedKey] = value;
+    setTagValue({ ...tagValue, ...updatedValue });
   }
 
   // handle on Create New Image
-  function handleOnCreate(){
-    console.log("generate new images")
-    ipcRenderer.send('creation_event')
+  function handleOnCreate() {
+    console.log("generate new images....");
+    ipcRenderer.send('creation_event');
   }
 
   // handle on Modify Current Image
-  function handleOnModify(){
-    console.log("modify images")
-    ipcRenderer.send('modification_event',tagValue)
+  function handleOnModify() {
+    console.log("modify images....");
+    ipcRenderer.send('modification_event', tagValue);
+  }
+
+  // setup Python Interface
+  function setupPythonPath() {
+    console.log("setup python path....");
+    ipcRenderer.send('pythonpath_init', pythonPath);
   }
 
   // handle Create Slider UI
-  function handleSetChunk(){
-    const groups = lists.map((e, i) => { 
-         return i % chunkSize === 0 ? lists.slice(i, i + chunkSize) : ["null"]; 
-    }).filter(function (el) {return el[0] !== "null";});
-    setChunkLists(groups)
+  function handleSetChunk() {
+    const groups = lists.map((e, i) => {
+      return i % chunkSize === 0 ? lists.slice(i, i + chunkSize) : ["null"];
+    }).filter(function (el) { return el[0] !== "null"; });
+    setChunkLists(groups);
   }
-  function handleCreateTagValue(){
-    var tag_value_obj = lists.reduce((o, key) => Object.assign(o, {[key]: 0.0}), {});
-    setTagValue(tag_value_obj)
+  function handleCreateTagValue() {
+    var tag_value_obj = lists.reduce((o, key) => Object.assign(o, { [key]: 0.0 }), {});
+    setTagValue(tag_value_obj);
   }
 
   // General state changes listener
   React.useEffect(() => {
     // Event Listener for changing image in Real-Time
-    ipcRenderer.on('inference image', (event, value) => {
+    ipcRenderer.on('Inference Image', (event, value) => {
       console.log(`Image name:${value.image_name}`);
       setImageData(value.image_data);
-    })
+    });
     // Event Listener for initialization
     ipcRenderer.on('Init Interface', (event, value) => {
       setlists(value);
-    })
+    });
+    ipcRenderer.on('Get Python Path', (event, value) => {
+      setPythonPath(value);
+    });
+    ipcRenderer.on('Init Ready', (event, value) => {
+      setIsSetupReady(value);
+    });
   }, [])
 
   // This is be executed when 'list' state changes (for initialization)
-  React.useEffect(() => { 
-    handleSetChunk(); 
+  React.useEffect(() => {
+    handleSetChunk();
     handleCreateTagValue();
-    console.log("state changes")
   }, [lists])
 
   return (
     <div>
 
-      <div className="Hello">
-        <h1 style={{color:"black"}}>electron-stylegan-interface</h1>
+      <div className="Title">
+        <h1 style={{ color: "black" }}>Electron StyleGAN2</h1>
       </div>
 
-      <div className="Hello">
-          <img id="show" src={imageData} style={{width:"400px",height:"400px"}} />
+      <div className="Image">
+        <img id="show" src={imageData} style={{ width: "400px", height: "400px", backgroundColor: "black" }} />
       </div>
 
-      <div className="Hello">
-        <table style = {{width:"100%"}}>
-            <tbody>
+      <div className="Parameter">
+        <table style={{ width: "100%" }}>
+          <tbody>
             {
               chunklists.map((chunk) => (
                 <tr>
                   {
                     chunk.map((item) => (
-                        <Fragment>
-                          <td style = {{width:"20%"}}>
-                              <PrettoSlider valueLabelDisplay="auto" aria-label="pretto slider" defaultValue={0} step={0.10} min={-5.0} max={5.0}  onChangeCommitted={(event,value) => handleInputChange(event,value,{item})}/>
-                          </td>
-                          <td>
-                              <a>{item}</a>
-                          </td>
-                        </Fragment>
+                      <Fragment>
+                        <td style={{ width: "20%" }}>
+                          <PrettoSlider disabled={!isSetupReady} valueLabelDisplay="auto" aria-label="pretto slider" defaultValue={0} step={0.10} min={-5.0} max={5.0} onChangeCommitted={(event, value) => handleInputChange(event, value, { item })} />
+                        </td>
+                        <td>
+                          <a style={{ color: "black" }}>{item}</a>
+                        </td>
+                      </Fragment>
                     ))
                   }
                 </tr>
               ))
             }
-            </tbody>
-        </table> 
+          </tbody>
+        </table>
+      </div>
+
+      <div className="PythonInterface">
+        <TextField fullWidth label="Python Path" variant="standard" value={pythonPath} onChange={(event) => { setPythonPath(event.target.value) }} />
+        <button type="button" onClick={() => { setupPythonPath() }}>
+          Submit
+        </button>
       </div>
 
-      <div className="Hello">
-          <button type="button" onClick={() => {handleOnCreate()}}>
-            Generate New Sample
-          </button>
-          <button type="button" onClick={() => {handleOnModify()}}>
-            Modify Current Sample
-          </button>
+      <div className="Button">
+        <button type="button" disabled={!isSetupReady} style={{ backgroundColor: "#32CD32" }} onClick={() => { handleOnCreate() }}>
+          Generate New Sample
+        </button>
+        <button type="button" disabled={!isSetupReady} style={{ backgroundColor: "#00CED1" }} onClick={() => { handleOnModify() }}>
+          Modify Current Sample
+        </button>
       </div>
 
     </div>