| 1 |
- {"version":3,"sources":["images/demo/background.jpg","pages/WebDemoPage.tsx","images/authors/soumyadip.jpg","pages/ProjectPage.tsx","images/authors/peter.jpg","images/authors/linjie.jpg","images/authors/imran.jpg","App.tsx","index.tsx"],"names":["drawMatte","fgr","pha","canvas","a","rgba","tf","rgb","squeeze","mul","cast","shape","dispose","slice","height","width","Uint8ClampedArray","data","pixelData","imageData","ImageData","getContext","putImageData","drawHidden","r","unstack","split","expandDims","add","tile","WebDemoPage","canvasRef","useRef","selectRef","refreshRef","animationRef","stateRef","webCam","stream","useState","current","state","setState","useEffect","navigator","mediaDevices","getUserMedia","video","then","document","createElement","srcObject","webcam","getTracks","forEach","track","stop","useWebCam","path","progress","setProgress","model","setModel","onProgress","useModel","process","r1i","r2i","r3i","r4i","downsample_ratio","loop","capture","img","src","div","executeAsync","out","r1o","r2o","r3o","r4o","value","clone","style","background","bg","requestAnimationFrame","cancelAnimationFrame","helmet","Helmet","name","content","header","Box","pt","pb","textAlign","Typography","variant","gutterBottom","px","py","maxWidth","margin","align","color","LinearProgress","TextField","defaultValue","inputRef","label","select","MenuItem","Button","onClick","marginLeft","display","paragraph","ref","autoPlay","useStyles","makeStyles","theme","items","padding","spacing","marginTop","borderRadius","breakpoints","down","video1Column","video2Column","video3Column","citation","whiteSpace","ProjectPage","classes","className","Chip","component","href","target","clickable","avatar","Avatar","soumyadip","startIcon","Description","GitHub","Camera","Link","to","p","mb","m","classNames","title","frameBorder","allow","allowFullScreen","appBar","borderBottom","toolbar","minHeight","flexGrow","tab","textTransform","App","location","useLocation","history","useHistory","routes","window","scrollTo","pathname","CssBaseline","AppBar","elevation","position","Toolbar","Tabs","onChange","e","v","replace","map","Tab","exact","ReactDOM","render","StrictMode","getElementById"],"mappings":"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","file":"static/js/main.81634d48.chunk.js","sourcesContent":["export default __webpack_public_path__ + \"static/media/background.2ea9b018.jpg\";","import { FC, useEffect, useRef, useState } from 'react';\nimport * as tf from '@tensorflow/tfjs';\nimport { Box, Button, LinearProgress, MenuItem, TextField, Typography } from '@material-ui/core';\nimport { Helmet } from 'react-helmet';\n\nimport background from '../images/demo/background.jpg';\n\n\nasync function drawMatte(fgr: any, pha: any, canvas: HTMLCanvasElement){\n const rgba = tf.tidy(() => {\n const rgb = (fgr != null) ?\n fgr.squeeze(0).mul(255).cast('int32') :\n tf.fill([pha.shape[1], pha.shape[2], 3], 255, 'int32');\n const a = (pha != null) ?\n pha.squeeze(0).mul(255).cast('int32') :\n tf.fill([fgr.shape[1], fgr.shape[2], 1], 255, 'int32');\n return tf.concat([rgb, a], -1);\n });\n fgr && fgr.dispose();\n pha && pha.dispose();\n const [height, width] = rgba.shape.slice(0, 2);\n const pixelData = new Uint8ClampedArray(await rgba.data());\n const imageData = new ImageData(pixelData, width, height);\n canvas.width = width;\n canvas.height = height;\n canvas.getContext('2d')!.putImageData(imageData, 0, 0);\n rgba.dispose();\n}\n\nasync function drawHidden(r: any, canvas: HTMLCanvasElement) {\n const rgba = tf.tidy(() => {\n r = r.unstack(-1)\n r = tf.concat(r, 1)\n r = r.split(4, 1)\n r = tf.concat(r, 2)\n r = r.squeeze(0)\n r = r.expandDims(-1)\n r = r.add(1).mul(127.5).cast('int32')\n r = r.tile([1, 1, 3])\n r = tf.concat([r, tf.fill([r.shape[0], r.shape[1], 1], 255, 'int32')], -1)\n return r;\n });\n const [height, width] = rgba.shape.slice(0, 2);\n const pixelData = new Uint8ClampedArray(await rgba.data());\n const imageData = new ImageData(pixelData, width, height);\n canvas.width = width;\n canvas.height = height;\n canvas.getContext('2d')!.putImageData(imageData, 0, 0);\n rgba.dispose();\n}\n\n\n// Custom Hooks\n\nconst useWebCam = (width: number, height: number) => {\n const stateRef = useRef<any>({webCam: null, stream: null});\n const [state, setState] = useState<any>(stateRef.current);\n useEffect(() => {\n navigator.mediaDevices.getUserMedia({video: {width, height}})\n .then(stream => {\n const video = document.createElement('video');\n video.srcObject = stream;\n tf.data.webcam(video).then(webCam => {\n stateRef.current = {webCam, stream};\n setState(stateRef.current);\n });\n });\n return () => {\n if (stateRef.current.stream) {\n stateRef.current.stream.getTracks().forEach((track: any) => {\n track.stop();\n });\n stateRef.current.webCam.stop();\n stateRef.current = {webCam: null, stream: null};\n setState(stateRef.current);\n }\n }\n }, [width, height]);\n return state;\n}\n\nconst useModel = (path: string) => {\n const [progress, setProgress] = useState(0);\n const [model, setModel] = useState<tf.GraphModel>();\n useEffect(() => {\n tf.loadGraphModel(path, {onProgress: setProgress}).then(setModel);\n }, [path]);\n return {model, progress};\n}\n\n\nconst WebDemoPage: FC = () => {\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const selectRef = useRef<HTMLInputElement>(null);\n const refreshRef = useRef(false);\n const animationRef = useRef(-1);\n\n const {webCam, stream} = useWebCam(640, 480);\n const {model, progress} = useModel(`${process.env.PUBLIC_URL}/model/model.json`);\n\n useEffect(() => {\n \n let [r1i, r2i, r3i, r4i] = [tf.tensor(0.), tf.tensor(0.), tf.tensor(0.), tf.tensor(0.)];\n const downsample_ratio = tf.tensor(0.5);\n\n async function loop() {\n if (model && webCam && canvasRef.current && selectRef.current) {\n if (refreshRef.current) {\n tf.dispose([r1i, r2i, r3i, r4i]);\n [r1i, r2i, r3i, r4i] = [tf.tensor(0.), tf.tensor(0.), tf.tensor(0.), tf.tensor(0.)];\n refreshRef.current = false;\n }\n\n const img = await webCam.capture()\n const src = tf.tidy(() => img.expandDims(0).div(255));\n const out = await model!.executeAsync(\n {src, r1i, r2i, r3i, r4i, downsample_ratio},\n ['fgr', 'pha', 'r1o', 'r2o', 'r3o', 'r4o']);\n const [fgr, pha, r1o, r2o, r3o, r4o] = out as tf.Tensor[];\n\n if (selectRef.current.value === 'white') {\n drawMatte(fgr.clone(), pha.clone(), canvasRef.current);\n canvasRef.current.style.background = 'none';\n } else if (selectRef.current.value === 'green') {\n drawMatte(fgr.clone(), pha.clone(), canvasRef.current);\n canvasRef.current.style.background = 'rgb(120, 255, 155)';\n } else if (selectRef.current.value === 'image') {\n drawMatte(fgr.clone(), pha.clone(), canvasRef.current);\n const bg = `url(\"${background}\") center center / cover`;\n // A hack around for a browser bug. We need to set the background to none for one frame\n // then set the background to the image.\n if (canvasRef.current.style.background === bg) {\n // Do nothing\n } else if (canvasRef.current.style.background === 'none') {\n canvasRef.current.style.background = bg;\n } else {\n canvasRef.current.style.background = 'none'\n }\n } else if (selectRef.current.value === 'alpha') {\n drawMatte(null, pha.clone(), canvasRef.current);\n canvasRef.current.style.background = '#000';\n } else if (selectRef.current.value === 'foreground') {\n drawMatte(fgr.clone(), null, canvasRef.current);\n } else if (selectRef.current.value === 'recurrent1') {\n drawHidden(r1o, canvasRef.current);\n } else if (selectRef.current.value === 'recurrent2') {\n drawHidden(r2o, canvasRef.current);\n } else if (selectRef.current.value === 'recurrent3') {\n drawHidden(r3o, canvasRef.current);\n } else if (selectRef.current.value === 'recurrent4') {\n drawHidden(r4o, canvasRef.current);\n }\n\n tf.dispose([img, src, fgr, pha, r1i, r2i, r3i, r4i]);\n [r1i, r2i, r3i, r4i] = [r1o, r2o, r3o, r4o];\n }\n animationRef.current = requestAnimationFrame(loop);\n }\n\n animationRef.current = requestAnimationFrame(loop);\n\n return () => {\n cancelAnimationFrame(animationRef.current);\n tf.dispose([r1i, r2i, r3i, r4i, downsample_ratio]);\n }\n }, [model, webCam]);\n\n const helmet = () => (\n <Helmet>\n <title>RVM: Web Demo</title>\n <meta name=\"description\" content=\"Run our model on the web browser.\" />\n </Helmet>\n );\n\n const header = () => (\n <Box pt={4} pb={3} textAlign=\"center\">\n <Typography variant=\"h4\" gutterBottom>Robust Video Matting Web Demo</Typography>\n <Typography gutterBottom><strong>Please use Chromium-based browsers!</strong></Typography>\n </Box>\n )\n\n if (!webCam) {\n return (\n <Box width={1} px={2} py={4} textAlign=\"center\">\n {helmet()}\n {header()}\n <Box py={4}>\n <Typography color=\"textSecondary\">Initializing webcam. Please enable webcam access.</Typography>\n </Box>\n </Box>\n );\n }\n\n if (progress < 1) {\n return (\n <Box px={2} py={4} textAlign=\"center\">\n {helmet()}\n {header()}\n <Box py={4} maxWidth={512} margin=\"0 auto\">\n <Typography align=\"center\" color=\"textSecondary\" gutterBottom>Downloading the model (4MB)</Typography>\n <LinearProgress variant=\"determinate\" value={progress * 100}/>\n </Box>\n </Box>\n );\n }\n\n return (\n <Box px={2} py={4} maxWidth={1280} margin=\"0 auto\">\n {helmet()}\n {header()}\n <Box pb={3} textAlign=\"center\">\n <Typography>This demo runs our model in your browser. You can switch to inspect the model's recurrent states.</Typography>\n <Typography>As the human subject moves, our model learns to reconstruct the background in its recurrent states.</Typography>\n <Typography>Even when the camera is moving, the model learns to refresh its memory.</Typography>\n </Box>\n <Box py={2} textAlign=\"center\">\n <TextField defaultValue=\"white\" inputRef={selectRef} label=\"View\" variant=\"outlined\" select>\n <MenuItem value=\"white\">White Background</MenuItem>\n <MenuItem value=\"green\">Green Background</MenuItem>\n <MenuItem value=\"image\">Image Background</MenuItem>\n <MenuItem value=\"alpha\">Alpha</MenuItem>\n <MenuItem value=\"foreground\">Foreground</MenuItem>\n <MenuItem value=\"recurrent1\">Recurrent State 1</MenuItem>\n <MenuItem value=\"recurrent2\">Recurrent State 2</MenuItem>\n <MenuItem value=\"recurrent3\">Recurrent State 3</MenuItem>\n <MenuItem value=\"recurrent4\">Recurrent State 4</MenuItem>\n </TextField>\n <Button variant=\"outlined\" onClick={() => refreshRef.current = true} style={{height: 56, marginLeft: 8}}>\n Refresh Recurrent States\n </Button>\n </Box>\n <Box display=\"flex\">\n <Box width=\"100%\" maxWidth=\"50%\" textAlign=\"center\">\n <Typography variant=\"caption\" color=\"textSecondary\" align=\"center\" paragraph>Input</Typography>\n <video ref={video => { video && (video.srcObject = stream) }} autoPlay style={{maxWidth: \"100%\"}} />\n </Box>\n <Box width=\"100%\" maxWidth=\"50%\" textAlign=\"center\">\n <Typography variant=\"caption\" color=\"textSecondary\" align=\"center\" paragraph>Output</Typography>\n <canvas ref={canvasRef} style={{maxWidth: \"100%\"}}/>\n </Box>\n </Box>\n <Box py={5}>\n <Typography align=\"center\" variant=\"body2\" color=\"textSecondary\">The model is running on TensorFlow.js using WebGL.</Typography>\n <Typography align=\"center\" variant=\"body2\" color=\"textSecondary\">The web demo has lowered the quality to trade off for speed. Our official PyTorch model is better and faster.</Typography>\n <Typography align=\"center\" variant=\"body2\" color=\"textSecondary\">If your laptop has two GPUs, consider forcing to use the dedicated GPU in system setting for faster performance.</Typography>\n </Box>\n </Box>\n );\n};\n\nexport default WebDemoPage;","export default __webpack_public_path__ + \"static/media/soumyadip.19a06322.jpg\";","import { Avatar, Box, Button, Chip, makeStyles, Typography } from '@material-ui/core';\nimport { Description, GitHub, Camera } from '@material-ui/icons';\nimport { FC } from 'react';\nimport { Link } from 'react-router-dom';\nimport { Helmet } from 'react-helmet';\nimport classNames from 'classnames';\n\nimport peter from '../images/authors/peter.jpg';\nimport linjie from '../images/authors/linjie.jpg';\nimport imran from '../images/authors/imran.jpg';\nimport soumyadip from '../images/authors/soumyadip.jpg';\n\n\nconst useStyles = makeStyles((theme) => ({\n items: {\n textAlign: 'center',\n padding: theme.spacing(3, 0),\n '& > *': {\n margin: theme.spacing(0.5)\n }\n },\n content: {\n '& > h6': {\n marginTop: theme.spacing(6)\n }\n },\n video: {\n borderRadius: theme.shape.borderRadius,\n [theme.breakpoints.down('xs')]: {\n height: '250px !important'\n }\n },\n video1Column: {\n height: 450\n },\n video2Column: {\n height: 200\n },\n video3Column: {\n height: 135\n },\n citation: {\n whiteSpace: 'pre-wrap'\n }\n}));\n\nconst ProjectPage: FC = () => {\n const classes = useStyles();\n\n return (\n <>\n <Helmet>\n <title>RVM: Robust High-Resolution Video Matting with Temporal Guidance</title>\n <meta name=\"description\" content=\"Official site for paper Robust High-Resolution Video Matting with Temporal Guidance\" />\n </Helmet>\n <Box px={2} pt={8} pb={4}>\n <Typography variant=\"h4\" align=\"center\" gutterBottom>Robust High-Resolution Video Matting with Temporal Guidance</Typography>\n <Typography variant=\"h6\" align=\"center\" gutterBottom>Human Matting on Any Videos | Real-time <strong>4K 70FPS+</strong> and <strong>HD 100FPS+</strong></Typography>\n <Typography color=\"textSecondary\" align=\"center\">ByteDance Inc. | University of Washington</Typography>\n \n <div className={classes.items}>\n <Chip\n component=\"a\"\n href=\"https://www.linkedin.com/in/shanchuanlin\"\n target=\"_blank\"\n clickable\n avatar={<Avatar src={peter}/>}\n label=\"Shanchuan Lin\" />\n <Chip\n component=\"a\"\n href=\"https://sites.google.com/site/linjieyang89/\"\n target=\"_blank\"\n clickable\n avatar={<Avatar src={linjie}/>}\n label=\"Linjie Yang\" />\n <Chip\n component=\"a\"\n href=\"https://www.linkedin.com/in/imran-saleemi/\"\n target=\"_blank\"\n clickable\n avatar={<Avatar src={imran}/>}\n label=\"Imran Saleemi\" />\n <Chip\n component=\"a\"\n href=\"https://homes.cs.washington.edu/~soumya91/\"\n target=\"_blank\"\n clickable\n avatar={<Avatar src={soumyadip}/>}\n label=\"Soumyadip Sengupta\" />\n </div>\n\n <div className={classes.items}>\n <Button color=\"primary\" startIcon={<Description/>} component=\"a\" href=\"http://arxiv.org/abs/2108.11515\" target=\"_blank\">Paper</Button>\n <Button color=\"primary\" startIcon={<GitHub/>} component=\"a\" href=\"https://github.com/PeterL1n/RobustVideoMatting\" target=\"_blank\">Code</Button>\n <Button color=\"primary\" startIcon={<Camera/>} component={Link} to=\"/demo\">Demo</Button>\n </div>\n </Box>\n\n <Box p={2} mb={4} maxWidth={800} m=\"0 auto\" className={classes.content}>\n <iframe\n className={classNames(classes.video, classes.video1Column)}\n src=\"https://www.youtube.com/embed/Jvzltozpbpk?rel=0&modestbranding=1&autohide=1&showinfo=0&enablejsapi=1\"\n title=\"YouTube video player\"\n frameBorder={0}\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n allowFullScreen\n width=\"100%\" />\n <Typography variant=\"caption\" align=\"center\" component=\"div\">Open in <a href=\"https://youtu.be/Jvzltozpbpk\" target=\"_blank\">YouTube</a> or <a href=\"https://www.bilibili.com/video/BV1Z3411B7g7/\" target=\"_blank\">Bilibili</a>.</Typography>\n\n <Typography variant=\"h6\" gutterBottom>Abstract</Typography>\n <Typography paragraph>\n We introduce a robust, real-time, high-resolution human video matting method that achieves new state-of-the-art performance. Our method is much lighter than previous approaches and can process 4K at 76 FPS and HD at 104 FPS on an Nvidia GTX 1080Ti GPU. Unlike most existing methods that perform video matting frame-by-frame as independent images, our method uses a recurrent architecture to exploit temporal information in videos and achieves significant improvements in temporal coherence and matting quality. Furthermore, we propose a novel training strategy that enforces our network on both matting and segmentation objectives. This significantly improves our model's robustness. Our method does not require any auxiliary inputs such as a trimap or a pre-captured background image, so it can be widely applied to existing human matting applications.\n </Typography>\n\n <Typography variant=\"h6\" gutterBottom>Download</Typography>\n <Typography paragraph>\n Our model is available in <b>PyTorch</b>, <b>TorchScript</b>, <b>ONNX</b>, <b>TensorFlow</b>, and <b>TensorFlow.js</b>.\n </Typography>\n <Box textAlign=\"center\">\n <Button color=\"primary\" startIcon={<GitHub/>} component=\"a\" href=\"https://github.com/PeterL1n/RobustVideoMatting\" target=\"_blank\">Github</Button>\n </Box>\n\n <Typography variant=\"h6\" gutterBottom>Supplementary</Typography>\n <Typography gutterBottom>We show the recurrent states of our model in the following video. Our model learns to reconstruct the background and keep track of the motion history.</Typography>\n <iframe\n className={classNames(classes.video, classes.video1Column)}\n src=\"https://www.youtube.com/embed/Ay-mGCEYEzM?rel=0&modestbranding=1&autohide=1&showinfo=0&enablejsapi=1\"\n title=\"YouTube video player\"\n frameBorder={0}\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\"\n allowFullScreen\n width=\"100%\" />\n <Typography variant=\"caption\" align=\"center\" component=\"div\">Open in <a href=\"https://youtu.be/Ay-mGCEYEzM\" target=\"_blank\">YouTube</a> or <a href=\"https://www.bilibili.com/video/BV19Q4y1h7xK/\" target=\"_blank\">Bilibili</a>.</Typography>\n\n <Typography variant=\"h6\" gutterBottom>Citation</Typography>\n <code className={classes.citation}>\n {\n`@misc{rvm,\n title={Robust High-Resolution Video Matting with Temporal Guidance}, \n author={Shanchuan Lin and Linjie Yang and Imran Saleemi and Soumyadip Sengupta},\n year={2021},\n eprint={2108.11515},\n archivePrefix={arXiv},\n primaryClass={cs.CV}\n}`\n }\n </code>\n </Box>\n </>\n )\n};\n\nexport default ProjectPage;","export default \"data:image/jpeg;base64,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\"","export default \"data:image/jpeg;base64,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\"","export default \"data:image/jpeg;base64,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\"","import {FC, useEffect} from 'react';\nimport {AppBar, CssBaseline, makeStyles, Tab, Tabs, Toolbar, Typography} from '@material-ui/core';\nimport {Switch, Route, useLocation, useHistory, Redirect} from 'react-router-dom';\n\nimport WebDemoPage from './pages/WebDemoPage';\nimport ProjectPage from './pages/ProjectPage';\n\nconst useStyles = makeStyles(theme => ({\n appBar: {\n borderBottom: \"1px solid #ddd\"\n },\n toolbar: {\n minHeight: 0\n },\n title: {\n flexGrow: 1,\n },\n tab: {\n textTransform: 'none'\n }\n}));\n\nconst App: FC = () => {\n const classes = useStyles();\n const location = useLocation();\n const history = useHistory();\n\n const routes = [\n {\n path: '/',\n title: 'Project',\n component: ProjectPage\n },\n {\n path: '/demo',\n title: 'Web Demo',\n component: WebDemoPage\n }\n ]\n\n useEffect(() => {\n window.scrollTo(0, 0);\n }, [location.pathname]);\n\n return (\n <>\n <CssBaseline />\n <AppBar className={classes.appBar} elevation={0} color=\"default\" position=\"sticky\">\n <Toolbar className={classes.toolbar}>\n <Typography className={classes.title} variant=\"h6\">RVM</Typography>\n <Tabs value={location.pathname} onChange={(e, v) => history.replace(v)}>\n {routes.map(({path, title}) => <Tab className={classes.tab} key={path} label={title} value={path} />)}\n </Tabs>\n </Toolbar>\n </AppBar>\n <Switch>\n {routes.map(({path, component}) => <Route key={path} path={path} component={component} exact/>)}\n <Route>\n <Redirect to=\"/\"/>\n </Route>\n </Switch>\n </>\n );\n}\n\nexport default App;","import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { HashRouter as Router } from 'react-router-dom';\nimport App from './App';\n\nReactDOM.render(\n <React.StrictMode>\n <Router>\n <App />\n </Router>\n </React.StrictMode>,\n document.getElementById('root')\n);\n"],"sourceRoot":""}
|
