W E L I V E O U R L I V E S I N C R E A S I N G LY O N L I N E

W E L I V E O U R L I V E S I N C R E A S I N G LY O N L I N EB U T T H E O N LYC O N S TA N T I S C H A N G E .

CONSUMENTENBOND - ENERGIE VERGELIJKER

“People are using search engines rather thanlibraries or teachers to make sense of the world
we’re inhabiting.”–SAFIA NOBLE, PHD,AUTHOR OF ALGORITHMS OF OPPRESSIONTECH CAN BE MAGICALSARAH DRASNER@SARAH_EDO

LIVE &MACHINE LEARN

The good, the bad,and the intriguing

"MACHINE LEARNING GIVES COMPUTERSABILITY TO LEARN WITHOUT BEINGE X P L I C I T LY P R O G R A M M E D ”
ARTHUR SAMUEL, 1959

@sarah_edo

@sarah_edo

@sarah_edo

@sarah_edo

@sarah_edo

SUPERVISED

Pug

Kitten@sarah_edo

Pug

Pug

KittenKittenUNSUPERVISED?
@sarah_edo

SUPERVISEDNaive Bayes
Nearest Neighbor

Genetic

Convolutional Neural Networks

Support Vector Machines
Linear Regression

Back Propagation Neural Network@sarah_edoPug?

Pug?

Pug?
@sarah_edo

@sarah_edo

+@sarah_edo

+@sarah_edo

Pug?
Accuracy: 100%90%@sarah_edo

@sarah_edo

T H E R O A D T O H E L L I S PA V E DWITH GOOD INTENTIONSPredPolS O U R C E : W E A P O N S O F M AT H D E S T R U C T I O N@sarah_edo

ONCE A CRIMINAL,A L W AY S A C R I M I N A L• 68% become re-offenders within 3 years,

77% in 5 years• People report to finding it hard to fit back into“normal” life once being in prison for a while• Employment becomes more difficult

S O U R C E : U S D E PA R T M E N T O F J U S T I C E

RISK ASSESSMENTC O M PA S
Recidivism Score is used to determine whether someone
will commit another crime within two years.

S O U R C E : P R A C T I T I O N E R ’ S G U I D E T O C O M PA S S C O R E S

SOURCE: MACHINE BIAS, RISK ASSESSMENT IN CRIMINAL SENTENCING@sarah_edo

Blacks are almost twice as likely as whites to belabeled a higher risk but not actually re-offend@sarah_edo

@sarah_edo

@sarah_edo

Z I L LY, 4 8 , C O N S T R U C T I O N W O R K E R@sarah_edo

W H AT M A K E S C O M PA S F A I L ?
• No transparency• It doesn’t adapt over time
• People use it without asking questions• Including whether this is the right place

for an algorithm at all.

C A N O N LY E V A L U AT E T H E PA S T
S O U R C E : W E A P O N S O F M AT H D E S T R U C T I O N

“I don’t like the idea myself of COMPAS being the soleevidence that a decision would be based upon.”-Brennan, co-creator of COMPAS@sarah_edo

P E O P L E W I L L S AY A L G O R I T H M S
CAN’T BE BIASED.

BUT ALGORITHMS AREWRITTEN BY PEOPLE.

A C X I O M , A D ATA B R O K E R A G E• Had an average of 1500 data points for 500 million

consumers, including the entire adult population ofthe United States• That was in 2012.
• That’s just one company.

S O U R C E : T E C H N I C A L LY W R O N G

W H AT D O E S F A C E B O O K T H I N K A B O U T M E ?
The Oatmeal

James Patterson

Mermaid

Software Developer
Shoes

Trench Coats
Wine

Neuroscience

Science

Cloud computing
KnittingToys
3d computer graphics

Animated Movies
SportsDogs

Do it yourself

Navy• Facebook uses these tags to drive directed ads• You can use it to target on demographics, including race
• Buying a house- limited to races• Illegal under the Fair Housing Act of 1968
• Once pointed out, Facebook fixed it

S O U R C E : T E C H N I C A L LY W R O N G

@sarah_edo

