Skip to content

Commit a5d9708

Browse files
author
minjk-bl
committed
ML > Model schema
1 parent f8e8d2b commit a5d9708

File tree

5 files changed

+164
-17
lines changed

5 files changed

+164
-17
lines changed

‎css/root.css

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -329,6 +329,7 @@ hr.vp-extra-menu-line {
329329
/* Grid style */
330330
.vp-grid-box {
331331
display: grid;
332+
grid-row-gap: 5px;
332333
}
333334
.vp-grid-border-box {
334335
display: grid;
@@ -338,18 +339,19 @@ hr.vp-extra-menu-line {
338339
border-radius: 5px;
339340
box-sizing: border-box;
340341
padding: 15px;
342+
grid-row-gap: 5px;
341343
}
342344
.vp-grid-col-p50 {
343345
display: grid;
344346
grid-template-columns: 50% 50%;
345-
grid-row-gap: 3px;
347+
grid-row-gap: 5px;
346348
align-items: baseline;
347349
align-content: center;
348350
}
349351
.vp-grid-col-95 {
350352
display: grid;
351353
grid-template-columns: 95px auto;
352-
grid-row-gap: 3px;
354+
grid-row-gap: 5px;
353355
align-items: baseline;
354356
align-content: space-evenly;
355357
}

‎html/m_ml/modelSelection.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<body>
2+
<div class="vp-grid-box">
3+
<div class="vp-grid-border-box">
4+
<div class="vp-grid-col-95">
5+
<label for="model" class="vp-orange-text">Model</label>
6+
<select id="model" class="vp-select vp-state">
7+
<!-- Auto Create -->
8+
</select>
9+
<label for="randomState">Random state</label>
10+
<input type="number" class="vp-input vp-state" id="randomState" placeholder="1234"/>
11+
</div>
12+
<div class="vp-grid-col-95 vp-model-option-box vp-model-rf-clf">
13+
RandomForestClassifier
14+
</div>
15+
<div class="vp-grid-col-95 vp-model-option-box vp-model-tpot-clf">
16+
TPOTClassifier
17+
</div>
18+
<div class="vp-grid-col-95 vp-model-option-box vp-model-sv-clf">
19+
SupportVectorClassifier
20+
</div>
21+
<div class="vp-grid-col-95 vp-model-option-box vp-model-ln-rgs">
22+
LinearRegression
23+
</div>
24+
<div class="vp-grid-col-95 vp-model-option-box vp-model-lg-rgs">
25+
LogisticRegression
26+
</div>
27+
<div class="vp-grid-col-95 vp-model-option-box vp-model-rf-rgs">
28+
RandomForestRegression
29+
</div>
30+
<div class="vp-grid-col-95 vp-model-option-box vp-model-tpot-rgs">
31+
TPOTRegression
32+
</div>
33+
</div>
34+
<div class="vp-grid-border-box vp-grid-col-95">
35+
<label for="featureData" class="vp-orange-text">Feature data</label>
36+
<input type="text" class="vp-input vp-state" id="featureData" placeholder="Select feature data"/>
37+
<label for="targetData" class="vp-orange-text">Target data</label>
38+
<input type="text" class="vp-input vp-state" id="targetData" placeholder="Select target data"/>
39+
</div>
40+
<div class="vp-grid-border-box vp-grid-col-95">
41+
<label for="allocateTo" class="vp-orange-text">Allocate to</label>
42+
<input type="text" class="vp-input vp-state" id="allocateTo" placeholder="New variable name"/>
43+
</div>
44+
</div>
45+
</body>

‎html/styleGuide.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>
6+
Style Guide
7+
</title>
8+
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
9+
</head>
10+
<body>
11+
12+
</body>
13+
</html>

‎js/com/com_generatorV2.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1246,6 +1246,7 @@ define([
12461246

12471247
return {
12481248
vp_showInterfaceOnPage: vp_showInterfaceOnPage,
1249+
renderContent: renderContent,
12491250
vp_codeGenerator: vp_codeGenerator,
12501251
vp_generateVarSelect: vp_generateVarSelect,
12511252
vp_getTagValue: vp_getTagValue,

‎js/m_ml/modelSelection.js

Lines changed: 101 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,45 +13,131 @@
1313
// [CLASS] Model selection
1414
//============================================================================
1515
define([
16+
'text!vp_base/html/m_ml/modelSelection.html!strip',
1617
'vp_base/js/com/com_util',
1718
'vp_base/js/com/com_Const',
1819
'vp_base/js/com/com_String',
20+
'vp_base/js/com/com_generatorV2',
1921
'vp_base/js/com/component/PopupComponent'
20-
], function(com_util, com_Const, com_String, PopupComponent) {
22+
], function(msHtml, com_util, com_Const, com_String, com_generator, PopupComponent) {
2123

2224
/**
2325
* Model selection
2426
*/
2527
class ModelSelection extends PopupComponent {
2628
_init() {
2729
super._init();
28-
/** Write codes executed before rendering */
30+
this.config.sizeLevel = 2;
31+
this.config.dataview = false;
32+
33+
this.state = {
34+
model: 'rf-clf',
35+
...this.state
36+
}
37+
38+
this.modelTypes = {
39+
'Classfication': ['rf-clf', 'tpot-clf', 'sv-clf'],
40+
'Regression': ['ln-rgs', 'lg-rgs', 'rf-rgs', 'tpot-rgs'],
41+
'Clustering': [], //TODO:
42+
'PCA': [] //TODO:
43+
}
44+
45+
this.modelConfig = {
46+
/** Classification */
47+
'rf-clf': {
48+
name: 'RandomForestClassifier',
49+
import: 'from sklearn.ensemble import RandomForestClassifier',
50+
code: 'RandomForestClassifier(...)',
51+
},
52+
'tpot-clf': {
53+
name: 'TPOTClassifier',
54+
import: 'from tpot import TPOTClassifier',
55+
code: 'TPOTClassifier(...)'
56+
},
57+
'sv-clf': {
58+
name: 'SupportVectorClassifier',
59+
import: 'from sklearn.svm import SVC',
60+
code: 'SVC(...)',
61+
},
62+
/** Regression */
63+
'ln-rgs': {
64+
name: 'LinearRegression',
65+
import: 'from sklearn.linear_model import LinearRegression',
66+
code: 'LinearRegression(...)'
67+
},
68+
'lg-rgs': {
69+
name: 'LogisticRegression',
70+
import: 'from sklearn.linear_model import LogisticRegression',
71+
code: 'LogisticRegression(...)'
72+
},
73+
'rf-rgs': {
74+
name: 'RandomForestRegressor',
75+
import: 'from sklearn.ensemble import RandomForestRegressor',
76+
code: 'RandomForestRegressor(...)',
77+
},
78+
'tpot-rgs': {
79+
name: 'TPOTRegressor',
80+
import: 'from tpot import TPOTRegressor',
81+
code: 'TPOTRegressor(...)',
82+
}
83+
/** Clustering */
84+
85+
/** PCA */
86+
87+
}
2988
}
3089

3190
_bindEvent() {
3291
super._bindEvent();
3392
/** Implement binding events */
3493
var that = this;
35-
this.$target.on('click', function(evt) {
36-
var target = evt.target;
37-
if ($(that.wrapSelector()).find(target).length > 0) {
38-
// Sample : getDataList from Kernel
39-
vpKernel.getDataList().then(function(resultObj) {
40-
vpLog.display(VP_LOG_TYPE.DEVELOP, resultObj);
41-
}).catch(function(err) {
42-
vpLog.display(VP_LOG_TYPE.DEVELOP, err);
43-
});
44-
}
94+
// select model
95+
$(this.wrapSelector('#model')).on('click', function() {
96+
let model = $(this).val();
97+
that.state.model = model;
98+
$(that.wrapSelector('.vp-model-option-box')).hide();
99+
$(that.wrapSelector('.vp-model-' + model)).show();
45100
});
101+
46102
}
47103

48104
templateForBody() {
49-
/** Implement generating template */
50-
return 'This is sample.';
105+
let page = $(msHtml);
106+
107+
let that = this;
108+
// model types
109+
let modelTypeTag = new com_String();
110+
Object.keys(this.modelTypes).forEach(modelCategory => {
111+
let modelOptionTag = new com_String();
112+
that.modelTypes[modelCategory].forEach(opt => {
113+
let optConfig = that.modelConfig[opt];
114+
let selectedFlag = '';
115+
if (opt == that.state.model) {
116+
selectedFlag = 'selected';
117+
}
118+
modelOptionTag.appendFormatLine('<option value="{0}" {1}>{2}</option>',
119+
opt, selectedFlag, optConfig.name);
120+
})
121+
modelTypeTag.appendFormatLine('<optgroup label="{0}">{1}</optgroup>',
122+
modelCategory, modelOptionTag.toString());
123+
});
124+
$(page).find('#model').html(modelTypeTag.toString());
125+
126+
// option page
127+
$(page).find('.vp-model-option-box').hide();
128+
$(page).find('.vp-model-' + this.state.model).show();
129+
return page;
51130
}
52131

53132
generateCode() {
54-
return "print('sample code')";
133+
/**
134+
* from module import model_function
135+
* model = Model(key=value, ...)
136+
* ---
137+
* %%time
138+
* model.fit(X_train, y_train)
139+
*/
140+
return this.modelConfig[this.state.model].code;
55141
}
56142

57143
}

0 commit comments

Comments
 (0)