diff --git a/.gitignore b/.gitignore
index 0370b9f73f48d4fc6e2e303a5e5293974864955c..0ffad1fd82a5435de017aacbe88c1336683916f3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -177,7 +177,7 @@ cifar-10-python.tar.gz
/coverage
# production
-/build
+# /build
# misc
.DS_Store
@@ -203,4 +203,8 @@ celerybeat.pid
*.sage.py
**/test
-**/train
\ No newline at end of file
+**/train
+
+# user uplaod
+/react_backend/child_networks
+/react_backend/policy.txt
\ No newline at end of file
diff --git a/backend_react/.flaskenv b/backend_react/.flaskenv
deleted file mode 100644
index 89ab8b9bcc57b84b7f1b783246f01f27a176b3b7..0000000000000000000000000000000000000000
--- a/backend_react/.flaskenv
+++ /dev/null
@@ -1,3 +0,0 @@
-FLASK_APP=react_app.py
-FLASK_ENV=development
-FLASK_DEBUG=1 flask run --no-reload
\ No newline at end of file
diff --git a/backend_react/child_networks/CIFAR100_v1.txt b/backend_react/child_networks/CIFAR100_v1.txt
deleted file mode 100644
index 36dc2c4e8ccf108ac3577ceaf3886318568a477d..0000000000000000000000000000000000000000
--- a/backend_react/child_networks/CIFAR100_v1.txt
+++ /dev/null
@@ -1 +0,0 @@
-0.2093,0.2211,0.2119,0.2104,0.2115,0.2079,0.2094,0.2219,0.218,0.2188
\ No newline at end of file
diff --git a/backend_react/child_networks/CIFAR100_v2.txt b/backend_react/child_networks/CIFAR100_v2.txt
deleted file mode 100644
index d9a62099b8c0bcedfd1a6a3c8b60e238dde0a40e..0000000000000000000000000000000000000000
--- a/backend_react/child_networks/CIFAR100_v2.txt
+++ /dev/null
@@ -1 +0,0 @@
-0.19934545454545455,0.19519090909090908,0.19935454545454545,0.19381818181818183,0.18769999999999998,0.19858181818181822,0.19459090909090906,0.18030000000000002,0.17654545454545453,0.2042909090909091
\ No newline at end of file
diff --git a/backend_react/child_networks/place_holder b/backend_react/child_networks/place_holder
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/backend_react/policy.txt b/backend_react/policy.txt
deleted file mode 100644
index ba1f82e0664d8cca0732c7db753ac93c122986de..0000000000000000000000000000000000000000
--- a/backend_react/policy.txt
+++ /dev/null
@@ -1 +0,0 @@
-0.7018545454545454,0.6530636363636364,0.6565090909090909,0.7029727272727273,0.6615000000000001,0.6610181818181818,0.6333545454545454,0.6617909090909091,0.6584636363636364,0.6933909090909091
\ No newline at end of file
diff --git a/backend_react/react_app.py b/backend_react/react_app.py
deleted file mode 100644
index dea4b61729aad5bddb85752d6a4c918d9d70f83b..0000000000000000000000000000000000000000
--- a/backend_react/react_app.py
+++ /dev/null
@@ -1,166 +0,0 @@
-from dataclasses import dataclass
-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
-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)
-
-print('@@@ import successful')
-
-app = Flask(__name__)
-
-
-# it is used to collect user input and store them in the app
-@app.route('/home', methods=["GET", "POST"])
-def get_form_data():
- print('@@@ in Flask Home')
- # form_data = request.get_json()
- # form_data = request.files['ds_upload']
- # print('@@@ form_data', form_data)
-
- form_data = request.form
- print('@@@ this is form data', form_data)
-
- # required input
- ds = form_data['select_dataset'] # pick dataset (MNIST, KMNIST, FashionMNIST, CIFAR10, CIFAR100)
- IsLeNet = form_data["select_network"] # using LeNet or EasyNet or SimpleNet ->> default
- auto_aug_learner = form_data["select_learner"] # augmentation methods to be excluded
-
- print('@@@ required user input:', 'ds', ds, 'IsLeNet:', IsLeNet, 'auto_aug_leanrer:',auto_aug_learner)
- # advanced input
- if form_data['batch_size'] != 'undefined':
- batch_size = form_data['batch_size'] # size of batch the inner NN is trained with
- else:
- batch_size = 1 # this is for demonstration purposes
- if form_data['learning_rate'] != 'undefined':
- learning_rate = form_data['learning_rate'] # fix learning rate
- else:
- learning_rate = 10-1
- if form_data['toy_size'] != 'undefined':
- toy_size = form_data['toy_size'] # total propeortion of training and test set we use
- else:
- toy_size = 1 # this is for demonstration purposes
- if form_data['iterations'] != 'undefined':
- iterations = form_data['iterations'] # total iterations, should be more than the number of policies
- else:
- iterations = 10
- exclude_method = form_data['select_action']
- print('@@@ advanced search: batch_size:', batch_size, 'learning_rate:', learning_rate, 'toy_size:', toy_size, 'iterations:', iterations, 'exclude_method', exclude_method)
-
-
- # 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
- num_policies = 5 # fix number of policies
- num_sub_policies = 5 # fix number of sub-policies in a policy
-
-
- # if user upload datasets and networks, save them in the database
- if ds == 'Other':
- ds_folder = request.files['ds_upload']
- print('!!!ds_folder', ds_folder)
- ds_name_zip = ds_folder.filename
- ds_name = ds_name_zip.split('.')[0]
- ds_folder.save('./datasets/'+ ds_name_zip)
- with zipfile.ZipFile('./datasets/'+ ds_name_zip, 'r') as zip_ref:
- zip_ref.extractall('./datasets/upload_dataset/')
- if not current_app.debug:
- os.remove(f'./datasets/{ds_name_zip}')
- else:
- ds_name_zip = None
- ds_name = None
-
- # test if uploaded dataset meets the criteria
- for (dirpath, dirnames, filenames) in os.walk(f'./datasets/upload_dataset/{ds_name}/'):
- for dirname in dirnames:
- if dirname[0:6] != 'class_':
- return None # neet to change render to a 'failed dataset webpage'
-
- # save the user uploaded network
- if IsLeNet == 'Other':
- childnetwork = request.files['network_upload']
- childnetwork.save('./child_networks/'+childnetwork.filename)
- network_name = childnetwork.filename
- else:
- network_name = None
-
-
- print("@@@ user input has all stored in the app")
-
- data = {'ds': ds, 'ds_name': ds_name_zip, 'IsLeNet': IsLeNet, 'network_name': network_name,
- 'auto_aug_learner':auto_aug_learner, 'batch_size': batch_size, 'learning_rate': learning_rate,
- 'toy_size':toy_size, 'iterations':iterations, 'exclude_method': exclude_method, }
-
- current_app.config['data'] = data
-
- print('@@@ all data sent', current_app.config['data'])
-
- # try this if you want it might work, it might not
- # wapp_util.parse_users_learner_spec(
- # num_policies,
- # num_sub_policies,
- # early_stop_num,
- # max_epochs,
- # **data,
- # )
-
- return {'data': 'all stored'}
-
-
-
-
-# ========================================================================
-@app.route('/confirm', methods=['POST', 'GET'])
-def confirm():
- print('inside confirm page')
- data = current_app.config['data']
- return data
-
-
-
-
-# ========================================================================
-@app.route('/training', methods=['POST', 'GET'])
-def training():
-
- # 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
- num_policies = 5 # fix number of policies
- num_sub_policies = 5 # fix number of sub-policies in a policy
- data = current_app.config.get('data')
-
- # 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('/result')
-def show_result():
- file_path = "./policy.txt"
- f = open(file_path, "r")
- return send_file(file_path, as_attachment=True)
-
-
-
-
-if __name__ == '__main__':
- app.run(debug=False, use_reloader=False)
\ No newline at end of file
diff --git a/package.json b/package.json
deleted file mode 100644
index ada7219e60444673f911e7644b5eb6df70b1bb8e..0000000000000000000000000000000000000000
--- a/package.json
+++ /dev/null
@@ -1,50 +0,0 @@
-{
- "name": "react_app_metarl",
- "version": "0.1.0",
- "private": true,
- "proxy": "http://localhost:5000",
- "dependencies": {
- "@emotion/react": "^11.9.0",
- "@emotion/styled": "^11.8.1",
- "@mui/icons-material": "^5.6.2",
- "@mui/material": "^5.6.2",
- "@mui/styled-engine-sc": "^5.6.1",
- "@testing-library/jest-dom": "^5.16.4",
- "@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",
- "react-router-dom": "^6.3.0",
- "react-scripts": "^5.0.1",
- "styled-components": "^5.3.5",
- "web-vitals": "^2.1.4"
- },
- "scripts": {
- "start": "react-scripts start",
- "start-backend": "cd backend && env/bin/flask run --no-debugger",
- "build": "react-scripts build",
- "test": "react-scripts test",
- "eject": "react-scripts eject"
- },
- "eslintConfig": {
- "extends": [
- "react-app",
- "react-app/jest"
- ]
- },
- "browserslist": {
- "production": [
- ">0.2%",
- "not dead",
- "not op_mini all"
- ],
- "development": [
- "last 1 chrome version",
- "last 1 firefox version",
- "last 1 safari version"
- ]
- }
-}
diff --git a/public/favicon.ico b/public/favicon.ico
deleted file mode 100644
index a11777cc471a4344702741ab1c8a588998b1311a..0000000000000000000000000000000000000000
Binary files a/public/favicon.ico and /dev/null differ
diff --git a/public/index.html b/public/index.html
deleted file mode 100644
index 1c1e3f6880b46342e213867822363d72ec9d293f..0000000000000000000000000000000000000000
--- a/public/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
- <head>
- <meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
- <meta
- name="description"
- content="Web site created using create-react-app"
- />
- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
- <!--
- manifest.json provides metadata used when your web app is installed on a
- user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
- -->
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
- <!--
- Notice the use of %PUBLIC_URL% in the tags above.
- It will be replaced with the URL of the `public` folder during the build.
- Only files inside the `public` folder can be referenced from the HTML.
-
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
- work correctly both with client-side routing and a non-root public URL.
- Learn how to configure a non-root public URL by running `npm run build`.
- -->
- <title>MetaRL for AutoAugmentation</title>
- </head>
- <body>
- <noscript>You need to enable JavaScript to run this app.</noscript>
- <div id="root"></div>
- <!--
- This HTML file is a template.
- If you open it directly in the browser, you will see an empty page.
-
- You can add webfonts, meta tags, or analytics to this file.
- The build step will place the bundled scripts into the <body> tag.
-
- To begin the development, run `npm start` or `yarn start`.
- To create a production bundle, use `npm run build` or `yarn build`.
- -->
- </body>
-</html>
diff --git a/public/logo192.png b/public/logo192.png
deleted file mode 100644
index fc44b0a3796c0e0a64c3d858ca038bd4570465d9..0000000000000000000000000000000000000000
Binary files a/public/logo192.png and /dev/null differ
diff --git a/public/logo512.png b/public/logo512.png
deleted file mode 100644
index a4e47a6545bc15971f8f63fba70e4013df88a664..0000000000000000000000000000000000000000
Binary files a/public/logo512.png and /dev/null differ
diff --git a/public/manifest.json b/public/manifest.json
deleted file mode 100644
index 080d6c77ac21bb2ef88a6992b2b73ad93daaca92..0000000000000000000000000000000000000000
--- a/public/manifest.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
- "short_name": "React App",
- "name": "Create React App Sample",
- "icons": [
- {
- "src": "favicon.ico",
- "sizes": "64x64 32x32 24x24 16x16",
- "type": "image/x-icon"
- },
- {
- "src": "logo192.png",
- "type": "image/png",
- "sizes": "192x192"
- },
- {
- "src": "logo512.png",
- "type": "image/png",
- "sizes": "512x512"
- }
- ],
- "start_url": ".",
- "display": "standalone",
- "theme_color": "#000000",
- "background_color": "#ffffff"
-}
diff --git a/backend_react/__init__.py b/react_backend/__init__.py
similarity index 100%
rename from backend_react/__init__.py
rename to react_backend/__init__.py
diff --git a/setupProxy.js b/setupProxy.js
deleted file mode 100644
index 0b021257aca377b78503c40a9ccfb0a95197b16b..0000000000000000000000000000000000000000
--- a/setupProxy.js
+++ /dev/null
@@ -1,11 +0,0 @@
-const { createProxyMiddleware } = require('http-proxy-middleware');
-
-module.exports = function(app) {
- app.use(
- '/api',
- createProxyMiddleware({
- target: 'http://localhost:3000',
- changeOrigin: true,
- })
- );
-};
\ No newline at end of file
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index 74b5e053450a48a6bdb4d71aad648e7af821975c..0000000000000000000000000000000000000000
--- a/src/App.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.App {
- text-align: center;
-}
-
-.App-logo {
- height: 40vmin;
- pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
- .App-logo {
- animation: App-logo-spin infinite 20s linear;
- }
-}
-
-.App-header {
- background-color: #282c34;
- min-height: 100vh;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-size: calc(10px + 2vmin);
- color: white;
-}
-
-.App-link {
- color: #61dafb;
-}
-
-@keyframes App-logo-spin {
- from {
- transform: rotate(0deg);
- }
- to {
- transform: rotate(360deg);
- }
-}
diff --git a/src/App.js b/src/App.js
deleted file mode 100644
index 15ae090797af34edd330230308dae2b6cc7acee0..0000000000000000000000000000000000000000
--- a/src/App.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import Home from './pages/Home'
-import Confirm from './pages/Confirm'
-import Progress from './pages/Progress'
-import Result from './pages/Result'
-import './App.css';
-import React, { useState, useEffect } from "react";
-import axios from "axios";
-import {BrowserRouter, Route, Routes, Switch} from 'react-router-dom';
-
-function App() {
- // useEffect(() => {
- // console.log('print here')
- // fetch('/home', {
- // method: 'POST',
- // headers: { 'Content-Type': 'application/json' },
- // body: JSON.stringify({ })
- // })
- // .then((response) => response.text())
- // .then((data) => console.log('data', data));
- // }, []);
-
- // useEffect(() => {
- // fetch('/api').then(response =>{
- // if(response.ok){
- // return response.json()
- // }
- // }).then(data => console.log('api', data))
- // }, [])
-
- return (
- <div>
- {/* <Home /> */}
- {/* <Confirm /> */}
- {/* <Progress /> */}
- {/* <Result /> */}
- <BrowserRouter>
- <Routes>
- <Route exact path="/" element={<Home/>}/>
- <Route exact path="/confirm" element={<Confirm/>}/>
- <Route exact path="/progress" element={<Progress/>}/>
- <Route exact path="/result" element={<Result/>}/>
- </Routes>
- </BrowserRouter>
- </div>
- );
-
-}
-
-
-export default App;
diff --git a/src/App.test.js b/src/App.test.js
deleted file mode 100644
index c27141590b6d828395f00d7d346d61bc46c82626..0000000000000000000000000000000000000000
--- a/src/App.test.js
+++ /dev/null
@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
- render(<App />);
- const linkElement = screen.getByText(/lol react/i);
- expect(linkElement).toBeInTheDocument();
-});
diff --git a/src/components/pytest.png b/src/components/pytest.png
deleted file mode 100644
index 272b44ed38c9107f19c99dc9a5ac38593493604f..0000000000000000000000000000000000000000
Binary files a/src/components/pytest.png and /dev/null differ
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..0000000000000000000000000000000000000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
- margin: 0;
- font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
- 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
- sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-
-code {
- font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
- monospace;
-}
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index d563c0fb10ba0e42724b21286eb546ee4e5734fc..0000000000000000000000000000000000000000
--- a/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
- <React.StrictMode>
- <App />
- </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();
diff --git a/src/logo.svg b/src/logo.svg
deleted file mode 100644
index 9dfc1c058cebbef8b891c5062be6f31033d7d186..0000000000000000000000000000000000000000
--- a/src/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
\ No newline at end of file
diff --git a/src/pages/Confirm.js b/src/pages/Confirm.js
deleted file mode 100644
index 98ba0433a02e0df5fe16a5c8468525d811e16257..0000000000000000000000000000000000000000
--- a/src/pages/Confirm.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Grid, ListItem, ListItemAvatar, ListItemText, Card, CardContent, Typography, Button } from '@mui/material';
-import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
-import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
-import {useNavigate, Route} from "react-router-dom";
-
-export default function Confirm() {
- const [myData, setMyData] = useState([])
- const [dataset, setDataset] = useState()
- const [network, setNetwork] = useState()
-
- useEffect(() => {
- const res = fetch('/confirm').then(
- response => response.json()
- ).then(data => {setMyData(data);
- if (data.ds == 'Other'){setDataset(data.ds_name)} else {setDataset(data.ds)};
- if (data.IsLeNet == 'Other'){setNetwork(data.network_name)} else {setNetwork(data.IsLeNet)};
- });
- }, []);
-
- let navigate = useNavigate();
- const onSubmit = async () => {
- navigate('/progress', {replace:true});
- };
-
- return (
- <div className="App" style={{padding:"60px"}}>
- <Typography gutterBottom variant="h3" align="center" >
- Data Auto-Augmentation
- </Typography>
- <Grid>
- <Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
- <CardContent>
- <Typography gutterBottom variant="h6" align="left">
- Please confirm the following information:
- </Typography>
- <Grid alignItems="center" justify="center" >
- <Grid style={{maxWidth: 700, padding: "20px 20px"}} container spacing={4} alignItems="center" >
- <Grid xs={12} sm={6} item>
- <ListItem>
- <ListItemAvatar>
- <TuneRoundedIcon color="primary" fontSize='large'/>
- </ListItemAvatar>
- <ListItemText primary="Batch size" secondary={myData.batch_size} />
- </ListItem>
- </Grid>
- <Grid xs={12} sm={6} item >
- <ListItem>
- <ListItemAvatar>
- <CheckCircleOutlineRoundedIcon color="primary" fontSize='large'/>
- </ListItemAvatar>
- <ListItemText primary="Dataset selection" secondary={dataset} />
- </ListItem>
- </Grid>
- <Grid xs={12} sm={6} item>
- <ListItem>
- <ListItemAvatar>
- <TuneRoundedIcon color="primary" fontSize='large'/>
- </ListItemAvatar>
- <ListItemText primary="Learning rate" secondary={myData.learning_rate} />
- </ListItem>
- </Grid>
- <Grid xs={12} sm={6} item>
- <ListItem>
- <ListItemAvatar>
- <CheckCircleOutlineRoundedIcon color="primary" fontSize='large'/>
- </ListItemAvatar>
- <ListItemText primary="Network selection" secondary={network} />
- </ListItem>
- </Grid>
- <Grid xs={12} sm={6} item>
- <ListItem>
- <ListItemAvatar>
- <TuneRoundedIcon color="primary" fontSize='large'/>
- </ListItemAvatar>
- <ListItemText primary="Dataset Proportion" secondary={myData.toy_size} />
- </ListItem>
- </Grid>
- <Grid xs={12} sm={6} item>
- <ListItem>
- <ListItemAvatar>
- <CheckCircleOutlineRoundedIcon color="primary" fontSize='large'/>
- </ListItemAvatar>
- <ListItemText primary="Auto-augment learner selection" secondary={myData.auto_aug_learner} />
- </ListItem>
- </Grid>
- <Grid xs={12} sm={6} item>
- <ListItem>
- <ListItemAvatar>
- <TuneRoundedIcon color="primary" fontSize='large'/>
- </ListItemAvatar>
- <ListItemText primary="Iterations" secondary={myData.iterations} />
- </ListItem>
- </Grid>
- </Grid>
- </Grid>
-
- <Button
- type="submit"
- variant="contained"
- color='success'
- size='large'
- onClick={onSubmit}
- >
- Confirm
- </Button>
-
- </CardContent>
- </Card>
- </Grid>
- </div>
- )
-}
\ No newline at end of file
diff --git a/src/pages/Home.js b/src/pages/Home.js
deleted file mode 100644
index 8b745e78e0f70703b5396ed3bf92b28aefeedd43..0000000000000000000000000000000000000000
--- a/src/pages/Home.js
+++ /dev/null
@@ -1,394 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Grid, RadioGroup, FormControlLabel, FormControl, FormLabel, Radio, Card, CardContent, Typography, AlertTitle } from '@mui/material';
-import {Button, TextField, Checkbox, Alert} from '@mui/material';
-import { useForm, Controller} from "react-hook-form";
-import SendIcon from '@mui/icons-material/Send';
-import { CardActions, Collapse, IconButton } from "@mui/material";
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { styled } from '@mui/material/styles';
-import {useNavigate, Route} from "react-router-dom";
-
-
-
-
-const ExpandMore = styled((props) => {
- const { expand, ...other } = props;
- return <IconButton {...other} />;
- })(({ theme, expand }) => ({
- transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
- marginLeft: 'auto',
- transition: theme.transitions.create('transform', {
- duration: theme.transitions.duration.shortest,
- }),
- }));
-
-
-
-
-export default function Home() {
- const [selectLearner, setSelectLearner] = useState([]);
- const [selectAction, setSelectAction] = useState([]);
-
- // for form submission
- const {register, control, handleSubmit, setValue, watch, formState: { errors, dirtyFields}} = useForm();
- const watchFileds = watch(['select_dataset', 'select_network']);
-
- let navigate = useNavigate();
-
- const onSubmit = async (data) => {
- console.log('data', data);
-
- const formData = new FormData();
-
- formData.append("ds_upload", data.ds_upload[0]);
- formData.append("network_upload", data.network_upload[0]);
- formData.append("batch_size", data.batch_size)
- formData.append("toy_size", data.toy_size)
- formData.append("iterations", data.iterations)
- formData.append("learning_rate", data.learning_rate)
- formData.append("select_action", data.select_action)
- formData.append("select_dataset", data.select_dataset)
- formData.append("select_learner", data.select_learner)
- formData.append("select_network", data.select_network)
-
- console.log('>>> this is the user input in formData')
- for (var key of formData.entries()) {
- console.log(key[0] + ', ' + key[1])}
-
- var responseClone
- const res = await fetch('/home', {
- method: 'POST',
- body: formData
- }).then((response) => response.json());
-
- navigate('/confirm', {replace:true});
- //
- ///////// testing
- // .then((response)=> {
- // responseClone = response.clone(); // 2
- // return response.json();
- // })
- // .then(function (data) {
- // console.log('data from flask', data)
- // }, function (rejectionReason) { // 3
- // console.log('Error parsing JSON from response:', rejectionReason, responseClone); // 4
- // responseClone.text() // 5
- // .then(function (bodyText) {
- // console.log('Received the following instead of valid JSON:', bodyText); // 6
- // });
- // });
-
- };
-
-
- // body: JSON.stringify(data)
- // console.log('errors', errors);
- // console.log('handleSubmit', handleSubmit)
-
-
- // handling action selection
- const handleActionSelect = (value) => {
- const isPresent = selectAction.indexOf(value);
- if (isPresent !== -1) {
- const remaining = selectAction.filter((item) => item !== value);
- setSelectAction(remaining);
- } else {
- setSelectAction((prevItems) => [...prevItems, value]);
- }
- };
-
- useEffect(() => {
- setValue('select_action', selectAction);
- }, [selectAction]);
-
- // collpase
- const [expanded, setExpanded] = React.useState(false);
-
- const handleExpandClick = () => {
- setExpanded(!expanded);
- };
-
- return (
- <div className="App" style={{padding:"60px"}}>
- <Typography gutterBottom variant="h3" align="center" >
- Data Auto-Augmentation
- </Typography>
- <Grid >
- <form action="/home" method="POST" onSubmit={handleSubmit(onSubmit)}>
- <Grid style={{padding:"30px 0px"}}>
- <Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
- <CardContent>
- <Typography gutterBottom variant="h5" align="left">
- Dataset Uploading
- </Typography>
-
- <FormControl style={{ maxWidth: 800, padding:"20px"}} error={Boolean(errors.select_dataset)}>
- <FormLabel id="select_dataset" align="left" variant="h6">
- Please select the dataset you'd like to use here or select 'Other' if you would like to upload your own dataset
- </FormLabel>
- <Controller
- name='select_dataset'
- control={control}
- rules={{ required: true }}
- render={({field: { onChange, value }}) => (
- <RadioGroup
- row
- aria-labelledby="select_dataset"
- // defaultValue="Other"
- name="select_dataset"
- align="centre"
- value={value ?? ""}
- onChange={onChange}
- >
- <FormControlLabel value="MNIST" control={<Radio />} label="MNIST" />
- <FormControlLabel value="KMNIST" control={<Radio />} label="KMNIST" />
- <FormControlLabel value="FashionMNIST" control={<Radio />} label="FashionMNIST" />
- <FormControlLabel value="CIFAR10" control={<Radio />} label="CIFAR10" />
- <FormControlLabel value="CIFAR100" control={<Radio />} label="CIFAR100" />
- <FormControlLabel value="Other" control={<Radio />} label="Other" />
- </RadioGroup>
- )}
- />
- {errors.select_dataset && errors.select_dataset.type === "required" &&
- <Alert severity="error">
- <AlertTitle>This field is required</AlertTitle>
- </Alert>}
- {watchFileds[0]!=='Other' &&
- <input
- {...register('ds_upload')}
- name="ds_upload"
- type="file"
- hidden
- />}
- {watchFileds[0]==='Other' &&
- <Button
- variant="contained"
- component="label"
- >
- Upload File
- <input
- {...register('ds_upload')}
- name="ds_upload"
- type="file"
- hidden
- />
- </Button>
- }
- {dirtyFields.ds_upload && <Alert severity="success" variant='outlined'>File Submitted</Alert>}
- </FormControl>
- </CardContent>
- </Card>
- </Grid>
- <Grid style={{padding:"30px 0px"}}>
- <Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
- <CardContent>
- <Typography gutterBottom variant="h5" align="left">
- Network Uploading
- </Typography>
-
- <FormControl style={{ maxWidth: 800, padding:"20px"}} error={Boolean(errors.select_network)}>
- <FormLabel id="select_network" align="left" variant="h6">
- Please select the network you'd like to use here or select 'Other' if you would like to upload your own network
- </FormLabel>
- <Controller
- name='select_network'
- control={control}
- rules={{ required: true }}
- render={({field: { onChange, value }}) => (
- <RadioGroup
- row
- aria-labelledby="select_network"
- name="select_network"
- align="centre"
- value={value ?? ""}
- onChange={onChange}
- >
- <FormControlLabel value="LeNet" control={<Radio />} label="LeNet" />
- <FormControlLabel value="SimpleNet" control={<Radio />} label="SimpleNet" />
- <FormControlLabel value="EasyNet" control={<Radio />} label="EasyNet" />
- <FormControlLabel value="Other" control={<Radio />} label="Other" />
- </RadioGroup> )}
- />
- {errors.select_network && errors.select_network.type === "required" &&
- <Alert severity="error">
- <AlertTitle>This field is required</AlertTitle>
- </Alert>}
- <Typography style={{ maxWidth: 750}} variant="body2" color="textSecondary" component="p" gutterBottom align="left">
- The networks provided above are for demonstration purposes. The relative training time is: LeNet {'>'} SimpleNet {'>'} EasyNet.
- We recommend you to choose EasyNet for a quick demonstration of how well our auto-augment agents can perform.
- </Typography>
- {watchFileds[1]!=='Other' &&
- <input
- {...register('network_upload')}
- name="network_upload"
- type="file"
- hidden
- />}
- {watchFileds[1]==='Other' &&
- <Button
- variant="contained"
- component="label"
- >
- Upload File
- <input
- {...register('network_upload')}
- name="network_upload"
- type="file"
- hidden
- />
- </Button>
- }
- {dirtyFields.network_upload && <Alert severity="success" variant='outlined'>File Submitted</Alert>}
- </FormControl>
- </CardContent>
- </Card>
- </Grid>
-
- <Grid style={{padding:"30px 0px"}}>
- <Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
- <CardContent>
- <Typography gutterBottom variant="h5" align="left">
- Auto-augment Learner Selection
- </Typography>
-
- <FormControl style={{ maxWidth: 800, padding:"20px"}} error={Boolean(errors.select_learner)}>
- <FormLabel id="select_learner" align="left" variant="h6">
- Please select the auto-augment learners you'd like to use (multiple learners can be selected)
- </FormLabel>
- <Controller
- name='select_learner'
- control={control}
- rules={{ required: true }}
- render={({field: { onChange, value }}) => (
- <RadioGroup
- row
- aria-labelledby="select_learner"
- name="select_learner"
- align="centre"
- value={value ?? ""}
- onChange={onChange}
- >
- <FormControlLabel value="UCB learner" control={<Radio />} label="UCB learner" />
- <FormControlLabel value="Evolutionary learner" control={<Radio />} label="Evolutionary learner" />
- <FormControlLabel value="Random Searcher" control={<Radio />} label="Random Searcher" />
- <FormControlLabel value="GRU Learner" control={<Radio />} label="GRU Learner" />
- </RadioGroup> )}
- />
- {errors.select_learner && errors.select_learner.type === "required" &&
- <Alert severity="error">
- <AlertTitle>This field is required</AlertTitle>
- </Alert>}
- <Typography style={{ maxWidth: 800}} variant="body2" color="textSecondary" component="p" gutterBottom align="left">
- (give user some recommendation here...)
- </Typography>
- </FormControl>
- </CardContent>
- </Card>
- </Grid>
-
-
- <Grid style={{padding:"30px 0px", maxWidth: 900, margin: "0 auto"}}>
- <Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
- <CardContent>
- <Typography variant="h5" align="left">
- Advanced Search
- </Typography>
- </CardContent>
- <CardActions disableSpacing>
- <ExpandMore
- expand={expanded}
- onClick={handleExpandClick}
- aria-expanded={expanded}
- aria-label="show more"
- >
- <ExpandMoreIcon />
- </ExpandMore>
- </CardActions>
- <Collapse in={expanded} timeout="auto" unmountOnExit>
- <Grid container
- spacing={0}
- direction="column"
- alignItems="center"
- justify="center">
- <CardContent>
- <Typography gutterBottom variant="subtitle1" align='left'>
- Please input the hyperparameter you'd like to train your dataset with
- </Typography>
- <Grid container spacing={1} style={{maxWidth:800, padding:"10px 10px"}}>
- <Grid xs={12} sm={6} item>
- <TextField type="number" InputProps={{ inputProps: { min: 0} }} {...register("batch_size")} name="batch_size" placeholder="Batch Size" label="Batch Size" variant="outlined" fullWidth />
- </Grid>
- <Grid xs={12} sm={6} item>
- <TextField type="number" inputProps={{step: "0.000000001",min: 0}} {...register("learning_rate")} name="learning_rate" placeholder="Learning Rate" label="Learning Rate" variant="outlined" fullWidth />
- </Grid>
- <Grid xs={12} sm={6} item>
- <TextField type="number" InputProps={{ inputProps: { min: 0} }} {...register("iterations")} name="iterations" placeholder="Number of Iterations" label="Iterations" variant="outlined" fullWidth />
- </Grid>
- <Grid xs={12} sm={6} item>
- <TextField type="number" inputProps={{step: "0.01", min: 0}} {...register("toy_size")} name="toy_size" placeholder="Dataset Proportion" label="Dataset Proportion" variant="outlined" fullWidth />
- </Grid>
- <FormLabel variant="h8" align='centre'>
- * Dataset Proportion defines the percentage of original dataset our auto-augment learner will use to find the
- augmentation policy. If your dataset is large, we recommend you to set Dataset Proportion a small value (0.1-0.3).
- </FormLabel>
- </Grid>
-
- <Grid style={{maxWidth:800, padding:"40px 10px"}}>
- <Typography gutterBottom variant="subtitle1" align='left'>
- Please select augmentation methods you'd like to exclude
- </Typography>
- <div>
- {['ShearX', 'ShearY', 'TranslateX', 'TranslateY', 'Rotate', 'Brightness',
- 'Color', 'Contrast', 'Sharpness', 'Posterize', 'Solarize', 'AutoContrast',
- 'Equalize', 'Invert'].map((option) => {
- return (
- <FormControlLabel
- control={
- <Controller
- name='select_action'
- render={({}) => {
- return (
- <Checkbox
- checked={selectAction.includes(option)}
- onChange={() => handleActionSelect(option)}/> );
- }}
- control={control}
- />}
- label={option}
- key={option}
- />
- );
- })}
- </div>
- </Grid>
- </CardContent>
- </Grid>
- </Collapse>
-
- </Card>
- </Grid>
-
- <Button
- type="submit"
- variant="contained"
- color='success'
- size='large'
- endIcon={<SendIcon />}
- >
- Submit Form
- </Button>
- {watchFileds[0]==='Other' && !dirtyFields.ds_upload &&
- <Alert severity="error" variant='standard'>Please upload your dataset
- zip file or select one of the dataset we have provided</Alert>}
- {watchFileds[1]==='Other' && !dirtyFields.network_upload &&
- <Alert severity="error" variant='standard'>Please upload your network
- .pkl file or select one of the network we have provided</Alert>}
-
- </form>
-
- </Grid>
- </div>
-
- );
- }
-
diff --git a/src/pages/Progress.js b/src/pages/Progress.js
deleted file mode 100644
index 2dee4fb594b7771a0d3e468065f50f0005bd376c..0000000000000000000000000000000000000000
--- a/src/pages/Progress.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React, { useState, useEffect } from "react";
-import { Grid, LinearProgress, Card, CardContent, Typography, Button, TextField } from '@mui/material';
-import CheckCircleOutlineRoundedIcon from '@mui/icons-material/CheckCircleOutlineRounded';
-import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
-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 => {setStatus(data.status); console.log(data.status)});
-
-
- }, []);
-
- const onSubmit = async () => {
- navigate('/result', {replace:true});
- }
-
- return (
- <div className="App" style={{padding:"60px"}}>
- <Typography gutterBottom variant="h3" align="center" >
- Data Auto-Augmentation
- </Typography>
- <Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
- <CardContent>
- <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>
-
- {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>
-
- </div>
- )
-}
\ No newline at end of file
diff --git a/src/pages/Result.js b/src/pages/Result.js
deleted file mode 100644
index 70dec30c7784651f839bdf6e1b56f04c72946f8c..0000000000000000000000000000000000000000
--- a/src/pages/Result.js
+++ /dev/null
@@ -1,61 +0,0 @@
-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"}}>
- <Typography gutterBottom variant="h3" align="center" >
- Data Auto-Augmentation
- </Typography>
- <Card style={{ maxWidth: 900, padding: "10px 5px", margin: "0 auto" }}>
- <CardContent>
- <Typography gutterBottom variant="h5" align="left">
- Here are the results from our auto-augment agent:
- </Typography>
- <Grid style={{padding:"30px"}} container spacing={4} alignItems="center">
- <Grid xs={7} item>
- <img src={output} alt='output' />
- </Grid>
- <Grid xs={5} item>
- <Typography>
- write something here to explain the meaning of the graph to the user
- </Typography>
- </Grid>
- </Grid>
-
- <Typography gutterBottom variant='h6' align='center'>
- You can download the augentation policy here
- </Typography>
- <Button
- type="submit"
- variant="contained"
- color='primary'
- size='large'
- onClick={() => handleClick('https://avatars.githubusercontent.com/u/9919?s=280&v=4', 'sample')}
- >
- Download
- </Button>
- <Typography>
- Please follow our documentation to apply this policy to your dataset.
- </Typography>
- </CardContent>
- </Card>
-
- </div>
- )
-}
\ No newline at end of file
diff --git a/src/pages/WrongDS.js b/src/pages/WrongDS.js
deleted file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..0000000000000000000000000000000000000000
diff --git a/src/pages/pytest.png b/src/pages/pytest.png
deleted file mode 100644
index 272b44ed38c9107f19c99dc9a5ac38593493604f..0000000000000000000000000000000000000000
Binary files a/src/pages/pytest.png and /dev/null differ
diff --git a/src/reportWebVitals.js b/src/reportWebVitals.js
deleted file mode 100644
index 5253d3ad9e6be6690549cb255f5952337b02401d..0000000000000000000000000000000000000000
--- a/src/reportWebVitals.js
+++ /dev/null
@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
- if (onPerfEntry && onPerfEntry instanceof Function) {
- import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
- getCLS(onPerfEntry);
- getFID(onPerfEntry);
- getFCP(onPerfEntry);
- getLCP(onPerfEntry);
- getTTFB(onPerfEntry);
- });
- }
-};
-
-export default reportWebVitals;
diff --git a/src/setupTests.js b/src/setupTests.js
deleted file mode 100644
index 8f2609b7b3e0e3897ab3bcaad13caf6876e48699..0000000000000000000000000000000000000000
--- a/src/setupTests.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
diff --git a/test/web_app/test_flask_routes.py b/test/web_app/test_flask_routes.py
index f3dac791abd53b9316a8fa4ad087b2ae5eca43cc..cbbfb558ec8b5ef75315c191a420648c4975e58d 100644
--- a/test/web_app/test_flask_routes.py
+++ b/test/web_app/test_flask_routes.py
@@ -1,6 +1,6 @@
import pytest
import unittest
-from backend_react import react_app
+from . import react_app
import json