l-min-components 1.7.1408 → 1.7.1410
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/reportsComponents/fullAnalysis/components/SpeechAnalysis.jsx +3 -12
- package/src/components/reportsComponents/fullAnalysis/index.jsx +90 -87
- package/src/components/reportsComponents/fullAnalysis/style.jsx +6 -3
- package/src/components/reportsComponents/reportQuestions/components/style/tabs.style.jsx +1 -1
- package/src/components/reportsComponents/reportQuestions/index.jsx +1 -0
package/package.json
CHANGED
|
@@ -60,7 +60,7 @@ const SpeechAnalysis = ({ Aidata }) => {
|
|
|
60
60
|
const selectionSelectionValue = sectionList?.find(
|
|
61
61
|
(item) => item?.id === selectedSection
|
|
62
62
|
);
|
|
63
|
-
|
|
63
|
+
console.log(selectionSelectionValue);
|
|
64
64
|
return (
|
|
65
65
|
<ModelComtainer>
|
|
66
66
|
<ModelContent>
|
|
@@ -142,18 +142,11 @@ const SpeechAnalysis = ({ Aidata }) => {
|
|
|
142
142
|
<p className="good">
|
|
143
143
|
Perfect! you pronounced this sound correctly
|
|
144
144
|
</p>
|
|
145
|
-
) :
|
|
145
|
+
) : (
|
|
146
146
|
<div className="feedback">
|
|
147
147
|
<div className="feedback_header">
|
|
148
148
|
<div className="feedback_header-content">
|
|
149
|
-
{
|
|
150
|
-
You sound like{" "}
|
|
151
|
-
<span className="bad">/ʌ/</span>
|
|
152
|
-
</p>
|
|
153
|
-
<p>It is actually /ʌ/</p> */}
|
|
154
|
-
<p>
|
|
155
|
-
{item?.["Phoneme Feedback Summary"] || ""}
|
|
156
|
-
</p>
|
|
149
|
+
{item?.["Phoneme Feedback Summary"] || ""}
|
|
157
150
|
</div>
|
|
158
151
|
</div>
|
|
159
152
|
<InlineClampedText
|
|
@@ -161,8 +154,6 @@ const SpeechAnalysis = ({ Aidata }) => {
|
|
|
161
154
|
text={item?.["Phoneme Feedback"] || ""}
|
|
162
155
|
/>
|
|
163
156
|
</div>
|
|
164
|
-
) : (
|
|
165
|
-
<p className="bad">You missed this sound</p>
|
|
166
157
|
)}
|
|
167
158
|
</div>
|
|
168
159
|
);
|
|
@@ -17,8 +17,9 @@ import Tabs from "../reportQuestions/components/tabs";
|
|
|
17
17
|
import Evaluation from "./components/Evaluation";
|
|
18
18
|
import SpeechAnalysis from "./components/SpeechAnalysis";
|
|
19
19
|
import Grammar from "./components/Grammar";
|
|
20
|
+
import classNames from "classnames";
|
|
20
21
|
|
|
21
|
-
const FullAnalysis = ({ data, onClose }) => {
|
|
22
|
+
const FullAnalysis = ({ data, onClose, accountType }) => {
|
|
22
23
|
const { setRightLayout, setCenterLayoutStyle } = useContext(OutletContext);
|
|
23
24
|
|
|
24
25
|
// const colors = [
|
|
@@ -73,94 +74,96 @@ const FullAnalysis = ({ data, onClose }) => {
|
|
|
73
74
|
<ArrowLeft />
|
|
74
75
|
<h1>Full analysis</h1>
|
|
75
76
|
</Header>
|
|
76
|
-
<Content>
|
|
77
|
-
|
|
78
|
-
<
|
|
79
|
-
<
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
77
|
+
<Content className={classNames({ personal: accountType === "personal" })}>
|
|
78
|
+
{accountType !== "personal" && (
|
|
79
|
+
<Sidebar>
|
|
80
|
+
<ProgressSidebar>
|
|
81
|
+
<ProgressCircleSection>
|
|
82
|
+
{thirdModel && (
|
|
83
|
+
<Progress.Circle
|
|
84
|
+
percent={thirdModel?.score}
|
|
85
|
+
strokeWidth={4}
|
|
86
|
+
trailWidth={4}
|
|
87
|
+
strokeColor={thirdModel?.primaryColor}
|
|
88
|
+
trailColor="#F2F2F2"
|
|
89
|
+
showInfo={false}
|
|
90
|
+
className="progress-circle"
|
|
91
|
+
style={{
|
|
92
|
+
width: "130px",
|
|
93
|
+
}}
|
|
94
|
+
/>
|
|
95
|
+
)}
|
|
96
|
+
{secondModel && (
|
|
97
|
+
<Progress.Circle
|
|
98
|
+
percent={secondModel?.score}
|
|
99
|
+
strokeWidth={4}
|
|
100
|
+
trailWidth={4}
|
|
101
|
+
strokeColor={secondModel?.primaryColor}
|
|
102
|
+
trailColor="#F2F2F2"
|
|
103
|
+
showInfo={false}
|
|
104
|
+
className="progress-circle"
|
|
105
|
+
style={{
|
|
106
|
+
width: "110px",
|
|
107
|
+
}}
|
|
108
|
+
/>
|
|
109
|
+
)}
|
|
108
110
|
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
111
|
+
{firstModel && (
|
|
112
|
+
<Progress.Circle
|
|
113
|
+
percent={firstModel?.score}
|
|
114
|
+
strokeWidth={4}
|
|
115
|
+
trailWidth={4}
|
|
116
|
+
strokeColor={firstModel?.primaryColor}
|
|
117
|
+
trailColor={"#F2F2F2"}
|
|
118
|
+
showInfo={false}
|
|
119
|
+
className="progress-circle"
|
|
120
|
+
style={{
|
|
121
|
+
width: "90px",
|
|
122
|
+
}}
|
|
123
|
+
/>
|
|
124
|
+
)}
|
|
123
125
|
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
126
|
+
<p>
|
|
127
|
+
AI score <br />
|
|
128
|
+
<span>{data?.AiScore || 0}%</span>
|
|
129
|
+
</p>
|
|
130
|
+
</ProgressCircleSection>
|
|
131
|
+
<ul>
|
|
132
|
+
{data?.models?.map((model) => {
|
|
133
|
+
if (model?.id === "logic_evaluation") return null;
|
|
134
|
+
return (
|
|
135
|
+
<li key={model?.id}>
|
|
136
|
+
<p>{`${model?.label} point`}</p>
|
|
137
|
+
<div style={{ backgroundColor: model?.bgColor }}>
|
|
138
|
+
<span style={{ color: model?.primaryColor }}>
|
|
139
|
+
{model?.score || 0}%
|
|
140
|
+
</span>
|
|
141
|
+
<Progress.Line
|
|
142
|
+
percent={model?.score || 0}
|
|
143
|
+
strokeWidth={4}
|
|
144
|
+
trailWidth={4}
|
|
145
|
+
strokeColor={model?.primaryColor}
|
|
146
|
+
trailColor={"#fff"}
|
|
147
|
+
showInfo={false}
|
|
148
|
+
style={{ width: "100%" }}
|
|
149
|
+
/>
|
|
150
|
+
</div>
|
|
151
|
+
</li>
|
|
152
|
+
);
|
|
153
|
+
})}
|
|
154
|
+
</ul>
|
|
155
|
+
</ProgressSidebar>
|
|
156
|
+
{selectedModel?.id === "speech_analysis" && (
|
|
157
|
+
<SpeechSideSection>
|
|
158
|
+
<PlayButton audio={selectedModel?.audioData} />
|
|
159
|
+
<PlayButton
|
|
160
|
+
type="ai"
|
|
161
|
+
refernceText={selectedModel?.data?.Reference}
|
|
162
|
+
/>
|
|
163
|
+
</SpeechSideSection>
|
|
164
|
+
)}
|
|
165
|
+
</Sidebar>
|
|
166
|
+
)}
|
|
164
167
|
<MainSection>
|
|
165
168
|
{tabs?.length > 0 && (
|
|
166
169
|
<Tabs options={tabs} selected={selected} onChange={setSelected} />
|
|
@@ -10,6 +10,9 @@ export const Content = styled.div`
|
|
|
10
10
|
grid-template-columns: 220px 1fr;
|
|
11
11
|
gap: 10px;
|
|
12
12
|
margin-top: 8px;
|
|
13
|
+
&.personal {
|
|
14
|
+
grid-template-columns: 1fr;
|
|
15
|
+
}
|
|
13
16
|
`;
|
|
14
17
|
export const Sidebar = styled.div`
|
|
15
18
|
width: 100;
|
|
@@ -148,12 +151,12 @@ export const ModelContent = styled.div`
|
|
|
148
151
|
justify-content: center;
|
|
149
152
|
gap: 10px;
|
|
150
153
|
padding: 0 12px;
|
|
151
|
-
color: #949999;
|
|
154
|
+
color: #949999 !important;
|
|
152
155
|
font-size: 16px;
|
|
153
156
|
cursor: pointer;
|
|
154
157
|
&.active {
|
|
155
|
-
color: #f5f7f7;
|
|
156
|
-
background: #00c2c2;
|
|
158
|
+
color: #f5f7f7 !important;
|
|
159
|
+
background: #00c2c2 !important;
|
|
157
160
|
}
|
|
158
161
|
}
|
|
159
162
|
}
|