deck.mdx

import '@babel/polyfill';

export {default as theme} from './theme'; import {Head, Appear} from 'mdx-deck'; import ImagesAsFunctions from './slides/ImagesAsFunctions'; import Channels from './slides/Channels'; import MindMap from './slides/MindMap'; import {default as fullMindMap, shallow, ImageProcessing} from './mindMap.js'; import {P, A, LI} from 'components/basic';

<title>Computer vision basics on the Web</title>

Computer vision basics on the Web

by Paolo Bueno
{' '}

---

Why?

Explore newer Web APIs

Computer vision is a great intro to AI and ML

---

Web technology primer

Filters!

---

import CSSFilters from './slides/CSSFilters';

CSS filters

---

SVG filters

---

Computer vision

1. Image Processing
2. Feature Extraction
3. Recognition

---

Machine Learning

1. Pre-processing
2. Dimensionality Reduction
3. Classification/Clustering

---

---

What is an image?

---

Images are many channels

---

Images are arrays

import ImagesAsArrays from './slides/ImagesAsArrays';

---

Images are (continous) functions of space

---

Image Processing

---

<MindMap map={fullMindMap} width={1300} height={1000} highlight={'Image Processing'} />

---

<MindMap map={ImageProcessing} width={1200} height={800} minLabelSize={2} highlight={'Convolutions'} />

---

Convolutions

---

import Convolution from './slides/Convolution';

Convolutions

---

<MindMap map={ImageProcessing} width={1200} height={800} minLabelSize={2} highlight={'Thresholding'} />

---

import Grayscaling from 'slides/Grayscaling';

Thresholding

---

<MindMap map={ImageProcessing} width={1200} height={800} minLabelSize={2} highlight={'Morphology'} />

---

Morphology

Erosion ⊖

Dilation ⊕

Opening ⊕ ∘ ⊖

Closing ⊖ ∘ ⊕

---

Morphology

import Morphology from 'slides/Morphology';

<Morphology src="assets/segmentation1.png" style={{width: '60vw', height: '60vh'}} />

---

---

Feature Extraction

"Are these pixels showing a church?"

"Is something square with a pointy end, a church?"

---

Feature descriptors

<img style={{height: '60vh'}} src="assets/descriptor.jpg" />

---

Connected Components

<img style={{height: '60vh'}} src="assets/segmentation1.png" /> <img style={{height: '60vh'}} src="assets/segmentation2.png" />

---

Corner detection

<img style={{height: '70vh'}} src="assets/corner.png" />

---

Thank you!

http://paolobueno.com/im-presentation/

---

More Image Processing

• Image and video processing @ Coursera
• OpenCV
• MDN Canvas API
• SVG Filters Playground
• JuliaImages
• GNU Octave - MATLAB as in beer

---

More AI & ML

• Google ML crash courses
• Andrew Ng's ML course
• making of Not Hotdog
• Kaggle
• Tensorflow JS
• Webgazer JS

---

Segmentation example © Cyrille Rossant @ IPython Cookbook

Convolution animation © Paul-Louis Prove

Mercado De La Boqueria, Barcelona, Spain on unsplash

Template matching example © scikit-image team

This presentation © Paolo Bueno, CC BY 4.0