Skip to content

Commit 07b00dd

Browse files
hende8hende8
committed
Explain components
1 parent 93b9dd9 commit 07b00dd

10 files changed

Lines changed: 434 additions & 190 deletions

File tree

‎src/components/DatasetModelForm.vue‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
<template>
2+
<div class="container">
3+
<div style="width: 1200px; position: absolute">
4+
<h1>Evaluation and Explanation system</h1>
5+
<h5>
6+
In this system you will get an explanation and avaluation about those
7+
explains.
8+
</h5>
9+
<h5>
10+
Before you are using our system, we would like to ask you to get in
11+
advance a dataset and the predict model that pretrained on it.
12+
</h5>
13+
<h5>
14+
<b>Note:</b> The dataset must include the exact features that you have
15+
trained in your predict model.
16+
</h5>
17+
18+
<!-- Styled -->
19+
<b-form @submit.prevent="onSubmit" @reset.prevent="onReset">
20+
<b-col sm="5">
21+
<h2>Choose a dataset</h2>
22+
23+
<b-form-file
24+
size="sm"
25+
accept=".csv"
26+
v-model="form.dataset"
27+
:state="validateState('dataset')"
28+
placeholder="Choose a file or drop it here..."
29+
drop-placeholder="Drop file here..."
30+
></b-form-file>
31+
<b-form-invalid-feedback v-if="!$v.form.dataset.required"
32+
>Dataset is required</b-form-invalid-feedback
33+
>
34+
</b-col>
35+
<br />
36+
<b-col sm="5">
37+
<h2>Choose a predict model</h2>
38+
39+
<b-form-file
40+
size="sm"
41+
accept=".pkl"
42+
v-model="form.predict_model"
43+
:state="validateState('predict_model')"
44+
placeholder="Choose a file or drop it here..."
45+
drop-placeholder="Drop file here..."
46+
></b-form-file>
47+
<b-form-invalid-feedback v-if="!$v.form.predict_model.required"
48+
>Predict model is required</b-form-invalid-feedback
49+
>
50+
</b-col>
51+
<br />
52+
<b-button type="reset" style="width: 90px" variant="danger"
53+
>Reset</b-button
54+
>
55+
<b-button
56+
type="submit"
57+
variant="primary"
58+
style="width: 90px"
59+
class="ml-5 w-10"
60+
>Finish</b-button
61+
>
62+
</b-form>
63+
<b-alert
64+
class="mt-2"
65+
v-if="form.submitError"
66+
variant="warning"
67+
dismissible
68+
show
69+
>Process failed: {{ form.submitError }}</b-alert
70+
>
71+
</div>
72+
</div>
73+
</template>
74+
75+
<script>
76+
import {
77+
required,
78+
minLength,
79+
maxLength,
80+
alpha,
81+
sameAs,
82+
email,
83+
} from "vuelidate/lib/validators";
84+
export default {
85+
data() {
86+
return {
87+
form: {
88+
dataset: null,
89+
predict_model: null,
90+
submitError:undefined
91+
},
92+
};
93+
},
94+
validations: {
95+
form: {
96+
dataset: {
97+
required,
98+
},
99+
predict_model: {
100+
required,
101+
},
102+
},
103+
},
104+
methods: {
105+
onReset() {
106+
this.form = {
107+
dataset: null,
108+
predict_model: null,
109+
};
110+
this.$refs.fileinput.reset();
111+
112+
this.$nextTick(() => {
113+
this.$v.$reset();
114+
});
115+
},
116+
onSubmit() {
117+
this.$v.form.$touch();
118+
if (this.$v.form.$anyError) {
119+
return;
120+
}
121+
this.createExplanationValuation();
122+
},
123+
async createExplanationValuation() {
124+
try {
125+
const response = await this.axios.post(
126+
"http://localhost:3000/evaluation", // to fix it
127+
{
128+
dataset: this.form.dataset,
129+
predict_model: this.form.predict_model,
130+
}
131+
);
132+
if (response.status == "201") {
133+
this.$router.push("/evaluation");
134+
}
135+
} catch (err) {
136+
this.form.submitError = err.response.data.message;
137+
}
138+
},
139+
validateState(param) {
140+
const { $dirty, $error } = this.$v.form[param];
141+
return $dirty ? !$error : null;
142+
},
143+
},
144+
};
145+
</script>
146+
147+
<style scoped>
148+
</style>

‎src/components/ExplainComponents/ExplainByErrors.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div class="container">
3+
<h1>Explanation to be added</h1>
4+
5+
<b-button
6+
@click="GetShapByErrors"
7+
variant="primary"
8+
style="width: 90px"
9+
class="ml-5 w-10"
10+
>Get graphs</b-button
11+
>
12+
13+
<!-- <b-card no-body class="overflow-hidden" style="max-width: 1700px;" v-for="r in this.images" :key="r.details">
14+
<b-row no-gutters>
15+
<b-col md="6">
16+
<b-card-img :src="r.url" alt="Image" class="rounded-0"></b-card-img>
17+
</b-col>
18+
<b-col md="6">
19+
<b-card-body title="Horizontal Card">
20+
<b-card-text>
21+
This is a wider card with supporting text as a natural lead-in to additional content.
22+
This content is a little bit longer.
23+
</b-card-text>
24+
</b-card-body>
25+
</b-col>
26+
</b-row>
27+
</b-card> -->
28+
</div>
29+
</template>
30+
31+
<script>
32+
export default {
33+
data() {
34+
return {
35+
images:[],
36+
};
37+
},
38+
39+
methods: {
40+
async test() {
41+
let info = await this.axios.get(
42+
"http://localhost:8080/shap/GetShapByErrors/"
43+
);
44+
errors_plot = [];
45+
info.data.forEach((element) => {
46+
errors_plot.push(element);
47+
});
48+
49+
return newRecipes;
50+
},
51+
},
52+
};
53+
</script>
54+
55+
<style scoped>
56+
</style>

