[Nano/Chronos] Restyle installation panel (#7686)
* Fix to nano installation panel styles to avoid swing behaviour * Generalize the installation panel css for chronos and nano, and make some improvements
This commit is contained in:
Yuwen Hu
GitHub
parent
51b8ff3728
commit
6d174f8012
6 changed files with 66 additions and 108 deletions
|
|
@ -1,52 +0,0 @@
|
|||
.displayed {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#table-1 {
|
||||
border-bottom-width: 0px;
|
||||
margin:auto;
|
||||
}
|
||||
|
||||
#table-1 tr, td{
|
||||
background-color: var(--pst-color-on-surface);
|
||||
height: 30px;
|
||||
border-width: 2px;
|
||||
border-style: solid;
|
||||
border-color: white ;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
#table-1 tr td:first-child{
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
#table-1 td{
|
||||
font-size: 16px;
|
||||
font-family: Verdana;
|
||||
color: var(--pst-color-text-base);
|
||||
text-align: center;
|
||||
/* height: 56px;
|
||||
line-height: 56px; */
|
||||
width: 160px;
|
||||
}
|
||||
|
||||
#table-1 button {
|
||||
font-size: 16px;
|
||||
border-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#table-1 #cmd {
|
||||
height: 2em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
#table-1 .taller_tr {
|
||||
height: 71px;
|
||||
}
|
||||
|
|
@ -1,38 +1,40 @@
|
|||
.displayed {
|
||||
.installation-panel-wrapper {
|
||||
display: block;
|
||||
text-align: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
#table-1 {
|
||||
.installation-panel-table {
|
||||
border-bottom-width: 0px;
|
||||
margin: auto;
|
||||
font-size: var(--pst-font-size-base);
|
||||
font-family: Verdana;
|
||||
color: var(--pst-color-text-base);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
table-layout: fixed; /* make cells have even width */
|
||||
}
|
||||
|
||||
#table-1 tr, td{
|
||||
.installation-panel-table tr, td{
|
||||
padding: 0.5rem;
|
||||
background-color: var(--pst-color-on-surface);
|
||||
}
|
||||
|
||||
#table-1 td{
|
||||
.installation-panel-table td{
|
||||
border: 0.25rem solid var(--pst-color-background);
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#table-1 tr td:first-child{
|
||||
.installation-panel-table tr td:first-child{
|
||||
font-weight: 600;
|
||||
background-color: var(--pst-color-background);
|
||||
border-left: 0.2rem solid var(--pst-color-on-surface);
|
||||
text-align: left;
|
||||
width: 170px;
|
||||
width: 25%;
|
||||
font-size: 13.5px;
|
||||
}
|
||||
|
||||
#table-1 button {
|
||||
.installation-panel-table button {
|
||||
border-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
@ -40,7 +42,13 @@
|
|||
cursor: pointer;
|
||||
}
|
||||
|
||||
#table-1 #cmd {
|
||||
.installation-panel-table #cmd {
|
||||
text-align: left;
|
||||
padding: 0.5rem 0.25rem
|
||||
padding: 0.5rem 0.25rem;
|
||||
}
|
||||
|
||||
/* for cells that is a little bit longer to put inside a single line */
|
||||
.installation-panel-table .fitting-cell{
|
||||
padding: 0rem;
|
||||
font-size: 14.5px;
|
||||
}
|
||||
|
|
@ -47,18 +47,18 @@ function refresh_cmd(){
|
|||
$("#model").empty();
|
||||
if(functionality=="Forecasting"){
|
||||
$("#model").append("<td colspan='1'>Model</td>\
|
||||
<td colspan='1'><button id='Deep_learning_models'>Deep learning models</button></td>\
|
||||
<td colspan='2'><button id='Deep_learning_models'>Deep learning</button></td>\
|
||||
<td colspan='2'><button id='Prophet'>Prophet</button></td>\
|
||||
<td colspan='1'><button id='ARIMA'>ARIMA</button></td>");
|
||||
<td colspan='2'><button id='ARIMA'>ARIMA</button></td>");
|
||||
}
|
||||
else if(functionality=="Anomaly"){
|
||||
$("#model").append("<td colspan='1'>Model</td>\
|
||||
<td colspan='2'><button id='Deep_learning_models'>Deep learning models</button>\
|
||||
<td colspan='2'><button id='Machine_learning_models'>Machine learning models</button></td>");
|
||||
<td colspan='3'><button id='Deep_learning_models'>Deep learning</button>\
|
||||
<td colspan='3'><button id='Machine_learning_models'>Machine learning</button></td>");
|
||||
}
|
||||
else if(functionality=="Simulation"){
|
||||
$("#model").append("<td colspan='1'>Model</td>\
|
||||
<td colspan='4'><button id='Deep_learning_models'>Deep learning models</button>");
|
||||
<td colspan='6'><button id='Deep_learning_models'>Deep learning</button>");
|
||||
}
|
||||
reset_color(models);
|
||||
set_color(model);
|
||||
|
|
@ -547,6 +547,6 @@ $(document).on({
|
|||
$(this).css("color","var(--pst-color-text-base)");
|
||||
}
|
||||
}
|
||||
}, "button");
|
||||
}, "installation-panel-table button");
|
||||
|
||||
refresh_cmd();
|
||||
|
|
@ -168,6 +168,6 @@ $(document).on({
|
|||
$(this).css("color","var(--pst-color-text-base)");
|
||||
}
|
||||
}
|
||||
}, ".install_option_button");
|
||||
}, "installation-panel-table button");
|
||||
|
||||
refresh_cmd();
|
||||
|
|
@ -7,21 +7,23 @@
|
|||
|
||||
```eval_rst
|
||||
.. note::
|
||||
|
||||
**Supported OS**:
|
||||
|
||||
Chronos is thoroughly tested on Ubuntu (16.04/18.04/20.04), and should works fine on CentOS. If you are a Windows user, there are 2 ways to use Chronos:
|
||||
Chronos is thoroughly tested on Ubuntu (16.04/18.04/20.04), and should works fine on CentOS. If you are a Windows user, there are 2 ways to use Chronos:
|
||||
|
||||
1. You could use Chronos on a windows laptop with WSL2 (you may refer to https://docs.microsoft.com/en-us/windows/wsl/setup/environment) or just install a ubuntu virtual machine.
|
||||
1. You could use Chronos on a windows laptop with WSL2 (you may refer to `here <https://docs.microsoft.com/en-us/windows/wsl/setup/environment>`_) or just install a ubuntu virtual machine.
|
||||
|
||||
2. You could use Chronos on native Windows, but some features are unavailable in this case, the limitations will be shown below.
|
||||
2. You could use Chronos on native Windows, but some features are unavailable in this case, the limitations will be shown below.
|
||||
```
|
||||
```eval_rst
|
||||
.. note::
|
||||
|
||||
**Supported Python Version**:
|
||||
|
||||
Chronos supports all installation options on Python 3.7.2 ~ latest 3.7.x. For details about different installation options, refer to `here <#install-using-conda>`_.
|
||||
Chronos supports all installation options on Python 3.7.2 ~ latest 3.7.x. For details about different installation options, refer to `here <#install-using-conda>`_.
|
||||
|
||||
Moreover, ``bigdl-chronos[pytorch]``, ``bigdl-chronos[tensorflow]``, ``bigdl-chronos[automl]`` and ``bigdl-chronos[inference]`` are supported on Python 3.8.
|
||||
Moreover, ``bigdl-chronos[pytorch]``, ``bigdl-chronos[tensorflow]``, ``bigdl-chronos[automl]`` and ``bigdl-chronos[inference]`` are supported on Python 3.8.
|
||||
```
|
||||
|
||||
|
||||
|
|
@ -35,82 +37,82 @@ Select your preferences in the panel below to find the proper install command. T
|
|||
```eval_rst
|
||||
.. raw:: html
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../_static/css/chronos_installation_guide.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../../_static/css/installation_panel.css" />
|
||||
|
||||
<div class="displayed">
|
||||
<div class="installation-panel-wrapper">
|
||||
|
||||
<table id="table-1">
|
||||
<table class="installation-panel-table">
|
||||
<tbody>
|
||||
<tr class="taller_tr">
|
||||
<tr>
|
||||
<td colspan="1">Functionality</td>
|
||||
<td colspan="1"><button id="Forecasting">Forecasting</button></td>
|
||||
<td colspan="2"><button id="Anomaly" style="font-size: 15px">Anomaly Detection</button></td>
|
||||
<td colspan="1"><button id="Simulation">Simulation</button></td>
|
||||
<td colspan="2"><button id="Forecasting">Forecasting</button></td>
|
||||
<td colspan="2"><button id="Anomaly" class="fitting-cell">Anomaly Detection</button></td>
|
||||
<td colspan="2"><button id="Simulation">Simulation</button></td>
|
||||
</tr>
|
||||
<tr id="model" class="taller_tr">
|
||||
<tr id="model">
|
||||
<td colspan="1">Model</td>
|
||||
<td colspan="1"><button id="Deep_learning_models" style="font-size: 13px;">Deep learning models</button></td>
|
||||
<td colspan="2"><button id="Deep_learning_models">Deep learning</button></td>
|
||||
<td colspan="2"><button id="Prophet">Prophet</button></td>
|
||||
<td colspan="1"><button id="ARIMA">ARIMA</button></td>
|
||||
<td colspan="2"><button id="ARIMA">ARIMA</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">DL framework</td>
|
||||
<td colspan="2"><button id="pytorch"
|
||||
<td colspan="1">DL framework</td>
|
||||
<td colspan="3"><button id="pytorch"
|
||||
title="Use PyTorch as deep learning models' backend. Most of the model support and works better under PyTorch.">PyTorch (Recommended)</button>
|
||||
</td>
|
||||
<td colspan="2"><button id="tensorflow"
|
||||
title="Use Tensorflow as deep learning models' backend.">Tensorflow</button></td>
|
||||
<td colspan="3"><button id="tensorflow"
|
||||
title="Use Tensorflow as deep learning models' backend.">TensorFlow</button></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="1">OS</td>
|
||||
<td colspan="2"><button id="linux" title="Ubuntu/CentOS is recommended">Linux</button></td>
|
||||
<td colspan="2"><button id="win" title="WSL is needed for Windows users">Windows</button></td>
|
||||
<td colspan="3"><button id="linux" title="Ubuntu/CentOS is recommended">Linux</button></td>
|
||||
<td colspan="3"><button id="win" title="WSL is needed for Windows users">Windows</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="1">Auto Tuning</td>
|
||||
<td colspan="2" title="I don't need any hyperparameter auto tuning feature."><button
|
||||
<td colspan="3" title="I don't need any hyperparameter auto tuning feature."><button
|
||||
id="automlno">No</button></td>
|
||||
<td colspan="2" title="I need chronos to help me tune the hyperparameters."><button
|
||||
<td colspan="3" title="I need chronos to help me tune the hyperparameters."><button
|
||||
id="automlyes">Yes</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="1">Inference Optimization</td>
|
||||
<td colspan="2" title="No need for low-latency inference models"><button id="inferenceno">No</button></td>
|
||||
<td colspan="2" title="Get low-latency inference models with onnx\openvino\inc"><button id="inferenceyes">Yes</button></td>
|
||||
<td colspan="1">Inference Opt</td>
|
||||
<td colspan="3" title="No need for low-latency inference models"><button id="inferenceno">No</button></td>
|
||||
<td colspan="3" title="Get low-latency inference models with onnx\openvino\inc"><button id="inferenceyes">Yes</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="1">Hardware</td>
|
||||
<td colspan="2"><button id="singlenode" title="For users use laptop/single node server.">Single
|
||||
<td colspan="3"><button id="singlenode" title="For users use laptop/single node server.">Single
|
||||
node</button></td>
|
||||
<td colspan="2"><button id="cluster" title="For users use K8S/Yarn Cluster.">Cluster</button></td>
|
||||
<td colspan="3"><button id="cluster" title="For users use K8S/Yarn Cluster.">Cluster</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="1">Package</td>
|
||||
<td colspan="2"><button id="pypi" title="For users use pip to install chronos.">Pip</button></td>
|
||||
<td colspan="2"><button id="docker" title="For users use docker image.">Docker</button></td>
|
||||
<td colspan="3"><button id="pypi" title="For users use pip to install chronos.">Pip</button></td>
|
||||
<td colspan="3"><button id="docker" title="For users use docker image.">Docker</button></td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td colspan="1">Version</td>
|
||||
<td colspan="2"><button id="nightly"
|
||||
<td colspan="3"><button id="nightly"
|
||||
title="For users would like to try chronos's latest feature">Nightly</button></td>
|
||||
<td colspan="2"><button id="stable"
|
||||
<td colspan="3"><button id="stable"
|
||||
title="For users would like to deploy chronos in their production">Stable</button></td>
|
||||
</tr>
|
||||
|
||||
<tr class="taller_tr">
|
||||
<tr>
|
||||
<td colspan="1">Install CMD</td>
|
||||
<td colspan="4" id="cmd">NA</td>
|
||||
<td colspan="6" id="cmd">NA</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<script src="../../../_static/js/chronos_installation_guide.js"></script>
|
||||
<script src="../../../_static/js/chronos_installation_panel.js"></script>
|
||||
```
|
||||
|
||||
</br>
|
||||
|
|
|
|||
|
|
@ -5,10 +5,10 @@ You can select bigdl-nano along with some dependencies specific to PyTorch or Te
|
|||
```eval_rst
|
||||
.. raw:: html
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="../../../_static/css/nano_installation_guide.css" />
|
||||
<link rel="stylesheet" type="text/css" href="../../../_static/css/installation_panel.css" />
|
||||
|
||||
<div class="displayed">
|
||||
<table id="table-1">
|
||||
<div class="installation-panel-wrapper">
|
||||
<table class="installation-panel-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="1">FrameWork</td>
|
||||
|
|
@ -40,7 +40,7 @@ You can select bigdl-nano along with some dependencies specific to PyTorch or Te
|
|||
</table>
|
||||
</div>
|
||||
|
||||
<script src="../../../_static/js/nano_installation_guide.js"></script>
|
||||
<script src="../../../_static/js/nano_installation_panel.js"></script>
|
||||
```
|
||||
|
||||
```eval_rst
|
||||
|
|
|
|||
Loading…
Reference in a new issue