“It’s not that digitizing the world is inherently bad.
But the more technology becomes embedded in all
aspects of life, the more it matters whether thattechnology is biased, alienating, or harmful”–SARA WACHTER-BOETTCHER,AUTHOR OF DESIGN FOR REAL LIFE

@sarah_edo

@sarah_edo

@sarah_edo

@sarah_edo

<input type="file" name="file" id="file" class="inputfile" @change="fileUpload" /><label for="file" aria-label="upload image"><svg
xmlns="http://www.w3.org/2000/svg"
width="45" height="45"
viewBox="0 0 32 32"
aria-labelledby="plus"
role="presentation"><title id="plus">Plus Sign</title><circle cx="15" cy="15" r="15" fill="#bf310b"/><line x1="15" x2="15" y1="10" y2="20" fill="none" stroke-weight="2" stroke="#fff"/><line x1="10" x2="20" y1="15" y2="15" fill="none" stroke-weight="2" stroke="#fff"/></svg></label>@sarah_edofileUpload(e) {var files = e.target.files || e.dataTransfer.files;
if (!files.length) return;this.image = files[0];this.createImage();this.visionReq();},
createImage() {var image = new Image();var reader = new FileReader();reader.onload = e => {this.image = e.target.result;};reader.readAsDataURL(this.image);},@sarah_edo

