react local version is done!!

backend_react/.flaskenv

 FLASK_APP=react_app.py
-FLASK_ENV=development
\ No newline at end of file
+FLASK_ENV=development
+FLASK_DEBUG=1 flask run --no-reload
\ No newline at end of file

backend_react/react_app.py

 from dataclasses import dataclass
-from flask import Flask, request, current_app, render_template
+from flask import Flask, request, current_app, send_file
 # from flask_cors import CORS
 import os
 import zipfile
 
 import torch
-
 from numpy import save, load
-torch.manual_seed(0)
+import temp_util.wapp_util as wapp_util
+import time
 
 import os
 import sys
 sys.path.insert(0, os.path.abspath('..'))
+torch.manual_seed(0)
 
-import temp_util.wapp_util as wapp_util
 print('@@@ import successful')
 
 app = Flask(__name__)
@@ -122,28 +122,6 @@ def confirm():
 @app.route('/training', methods=['POST', 'GET'])
 def training():
 
-    # # aa learner
-    # auto_aug_learner = current_app.config.get('AAL')
-
-    # # search space & problem setting
-    # ds = current_app.config.get('ds')
-    # ds_name = current_app.config.get('DSN')
-    # exclude_method = current_app.config.get('exc_meth')
-    # num_funcs = current_app.config.get('NUMFUN')
-    # num_policies = current_app.config.get('NP')
-    # num_sub_policies = current_app.config.get('NSP')
-    # toy_size = current_app.config.get('TS')
-    
-    # # child network
-    # IsLeNet = current_app.config.get('ISLENET')
-
-    # # child network training hyperparameters
-    # batch_size = current_app.config.get('BS')
-    # early_stop_num = current_app.config.get('ESN')
-    # iterations = current_app.config.get('IT')
-    # learning_rate = current_app.config.get('LR')
-    # max_epochs = current_app.config.get('ME')
-
     # default values 
     max_epochs = 10      # max number of epochs that is run if early stopping is not hit
     early_stop_num = 10   # max number of worse validation scores before early stopping is triggered
@@ -151,16 +129,27 @@ def training():
     num_sub_policies = 5  # fix number of sub-policies in a policy
     data = current_app.config.get('data')
 
-    return {'status': 'training done!'}
-
-
+    # fake training
+    print('pretend it is training')
+    time.sleep(3)
+    print('epoch: 1')
+    time.sleep(3)
+    print('epoch: 2')
+    time.sleep(3) 
+    print('epoch: 3')
+    print('it has finished training')
 
+    return {'status': 'Training is done!'}
 
 
 # ========================================================================
-@app.route('/results')
+@app.route('/result')
 def show_result():
-    return {'status': 'results'}
+    file_path = "./policy.txt"
+    f = open(file_path, "r")
+    return send_file(file_path, as_attachment=True)
+
+
 
 @app.route('/api')
 def index():
@@ -168,4 +157,4 @@ def index():
 
 
 if __name__ == '__main__':
-    app.run(debug=True)
\ No newline at end of file
+    app.run(debug=False, use_reloader=False)
\ No newline at end of file

package.json

@@ -13,6 +13,7 @@
     "@testing-library/react": "^13.1.1",
     "@testing-library/user-event": "^13.5.0",
     "axios": "^0.26.1",
+    "js-file-download": "^0.4.12",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.30.0",

src/pages/Progress.js

@@ -7,14 +7,20 @@ import {useNavigate, Route} from "react-router-dom";
 
 
 export default function Training() {
+    let navigate = useNavigate();
 
+    const [status, setStatus] = useState("Training");
     useEffect(() => {
-        const res = fetch('/training').then(
-          response => response.json()
-          ).then(data => console.log(data))
+        const res = fetch('/training'
+        ).then(response => response.json()
+        ).then(data => {setStatus(data.status); console.log(data.status)});
+
+        
         }, []);
-     
 
+    const onSubmit = async () => {
+        navigate('/result', {replace:true});
+    }
 
     return (
         <div className="App" style={{padding:"60px"}}>
@@ -23,17 +29,38 @@ export default function Training() {
             </Typography>
             <Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
                 <CardContent>
-                    <Grid style={{padding:"50px"}}>
-                    <Typography gutterBottom variant="subtitle1" align="center" >
+                    <Grid style={{padding:"30px"}}>
+                    <Typography gutterBottom variant="h6" align="center" >
                         Our auto-augment learners are working hard to generate your data augmentation policy ...
                     </Typography>
-                    <Grid style={{padding:"60px"}}>
-                        <LinearProgress color="primary"/>
-                        <LinearProgress color="primary" />
-                        <LinearProgress color="primary" />
-                        <LinearProgress color="primary" />
                     </Grid>
+
+                    {status==="Training" &&
+                        <Grid style={{padding:"60px"}}>
+                            <LinearProgress color="primary"/>
+                            <LinearProgress color="primary" />
+                            <LinearProgress color="primary" />
+                            <LinearProgress color="primary" />
+                        </Grid>
+                    }
+
+                    <Grid style={{padding:"50px"}}>
+                    <Typography variant='h6'>
+                        Current status: {status}
+                    </Typography>
                     </Grid>
+                    
+                    {status==="Training is done!" &&
+                        <Button
+                                type="submit"
+                                variant="contained"
+                                color='primary'
+                                size='large'
+                                onClick={onSubmit}
+                            >
+                                Show Results
+                        </Button>
+                    }
                 </CardContent>
             </Card>
                 

src/pages/Result.js

@@ -2,9 +2,20 @@ import React, { useState, useEffect } from "react";
 import { Grid, List, ListItem, Avatar, ListItemAvatar, ListItemText, Card, CardContent, Typography, Button, CardMedia } from '@mui/material';
 import output from './pytest.png'
 import {useNavigate, Route} from "react-router-dom";
+import axios from 'axios'
+import fileDownload from 'js-file-download'
 
 export default function Result() {
 
+    const handleClick = () => {
+        axios.get('/result', {
+            responseType: 'blob',
+          })
+        .then((res) => {
+          fileDownload(res.data, 'policy.txt');
+          console.log(res.data)
+        })
+      }
     
     return (
         <div className="App" style={{padding:"60px"}}>
@@ -35,6 +46,7 @@ export default function Result() {
                             variant="contained"
                             color='primary'
                             size='large'
+                            onClick={() => handleClick('https://avatars.githubusercontent.com/u/9919?s=280&v=4', 'sample')}
                         >
                             Download
                     </Button>