ayo/ipex-llm
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

[Nano/Chronos] Restyle installation panel (#7686)

Browse source 
* 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 2023-02-24 17:21:24 +08:00 committed by GitHub
parent 51b8ff3728
commit 6d174f8012
6 changed files with 66 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
docs/readthedocs/source/_static/css/chronos_installation_guide.css
View file

@ -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;
}

28
docs/readthedocs/source/_static/css/nano_installation_guide.css → docs/readthedocs/source/_static/css/installation_panel.css
View file

@ -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;
}

12
docs/readthedocs/source/_static/js/chronos_installation_guide.js → docs/readthedocs/source/_static/js/chronos_installation_panel.js
View file

@ -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();

2
docs/readthedocs/source/_static/js/nano_installation_guide.js → docs/readthedocs/source/_static/js/nano_installation_panel.js
View file

@ -168,6 +168,6 @@ $(document).on({
$(this).css("color","var(--pst-color-text-base)");
}
}
}, ".install_option_button");
}, "installation-panel-table button");
refresh_cmd();

64
docs/readthedocs/source/doc/Chronos/Overview/install.md
View file

@ -7,16 +7,18 @@
```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:
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.
```
```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>`_.
@ -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&nbsp;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>

8
docs/readthedocs/source/doc/Nano/Overview/install.md
View file

@ -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