Improved model creation dialog

Modal parameters differs depending
on the prediction model.

Modify a model creation dialog so that
only necessary parameters are showing up
when selecting prediction model.
This commit is contained in:
Hiroyuki Eguchi 2017-01-31 14:44:28 +09:00
parent 2feb484c93
commit 94b9cf4820
2 changed files with 184 additions and 6 deletions

View File

@ -27,6 +27,7 @@
var model = {
newModelSpec: {},
newCommonDataset: {},
newParamsSpec: {},
// API methods
init: init,
@ -58,6 +59,23 @@
swift_username: null,
swift_password: null
};
model.newParamsSpec = {
numIterations: null,
numClasses: null,
runs: null,
mode: null,
rank: null,
step: null,
impurity: null,
maxDepth: null,
maxBins:null,
learningRate: null,
minCount: null,
minSupport: null,
limits:null
};
}
function init() {
@ -68,8 +86,13 @@
function createModel() {
var finalSpec = angular.copy(model.newModelSpec);
var commonDataset = angular.copy(model.newCommonDataset);
var finalParams = angular.copy(model.newParamsSpec);
var url = "";
cleanNullProperties(finalParams);
finalSpec.model_params = JSON.stringify(finalParams);
if(commonDataset.location == 'swift'){
url = 'swift://' +
commonDataset.container_name + '/' +
@ -87,6 +110,17 @@
return meteos.createModel(finalSpec);
}
function cleanNullProperties(finalParams) {
// Initially clean fields that don't have any value.
// Not only "null", blank too.
for (var key in finalParams) {
if (finalParams[key] === null || finalParams[key] === "") {
delete finalParams[key];
}
}
}
return model;
}
})();

View File

@ -10,17 +10,161 @@
ng-model="model.newModelSpec.model_type"
ng-options="item for item in ctrl.modelTypeOptions">
</select>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type != 'DecisionTreeRegression'">
<div class="form-group">
<label class="control-label" for="model-model-params">
<translate>Model Params</translate>
<label class="control-label" for="model-model-numIterations">
<translate>NumIterations</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-params" type="text" class="form-control" id="model-model-params"
ng-model="model.newModelSpec.model_params"
<input name="model-model-numIterations" type="text" class="form-control" id="model-model-numIterations"
ng-model="model.newParamsSpec.numIterations"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'KMeans'">
<div class="form-group">
<label class="control-label" for="model-model-numClasses">
<translate>NumClasses</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-numClasses" type="text" class="form-control" id="model-model-numClasses"
ng-model="model.newParamsSpec.numClasses"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'KMeans'">
<div class="form-group">
<label class="control-label" for="model-model-runs">
<translate>Runs</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-runs" type="text" class="form-control" id="model-model-runs"
ng-model="model.newParamsSpec.runs"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'KMeans'">
<div class="form-group">
<label class="control-label" for="model-model-mode">
<translate>Mode</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-mode" type="text" class="form-control" id="model-model-mode"
ng-model="model.newParamsSpec.mode"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'Recommendation'">
<div class="form-group">
<label class="control-label" for="model-model-rank">
<translate>Rank</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-rank" type="text" class="form-control" id="model-model-rank"
ng-model="model.newParamsSpec.rank"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'LinearRegression'">
<div class="form-group">
<label class="control-label" for="model-model-step">
<translate>Step</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-step" type="text" class="form-control" id="model-model-step"
ng-model="model.newParamsSpec.step"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'DecisionTreeRegression'">
<div class="form-group">
<label class="control-label" for="model-model-impurity">
<translate>Impurity</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-impurity" type="text" class="form-control" id="model-model-impurity"
ng-model="model.newParamsSpec.impurity"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'DecisionTreeRegression'">
<div class="form-group">
<label class="control-label" for="model-model-maxDepth">
<translate>MaxDepth</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-maxDepth" type="text" class="form-control" id="model-model-maxDepth"
ng-model="model.newParamsSpec.maxDepth"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'DecisionTreeRegression'">
<div class="form-group">
<label class="control-label" for="model-model-maxBins">
<translate>MaxBins</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-maxBins" type="text" class="form-control" id="model-model-maxBins"
ng-model="model.newParamsSpec.maxBins"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'Word2Vec'">
<div class="form-group">
<label class="control-label" for="model-model-learningRate">
<translate>LearningRate</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-learningRate" type="text" class="form-control" id="model-model-learningRate"
ng-model="model.newParamsSpec.learningRate"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'Word2Vec'">
<div class="form-group">
<label class="control-label" for="model-model-minCount">
<translate>MinCount</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-minCount" type="text" class="form-control" id="model-model-minCount"
ng-model="model.newParamsSpec.minCount"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'FPGrowth'">
<div class="form-group">
<label class="control-label" for="model-model-minSupport">
<translate>MinSupport</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-minSupport" type="text" class="form-control" id="model-model-minSupport"
ng-model="model.newParamsSpec.minSupport"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>
<div class="col-xs-12"
ng-if="model.newModelSpec.model_type == 'FPGrowth'">
<div class="form-group">
<label class="control-label" for="model-model-limits">
<translate>Limits</translate>
<span class="hz-icon-required fa fa-asterisk"></span>
</label>
<input name="model-model-limits" type="text" class="form-control" id="model-model-limits"
ng-model="model.newParamsSpec.limits"
placeholder="{$ 'Parameters when creating model.'|translate $}">
</div>
</div>