feat: add slides

This commit is contained in:
Renge 2024-04-24 22:01:13 -04:00
commit 50d5a5fa42
12 changed files with 8747 additions and 0 deletions

8
Presentation/.gitignore vendored Normal file
View File

@ -0,0 +1,8 @@
node_modules
.DS_Store
dist
*.local
.vite-inspect
.remote-assets
components.d.ts
*.pdf

3
Presentation/.npmrc Normal file
View File

@ -0,0 +1,3 @@
# for pnpm
shamefully-hoist=true
auto-install-peers=true

11
Presentation/README.md Normal file
View File

@ -0,0 +1,11 @@
# Welcome to [Slidev](https://github.com/slidevjs/slidev)!
To start the slide show:
- `npm install`
- `npm run dev`
- visit http://localhost:3030
Edit the [slides.md](./slides.md) to see the changes.
Learn more about Slidev on [documentations](https://sli.dev/).

16
Presentation/netlify.toml Normal file
View File

@ -0,0 +1,16 @@
[build]
publish = "dist"
command = "npm run build"
[build.environment]
NODE_VERSION = "20"
[[redirects]]
from = "/.well-known/*"
to = "/.well-known/:splat"
status = 200
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

8351
Presentation/package-lock.json generated Normal file

File diff suppressed because it is too large Load Diff

19
Presentation/package.json Normal file
View File

@ -0,0 +1,19 @@
{
"name": "slidev",
"type": "module",
"private": true,
"scripts": {
"build": "slidev build",
"dev": "slidev --open",
"export": "slidev export --with-clicks --with-toc --dark"
},
"dependencies": {
"@slidev/cli": "^0.49.0-beta.4",
"@slidev/theme-default": "latest",
"@slidev/theme-seriph": "latest",
"vue": "^3.4.22"
},
"devDependencies": {
"playwright-chromium": "^1.43.1"
}
}

246
Presentation/slides.md Normal file
View File

@ -0,0 +1,246 @@
---
# try also 'default' to start simple
theme: seriph
# random image from a curated Unsplash collection by Anthony
# like them? see https://unsplash.com/collections/94734566/slidev
background: https://cover.sli.dev
# some information about your slides, markdown enabled
title: Halide
# apply any unocss classes to the current slide
class: text-center
# https://sli.dev/custom/highlighters.html
highlighter: shiki
# https://sli.dev/guide/drawing
drawings:
persist: false
# slide transition: https://sli.dev/guide/animations#slide-transitions
transition: slide-left
# enable MDC Syntax: https://sli.dev/guide/syntax#mdc-syntax
mdc: true
---
# Halide
a language and compiler for optimizing parallelism, locality, and recomputation in image processing pipelines
Hongcheng Li
Xinyu Xu
<!--
The last comment block of each slide will be treated as slide notes. It will be visible and editable in Presenter Mode along with the slide. [Read more in the docs](https://sli.dev/guide/syntax.html#notes)
-->
---
layout: two-cols
layoutClass: gap-16
---
<Toc minDepth="1" maxDepth="2"></Toc>
---
transition: fade-out
---
# What is Halide?
Halide is a domain-specific language (DSL) and compiler
- Designed for image processing pipelines.
- Optimizes parallelism, locality, and recomputation.
- Enables high-level expression of algorithms.
- Automatically applies optimization techniques.
- Generates optimized code for CPUs, GPUs, and specialized units.
- Simplifies development of complex image processing applications.
---
transition: slide-up
mdc: true
---
# Cache
![https://www.computerhope.com/issues/pictures/cpu-cache-die.png](/static/cpu.png){width=500px lazy}
---
transition: slide-up
level: 2
mdc: true
---
# Memory Hierarchy
![https://www.cs.swarthmore.edu/~kwebb/cs31/f18/memhierarchy/figures/MemoryHierarchy.png](/static/MemoryHierarchy.jpg){width=500px lazy}
---
transition: slide-up
level: 2
mdc: true
---
# Moore's law
![https://image3.slideserve.com/6552767/moore-s-law-l.jpg](/static/moore-s-law-l.jpg){width=500px lazy}
---
transition: slide-up
level: 2
---
# Locality
- Temporal Locality
- Spatial Locality
---
transition: slide-left
level: 2
---
# Small Experiment
<<< @/snippets/blur.ts ts {all}{maxHeight:'250px'}
```ts {monaco-run}
// Paste your code here
//
//
```
---
transition: slide-up
---
# A simple blur algorithm
````md magic-move
```cpp {all|3|4|all} twoslash
UniformImage in(UInt(8), 2)
Var x, y
Func blurx(x,y) = in(x-1,y) + in(x,y) + in(x+1,y)
Func out(x,y) = blurx(x,y-1) + blurx(x,y) + blurx(x,y+1)
```
```cpp {all} twoslash
UniformImage in(UInt(8), 2)
Var x, y
Func blurx(x,y) = in(x-1,y) + in(x,y) + in(x+1,y)
Func out(x,y) = blurx(x,y-1) + blurx(x,y) + blurx(x,y+1)
// Generated code
alloc blurx[2048][3072]
for each x in 0..3072:
for each y in 0..2048:
blurx[y][x] = in[y][x-1] + in[y][x] + in[y][x+1]
alloc out[2046][3072]
for each x in 0..3072:
for each y in 1..2047:
out[y][x] = blurx[y-1][x] + blurx[y][x] + blurx[y+1][x]
```
```cpp {all|3-4,7-8} twoslash
// Breadth first: each function is entirely evaluated before the next one.
alloc blurx[2048][3072]
for each x in 0..3072:
for each y in 0..2048:
blurx[y][x] = in[y][x-1] + in[y][x] + in[y][x+1]
alloc out[2046][3072]
for each x in 0..3072:
for each y in 1..2047:
out[y][x] = blurx[y-1][x] + blurx[y][x] + blurx[y+1][x]
```
```cpp {all|2-4,6-8} twoslash
// Reorder
alloc blurx[2048][3072]
for each y in 0..2048:
for each x in 0..3072:
blurx[y][x] = in[y][x-1] + in[y][x] + in[y][x+1]
alloc out[2046][3072]
for each y in 1..2047:
for each x in 0..3072:
out[y][x] = blurx[y-1][x] + blurx[y][x] + blurx[y+1][x]
```
```cpp {all|5-7} twoslash
// Total fusion: values are computed on the fly each time that they are needed.
alloc out[2046][3072]
for each y in 1..2047:
for each x in 0..3072:
alloc blurx[-1..1]
for each i in -1..1:
blurx[i] = in[y-1+i][x-1]+in[y-1+i][x]+in[y-1+i][x+1]
out[y][x] = blurx[0] + blurx[1] + blurx[2]
```
```cpp {all|4-5} twoslash
// Sliding window: values are computed when needed then stored until not useful anymore.
alloc out[2046][3072]
alloc blurx[3][3072]
for each y in -1..2047:
for each x in 0..3072:
blurx[(y+1)%3][x] = in[y+1][x-1] + in[y+1][x] + in[y+1][x+1]
if y < 1: continue
out[y][x] = blurx[(y-1)%3][x] + blurx[ y % 3 ][x] + blurx[(y+1)%3][x]
```
```cpp {all} twoslash
// Tiles: overlapping regions are processed in parallel, functions are evaluated one after another.
alloc out[2046][3072]
for each ty in 0..2048/32:
for each tx in 0..3072/32:
alloc blurx[-1..33][32]
for y in -1..33:
for x in 0..32:
blurx[y][x] = in[ty*32+y][tx*32+x-1] + in[ty*32+y][tx*32+x] + in[ty*32+y][tx*32+x+1]
for y in 0..32:
for x in 0..32:
out[ty*32+y][tx*32+x] = blurx[y-1][x] + blurx[y ][x] + blurx[y+1][x]
```
```cpp {all} twoslash
// Sliding windows within tiles: tiles are evaluated in parallel using sliding windows.
alloc out[2046][3072]
for each ty in 0..2048/8:
alloc blurx[-1..1][3072]
for y in -2..8:
for x in 0..3072:
blurx[(y+1)%3][x] = in[ty*8+y+1][tx*32+x-1] + in[ty*8+y+1][tx*32+x] + in[ty*8+y+1][tx*32+x+1]
if y < 0: continue
for x in 0..3072:
out[ty*8+y][x] = blurx[(y-1)%3][x] + blurx[ y % 3][x] + blurx[(y+1)%3][x]
```
````
---
transition: fade-out
---
# Results
## x86
| Algorithm | Halide tuned(ms) | Expert tuned(ms) | Speedup | Lines Halide | Lines Expert | Factor Shorter |
| --------------- | ---------------- | ---------------- | ------- | ------------ | ------------ | -------------- |
| Blur | 11 | 13 | 1.2× | 2 | 35 | 18× |
| Bilateral grid | 36 | 158 | 4.4× | 34 | 122 | 4× |
| Camera pipe | 14 | 49 | 3.4× | 123 | 306 | 2× |
| Interpolate | 32 | 54 | 1.7× | 21 | 152 | 7× |
| Local Laplacian | 113 | 189 | 1.7× | 52 | 262 | 5× |
---
transition: slide-left
hideInToc: true
---
# Results
## CUDA
| Algorithm | Halide tuned(ms) | Expert tuned(ms) | Speedup | Lines Halide | Lines Expert | Factor Shorter |
| --------------- | ---------------- | ---------------- | ------- | ------------ | ------------ | -------------- |
| Bilateral grid | 8.1 | 18 | 2.3× | 34 | 370 | 11× |
| Interpolate | 9.1 | 54* | 5.9× | 21 | 152* | 7× |
| Local Laplacian | 21 | 189* | 9× | 52 | 262* | 5× |
---
transition: slide-left
---
# References
- [Halide: a language and compiler for optimizing parallelism, locality, and recomputation in image processing pipelines](https://dl.acm.org/doi/10.1145/2491956.2462176)
- [CPU die shot](https://www.computerhope.com/issues/pictures/cpu-cache-die.png)
- [Memory Hierarchy](https://www.cs.swarthmore.edu/~kwebb/cs31/f18/memhierarchy/figures/MemoryHierarchy.png)
- [Moore's Law](https://image3.slideserve.com/6552767/moore-s-law-l.jpg)

View File

@ -0,0 +1,86 @@
// Blur function
function blurImage1(inImage: Uint8Array): Uint8Array {
const numRows = Math.sqrt(inImage.length);
const numCols = numRows;
const blurx = new Uint8Array(numRows * numCols);
const blury = new Uint8Array(numRows * numCols);
// Blur in the x-direction
for (let x = 1; x < numCols - 1; x++) {
for (let y = 0; y < numRows; y++) {
const index = y * numCols + x;
blurx[index] = Math.floor((inImage[y * numCols + (x - 1)] + inImage[y * numCols + x] + inImage[y * numCols + (x + 1)]) / 3);
}
}
// Blur in the y-direction
for (let x = 0; x < numCols; x++) {
for (let y = 1; y < numRows - 1; y++) {
const index = y * numCols + x;
blury[index] = Math.floor((blurx[(y - 1) * numCols + x] + blurx[y * numCols + x] + blurx[(y + 1) * numCols + x]) / 3);
}
}
return blury;
}
function blurImage2(inImage: Uint8Array): Uint8Array {
const numRows = Math.sqrt(inImage.length);
const numCols = numRows;
const blurx = new Uint8Array(numRows * numCols);
const blury = new Uint8Array(numRows * numCols);
// Blur in the x-direction
for (let y = 0; y < numRows; y++) {
for (let x = 1; x < numCols - 1; x++) {
const index = y * numCols + x;
blurx[index] = Math.floor((inImage[y * numCols + (x - 1)] + inImage[y * numCols + x] + inImage[y * numCols + (x + 1)]) / 3);
}
}
// Blur in the y-direction
for (let y = 1; y < numRows - 1; y++) {
for (let x = 0; x < numCols; x++) {
const index = y * numCols + x;
blury[index] = Math.floor((blurx[(y - 1) * numCols + x] + blurx[y * numCols + x] + blurx[(y + 1) * numCols + x]) / 3);
}
}
return blury;
}
// Sample input
const numRows = 1024;
const numCols = 1024;
const inputImage = new Uint8Array(numRows * numCols);
// Initialize input image with random values (0-255)
for (let i = 0; i < numRows * numCols; i++) {
inputImage[i] = Math.floor(Math.random() * 256);
}
// Run the blurImage2 function 100 times and measure the runtime
const startTime2 = Date.now();
for (let i = 0; i < 100; i++) {
blurImage2(inputImage);
}
const endTime2 = Date.now();
// Run the blurImage1 function 100 times and measure the runtime
const startTime1 = Date.now();
for (let i = 0; i < 100; i++) {
blurImage1(inputImage);
}
const endTime1 = Date.now();
// Calculate total runtime
const totalTime1 = endTime1 - startTime1;
// Calculate total runtime
const totalTime2 = endTime2 - startTime2;
console.log(`Total runtime for first blur algorithm is: ${totalTime1} ms`);
console.log(`Total runtime for second blur algorithm is: ${totalTime2} ms`);

Binary file not shown.

After

Width:  |  Height:  |  Size: 113 KiB

BIN
Presentation/static/cpu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 203 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 95 KiB

7
Presentation/vercel.json Normal file
View File

@ -0,0 +1,7 @@
{
"rewrites": [
{ "source": "/(.*)", "destination": "/index.html" }
],
"buildCommand": "npm run build",
"outputDirectory": "dist"
}