21 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
--------------------------------------------------------------------------------
/static/asr_dashboard.js:
--------------------------------------------------------------------------------
1 | var asrdashboard = new Vue({
2 | el: '#asrdashboard',
3 | data: {
4 | headerMessage: 'Real-Time Speech Recoginition Dashboard',
5 | loggedUser: "ameer@twilio.com",
6 | userAuthenticated: false,
7 | syncMode: false,
8 | syncStatus: "Disconnected",
9 | callList: [],
10 | maxCallList: 100,
11 | Intents: {"Default": 0}
12 | },
13 | methods: {
14 | syncRetrieveCallMap: function(data) {
15 | var self = this;
16 | var call = {};
17 | //var localcallList = [];
18 | //console.log(data[0]);
19 | for (let i = 0 ; i < data.length ; i++ ) {
20 | call = {};
21 | call['CallSid'] = data[i].value['CallSid'];
22 | call['CallDate'] = data[i].value['CallDate'];;
23 | call['From'] = data[i].value['From'];
24 | call['CallStatus'] = data[i].value['CallStatus'];
25 | call['SpeechResult'] = data[i].value['SpeechResult'];
26 | call['ASRConfidence'] = Math.round((parseFloat(data[i].value['Confidence']) * 100.00));
27 | call['Intent'] = data[i].value['Intent'];
28 | call['IntentScore'] = Math.round((parseFloat(data[i].value['IntentScore']) * 100.00));
29 | //localcallList.push(call);
30 | self.callList.push(call);
31 | }
32 | self.callList = _.orderBy(self.callList, ['CallDate'], ['desc']);
33 | },
34 | syncCallMap: function(data) {
35 | var self = this;
36 | var call = {};
37 | //console.log(data);
38 | call = {};
39 | call['CallSid'] = data.value['CallSid'];
40 | call['CallDate'] = data.value['CallDate'];;
41 | call['From'] = data.value['From'];
42 | call['CallStatus'] = data.value['CallStatus'];
43 | call['SpeechResult'] = data.value['SpeechResult'];
44 | call['ASRConfidence'] = Math.round((parseFloat(data.value['Confidence']) * 100.00));
45 | call['Intent'] = data.value['Intent'];
46 | call['IntentScore'] = Math.round((parseFloat(data.value['IntentScore']) * 100.00));
47 | self.callList.push(call);
48 | self.callList = _.orderBy(self.callList, ['CallDate'], ['desc']);
49 | var currentLength = self.callList.length;
50 | // Keep the callList array length of maxCallList
51 | if (currentLength > self.maxCallList)
52 | {
53 | delta = currentLength - self.maxCallList;
54 | self.callList.splice(self.maxCallList, delta);
55 | }
56 | }
57 | },
58 | computed: {
59 | reverseCallList: function() {
60 | // Use lodash provided sort function
61 | return _.orderBy(this.callList, ['CallDate'], ['desc']);
62 | },
63 | totalIVRInteractions: function () {
64 | return this.callList.length;
65 | },
66 | callIntentData: function () {
67 | var self = this;
68 | var Intents = {};
69 | var allIntents = [];
70 | //console.log(self.callList.length)
71 | if (self.callList.length > 0) {
72 | for (var i = 0; i < self.callList.length; i++) {
73 | //console.log(self.callList[i]);
74 | //Intent[self.callList[i]["Intent"]] = Intent[self.callList[i]["Intent"]];
75 | if ( Intents[self.callList[i]["Intent"]] >= 0 )
76 | {
77 | Intents[self.callList[i]["Intent"]] += 1 ;
78 | }
79 | else
80 | {
81 | Intents[self.callList[i]["Intent"]] = 1;
82 | }
83 |
84 | }
85 | //console.log(Intents);
86 |
87 | for ( intent in Intents )
88 | {
89 | allIntents.push( [intent, Intents[intent]]);
90 | }
91 |
92 | //self.Intents = Intent;
93 | }
94 |
95 | console.log("[DEBUG]::" + allIntents);
96 | return allIntents;
97 | },
98 | callIntentTrendsData: function () {
99 | var self = this;
100 | var intentTrends = [];
101 | var intentTrend = {};
102 | //console.log(self.callList.length)
103 | if (self.callList.length > 0) {
104 | for (var i = 0; i < self.callList.length; i++) {
105 | console.log(self.callList[i]);
106 |
107 | //Intent[self.callList[i]["Intent"]] = Intent[self.callList[i]["Intent"]];
108 | let intentName = self.callList[i]["Intent"] ;
109 | let intentDate = self.callList[i]["CallDate"];
110 | let intentDateFormatted = new Date(intentDate.substring(0,10));
111 | let currIntent = {};
112 |
113 | if ( ! intentTrend[intentName] )
114 | {
115 | currIntent["name"] = intentName ;
116 | currIntent["data"] = {} ;
117 | currIntent["data"][intentDateFormatted] = 1 ;
118 | intentTrend[intentName] = currIntent ;
119 | }
120 | else
121 | {
122 | currIntent = intentTrend[intentName];
123 | if ( ! currIntent["data"][intentDateFormatted] )
124 | {
125 | currIntent["data"][intentDateFormatted] = 1 ;
126 | }
127 | else
128 | {
129 | currIntent["data"][intentDateFormatted] += 1 ;
130 | }
131 |
132 | intentTrend[intentName] = currIntent ;
133 | }
134 | }
135 | //console.log("TREND Data" + JSON.stringify(intentTrend));
136 |
137 | for ( thisIntentTrend in intentTrend )
138 | {
139 | intentTrends.push( intentTrend[thisIntentTrend] );
140 | }
141 | //self.Intents = Intent;
142 | }
143 | console.log("[TREND DATA ARRAY]::" + intentTrends);
144 | return intentTrends;
145 |
146 |
147 | }
148 | },
149 | })
150 | // Twilio Sync setup
151 | //Our interface to the Sync service
152 | var syncClient;
153 | //We're going to use a Sync Map for this demo
154 | var syncMapName;
155 | var userid = asrdashboard.$data.loggedUser;
156 | var ts = Math.round((new Date()).getTime() / 1000);
157 | var tokenUserid = userid + ts;
158 | asrdashboard.$data.syncEndpoint = tokenUserid;
159 | $.getJSON('/token' + '?identity=' + tokenUserid, function (tokenResponse) {
160 | //Initialize the Sync client
161 | var syncClient = new Twilio.Sync.Client(tokenResponse.token, { logLevel: 'info' });
162 | asrdashboard.$data.syncStatus = userid + ' Connected';
163 | //Get current Map and then subsribe to add and update events
164 | syncMapName = 'ASRBotEvents';
165 |
166 | syncClient.map(syncMapName).then(function(map) {
167 | function processPage(page) {
168 | //page.items.forEach(message => {console.log(message);});
169 | asrdashboard.syncRetrieveCallMap(page.items);
170 | if (page.hasNextPage) {
171 | page.nextPage().then(processPage);
172 | } else {
173 | console.log("DEBUG:: All Map Items Retrieved.");
174 | }
175 | }
176 | // retrieve 100 items per page
177 | map.getItems({pageSize: 100, order: 'desc'}).then(function(page) {
178 | processPage(page);
179 | });
180 | console.log("Dashboard Ready!");
181 | map.on('itemAdded', function(item) {
182 | console.log('New Key: ', item.key);
183 | console.log('New ASRBotEvents Data:', item);
184 | asrdashboard.syncCallMap(item);
185 | });
186 | });
187 | });
--------------------------------------------------------------------------------
22 |
23 |
24 |
31 |
32 |
33 |
34 |
52 |
53 |
54 |
86 |
87 | Real-Time Speech Recoginition Dashboard |
27 |  |
28 |
|---|
|
37 |
38 |
45 |
39 | {{totalIVRInteractions}}
40 |
41 |
42 | Most Recent IVR Interactions
43 |
44 | |
46 |
47 |
48 | |
49 |
50 |
|---|
| Date Created | 56 |From | 57 |ASR | 58 |ASR Confidence | 59 |Intent (Dialogflow) | 60 |Intent Score | 61 |
|---|---|---|---|---|---|
| 66 | {{call.CallDate}} 67 | | 68 |69 | {{call.From}} 70 | | 71 |
72 | {{call.SpeechResult}}73 | |
74 | 75 | {{call.ASRConfidence}}% 76 | | 77 |78 | {{call.Intent}} 79 | | 80 |81 | {{call.IntentScore}} 82 | | 83 |