Guess the Number with Pepper using tablet

This tutorial will show you how to interact with Pepper tablet to play a “guess the number” game.

The ideas are:

• Make pepper display a random number between 1-10 on a webpage on its tablet with a start button.

• Upon a user pressing the start button, make Pepper say: which number is displayed on my tablet?

• User mentions number, audio picked up by Pepper's microphone array.

• Pepper transcribes the audio and checks number with the one of the tablet, and responds either: Yes, that's correct, OR No, [too high/too low]. Try again.

Approach

Before creating the demo, we need to understand that the design of the Webserver goes hand in hand with the requirements of the demo, as the Webserver is the component that handles any event from the web client. So, in this tutorial, the Webserver needs to handle the button click event and send live transcripts transcribed produced by Dialogflow service to the connected client over a WebSocket connection

So, this tutorial can split into two parts:

1. The design of html and Webserver

   1. Creating the html

   2. Creating the flask server in Webserver

2. The demo program connects all the servers (NaoqiMicrophone(or local microphone), Webserver, Dialogflow)

The design of html and Webserver

In the html, we need to Add a button and make it listen to the click event. Once the button is clicked, the isStreaming flag will be set to true, and it sends the flag to the Flask server via WebSocket.

// Flag to track if the game should start
var isStreaming = false;
// Event listener for the start button click
var startButton = document.getElementById('startButton');

startButton.addEventListener('click', function() {
  isStreaming = true; // Set the flag to start streaming
  sendFlagToServer(isStreaming);
});

// Function to send flag to Flask server
function sendFlagToServer(flag) {
  socket.emit('streaming_flag', flag);
}

On flask server server, we need to create

1. Creating the flask server in Webserver

3. How to add a text box to html and update the text constanly in the text box