Skip to content

Latest commit

 

History

History
271 lines (216 loc) · 6.77 KB

js.org

File metadata and controls

271 lines (216 loc) · 6.77 KB
Raw

Org

  • Discord
  • Exercise 1 (do you need feedback?)
  • Evaluation and updates (no TypeScript, more attention to learning JS)
  • Schedule

Programming environment

You will be learning many technologies through this course. You will learn JavaScript. Standards such as SSML, SCXML (as implimented in XState library). And also, if time permits, a bit of VoiceXML.

Prerequisites:

NodeJS
download and install NodeJS (the LTS version)
Text editor
your editor of choice (e.g. Emacs or VS Code)
Github account
you need to have one, and also know at least a little bit about git.

Course repo: https://github.com/GU-CLASP/dialogue-systems-1-2024

System architecture

Spoken dialogue system architecture

./img/sds.png

Azure, XState and SpeechState

Motivation

  1. Many systems on the market are proprietary: the code is either not available (DialogueFlow) or one need to look how things are actually implemented in the code (not in the documentation) RASA.
  2. In the past (before 2020) we used VoiceXML, and in 2020 we used RASA. VoiceXML was great for dialogue management, because it was very transparent: it is a standard specifically built for voice applications.
  3. This year we will be using state charts, which are standardised (SCXML) and are very flexible. We will employ the JavaScript implementation of SCXML — XState.
  4. The platform that we used in the past for VoiceXML — Voxeo — had some terrible speech recognition and synthesis and one needed to dial a phone number to talk to the system. Now everything will just work in your browser.
  5. The browser-based architecture is flexible. In future you can use visual modality, even virtual reality (WebXR).

Mentimeter

https://www.menti.com/alkp7fkpo82j

Caveats

You will need to learn JavaScript. Why? Because of the browser. And because of XState.

  • It is not hard, you already know some fundamentals of Python. And you will only need fundamentals in this course.
  • It is very useful, because it is a new way of thinking. You’ll become a better programmer.

Get started with JavaScript

Resources

Run

In the browser

  • Web Console (Ctrl-Shift-I or Cmd-Option-K or Cmd-Option-I)
  • Multi-line input (Shift-Enter)

HTML and JS

index.html

<html><body><pre><script src="program.js"></script></pre></body></html>

program.js

document.writeln('Hello, world!');

The language

Grammar

  • comments: // (or /* */)
  • reserved words can’t be used as variables or even object properties 
    abstract
boolean break byte
case catch char class const continue
debugger default delete do double
else enum export extends
false final finally float for function
goto
if implements import in instanceof int interface
long
native new null
package private protected public
return
short static super switch synchronized
this throw throws transient true try typeof
var volatile void
while with
  • no integers, 1 is the same as 1.0
  • NaN or “not a number”. NaN is not equal to any value, including itself. You can check it with the function isNaN(n) 
    parseInt("bla")
  • Identation does not matter. So JS needs some brackets (“blocks”). For example, if: 
    if (expression) {
  statement1;
  statement2;
} else {
  statement3;
}

Strings

No character type.

'j' + 's' === 'js'
'js'.toUpperCase() === 'JS'

Template literals and backticks (“):

`Hello, ${username}!`

Falsity

(a lot of) falsy values:

  • false
  • null
  • undefined
  • "", 0 and NaN

All the rest are true.

Equality

2 * 2 === 4
2 * 2 !== 5

Avoid == and !=!

Trenary if

C ? T : F If C is true, then T. Else F.

Let and const

Avoid var!

Objects

  • Object literals 
    let simpleGrammar = {
    "I want big pizza with zuccini": {
        size: "L",
        topping: "zuccini"
    },
    "I want a small pizza": {
        size: "S",
    }
};
  • Retrieval: const size = pizza.size || "unknown"; (undefined and TypeError)
  • Update (objects are mutable!)
  • Prototype object: let another_pizza = Object.create(pizza). Delegation & prototype chain. .hasOwnProperty() method.
  • Objects are passed by reference!
  • Delete. Does not touch any object in prototype linkage!
  • in

Functions

Functions are also objects. You can define function in place:

    const add = function (a, b) {
        return a + b;
    };

  // or
const add = (a,b) => { return a + b }

Function can be a property of an object. We call it a method.

    let myObject = {
        value: 0,
        increment: function (inc) {
            this.value += typeof inc === 'number' ? inc : 1;
        }
    }

// these are the same
myObject["increment"]()
myObject.increment()

Lambda:

arrays

  • Arrays are special kinds of objects
  • Arrays can contain a mixture of value types.
const numbers = [
        'zero', 1, 'two', 3, 'four',
    ];
let i;
for (i = 0; i < numbers.length; i += 1) {
    document.writeln(numbers[i]);
}

// fix me!
for (n in numbers) {
    document.writeln(n);
}

Scoping: var, let and const

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

NodeJS

Node.js is a cross-platform JavaScript runtime environment that allows developers to build server-side and network applications with JavaScript.

We will be using Vite as runtime (dev server).

Overall…

JavaScript is nice!

Douglas Crockford for Beautiful Code (O’Reilly):

Functions as first class objects: functions in Simplified JavaScript are lambdas with lexical scoping.

Dynamic objects with prototypal inheritance: Objects are class-free. We can add a new member to any object by ordinary assignment. An object can inherit members from another object.

Object literals and array literals. This is a very convenient notation for creating new objects and arrays. JavaScript literals were the inspiration for the JSON data interchange format.

DOM