‎src/components/ExplainComponents/ExplainFullData.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div class="container">
3+
<h1>TEST </h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
9+
export default {
10+
data() {
11+
return {
12+
13+
};
14+
},
15+
16+
methods: {
17+
18+
async test() {
19+
try {
20+
const response = await this.axios.post(
21+
"http://localhost:3000/evaluation", // to fix it
22+
{
23+
dataset: this.form.dataset,
24+
predict_model: this.form.predict_model,
25+
}
26+
);
27+
if (response.status == "201") {
28+
this.$router.push("/evaluation");
29+
}
30+
} catch (err) {
31+
this.form.submitError = err.response.data.message;
32+
}
33+
},
34+
35+
},
36+
};
37+
</script>
38+
39+
<style scoped>
40+
</style>

‎src/components/ExplainComponents/ExplainSingleInstnace.vue‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<template>
2+
<div class="container">
3+
<h1>TESTttlololt </h1>
4+
</div>
5+
</template>
6+
7+
<script>
8+
9+
export default {
10+
data() {
11+
return {
12+
13+
};
14+
},
15+
16+
methods: {
17+
18+
async test() {
19+
try {
20+
const response = await this.axios.post(
21+
"http://localhost:3000/evaluation", // to fix it
22+
{
23+
dataset: this.form.dataset,
24+
predict_model: this.form.predict_model,
25+
}
26+
);
27+
if (response.status == "201") {
28+
this.$router.push("/evaluation");
29+
}
30+
} catch (err) {
31+
this.form.submitError = err.response.data.message;
32+
}
33+
},
34+
35+
},
36+
};
37+
</script>
38+
39+
<style scoped>
40+
</style>

‎src/components/NavBar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@
77
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
88
<b-collapse id="nav-collapse" is-nav>
99
<b-navbar-nav>
10-
<b-nav-item href="#" disabled style="color: #7952b3;"> Hello To Evaluation System</b-nav-item>
10+
<b-nav-item href="#" disabled style="color: #7952b3;"> Evaluation System</b-nav-item>
1111
</b-navbar-nav>
1212
<b-navbar-nav>
1313
<b-nav-item-dropdown right>
1414
<template v-slot:button-content>
1515
<b-icon icon="question-square" style="color: #7952b3;"></b-icon>
16-
<em> Choose Explainatiom Model </em>
16+
<em>Explainatiom Model </em>
1717
</template>
1818
<b-dropdown-item router-link :to="{ name: 'shap' }"><b-icon icon="star-fill" style="color: #7952b3;"></b-icon> SHAP</b-dropdown-item>
1919
<b-dropdown-item router-link :to="{ name: 'lime' }"><b-icon icon="receipt" style="color: #7952b3;"></b-icon> Lime</b-dropdown-item>

‎src/components/RecipePreview.vue‎

Lines changed: 0 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -111,86 +111,5 @@ export default {
111111
#card1:hover {
112112
transform: scale(1.02);
113113
}
114-
/* .recipe-preview {
115-
display: inline-block;
116-
width: 90%;
117-
height: 100%;
118-
position: relative;
119-
margin: 10px 10px;
120-
}
121-
.recipe-preview > .recipe-body {
122-
width: 100%;
123-
height: 100;
124-
position: relative;
125-
}
126-
127-
.recipe-preview .recipe-body .recipe-image {
128-
margin-left: auto;
129-
margin-right: auto;
130-
margin-top: auto;
131-
margin-bottom: auto;
132-
display: block;
133-
width: 70%;
134-
height: auto;
135-
-webkit-background-size: cover;
136-
-moz-background-size: cover;
137-
background-size: cover;
138-
}
139-
140-
.recipe-preview .recipe-footer {
141-
margin-left: auto;
142-
margin-right: auto;
143-
margin-top: auto;
144-
margin-bottom: auto;
145-
width: 70%;
146-
height: 50%;
147-
overflow: hidden;
148-
}
149-
150-
.recipe-preview .recipe-footer .recipe-title {
151-
padding: 10px 10px;
152-
width: 100%;
153-
font-size: 12pt;
154-
text-align: left;
155-
white-space: nowrap;
156-
overflow: hidden;
157-
-o-text-overflow: ellipsis;
158-
text-overflow: ellipsis;
159-
}
160-
161-
.recipe-preview .recipe-footer ul.recipe-overview {
162-
padding: 5px 10px;
163-
width: 100%;
164-
display: -webkit-box;
165-
display: -moz-box;
166-
display: -webkit-flex;
167-
display: -ms-flexbox;
168-
display: flex;
169-
-webkit-box-flex: 1;
170-
-moz-box-flex: 1;
171-
-o-box-flex: 1;
172-
box-flex: 1;
173-
-webkit-flex: 1 auto;
174-
-ms-flex: 1 auto;
175-
flex: 1 auto;
176-
table-layout: fixed;
177-
margin-bottom: 0px;
178-
}
179-
180-
.recipe-preview .recipe-footer ul.recipe-overview li {
181-
-webkit-box-flex: 1;
182-
-moz-box-flex: 1;
183-
-o-box-flex: 1;
184-
-ms-box-flex: 1;
185-
box-flex: 1;
186-
-webkit-flex-grow: 1;
187-
flex-grow: 1;
188-
width: 90px;
189-
display: table-cell;
190-
text-align: center;
191-
}
192114
193-
.recipe-info-icon {
194-
width: 50%;
195-
} */
196115
</style>

0 commit comments

Comments
 (0)