dmed-voice-assistant 1.0.2 → 1.1.0
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/dist/components/RecognitionListItem.js +54 -0
- package/dist/components/RecordListItem.js +246 -0
- package/dist/components/StyledSelect.js +25 -0
- package/dist/components/svgs.js +343 -0
- package/dist/index.js +39 -0
- package/dist/recognition.js +743 -0
- package/dist/recorder.js +513 -0
- package/package.json +3 -4
- package/src/VoiceAssistant/index.js +0 -45
- package/src/VoiceAssistant/recognition.js +0 -952
- package/src/VoiceAssistant/recorder.js +0 -575
- package/src/shared/RecognitionListItem.js +0 -53
- package/src/shared/RecordListItem.js +0 -259
- package/src/shared/StyledDatePicker.js +0 -26
- package/src/shared/StyledSelect.js +0 -16
- package/src/shared/svgs.js +0 -267
package/dist/recorder.js
ADDED
|
@@ -0,0 +1,513 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _material = require("@mui/material");
|
|
9
|
+
var _Grid = _interopRequireDefault(require("@mui/material/Grid2"));
|
|
10
|
+
var _svgs = require("./components/svgs");
|
|
11
|
+
var _StyledSelect = _interopRequireDefault(require("./components/StyledSelect"));
|
|
12
|
+
var _RecordListItem = _interopRequireDefault(require("./components/RecordListItem"));
|
|
13
|
+
var _recorderJs = _interopRequireDefault(require("recorder-js"));
|
|
14
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
15
|
+
const apiUrl = 'https://api.origintechx.dev/qa/v1/diagnose/voice';
|
|
16
|
+
const getVoiceFileName = date => {
|
|
17
|
+
const year = date.getFullYear(); // Get the full year (YYYY)
|
|
18
|
+
const month = String(date.getMonth() + 1).padStart(2, '0'); // Get the month (MM), pad with leading zero if necessary
|
|
19
|
+
const day = String(date.getDate()).padStart(2, '0'); // Get the day (DD), pad with leading zero if necessary
|
|
20
|
+
|
|
21
|
+
return `Voice${year}${month}${day}.wav`;
|
|
22
|
+
};
|
|
23
|
+
const getTimeValues = totalSeconds => {
|
|
24
|
+
const hours = Math.floor(totalSeconds / 3600); // Get hours
|
|
25
|
+
let minutes = Math.floor(totalSeconds % 3600 / 60); // Get minutes
|
|
26
|
+
let seconds = totalSeconds % 60; // Get seconds
|
|
27
|
+
|
|
28
|
+
minutes = minutes < 10 ? `0${minutes}` : minutes;
|
|
29
|
+
seconds = seconds < 10 ? `0${seconds}` : seconds;
|
|
30
|
+
return {
|
|
31
|
+
hours,
|
|
32
|
+
minutes,
|
|
33
|
+
seconds
|
|
34
|
+
}; // Return the values separately
|
|
35
|
+
};
|
|
36
|
+
const getAudioDuration = async blob => {
|
|
37
|
+
const audioContext = new AudioContext();
|
|
38
|
+
const arrayBuffer = await blob.arrayBuffer();
|
|
39
|
+
const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
|
|
40
|
+
const duration = audioBuffer.duration;
|
|
41
|
+
return parseInt(duration);
|
|
42
|
+
};
|
|
43
|
+
const RecorderBox = _ref => {
|
|
44
|
+
let {
|
|
45
|
+
mode = 'recorder',
|
|
46
|
+
recordHistoryList,
|
|
47
|
+
setMode,
|
|
48
|
+
onNewRecordEvent,
|
|
49
|
+
onRecordDataChange
|
|
50
|
+
} = _ref;
|
|
51
|
+
const [isVoiceMode, setIsVoiceMode] = (0, _react.useState)(false);
|
|
52
|
+
const [isStartedRecord, setIsStartedRecord] = (0, _react.useState)(false);
|
|
53
|
+
const [selectedVoice, setSelectedVoice] = (0, _react.useState)("");
|
|
54
|
+
const [voiceList, setVoiceList] = (0, _react.useState)([]);
|
|
55
|
+
const languageList = ['Auto-Detect', 'English', 'Chinese (Simplified)'];
|
|
56
|
+
const [selectedLanguage, setSelectedLanguage] = (0, _react.useState)("");
|
|
57
|
+
const [recordList, setRecordList] = (0, _react.useState)(recordHistoryList);
|
|
58
|
+
const [newRecordFileName, setNewRecordFileName] = (0, _react.useState)("");
|
|
59
|
+
const [newRecordTime, setNewRecordTime] = (0, _react.useState)(0);
|
|
60
|
+
const [isRunning, setIsRunning] = (0, _react.useState)(false);
|
|
61
|
+
const [intervalId, setIntervalId] = (0, _react.useState)(null);
|
|
62
|
+
const [audioBlob, setAudioBlob] = (0, _react.useState)(null);
|
|
63
|
+
const [audioUrl, setAudioUrl] = (0, _react.useState)('');
|
|
64
|
+
const [audioSize, setAudioSize] = (0, _react.useState)(0);
|
|
65
|
+
const mediaRecorderRef = (0, _react.useRef)(null);
|
|
66
|
+
const handleVoiceChange = event => {
|
|
67
|
+
setSelectedVoice(event.target.value);
|
|
68
|
+
};
|
|
69
|
+
const handleLanguageChange = event => {
|
|
70
|
+
setSelectedLanguage(event.target.value);
|
|
71
|
+
};
|
|
72
|
+
const initRecorder = async () => {
|
|
73
|
+
try {
|
|
74
|
+
const stream = await navigator.mediaDevices.getUserMedia({
|
|
75
|
+
audio: true
|
|
76
|
+
});
|
|
77
|
+
const audioContext = new (window.AudioContext || window.webkitAudioContext)();
|
|
78
|
+
const newRecorder = new _recorderJs.default(audioContext);
|
|
79
|
+
await newRecorder.init(stream);
|
|
80
|
+
mediaRecorderRef.current = newRecorder;
|
|
81
|
+
} catch (error) {
|
|
82
|
+
console.error("Unable to access microphone", error);
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
const startRecording = async () => {
|
|
86
|
+
if (!mediaRecorderRef.current) {
|
|
87
|
+
await initRecorder();
|
|
88
|
+
}
|
|
89
|
+
if (mediaRecorderRef.current) {
|
|
90
|
+
setAudioBlob(null);
|
|
91
|
+
mediaRecorderRef.current.start();
|
|
92
|
+
setIsStartedRecord(true);
|
|
93
|
+
setNewRecordFileName(getVoiceFileName(new Date()));
|
|
94
|
+
startCounting();
|
|
95
|
+
}
|
|
96
|
+
};
|
|
97
|
+
const stopRecording = () => {
|
|
98
|
+
if (mediaRecorderRef.current) {
|
|
99
|
+
mediaRecorderRef.current.stop().then(async _ref2 => {
|
|
100
|
+
let {
|
|
101
|
+
blob
|
|
102
|
+
} = _ref2;
|
|
103
|
+
setAudioBlob(blob);
|
|
104
|
+
setAudioUrl(URL.createObjectURL(blob));
|
|
105
|
+
console.log(blob);
|
|
106
|
+
let temp = [...recordList];
|
|
107
|
+
const newVoice = {
|
|
108
|
+
audioURL: URL.createObjectURL(blob),
|
|
109
|
+
name: newRecordFileName,
|
|
110
|
+
date: new Date(),
|
|
111
|
+
size: blob.size,
|
|
112
|
+
time: await getAudioDuration(blob)
|
|
113
|
+
};
|
|
114
|
+
temp.push(newVoice);
|
|
115
|
+
setRecordList(temp);
|
|
116
|
+
if (onNewRecordEvent) {
|
|
117
|
+
onNewRecordEvent(newVoice);
|
|
118
|
+
}
|
|
119
|
+
if (onRecordDataChange) {
|
|
120
|
+
onRecordDataChange(temp);
|
|
121
|
+
}
|
|
122
|
+
});
|
|
123
|
+
setIsStartedRecord(false);
|
|
124
|
+
stopCounting();
|
|
125
|
+
setNewRecordTime(0);
|
|
126
|
+
setAudioSize(0);
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
const handleStartRecord = async () => {
|
|
130
|
+
if (isVoiceMode) return;
|
|
131
|
+
if (!isStartedRecord) {
|
|
132
|
+
startRecording();
|
|
133
|
+
} else {
|
|
134
|
+
stopRecording();
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
const handleModeChange = () => {
|
|
138
|
+
if (mode === "recorder") {
|
|
139
|
+
setMode("recognition");
|
|
140
|
+
} else if (mode === "recognition") {
|
|
141
|
+
setMode("recorder");
|
|
142
|
+
}
|
|
143
|
+
};
|
|
144
|
+
const handleSteupChange = () => {
|
|
145
|
+
if (isStartedRecord) return;
|
|
146
|
+
setIsVoiceMode(!isVoiceMode);
|
|
147
|
+
};
|
|
148
|
+
const handleLabelChange = (id, newLabel) => {
|
|
149
|
+
setRecordList(prevRecords => prevRecords.map((record, index) => index === id ? {
|
|
150
|
+
...record,
|
|
151
|
+
label: newLabel
|
|
152
|
+
} : record));
|
|
153
|
+
};
|
|
154
|
+
const handleDelete = id => {
|
|
155
|
+
setRecordList(prevRecords => prevRecords.filter((record, index) => index !== id));
|
|
156
|
+
};
|
|
157
|
+
const startCounting = () => {
|
|
158
|
+
if (isRunning) return; // Prevent starting a new interval if already running
|
|
159
|
+
const id = setInterval(async () => {
|
|
160
|
+
setNewRecordTime(prevCount => prevCount + 1); // Increment count every 1000ms
|
|
161
|
+
await mediaRecorderRef.current.audioRecorder.getBuffer(blob => {
|
|
162
|
+
setAudioSize((blob[0].byteLength / 1024 / 1024).toFixed(2));
|
|
163
|
+
});
|
|
164
|
+
}, 1000);
|
|
165
|
+
setIntervalId(id); // Store the interval ID
|
|
166
|
+
setIsRunning(true); // Set the counter as running
|
|
167
|
+
};
|
|
168
|
+
const stopCounting = () => {
|
|
169
|
+
clearInterval(intervalId); // Stop the interval using the interval ID
|
|
170
|
+
setIsRunning(false); // Set the counter as not running
|
|
171
|
+
};
|
|
172
|
+
(0, _react.useEffect)(() => {
|
|
173
|
+
const fetchAudioInputDevices = async () => {
|
|
174
|
+
try {
|
|
175
|
+
// Request permission to access media devices
|
|
176
|
+
await navigator.mediaDevices.getUserMedia({
|
|
177
|
+
audio: true
|
|
178
|
+
});
|
|
179
|
+
|
|
180
|
+
// Enumerate all media devices
|
|
181
|
+
const devices = await navigator.mediaDevices.enumerateDevices();
|
|
182
|
+
|
|
183
|
+
// Filter only audio input devices
|
|
184
|
+
const audioInputs = devices.filter(device => device.kind === "audioinput");
|
|
185
|
+
let temp = ['Auto-Detect'];
|
|
186
|
+
audioInputs.forEach(device => {
|
|
187
|
+
temp.push(device.label);
|
|
188
|
+
});
|
|
189
|
+
setVoiceList(temp);
|
|
190
|
+
} catch (error) {
|
|
191
|
+
console.error("Error accessing audio devices:", error);
|
|
192
|
+
}
|
|
193
|
+
};
|
|
194
|
+
fetchAudioInputDevices();
|
|
195
|
+
}, []);
|
|
196
|
+
(0, _react.useEffect)(() => {
|
|
197
|
+
// uploadRecording();
|
|
198
|
+
}, [audioBlob]);
|
|
199
|
+
return /*#__PURE__*/React.createElement(_material.Box, {
|
|
200
|
+
className: "bg-[#0B0B0B] rounded-[5px] border p-[20px] w-[850px]"
|
|
201
|
+
}, /*#__PURE__*/React.createElement(_Grid.default, {
|
|
202
|
+
container: true,
|
|
203
|
+
spacing: 2
|
|
204
|
+
}, /*#__PURE__*/React.createElement(_Grid.default, {
|
|
205
|
+
size: 6
|
|
206
|
+
}, /*#__PURE__*/React.createElement(_material.Box, {
|
|
207
|
+
className: "flex items-center justify-between"
|
|
208
|
+
}, /*#__PURE__*/React.createElement(_material.Typography, {
|
|
209
|
+
className: "!text-[24px] !font-[600]",
|
|
210
|
+
color: "#EAE5DC"
|
|
211
|
+
}, "Voice assistant"), /*#__PURE__*/React.createElement(_material.Box, {
|
|
212
|
+
className: "flex items-center px-[10px] py-[4px] bg-[#006FFF4D] rounded-[89.1px] cursor-pointer h-[28px]",
|
|
213
|
+
sx: {
|
|
214
|
+
border: '0.9px solid #006FFFB2'
|
|
215
|
+
},
|
|
216
|
+
onClick: handleModeChange
|
|
217
|
+
}, /*#__PURE__*/React.createElement(_material.Box, null, /*#__PURE__*/React.createElement(_svgs.MicIcon, null)), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
218
|
+
className: "!font-600 !text-[14px]",
|
|
219
|
+
color: "#EAE5DC"
|
|
220
|
+
}, "Recorder mode"))), /*#__PURE__*/React.createElement(_material.Box, {
|
|
221
|
+
className: "flex items-center justify-between mt-4"
|
|
222
|
+
}, !isStartedRecord ? /*#__PURE__*/React.createElement(_material.Box, {
|
|
223
|
+
className: "flex items-center space-x-1 cursor-pointer px-[9px] py-[6px] rounded-[5px] bg-[#0B0B0B]",
|
|
224
|
+
sx: {
|
|
225
|
+
'&:hover': {
|
|
226
|
+
boxShadow: '0px 0px 5px 1px #44C63380',
|
|
227
|
+
cursor: isVoiceMode && 'not-allowed'
|
|
228
|
+
}
|
|
229
|
+
},
|
|
230
|
+
onClick: handleStartRecord
|
|
231
|
+
}, /*#__PURE__*/React.createElement(_material.Box, null, /*#__PURE__*/React.createElement(_svgs.StartIcon, null)), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
232
|
+
className: "!font-400 !text-[16px]",
|
|
233
|
+
color: "#EAE5DC"
|
|
234
|
+
}, "Start")) : /*#__PURE__*/React.createElement(_material.Box, {
|
|
235
|
+
className: "flex items-center space-x-1 cursor-pointer px-[9px] py-[6px] rounded-[5px] bg-[#0B0B0B]",
|
|
236
|
+
sx: {
|
|
237
|
+
border: '0.9px solid #F3151580',
|
|
238
|
+
'&:hover': {
|
|
239
|
+
boxShadow: '0px 0px 5px 1px #F3151580'
|
|
240
|
+
}
|
|
241
|
+
},
|
|
242
|
+
onClick: handleStartRecord
|
|
243
|
+
}, /*#__PURE__*/React.createElement(_material.Box, null, /*#__PURE__*/React.createElement(_svgs.SmallPauseIcon, null)), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
244
|
+
className: "!font-400 !text-[14px]",
|
|
245
|
+
color: "#EAE5DC"
|
|
246
|
+
}, "Stop")), /*#__PURE__*/React.createElement(_material.Box, {
|
|
247
|
+
className: "flex items-center space-x-1 cursor-pointer px-[9px] py-[6px] rounded-[5px] bg-[#0B0B0B]",
|
|
248
|
+
sx: {
|
|
249
|
+
'&:hover': {
|
|
250
|
+
boxShadow: '0px 0px 5px 2px #58585880',
|
|
251
|
+
cursor: isStartedRecord && 'not-allowed'
|
|
252
|
+
}
|
|
253
|
+
},
|
|
254
|
+
onClick: handleSteupChange
|
|
255
|
+
}, /*#__PURE__*/React.createElement(_material.Box, null, /*#__PURE__*/React.createElement(_svgs.SettingIcon, null)), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
256
|
+
className: "!font-400 !text-[14px]",
|
|
257
|
+
color: "#EAE5DC"
|
|
258
|
+
}, "Setup"))), /*#__PURE__*/React.createElement(_material.Box, {
|
|
259
|
+
className: "rounded-[5px] bg-[#A3DBFE] mt-2"
|
|
260
|
+
}, /*#__PURE__*/React.createElement(_material.Box, {
|
|
261
|
+
className: "flex items-center justify-between p-[4.5px]"
|
|
262
|
+
}, /*#__PURE__*/React.createElement(_material.Box, {
|
|
263
|
+
className: "flex items-center space-x-1 rounded-[5px] px-[5px] py-[2px] bg-[#0B0B0B]",
|
|
264
|
+
sx: {
|
|
265
|
+
boxShadow: '0px 0px 1.8px 0px #00000040'
|
|
266
|
+
}
|
|
267
|
+
}, /*#__PURE__*/React.createElement(_material.Box, null, !isStartedRecord ? /*#__PURE__*/React.createElement(_svgs.StopIcon, null) : /*#__PURE__*/React.createElement(_svgs.RedStopIcon, null)), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
268
|
+
className: "!font-[600] !text-[14px]",
|
|
269
|
+
color: "#A3DBFE"
|
|
270
|
+
}, !isStartedRecord ? 'STOP' : 'REC')), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
271
|
+
className: "!font-400 !text-[20px] px-[9px]",
|
|
272
|
+
color: "#1A2123",
|
|
273
|
+
sx: {
|
|
274
|
+
fontFamily: "Space Grotesk !important"
|
|
275
|
+
}
|
|
276
|
+
}, "01.08.2024")), /*#__PURE__*/React.createElement(_material.Box, {
|
|
277
|
+
className: "flex justify-between p-[9px]"
|
|
278
|
+
}, /*#__PURE__*/React.createElement(_material.Typography, {
|
|
279
|
+
className: "!font-400 !text-[36px]",
|
|
280
|
+
color: "#1A2123",
|
|
281
|
+
sx: {
|
|
282
|
+
fontFamily: "Space Grotesk !important"
|
|
283
|
+
}
|
|
284
|
+
}, getTimeValues(newRecordTime).hours, /*#__PURE__*/React.createElement("span", {
|
|
285
|
+
style: {
|
|
286
|
+
color: '#494A48',
|
|
287
|
+
fontWeight: "300",
|
|
288
|
+
fontSize: "16px"
|
|
289
|
+
}
|
|
290
|
+
}, "h"), " ", getTimeValues(newRecordTime).minutes, /*#__PURE__*/React.createElement("span", {
|
|
291
|
+
style: {
|
|
292
|
+
color: '#494A48',
|
|
293
|
+
fontWeight: "300",
|
|
294
|
+
fontSize: "16px"
|
|
295
|
+
}
|
|
296
|
+
}, "m"), " ", getTimeValues(newRecordTime).seconds, /*#__PURE__*/React.createElement("span", {
|
|
297
|
+
style: {
|
|
298
|
+
color: '#494A48',
|
|
299
|
+
fontWeight: "300",
|
|
300
|
+
fontSize: "16px"
|
|
301
|
+
}
|
|
302
|
+
}, "s")), /*#__PURE__*/React.createElement(_material.Box, {
|
|
303
|
+
className: "flex flex-col space-y-3 text-right"
|
|
304
|
+
}, /*#__PURE__*/React.createElement(_material.Typography, {
|
|
305
|
+
className: "!font-400 !text-[16px]",
|
|
306
|
+
color: "#494A48",
|
|
307
|
+
sx: {
|
|
308
|
+
fontFamily: "Space Grotesk !important"
|
|
309
|
+
}
|
|
310
|
+
}, audioSize, " ", /*#__PURE__*/React.createElement("span", {
|
|
311
|
+
style: {
|
|
312
|
+
fontSize: "14px",
|
|
313
|
+
fontFamily: "Space Grotesk !important"
|
|
314
|
+
}
|
|
315
|
+
}, "MB")), isStartedRecord && /*#__PURE__*/React.createElement(_material.Typography, {
|
|
316
|
+
className: "!font-bold !text-[16px]",
|
|
317
|
+
color: "#494A48",
|
|
318
|
+
sx: {
|
|
319
|
+
fontFamily: "Space Grotesk !important"
|
|
320
|
+
}
|
|
321
|
+
}, newRecordFileName))))), /*#__PURE__*/React.createElement(_Grid.default, {
|
|
322
|
+
size: 6,
|
|
323
|
+
className: `w-full ${isVoiceMode ? 'pr-[10px]' : ''}`
|
|
324
|
+
}, isVoiceMode && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_material.Box, {
|
|
325
|
+
className: "flex space-x-1 w-full"
|
|
326
|
+
}, /*#__PURE__*/React.createElement(_material.Box, null, /*#__PURE__*/React.createElement(_svgs.MicIcon, null)), /*#__PURE__*/React.createElement(_material.Box, {
|
|
327
|
+
className: "flex-1"
|
|
328
|
+
}, /*#__PURE__*/React.createElement(_material.Typography, {
|
|
329
|
+
className: "!font-[600] !text-[16px]",
|
|
330
|
+
color: "#EAE5DC"
|
|
331
|
+
}, "Voice"), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
332
|
+
className: "!font-400 !text-[14px] pt-1",
|
|
333
|
+
color: "#EAE5DC"
|
|
334
|
+
}, "Input device"), /*#__PURE__*/React.createElement(_StyledSelect.default, {
|
|
335
|
+
className: "mt-1",
|
|
336
|
+
fullWidth: true,
|
|
337
|
+
displayEmpty: true,
|
|
338
|
+
value: selectedVoice,
|
|
339
|
+
onChange: handleVoiceChange,
|
|
340
|
+
renderValue: selected => {
|
|
341
|
+
if (selected === "") {
|
|
342
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
343
|
+
style: {
|
|
344
|
+
fontSize: '12.6px',
|
|
345
|
+
fontWeight: '400',
|
|
346
|
+
lineHeight: '25.2px',
|
|
347
|
+
color: '#EAE5DC99'
|
|
348
|
+
}
|
|
349
|
+
}, "Auto-Detect");
|
|
350
|
+
}
|
|
351
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
352
|
+
style: {
|
|
353
|
+
fontSize: '12.6px',
|
|
354
|
+
fontWeight: '400',
|
|
355
|
+
lineHeight: '25.2px',
|
|
356
|
+
color: '#EAE5DC99'
|
|
357
|
+
}
|
|
358
|
+
}, voiceList[selected]);
|
|
359
|
+
},
|
|
360
|
+
MenuProps: {
|
|
361
|
+
PaperProps: {
|
|
362
|
+
sx: {
|
|
363
|
+
marginTop: "5px",
|
|
364
|
+
padding: '5px',
|
|
365
|
+
background: '#0B0B0B',
|
|
366
|
+
border: '0.9px solid #565656',
|
|
367
|
+
'& .MuiList-root': {
|
|
368
|
+
padding: "unset"
|
|
369
|
+
},
|
|
370
|
+
'& .MuiMenuItem-root': {
|
|
371
|
+
padding: "7.2px 9px",
|
|
372
|
+
color: '#EAE5DC99',
|
|
373
|
+
fontFamily: 'Reddit Sans',
|
|
374
|
+
fontSize: '12.6px',
|
|
375
|
+
fontWeight: '400',
|
|
376
|
+
lineHeight: '25.2px'
|
|
377
|
+
},
|
|
378
|
+
'& .MuiMenuItem-root:hover': {
|
|
379
|
+
background: "#A3DBFE99",
|
|
380
|
+
color: '#1A2123'
|
|
381
|
+
},
|
|
382
|
+
'& .MuiMenuItem-root.Mui-selected': {
|
|
383
|
+
background: "#A3DBFE",
|
|
384
|
+
color: '#1A2123'
|
|
385
|
+
},
|
|
386
|
+
'& .MuiMenuItem-root.Mui-selected:hover': {
|
|
387
|
+
background: "#A3DBFE99",
|
|
388
|
+
color: '#1A2123'
|
|
389
|
+
}
|
|
390
|
+
}
|
|
391
|
+
}
|
|
392
|
+
}
|
|
393
|
+
}, voiceList.map((device, index) => {
|
|
394
|
+
return /*#__PURE__*/React.createElement(_material.MenuItem, {
|
|
395
|
+
value: index,
|
|
396
|
+
key: index
|
|
397
|
+
}, device);
|
|
398
|
+
})))), /*#__PURE__*/React.createElement(_material.Box, {
|
|
399
|
+
className: "flex space-x-1 w-full mt-2"
|
|
400
|
+
}, /*#__PURE__*/React.createElement(_material.Box, null, /*#__PURE__*/React.createElement(_svgs.LanguageIcon, null)), /*#__PURE__*/React.createElement(_material.Box, {
|
|
401
|
+
className: "flex-1"
|
|
402
|
+
}, /*#__PURE__*/React.createElement(_material.Typography, {
|
|
403
|
+
className: "!font-[600] !text-[16px]",
|
|
404
|
+
color: "#EAE5DC"
|
|
405
|
+
}, "Language"), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
406
|
+
className: "!font-400 !text-[14px] pt-1",
|
|
407
|
+
color: "#EAE5DC"
|
|
408
|
+
}, "Prefer language"), /*#__PURE__*/React.createElement(_StyledSelect.default, {
|
|
409
|
+
className: "mt-1",
|
|
410
|
+
fullWidth: true,
|
|
411
|
+
displayEmpty: true,
|
|
412
|
+
value: selectedLanguage,
|
|
413
|
+
onChange: handleLanguageChange,
|
|
414
|
+
renderValue: selected => {
|
|
415
|
+
if (selected === "") {
|
|
416
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
417
|
+
style: {
|
|
418
|
+
fontSize: '12.6px',
|
|
419
|
+
fontWeight: '400',
|
|
420
|
+
lineHeight: '25.2px',
|
|
421
|
+
color: '#EAE5DC99'
|
|
422
|
+
}
|
|
423
|
+
}, "Auto-Detect");
|
|
424
|
+
}
|
|
425
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
426
|
+
style: {
|
|
427
|
+
fontSize: '12.6px',
|
|
428
|
+
fontWeight: '400',
|
|
429
|
+
lineHeight: '25.2px',
|
|
430
|
+
color: '#EAE5DC99'
|
|
431
|
+
}
|
|
432
|
+
}, languageList[selected]);
|
|
433
|
+
},
|
|
434
|
+
MenuProps: {
|
|
435
|
+
PaperProps: {
|
|
436
|
+
sx: {
|
|
437
|
+
marginTop: "5px",
|
|
438
|
+
padding: '5px',
|
|
439
|
+
background: '#0B0B0B',
|
|
440
|
+
border: '0.9px solid #565656',
|
|
441
|
+
'& .MuiList-root': {
|
|
442
|
+
padding: "unset"
|
|
443
|
+
},
|
|
444
|
+
'& .MuiMenuItem-root': {
|
|
445
|
+
padding: "7.2px 9px",
|
|
446
|
+
color: '#EAE5DC99',
|
|
447
|
+
fontFamily: 'Reddit Sans',
|
|
448
|
+
fontSize: '12.6px',
|
|
449
|
+
fontWeight: '400',
|
|
450
|
+
lineHeight: '25.2px'
|
|
451
|
+
},
|
|
452
|
+
'& .MuiMenuItem-root:hover': {
|
|
453
|
+
background: "#A3DBFE99",
|
|
454
|
+
color: '#1A2123'
|
|
455
|
+
},
|
|
456
|
+
'& .MuiMenuItem-root.Mui-selected': {
|
|
457
|
+
background: "#A3DBFE",
|
|
458
|
+
color: '#1A2123'
|
|
459
|
+
},
|
|
460
|
+
'& .MuiMenuItem-root.Mui-selected:hover': {
|
|
461
|
+
background: "#A3DBFE99",
|
|
462
|
+
color: '#1A2123'
|
|
463
|
+
}
|
|
464
|
+
}
|
|
465
|
+
}
|
|
466
|
+
}
|
|
467
|
+
}, /*#__PURE__*/React.createElement(_material.MenuItem, {
|
|
468
|
+
value: 0
|
|
469
|
+
}, "Auto-Detect"), /*#__PURE__*/React.createElement(_material.MenuItem, {
|
|
470
|
+
value: 1
|
|
471
|
+
}, "English"), /*#__PURE__*/React.createElement(_material.MenuItem, {
|
|
472
|
+
value: 2
|
|
473
|
+
}, "Chinese (Simplified)"))))), !isVoiceMode && /*#__PURE__*/React.createElement(React.Fragment, null, recordList.length === 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_material.Box, {
|
|
474
|
+
className: "flex flex-col items-center justify-center h-full"
|
|
475
|
+
}, /*#__PURE__*/React.createElement(_material.Box, null, /*#__PURE__*/React.createElement(_svgs.BoxIcon, null)), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
476
|
+
className: "!font-[600] !text-[16px] pt-2",
|
|
477
|
+
color: "#EAE5DC",
|
|
478
|
+
sx: {
|
|
479
|
+
fontFamily: "Afacad !important"
|
|
480
|
+
}
|
|
481
|
+
}, "Record Empty"), /*#__PURE__*/React.createElement(_material.Box, {
|
|
482
|
+
className: "flex items-center space-x-1 mt-1"
|
|
483
|
+
}, /*#__PURE__*/React.createElement(_material.Typography, {
|
|
484
|
+
className: "!font-400 !text-[14px]",
|
|
485
|
+
color: "#EAE5DC",
|
|
486
|
+
sx: {
|
|
487
|
+
fontFamily: "Afacad !important"
|
|
488
|
+
}
|
|
489
|
+
}, "Push"), /*#__PURE__*/React.createElement(_material.Box, null, /*#__PURE__*/React.createElement(_svgs.SmallStartIcon, null)), /*#__PURE__*/React.createElement(_material.Typography, {
|
|
490
|
+
className: "!font-400 !text-[16px]",
|
|
491
|
+
color: "#EAE5DC",
|
|
492
|
+
sx: {
|
|
493
|
+
fontFamily: "Afacad !important"
|
|
494
|
+
}
|
|
495
|
+
}, "to start")))), recordList.length > 0 && /*#__PURE__*/React.createElement(_material.Box, {
|
|
496
|
+
className: "flex flex-col space-y-2 p-[10px] scrollableBox",
|
|
497
|
+
sx: {
|
|
498
|
+
maxHeight: "225px"
|
|
499
|
+
}
|
|
500
|
+
}, recordList.map((record, index) => {
|
|
501
|
+
return /*#__PURE__*/React.createElement(_RecordListItem.default, {
|
|
502
|
+
audioURL: record.audioURL,
|
|
503
|
+
label: record.name,
|
|
504
|
+
capacity: record.size,
|
|
505
|
+
time: record.time,
|
|
506
|
+
createdDate: record.date,
|
|
507
|
+
key: index,
|
|
508
|
+
onLabelChange: newLabel => handleLabelChange(index, newLabel),
|
|
509
|
+
onDelete: () => handleDelete(index)
|
|
510
|
+
});
|
|
511
|
+
}))))));
|
|
512
|
+
};
|
|
513
|
+
var _default = exports.default = RecorderBox;
|
package/package.json
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "dmed-voice-assistant",
|
|
3
|
-
"version": "1.0
|
|
4
|
-
"main": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
|
+
"main": "dist/VoiceAssistant/index.js",
|
|
5
5
|
"files": [
|
|
6
|
-
"
|
|
7
|
-
"src/shared"
|
|
6
|
+
"dist"
|
|
8
7
|
],
|
|
9
8
|
"dependencies": {
|
|
10
9
|
"@emotion/react": "^11.13.5",
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
import { useState } from "react";
|
|
2
|
-
import RecorderBox from "./recorder";
|
|
3
|
-
import Recognition from "./recognition";
|
|
4
|
-
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
|
|
5
|
-
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
|
|
6
|
-
|
|
7
|
-
const VoiceAssistant = ({
|
|
8
|
-
recordListValue = [],
|
|
9
|
-
recognitionListValue = [],
|
|
10
|
-
onNewRecordEvent,
|
|
11
|
-
onRecordDataChange,
|
|
12
|
-
onNewRecognitionEvent,
|
|
13
|
-
onRecognitionDataChange,
|
|
14
|
-
}) => {
|
|
15
|
-
const [mode, setMode] = useState("recorder");
|
|
16
|
-
|
|
17
|
-
return (
|
|
18
|
-
<>
|
|
19
|
-
<LocalizationProvider dateAdapter={AdapterDayjs}>
|
|
20
|
-
{
|
|
21
|
-
mode === 'recorder' &&
|
|
22
|
-
<RecorderBox
|
|
23
|
-
mode={mode}
|
|
24
|
-
setMode={setMode}
|
|
25
|
-
recordHistoryList={recordListValue}
|
|
26
|
-
onNewRecordEvent={onNewRecordEvent}
|
|
27
|
-
onRecordDataChange={onRecordDataChange}
|
|
28
|
-
/>
|
|
29
|
-
}
|
|
30
|
-
{
|
|
31
|
-
mode === 'recognition' &&
|
|
32
|
-
<Recognition
|
|
33
|
-
mode={mode}
|
|
34
|
-
setMode={setMode}
|
|
35
|
-
recognitionHistoryList={recognitionListValue}
|
|
36
|
-
onNewRecognitionEvent={onNewRecognitionEvent}
|
|
37
|
-
onRecognitionDataChange={onRecognitionDataChange}
|
|
38
|
-
/>
|
|
39
|
-
}
|
|
40
|
-
</LocalizationProvider>
|
|
41
|
-
</>
|
|
42
|
-
);
|
|
43
|
-
};
|
|
44
|
-
|
|
45
|
-
export default VoiceAssistant;
|