Merge pull request #7 from nexmo-community/update

Update repo

Author: Abdulhakim Ajetunmobi

.env-example

@@ -0,0 +1,10 @@
+BASE_URL=
+SOCKET_BASE_URL=
+VONAGE_APPLICATION_ID=
+TEST_HANDSET=
+VONAGE_FROM_NUMBER=
+TONE_ANALYZER_API_KEY=
+TONE_ANALYZER_URL=
+TRANSCRIBER_API_KEY=
+TRANSCRIBER_SERVER_LOCATION=
+TRANSCRIBER_SERVER_INSTANCE_ID=

README.md

@@ -1,32 +1,60 @@
-Sentiment analysis of voice calls using IBM Watson
-==================================================
+# Sentiment analysis of voice calls using IBM Watson
+<img src="https://developer.nexmo.com/assets/images/Vonage_Nexmo.svg" height="48px" alt="Nexmo is now known as Vonage" />
 
-This is the companion code for the ["Add Sentiment Analysis to Your Inbound Call Flow with IBM Watson and Nexmo" webinar](https://attendee.gotowebinar.com/recording/7952180850491069704). Please view the webinar
-recording for full details on how to run this example.
+This is the companion code for the ["Add Sentiment Analysis to Your Inbound Call Flow with IBM Watson and Nexmo" webinar](https://youtu.be/nFIj8RVy8Pg). Note that the project has since been updated since the webinar has been recorded. The main differences are with the authentication with IBM Watson.
 
-Quickstart
-----------
+## Welcome to Vonage
 
-There are several environment variables in `call_objects.py` and `ws_server.py` which should be
-set to the correct values in your environment.
+If you're new to Vonage, you can [sign up for a Vonage API account](https://dashboard.nexmo.com/sign-up?utm_source=DEV_REL) and get some free credit to get you started.
 
-    NEXMO_APPLICATION_ID
-    TEST_HANDSET
-    NEXMO_FROM_NUMBER
-    TONE_ANALYZER_USERNAME
-    TONE_ANALYZER_PASSWORD
-    TRANSCRIBER_USERNAME
-    TRANSCRIBER_PASSWORD
+## IBM Watson Credentials
 
-You should also update all urls within `call_objects.py` to point to your ngrok address.
+This project uses 2 IBM Cloud services, the Speech to Text and Tone Analyzer. The credentials you need for Speech to Text are your service's location, e.g. "eu-gb", the service's instance id and your API Key.
 
-    # This code has been tested with Python 3.6.3
-    # Install dependencies
-    pip install -r requirements.txt
+For the Tone Analyzer you need your service's URL and API Key, which is different from the Speech to Text one. They can be fetched from the respective parts of the IBM Cloud dashboard.
 
-    # Run Hug server
-    hug -f call_objects.py
+## Running the project
 
-    # Run Tornado server
-    python ws_server.py
+First install the project dependencies using `pip install -r requirements.txt`.
 
+Next set up your environment variables. Make an `.env` file using the command `cp .env-example .env`. Then fill out your `VONAGE_APPLICATION_ID`, `TEST_HANDSET`, `VONAGE_FROM_NUMBER` and the IBM Watson credentials. `TEST_HANDSET` is the number of a second phone that will be the moderator of the conference call. 
+
+The project has three components:
+
++ The Vonage Application Server
++ The WebSocket Server
++ The Dashboard 
+
+### The Vonage Application Server
+
+Create a localtunnel for the Vonage Application Server port, 8000, using the following command. Replace `SUBDOMAIN` with a unique string 
+
+`npx localtunnel --port 8000 --subdomain=SUBDOMAIN`
+
+Add the domain to your `.env` file under `BASE_URL` and update your Vonage Application `answer_url` to the domain. Then you can run the server with `hug -f call_objects.py`.
+
+### WebSocket Server
+
+Create a localtunnel for the WebSocket Server port, 3000, using the following command. Replace `SUBDOMAIN` with the same unique string from the previous step 
+
+`npx localtunnel --port 3000 --subdomain=SUBDOMAIN-sockets`
+
+Add the domain to your `.env` file under `SOCKET_BASE_URL`. Then you can run the server with `python3 ws_server.py`.
+
+### The Dashboard
+
+Update `/dashboard/script.js` with the `SOCKET_BASE_URL` then open `index.html` in your web browser. With the dashboard open, you can now make a call to your `VONAGE_FROM_NUMBER` which will call the `TEST_HANDSET` number and open the WebSocket. When the test handset picks up, the call will begin and you will start to see the sentiment analysis on the chart.
+
+![dashboard example](dashboard/example.png)
+
+## Getting Help
+
+We love to hear from you so if you have questions, comments or find a bug in the project, let us know! You can either:
+
+* Open an issue on this repository
+* Tweet at us! We're [@VonageDev on Twitter](https://twitter.com/VonageDev)
+* Or [join the Vonage Developer Community Slack](https://developer.nexmo.com/community/slack)
+
+## Further Reading
+
+* Check out the Developer Documentation at <https://developer.nexmo.com>

call_objects.py

@@ -1,37 +1,39 @@
 import os
 import uuid
 import hug
-import nexmo
+import vonage
+from dotenv import load_dotenv
+from typing import List
 
+load_dotenv()
 
 class CallObjectServer():
 
     def __init__(self):
         self.conversation_name = str(uuid.uuid4())
-        self.nexmo_client = nexmo.Client(
-            application_id=os.environ['NEXMO_APPLICATION_ID'],
+        self.vonage_client = vonage.Client(
+            application_id=os.getenv('VONAGE_APPLICATION_ID'),
             private_key='private.key'
         )
 
-    def start(self):
-
-        self.nexmo_client.create_call({
-            'to': [{'type': 'phone', 'number': os.environ['TEST_HANDSET']}],
-            'from': {'type': 'phone', 'number': os.environ['NEXMO_FROM_NUMBER']},
-            'answer_url': ['https://nexmo-sentiment.ngrok.io/moderator']
+    def start(self) -> List[dict]:
+        self.vonage_client.create_call({
+            'to': [{'type': 'phone', 'number': os.getenv('TEST_HANDSET')}],
+            'from': {'type': 'phone', 'number': os.getenv('VONAGE_FROM_NUMBER')},
+            'answer_url': ['https://' + os.getenv('BASE_URL') + '/moderator']
         })
 
-        self.ws_call = self.nexmo_client.create_call({
+        self.ws_call = self.vonage_client.create_call({
             'to': [
                 {
                     "type": "websocket",
-                    "uri": "ws://nexmo-sentiment-sockets.ngrok.io/audio",
+                    "uri": "ws://" + os.getenv('SOCKET_BASE_URL') + "/audio",
                     "content-type": "audio/l16;rate=16000",
                     "headers": {}
                 }
             ],
-            'from': {'type': 'phone', 'number': os.environ['NEXMO_FROM_NUMBER']},
-            'answer_url': ['https://nexmo-sentiment.ngrok.io/attendee']
+            'from': {'type': 'phone', 'number': os.getenv('VONAGE_FROM_NUMBER')},
+            'answer_url': ['https://' + os.getenv('BASE_URL') + '/attendee']
         })
 
         return [
@@ -43,11 +45,11 @@ def start(self):
                 "action": "conversation",
                 "name": self.conversation_name,
                 "startOnEnter": "false",
-                "musicOnHoldUrl": ["https://nexmo-sentiment.ngrok.io/hold.mp3"]
+                "musicOnHoldUrl": ["https://" + os.getenv('BASE_URL') + "/hold.mp3"]
             }
         ]
 
-    def moderator(self):
+    def moderator(self) -> List[dict]:
         return [
             {
                 "action": "conversation",
@@ -57,13 +59,13 @@ def moderator(self):
             }
         ]
 
-    def attendee(self):
+    def attendee(self) -> List[dict]:
         return [
             {
                 "action": "conversation",
                 "name": self.conversation_name,
                 "startOnEnter": "false",
-                "musicOnHoldUrl": ["https://nexmo-sentiment.ngrok.io/hold.mp3"]
+                "musicOnHoldUrl": ["https://" + os.getenv('BASE_URL') + "/hold.mp3"]
             }
         ]
 
@@ -77,4 +79,4 @@ def static(self):
 router.get('/')(server.start)
 router.get('/hold.mp3', output=hug.output_format.file)(server.static)
 router.get('/moderator')(server.moderator)
-router.get('/attendee')(server.attendee)
+router.get('/attendee')(server.attendee)

dashboard/example.png

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Sentiment</title>
+    <script type="text/javascript" src="script.js" defer></script>
+    <script type="text/javascript" src="smoothie.js"></script>
+  </head>
+
+  <body>
+    <canvas id="mycanvas" width="900" height="300"></canvas>
+
+    <ul id="toneList">
+    </ul>
+  </body>
+</html>

dashboard/index.html

@@ -0,0 +1,55 @@
+var smoothie = new SmoothieChart({ maxValue: 1, minValue: 0 });
+smoothie.streamTo(document.getElementById("mycanvas"), 3000);
+
+const ws = new WebSocket("wss://SOCKET_BASE_URL/dashboard");
+
+var series = {};
+
+ws.onmessage = function(evt) {
+  const tones = JSON.parse(evt.data);
+
+  tones.forEach(function(tone) {
+    if (series[tone.tone_id]) {
+      addNewEntry(series[tone.tone_id], tone.score);
+    } else {
+      const toneId = tone.tone_id;
+      const color = random_rgb();
+      const newEntry = {
+        timeSeries: new TimeSeries(),
+        stroke: color,
+        fill: "rgba(255,255,255,0.7)"
+      };
+
+      series[toneId] = newEntry;
+      addSeriesToChart(newEntry);
+      addToList(toneId, color);
+    }
+  });
+};
+
+function addToList(toneId, color) {
+  var list = document.getElementById("toneList");
+  var entry = document.createElement("li");
+  entry.appendChild(document.createTextNode(toneId));
+  entry.style.color = color
+  list.appendChild(entry);
+}
+
+function addSeriesToChart(entry) {
+  smoothie.addTimeSeries(entry.timeSeries, {
+    strokeStyle: entry.stroke,
+    fillStyle: entry.fill,
+    lineWidth: 6
+  });
+}
+
+function addNewEntry(entry, score) {
+  entry.timeSeries.append(new Date().getTime(), score);
+}
+
+function random_rgb() {
+  var o = Math.round,
+    r = Math.random,
+    s = 255;
+  return "rgba(" + o(r() * s) + "," + o(r() * s) + "," + o(r() * s) + ")";
+}