In the previous versions of the firmware for the smart speaker, we had a separate flask server for serving the configuration page and another flask server for serving the control page. This puts forward inconsistencies in the frontend. To make the frontend and the user experience the same across all platforms, the SUSI.AI Web Client is now integrated into the smart speaker.

Now whenever the device is in Access Point mode (Setup mode), and the user accesses the web client running on the smart speaker, the device configuration page is shown.

If the device is not in access point mode, the normal Web Client is shown with a green bar on top saying “You are currently accessing the local version of your SUSI.AI running on your smart device. Configure now”
Clicking on the Configure now link redirects the user to the control page, where the user can change the settings for their smart speaker and control media playback.

To integrate both the control web page and the configure web page in the web client we needed to combine the flask server for the control and the configure page. This is done by adding all the endpoints of the configure server to the sound server and then renaming the sound server to control server – Merge Servers

Serving the WebClient through the control server

The next step is to add the Web Client static code to the control server and make it available on the root URL of the server.
To do this, first, we have to clone the web client during the installation and add the required symbolic links for the server.

echo "Downloading: Susi.AI webclient" if [ ! -d "susi.ai" ] then     git clone --depth 1 -b gh-pages https://github.com/fossasia/susi.ai.git     ln -s $PWD/susi.ai/static/* $PWD/susi_installer/raspi/soundserver/static/     ln -s $PWD/susi.ai/index.html $PWD/susi_installer/raspi/soundserver/templates/ else     echo "WARNING: susi.ai directory already present, not cloning it!" >&2 fi

The next step is to add the route for the Web Client in the control flask server.

@app.route('/') def index():     return render_template('index.html')

Here the index.html file is of the Web Client which we linked to the templates folder in the previous step.

Connecting the web client to the locally running SUSI Server

The Web Client by default connects to the SUSI Server at https://api.susi.ai but however the smart speaker has its own server running. To connect to the local server we do the following

– Before building the local version from the source of web client we need to set the process.env.REACT_APP_LOCAL_ENV environment variable to true.

– While building the javascript function check() checks if the above-mentioned environment variable is set to true and if yes, sets the API_URL to http://<host_IP_address>:4000

function check() {   if (process && process.env.REACT_APP_LOCAL_ENV === 'true') {     return 'http://' + window.location.hostname + ':4000';   }   return 'https://api.susi.ai'; } const urls = {   API_URL: check(),   .  .//rest URLs };

Resources

Javascript window.location – https://developer.mozilla.org/en-US/docs/Web/API/Window/location

Symlinks Linux – https://www.shellhacks.com/symlink-create-symbolic-link-linux/
SUSI.AI Web Client documentation – https://github.com/fossasia/susi.ai/blob/master/README.md

Tags

SUSI Smart Speaker, SUSI.AI, FOSSASIA, GSoC19