Unverified Commit 300d492d authored by Lijiaoa's avatar Lijiaoa Committed by GitHub
Browse files

rewrite webui development doc README (#4489)

parent c56568c9
# WebUI # WebUI
## View summary page WebUI is built by using [React](https://reactjs.org/docs/getting-started.html) and [fluentui](https://developer.microsoft.com/en-us/fluentui#/controls/web).
Click the tab "Overview".
* See the experiment parameters. ## Development
* See good performance trial.
* See search_space json.
## View job accuracy * Please refer the [installation doc](https://github.com/microsoft/nni#installation) to run an experiment.
* WebUI uses [eslint](https://eslint.org/docs/user-guide/getting-started) and [prettier](https://prettier.io/docs/en/index.html) to format code. You could change the eslintrc file like this picture when you are coding.
Click the tab "Default Metric" to see the point graph of all trials. Hover every point to see its specific accuracy. <img src="../../docs/img/webui-img/rules.png" />
## View hyper parameter * Use this command in `webui/ts` directory when you want to see latest website.
```bash
yarn build
```
Click the tab "Hyper Parameter" to see the parallel graph. ## PR
* You can select the percentage to see top trials. * If you need to send the PR, you should change the eslintrc file back and use the command `yarn eslint` to check style. And `yarn eslint --fix` could fix almost warnings and errors. Also use `yarn stylelint` to confirm `.scss & .css` style.
* Choose two axis to swap its positions \ No newline at end of file
## View trial status
Click the tab "Trials Detail" to see the status of the all trials. Specifically:
* Trial duration: trial's duration in the bar graph.
* Trial detail: trial's id, trial's duration, start time, end time, status, accuracy and search space file.
* Kill: you can kill a job that status is running.
## Feedback
[Known Issues](https://github.com/Microsoft/nni/issues).
# Web 界面
## 查看概要页面
点击标签 "Overview"。
* 查看 Experiment 参数。
* 查看最好结果的 Trial。
* 查看搜索空间 JSON 文件。
## 查看任务准确度
点击 "Default Metric" 来查看所有尝试的点图。 将鼠标悬停到某个点查看其准确度。
## 查看超参
点击 "Hyper Parameter" 标签查看图像。
* 可选择百分比查看最好的 Trial。
* 选择两个轴来交换位置。
## 查看 Trial 状态
点击 "Trials Detail" 标签查看所有 Trial 的状态。 特别是:
* Trial duration:Trial 执行时间的条形图。
* Trial 详情:Trial 的 id,持续时间,开始时间,结束时间,状态,精度和搜索空间。
* Kill: 可终止正在运行的任务。
## 反馈
[已知问题](https://github.com/Microsoft/nni/issues)
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment