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

Chronos: installation panel enhancement (#5588)

Browse source 
* Update:installation panel enhancement
Left a bug to fix and install CMD to revise.

* Bugfix: Fixed a bug when using Firefox browser to use the install guide form.
Fixed the bug that the table's background color may be changed by mistake on Firefox browser.

* Update: update panel as comment required.

* Bugfix: fixed a bug in js file that will show wrong cmd when clicking 'windows' or 'docker'.

* Bugfix: fixed the bug that 'cmd' shows incorrectly when clicking 'prophet' and 'ARIMA'.
This commit is contained in:
Juntao_Luo 2022-09-01 21:11:59 +08:00 committed by GitHub
parent 57e46c6160
commit 0f1cfd82ff
3 changed files with 318 additions and 274 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,51 +1,49 @@
/* Border styles */
#table-1 tr, #table-1 td, #table-1 th {
.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: rgb(240, 241, 245);
height: 30px;
border-width: 2px;
border-style: solid;
border-color: white ;
padding: 5px;
}
}
#table-1 {
border-bottom-width: 0px;
}
#table-1 tr td:first-child{
font-weight: 600;
}
/* Padding and font style */
#table-1 td, #table-1 th {
#table-1 td{
font-size: 16px;
font-family: Verdana;
color: rgb(15, 24, 33);
}
text-align: center;
/* height: 56px;
line-height: 56px; */
width: 160px;
}
/* Alternating background colors */
#table-1 tr, td{
background-color: rgb(240, 241, 245);
height: 30px;
}
.displayed {
display: block;
text-align: center;
margin-left: auto;
margin-right: auto }
/* setting div id=cmd width */
#cmd {
width: 450px;
height: 35px;
overflow:unset;
}
td, th {
text-align: center;
}
#table-1 button {
border-color: transparent;
width: 100%;
height: 100%;
background-color: transparent;
cursor: pointer;
font-size: 16px;
}
#table-1 button {
font-size: 16px;
border-color: transparent;
width: 100%;
height: 100%;
background-color: transparent;
cursor: pointer;
}
#cmd {
width: auto;
height: 35px;
overflow:unset;
}

456
docs/readthedocs/source/_static/js/chronos_installation_guide.js
View file