apiReq(params, urlPath) {let uribase = `https://westcentralus.api.cognitive.microsoft.com/vision/v1.0/${urlPath}`;...
return axios({method: "post",
url: uribase,data: data,
params: params,
headers: {"Content-Type": contentType,"Ocp-Apim-Subscription-Key": “xxxxxxxxxxxxxxx"},
validateStatus(status) {return status < 500;}});},@sarah_edo

visionReq() {let param1 = {language: "unk","detectOrientation ": "true"};let param2 = {visualFeatures: "Categories,Description,Color",
details: "",language: "en"};...
this.apiReq(param2, "analyze").then(response => {if (response.status === 200) {this.desc = response.data.description.captions[0].text;} else {this.noText = true;}});},@sarah_edo

@sarah_edo

W H AT E L S E C A N C O G N I T I V E S E R V I C E S D O ?

LUIS

@sarah_edo

@sarah_edo

@sarah_edo

@sarah_edo

@sarah_edo

SLOW DOWN

@sarah_edo

BIOFEEDBACK

@sarah_edo

@sarah_edo

In store.js (Vuex)
getUnderstanding({ commit }, utterance) {commit('setUiState', 'fetching')
const url = `https://westus.api.cognitive.microsoft.com/luis/v2.0/apps/4aba2274-c5df-4b0d-8ff7-57658254d042`
https: axios({method: 'get',url,params: {verbose: true,timezoneOffset: 0,q: utterance},
headers: {'Content-Type': 'application/json','Ocp-Apim-Subscription-Key': ‘XXXXXXXXXXXXXXXXXXX'}})@sarah_edo

In store.js (Vuex).then(({ data }) => {console.log('axios result', data)
if (altMaps.hasOwnProperty(data.query)) {commit('newIntent', {intent: altMaps[data.query],score: 1})} else {commit('newIntent', data.topScoringIntent)}
commit('setUiState', 'idle')
commit('setZoom')}).catch(err => {console.error('axios error', err)})@sarah_edo

In store.js (Vuex)
export default new Vuex.Store({state: {counter: 0,intent: 'None',intensity: 'None',score: 0,// idle - awaiting user input// listening - listening to user input// fetching - fetching user data from the API
uiState: 'idle',zoom: 3},getters: {intentStr: state => {var str = state.intent
str = str.replace(/\b(App.)\b/gi, '')return str},@sarah_edo

In store.js (Vuex)
actions: {getSpeech({ dispatch, commit, state }) {commit('setUiState', 'listening')//keep recording speech all the time or activate it//for the first screen no, press a button. second screen yes.
state.intent === 'None'? (recognition.continuous = true): (recognition.continuous = false)
recognition.start()
recognition.onresult = function(event) {const last = event.results.length - 1
const phrase = event.results[last][0].transcript
dispatch('getUnderstanding', phrase)}},…

@sarah_edo

@sarah_edo

@sarah_edo

In store.js (Vuex)

mutations: {newIntent: (state, {intent, score}) => {if (intent.includes('Intensity')) {state.intensity = intent
if (intent.includes('More')) {state.counter++} else if (intent.includes('Less')) {state.counter-}} else {state.intent = intent}
state.score = score},…
}@sarah_edo

In Base.vue (Components)
createShapes() {this.bufferCamera.position.z = this.shapeZoom
if (this.torusKnot !== null) {this.torusKnot.material.dispose()
this.torusKnot.geometry.dispose()
this.bufferScene.remove(this.torusKnot)}var shape = new THREE.TorusKnotGeometry(
this.tConfig.a,this.tConfig.b,this.tConfig.c,this.tConfig.d),material…
this.torusKnot = new THREE.Mesh(shape, material)this.torusKnot.material.needsUpdate = true
this.bufferScene.add(this.torusKnot)},@sarah_edo

In Base.vue (Components)

animate() {this.storeRAF = requestAnimationFrame(this.animate)this.bufferScene.rotation.x += 0.01
this.bufferScene.rotation.y += 0.02
this.renderer.render(this.bufferScene,this.bufferCamera,this.bufferTexture)this.renderer.render(this.scene, this.camera)},@sarah_edo

In Base.vue (Components)

watch: {shapeZoom() {this.createShapes()
cancelAnimationFrame(this.storeRAF)
this.animate()}},

Repo: github.com/sdras/three-vue-pattern@sarah_edo

@sarah_edo

ML IN MEDICINE• Sophia Genetics is training algorithms to diagnosediseases through DNA analysis• All4Cure is a social network for cancer patients wherepatients can enter diagnosis and treatment so that it
can be analyzed• HealthMap algorithm spotted an ebola outbreak 9 days

before the World Health Organization

SOURCES: SILICON ANGLE, GEEKWIRE, AND NEWSWEEKW H AT C A N Y O U D O ?

✨A P P L I C AT I O N S F O R G O O D✨C U R R E N T A P P L I C AT I O N

BUT…

W H AT H A P P E N S W H E N
THEY’RE OFFLINE?

backgroundSync && Service Workers• Alert them when they are offline• When they’re offline, queue the messages• When it’s back up, send them out(even if the browser tab is closed)@sarah_edo

@sarah_edo

Alert them when they’re offline

window.addEventListener('online', vm.isOnline);
window.addEventListener('offline', vm.isOnline);
isOnline() {if (navigator.onLine) {this.status = `Online. Clear to send.`
this.offline = false}
else {
this.status = `Offline. But don't worry, your requests
will still be processed soon as you areconnected.`
this.offline = true}},@sarah_edo

Register the service worker when a request is maderequestButton(type) {if ('serviceWorker' in navigator) {navigator.serviceWorker.register('./service-worker.js').then((registration) => {return navigator.serviceWorker.ready;}).then((registration) => {registration.sync.register(`request-${type}`).then(() => {console.log('%c sync registered', 'font-size: 16px; …’);}).catch(function (error) {console.log('Unable to fetch resources.');});...
}@sarah_edo

Create the sync event

self.addEventListener('sync', event => {let type = event.tag.split('-')[1]
console.log(`%c sync event fired: request ${type}`,`${styles} background: #00449e; color: #cdecff;`)
event.waitUntil(fetchResource(type))})@sarah_edo

Fetch the URL, and postMessage back to the client

const fetchResource = resource => {fetch('//jsonplaceholder.typicode.com/users').then(response => {return response}).then(text => {const message = {response: text.status,resource: resource}
self.clients.matchAll().then(all => all.map(client => client.postMessage(message)))
})
...
}

@sarah_edo

Let them know when it’s successful

updateRequest(response, type) {if (response === 200) {this.responseSuccess = true
this.messageQueue.push(`You successfully sent a message: <span>${type}</span>`)}},@sarah_edo

M O S T I M P O R TA N T …

ASK QUESTIONSCityBuildingsYour house

THANK YOU!
@sarah_edo@sarah_edo