@ -1,24 +1,217 @@
var ais = ["pytorch", "tensorflow", "prophet", "pmdarima"];
var releases=["stable", "nightly"]
//initialize all needed variables(id of buttons)
var functionalities = ["Forecasting","Anomaly","Simulation"];
var models = ["Prophet", "ARIMA","Deep_learning_models","Machine_learning_models"];
var ais = ["pytorch", "tensorflow"];
var oss=["linux", "win"];
var ways=["pypi", "docker"];
var automls=["automlyes", "automlno"];
var hardwares=["singlenode", "cluster"];
var automls=["automlyes", "automlno"]
var packages=["pypi", "docker"];
var versions=["stable", "nightly"];
//defalut selected burttons' ids
var functionality="Forecasting";
var model="Deep_learning_models";
var ai="pytorch";
var os="linux";
var release="nightly";
var way="pypi";
var automl="automlno";
var hardware="singlenode";
var automl="automlno"
var package="pypi";
var version="nightly";
//main func, to decide what is showed in cmd
function refresh_cmd(){
//refresh all the buttons
reset_color(functionalities);
reset_color(ais);
reset_color(oss);
reset_color(automls);
reset_color(hardwares);
reset_color(packages);
reset_color(versions);
set_color(functionality);
set_color(ai);
set_color(os);
set_color(automl);
set_color(hardware);
set_color(package);
set_color(version);
var cmd = "NA";
//dynamically set 'model' line
$("#model").empty();
if(functionality=="Forecasting"){
$("#model").append("<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='Prophet'>Prophet</button></td>\
<td colspan='1'><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>");
}
else if(functionality=="Simulation"){
$("#model").append("<td colspan='1'>Model</td>\
<td colspan='4'><button id='Deep_learning_models'>Deep learning models</button>");
}
reset_color(models);
set_color(model);
//enable 'Deep learning framework' when Deep learning models is selected
if(model!="Deep_learning_models"){
disable(ais);
}
else{
enable(ais);
}
//disable other buttons in cases
if(package=="docker"){
disable(functionalities);
disable(models);
disable(ais);
disable(versions);
disable(oss);
disable(hardwares);
disable(automls);
cmd="Please refer to <a href=' https://github.com/intel-analytics/BigDL/tree/main/docker/chronos-nightly'>docker installation guide.</a>";
}else if(os=="win"){
disable(functionalities);
disable(models);
disable(ais);
disable(versions);
disable(packages);
disable(hardwares);
disable(automls);
cmd="Please refer to <a href='https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/windows_guide.html'>windows_guide.</a>";
}else{
enable(functionalities);
enable(models);
enable(versions);
enable(oss);
enable(packages);
enable(hardwares);
enable(automls);
//change cmd according to different choices
if(model=="Deep_learning_models"){
if(ai=="pytorch"){
if(automl=="automlno"){
if(hardware=="singlenode"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[pytorch]";
}else if(version=="stable"){
cmd="pip install bigdl-chronos";
}
}else if(hardware=="cluster"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[pytorch,distributed]";
}else if(version=="stable"){
cmd="pip install bigdl-chronos[all]";
}
}
}else if(automl=="automlyes"){
if(hardware=="singlenode"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[pytorch,automl]";
}else if(version=="stable"){
cmd="pip install bigdl-chronos[all]";
}
}else if(hardware=="cluster"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[pytorch,distributed,automl]";
}else if(version=="stable"){
cmd="pip install bigdl-chronos[all]";
}
}
}
}else if(ai=="tensorflow"){
if(package=="pypi"&&os=="linux"){
cmd="Please refer to <a href=' https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/chronos.html#tensorflow-backend'>tensorflow installation guide.</a>"
}
}
}else if(model=="Prophet"){
if(automl=="automlno"){
if(hardware=="singlenode"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos; pip install prophet==1.1.0";
}else if(version=="stable"){
cmd="pip install bigdl-chronos; pip install prophet==1.1.0";
}
}else if(hardware=="cluster"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0";
}else if(version=="stable"){
cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0";
}
}
}else if(automl=="automlyes"){
if(hardware=="singlenode"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0";
}else if(version=="stable"){
cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0";
}
}else if(hardware=="cluster"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0";
}else if(version=="stable"){
cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0";
}
}
}
}else if(model=="ARIMA"){
if(automl=="automlno"){
if(hardware=="singlenode"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos; pip install pmdarima==1.8.5";
}else if(version=="stable"){
cmd="pip install bigdl-chronos; pip install pmdarima==1.8.5";
}
}else if(hardware=="cluster"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5";
}else if(version=="stable"){
cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5";
}
}
}else if(automl=="automlyes"){
if(hardware=="singlenode"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5";
}else if(version=="stable"){
cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5";
}
}else if(hardware=="cluster"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5";
}else if(version=="stable"){
cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5";
}
}
}
}else if(model=="Machine_learning_models"){
if(version=="nightly"){
cmd="pip install --pre --upgrade bigdl-chronos";
}else if(version=="stable"){
cmd="pip install bigdl-chronos";
}
}
}
$("#cmd").html(cmd);
}
//set the color of selected buttons
function set_color(id){
$("#"+id).parent().css("background-color","rgb(74, 106, 237)");
$("#"+id).css("color","white");
$("#"+id).addClass("isset");
}
//reset the color of unselected buttons
function reset_color(list){
for (btn in list){
$("#"+list[btn]).parent().css("background-color","transparent");
@ -27,6 +220,7 @@ function reset_color(list){
}
}
//disable buttons
function disable(list){
for(btn in list){
$("#"+list[btn]).css("text-decoration","line-through");
@ -38,6 +232,7 @@ function disable(list){
}
}
//enable buttons
function enable(list){
for(btn in list){
$("#"+list[btn]).css("text-decoration","none");
@ -45,212 +240,53 @@ function enable(list){
}
}
function refresh_cmd(){
reset_color(ais);
reset_color(oss);
reset_color(releases);
reset_color(ways);
reset_color(hardwares);
reset_color(automls);
set_color(ai);
set_color(os);
set_color(release);
set_color(way);
set_color(hardware);
set_color(automl);
var cmd = "NA";
if(way=="docker"){
disable(ais);
disable(releases);
disable(oss);
disable(hardwares);
disable(automls);
cmd="Please refer to <a href=' https://github.com/intel-analytics/BigDL/tree/main/docker/chronos-nightly'>docker installation guide.</a>";
}else if(os=="win"){
disable(ais);
disable(releases);
disable(ways);
disable(hardwares);
disable(automls);
cmd="Please refer to <a href='https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/windows_guide.html'>windows_guide.</a>";
}else{
enable(ais);
enable(releases);
enable(oss);
enable(ways);
enable(hardwares);
enable(automls);
}
if(ai=="pytorch"){
if(way=="pypi"&&os=="linux"){
if(hardware=="singlenode"){
if(automl=="automlno"){
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[pytorch]"
if(release=="stable")
cmd="pip install bigdl-chronos"
}else{
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[pytorch,automl]"
if(release=="stable")
cmd="pip install bigdl-chronos[all]"
}
}
if(hardware=="cluster"){
if(automl=="automlno"){
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[pytorch,distributed]"
if(release=="stable")
cmd="pip install bigdl-chronos[all]"
}else{
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[pytorch,distributed,automl]"
if(release=="stable")
cmd="pip install bigdl-chronos[all]"
}
}
}
}
if(ai=="tensorflow"){
if(way=="pypi"&&os=="linux"){
cmd="Please refer to <a href=' https://bigdl.readthedocs.io/en/latest/doc/Chronos/Overview/chronos.html#tensorflow-backend'>tensorflow installation guide.</a>"
}
}
if(ai=="prophet"){
if(way=="pypi"&&os=="linux"){
if(hardware=="singlenode"){
if(automl=="automlno"){
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos; pip install prophet==1.1.0"
if(release=="stable")
cmd="pip install bigdl-chronos; pip install prophet==1.1.0"
}else{
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0"
if(release=="stable")
cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0"
}
}
if(hardware=="cluster"){
if(automl=="automlno"){
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0"
if(release=="stable")
cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0"
}else{
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install prophet==1.1.0"
if(release=="stable")
cmd="pip install bigdl-chronos[all]; pip install prophet==1.1.0"
}
}
}
}
if(ai=="pmdarima"){
if(way=="pypi"&&os=="linux"){
if(hardware=="singlenode"){
if(automl=="automlno"){
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos; pip install pmdarima==1.8.5"
if(release=="stable")
cmd="pip install bigdl-chronos; pip install pmdarima==1.8.5"
}else{
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5"
if(release=="stable")
cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5"
}
}
if(hardware=="cluster"){
if(automl=="automlno"){
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5"
if(release=="stable")
cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5"
}else{
if(release=="nightly")
cmd="pip install --pre --upgrade bigdl-chronos[distributed]; pip install pmdarima==1.8.5"
if(release=="stable")
cmd="pip install bigdl-chronos[all]; pip install pmdarima==1.8.5"
}
}
}
}
$("#cmd").html(cmd);
}
function set_ai(id){
ai=id;
refresh_cmd();
}
function set_os(id){
os=id;
refresh_cmd();
}
function set_rel(id){
release=id;
refresh_cmd();
}
function set_way(id){
way=id;
refresh_cmd();
}
function set_hardware(id){
hardware=id;
refresh_cmd();
}
function set_automl(id){
automl=id;
refresh_cmd();
}
$("button").click(function(){
//alert($(this).attr("id"));
//when clicked a button, update variables
$(document).on('click',"button",function(){
var id = $(this).attr("id");
if (ais.indexOf(id)>=0){
set_ai(id);
if (functionalities.indexOf(id)>=0){
functionality=id;
model="Deep_learning_models";
}
else if (models.indexOf(id)>=0){
model=id;
}
else if (ais.indexOf(id)>=0){
ai=id;
}
else if (oss.indexOf(id)>=0){
os=id;
}
else if (automls.indexOf(id)>=0){
automl=id;
}
else if (hardwares.indexOf(id)>=0){
hardware=id;
}
else if (packages.indexOf(id)>=0){
package=id;
}
else if (versions.indexOf(id)>=0){
version=id;
}
if (oss.indexOf(id)>=0){
set_os(id);
}
if (releases.indexOf(id)>=0){
set_rel(id);
}
if (ways.indexOf(id)>=0){
set_way(id);
}
if (hardwares.indexOf(id)>=0){
set_hardware(id);
}
if (automls.indexOf(id)>=0){
set_automl(id);
}
});
$("button").hover(function(){
$(this).parent().css("background-color","rgb(74, 106, 237)");
$(this).css("color","white");
},function(){
if(!$(this).hasClass("isset")){
$(this).parent().css("background-color","transparent");
$(this).css("color","black");
}
refresh_cmd();
})
//func to add button hover effect
$(document).on({
mouseenter: function () {
if($(this).prop("disabled")!=true){
$(this).parent().css("background-color","rgb(74, 106, 237)");
$(this).css("color","white");
}
},
mouseleave: function () {
if(!$(this).hasClass("isset") && $(this).prop("disabled")!=true){
$(this).parent().css("background-color","transparent");
$(this).css("color","black");
}
}
}, "button");
refresh_cmd();

58
docs/readthedocs/source/doc/Chronos/Overview/chronos.md
View file

@ -20,58 +20,68 @@ You can use _Chronos_ to do:
<link rel="stylesheet" type="text/css" href="../../../_static/css/chronos_installation_guide.css" />
<div class="displayed">
<table id="table-1" style="margin:auto">
<thead>
<th>AI Framework</th>
<th colspan="1"><button id="pytorch"
title="Use PyTorch as deep learning models' backend. Most of the model support and works better under PyTorch.">PyTorch</br>(Recommended)</button>
</th>
<th colspan="1"><button id="tensorflow"
title="Use Tensorflow as deep learning models' backend.">Tensorflow</button></th>
<th colspan="1"><button id="prophet" title="For Prophet model.">Prophet</button></th>
<th colspan="1"><button id="pmdarima" title="For ARIMA model.">ARIMA</button></th>
</thead>
<tbody>
<table id="table-1">
<tbody>
<tr>
<td>OS</td>
<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>
</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="Prophet">Prophet</button></td>
<td colspan="1"><button id="ARIMA">ARIMA</button></td>
</tr>
<tr>
<td colspan="1">DL<br>framework</td>
<td colspan="2"><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>
</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>
</tr>
<tr>
<td>Auto Tuning</td>
<td colspan="1">Auto Tuning</td>
<td colspan="2" title="I don't need any hyperparameter auto tuning feature."><button
id="automlno">No need</button></td>
id="automlno">No</button></td>
<td colspan="2" title="I need chronos to help me tune the hyperparameters."><button
id="automlyes">Needed</button></td>
id="automlyes">Yes</button></td>
</tr>
<tr>
<td>Hardware</td>
<td colspan="1">Hardware</td>
<td colspan="2"><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>
</tr>
<tr>
<td>Release</td>
<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>
</tr>
<tr>
<td>Build</td>
<td colspan="2"><button id="stable"
title="For users would like to deploy chronos in their production">Stable (2.0.0)</button>
</td>
<td colspan="1">Version</td>
<td colspan="2"><button id="nightly"
title="For users would like to try chronos's latest feature">Nightly (2.1.0b)</button></td>
title="For users would like to try chronos's latest feature">Nightly (2.1.0b)</button>
</td>
<td colspan="2"><button id="stable"
title="For users would like to deploy chronos in their production">Stable (2.0.0)</button></td>
</tr>
<tr>
<td>Install CMD</td>
<td colspan="1">Install CMD</td>
<td colspan="4">
<div id="cmd" style="text-align: left;">NA</div>
</td>