├── .babelrc ├── .gitignore ├── README.md ├── SpaceSheets_Design_Experimentation_In_Latent-Space.pdf ├── docs ├── assets │ ├── css │ │ └── app.css │ ├── fonts │ │ ├── Rubik-Regular.ttf │ │ ├── SpaceMono-Bold.ttf │ │ └── SpaceMono-Regular.ttf │ ├── js │ │ └── app.bundle.js │ └── media │ │ ├── 1-workspace.mp4 │ │ ├── 2-attribute-vectors.mp4 │ │ ├── 3-interpolation.mp4 │ │ ├── 4-analogy.mp4 │ │ ├── 5-random-variables.mp4 │ │ ├── 6-slider-cells.mp4 │ │ ├── 7-mod-cells.mp4 │ │ ├── favicon.png │ │ ├── logo.png │ │ └── still.png └── index.html ├── package-lock.json ├── package.json ├── papers └── iccc19 │ ├── .gitignore │ ├── figs │ ├── 01-hero-diagram.png │ ├── 02A-use-cases.png │ ├── 02B-use-cases.png │ ├── 02C-use-cases.png │ ├── 03-cell-types.jpg │ ├── 04-interpolation-strip.jpg │ ├── 05-interpolation-by-slider.jpg │ ├── 06-interpolation-grid.jpg │ ├── 07-analogy.jpg │ ├── 08-extrapolation.jpg │ ├── 09-attribute-vectors.jpg │ ├── 10-averaging.jpg │ ├── 11-nearest-neighbours.jpg │ ├── BigGAN-01.png │ ├── BigGAN-02.png │ ├── BigGAN-03.png │ ├── decoupled.jpg │ ├── face_space.png │ └── smilevector.png │ ├── iccc.bib │ ├── iccc.bst │ ├── iccc.sty │ ├── make.sh │ ├── spacesheet.bib │ ├── spacesheet.tex │ └── spacesheet_final2.tex ├── spacesheets_nips2018_loh_white.pdf ├── src ├── app.js ├── assets │ ├── js │ │ ├── index.js │ │ └── player.js │ ├── media │ │ ├── favicon.png │ │ ├── logo.png │ │ └── videos │ │ │ ├── 1-workspace.mp4 │ │ │ ├── 2-attribute-vectors.mp4 │ │ │ ├── 3-interpolation.mp4 │ │ │ ├── 4-analogy.mp4 │ │ │ ├── 5-random-variables.mp4 │ │ │ ├── 6-slider-cells.mp4 │ │ │ ├── 7-mod-cells.mp4 │ │ │ └── posters │ │ │ └── still.png │ └── styles │ │ ├── font-faces.css │ │ ├── fonts │ │ ├── Rubik-Regular.ttf │ │ ├── SpaceMono-Bold.ttf │ │ ├── SpaceMono-BoldItalic.ttf │ │ ├── SpaceMono-Italic.ttf │ │ └── SpaceMono-Regular.ttf │ │ ├── normalize.css │ │ ├── skeleton.css │ │ ├── styles.scss │ │ ├── variables.scss │ │ └── video-player.scss └── index.html └── webpack.config.js /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["env"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ### Landing page for SpaceSheets: Interactive Latent Space Exploration through a Spreadsheet Interface 2 | 3 | Visit the hosted site here: 4 | https://vusd.github.io/spacesheet/ 5 | 6 | Access the source code for SpaceSheets here: 7 | https://github.com/bryanlohjy/spacesheet 8 | 9 | --- 10 | Papers: 11 | * [Original thesis submission](https://gitlab.com/bryanlohjy/spacesheets-mdi-eval) 12 | * [NeurIPS 2018: Machine Learning for Creativity and Design Workshop](https://github.com/vusd/spacesheet/raw/master/spacesheets_nips2018_loh_white.pdf) 13 | 14 | Model Demos: 15 | * [Faces](http://bryanlohjy.gitlab.io/spacesheet/index.html) 16 | * [Fonts](http://bryanlohjy.gitlab.io/spacesheet/fonts.html) 17 | * [MNIST Digits](http://bryanlohjy.gitlab.io/spacesheet/mnist.html) 18 | * [Colours](http://bryanlohjy.gitlab.io/spacesheet/colours.html) 19 | -------------------------------------------------------------------------------- /SpaceSheets_Design_Experimentation_In_Latent-Space.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/SpaceSheets_Design_Experimentation_In_Latent-Space.pdf -------------------------------------------------------------------------------- /docs/assets/css/app.css: -------------------------------------------------------------------------------- 1 | p{font-family:Rubik,sans-serif}button,h1,h2,h3,h4,h5,h6{font-family:Space Mono,monospace;font-weight:700}body,html{width:100%;height:100%;padding:0;margin:0;background:#f0f0f0}.section{color:#505050}.section h2{text-align:center;font-weight:700}.section.hero{margin-bottom:8rem;padding:8rem 0 10.4rem;background-color:#0a0a0a;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill='%23505050' fill-rule='evenodd'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/svg%3E")}.section.hero .logo{height:60px;margin-bottom:2.4rem}.section.hero .logo img{max-height:100%;max-width:100%}.section.hero h3{font-family:Rubik,sans-serif;color:#fff}.section.video{margin-bottom:8rem}@media (max-width:749px){.section.video .column,.section.video .columns{width:100%}}.section.video .video-player{box-shadow:0 5px 15px rgba(80,80,80,.4);margin:-15rem auto 0}.section.abstract{margin-bottom:8rem}.section.abstract p{margin-bottom:5.4rem}.section.abstract .row.buttons .columns{text-align:center}.section.abstract .row.buttons .columns button{font-family:Space Mono,monospace;font-weight:400;font-size:1.8rem;width:100%;margin-bottom:1.6rem;max-width:250px}@media (min-width:550px){.section.abstract .row.buttons .columns button{margin-bottom:0;min-width:220px}}.section.demo{background:#fff;padding:8rem 0}.section.demo p{text-align:center;margin-bottom:5.4rem}.section.demo .demo-tiles .columns:first-child{padding-right:0}@media (min-width:550px){.section.demo .demo-tiles .columns:first-child{padding-right:1.6rem}}.section.demo .demo-tiles .columns:last-child{padding-left:0}@media (min-width:550px){.section.demo .demo-tiles .columns:last-child{padding-left:1.6rem}}.section.demo .demo-tiles .columns .demo-tile{color:#505050;cursor:pointer;border:2px solid #505050;display:flex;align-items:center;justify-content:center;height:15rem;margin-bottom:1.6rem}.section.demo .demo-tiles .columns .demo-tile:hover{color:#0a0a0a;border:2px solid #0a0a0a}@media (min-width:550px){.section.demo .demo-tiles .columns .demo-tile{margin-bottom:3.2rem}.section.demo .demo-tiles .columns .demo-tile:last-child{margin-bottom:0}}.section.demo .demo-tiles .columns .demo-tile h4{margin:0}.section.contact{background:#0a0a0a;color:#fff;margin:0;padding:8rem 0;text-align:center}.section.contact .columns:first-child{margin-bottom:5.4rem}@media (min-width:550px){.section.contact .columns:first-child{margin-bottom:0}}.section.contact h4{font-family:Space Mono,sans-serif;font-weight:700;color:#fff}.section.contact p{margin:0}.full-width-container{position:relative;width:100%;max-width:100%;margin:0 auto;box-sizing:border-box}.container{padding-left:8rem;padding-right:8rem}button{cursor:pointer;border:none;padding:.8rem 2.4rem}button.btn-primary{background:#505050;color:#fff;border:2px solid #505050}button.btn-primary:hover{background:#0a0a0a;border:2px solid #0a0a0a}button.btn-secondary{background:transparent;color:#505050;border:2px solid #505050}button.btn-secondary:hover{color:#0a0a0a;border:2px solid #0a0a0a}.video-player{width:100%;display:flex;flex-wrap:wrap}@media (min-width:1000px){.video-player{width:60%;min-width:1000px;max-width:1200px;width:80vw;height:45vw;max-height:500px}}.video-player .columns{position:relative}.video-player .columns.nine{align-items:center}.video-player .columns.nine .video-js{height:100%;width:100%;min-height:400px}@media (min-width:750px){.video-player .columns.nine .video-js{min-height:0}}.video-player .columns.playlist-container{overflow:auto;display:flex}@media (max-width:749px){.video-player .columns.playlist-container{max-height:200px}}.video-player .columns.playlist-container .vjs-playlist{border-left:1px solid #787878;box-sizing:border-box;width:100%;background:#444954}.video-player .columns.playlist-container .vjs-playlist .vjs-playlist-item-list .vjs-playlist-item{height:auto;color:#fff;margin:0;border-bottom:1px solid #787878}.video-player .columns.playlist-container .vjs-playlist .vjs-playlist-item-list .vjs-playlist-item.vjs-selected .vjs-playlist-thumbnail-placeholder .vjs-playlist-title-container{background:#2b333f;box-shadow:inset 0 0 10px 0 #0a0a0a;color:#fff}.video-player .columns.playlist-container .vjs-playlist .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-thumbnail-placeholder{display:flex;border-radius:2px;height:70px;background:#fff;max-height:100px}.video-player .columns.playlist-container .vjs-playlist .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-thumbnail-placeholder .vjs-playlist-title-container{border:none;background:rgba(43,51,63,.9);text-shadow:none;height:100%;position:relative;display:flex;align-items:center;padding-left:1.6rem}.video-player .columns.playlist-container .vjs-playlist .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-thumbnail-placeholder .vjs-playlist-now-playing-text,.video-player .columns.playlist-container .vjs-playlist .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-thumbnail-placeholder .vjs-playlist-title-container .vjs-up-next-text{display:none}.video-player .columns.playlist-container .vjs-playlist .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-thumbnail-placeholder .vjs-playlist-name{bottom:3px;display:flex;align-items:flex-end}.video-player .columns.playlist-container .vjs-playlist .vjs-playlist-item-list .vjs-playlist-item .vjs-playlist-thumbnail-placeholder picture img{height:100%;max-width:200px;opacity:.5} 2 | /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9hc3NldHMvc3R5bGVzL3NyYy9hc3NldHMvc3R5bGVzL3N0eWxlcy5zY3NzIiwid2VicGFjazovLy8uL2Fzc2V0cy9zdHlsZXMvc3JjL2Fzc2V0cy9zdHlsZXMvdmFyaWFibGVzLnNjc3MiLCJ3ZWJwYWNrOi8vLy4vYXNzZXRzL3N0eWxlcy9zcmMvYXNzZXRzL3N0eWxlcy92aWRlby1wbGF5ZXIuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFFQSxFQUVFLDRCQUFnQyxDQUNqQyx5QkFJQyxpQ0FDQSxlQUFpQixDQUNsQixVQUlDLFdBQ0EsWUFDQSxVQUNBLFNBQ0Esa0JDaEI0QixDRGlCN0IsU0FJQyxhQ3ZCd0IsQ0RxQjFCLFlBS0ksa0JBQ0EsZUFBaUIsQ0FOckIsY0FXSSxtQkFDQSx1QkFFQSx5QkFDQSxtcURBQXNyRCxDQWYxckQsb0JBbUJNLFlBQ0Esb0JDakNnQixDRGF0Qix3QkF1QlEsZ0JBQ0EsY0FBZSxDQXhCdkIsaUJBNkJNLDZCQUNBLFVDL0NPLENEaUJiLGVBb0NJLGtCQ25Eb0IsQ0RvRHBCLHlCQXJDSiwrQ0F5Q1EsVUFBVyxDQUNaLENBMUNQLDZCQThDTSx3Q0FDQSxvQkFBMEIsQ0EvQ2hDLGtCQXFESSxrQkNwRW9CLENEZXhCLG9CQXdETSxvQkN0RWUsQ0RjckIsd0NBNEZRLGlCQUFrQixDQTVGMUIsK0NBK0ZVLGlDQUNBLGdCQUNBLGlCQUNBLFdBQ0EscUJBQ0EsZUFBZ0IsQ0FFaEIseUJBdEdWLCtDQXdHWSxnQkFDQSxlQUFnQixDQUVuQixDQTNHVCxjQWtISSxnQkFDQSxjQUE2QixDQW5IakMsZ0JBdUhNLGtCQUNBLG9CQ3RJZSxDRGNyQiwrQ0FpSVUsZUFBZ0IsQ0FDaEIseUJBbElWLCtDQW9JWSxvQkNoSlMsQ0RrSlosQ0F0SVQsOENBMElVLGNBQWUsQ0FDZix5QkEzSVYsOENBNklZLG1CQ3pKUyxDRDJKWixDQS9JVCw4Q0F5SlUsY0FDQSxlQUNBLHlCQUNBLGFBQ0EsbUJBQ0EsdUJBQ0EsYUFDQSxvQkM1S1csQ0RZckIsb0RBcUpZLGNBQ0Esd0JDNUtnQixDRDZLakIseUJBdkpYLDhDQXVLWSxvQkFBZ0MsQ0F2SzVDLHlEQXFLYyxlQUFnQixDQUNqQixDQXRLYixpREE0S1ksUUFBUyxDQTVLckIsaUJBb0xJLG1CQUNBLFdBQ0EsU0FDQSxlQUNBLGlCQUFrQixDQXhMdEIsc0NBK0xNLG9CQzdNZSxDRDBNZix5QkE1TE4sc0NBNkxRLGVBQWdCLENBR25CLENBaE1MLG9CQXFNTSxrQ0FDQSxnQkFDQSxVQ3hOTyxDRGlCYixtQkE0TU0sUUFBUyxDQUNWLHNCQU1ILGtCQUNBLFdBQ0EsZUFDQSxjQUNBLHFCQUFzQixDQUN2QixXQUlDLGtCQUNBLGtCQzVPc0IsQ0Q2T3ZCLE9BSUMsZUFDQSxZQUNBLG9CQ2pQb0IsQ0Q2T3RCLG1CQU9JLG1CQUNBLFdBQ0Esd0JDOVBzQixDRHFQMUIseUJBWU0sbUJBQ0Esd0JDblFzQixDRHNQNUIscUJBa0JJLHVCQUNBLGNBQ0Esd0JDelFzQixDRHFQMUIsMkJBdUJNLGNBQ0Esd0JDOVFzQixDQ0U1QixjQVVFLFdBQ0EsYUFDQSxjQUFlLENBWGYsMEJBREYsY0FHSSxVQUNBLGlCQUNBLGlCQUNBLFdBQ0EsWUFDQSxnQkFBaUIsQ0FpR3BCLENBekdELHVCQWdCSSxpQkFBa0IsQ0FoQnRCLDRCQW1CTSxrQkFBbUIsQ0FuQnpCLHNDQXNCUSxZQUNBLFdBQ0EsZ0JBQWlCLENBQ2pCLHlCQXpCUixzQ0EyQlUsWUFBbUIsQ0FFdEIsQ0E3QlAsMENBcUNNLGNBQ0EsWUFBYSxDQUxiLHlCQWpDTiwwQ0FtQ1EsZ0JBQWlCLENBb0VwQixDQXZHTCx3REF5Q1EsOEJBQ0Esc0JBQ0EsV0FDQSxrQkFBbUIsQ0E1QzNCLG1HQXVEWSxZQUNBLFdBQ0EsU0FDQSwrQkQxRGEsQ0NBekIsa0xBbURjLG1CQUNBLG9DQUNBLFVEbERELENDSGIsdUlBNkRjLGFBQ0Esa0JBQ0EsWUFDQSxnQkFrQ0EsZ0JBQWlCLENBbEcvQixxS0FtRWdCLFlBQ0EsNkJBQ0EsaUJBQ0EsWUFDQSxrQkFDQSxhQUNBLG1CQUNBLG1CRGxFSyxDQ1JyQiw2VkFpRmdCLFlBQWEsQ0FqRjdCLDBKQXFGZ0IsV0FDQSxhQUNBLG9CQUFxQixDQXZGckMsbUpBNkZrQixZQUNBLGdCQUNBLFVBQVkiLCJmaWxlIjoiLi9hc3NldHMvY3NzL2FwcC5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0ICcuL3ZhcmlhYmxlcy5zY3NzJztcclxuXHJcbnBcclxue1xyXG4gIGZvbnQtZmFtaWx5OiAnUnViaWsnLCBzYW5zLXNlcmlmO1xyXG59XHJcblxyXG5oMSwgaDIsIGgzLCBoNCwgaDUsIGg2LCBidXR0b25cclxue1xyXG4gIGZvbnQtZmFtaWx5OiAnU3BhY2UgTW9ubycsIG1vbm9zcGFjZTtcclxuICBmb250LXdlaWdodDogYm9sZDtcclxufVxyXG5cclxuaHRtbCwgYm9keVxyXG57XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgaGVpZ2h0OiAxMDAlO1xyXG4gIHBhZGRpbmc6IDBweDtcclxuICBtYXJnaW46IDBweDtcclxuICBiYWNrZ3JvdW5kOiAkbGlnaHRncmV5O1xyXG59XHJcblxyXG4uc2VjdGlvblxyXG57XHJcbiAgY29sb3I6ICRkYXJrZ3JleTtcclxuICBoMlxyXG4gIHtcclxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcclxuICAgIGZvbnQtd2VpZ2h0OiBib2xkO1xyXG4gIH1cclxuXHJcbiAgJi5oZXJvXHJcbiAge1xyXG4gICAgbWFyZ2luLWJvdHRvbTogJHNwYWNpbmdFeHRyYUxhcmdlO1xyXG4gICAgcGFkZGluZzogJHNwYWNpbmdFeHRyYUxhcmdlIDAgKCRzcGFjaW5nRXh0cmFMYXJnZSArICRzcGFjaW5nTWVkaXVtKSAwO1xyXG5cclxuICAgIGJhY2tncm91bmQtY29sb3I6ICRkYXJrZXJncmV5O1xyXG4gICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKFwiZGF0YTppbWFnZS9zdmcreG1sLCUzQ3N2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAnIGhlaWdodD0nMTAwJyB2aWV3Qm94PScwIDAgMTAwIDEwMCclM0UlM0NnIGZpbGwtcnVsZT0nZXZlbm9kZCclM0UlM0NnIGZpbGw9JyUyMzUwNTA1MCcgZmlsbC1vcGFjaXR5PScxJyUzRSUzQ3BhdGggb3BhY2l0eT0nLjUnIGQ9J005NiA5NWg0djFoLTR2NGgtMXYtNGgtOXY0aC0xdi00aC05djRoLTF2LTRoLTl2NGgtMXYtNGgtOXY0aC0xdi00aC05djRoLTF2LTRoLTl2NGgtMXYtNGgtOXY0aC0xdi00aC05djRoLTF2LTRIMHYtMWgxNXYtOUgwdi0xaDE1di05SDB2LTFoMTV2LTlIMHYtMWgxNXYtOUgwdi0xaDE1di05SDB2LTFoMTV2LTlIMHYtMWgxNXYtOUgwdi0xaDE1di05SDB2LTFoMTVWMGgxdjE1aDlWMGgxdjE1aDlWMGgxdjE1aDlWMGgxdjE1aDlWMGgxdjE1aDlWMGgxdjE1aDlWMGgxdjE1aDlWMGgxdjE1aDlWMGgxdjE1aDR2MWgtNHY5aDR2MWgtNHY5aDR2MWgtNHY5aDR2MWgtNHY5aDR2MWgtNHY5aDR2MWgtNHY5aDR2MWgtNHY5aDR2MWgtNHY5em0tMSAwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tMTAgMHYtOWgtOXY5aDl6bS0xMCAwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tMTAgMHYtOWgtOXY5aDl6bS0xMCAwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tOS0xMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em0xMCAwaDl2LTloLTl2OXptMTAgMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em0xMCAwaDl2LTloLTl2OXptMTAgMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em05LTEwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tMTAgMHYtOWgtOXY5aDl6bS0xMCAwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tMTAgMHYtOWgtOXY5aDl6bS0xMCAwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tOS0xMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em0xMCAwaDl2LTloLTl2OXptMTAgMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em0xMCAwaDl2LTloLTl2OXptMTAgMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em05LTEwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tMTAgMHYtOWgtOXY5aDl6bS0xMCAwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tMTAgMHYtOWgtOXY5aDl6bS0xMCAwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tOS0xMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em0xMCAwaDl2LTloLTl2OXptMTAgMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em0xMCAwaDl2LTloLTl2OXptMTAgMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em05LTEwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tMTAgMHYtOWgtOXY5aDl6bS0xMCAwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tMTAgMHYtOWgtOXY5aDl6bS0xMCAwdi05aC05djloOXptLTEwIDB2LTloLTl2OWg5em0tOS0xMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em0xMCAwaDl2LTloLTl2OXptMTAgMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5em0xMCAwaDl2LTloLTl2OXptMTAgMGg5di05aC05djl6bTEwIDBoOXYtOWgtOXY5eicvJTNFJTNDcGF0aCBkPSdNNiA1VjBINXY1SDB2MWg1djk0aDFWNmg5NFY1SDZ6Jy8lM0UlM0MvZyUzRSUzQy9nJTNFJTNDL3N2ZyUzRVwiKTtcclxuXHJcbiAgICAubG9nb1xyXG4gICAge1xyXG4gICAgICBoZWlnaHQ6IDYwcHg7XHJcbiAgICAgIG1hcmdpbi1ib3R0b206ICRzcGFjaW5nTWVkaXVtO1xyXG4gICAgICBpbWdcclxuICAgICAge1xyXG4gICAgICAgIG1heC1oZWlnaHQ6IDEwMCU7XHJcbiAgICAgICAgbWF4LXdpZHRoOiAxMDAlO1xyXG4gICAgICB9XHJcbiAgICB9XHJcbiAgICBoM1xyXG4gICAge1xyXG4gICAgICBmb250LWZhbWlseTogJ1J1YmlrJywgc2Fucy1zZXJpZjtcclxuICAgICAgY29sb3I6ICR3aGl0ZTtcclxuICAgIH1cclxuICB9XHJcblxyXG4gICYudmlkZW9cclxuICB7XHJcbiAgICBtYXJnaW4tYm90dG9tOiAkc3BhY2luZ0V4dHJhTGFyZ2U7XHJcbiAgICBAbWVkaWEgKG1heC13aWR0aDogNzQ5cHgpXHJcbiAgICB7XHJcbiAgICAgIC5jb2x1bW4sIC5jb2x1bW5zXHJcbiAgICAgIHtcclxuICAgICAgICB3aWR0aDogMTAwJTtcclxuICAgICAgfVxyXG4gICAgfVxyXG4gICAgLnZpZGVvLXBsYXllclxyXG4gICAge1xyXG4gICAgICBib3gtc2hhZG93OiAwIDVweCAxNXB4IHJnYmEoODAsIDgwLCA4MCwgMC40KTtcclxuICAgICAgbWFyZ2luOiAtMTVyZW0gYXV0byAwIGF1dG87XHJcbiAgICB9XHJcbiAgfVxyXG5cclxuICAmLmFic3RyYWN0XHJcbiAge1xyXG4gICAgbWFyZ2luLWJvdHRvbTogJHNwYWNpbmdFeHRyYUxhcmdlO1xyXG4gICAgcFxyXG4gICAge1xyXG4gICAgICBtYXJnaW4tYm90dG9tOiAkc3BhY2luZ0xhcmdlO1xyXG4gICAgfVxyXG4gICAgLnJvdy5idXR0b25zXHJcbiAgICB7XHJcbiAgICAgIC5jb2x1bW5zXHJcbiAgICAgIHtcclxuICAgICAgICAvLyAmOmZpcnN0LWNoaWxkXHJcbiAgICAgICAgLy8ge1xyXG4gICAgICAgIC8vICAgYnV0dG9uXHJcbiAgICAgICAgLy8gICB7XHJcbiAgICAgICAgLy8gICAgIGZsb2F0OiBsZWZ0O1xyXG4gICAgICAgIC8vICAgfVxyXG4gICAgICAgIC8vIH1cclxuICAgICAgICAvLyAmOmxhc3QtY2hpbGRcclxuICAgICAgICAvLyB7XHJcbiAgICAgICAgLy8gICBidXR0b25cclxuICAgICAgICAvLyAgIHtcclxuICAgICAgICAvLyAgICAgZmxvYXQ6IHJpZ2h0O1xyXG4gICAgICAgIC8vICAgfVxyXG4gICAgICAgIC8vIH1cclxuICAgICAgICAvLyBidXR0b25cclxuICAgICAgICAvLyB7XHJcbiAgICAgICAgLy8gICBmb250LWZhbWlseTogJ1NwYWNlIE1vbm8nLCBtb25vc3BhY2U7XHJcbiAgICAgICAgLy8gICBmb250LXdlaWdodDogbm9ybWFsO1xyXG4gICAgICAgIC8vICAgZm9udC1zaXplOiAxLjhyZW07XHJcbiAgICAgICAgLy8gICB3aWR0aDogMTAwJTtcclxuICAgICAgICAvLyAgIGZsb2F0OiByaWdodDtcclxuICAgICAgICAvLyAgIG1hcmdpbi1ib3R0b206ICRzcGFjaW5nU21hbGw7XHJcbiAgICAgICAgLy9cclxuICAgICAgICAvLyAgIEBtZWRpYSAobWluLXdpZHRoOiA1NTBweClcclxuICAgICAgICAvLyAgIHtcclxuICAgICAgICAvLyAgICAgbWFyZ2luLWJvdHRvbTogMDtcclxuICAgICAgICAvLyAgICAgbWluLXdpZHRoOiAyMjBweDtcclxuICAgICAgICAvLyAgICAgd2lkdGg6IDkwJTtcclxuICAgICAgICAvLyAgIH1cclxuICAgICAgICAvLyB9XHJcbiAgICAgICAgdGV4dC1hbGlnbjogY2VudGVyO1xyXG4gICAgICAgIGJ1dHRvblxyXG4gICAgICAgIHtcclxuICAgICAgICAgIGZvbnQtZmFtaWx5OiAnU3BhY2UgTW9ubycsIG1vbm9zcGFjZTtcclxuICAgICAgICAgIGZvbnQtd2VpZ2h0OiBub3JtYWw7XHJcbiAgICAgICAgICBmb250LXNpemU6IDEuOHJlbTtcclxuICAgICAgICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgICAgICAgbWFyZ2luLWJvdHRvbTogJHNwYWNpbmdTbWFsbDtcclxuICAgICAgICAgIG1heC13aWR0aDogMjUwcHg7XHJcblxyXG4gICAgICAgICAgQG1lZGlhIChtaW4td2lkdGg6IDU1MHB4KVxyXG4gICAgICAgICAge1xyXG4gICAgICAgICAgICBtYXJnaW4tYm90dG9tOiAwO1xyXG4gICAgICAgICAgICBtaW4td2lkdGg6IDIyMHB4O1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH1cclxuXHJcbiAgJi5kZW1vXHJcbiAge1xyXG4gICAgYmFja2dyb3VuZDogJHdoaXRlO1xyXG4gICAgcGFkZGluZzogJHNwYWNpbmdFeHRyYUxhcmdlIDA7XHJcblxyXG4gICAgcFxyXG4gICAge1xyXG4gICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XHJcbiAgICAgIG1hcmdpbi1ib3R0b206ICRzcGFjaW5nTGFyZ2U7XHJcbiAgICB9XHJcblxyXG4gICAgLmRlbW8tdGlsZXNcclxuICAgIHtcclxuICAgICAgLmNvbHVtbnNcclxuICAgICAge1xyXG4gICAgICAgICY6Zmlyc3QtY2hpbGRcclxuICAgICAgICB7XHJcbiAgICAgICAgICBwYWRkaW5nLXJpZ2h0OiAwO1xyXG4gICAgICAgICAgQG1lZGlhIChtaW4td2lkdGg6IDU1MHB4KVxyXG4gICAgICAgICAge1xyXG4gICAgICAgICAgICBwYWRkaW5nLXJpZ2h0OiAkc3BhY2luZ1NtYWxsO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuXHJcbiAgICAgICAgJjpsYXN0LWNoaWxkXHJcbiAgICAgICAge1xyXG4gICAgICAgICAgcGFkZGluZy1sZWZ0OiAwO1xyXG4gICAgICAgICAgQG1lZGlhIChtaW4td2lkdGg6IDU1MHB4KVxyXG4gICAgICAgICAge1xyXG4gICAgICAgICAgICBwYWRkaW5nLWxlZnQ6ICRzcGFjaW5nU21hbGw7XHJcbiAgICAgICAgICB9XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICAuZGVtby10aWxlXHJcbiAgICAgICAge1xyXG4gICAgICAgICAgJjpob3ZlclxyXG4gICAgICAgICAge1xyXG4gICAgICAgICAgICBjb2xvcjogJGRhcmtlcmdyZXk7XHJcbiAgICAgICAgICAgIGJvcmRlcjogMnB4IHNvbGlkICRkYXJrZXJncmV5O1xyXG4gICAgICAgICAgfVxyXG5cclxuICAgICAgICAgIGNvbG9yOiAkZGFya2dyZXk7XHJcbiAgICAgICAgICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgICAgICAgICBib3JkZXI6IDJweCBzb2xpZCAkZGFya2dyZXk7XHJcbiAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xyXG4gICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcclxuICAgICAgICAgIGp1c3RpZnktY29udGVudDogY2VudGVyO1xyXG4gICAgICAgICAgaGVpZ2h0OiAxNXJlbTtcclxuICAgICAgICAgIG1hcmdpbi1ib3R0b206ICRzcGFjaW5nU21hbGw7XHJcblxyXG4gICAgICAgICAgQG1lZGlhIChtaW4td2lkdGg6IDU1MHB4KVxyXG4gICAgICAgICAge1xyXG4gICAgICAgICAgICAmOmxhc3QtY2hpbGQge1xyXG4gICAgICAgICAgICAgIG1hcmdpbi1ib3R0b206IDA7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgbWFyZ2luLWJvdHRvbTogJHNwYWNpbmdTbWFsbCAqIDI7XHJcbiAgICAgICAgICB9XHJcblxyXG4gICAgICAgICAgaDRcclxuICAgICAgICAgIHtcclxuICAgICAgICAgICAgbWFyZ2luOiAwO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG4gICAgfVxyXG4gIH1cclxuICAmLmNvbnRhY3RcclxuICB7XHJcbiAgICBiYWNrZ3JvdW5kOiAkZGFya2VyZ3JleTtcclxuICAgIGNvbG9yOiAkd2hpdGU7XHJcbiAgICBtYXJnaW46IDA7XHJcbiAgICBwYWRkaW5nOiAkc3BhY2luZ0V4dHJhTGFyZ2UgMDtcclxuICAgIHRleHQtYWxpZ246IGNlbnRlcjtcclxuXHJcbiAgICAuY29sdW1uczpmaXJzdC1jaGlsZFxyXG4gICAge1xyXG4gICAgICBAbWVkaWEgKG1pbi13aWR0aDogNTUwcHgpIHtcclxuICAgICAgICBtYXJnaW4tYm90dG9tOiAwO1xyXG4gICAgICB9XHJcbiAgICAgIG1hcmdpbi1ib3R0b206ICRzcGFjaW5nTGFyZ2U7XHJcbiAgICB9XHJcblxyXG4gICAgaDRcclxuICAgIHtcclxuICAgICAgLy8gZm9udC1mYW1pbHk6ICdSdWJpaycsIHNhbnMtc2VyaWY7XHJcbiAgICAgIGZvbnQtZmFtaWx5OiAnU3BhY2UgTW9ubycsIHNhbnMtc2VyaWY7XHJcbiAgICAgIGZvbnQtd2VpZ2h0OiBib2xkO1xyXG4gICAgICBjb2xvcjogJHdoaXRlO1xyXG4gICAgfVxyXG5cclxuICAgIHBcclxuICAgIHtcclxuICAgICAgbWFyZ2luOiAwO1xyXG4gICAgfVxyXG4gIH1cclxufVxyXG5cclxuLmZ1bGwtd2lkdGgtY29udGFpbmVyXHJcbntcclxuICBwb3NpdGlvbjogcmVsYXRpdmU7XHJcbiAgd2lkdGg6IDEwMCU7XHJcbiAgbWF4LXdpZHRoOiAxMDAlO1xyXG4gIG1hcmdpbjogMCBhdXRvO1xyXG4gIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbn1cclxuXHJcbi5jb250YWluZXJcclxue1xyXG4gIHBhZGRpbmctbGVmdDogJHNwYWNpbmdFeHRyYUxhcmdlO1xyXG4gIHBhZGRpbmctcmlnaHQ6ICRzcGFjaW5nRXh0cmFMYXJnZTtcclxufVxyXG5cclxuYnV0dG9uXHJcbntcclxuICBjdXJzb3I6IHBvaW50ZXI7XHJcbiAgYm9yZGVyOiBub25lO1xyXG4gIHBhZGRpbmc6ICRzcGFjaW5nRXh0cmFTbWFsbCAkc3BhY2luZ01lZGl1bTtcclxuICAmLmJ0bi1wcmltYXJ5XHJcbiAge1xyXG4gICAgYmFja2dyb3VuZDogJGRhcmtncmV5O1xyXG4gICAgY29sb3I6ICR3aGl0ZTtcclxuICAgIGJvcmRlcjogMnB4IHNvbGlkICRkYXJrZ3JleTtcclxuICAgICY6aG92ZXJcclxuICAgIHtcclxuICAgICAgYmFja2dyb3VuZDogJGRhcmtlcmdyZXk7XHJcbiAgICAgIGJvcmRlcjogMnB4IHNvbGlkICRkYXJrZXJncmV5O1xyXG4gICAgfVxyXG4gIH1cclxuICAmLmJ0bi1zZWNvbmRhcnlcclxuICB7XHJcbiAgICBiYWNrZ3JvdW5kOiB0cmFuc3BhcmVudDtcclxuICAgIGNvbG9yOiAkZGFya2dyZXk7XHJcbiAgICBib3JkZXI6IDJweCBzb2xpZCAkZGFya2dyZXk7XHJcbiAgICAmOmhvdmVyXHJcbiAgICB7XHJcbiAgICAgIGNvbG9yOiAkZGFya2VyZ3JleTtcclxuICAgICAgYm9yZGVyOiAycHggc29saWQgJGRhcmtlcmdyZXk7XHJcbiAgICB9XHJcbiAgfVxyXG59XHJcblxuXG5cbi8vIFdFQlBBQ0sgRk9PVEVSIC8vXG4vLyAuL2Fzc2V0cy9zdHlsZXMvc3JjL2Fzc2V0cy9zdHlsZXMvc3R5bGVzLnNjc3MiLCIkZGFya2VyZ3JleTogcmdiKDEwLCAxMCwgMTApO1xyXG4kZGFya2dyZXk6IHJnYig4MCwgODAsIDgwKTtcclxuJGdyZXk6IHJnYigxMjAsIDEyMCwgMTIwKTtcclxuJGxpZ2h0Z3JleTogcmdiKDI0MCwgMjQwLCAyNDApO1xyXG4kbGlnaHRlcmdyZXk6IHJnYigxNjksIDE2OSwgMTY5KTtcclxuJHdoaXRlOiB3aGl0ZTtcclxuXHJcbiRzcGFjaW5nRXh0cmFMYXJnZTogOHJlbTtcclxuJHNwYWNpbmdMYXJnZTogNS40cmVtO1xyXG4kc3BhY2luZ01lZGl1bTogMi40cmVtO1xyXG4kc3BhY2luZ1NtYWxsOiAxLjZyZW07XHJcbiRzcGFjaW5nRXh0cmFTbWFsbDogMC44cmVtO1xyXG5cblxuXG4vLyBXRUJQQUNLIEZPT1RFUiAvL1xuLy8gLi9hc3NldHMvc3R5bGVzL3NyYy9hc3NldHMvc3R5bGVzL3ZhcmlhYmxlcy5zY3NzIiwiQGltcG9ydCAnLi92YXJpYWJsZXMuc2Nzcyc7XHJcblxyXG4udmlkZW8tcGxheWVyIHtcclxuICBAbWVkaWEgKG1pbi13aWR0aDogMTAwMHB4KVxyXG4gIHtcclxuICAgIHdpZHRoOiA2MCU7XHJcbiAgICBtaW4td2lkdGg6IDEwMDBweDtcclxuICAgIG1heC13aWR0aDogMTIwMHB4O1xyXG4gICAgd2lkdGg6IDgwdnc7XHJcbiAgICBoZWlnaHQ6IDQ1dnc7XHJcbiAgICBtYXgtaGVpZ2h0OiA1MDBweDtcclxuICB9XHJcbiAgd2lkdGggOiAxMDAlO1xyXG4gIGRpc3BsYXk6IGZsZXg7XHJcbiAgZmxleC13cmFwOiB3cmFwO1xyXG4gIFxyXG4gIC5jb2x1bW5zXHJcbiAge1xyXG4gICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgJi5uaW5lXHJcbiAgICB7XHJcbiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICAgIC52aWRlby1qc1xyXG4gICAgICB7XHJcbiAgICAgICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgICAgIHdpZHRoOiAxMDAlO1xyXG4gICAgICAgIG1pbi1oZWlnaHQ6IDQwMHB4O1xyXG4gICAgICAgIEBtZWRpYSAobWluLXdpZHRoOiA3NTBweClcclxuICAgICAgICB7XHJcbiAgICAgICAgICBtaW4taGVpZ2h0OiBpbml0aWFsO1xyXG4gICAgICAgIH1cclxuICAgICAgfVxyXG4gICAgfVxyXG4gICAgJi5wbGF5bGlzdC1jb250YWluZXJcclxuICAgIHtcclxuICAgICAgQG1lZGlhIChtYXgtd2lkdGg6IDc0OXB4KVxyXG4gICAgICB7XHJcbiAgICAgICAgbWF4LWhlaWdodDogMjAwcHg7XHJcbiAgICAgIH1cclxuICAgICAgb3ZlcmZsb3c6IGF1dG87XHJcbiAgICAgIGRpc3BsYXk6IGZsZXg7XHJcbiAgICAgIC52anMtcGxheWxpc3RcclxuICAgICAge1xyXG4gICAgICAgIGJvcmRlci1sZWZ0OiAxcHggc29saWQgJGdyZXk7XHJcbiAgICAgICAgYm94LXNpemluZzogYm9yZGVyLWJveDtcclxuICAgICAgICB3aWR0aDogMTAwJTtcclxuICAgICAgICBiYWNrZ3JvdW5kOiAjNDQ0OTU0O1xyXG4gICAgICAgIC52anMtcGxheWxpc3QtaXRlbS1saXN0XHJcbiAgICAgICAge1xyXG4gICAgICAgICAgLnZqcy1wbGF5bGlzdC1pdGVtXHJcbiAgICAgICAgICB7XHJcbiAgICAgICAgICAgICYudmpzLXNlbGVjdGVkIC52anMtcGxheWxpc3QtdGh1bWJuYWlsLXBsYWNlaG9sZGVyIC52anMtcGxheWxpc3QtdGl0bGUtY29udGFpbmVyXHJcbiAgICAgICAgICAgIHtcclxuICAgICAgICAgICAgICBiYWNrZ3JvdW5kOiByZ2JhKDQzLCA1MSwgNjMsIDEpO1xyXG4gICAgICAgICAgICAgIGJveC1zaGFkb3c6IDBweCAwcHggMTBweCAwcHggaW5zZXQgJGRhcmtlcmdyZXk7XHJcbiAgICAgICAgICAgICAgY29sb3I6ICR3aGl0ZTtcclxuICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICBoZWlnaHQ6IGluaXRpYWw7XHJcbiAgICAgICAgICAgIGNvbG9yOiAkd2hpdGU7XHJcbiAgICAgICAgICAgIG1hcmdpbjogMDtcclxuICAgICAgICAgICAgYm9yZGVyLWJvdHRvbTogMXB4IHNvbGlkICRncmV5O1xyXG4gICAgICAgICAgICAudmpzLXBsYXlsaXN0LXRodW1ibmFpbC1wbGFjZWhvbGRlclxyXG4gICAgICAgICAgICB7XHJcbiAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcclxuICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiAycHg7XHJcbiAgICAgICAgICAgICAgaGVpZ2h0OiA3MHB4O1xyXG4gICAgICAgICAgICAgIGJhY2tncm91bmQ6ICR3aGl0ZTtcclxuICAgICAgICAgICAgICAudmpzLXBsYXlsaXN0LXRpdGxlLWNvbnRhaW5lclxyXG4gICAgICAgICAgICAgIHtcclxuICAgICAgICAgICAgICAgIGJvcmRlcjogbm9uZTtcclxuICAgICAgICAgICAgICAgIGJhY2tncm91bmQ6IHJnYmEoNDMsIDUxLCA2MywgMC45KTtcclxuICAgICAgICAgICAgICAgIHRleHQtc2hhZG93OiBub25lO1xyXG4gICAgICAgICAgICAgICAgaGVpZ2h0OiAxMDAlO1xyXG4gICAgICAgICAgICAgICAgcG9zaXRpb246IHJlbGF0aXZlO1xyXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcclxuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7XHJcbiAgICAgICAgICAgICAgICBwYWRkaW5nLWxlZnQ6ICRzcGFjaW5nU21hbGw7XHJcbiAgICAgICAgICAgICAgICAudmpzLXVwLW5leHQtdGV4dCB7XHJcbiAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XHJcbiAgICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICAgIC52anMtcGxheWxpc3Qtbm93LXBsYXlpbmctdGV4dFxyXG4gICAgICAgICAgICAgIHtcclxuICAgICAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XHJcbiAgICAgICAgICAgICAgfVxyXG4gICAgICAgICAgICAgIC52anMtcGxheWxpc3QtbmFtZVxyXG4gICAgICAgICAgICAgIHtcclxuICAgICAgICAgICAgICAgIGJvdHRvbTogM3B4O1xyXG4gICAgICAgICAgICAgICAgZGlzcGxheTogZmxleDtcclxuICAgICAgICAgICAgICAgIGFsaWduLWl0ZW1zOiBmbGV4LWVuZDtcclxuICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgcGljdHVyZVxyXG4gICAgICAgICAgICAgIHtcclxuICAgICAgICAgICAgICAgIGltZ1xyXG4gICAgICAgICAgICAgICAge1xyXG4gICAgICAgICAgICAgICAgICBoZWlnaHQ6IDEwMCU7XHJcbiAgICAgICAgICAgICAgICAgIG1heC13aWR0aDogMjAwcHg7XHJcbiAgICAgICAgICAgICAgICAgIG9wYWNpdHk6IDAuNTtcclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgICB9XHJcbiAgICAgICAgICAgICAgbWF4LWhlaWdodDogMTAwcHg7XHJcbiAgICAgICAgICAgIH1cclxuICAgICAgICAgIH1cclxuICAgICAgICB9XHJcbiAgICAgIH1cclxuICAgIH1cclxuICB9XHJcbn1cclxuXG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIC4vYXNzZXRzL3N0eWxlcy9zcmMvYXNzZXRzL3N0eWxlcy92aWRlby1wbGF5ZXIuc2NzcyJdLCJzb3VyY2VSb290IjoiIn0=*/ -------------------------------------------------------------------------------- /docs/assets/fonts/Rubik-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/fonts/Rubik-Regular.ttf -------------------------------------------------------------------------------- /docs/assets/fonts/SpaceMono-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/fonts/SpaceMono-Bold.ttf -------------------------------------------------------------------------------- /docs/assets/fonts/SpaceMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/fonts/SpaceMono-Regular.ttf -------------------------------------------------------------------------------- /docs/assets/media/1-workspace.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/1-workspace.mp4 -------------------------------------------------------------------------------- /docs/assets/media/2-attribute-vectors.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/2-attribute-vectors.mp4 -------------------------------------------------------------------------------- /docs/assets/media/3-interpolation.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/3-interpolation.mp4 -------------------------------------------------------------------------------- /docs/assets/media/4-analogy.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/4-analogy.mp4 -------------------------------------------------------------------------------- /docs/assets/media/5-random-variables.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/5-random-variables.mp4 -------------------------------------------------------------------------------- /docs/assets/media/6-slider-cells.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/6-slider-cells.mp4 -------------------------------------------------------------------------------- /docs/assets/media/7-mod-cells.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/7-mod-cells.mp4 -------------------------------------------------------------------------------- /docs/assets/media/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/favicon.png -------------------------------------------------------------------------------- /docs/assets/media/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/logo.png -------------------------------------------------------------------------------- /docs/assets/media/still.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/docs/assets/media/still.png -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | SpaceSheet

Interactive Latent Space Exploration through a Spreadsheet Interface

Generative models capture properties and relationships of images in a generic vector space representation called a latent space.

Latent spaces can be sampled to create novel images and perform semantic operations consistent with the principles inferred from the training set.

Designers can use representations learned by generative models to express design intent, enabling more effective design experimentation.

We present the SpaceSheet, a general-purpose spreadsheet interface designed to support the experimentation and exploration of latent spaces.

Try it out

Here are various implementations of the SpaceSheet.
Note: only desktop devices are supported.

Faces

MNIST Digits

Fonts

Word2Vec

Bryan Loh

bryanlohjy@hotmail.com

Tom White

tom.white@vuw.ac.nz

-------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "spacesheet-demo", 3 | "version": "1.0.0", 4 | "description": "Placeholder for spacesheet information.", 5 | "main": "index.js", 6 | "directories": { 7 | "lib": "lib" 8 | }, 9 | "scripts": { 10 | "build": "./node_modules/.bin/webpack", 11 | "build:prod": "./node_modules/.bin/webpack -p", 12 | "watch": "./node_modules/.bin/webpack --watch", 13 | "dev": "./node_modules/.bin/webpack-dev-server" 14 | }, 15 | "repository": { 16 | "type": "git", 17 | "url": "git+https://github.com/vusd/spacesheet.git" 18 | }, 19 | "author": "", 20 | "license": "ISC", 21 | "bugs": { 22 | "url": "https://github.com/vusd/spacesheet/issues" 23 | }, 24 | "homepage": "https://github.com/vusd/spacesheet#readme", 25 | "devDependencies": { 26 | "babel-core": "~6.26.0", 27 | "babel-loader": "~7.1.2", 28 | "babel-preset-env": "~1.6.0", 29 | "clean-webpack-plugin": "~0.1.17", 30 | "css-loader": "~0.28.7", 31 | "extract-text-webpack-plugin": "~3.0.0", 32 | "file-loader": "~1.1.4", 33 | "html-loader": "~0.5.1", 34 | "html-webpack-plugin": "~2.30.1", 35 | "node-sass": "~4.5.3", 36 | "resolve-url-loader": "^3.0.0", 37 | "sass-loader": "~6.0.6", 38 | "style-loader": "~0.18.2", 39 | "webpack": "~3.6.0", 40 | "webpack-dev-server": "~2.9.1" 41 | }, 42 | "dependencies": { 43 | "video.js": "^7.2.2", 44 | "videojs-playlist": "^4.2.6", 45 | "videojs-playlist-ui": "^3.5.1" 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /papers/iccc19/.gitignore: -------------------------------------------------------------------------------- 1 | *.aux 2 | *.bbl 3 | *.blg 4 | *.dvi 5 | *.log 6 | .DS_Store -------------------------------------------------------------------------------- /papers/iccc19/figs/01-hero-diagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/01-hero-diagram.png -------------------------------------------------------------------------------- /papers/iccc19/figs/02A-use-cases.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/02A-use-cases.png -------------------------------------------------------------------------------- /papers/iccc19/figs/02B-use-cases.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/02B-use-cases.png -------------------------------------------------------------------------------- /papers/iccc19/figs/02C-use-cases.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/02C-use-cases.png -------------------------------------------------------------------------------- /papers/iccc19/figs/03-cell-types.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/03-cell-types.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/04-interpolation-strip.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/04-interpolation-strip.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/05-interpolation-by-slider.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/05-interpolation-by-slider.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/06-interpolation-grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/06-interpolation-grid.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/07-analogy.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/07-analogy.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/08-extrapolation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/08-extrapolation.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/09-attribute-vectors.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/09-attribute-vectors.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/10-averaging.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/10-averaging.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/11-nearest-neighbours.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/11-nearest-neighbours.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/BigGAN-01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/BigGAN-01.png -------------------------------------------------------------------------------- /papers/iccc19/figs/BigGAN-02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/BigGAN-02.png -------------------------------------------------------------------------------- /papers/iccc19/figs/BigGAN-03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/BigGAN-03.png -------------------------------------------------------------------------------- /papers/iccc19/figs/decoupled.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/decoupled.jpg -------------------------------------------------------------------------------- /papers/iccc19/figs/face_space.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/face_space.png -------------------------------------------------------------------------------- /papers/iccc19/figs/smilevector.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/papers/iccc19/figs/smilevector.png -------------------------------------------------------------------------------- /papers/iccc19/iccc.bib: -------------------------------------------------------------------------------- 1 | @book{boden92, 2 | author = {Margaret Boden}, 3 | title = {The Creative Mind}, 4 | publisher = {Abacus}, 5 | address = {London}, 6 | year = {1992}, 7 | } 8 | 9 | @article{ritchie07, 10 | author = {Graeme Ritchie}, 11 | title = {Some Empirical Criteria for Attributing Creativity to a Computer Program}, 12 | journal = {Minds and Machines}, 13 | publisher = {Springer}, 14 | year = {2007}, 15 | pages = {76-99}, 16 | volume = {17}, 17 | } 18 | 19 | 20 | @misc{UCI, 21 | author = "A. Asuncion and D.J. Newman", 22 | title = "{UCI} Machine Learning Repository", 23 | note = "http://www.ics.uci.edu/~mlearn/MLRepository.html", 24 | howpublished = "University of California, Irvine, School of Information and Computer Sciences" 25 | } 26 | 27 | 28 | @inproceedings{veale07, 29 | author = {Tony Veale and Yanfen Hao}, 30 | title = {Comprehending and Generating Apt Metaphors: A Web-driven, Case-based Approach to Figurative Language}, 31 | booktitle = {Proceedings of the Twenty-Second AAAI Conference on Artificial Intelligence (AAAI-07)}, 32 | year = {2007}, 33 | pages = {1471--1476}, 34 | publisher = {AAAI Press}, 35 | address = {Vancouver, British Columbia}, 36 | } 37 | 38 | @article{lyu04, 39 | author = {Siwei Lyu and Daniel Rockmore and Hany Farid}, 40 | title = {A Digital Technique for Art Authentication}, 41 | journal = {Proceedings of the National Academy of Sciences}, 42 | volume = {101}, 43 | number = {49}, 44 | year = {2004}, 45 | pages = {17006--17010}, 46 | } 47 | 48 | @incollection{Woods81, 49 | author = "Woods, W.A.", 50 | title = "Procedural semantics as a theory of meaning", 51 | booktitle = "Elements of Discourse Understanding", 52 | editor = "Joshi, A.K. and Webber, B.L. and Sag, I.", 53 | publisher = "Cambridge University Press", 54 | address = "Cambridge, UK", 55 | year = 1981, 56 | pages = "300--334" 57 | } 58 | 59 | @Book{Ruch07, 60 | editor = {Willibald Ruch}, 61 | title = {The Sense of Humor: Explorations of a Personality 62 | Characteristic}, 63 | publisher = {Mouton de Gruyter}, 64 | year = 2007, 65 | series = {Mouton Select}, 66 | address = {Berlin} 67 | } 68 | 69 | @techreport{OZ, 70 | AUTHOR = {Mark Kantrowitz}, 71 | TITLE = {Natural Language Text Generation in the {OZ} 72 | Interactive Fiction Project}, 73 | YEAR = {1990}, 74 | INSTITUTION = {School of Computer Science, Carnegie Mellon 75 | University}, 76 | ADDRESS = {Pittsburgh, PA}, 77 | NUMBER = {CMU-CS-90-158}, 78 | TYPE = {Technical Report} 79 | } 80 | -------------------------------------------------------------------------------- /papers/iccc19/iccc.bst: -------------------------------------------------------------------------------- 1 | % Filename: iccc.bst 2 | % Notice: This file is lifted from the AAAI author kit and as of September 16, 2010, it is identical to aaai.bst. It was renamed simply for consistency. 3 | % BibTeX `aaai' style file for BibTeX version 0.99c, LaTeX version 2.09 4 | % Version of 22 February 2008 5 | % Place it in a file called aaai.bst in the BibTeX search path. (Placing it 6 | % in the same directory as the LaTeX document should also work.) 7 | % Support for named citations is provided by named.sty 8 | % This version was made by modifying the master file made by 9 | % Oren Patashnik (PATASHNIK@SCORE.STANFORD.EDU) 10 | % Copyright (C) 1985, all rights reserved. 11 | % Modifications Copyright (C) 1988, 1989, 1994, Peter F. Patel-Schneider 12 | % Copying of this file is authorized only if either 13 | % (1) you make absolutely no changes to your copy, including name, or 14 | % (2) if you do make changes, you name it something other than 15 | % btxbst.doc, plain.bst, unsrt.bst, alpha.bst, and abbrv.bst. 16 | % This restriction helps ensure that all standard styles are identical. 17 | % This style is NOT guaranteed to work. It is provided in the hope 18 | % that it will make the preparation of papers easier. 19 | % 20 | % There are undoubtably bugs in this style. If you make bug fixes, 21 | % improvements, etc. please us know (www.aaai.org) 22 | % The preparation of this modified file was supported by Schlumberger Palo 23 | % Alto Research and AT\&T Bell Laboratories. 24 | % Modifications Copyright (C) 1990. Sunil Issar si@cs.cmu.edu 25 | % Modified the file so that the Bibliography style is closer to the 26 | % one specified in the Instructions to Authors for AAAI papers. 27 | % This style is NOT guaranteed to work. It is provided in the hope 28 | % that it will make the preparation of papers easier. 29 | % Standard disclaimers apply. Send comments etc., to si@cs.cmu.edu 30 | % This file can be used in other conferences as long as credit to the 31 | % authors and supporting agencies is retained, this notice is not changed, 32 | % and further modification or reuse is not restricted. 33 | % Name format in citations: 34 | % single authorFirst 35 | % two authorsFirst and Second 36 | % three authorsFirst, Second, and Third 37 | % more authorsFirst et al. 38 | % 39 | % Bibliography format 40 | % author. date. other. 41 | % Author format 42 | % single authorFirst, Initials 43 | % two authorsFirst, Initials, and Second, Initials 44 | % more authorsFirst, Initials; ...; and Last, Initials 45 | % 46 | % Reference list ordering: alphabetical by author or whatever passes 47 | % for author in the absence of one. 48 | % 49 | % This BibTeX style has support for short (year only) citations. This 50 | % is done by having the citations actually look like 51 | % \citeauthoryear{author-info}{year} 52 | % The LaTeX style has to have support for this 53 | ENTRY 54 | { address 55 | author 56 | booktitle 57 | chapter 58 | edition 59 | editor 60 | howpublished 61 | institution 62 | journal 63 | key 64 | month 65 | note 66 | number 67 | organization 68 | pages 69 | publisher 70 | school 71 | series 72 | title 73 | type 74 | volume 75 | year 76 | } 77 | {} 78 | { label extra.label sort.label } 79 | INTEGERS { output.state before.all mid.sentence after.sentence after.block } 80 | FUNCTION {init.state.consts} 81 | { #0 'before.all := 82 | #1 'mid.sentence := 83 | #2 'after.sentence := 84 | #3 'after.block := 85 | } 86 | STRINGS { s t } 87 | FUNCTION {output.nonnull} 88 | { 's := 89 | output.state mid.sentence = 90 | { ", " * write$ } 91 | { output.state after.block = 92 | { add.period$ write$ 93 | newline$ 94 | "\newblock " write$ 95 | } 96 | { output.state before.all = 97 | 'write$ 98 | { add.period$ " " * write$ } 99 | if$ 100 | } 101 | if$ 102 | mid.sentence 'output.state := 103 | } 104 | if$ 105 | s 106 | } 107 | FUNCTION {sioutput.nonnull} 108 | { 's := 109 | output.state mid.sentence = 110 | { " " * write$ } 111 | { output.state after.block = 112 | { add.period$ write$ 113 | newline$ 114 | "\newblock " write$ 115 | } 116 | { output.state before.all = 117 | 'write$ 118 | { add.period$ " " * write$ } 119 | if$ 120 | } 121 | if$ 122 | mid.sentence 'output.state := 123 | } 124 | if$ 125 | s 126 | } 127 | FUNCTION {output} 128 | { duplicate$ empty$ 129 | 'pop$ 130 | 'output.nonnull 131 | if$ 132 | } 133 | FUNCTION {sioutput} 134 | { duplicate$ empty$ 135 | 'pop$ 136 | 'sioutput.nonnull 137 | if$ 138 | } 139 | FUNCTION {output.check} 140 | { 't := 141 | duplicate$ empty$ 142 | { pop$ "empty " t * " in " * cite$ * warning$ } 143 | 'output.nonnull 144 | if$ 145 | } 146 | FUNCTION {output.bibitem} 147 | { newline$ 148 | "\bibitem[" write$ 149 | label write$ 150 | "]{" write$ 151 | cite$ write$ 152 | "}" write$ 153 | newline$ 154 | "" 155 | before.all 'output.state := 156 | } 157 | FUNCTION {fin.entry} 158 | { add.period$ 159 | write$ 160 | newline$ 161 | } 162 | FUNCTION {new.block} 163 | { output.state before.all = 164 | 'skip$ 165 | { after.block 'output.state := } 166 | if$ 167 | } 168 | FUNCTION {new.sentence} 169 | { output.state after.block = 170 | 'skip$ 171 | { output.state before.all = 172 | 'skip$ 173 | { after.sentence 'output.state := } 174 | if$ 175 | } 176 | if$ 177 | } 178 | FUNCTION {not} 179 | { { #0 } 180 | { #1 } 181 | if$ 182 | } 183 | FUNCTION {and} 184 | { 'skip$ 185 | { pop$ #0 } 186 | if$ 187 | } 188 | FUNCTION {or} 189 | { { pop$ #1 } 190 | 'skip$ 191 | if$ 192 | } 193 | FUNCTION {new.block.checka} 194 | { empty$ 195 | 'skip$ 196 | 'new.block 197 | if$ 198 | } 199 | FUNCTION {new.block.checkb} 200 | { empty$ 201 | swap$ empty$ 202 | and 203 | 'skip$ 204 | 'new.block 205 | if$ 206 | } 207 | FUNCTION {new.sentence.checka} 208 | { empty$ 209 | 'skip$ 210 | 'new.sentence 211 | if$ 212 | } 213 | FUNCTION {new.sentence.checkb} 214 | { empty$ 215 | swap$ empty$ 216 | and 217 | 'skip$ 218 | 'new.sentence 219 | if$ 220 | } 221 | FUNCTION {field.or.null} 222 | { duplicate$ empty$ 223 | { pop$ "" } 224 | 'skip$ 225 | if$ 226 | } 227 | FUNCTION {emphasize} 228 | { duplicate$ empty$ 229 | { pop$ "" } 230 | { "{\em " swap$ * "}" * } 231 | if$ 232 | } 233 | INTEGERS { nameptr namesleft numnames } 234 | FUNCTION {format.publisher} 235 | { publisher empty$ 236 | { "" } 237 | { address empty$ 238 | { publisher } 239 | { address ": " * publisher * } 240 | if$ 241 | } 242 | if$ 243 | } 244 | FUNCTION {format.organization} 245 | { organization empty$ 246 | { "" } 247 | { address empty$ 248 | { organization } 249 | { address ": " * organization * } 250 | if$ 251 | } 252 | if$ 253 | } 254 | FUNCTION {format.names} 255 | { 's := 256 | #1 'nameptr := 257 | s num.names$ 'numnames := 258 | numnames 'namesleft := 259 | { namesleft #0 > } 260 | { s nameptr "{vv~}{ll}{, jj}{, f.}" format.name$ 't := 261 | nameptr #1 > 262 | { namesleft #1 > 263 | { "; " * t * } 264 | { numnames #2 > 265 | { ";" * } 266 | { "," * } 267 | if$ 268 | t "others" = 269 | { " et~al." * } 270 | { " and " * t * } 271 | if$ 272 | } 273 | if$ 274 | } 275 | 't 276 | if$ 277 | nameptr #1 + 'nameptr := 278 | namesleft #1 - 'namesleft := 279 | } 280 | while$ 281 | add.period$ 282 | } 283 | FUNCTION {format.authors} 284 | { author empty$ 285 | { "" } 286 | { author format.names } 287 | if$ 288 | } 289 | FUNCTION {format.editors} 290 | { editor empty$ 291 | { "" } 292 | { editor format.names 293 | editor num.names$ #1 > 294 | { ", eds." * } 295 | { ", ed." * } 296 | if$ 297 | } 298 | if$ 299 | } 300 | FUNCTION {format.title} 301 | { title empty$ 302 | { "" } 303 | { title "t" change.case$ } 304 | if$ 305 | } 306 | FUNCTION {n.dashify} 307 | { 't := 308 | "" 309 | { t empty$ not } 310 | { t #1 #1 substring$ "-" = 311 | { t #1 #2 substring$ "--" = not 312 | { "--" * 313 | t #2 global.max$ substring$ 't := 314 | } 315 | { { t #1 #1 substring$ "-" = } 316 | { "-" * 317 | t #2 global.max$ substring$ 't := 318 | } 319 | while$ 320 | } 321 | if$ 322 | } 323 | { t #1 #1 substring$ * 324 | t #2 global.max$ substring$ 't := 325 | } 326 | if$ 327 | } 328 | while$ 329 | } 330 | FUNCTION {format.year} 331 | { year empty$ 332 | { "" } 333 | { year extra.label * } 334 | if$ 335 | } 336 | FUNCTION {format.date} 337 | { year empty$ 338 | { month empty$ 339 | { "" } 340 | { "there's a month but no year in " cite$ * warning$ 341 | month 342 | } 343 | if$ 344 | } 345 | { month empty$ 346 | 'year 347 | { month " " * year * } 348 | if$ 349 | } 350 | if$ 351 | } 352 | FUNCTION {format.btitle} 353 | { title emphasize 354 | } 355 | FUNCTION {tie.or.space.connect} 356 | { duplicate$ text.length$ #3 < 357 | { "~" } 358 | { " " } 359 | if$ 360 | swap$ * * 361 | } 362 | FUNCTION {either.or.check} 363 | { empty$ 364 | 'pop$ 365 | { "can't use both " swap$ * " fields in " * cite$ * warning$ } 366 | if$ 367 | } 368 | FUNCTION {format.bvolume} 369 | { volume empty$ 370 | { "" } 371 | { "volume" volume tie.or.space.connect 372 | series empty$ 373 | 'skip$ 374 | { " of " * series emphasize * } 375 | if$ 376 | "volume and number" number either.or.check 377 | } 378 | if$ 379 | } 380 | FUNCTION {format.number.series} 381 | { volume empty$ 382 | { number empty$ 383 | { series field.or.null } 384 | { output.state mid.sentence = 385 | { "number" } 386 | { "Number" } 387 | if$ 388 | number tie.or.space.connect 389 | series empty$ 390 | { "there's a number but no series in " cite$ * warning$ } 391 | { " in " * series * } 392 | if$ 393 | } 394 | if$ 395 | } 396 | { "" } 397 | if$ 398 | } 399 | FUNCTION {format.edition} 400 | { edition empty$ 401 | { "" } 402 | { output.state mid.sentence = 403 | { edition "l" change.case$ " edition" * } 404 | { edition "t" change.case$ " edition" * } 405 | if$ 406 | } 407 | if$ 408 | } 409 | INTEGERS { multiresult } 410 | FUNCTION {multi.page.check} 411 | { 't := 412 | #0 'multiresult := 413 | { multiresult not 414 | t empty$ not 415 | and 416 | } 417 | { t #1 #1 substring$ 418 | duplicate$ "-" = 419 | swap$ duplicate$ "," = 420 | swap$ "+" = 421 | or or 422 | { #1 'multiresult := } 423 | { t #2 global.max$ substring$ 't := } 424 | if$ 425 | } 426 | while$ 427 | multiresult 428 | } 429 | FUNCTION {format.pages} 430 | { pages empty$ 431 | { "" } 432 | { pages multi.page.check 433 | { "" pages n.dashify tie.or.space.connect } 434 | { "" pages tie.or.space.connect } 435 | if$ 436 | } 437 | if$ 438 | } 439 | FUNCTION {format.vol.num.pages} 440 | { volume field.or.null 441 | number empty$ 442 | 'skip$ 443 | { "(" number * ")" * * 444 | volume empty$ 445 | { "there's a number but no volume in " cite$ * warning$ } 446 | 'skip$ 447 | if$ 448 | } 449 | if$ 450 | pages empty$ 451 | 'skip$ 452 | { duplicate$ empty$ 453 | { pop$ format.pages } 454 | { ":" * pages n.dashify * } 455 | if$ 456 | } 457 | if$ 458 | } 459 | FUNCTION {format.chapter.pages} 460 | { chapter empty$ 461 | 'format.pages 462 | { type empty$ 463 | { "chapter" } 464 | { type "l" change.case$ } 465 | if$ 466 | chapter tie.or.space.connect 467 | pages empty$ 468 | 'skip$ 469 | { ", " * format.pages * } 470 | if$ 471 | } 472 | if$ 473 | } 474 | FUNCTION {format.in.ed.booktitle} 475 | { booktitle empty$ 476 | { "" } 477 | { editor empty$ 478 | { "In " booktitle emphasize * } 479 | { "In " format.editors * ", " * booktitle emphasize * } 480 | if$ 481 | } 482 | if$ 483 | } 484 | FUNCTION {empty.misc.check} 485 | { author empty$ title empty$ howpublished empty$ 486 | month empty$ year empty$ note empty$ 487 | and and and and and 488 | key empty$ not and 489 | { "all relevant fields are empty in " cite$ * warning$ } 490 | 'skip$ 491 | if$ 492 | } 493 | FUNCTION {format.thesis.type} 494 | { type empty$ 495 | 'skip$ 496 | { pop$ 497 | type "t" change.case$ 498 | } 499 | if$ 500 | } 501 | FUNCTION {format.tr.number} 502 | { type empty$ 503 | { "Technical Report" } 504 | 'type 505 | if$ 506 | number empty$ 507 | { "t" change.case$ } 508 | { number tie.or.space.connect } 509 | if$ 510 | } 511 | FUNCTION {format.article.crossref} 512 | { key empty$ 513 | { journal empty$ 514 | { "need key or journal for " cite$ * " to crossref " * crossref * 515 | warning$ 516 | "" 517 | } 518 | { "In {\em " journal * "\/}" * } 519 | if$ 520 | } 521 | { "In " key * } 522 | if$ 523 | " \shortcite{" * crossref * "}" * 524 | } 525 | FUNCTION {format.crossref.editor} 526 | { editor #1 "{vv~}{ll}" format.name$ 527 | editor num.names$ duplicate$ 528 | #2 > 529 | { pop$ " et~al." * } 530 | { #2 < 531 | 'skip$ 532 | { editor #2 "{ff }{vv }{ll}{ jj}" format.name$ "others" = 533 | { " et~al." * } 534 | { " and " * editor #2 "{vv~}{ll}" format.name$ * } 535 | if$ 536 | } 537 | if$ 538 | } 539 | if$ 540 | } 541 | FUNCTION {format.book.crossref} 542 | { volume empty$ 543 | { "empty volume in " cite$ * "'s crossref of " * crossref * warning$ 544 | "In " 545 | } 546 | { "Volume" volume tie.or.space.connect 547 | " of " * 548 | } 549 | if$ 550 | editor empty$ 551 | editor field.or.null author field.or.null = 552 | or 553 | { key empty$ 554 | { series empty$ 555 | { "need editor, key, or series for " cite$ * " to crossref " * 556 | crossref * warning$ 557 | "" * 558 | } 559 | { "{\em " * series * "\/}" * } 560 | if$ 561 | } 562 | { key * } 563 | if$ 564 | } 565 | { format.crossref.editor * } 566 | if$ 567 | " \shortcite{" * crossref * "}" * 568 | } 569 | FUNCTION {format.incoll.inproc.crossref} 570 | { editor empty$ 571 | editor field.or.null author field.or.null = 572 | or 573 | { key empty$ 574 | { booktitle empty$ 575 | { "need editor, key, or booktitle for " cite$ * " to crossref " * 576 | crossref * warning$ 577 | "" 578 | } 579 | { "In {\em " booktitle * "\/}" * } 580 | if$ 581 | } 582 | { "In " key * } 583 | if$ 584 | } 585 | { "In " format.crossref.editor * } 586 | if$ 587 | " \shortcite{" * crossref * "}" * 588 | } 589 | FUNCTION {article} 590 | { output.bibitem 591 | format.authors "author" output.check 592 | new.block format.year "year" output.check 593 | new.block 594 | format.title "title" output.check 595 | new.block 596 | crossref missing$ 597 | { journal emphasize "journal" output.check 598 | format.vol.num.pages sioutput 599 | } 600 | { format.article.crossref output.nonnull 601 | format.pages sioutput 602 | } 603 | if$ 604 | new.block 605 | note output 606 | fin.entry 607 | } 608 | FUNCTION {book} 609 | { output.bibitem 610 | author empty$ 611 | { format.editors "author and editor" output.check } 612 | { format.authors output.nonnull 613 | crossref missing$ 614 | { "author and editor" editor either.or.check } 615 | 'skip$ 616 | if$ 617 | } 618 | if$ 619 | new.block format.year "year" output.check 620 | new.block 621 | format.btitle "title" output.check 622 | crossref missing$ 623 | { format.bvolume output 624 | new.block 625 | format.number.series output 626 | new.sentence 627 | format.publisher "publisher" output.check 628 | } 629 | { new.block 630 | format.book.crossref output.nonnull 631 | } 632 | if$ 633 | format.edition output 634 | % format.date "year" output.check 635 | new.block 636 | note output 637 | fin.entry 638 | } 639 | FUNCTION {booklet} 640 | { output.bibitem 641 | format.authors output 642 | new.block format.year "year" output.check 643 | new.block 644 | format.title "title" output.check 645 | howpublished address new.block.checkb 646 | howpublished output 647 | address output 648 | % format.date output 649 | new.block 650 | note output 651 | fin.entry 652 | } 653 | FUNCTION {inbook} 654 | { output.bibitem 655 | author empty$ 656 | { format.editors "author and editor" output.check } 657 | { format.authors output.nonnull 658 | crossref missing$ 659 | { "author and editor" editor either.or.check } 660 | 'skip$ 661 | if$ 662 | } 663 | if$ 664 | new.block format.year "year" output.check 665 | new.block 666 | format.btitle "title" output.check 667 | crossref missing$ 668 | { format.bvolume output 669 | new.block 670 | format.number.series output 671 | new.sentence 672 | format.publisher "publisher" output.check 673 | } 674 | { format.book.crossref output.nonnull 675 | } 676 | if$ 677 | format.edition output 678 | % format.date "year" output.check 679 | new.block 680 | format.chapter.pages "chapter and pages" output.check 681 | new.block 682 | note output 683 | fin.entry 684 | } 685 | FUNCTION {incollection} 686 | { output.bibitem 687 | format.authors "author" output.check 688 | new.block format.year "year" output.check 689 | new.block 690 | format.title "title" output.check 691 | new.block 692 | crossref missing$ 693 | { format.in.ed.booktitle "booktitle" output.check 694 | format.bvolume output 695 | format.number.series output 696 | new.sentence 697 | format.publisher "publisher" output.check 698 | format.edition output 699 | % format.date "year" output.check 700 | new.block 701 | format.chapter.pages output 702 | } 703 | { format.incoll.inproc.crossref output.nonnull 704 | new.block 705 | format.chapter.pages output 706 | } 707 | if$ 708 | new.block 709 | note output 710 | fin.entry 711 | } 712 | FUNCTION {inproceedings} 713 | { output.bibitem 714 | format.authors "author" output.check 715 | new.block format.year "year" output.check 716 | new.block 717 | format.title "title" output.check 718 | new.block 719 | crossref missing$ 720 | { format.in.ed.booktitle "booktitle" output.check 721 | format.bvolume output 722 | format.number.series output 723 | format.pages output 724 | new.block 725 | organization empty$ 726 | { format.publisher output } 727 | { format.organization output } 728 | if$ 729 | } 730 | { format.incoll.inproc.crossref output.nonnull 731 | format.pages output 732 | } 733 | if$ 734 | new.block 735 | note output 736 | fin.entry 737 | } 738 | FUNCTION {conference} { inproceedings } 739 | FUNCTION {manual} 740 | { output.bibitem 741 | author empty$ 742 | { organization empty$ 743 | 'skip$ 744 | { organization output.nonnull 745 | address output 746 | } 747 | if$ 748 | } 749 | { format.authors output.nonnull } 750 | if$ 751 | new.block format.year "year" output.check 752 | new.block 753 | format.btitle "title" output.check 754 | author empty$ 755 | { organization empty$ 756 | { address new.block.checka 757 | address output 758 | } 759 | 'skip$ 760 | if$ 761 | } 762 | { organization address new.block.checkb 763 | organization output 764 | address output 765 | } 766 | if$ 767 | format.edition output 768 | % format.date output 769 | new.block 770 | note output 771 | fin.entry 772 | } 773 | FUNCTION {mastersthesis} 774 | { output.bibitem 775 | format.authors "author" output.check 776 | new.block format.year "year" output.check 777 | new.block 778 | format.title "title" output.check 779 | new.block 780 | "Master's thesis" format.thesis.type output.nonnull 781 | school "school" output.check 782 | address output 783 | % format.date "year" output.check 784 | new.block 785 | note output 786 | fin.entry 787 | } 788 | FUNCTION {misc} 789 | { output.bibitem 790 | format.authors output 791 | new.block format.year "year" output.check 792 | title howpublished new.block.checkb 793 | format.title output 794 | howpublished new.block.checka 795 | howpublished output 796 | % format.date output 797 | new.block 798 | note output 799 | fin.entry 800 | empty.misc.check 801 | } 802 | FUNCTION {phdthesis} 803 | { output.bibitem 804 | format.authors "author" output.check 805 | new.block format.year "year" output.check 806 | new.block 807 | format.btitle "title" output.check 808 | new.block 809 | "Ph.D. Dissertation" format.thesis.type output.nonnull 810 | school "school" output.check 811 | address output 812 | % format.date "year" output.check 813 | new.block 814 | note output 815 | fin.entry 816 | } 817 | FUNCTION {proceedings} 818 | { output.bibitem 819 | editor empty$ 820 | { organization output } 821 | { format.editors output.nonnull } 822 | if$ 823 | new.block format.year "year" output.check 824 | new.block 825 | format.btitle "title" output.check 826 | format.bvolume output 827 | format.number.series output 828 | editor empty$ 829 | { publisher empty$ 830 | { address output } 831 | { format.publisher output } 832 | if$ 833 | } 834 | { organization empty$ 835 | { publisher new.sentence.checka 836 | format.publisher output 837 | } 838 | { organization new.sentence.checkb 839 | format.organization output 840 | } 841 | if$ 842 | } 843 | if$ 844 | new.block 845 | note output 846 | fin.entry 847 | } 848 | FUNCTION {techreport} 849 | { output.bibitem 850 | format.authors "author" output.check 851 | new.block format.year "year" output.check 852 | new.block 853 | format.title "title" output.check 854 | new.block 855 | format.tr.number output.nonnull 856 | institution "institution" output.check 857 | address output 858 | % format.date "year" output.check 859 | new.block 860 | note output 861 | fin.entry 862 | } 863 | FUNCTION {unpublished} 864 | { output.bibitem 865 | format.authors "author" output.check 866 | new.block format.year "year" output.check 867 | new.block 868 | format.title "title" output.check 869 | new.block 870 | note "note" output.check 871 | % format.date output 872 | fin.entry 873 | } 874 | FUNCTION {default.type} { misc } 875 | MACRO {jan} {"January"} 876 | MACRO {feb} {"February"} 877 | MACRO {mar} {"March"} 878 | MACRO {apr} {"April"} 879 | MACRO {may} {"May"} 880 | MACRO {jun} {"June"} 881 | MACRO {jul} {"July"} 882 | MACRO {aug} {"August"} 883 | MACRO {sep} {"September"} 884 | MACRO {oct} {"October"} 885 | MACRO {nov} {"November"} 886 | MACRO {dec} {"December"} 887 | MACRO {acmcs} {"ACM Computing Surveys"} 888 | MACRO {acta} {"Acta Informatica"} 889 | MACRO {cacm} {"Communications of the ACM"} 890 | MACRO {ibmjrd} {"IBM Journal of Research and Development"} 891 | MACRO {ibmsj} {"IBM Systems Journal"} 892 | MACRO {ieeese} {"IEEE Transactions on Software Engineering"} 893 | MACRO {ieeetc} {"IEEE Transactions on Computers"} 894 | MACRO {ieeetcad} 895 | {"IEEE Transactions on Computer-Aided Design of Integrated Circuits"} 896 | MACRO {ipl} {"Information Processing Letters"} 897 | MACRO {jacm} {"Journal of the ACM"} 898 | MACRO {jcss} {"Journal of Computer and System Sciences"} 899 | MACRO {scp} {"Science of Computer Programming"} 900 | MACRO {sicomp} {"SIAM Journal on Computing"} 901 | MACRO {tocs} {"ACM Transactions on Computer Systems"} 902 | MACRO {tods} {"ACM Transactions on Database Systems"} 903 | MACRO {tog} {"ACM Transactions on Graphics"} 904 | MACRO {toms} {"ACM Transactions on Mathematical Software"} 905 | MACRO {toois} {"ACM Transactions on Office Information Systems"} 906 | MACRO {toplas} {"ACM Transactions on Programming Languages and Systems"} 907 | MACRO {tcs} {"Theoretical Computer Science"} 908 | READ 909 | FUNCTION {sortify} 910 | { purify$ 911 | "l" change.case$ 912 | } 913 | INTEGERS { len } 914 | FUNCTION {chop.word} 915 | { 's := 916 | 'len := 917 | s #1 len substring$ = 918 | { s len #1 + global.max$ substring$ } 919 | 's 920 | if$ 921 | } 922 | FUNCTION {format.lab.names} 923 | { 's := 924 | s num.names$ 'numnames := 925 | numnames #1 = 926 | { s #1 "{vv }{ll}" format.name$ } 927 | { numnames #2 = 928 | { s #1 "{vv }{ll} and " format.name$ s #2 "{vv }{ll}" format.name$ * 929 | } 930 | { numnames #3 = 931 | { s #1 "{vv }{ll}, " format.name$ 932 | s #2 "{vv }{ll}, and " format.name$ * 933 | s #3 "{vv }{ll}" format.name$ * 934 | } 935 | { s #1 "{vv }{ll }\bgroup et al.\egroup " format.name$ 936 | } 937 | if$ 938 | } 939 | if$ 940 | } 941 | if$ 942 | } 943 | FUNCTION {author.key.label} 944 | { author empty$ 945 | { key empty$ 946 | { cite$ #1 #3 substring$ } 947 | { key } 948 | if$ 949 | } 950 | { author format.lab.names } 951 | if$ 952 | } 953 | FUNCTION {author.editor.key.label} 954 | { author empty$ 955 | { editor empty$ 956 | { key empty$ 957 | { cite$ #1 #3 substring$ } 958 | { key } 959 | if$ 960 | } 961 | { editor format.lab.names } 962 | if$ 963 | } 964 | { author format.lab.names } 965 | if$ 966 | } 967 | FUNCTION {author.key.organization.label} 968 | { author empty$ 969 | { key empty$ 970 | { organization empty$ 971 | { cite$ #1 #3 substring$ } 972 | { "The " #4 organization chop.word #3 text.prefix$ } 973 | if$ 974 | } 975 | { key } 976 | if$ 977 | } 978 | { author format.lab.names } 979 | if$ 980 | } 981 | FUNCTION {editor.key.organization.label} 982 | { editor empty$ 983 | { key empty$ 984 | { organization empty$ 985 | { cite$ #1 #3 substring$ } 986 | { "The " #4 organization chop.word #3 text.prefix$ } 987 | if$ 988 | } 989 | { key } 990 | if$ 991 | } 992 | { editor format.lab.names } 993 | if$ 994 | } 995 | FUNCTION {calc.label} 996 | { type$ "book" = 997 | type$ "inbook" = 998 | or 999 | 'author.editor.key.label 1000 | { type$ "proceedings" = 1001 | 'editor.key.organization.label 1002 | { type$ "manual" = 1003 | 'author.key.organization.label 1004 | 'author.key.label 1005 | if$ 1006 | } 1007 | if$ 1008 | } 1009 | if$ 1010 | duplicate$ 1011 | "\protect\citeauthoryear{" swap$ * "}{" * 1012 | year field.or.null purify$ * % CHANGED - pfps - 15 Feb 1989 1013 | 'label := 1014 | year field.or.null purify$ * 1015 | sortify 'sort.label := 1016 | } 1017 | FUNCTION {sort.format.names} 1018 | { 's := 1019 | #1 'nameptr := 1020 | "" 1021 | s num.names$ 'numnames := 1022 | numnames 'namesleft := 1023 | { namesleft #0 > } 1024 | { nameptr #1 > 1025 | { " " * } 1026 | 'skip$ 1027 | if$ 1028 | s nameptr "{vv{ } }{ll{ }}{ ff{ }}{ jj{ }}" format.name$ 't := 1029 | nameptr numnames = t "others" = and 1030 | { "et al" * } 1031 | { t sortify * } 1032 | if$ 1033 | nameptr #1 + 'nameptr := 1034 | namesleft #1 - 'namesleft := 1035 | } 1036 | while$ 1037 | } 1038 | FUNCTION {sort.format.title} 1039 | { 't := 1040 | "A " #2 1041 | "An " #3 1042 | "The " #4 t chop.word 1043 | chop.word 1044 | chop.word 1045 | sortify 1046 | #1 global.max$ substring$ 1047 | } 1048 | FUNCTION {author.sort} 1049 | { author empty$ 1050 | { key empty$ 1051 | { "to sort, need author or key in " cite$ * warning$ 1052 | "" 1053 | } 1054 | { key sortify } 1055 | if$ 1056 | } 1057 | { author sort.format.names } 1058 | if$ 1059 | } 1060 | FUNCTION {author.editor.sort} 1061 | { author empty$ 1062 | { editor empty$ 1063 | { key empty$ 1064 | { "to sort, need author, editor, or key in " cite$ * warning$ 1065 | "" 1066 | } 1067 | { key sortify } 1068 | if$ 1069 | } 1070 | { editor sort.format.names } 1071 | if$ 1072 | } 1073 | { author sort.format.names } 1074 | if$ 1075 | } 1076 | FUNCTION {author.organization.sort} 1077 | { author empty$ 1078 | { organization empty$ 1079 | { key empty$ 1080 | { "to sort, need author, organization, or key in " cite$ * warning$ 1081 | "" 1082 | } 1083 | { key sortify } 1084 | if$ 1085 | } 1086 | { "The " #4 organization chop.word sortify } 1087 | if$ 1088 | } 1089 | { author sort.format.names } 1090 | if$ 1091 | } 1092 | FUNCTION {editor.organization.sort} 1093 | { editor empty$ 1094 | { organization empty$ 1095 | { key empty$ 1096 | { "to sort, need editor, organization, or key in " cite$ * warning$ 1097 | "" 1098 | } 1099 | { key sortify } 1100 | if$ 1101 | } 1102 | { "The " #4 organization chop.word sortify } 1103 | if$ 1104 | } 1105 | { editor sort.format.names } 1106 | if$ 1107 | } 1108 | FUNCTION {presort} 1109 | { calc.label 1110 | sort.label 1111 | " " 1112 | * 1113 | type$ "book" = 1114 | type$ "inbook" = 1115 | or 1116 | 'author.editor.sort 1117 | { type$ "proceedings" = 1118 | 'editor.organization.sort 1119 | { type$ "manual" = 1120 | 'author.organization.sort 1121 | 'author.sort 1122 | if$ 1123 | } 1124 | if$ 1125 | } 1126 | if$ 1127 | * 1128 | " " 1129 | * 1130 | year field.or.null sortify 1131 | * 1132 | " " 1133 | * 1134 | title field.or.null 1135 | sort.format.title 1136 | * 1137 | #1 entry.max$ substring$ 1138 | 'sort.key$ := 1139 | } 1140 | ITERATE {presort} 1141 | SORT 1142 | STRINGS { longest.label last.sort.label next.extra } 1143 | INTEGERS { longest.label.width last.extra.num } 1144 | FUNCTION {initialize.longest.label} 1145 | { "" 'longest.label := 1146 | #0 int.to.chr$ 'last.sort.label := 1147 | "" 'next.extra := 1148 | #0 'longest.label.width := 1149 | #0 'last.extra.num := 1150 | } 1151 | FUNCTION {forward.pass} 1152 | { last.sort.label sort.label = 1153 | { last.extra.num #1 + 'last.extra.num := 1154 | last.extra.num int.to.chr$ 'extra.label := 1155 | } 1156 | { "a" chr.to.int$ 'last.extra.num := 1157 | "" 'extra.label := 1158 | sort.label 'last.sort.label := 1159 | } 1160 | if$ 1161 | } 1162 | FUNCTION {reverse.pass} 1163 | { next.extra "b" = 1164 | { "a" 'extra.label := } 1165 | 'skip$ 1166 | if$ 1167 | label extra.label * "}" * 'label := % CHANGED - pfps 15 Feb 1989 1168 | label width$ longest.label.width > 1169 | { label 'longest.label := 1170 | label width$ 'longest.label.width := 1171 | } 1172 | 'skip$ 1173 | if$ 1174 | extra.label 'next.extra := 1175 | } 1176 | EXECUTE {initialize.longest.label} 1177 | ITERATE {forward.pass} 1178 | REVERSE {reverse.pass} 1179 | FUNCTION {begin.bib} 1180 | { preamble$ empty$ 1181 | 'skip$ 1182 | { preamble$ write$ newline$ } 1183 | if$ 1184 | "\begin{thebibliography}{}" write$ newline$ 1185 | } 1186 | EXECUTE {begin.bib} 1187 | EXECUTE {init.state.consts} 1188 | ITERATE {call.type$} 1189 | FUNCTION {end.bib} 1190 | { newline$ 1191 | "\end{thebibliography}" write$ newline$ 1192 | } 1193 | EXECUTE {end.bib} 1194 | -------------------------------------------------------------------------------- /papers/iccc19/iccc.sty: -------------------------------------------------------------------------------- 1 | %Filename: iccc.sty 2 | % 3 | \typeout{Conference Style for ICCC for LaTeX 2e -- version of 16 September 2010} 4 | % NOTICE: DO NOT MODIFY THIS FILE WITHOUT CHANGING ITS NAME. This style 5 | % file is called iccc.sty. It is lifted from the aaai.sty file used by the AAAI 6 | % and consists of minimal modification to allow its use for ICCC. These modifications 7 | % were done by Dan Ventura in September 2010. The original AAAI notice follows. 8 | % 9 | % NOTICE: DO NOT MODIFY THIS FILE WITHOUT CHANGING ITS NAME. This style 10 | % file is called aaai.sty. Modifications to this file are permitted, 11 | % provided that your modified version does not include the acronym "aaai" 12 | % in its name, that credit to the authors and supporting agencies is 13 | % retained, and that further modification or reuse is not restricted. This 14 | % file was originally prepared by Peter F. Patel-Schneider, liberally 15 | % using the ideas of other style hackers, including Barbara Beeton. It was 16 | % modified in April 1999 by J. Scott Penberthy and George Ferguson. It was 17 | % modified in 2007 by AAAI. It was modified in February 2009 18 | % and in November 2009 by Hans W. Guesgen and Giuseppe De Giacomo. It 19 | % was further modified in March 2010 by AAAI. 20 | % The original preparation of this file was supported by 21 | % Schlumberger Palo Alto Research, AT\&T Bell Laboratories, AAAI, and 22 | % Morgan Kaufmann Publishers. 23 | % 24 | % WARNING: This style is NOT guaranteed to work. It is provided in the 25 | % hope that it might make the preparation of papers easier, but this style 26 | % file is provided "as is" without warranty of any kind, either express or 27 | % implied, including but not limited to the implied warranties of 28 | % merchantability, fitness for a particular purpose, or noninfringement. 29 | % You use this style file at your own risk. Standard disclaimers apply. 30 | % 31 | % Do not use this file unless you are an experienced LaTeX user. To 32 | % satisfy AAAI's requirements, you must change your paper's configuration 33 | % to use Times fonts. AAAI will not accept your paper if it is formatted 34 | % using obsolete type 3 Computer Modern bitmapped fonts. Please ensure 35 | % that your version of dvips maps to type 1 fonts. Place this document in 36 | % a file called aaai.sty in the TeX search path. (Placing it in the same 37 | % directory as the paper should also work.) 38 | % 39 | % You must also format your paper for US letter-sized paper. 40 | % 41 | % There are undoubtably bugs in this style. If you would like to submit 42 | % bug fixes, improvements, etc. please let us know. Please use the contact form 43 | % at www.aaai.org. 44 | % 45 | % \documentclass[letterpaper]{article} 46 | % \usepackage{aaai} 47 | % \usepackage{times} 48 | % \usepackage{helvet} 49 | % \usepackage{courier} 50 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 51 | % PDFMARK for TeX and GhostScript 52 | % Uncomment and complete the following for metadata if 53 | % your paper is typeset using TeX and GhostScript (e.g 54 | % if you use .ps or .eps files in your paper): 55 | % \special{! /pdfmark where 56 | % {pop} {userdict /pdfmark /cleartomark load put} ifelse 57 | % [ /Author (John Doe, Jane Doe) 58 | % /Title (Input Your Paper Title Here) 59 | % /Subject (Input the Proceedings Title Here) 60 | % /Keywords (AAAI, artificial intelligence) 61 | % /DOCINFO pdfmark} 62 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 63 | % PDFINFO for PDFTeX 64 | % Uncomment and complete the following for metadata if 65 | % your paper is typeset using PDFTeX 66 | % \pdfinfo{ 67 | % /Title (Input Your Paper Title Here) 68 | % /Subject (Input the Proceedings Title Here) 69 | % /Author (John Doe, Jane Doe) 70 | % } 71 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 72 | % Uncomment if you want to use section numbers 73 | % and change the 0 to a 1 or 2 74 | % \setcounter{secnumdepth}{0} 75 | %%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 76 | % \title{Title} 77 | % \author{Author 1 \and Author 2 \\ Address line \\ Address line \And 78 | % Author 3 \\ Address line \\ Address line} 79 | % \begin{document} 80 | % \maketitle 81 | % ... 82 | % \bibliography{Bibliography-File} 83 | % \bibliographystyle{aaai} 84 | % \end{document} 85 | % \pubnote{\em To appear, AAAI-10} % optional, remove for submission 86 | % 87 | % \pubnote is for printing the paper yourself, and should not be used in 88 | % submitted versions!!!! 89 | % Author information can be set in various styles: 90 | % For several authors from the same institution: 91 | % \author{Author 1 \and ... \and Author n \\ 92 | % Address line \\ ... \\ Address line} 93 | % if the names do not fit well on one line use 94 | % \author{Author 1 \\ {\bf Author 2} \\ ... \\ {\bf Author n} \\ 95 | % Address line \\ ... \\ Address line} 96 | % For authors from different institutions: 97 | % \author{Author 1 \\ Address line \\ ... \\ Address line 98 | % \And ... \And 99 | % Author n \\ Address line \\ ... \\ Address line} 100 | % To start a separate ``row'' of authors use \AND, as in 101 | % \author{Author 1 \\ Address line \\ ... \\ Address line 102 | % \AND 103 | % Author 2 \\ Address line \\ ... \\ Address line \And 104 | % Author 3 \\ Address line \\ ... \\ Address line} 105 | % If the title and author information does not fit in the area allocated, 106 | % place \setlength\titlebox{height} 107 | % after the \documentstyle line 108 | % where {height} is something like 2.5in 109 | % PHYSICAL PAGE LAYOUT 110 | \setlength\topmargin{-0.25in} \setlength\oddsidemargin{-0.25in} 111 | \setlength\textheight{9.0in} \setlength\textwidth{7.0in} 112 | \setlength\columnsep{0.375in} \newlength\titlebox \setlength\titlebox{2.25in} 113 | \setlength\headheight{0pt} \setlength\headsep{0pt} 114 | %\setlength\footheight{0pt} \setlength\footskip{0pt} 115 | \thispagestyle{empty} \pagestyle{empty} 116 | \flushbottom \twocolumn \sloppy 117 | % We're never going to need a table of contents, so just flush it to 118 | % save space --- suggested by drstrip@sandia-2 119 | \def\addcontentsline#1#2#3{} 120 | % gf: PRINT COPYRIGHT NOTICE 121 | %\def\copyright@year{\number\year} 122 | %\def\copyright@text{Copyright \copyright\space \copyright@year, 123 | %Association for the Advancement of Artificial Intelligence (www.aaai.org). 124 | %All rights reserved.} 125 | %\def\copyright@on{T} 126 | %\def\nocopyright{\gdef\copyright@on{}} 127 | %\def\copyrighttext#1{\gdef\copyright@on{T}\gdef\copyright@text{#1}} 128 | %\def\copyrightyear#1{\gdef\copyright@on{T}\gdef\copyright@year{#1}} 129 | % gf: End changes for copyright notice (used in \maketitle, below) 130 | % Title stuff, taken from deproc. 131 | \def\maketitle{\par 132 | \begingroup % to make the footnote style local to the title 133 | \def\thefootnote{\fnsymbol{footnote}} 134 | % gf: Don't see why we'd want the footnotemark to be 0pt wide 135 | %\def\@makefnmark{\hbox to 0pt{$^{\@thefnmark}$\hss}} 136 | \twocolumn[\@maketitle] \@thanks 137 | \endgroup 138 | % gf: Insert copyright slug unless turned off 139 | %\if T\copyright@on\insert\footins{\noindent\footnotesize\copyright@text}\fi 140 | % gf: And now back to your regular programming 141 | \setcounter{footnote}{0} 142 | \let\maketitle\relax \let\@maketitle\relax 143 | \gdef\@thanks{}\gdef\@author{}\gdef\@title{}\let\thanks\relax} 144 | \def\@maketitle{\vbox to \titlebox{\hsize\textwidth 145 | %%% AAAI changed: 03/05/2010 146 | %%\linewidth\hsize \vskip 0.625in minus 0.125in \centering 147 | \linewidth\hsize \vskip 0.625in minus 0.125in \centering 148 | %%% END changed 149 | {\LARGE\bf \@title \par} \vskip 0.2in plus 1fil minus 0.1in 150 | {\def\and{\unskip\enspace{\rm and}\enspace}% 151 | \def\And{\end{tabular}\hss \egroup \hskip 1in plus 2fil 152 | \hbox to 0pt\bgroup\hss \begin{tabular}[t]{c}\Large\bf}% 153 | \def\AND{\end{tabular}\hss\egroup \hfil\hfil\egroup 154 | \vskip 0.25in plus 1fil minus 0.125in 155 | % hg: Changed Large to normalsize on next line 156 | \hbox to \linewidth\bgroup\normalsize \hfil\hfil 157 | \hbox to 0pt\bgroup\hss \begin{tabular}[t]{c}\Large\bf} 158 | \hbox to \linewidth\bgroup\normalsize \hfil\hfil 159 | \hbox to 0pt\bgroup\hss \begin{tabular}[t]{c}\Large\bf\@author 160 | \end{tabular}\hss\egroup 161 | \hfil\hfil\egroup} 162 | \vskip 0.3in plus 2fil minus 0.1in 163 | }} 164 | \renewenvironment{abstract}{\centerline{\bf 165 | Abstract}\vspace{0.5ex}\begin{quote}\small}{\par\end{quote}\vskip 1ex} 166 | % jsp added: 167 | \def\pubnote#1{\thispagestyle{myheadings} 168 | \pagestyle{myheadings} 169 | \markboth{#1}{#1} 170 | \setlength\headheight{10pt} \setlength\headsep{10pt} 171 | } 172 | % SECTIONS with less space 173 | \def\section{\@startsection {section}{1}{\z@}{-2.0ex plus 174 | -0.5ex minus -.2ex}{3pt plus 2pt minus 1pt}{\Large\bf\centering}} 175 | \def\subsection{\@startsection{subsection}{2}{\z@}{-2.0ex plus 176 | -0.5ex minus -.2ex}{3pt plus 2pt minus 1pt}{\large\bf\raggedright}} 177 | \def\subsubsection{\@startsection{subparagraph}{3}{\z@}{-6pt plus 178 | %%% DIEGO changed: 29/11/2009 179 | %% 2pt minus 1pt}{-1em}{\normalsize\bf}} 180 | -2pt minus -1pt}{-1em}{\normalsize\bf}} 181 | %%% END changed 182 | \setcounter{secnumdepth}{0} 183 | % add period to section (but not subsection) numbers, reduce space after 184 | %\renewcommand{\thesection} 185 | % {\arabic{section}.\hskip-0.6em} 186 | %\renewcommand{\thesubsection} 187 | % {\arabic{section}.\arabic{subsection}\hskip-0.6em} 188 | % FOOTNOTES 189 | \footnotesep 6.65pt % 190 | \skip\footins 9pt plus 4pt minus 2pt 191 | \def\footnoterule{\kern-3pt \hrule width 5pc \kern 2.6pt } 192 | \setcounter{footnote}{0} 193 | % LISTS AND PARAGRAPHS 194 | \parindent 10pt 195 | \topsep 4pt plus 1pt minus 2pt 196 | \partopsep 1pt plus 0.5pt minus 0.5pt 197 | \itemsep 2pt plus 1pt minus 0.5pt 198 | \parsep 2pt plus 1pt minus 0.5pt 199 | \leftmargin 10pt \leftmargini\leftmargin \leftmarginii 10pt 200 | \leftmarginiii 5pt \leftmarginiv 5pt \leftmarginv 5pt \leftmarginvi 5pt 201 | \labelwidth\leftmargini\advance\labelwidth-\labelsep \labelsep 5pt 202 | \def\@listi{\leftmargin\leftmargini} 203 | \def\@listii{\leftmargin\leftmarginii 204 | \labelwidth\leftmarginii\advance\labelwidth-\labelsep 205 | \topsep 2pt plus 1pt minus 0.5pt 206 | \parsep 1pt plus 0.5pt minus 0.5pt 207 | \itemsep \parsep} 208 | \def\@listiii{\leftmargin\leftmarginiii 209 | \labelwidth\leftmarginiii\advance\labelwidth-\labelsep 210 | \topsep 1pt plus 0.5pt minus 0.5pt 211 | \parsep \z@ \partopsep 0.5pt plus 0pt minus 0.5pt 212 | \itemsep \topsep} 213 | \def\@listiv{\leftmargin\leftmarginiv 214 | \labelwidth\leftmarginiv\advance\labelwidth-\labelsep} 215 | \def\@listv{\leftmargin\leftmarginv 216 | \labelwidth\leftmarginv\advance\labelwidth-\labelsep} 217 | \def\@listvi{\leftmargin\leftmarginvi 218 | \labelwidth\leftmarginvi\advance\labelwidth-\labelsep} 219 | \abovedisplayskip 7pt plus2pt minus5pt% 220 | \belowdisplayskip \abovedisplayskip 221 | \abovedisplayshortskip 0pt plus3pt% 222 | \belowdisplayshortskip 4pt plus3pt minus3pt% 223 | % Less leading in most fonts (due to the narrow columns) 224 | % The choices were between 1-pt and 1.5-pt leading 225 | \def\normalsize{\@setfontsize\normalsize\@xpt{11}} % 10 point on 11 226 | \def\small{\@setfontsize\small\@ixpt{10}} % 9 point on 10 227 | \def\footnotesize{\@setfontsize\footnotesize\@ixpt{10}} % 9 point on 10 228 | \def\scriptsize{\@setfontsize\scriptsize\@viipt{10}} % 7 point on 8 229 | \def\tiny{\@setfontsize\tiny\@vipt{7}} % 6 point on 7 230 | \def\large{\@setfontsize\large\@xipt{12}} % 11 point on 12 231 | \def\Large{\@setfontsize\Large\@xiipt{14}} % 12 point on 14 232 | \def\LARGE{\@setfontsize\LARGE\@xivpt{16}} % 14 point on 16 233 | \def\huge{\@setfontsize\huge\@xviipt{20}} % 17 point on 20 234 | \def\Huge{\@setfontsize\Huge\@xxpt{23}} % 20 point on 23 235 | %%%% named style for aaai, included here for ease of use 236 | % This section implements citations for the ``named'' bibliography style, 237 | % modified for AAAI use. 238 | % This file can be modified and used in other conferences as long 239 | % as credit to the authors and supporting agencies is retained, this notice 240 | % is not changed, and further modification or reuse is not restricted. 241 | % The ``named'' bibliography style creates citations with labels like 242 | % \citeauthoryear{author-info}{year} 243 | % these labels are processed by the following commands: 244 | % \cite{keylist} 245 | % which produces citations with both author and year, 246 | % enclosed in square brackets 247 | % \shortcite{keylist} 248 | % which produces citations with year only, 249 | % enclosed in square brackets 250 | % \citeauthor{key} 251 | % which produces the author information only 252 | % \citeyear{key} 253 | % which produces the year information only 254 | \def\leftcite{(}\def\rightcite{)} 255 | \def\cite{\def\citeauthoryear##1##2{\def\@thisauthor{##1}% 256 | \ifx \@lastauthor \@thisauthor \relax \else##1 \fi ##2}\@icite} 257 | \def\shortcite{\def\citeauthoryear##1##2{##2}\@icite} 258 | \def\citeauthor{\def\citeauthoryear##1##2{##1}\@nbcite} 259 | \def\citeyear{\def\citeauthoryear##1##2{##2}\@nbcite} 260 | % internal macro for citations with () and with breaks between citations 261 | % used in \cite and \shortcite 262 | \def\@icite{\leavevmode\def\@citeseppen{-1000}% 263 | \def\@cite##1##2{\leftcite\nobreak\hskip 0in{##1\if@tempswa , ##2\fi}\rightcite}% 264 | \@ifnextchar [{\@tempswatrue\@citex}{\@tempswafalse\@citex[]}} 265 | % internal macro for citations without [] and with no breaks 266 | % used in \citeauthor and \citeyear 267 | \def\@nbcite{\leavevmode\def\@citeseppen{1000}% 268 | \def\@cite##1##2{{##1\if@tempswa , ##2\fi}}% 269 | \@ifnextchar [{\@tempswatrue\@citex}{\@tempswafalse\@citex[]}} 270 | % don't box citations, separate with ; and a space 271 | % also, make the penalty between citations a parameter, 272 | % it may be a good place to break 273 | \def\@citex[#1]#2{% 274 | \def\@lastauthor{}\def\@citea{}% 275 | \@cite{\@for\@citeb:=#2\do 276 | {\@citea\def\@citea{;\penalty\@citeseppen\ }% 277 | \if@filesw\immediate\write\@auxout{\string\citation{\@citeb}}\fi 278 | \@ifundefined{b@\@citeb}{\def\@thisauthor{}{\bf ?}\@warning 279 | {Citation `\@citeb' on page \thepage \space undefined}}% 280 | {\csname b@\@citeb\endcsname}\let\@lastauthor\@thisauthor}}{#1}} 281 | %Ignore the key when generating the Reference section. 282 | \def\@lbibitem[#1]#2{\item\if@filesw 283 | { \def\protect##1{\string ##1\space}\immediate 284 | \write\@auxout{\string\bibcite{#2}{#1}}}\fi\ignorespaces} 285 | \def\thebibliography#1{\section*{References\@mkboth 286 | {REFERENCES}{REFERENCES}}\list 287 | {}{\labelwidth 0in\leftmargin\labelwidth 288 | %%% DIEGO removed 289 | %%\advance\leftmargin\labelsep 290 | %%% END removed 291 | %%% DIEGO changed 292 | \itemsep .01in % original 293 | %%\itemsep -.0125in % reduced space between bib entries 294 | %%% END changed 295 | } 296 | \def\newblock{\hskip .11em plus .33em minus .07em} 297 | \sloppy\clubpenalty4000\widowpenalty4000 298 | \sfcode`\.=1000\relax} 299 | \let\endthebibliography=\endlist 300 | -------------------------------------------------------------------------------- /papers/iccc19/make.sh: -------------------------------------------------------------------------------- 1 | # NOTES: brew cask install mactex first 2 | rm *.aux 3 | pdflatex spacesheet 4 | bibtex iccc 5 | bibtex spacesheet 6 | pdflatex spacesheet 7 | pdflatex spacesheet 8 | -------------------------------------------------------------------------------- /papers/iccc19/spacesheet.bib: -------------------------------------------------------------------------------- 1 | @article{white16, 2 | author = {Tom White}, 3 | title = {Sampling Generative Networks}, 4 | journal = {CoRR}, 5 | volume = {abs/1609.04468}, 6 | year = {2016}, 7 | url = {http://arxiv.org/abs/1609.04468}, 8 | timestamp = {Mon, 03 Oct 2016 17:51:10 +0200}, 9 | biburl = {http://dblp.uni-trier.de/rec/bib/journals/corr/White16a}, 10 | bibsource = {dblp computer science bibliography, http://dblp.org} 11 | } 12 | 13 | @techreport{openai1, 14 | AUTHOR = {Andrej Karpathy And Pieter Abbeel And Greg Brockman And Peter Chen And Vicki Cheung And Rocky Duan And Ian Goodfellow And Durk Kingma And Jonathan Ho And Rein Houthooft And Tim Salimans And John Schulman And Ilya Sutskever And Wojciech Zaremba. 15 | }, 16 | TITLE = {Generative Models}, 17 | YEAR = {2016}, 18 | INSTITUTION = {OpenAI}, 19 | NUMBER = {1}, 20 | TYPE = {Technical Report}, 21 | url = {https://openai.com/blog/generative-models/} 22 | } 23 | 24 | @article{word2vec, 25 | author = {Tomas Mikolov and 26 | Kai Chen and 27 | Greg Corrado and 28 | Jeffrey Dean}, 29 | title = {Efficient Estimation of Word Representations in Vector Space}, 30 | journal = {CoRR}, 31 | volume = {abs/1301.3781}, 32 | year = {2013}, 33 | url = {http://arxiv.org/abs/1301.3781}, 34 | timestamp = {Thu, 07 May 2015 20:02:01 +0200}, 35 | biburl = {http://dblp.uni-trier.de/rec/bib/journals/corr/abs-1301-3781}, 36 | bibsource = {dblp computer science bibliography, http://dblp.org} 37 | } 38 | 39 | @article{kingma13, 40 | author = {Diederik P. Kingma and 41 | Max Welling}, 42 | title = {Auto-Encoding Variational Bayes}, 43 | journal = {CoRR}, 44 | volume = {abs/1312.6114}, 45 | year = {2013}, 46 | url = {http://arxiv.org/abs/1312.6114}, 47 | timestamp = {Mon, 06 Jan 2014 15:10:41 +0100}, 48 | biburl = {http://dblp.uni-trier.de/rec/bib/journals/corr/KingmaW13}, 49 | bibsource = {dblp computer science bibliography, http://dblp.org} 50 | } 51 | 52 | @inproceedings{goodfellow14, 53 | author = {Ian J. Goodfellow and 54 | Jean Pouget{-}Abadie and 55 | Mehdi Mirza and 56 | Bing Xu and 57 | David Warde{-}Farley and 58 | Sherjil Ozair and 59 | Aaron C. Courville and 60 | Yoshua Bengio}, 61 | title = {Generative Adversarial Nets}, 62 | booktitle = {Advances in Neural Information Processing Systems 27: Annual Conference 63 | on Neural Information Processing Systems 2014, December 8-13 2014, 64 | Montreal, Quebec, Canada}, 65 | pages = {2672--2680}, 66 | year = {2014}, 67 | url = {http://papers.nips.cc/paper/5423-generative-adversarial-nets}, 68 | timestamp = {Wed, 10 Dec 2014 21:34:12 +0100}, 69 | biburl = {http://dblp.uni-trier.de/rec/bib/conf/nips/GoodfellowPMXWOCB14}, 70 | bibsource = {dblp computer science bibliography, http://dblp.org} 71 | } 72 | 73 | @article{larsen15, 74 | author = {Anders Boesen Lindbo Larsen and 75 | S{\o}ren Kaae S{\o}nderby and 76 | Ole Winther}, 77 | title = {Autoencoding beyond pixels using a learned similarity metric}, 78 | journal = {CoRR}, 79 | volume = {abs/1512.09300}, 80 | year = {2015}, 81 | url = {http://arxiv.org/abs/1512.09300}, 82 | timestamp = {Sat, 02 Jan 2016 11:38:49 +0100}, 83 | biburl = {http://dblp.uni-trier.de/rec/bib/journals/corr/LarsenSW15}, 84 | bibsource = {dblp computer science bibliography, http://dblp.org} 85 | } 86 | 87 | @article{dumoulin16, 88 | author = {{Dumoulin}, V. and {Belghazi}, I. and {Poole}, B. and {Mastropietro}, O. and 89 | {Lamb}, A. and {Arjovsky}, M. and {Courville}, A.}, 90 | title = "{Adversarially Learned Inference}", 91 | journal = {ArXiv e-prints}, 92 | archivePrefix = "arXiv", 93 | eprint = {1606.00704}, 94 | primaryClass = "stat.ML", 95 | keywords = {Statistics - Machine Learning, Computer Science - Learning}, 96 | year = 2016, 97 | month = jun, 98 | adsurl = {http://adsabs.harvard.edu/abs/2016arXiv160600704D}, 99 | adsnote = {Provided by the SAO/NASA Astrophysics Data System} 100 | } 101 | 102 | @inproceedings{gardenfors11, 103 | author = {Peter G{\"{a}}rdenfors}, 104 | title = {Semantics Based on Conceptual Spaces}, 105 | booktitle = {Logic and Its Applications - 4th Indian Conference, {ICLA} 2011, Delhi, 106 | India, January 5-11, 2011. Proceedings}, 107 | pages = {1--11}, 108 | year = {2011}, 109 | url = {http://dx.doi.org/10.1007/978-3-642-18026-2_1}, 110 | doi = {10.1007/978-3-642-18026-2_1}, 111 | timestamp = {Thu, 23 Dec 2010 12:21:01 +0100}, 112 | biburl = {http://dblp.uni-trier.de/rec/bib/conf/icla/Gardenfors11}, 113 | bibsource = {dblp computer science bibliography, http://dblp.org} 114 | } 115 | 116 | @article{lamb16, 117 | author = {{Lamb}, A. and {Dumoulin}, V. and {Courville}, A.}, 118 | title = "{Discriminative Regularization for Generative Models}", 119 | journal = {ArXiv e-prints}, 120 | archivePrefix = "arXiv", 121 | eprint = {1602.03220}, 122 | primaryClass = "stat.ML", 123 | keywords = {Statistics - Machine Learning, Computer Science - Learning}, 124 | year = 2016, 125 | month = feb, 126 | adsurl = {http://adsabs.harvard.edu/abs/2016arXiv160203220L}, 127 | adsnote = {Provided by the SAO/NASA Astrophysics Data System} 128 | } 129 | 130 | @article{simon95, 131 | author = {Simon, H.}, 132 | title = "{Problem Forming, Problem Finding, and Problem Solving in Design}", 133 | booktitle = {Design and systems; General applications of methodology}, 134 | pages = {245--257}, 135 | year = {1995} 136 | } 137 | 138 | @article{schon84, 139 | author = {Schon, D.}, 140 | title = {The Reflective Practitioner: How Professionals Think In Action}, 141 | year = {1984} 142 | } 143 | 144 | @article{resnick05, 145 | author = {{Resnick}, M. and {Myers}, B. and {Nakakoji}, K. and {Shneiderman}, B. and {Pausch}, R. and {Selker}, T. and {Eisenberg}, M.}, 146 | title = {Design Principles for Tools to Support Creative Thinking}, 147 | year = {2005} 148 | } 149 | 150 | @article{terry02, 151 | author = {Terry, M. and Mynatt, E.}, 152 | title = {Recognizing Creative Needs in User Interface Design}, 153 | year = {2002}, 154 | pages={38-–44} 155 | url={http://dl.acm.org/citation.cfm?id=581718} 156 | } 157 | 158 | @article{simon95, 159 | author = {Simon, H.}, 160 | title = "{Problem Forming, Problem Finding, and Problem Solving in Design}", 161 | booktitle = {Design and systems; General applications of methodology}, 162 | pages = {245--257} 163 | year = {1995} 164 | } 165 | 166 | @article{bernhardsson15, 167 | author = {Bernhardsson, E.}, 168 | title = {deep-fonts: Generate fonts using deep learning.}, 169 | url = {https://github.com/erikbern/deep-fonts}, 170 | year = {2015} 171 | } 172 | 173 | @article{loh18, 174 | author = {Loh, B.}, 175 | title = {SpaceSheets: Design Experimentation in Latent Space}, 176 | year = {2018} 177 | } 178 | 179 | @article{brock18, 180 | author = {Andrew Brock and 181 | Jeff Donahue and 182 | Karen Simonyan}, 183 | title = {Large Scale {GAN} Training for High Fidelity Natural Image Synthesis}, 184 | journal = {CoRR}, 185 | volume = {abs/1809.11096}, 186 | year = {2018}, 187 | url = {http://arxiv.org/abs/1809.11096}, 188 | archivePrefix = {arXiv}, 189 | eprint = {1809.11096}, 190 | timestamp = {Fri, 05 Oct 2018 11:34:52 +0200}, 191 | biburl = {https://dblp.org/rec/bib/journals/corr/abs-1809-11096}, 192 | bibsource = {dblp computer science bibliography, https://dblp.org} 193 | } -------------------------------------------------------------------------------- /papers/iccc19/spacesheet.tex: -------------------------------------------------------------------------------- 1 | % This file is iccc.tex. It contains the formatting instructions for and acts as a template for submissions to ICCC. It borrows liberally from the AAAI and IJCAI formats and instructions. It uses the files iccc.sty, iccc.bst and iccc.bib, the first two of which also borrow liberally from the same sources. 2 | 3 | 4 | \documentclass[letterpaper]{article} 5 | \usepackage{iccc} 6 | 7 | \usepackage{graphicx} % figures 8 | \usepackage{float} 9 | 10 | \usepackage{times} 11 | \usepackage{helvet} 12 | \usepackage{courier} 13 | \pdfinfo{ 14 | /Title (SpaceSheet: Navigating Conceptual Space with a Spreadsheet Interface) 15 | /Subject (Proceedings of ICCC) 16 | /Author (ICCC)} 17 | % The file iccc.sty is the style file for ICCC proceedings. 18 | % 19 | \title{SpaceSheet: Navigating Conceptual Space with a Spreadsheet Interface} 20 | \author{ 21 | Tom White and Bryan Loh\\ 22 | School of Design\\University of Wellington\\Wellington, New Zealand \\ 23 | \texttt{\{tom.white@vuw.ac.nz, lohbrya@myvuw.ac.nz\}} \\ 24 | } 25 | \setcounter{secnumdepth}{0} 26 | 27 | \begin{document} 28 | \maketitle 29 | \begin{abstract} 30 | \begin{quote} 31 | We introduce a new spreadsheet based interface called SpaceSheets for creating novel images and other media. Unlike traditional digital tools, ours is parameterized entirely by a neural network with no preprogrammed rules or knowledge representations. The capability of SpaceSheets to support visual exploration and communication is demonstrated within the context of several domains including facial images, fonts, and english words. SpaceSheets is demonstrated to support the experimentation and exploration of latent spaces enabling more effective design experimentation. 32 | \end{quote} 33 | \end{abstract} 34 | 35 | \section{Introduction} 36 | 37 | Problem solving can be viewed as a search for a solution within a space. In design, this process involves generating solutions and evaluating their consequences relative to goals and constraints~\cite{simon95}. These experiments are enabled through representations in the form of drawings and diagrams. Computational design tools enable users to construct and manipulate representations digitally. These tools often impose a high cost to design experimentation due to the mismatch between low-level design operations in expressing more abstract design intent. 38 | 39 | Generative models learn more compact representations of the training data in a vector space of latent variables. Latent variables are sampled from high-dimensional latent space and can be decoded back into observable values. Additionally, semantic operations can be performed within latent space using vector arithmetic~\cite{white16}. 40 | 41 | Spreadsheet interfaces are a ubiquitous part of office productivity suites. They enable users to perform experimental calculations using a set of formulae which define relationships spatially. Automatic recalculation supports experimentation by enabling users to observe the results of their actions immediately and act accordingly. 42 | 43 | \begin{figure}[ht] 44 | \centering 45 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 46 | \includegraphics[width=8cm]{figs/01-hero-diagram.png} 47 | \caption{The SpaceSheet being used to perform an average between two latent variables} 48 | \end{figure} 49 | 50 | We developed SpaceSheet (Figure 1) to leverage the familiarity and power of spreadsheet interfaces for the purpose of design experimentation within latent space. It has been adapted to enable non-experts to explore and experiment within latent spaces. 51 | 52 | \section{Background} 53 | 54 | \subsection{Conceptual Spaces} 55 | 56 | Generative models are a popular approach to unsupervised machine learning. Generative neural network models are trained to produce data samples that resemble the training set ~\cite{openai1}. Because the number of model parameters is significantly smaller than the training data, the models are forced to discover efficient data representations. These models are sampled from a set of latent variables in a high-dimensional space, called a latent space. Latent space can be sampled to generate observable data values. Learned latent representations often also allow semantic operations with vector space arithmetic (Figure 2), a phenomenon discovered previously in the latent space of language models~\cite{word2vec}. 57 | 58 | \begin{figure}[ht] 59 | \centering 60 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 61 | \includegraphics[width=8cm]{figs/face_space.png} 62 | \caption{Schematic of the latent space of a generative model. In the general case, a generative model includes an encoder to map from the feature space (here images of faces) into a high-dimensional latent space. Vector space arithmetic can be used in the latent space to perform semantic operations. The model also includes a decoder to map from the latent space back into the feature space, where the semantic operations can be observed. If the latent space transformation is the identity function we refer to the encoding and decoding as a reconstruction of the input through the model. } 63 | \end{figure} 64 | 65 | Generative models are often applied to datasets of images. Two popular generative models for image data are the Variational Autoencoder~\cite{kingma13} (VAE) and the Generative Adversarial Network~\cite{goodfellow14} (GAN). VAEs use the framework of probabilistic graphical models with an objective of maximizing a lower bound on the likelihood of the data. GANs instead formalize the training process as a competition between a generative network and a separate discriminative network. Though these two frameworks are very different, both construct high-dimensional latent spaces that can be sampled to generate images resembling training set data. Moreover, these latent spaces are generally highly structured and can enable complex operations on the generated images by simple vector space arithmetic in the latent space~\cite{larsen15}. 66 | 67 | In the latent space of generative models, many high-level attributes can be represented as a vector (Figure 3). Using techniques from ~\cite{white16}, multiple attributes can be decoupled further to create a visualization of possible states across multiple semantic vectors (Figure 4). For example, when trained on a dataset of portraits, latent vectors can be computed for "smiling" and "mouth open" which then applied to new face images. 68 | 69 | \begin{figure}[ht] 70 | \centering 71 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 72 | \includegraphics[width=8cm]{figs/smilevector.png} 73 | \caption{Traversals along the smile vector using a GAN model from ~\cite{dumoulin16}} 74 | \end{figure} 75 | 76 | \begin{figure}[ht] 77 | \centering 78 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 79 | \includegraphics[width=8cm]{figs/decoupled.jpg} 80 | \caption{Decoupling attribute vectors for smiling (x-axis) and mouth open (y-axis) allows for more flexible latent space transformations. Input shown at left with reconstruction adjacent. Using a VAE model from ~\cite{lamb16}} 81 | \end{figure} 82 | 83 | Prior to the discovery of neural network latent spaces supporting semantic operations, cognitive science had hypothesized the existence of knowledge representations that were primarily geometric instead of symbolic. One primary proponent was G{\"{a}}rdenfors who proposed a framework of "Conceptual Spaces" as structured multi-dimensional feature spaces to support modeling information processes such as concept learning and prototype theory~\cite{gardenfors11}. Notably, conceptual spaces were proposed as a model of how people structure concepts, independent of any proposed computational implementation of how they might come about. 84 | 85 | We adapt the terminology and claim that latent spaces of generative neural networks function as conceptual spaces which can be used as non-symbolic knowledge representation layers in other tools. With this framework, we examine the ability of this representation layer built from the latent space of a generative neural network model to support a new type of spreadsheet interface tool. The tool itself is domain independent and is shown to be useful in several domains. In exploring these particular domains, our tool constructs subspaces of the larger conceptual space of possibilities as a parameter space of a spreadsheet driven exploration tool. 86 | 87 | \subsection{Supporting Design Experimentation} 88 | 89 | Design principles have been identified by ~\cite{resnick05} and ~\cite{terry02} 90 | for user interfaces to support design experimentation and exploration. 91 | 92 | These principles can be summarised by the three user interface requirements proposed in Design Principles for Tools to Support Creative Thinking~\cite{resnick05} (paraphrased): 93 | It must be very easy to try things out and then backtrack when unsuccessful. 94 | Tools should be ‘self-revealing’ in what they can achieve. 95 | Make it very fast to sketch out different alternatives 96 | 97 | These principles are supported by ~\cite{terry02} where they identify three activities in the process of reflection-in-action~\cite{schon84} that should be supported by user interfaces for design experimentation. They are: Near-Term Experimentation, Generating Variations, and Evaluation. 98 | 99 | Near-Term Experimentation is used to describe actions which intend to ``discover and instantiate the next move'' ~\cite[p. 39]{terry02}. In a user interface, users would make hypotheses about the next action to be made, and test their hypothesis by ``invoking a command and adjusting its settings to achieve the imagined effect''. The users would then ``either accept the command, tweak the parameters more, or undo it and try another tact'' ~\cite[p. 40]{terry02}. 100 | 101 | Variations are created by the designer to explore alternatives deeply. It enables them ``to better understand the problem, its boundaries, and potential solutions'' ~\cite[p. 40]{terry02}. An example of this is where designers make ``multiple variations of a specific component by creating them side-by-side on a large canvas ... and iterate on promising versions to arrive at an acceptable solution'' ~\cite[p. 40]{terry02}. 102 | 103 | Users need to evaluate their progress as they work on a task. This happens after near-term experiments, as well as after generating variations: ``the moment in which the individual reassesses the problem and their understanding of it, before making the next move'' ~\cite[p. 40]{terry02}. 104 | 105 | \subsection{Spreadsheet as a Design tool} 106 | 107 | Spreadsheets may seem like an unlikely design tool. However, the ability to express relationships between cells make it functionally suited to express operations in latent space. 108 | Additionally, it satisfies the three user requirements for software to support design experimentation — Near-Term Experimentation, Generating Variations, and Evaluation as proposed by ~\cite{terry02}. 109 | 110 | Near-term experimentation is supported by the automatic updating feature of the spreadsheet. Users are able to set up scenarios of logic and calculate the results to ‘what if’ questions instantly by modifying the cell values. This establishes a tight feedback loop between the user’s actions and its implications. When coupled with the ability to undo actions, it enables users to discover and instantiate moves, and backtrack if the results are unsatisfactory. 111 | 112 | The generation of variations is supported by enabling users to duplicate instances of data onto other cells within the document. These copies can then be modified independently from the original data. 113 | 114 | Evaluation is supported by enabling users flexibility in how they choose to organise data in the document. Users can set up custom templates in a layout which best supports their preferences and the problem to be solved. 115 | 116 | In addition to their promise in supporting design experimentation, spreadsheet software is well-established within office productivity suites. Users with an understanding of how conventional spreadsheets function are able to transfer their understanding to the use of the design tool. 117 | 118 | \section{SpaceSheet} 119 | 120 | SpaceSheet consists of a data picker exposing latent variables to operate with and a spreadsheet to define operations between the variables. In both, latent variables are decoded into observable images. 121 | 122 | \subsection{Data Picker} 123 | 124 | The data picker is a predetermined set of latent variables which have been organized into a grid. The set of variables in the data picker act as the points of reference from which the latent space can be explored from. Diversity has been prioritized in the selected set to maximize the variety of possible outcomes that can be explored. Multiple data pickers have also been implemented as tabs to provide various pre-baked distributions of latent variables. 125 | 126 | \subsection{Spreadsheet} 127 | 128 | The spreadsheet is the main workspace of the tool. It enables users to express relationships between cells using formulae. Operations between cells containing latent variables are computed with vector arithmetic, and its result is decoded into an image. Common operations can be defined by clicking on buttons at the top of the spreadsheet. These buttons are selection-aware, and highlight to suggest operations based on the selected cells. A live SpaceSheets demo is available online\footnote{https://vusd.github.io/spacesheet/} and the appendix contains a list of supported operations and sample workflows. 129 | 130 | \subsection{Applications} 131 | 132 | \begin{figure}[ht] 133 | \centering 134 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 135 | \includegraphics[width=6cm]{figs/02A-use-cases.png} 136 | \caption{SpaceSheet with Font Model} 137 | \end{figure} 138 | 139 | 140 | Initial efforts are focused on experimenting in various domains to encourage the development of a general-purpose model agnostic set of operations. A SpaceSheet to explore a generative model of fonts~\cite{bernhardsson15} has been implemented to be used as a design tool (Figure 5). User testing indicated that the tool enabled designers and non-designers alike to explore design variations easily~\cite{loh18}. 141 | 142 | \begin{figure}[ht] 143 | \centering 144 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 145 | \includegraphics[width=5cm]{figs/02B-use-cases.png} 146 | \caption{SpaceSheet with word2vec} 147 | \end{figure} 148 | 149 | 150 | The concepts have also been extended to domains other than images and with models that are not generative, such as the Word2Vec model~\cite{word2vec}. This version of the SpaceSheet can be used to find word analogies and perform interpolations using nearest neighbors (Figure 6). 151 | 152 | A SpaceSheet has been created to enable the exploration of the BigGAN model ~\cite{brock18}. In this implementation, the primary DataPicker for this implementation has been curated to enable users to experiment with a variety of image classes (Figure 7). 153 | 154 | \begin{figure}[ht] 155 | \centering 156 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 157 | \includegraphics[width=8cm]{figs/BigGAN-01.png} 158 | \caption{BigGAN SpaceSheet with a generic DataPicker across all image classes} 159 | \end{figure} 160 | 161 | Custom DataPickers of other classes, or combinations of other classes can be created using the DataPicker creator (Figure 8). The DataPicker creator enables users to a) explore and select one or more classes from a searchable, hierarchically organised tree checklist, b) control the amounts of each class to composite in the resulting class, and c) preview example reconstructions of the resulting class before creating a DataPicker of the resulting class. Once created, this new custom DataPicker will be available for use in the spreadsheet (Figure 9). 162 | 163 | \begin{figure}[ht] 164 | \centering 165 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 166 | \includegraphics[width=8cm]{figs/BigGAN-02.png} 167 | \caption{BigGAN SpaceSheet custom DataPicker interface} 168 | \end{figure} 169 | 170 | \begin{figure}[ht] 171 | \centering 172 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 173 | \includegraphics[width=8cm]{figs/BigGAN-03.png} 174 | \caption{BigGAN SpaceSheet with a custom DataPicker made from combining a user-provided ratio of the "Bubble", "Granny Smith", and "Velvet" image classes} 175 | \end{figure} 176 | 177 | \subsection{Evaluation} 178 | 179 | User testing of SpaceSheets on a model of fonts~\cite{loh18} revealed that the tool enabled a novel method to experiment with designs. Users explore design possibilities from a top-down approach by deriving meaning and navigating within a preconstructed model, rather than constructing a model from the bottom-up. 180 | 181 | This method of working was reported to be more supportive of design exploration, more efficient, and capable of enabling non-designers to explore design possibilities. Unsurprisingly, it required new skills and intuition to be used to its full effect. A lack of knowledge in deriving and applying attribute vectors from latent space limited users’ expressivity and control over their experiments. Due to this, interpolation was found to be the most intuitive and common method to arrive at search targets. 182 | 183 | Expressing low-level transformations such as positioning and scale through SpaceSheet often resulted in distorted reconstructions which did not match the expectations of the user. This is attributed to a mismatch in the high-level probabilism of sampling latent spaces is an ill-fit to express concrete design intent. However, this uncertainty has been reported to be serendipitous when distortions in the reconstruction added to the aesthetics of the design. 184 | 185 | \subsection{Discussion} 186 | 187 | SpaceSheets explores the potential of latent spaces to be used as a tool for design experimentation. The research finds it to enable a novel method to work with designs which supports more efficient, high-level design experimentation to designers and non-designers alike. 188 | 189 | User intuition and skill in deriving meaning from latent spaces is fundamental to conduct design experiments with a fine level of control. This intuition can be considered a skill which can be developed through continued experience with the flexible, low-level interface provided by the SpaceSheet. Although latent spaces enable designers to express more meaningful design operations computationally, it provides redundant uncertainty for low-level design operations. It is with this understanding that latent spaces are best considered as a complementary new primitive to build smarter design tools. 190 | 191 | \pagebreak 192 | 193 | \bibliographystyle{iccc} 194 | \bibliography{iccc,spacesheet} 195 | 196 | \onecolumn 197 | 198 | \pagebreak 199 | 200 | \normalsize 201 | 202 | % \vspace*{0.15\textheight} 203 | 204 | \section*{Appendix: Implementation Details} 205 | 206 | \section*{Supported Operations} 207 | 208 | \renewcommand{\arraystretch}{1.5} 209 | 210 | \begin{center} 211 | \begin{tabular}{ | l | p{6cm} | p{5.6cm} |} 212 | \hline \textbf{Operation} & \textbf{Description} & \textbf{Formula} \\ \hline 213 | Sum & Adds a list of numbers / variables & \texttt{SUM(val1, val2, val3, ...)} \\ \hline 214 | Minus & Subtracts two numbers / variables in sequence & \texttt{MINUS(val1, val2)} \\ \hline 215 | Multiply & Multiplies a list of numbers / variables & \texttt{MUL(val1, val2, val3, ...)} \\ \hline 216 | Linear Interpolation & Calculates the value in between two numbers / vectors at a specified amount & \texttt{LERP(from, to, amount)} \\ \hline 217 | Average & Calculates the average of a list of numbers / vectors & \texttt{AVERAGE(val1, val2, val3, ...)} \\ \hline 218 | Distance & Calculates the euclidean distance between two numbers / vectors & \texttt{DIST(val1, val2)} \\ \hline 219 | Modulate & Creates a scrubbing interface which can modulate a cell & \texttt{MOD(cell, degree, radius)} \\ \hline 220 | Random Variable & Creates a random latent variable & \texttt{RANDVAR(seed)} \\ \hline 221 | Slider & Creates a number which is controlled by a slider element & \texttt{SLIDER(min, max[, step])} \\ \hline 222 | \end{tabular} 223 | \end{center} 224 | 225 | 226 | \section*{Interactive Cell Types} 227 | 228 | \begin{figure}[ht!] 229 | \centering 230 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 231 | \includegraphics[width=12cm]{figs/03-cell-types.jpg} 232 | \caption{RANDVAR, MOD and SLIDER cells.} 233 | \end{figure} 234 | 235 | Several alternative cell types have been implemented to create interface elements which support more effective search and exploration. These are instantiated by the operations: 236 | 237 | \begin{verbatim} 238 | RANDVAR(seed) 239 | \end{verbatim} 240 | The RANDVAR (random variable) cell instantiates a latent variable from a random seed. This enables users to operate using latent variables beyond the limited set afforded by the Data Picker. A button displays when the cell is hovered over which enables users to randomise the cell directly. 241 | 242 | \begin{verbatim} 243 | MOD(base, degree, distance) 244 | \end{verbatim} 245 | The MOD (modulate) cell exposes a joystick interface which enables users to scrub locally around a given latent variable to arrive at similar latent variables. The degree of difference can be controlled by the joystick’s distance from the center of the cell. 246 | 247 | \begin{verbatim} 248 | SLIDER(min, max [,step]) 249 | \end{verbatim} 250 | The slider cell enables users to create a number controlled by a slider element. 251 | 252 | \newpage 253 | \section*{Example Workflows} 254 | 255 | % turn off subsection numbering 256 | \setcounter{secnumdepth}{0} 257 | 258 | \subsection{Interpolation} 259 | \begin{figure}[ht!] 260 | \centering 261 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 262 | \includegraphics[width=7.5cm]{figs/04-interpolation-strip.jpg} 263 | \caption{An interpolation between two latent variables} 264 | \end{figure} 265 | 266 | \subsection{Interpolation Strip - Slider Control} 267 | \begin{figure}[ht!] 268 | \centering 269 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 270 | \includegraphics[width=6cm]{figs/05-interpolation-by-slider.jpg} 271 | \caption{An interpolation between two latent variables controlled using a slider cell} 272 | \end{figure} 273 | 274 | \subsection{Interpolation Grid - Four Corners} 275 | \begin{figure}[ht!] 276 | \centering 277 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 278 | \includegraphics[width=7.5cm]{figs/06-interpolation-grid.jpg} 279 | \caption{An interpolation between four latent variables} 280 | \end{figure} 281 | 282 | \newpage 283 | \subsection{Analogy} 284 | \begin{figure}[ht!] 285 | \centering 286 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 287 | \includegraphics[width=5.5cm]{figs/07-analogy.jpg} 288 | \caption{An analogical construction. The bottom right cell applies the difference between the top cells to the cell on the bottom-left} 289 | \end{figure} 290 | 291 | Given three reconstructions (top-left, top-right, bottom-left), the SpaceSheet calculates the bottom-right corner by analogy. This is achieved by applying the difference between the top variables to the bottom-left variable. In this example, a toothy grin has been applied to the man. 292 | 293 | \subsection{Extrapolation} 294 | \begin{figure}[ht!] 295 | \centering 296 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 297 | \includegraphics[width=8cm]{figs/08-extrapolation.jpg} 298 | \caption{Extrapolating from two points.} 299 | \end{figure} 300 | 301 | Extrapolating from latent variables can be used to emphasise attributes which vary between its anchors. In this example, the difference between the highlighted anchors - blond hair, large smile, etc. - have been emphasised by extrapolating beyond the end anchor. 302 | 303 | \subsection{Averaging} 304 | \begin{figure}[ht!] 305 | \centering 306 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 307 | \includegraphics[width=5.5cm]{figs/10-averaging.jpg} 308 | \caption{Calculating the average reconstruction of a group of latent variables} 309 | \end{figure} 310 | 311 | \newpage 312 | \subsection{Attribute Vectors} 313 | \begin{figure}[ht!] 314 | \centering 315 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 316 | \includegraphics[width=12cm]{figs/09-attribute-vectors.jpg} 317 | \caption{ Isolating a ‘blonde’ vector by subtraction (left). Adding the attribute vector to a new latent variable (right)} 318 | \end{figure} 319 | 320 | Specific attributes can be applied as operations to latent variables. Attribute vectors can be isolated by subtracting a latent vector with desired attributes with one without the attributes. This attribute vector can be added to another latent variable to apply the isolated attribute. The example image shows this two-step process. In the first, a ‘blonde’ attribute vector has been isolated by computing the difference between the highlighted cells. This vector is then applied in the right image by addition. The result is a more blonde version of the initial latent variable. 321 | 322 | \subsection{Random Neighbors} 323 | \begin{figure}[ht!] 324 | \centering 325 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 326 | \includegraphics[width=12cm]{figs/11-nearest-neighbours.jpg} 327 | \caption{A random sampling around the selected cell} 328 | \end{figure} 329 | 330 | A random sampling of neighbouring variables can be created using the MOD operation. In the image, the selected cell formed the base from which MOD cells are created. 331 | 332 | 333 | 334 | \end{document} 335 | -------------------------------------------------------------------------------- /papers/iccc19/spacesheet_final2.tex: -------------------------------------------------------------------------------- 1 | % This file is iccc.tex. It contains the formatting instructions for and acts as a template for submissions to ICCC. It borrows liberally from the AAAI and IJCAI formats and instructions. It uses the files iccc.sty, iccc.bst and iccc.bib, the first two of which also borrow liberally from the same sources. 2 | 3 | 4 | \documentclass[letterpaper]{article} 5 | \usepackage{iccc} 6 | 7 | \usepackage{graphicx} % figures 8 | \usepackage{float} 9 | 10 | \usepackage{times} 11 | \usepackage{helvet} 12 | \usepackage{courier} 13 | \pdfinfo{ 14 | /Title (SpaceSheet: Navigating Conceptual Space with a Spreadsheet Interface) 15 | /Subject (Proceedings of ICCC) 16 | /Author (ICCC)} 17 | % The file iccc.sty is the style file for ICCC proceedings. 18 | % 19 | \title{SpaceSheet: Navigating Conceptual Space with a Spreadsheet Interface} 20 | \author{ 21 | Tom White and Bryan Loh\\ 22 | School of Design\\Victoria University of Wellington\\Wellington, New Zealand \\ 23 | \texttt{\{tom.white@vuw.ac.nz, lohbrya@myvuw.ac.nz\}} \\ 24 | } 25 | \setcounter{secnumdepth}{0} 26 | 27 | \begin{document} 28 | \maketitle 29 | \begin{abstract} 30 | \begin{quote} 31 | We introduce a new spreadsheet based interface called SpaceSheets for creating novel images and other media. Unlike traditional digital tools, ours is parameterized entirely by a neural network with no preprogrammed rules or knowledge representations. The capability of SpaceSheets to support visual exploration and communication is demonstrated within the context of several domains including facial images, fonts, and english words. SpaceSheets is demonstrated to support the experimentation and exploration of latent spaces enabling more effective design experimentation. 32 | \end{quote} 33 | \end{abstract} 34 | 35 | \section{Introduction} 36 | 37 | Problem solving can be viewed as a search for a solution within a space. In design, this process involves generating solutions and evaluating their consequences relative to goals and constraints~\cite{simon95}. These experiments are enabled through representations in the form of drawings and diagrams. Computational design tools enable users to construct and manipulate representations digitally. These tools often impose a high cost to design experimentation due to the mismatch between low-level design operations in expressing more abstract design intent. 38 | 39 | Generative models learn more compact representations of the training data in a vector space of latent variables. Latent variables are sampled from high-dimensional latent space and can be decoded back into observable values. Additionally, semantic operations can be performed within latent space using vector arithmetic~\cite{white16}. 40 | 41 | Spreadsheet interfaces are a ubiquitous part of office productivity suites. They enable users to perform experimental calculations using a set of formulae which define relationships spatially. Automatic recalculation supports experimentation by enabling users to observe the results of their actions immediately and act accordingly. 42 | 43 | \begin{figure}[ht] 44 | \centering 45 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 46 | \includegraphics[width=8cm]{figs/01-hero-diagram.png} 47 | \caption{The SpaceSheet being used to perform an average between two latent variables} 48 | \end{figure} 49 | 50 | We developed SpaceSheet (Figure 1) to leverage the familiarity and power of spreadsheet interfaces for the purpose of design experimentation within latent space. It has been adapted to enable non-experts to explore and experiment within latent spaces. 51 | 52 | \section{Background} 53 | 54 | \subsection{Conceptual Spaces} 55 | 56 | Generative models are a popular approach to unsupervised machine learning. Generative neural network models are trained to produce data samples that resemble the training set ~\cite{openai1}. Because the number of model parameters is significantly smaller than the training data, the models are forced to discover efficient data representations. These models are sampled from a set of latent variables in a high-dimensional space, called a latent space. Latent space can be sampled to generate observable data values. Learned latent representations often also allow semantic operations with vector space arithmetic (Figure 2), a phenomenon discovered previously in the latent space of language models~\cite{word2vec}. 57 | 58 | \begin{figure}[ht] 59 | \centering 60 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 61 | \includegraphics[width=8cm]{figs/face_space.png} 62 | \caption{Schematic of the latent space of a generative model. In the general case, a generative model includes an encoder to map from the feature space (here images of faces) into a high-dimensional latent space. Vector space arithmetic can be used in the latent space to perform semantic operations. The model also includes a decoder to map from the latent space back into the feature space, where the semantic operations can be observed. If the latent space transformation is the identity function we refer to the encoding and decoding as a reconstruction of the input through the model. } 63 | \end{figure} 64 | 65 | Generative models are often applied to datasets of images. Two popular generative models for image data are the Variational Autoencoder~\cite{kingma13} (VAE) and the Generative Adversarial Network~\cite{goodfellow14} (GAN). VAEs use the framework of probabilistic graphical models with an objective of maximizing a lower bound on the likelihood of the data. GANs instead formalize the training process as a competition between a generative network and a separate discriminative network. Though these two frameworks are very different, both construct high-dimensional latent spaces that can be sampled to generate images resembling training set data. Moreover, these latent spaces are generally highly structured and can enable complex operations on the generated images by simple vector space arithmetic in the latent space~\cite{larsen15}. 66 | 67 | In the latent space of generative models, many high-level attributes can be represented as a vector (Figure 3). Using techniques from ~\cite{white16}, multiple attributes can be decoupled further to create a visualization of possible states across multiple semantic vectors (Figure 4). For example, when trained on a dataset of portraits, latent vectors can be computed for "smiling" and "mouth open" which then applied to new face images. 68 | 69 | \begin{figure}[ht] 70 | \centering 71 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 72 | \includegraphics[width=8cm]{figs/smilevector.png} 73 | \caption{Traversals along the smile vector using a GAN model from ~\cite{dumoulin16}} 74 | \end{figure} 75 | 76 | \begin{figure}[ht] 77 | \centering 78 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 79 | \includegraphics[width=8cm]{figs/decoupled.jpg} 80 | \caption{Decoupling attribute vectors for smiling (x-axis) and mouth open (y-axis) allows for more flexible latent space transformations. Input shown at left with reconstruction adjacent. Using a VAE model from ~\cite{lamb16}} 81 | \end{figure} 82 | 83 | Prior to the discovery of neural network latent spaces supporting semantic operations, cognitive science had hypothesized the existence of knowledge representations that were primarily geometric instead of symbolic. One primary proponent was G{\"{a}}rdenfors who proposed a framework of "Conceptual Spaces" as structured multi-dimensional feature spaces to support modeling information processes such as concept learning and prototype theory~\cite{gardenfors11}. Notably, conceptual spaces were proposed as a model of how people structure concepts, independent of any proposed computational implementation of how they might come about. 84 | 85 | We adapt the terminology and claim that latent spaces of generative neural networks function as conceptual spaces which can be used as non-symbolic knowledge representation layers in other tools. With this framework, we examine the ability of this representation layer built from the latent space of a generative neural network model to support a new type of spreadsheet interface tool. The tool itself is domain independent and is shown to be useful in several domains. In exploring these particular domains, our tool constructs subspaces of the larger conceptual space of possibilities as a parameter space of a spreadsheet driven exploration tool. 86 | 87 | \subsection{Supporting Design Experimentation} 88 | 89 | Design principles have been identified by ~\cite{resnick05} and ~\cite{terry02} 90 | for user interfaces to support design experimentation and exploration. 91 | 92 | These principles can be summarised by the three user interface requirements proposed in Design Principles for Tools to Support Creative Thinking~\cite{resnick05} (paraphrased): 93 | It must be very easy to try things out and then backtrack when unsuccessful. 94 | Tools should be ‘self-revealing’ in what they can achieve. 95 | Make it very fast to sketch out different alternatives 96 | 97 | These principles are supported by ~\cite{terry02} where they identify three activities in the process of reflection-in-action~\cite{schon84} that should be supported by user interfaces for design experimentation. They are: Near-Term Experimentation, Generating Variations, and Evaluation. 98 | 99 | Near-Term Experimentation is used to describe actions which intend to ``discover and instantiate the next move'' ~\cite[p. 39]{terry02}. In a user interface, users would make hypotheses about the next action to be made, and test their hypothesis by ``invoking a command and adjusting its settings to achieve the imagined effect''. The users would then ``either accept the command, tweak the parameters more, or undo it and try another tact'' ~\cite[p. 40]{terry02}. 100 | 101 | Variations are created by the designer to explore alternatives deeply. It enables them ``to better understand the problem, its boundaries, and potential solutions'' ~\cite[p. 40]{terry02}. An example of this is where designers make ``multiple variations of a specific component by creating them side-by-side on a large canvas ... and iterate on promising versions to arrive at an acceptable solution'' ~\cite[p. 40]{terry02}. 102 | 103 | Users need to evaluate their progress as they work on a task. This happens after near-term experiments, as well as after generating variations: ``the moment in which the individual reassesses the problem and their understanding of it, before making the next move'' ~\cite[p. 40]{terry02}. 104 | 105 | \subsection{Spreadsheet as a Design tool} 106 | 107 | Spreadsheets may seem like an unlikely design tool. However, the ability to express relationships between cells make it functionally suited to express operations in latent space. 108 | Additionally, it satisfies the three user requirements for software to support design experimentation — Near-Term Experimentation, Generating Variations, and Evaluation as proposed by ~\cite{terry02}. 109 | 110 | Near-term experimentation is supported by the automatic updating feature of the spreadsheet. Users are able to set up scenarios of logic and calculate the results to ‘what if’ questions instantly by modifying the cell values. This establishes a tight feedback loop between the user’s actions and its implications. When coupled with the ability to undo actions, it enables users to discover and instantiate moves, and backtrack if the results are unsatisfactory. 111 | 112 | The generation of variations is supported by enabling users to duplicate instances of data onto other cells within the document. These copies can then be modified independently from the original data. 113 | 114 | Evaluation is supported by enabling users flexibility in how they choose to organise data in the document. Users can set up custom templates in a layout which best supports their preferences and the problem to be solved. 115 | 116 | In addition to their promise in supporting design experimentation, spreadsheet software is well-established within office productivity suites. Users with an understanding of how conventional spreadsheets function are able to transfer their understanding to the use of the design tool. 117 | 118 | \section{SpaceSheet} 119 | 120 | SpaceSheet consists of a data picker exposing latent variables to operate with and a spreadsheet to define operations between the variables. In both, latent variables are decoded into observable images. 121 | 122 | \subsection{Data Picker} 123 | 124 | The data picker is a predetermined set of latent variables which have been organized into a grid. The set of variables in the data picker act as the points of reference from which the latent space can be explored from. Diversity has been prioritized in the selected set to maximize the variety of possible outcomes that can be explored. Multiple data pickers have also been implemented as tabs to provide various pre-baked distributions of latent variables. 125 | 126 | \subsection{Spreadsheet} 127 | 128 | The spreadsheet is the main workspace of the tool. It enables users to express relationships between cells using formulae. Operations between cells containing latent variables are computed with vector arithmetic, and its result is decoded into an image. Common operations can be defined by clicking on buttons at the top of the spreadsheet. These buttons are selection-aware, and highlight to suggest operations based on the selected cells. A live SpaceSheets demo is available online\footnote{https://vusd.github.io/spacesheet/} and the appendix contains a list of supported operations and sample workflows. 129 | 130 | \subsection{Applications} 131 | 132 | \begin{figure}[ht] 133 | \centering 134 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 135 | \includegraphics[width=6cm]{figs/02A-use-cases.png} 136 | \caption{SpaceSheet with Font Model} 137 | \end{figure} 138 | 139 | 140 | Initial efforts are focused on experimenting in various domains to encourage the development of a general-purpose model agnostic set of operations. A SpaceSheet to explore a generative model of fonts~\cite{bernhardsson15} has been implemented to be used as a design tool (Figure 5). User testing indicated that the tool enabled designers and non-designers alike to explore design variations easily~\cite{loh18}. 141 | 142 | \begin{figure}[ht] 143 | \centering 144 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 145 | \includegraphics[width=5cm]{figs/02C-use-cases.png} 146 | \caption{SpaceSheet with word2vec} 147 | \end{figure} 148 | 149 | 150 | The concepts have also been extended to domains other than images and with models that are not generative, such as the Word2Vec model~\cite{word2vec}. This version of the SpaceSheet can be used to find word analogies and perform interpolations using nearest neighbors (Figure 6). 151 | 152 | A SpaceSheet has been created to enable the exploration of the BigGAN model ~\cite{brock18}. In this implementation, the primary DataPicker for this implementation has been curated to enable users to experiment with a variety of image classes (Figure 7). 153 | 154 | \begin{figure}[ht] 155 | \centering 156 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 157 | \includegraphics[width=8cm]{figs/BigGAN-01.png} 158 | \caption{BigGAN SpaceSheet with a generic DataPicker across all image classes} 159 | \end{figure} 160 | 161 | Custom DataPickers of other classes, or combinations of other classes can be created using the DataPicker creator (Figure 8). The DataPicker creator enables users to a) explore and select one or more classes from a searchable, hierarchically organised tree checklist, b) control the amounts of each class to composite in the resulting class, and c) preview example reconstructions of the resulting class before creating a DataPicker of the resulting class. Once created, this new custom DataPicker will be available for use in the spreadsheet (Figure 9). 162 | 163 | \begin{figure}[ht] 164 | \centering 165 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 166 | \includegraphics[width=8cm]{figs/BigGAN-02.png} 167 | \caption{BigGAN SpaceSheet custom DataPicker interface} 168 | \end{figure} 169 | 170 | \begin{figure}[ht] 171 | \centering 172 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 173 | \includegraphics[width=8cm]{figs/BigGAN-03.png} 174 | \caption{BigGAN SpaceSheet with a custom DataPicker made from combining a user-provided ratio of the "Bubble", "Granny Smith", and "Velvet" image classes} 175 | \end{figure} 176 | 177 | \subsection{Evaluation} 178 | 179 | User testing of SpaceSheets on a model of fonts~\cite{loh18} revealed that the tool enabled a novel method to experiment with designs. Users explore design possibilities from a top-down approach by deriving meaning and navigating within a preconstructed model, rather than constructing a model from the bottom-up. 180 | 181 | This method of working was reported to be more supportive of design exploration, more efficient, and capable of enabling non-designers to explore design possibilities. Unsurprisingly, it required new skills and intuition to be used to its full effect. A lack of knowledge in deriving and applying attribute vectors from latent space limited users’ expressivity and control over their experiments. Due to this, interpolation was found to be the most intuitive and common method to arrive at search targets. 182 | 183 | Expressing low-level transformations such as positioning and scale through SpaceSheet often resulted in distorted reconstructions which did not match the expectations of the user. This is attributed to a mismatch in the high-level probabilism of sampling latent spaces is an ill-fit to express concrete design intent. However, this uncertainty has been reported to be serendipitous when distortions in the reconstruction added to the aesthetics of the design. 184 | 185 | \subsection{Discussion} 186 | 187 | SpaceSheets explores the potential of latent spaces to be used as a tool for design experimentation. The research finds it to enable a novel method to work with designs which supports more efficient, high-level design experimentation to designers and non-designers alike. 188 | 189 | User intuition and skill in deriving meaning from latent spaces is fundamental to conduct design experiments with a fine level of control. This intuition can be considered a skill which can be developed through continued experience with the flexible, low-level interface provided by the SpaceSheet. Although latent spaces enable designers to express more meaningful design operations computationally, it provides redundant uncertainty for low-level design operations. It is with this understanding that latent spaces are best considered as a complementary new primitive to build smarter design tools. 190 | 191 | \pagebreak 192 | 193 | \bibliographystyle{iccc} 194 | \bibliography{iccc,spacesheet} 195 | 196 | \onecolumn 197 | 198 | \pagebreak 199 | 200 | \normalsize 201 | 202 | % \vspace*{0.15\textheight} 203 | 204 | \section*{Appendix: Implementation Details} 205 | 206 | \section*{Supported Operations} 207 | 208 | \renewcommand{\arraystretch}{1.5} 209 | 210 | \begin{center} 211 | \begin{tabular}{ | l | p{6cm} | p{5.6cm} |} 212 | \hline \textbf{Operation} & \textbf{Description} & \textbf{Formula} \\ \hline 213 | Sum & Adds a list of numbers / variables & \texttt{SUM(val1, val2, val3, ...)} \\ \hline 214 | Minus & Subtracts two numbers / variables in sequence & \texttt{MINUS(val1, val2)} \\ \hline 215 | Multiply & Multiplies a list of numbers / variables & \texttt{MUL(val1, val2, val3, ...)} \\ \hline 216 | Linear Interpolation & Calculates the value in between two numbers / vectors at a specified amount & \texttt{LERP(from, to, amount)} \\ \hline 217 | Average & Calculates the average of a list of numbers / vectors & \texttt{AVERAGE(val1, val2, val3, ...)} \\ \hline 218 | Distance & Calculates the euclidean distance between two numbers / vectors & \texttt{DIST(val1, val2)} \\ \hline 219 | Modulate & Creates a scrubbing interface which can modulate a cell & \texttt{MOD(cell, degree, radius)} \\ \hline 220 | Random Variable & Creates a random latent variable & \texttt{RANDVAR(seed)} \\ \hline 221 | Slider & Creates a number which is controlled by a slider element & \texttt{SLIDER(min, max[, step])} \\ \hline 222 | \end{tabular} 223 | \end{center} 224 | 225 | 226 | \section*{Interactive Cell Types} 227 | 228 | \begin{figure}[ht!] 229 | \centering 230 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 231 | \includegraphics[width=12cm]{figs/03-cell-types.jpg} 232 | \caption{RANDVAR, MOD and SLIDER cells.} 233 | \end{figure} 234 | 235 | Several alternative cell types have been implemented to create interface elements which support more effective search and exploration. These are instantiated by the operations: 236 | 237 | \begin{verbatim} 238 | RANDVAR(seed) 239 | \end{verbatim} 240 | The RANDVAR (random variable) cell instantiates a latent variable from a random seed. This enables users to operate using latent variables beyond the limited set afforded by the Data Picker. A button displays when the cell is hovered over which enables users to randomise the cell directly. 241 | 242 | \begin{verbatim} 243 | MOD(base, degree, distance) 244 | \end{verbatim} 245 | The MOD (modulate) cell exposes a joystick interface which enables users to scrub locally around a given latent variable to arrive at similar latent variables. The degree of difference can be controlled by the joystick’s distance from the center of the cell. 246 | 247 | \begin{verbatim} 248 | SLIDER(min, max [,step]) 249 | \end{verbatim} 250 | The slider cell enables users to create a number controlled by a slider element. 251 | 252 | \newpage 253 | \section*{Example Workflows} 254 | 255 | % turn off subsection numbering 256 | \setcounter{secnumdepth}{0} 257 | 258 | \subsection{Interpolation} 259 | \begin{figure}[ht!] 260 | \centering 261 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 262 | \includegraphics[width=11.0cm]{figs/04-interpolation-strip.jpg} 263 | \caption{An interpolation between two latent variables} 264 | \end{figure} 265 | 266 | \subsection{Extrapolation} 267 | \begin{figure}[ht!] 268 | \centering 269 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 270 | \includegraphics[width=11.0cm]{figs/08-extrapolation.jpg} 271 | \caption{Extrapolating from two points.} 272 | \end{figure} 273 | 274 | Extrapolating from latent variables can be used to emphasise attributes which vary between its anchors. In this example, the difference between the highlighted anchors - blond hair, large smile, etc. - have been emphasised by extrapolating beyond the end anchor. 275 | 276 | \subsection{Averaging} 277 | \begin{figure}[ht!] 278 | \centering 279 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 280 | \includegraphics[width=7.5cm]{figs/10-averaging.jpg} 281 | \caption{Calculating the average reconstruction of a group of latent variables} 282 | \end{figure} 283 | 284 | \newpage 285 | \subsection{Analogy} 286 | \begin{figure}[ht!] 287 | \centering 288 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 289 | \includegraphics[width=7.0cm]{figs/07-analogy.jpg} 290 | \caption{An analogical construction. The bottom right cell applies the difference between the top cells to the cell on the bottom-left} 291 | \end{figure} 292 | 293 | Given three reconstructions (top-left, top-right, bottom-left), the SpaceSheet calculates the bottom-right corner by analogy. This is achieved by applying the difference between the top variables to the bottom-left variable. In this example, a toothy grin has been applied to the man. 294 | 295 | 296 | 297 | \subsection{Attribute Vectors} 298 | \begin{figure}[ht!] 299 | \centering 300 | % \fbox{\rule[-.5cm]{0cm}{4cm} \rule[-.5cm]{4cm}{0cm}} 301 | \includegraphics[width=14cm]{figs/09-attribute-vectors.jpg} 302 | \caption{ Isolating a ‘blonde’ vector by subtraction (left). Adding the attribute vector to a new latent variable (right)} 303 | \end{figure} 304 | 305 | Specific attributes can be applied as operations to latent variables. Attribute vectors can be isolated by subtracting a latent vector with desired attributes with one without the attributes. This attribute vector can be added to another latent variable to apply the isolated attribute. The example image shows this two-step process. In the first, a ‘blonde’ attribute vector has been isolated by computing the difference between the highlighted cells. This vector is then applied in the right image by addition. The result is a more blonde version of the initial latent variable. 306 | 307 | 308 | \end{document} 309 | -------------------------------------------------------------------------------- /spacesheets_nips2018_loh_white.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/spacesheets_nips2018_loh_white.pdf -------------------------------------------------------------------------------- /src/app.js: -------------------------------------------------------------------------------- 1 | import './assets/styles/normalize.css'; 2 | import './assets/styles/skeleton.css'; 3 | 4 | import 'video.js/dist/video-js.css'; 5 | import 'videojs-playlist-ui/dist/videojs-playlist-ui.css'; 6 | 7 | import './assets/styles/font-faces.css'; 8 | import './assets/styles/styles.scss'; 9 | import './assets/styles/video-player.scss'; 10 | 11 | import './assets/js/index.js'; 12 | 13 | require('./assets/media/favicon.png'); 14 | -------------------------------------------------------------------------------- /src/assets/js/index.js: -------------------------------------------------------------------------------- 1 | import './player.js'; 2 | -------------------------------------------------------------------------------- /src/assets/js/player.js: -------------------------------------------------------------------------------- 1 | import videojs from 'video.js'; 2 | require('videojs-playlist'); 3 | require('videojs-playlist-ui'); 4 | 5 | // Import videos 6 | import '../media/videos/1-workspace.mp4'; 7 | import '../media/videos/2-attribute-vectors.mp4'; 8 | import '../media/videos/3-interpolation.mp4'; 9 | import '../media/videos/4-analogy.mp4'; 10 | import '../media/videos/5-random-variables.mp4'; 11 | import '../media/videos/6-slider-cells.mp4'; 12 | import '../media/videos/7-mod-cells.mp4'; 13 | 14 | // Import posters 15 | import '../media/videos/posters/still.png'; 16 | 17 | const player = videojs(document.getElementById('player'), { 18 | autoplay: true, 19 | }); 20 | 21 | player.playlist([ 22 | { 23 | sources: [{ 24 | src: './assets/media/1-workspace.mp4', 25 | type: 'video/mp4', 26 | }], 27 | poster: './assets/media/still.png', 28 | name: 'Workspace', 29 | }, 30 | { 31 | sources: [{ 32 | src: './assets/media/2-attribute-vectors.mp4', 33 | type: 'video/mp4', 34 | }], 35 | poster: './assets/media/still.png', 36 | name: 'Attribute Vectors', 37 | }, 38 | { 39 | sources: [{ 40 | src: './assets/media/3-interpolation.mp4', 41 | type: 'video/mp4', 42 | }], 43 | poster: './assets/media/still.png', 44 | name: 'Interpolation', 45 | }, 46 | { 47 | sources: [{ 48 | src: './assets/media/4-analogy.mp4', 49 | type: 'video/mp4', 50 | }], 51 | poster: './assets/media/still.png', 52 | name: 'Analogy', 53 | }, 54 | { 55 | sources: [{ 56 | src: './assets/media/5-random-variables.mp4', 57 | type: 'video/mp4', 58 | }], 59 | poster: './assets/media/still.png', 60 | name: 'Random Variables', 61 | }, 62 | { 63 | sources: [{ 64 | src: './assets/media/6-slider-cells.mp4', 65 | type: 'video/mp4', 66 | }], 67 | poster: './assets/media/still.png', 68 | name: 'Slider Cells', 69 | }, 70 | { 71 | sources: [{ 72 | src: './assets/media/7-mod-cells.mp4', 73 | type: 'video/mp4', 74 | }], 75 | poster: './assets/media/still.png', 76 | name: 'Mod Cells', 77 | }, 78 | ]); 79 | 80 | player.playlist.autoadvance(0); 81 | player.playlist.repeat(true); 82 | player.playlistUi(); 83 | -------------------------------------------------------------------------------- /src/assets/media/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/favicon.png -------------------------------------------------------------------------------- /src/assets/media/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/logo.png -------------------------------------------------------------------------------- /src/assets/media/videos/1-workspace.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/videos/1-workspace.mp4 -------------------------------------------------------------------------------- /src/assets/media/videos/2-attribute-vectors.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/videos/2-attribute-vectors.mp4 -------------------------------------------------------------------------------- /src/assets/media/videos/3-interpolation.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/videos/3-interpolation.mp4 -------------------------------------------------------------------------------- /src/assets/media/videos/4-analogy.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/videos/4-analogy.mp4 -------------------------------------------------------------------------------- /src/assets/media/videos/5-random-variables.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/videos/5-random-variables.mp4 -------------------------------------------------------------------------------- /src/assets/media/videos/6-slider-cells.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/videos/6-slider-cells.mp4 -------------------------------------------------------------------------------- /src/assets/media/videos/7-mod-cells.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/videos/7-mod-cells.mp4 -------------------------------------------------------------------------------- /src/assets/media/videos/posters/still.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/media/videos/posters/still.png -------------------------------------------------------------------------------- /src/assets/styles/font-faces.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Rubik'; 3 | src: url(./fonts/Rubik-Regular.ttf); 4 | font-weight: normal; 5 | } 6 | @font-face { 7 | font-family: 'Space Mono'; 8 | src: url(./fonts/SpaceMono-Regular.ttf); 9 | font-weight: normal; 10 | } 11 | @font-face { 12 | font-family: 'Space Mono'; 13 | src: url(./fonts/SpaceMono-Bold.ttf); 14 | font-weight: 700; 15 | } 16 | -------------------------------------------------------------------------------- /src/assets/styles/fonts/Rubik-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/styles/fonts/Rubik-Regular.ttf -------------------------------------------------------------------------------- /src/assets/styles/fonts/SpaceMono-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/styles/fonts/SpaceMono-Bold.ttf -------------------------------------------------------------------------------- /src/assets/styles/fonts/SpaceMono-BoldItalic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/styles/fonts/SpaceMono-BoldItalic.ttf -------------------------------------------------------------------------------- /src/assets/styles/fonts/SpaceMono-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/styles/fonts/SpaceMono-Italic.ttf -------------------------------------------------------------------------------- /src/assets/styles/fonts/SpaceMono-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vusd/spacesheet/ca86c8afcb33018e2cac8ae3da82b98936e6afcd/src/assets/styles/fonts/SpaceMono-Regular.ttf -------------------------------------------------------------------------------- /src/assets/styles/normalize.css: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS text size adjust after orientation change, without disabling 6 | * user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability when focused and also mouse hovered in all browsers. 95 | */ 96 | 97 | a:active, 98 | a:hover { 99 | outline: 0; 100 | } 101 | 102 | /* Text-level semantics 103 | ========================================================================== */ 104 | 105 | /** 106 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 107 | */ 108 | 109 | abbr[title] { 110 | border-bottom: 1px dotted; 111 | } 112 | 113 | /** 114 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 115 | */ 116 | 117 | b, 118 | strong { 119 | font-weight: bold; 120 | } 121 | 122 | /** 123 | * Address styling not present in Safari and Chrome. 124 | */ 125 | 126 | dfn { 127 | font-style: italic; 128 | } 129 | 130 | /** 131 | * Address variable `h1` font-size and margin within `section` and `article` 132 | * contexts in Firefox 4+, Safari, and Chrome. 133 | */ 134 | 135 | h1 { 136 | font-size: 2em; 137 | margin: 0.67em 0; 138 | } 139 | 140 | /** 141 | * Address styling not present in IE 8/9. 142 | */ 143 | 144 | mark { 145 | background: #ff0; 146 | color: #000; 147 | } 148 | 149 | /** 150 | * Address inconsistent and variable font size in all browsers. 151 | */ 152 | 153 | small { 154 | font-size: 80%; 155 | } 156 | 157 | /** 158 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 159 | */ 160 | 161 | sub, 162 | sup { 163 | font-size: 75%; 164 | line-height: 0; 165 | position: relative; 166 | vertical-align: baseline; 167 | } 168 | 169 | sup { 170 | top: -0.5em; 171 | } 172 | 173 | sub { 174 | bottom: -0.25em; 175 | } 176 | 177 | /* Embedded content 178 | ========================================================================== */ 179 | 180 | /** 181 | * Remove border when inside `a` element in IE 8/9/10. 182 | */ 183 | 184 | img { 185 | border: 0; 186 | } 187 | 188 | /** 189 | * Correct overflow not hidden in IE 9/10/11. 190 | */ 191 | 192 | svg:not(:root) { 193 | overflow: hidden; 194 | } 195 | 196 | /* Grouping content 197 | ========================================================================== */ 198 | 199 | /** 200 | * Address margin not present in IE 8/9 and Safari. 201 | */ 202 | 203 | figure { 204 | margin: 1em 40px; 205 | } 206 | 207 | /** 208 | * Address differences between Firefox and other browsers. 209 | */ 210 | 211 | hr { 212 | -moz-box-sizing: content-box; 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome 354 | * (include `-moz` to future-proof). 355 | */ 356 | 357 | input[type="search"] { 358 | -webkit-appearance: textfield; /* 1 */ 359 | -moz-box-sizing: content-box; 360 | -webkit-box-sizing: content-box; /* 2 */ 361 | box-sizing: content-box; 362 | } 363 | 364 | /** 365 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 366 | * Safari (but not Chrome) clips the cancel button when the search input has 367 | * padding (and `textfield` appearance). 368 | */ 369 | 370 | input[type="search"]::-webkit-search-cancel-button, 371 | input[type="search"]::-webkit-search-decoration { 372 | -webkit-appearance: none; 373 | } 374 | 375 | /** 376 | * Define consistent border, margin, and padding. 377 | */ 378 | 379 | fieldset { 380 | border: 1px solid #c0c0c0; 381 | margin: 0 2px; 382 | padding: 0.35em 0.625em 0.75em; 383 | } 384 | 385 | /** 386 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 387 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 388 | */ 389 | 390 | legend { 391 | border: 0; /* 1 */ 392 | padding: 0; /* 2 */ 393 | } 394 | 395 | /** 396 | * Remove default vertical scrollbar in IE 8/9/10/11. 397 | */ 398 | 399 | textarea { 400 | overflow: auto; 401 | } 402 | 403 | /** 404 | * Don't inherit the `font-weight` (applied by a rule above). 405 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 406 | */ 407 | 408 | optgroup { 409 | font-weight: bold; 410 | } 411 | 412 | /* Tables 413 | ========================================================================== */ 414 | 415 | /** 416 | * Remove most spacing between table cells. 417 | */ 418 | 419 | table { 420 | border-collapse: collapse; 421 | border-spacing: 0; 422 | } 423 | 424 | td, 425 | th { 426 | padding: 0; 427 | } -------------------------------------------------------------------------------- /src/assets/styles/skeleton.css: -------------------------------------------------------------------------------- 1 | /* 2 | * Skeleton V2.0.4 3 | * Copyright 2014, Dave Gamache 4 | * www.getskeleton.com 5 | * Free to use under the MIT license. 6 | * http://www.opensource.org/licenses/mit-license.php 7 | * 12/29/2014 8 | */ 9 | 10 | 11 | /* Table of contents 12 | –––––––––––––––––––––––––––––––––––––––––––––––––– 13 | - Grid 14 | - Base Styles 15 | - Typography 16 | - Links 17 | - Buttons 18 | - Forms 19 | - Lists 20 | - Code 21 | - Tables 22 | - Spacing 23 | - Utilities 24 | - Clearing 25 | - Media Queries 26 | */ 27 | 28 | 29 | /* Grid 30 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 31 | .container { 32 | position: relative; 33 | width: 100%; 34 | /*max-width: 960px;*/ 35 | max-width: 700px; 36 | margin: 0 auto; 37 | padding: 0 20px; 38 | box-sizing: border-box; } 39 | .column, 40 | .columns { 41 | width: 100%; 42 | float: left; 43 | box-sizing: border-box; 44 | margin: 0px; 45 | padding: 0px; } 46 | .render-result-container 47 | { 48 | width: 50%; 49 | } 50 | 51 | /* For devices larger than 400px */ 52 | @media (min-width: 400px) { 53 | .container { 54 | width: 85%; 55 | padding: 0; } 56 | } 57 | 58 | /* For devices larger than 550px */ 59 | @media (min-width: 550px) { 60 | /* .container { */ 61 | /* width: 100%; */ 62 | /*80%;*/ 63 | /* } */ 64 | .container { 65 | width: 85%; 66 | padding: 0; } 67 | .column, 68 | .columns { 69 | margin-left: 0px;/*4%;*/ } 70 | .column:first-child, 71 | .columns:first-child { 72 | margin-left: 0; } 73 | 74 | .one.column, 75 | .one.columns { width: 8.33333333333%; } 76 | .two.columns { width: 16.6666666667%; } 77 | .three.columns { width: 25%; } 78 | .four.columns { width: 33.3333333333%; } 79 | .five.columns { width: 41.6666666667%; } 80 | .six.columns { width: 50%; } 81 | .seven.columns { width: 58.3333333333%; } 82 | .eight.columns { width: 66.6666666667%; } 83 | .nine.columns { width: 75.0%; } 84 | .ten.columns { width: 83.3333333333%; } 85 | .eleven.columns { width: 91.6666666666%; } 86 | .twelve.columns { width: 100%; margin-left: 0; } 87 | 88 | .one-third.column { width: 30.6666666667%; } 89 | .two-thirds.column { width: 65.3333333333%; } 90 | 91 | .one-half.column { width: 48%; } 92 | 93 | /* 94 | .one.column, 95 | .one.columns { width: 4.66666666667%; } 96 | .two.columns { width: 13.3333333333%; } 97 | .three.columns { width: 22%; } 98 | .four.columns { width: 30.6666666667%; } 99 | .five.columns { width: 39.3333333333%; } 100 | .six.columns { width: 48%; } 101 | .seven.columns { width: 56.6666666667%; } 102 | .eight.columns { width: 65.3333333333%; } 103 | .nine.columns { width: 74.0%; } 104 | .ten.columns { width: 82.6666666667%; } 105 | .eleven.columns { width: 91.3333333333%; } 106 | .twelve.columns { width: 100%; margin-left: 0; } 107 | 108 | .one-third.column { width: 30.6666666667%; } 109 | .two-thirds.column { width: 65.3333333333%; } 110 | 111 | .one-half.column { width: 48%; } 112 | */ 113 | 114 | /* Offsets */ 115 | .offset-by-one.column, 116 | .offset-by-one.columns { margin-left: 8.66666666667%; } 117 | .offset-by-two.column, 118 | .offset-by-two.columns { margin-left: 17.3333333333%; } 119 | .offset-by-three.column, 120 | .offset-by-three.columns { margin-left: 26%; } 121 | .offset-by-four.column, 122 | .offset-by-four.columns { margin-left: 34.6666666667%; } 123 | .offset-by-five.column, 124 | .offset-by-five.columns { margin-left: 43.3333333333%; } 125 | .offset-by-six.column, 126 | .offset-by-six.columns { margin-left: 52%; } 127 | .offset-by-seven.column, 128 | .offset-by-seven.columns { margin-left: 60.6666666667%; } 129 | .offset-by-eight.column, 130 | .offset-by-eight.columns { margin-left: 69.3333333333%; } 131 | .offset-by-nine.column, 132 | .offset-by-nine.columns { margin-left: 78.0%; } 133 | .offset-by-ten.column, 134 | .offset-by-ten.columns { margin-left: 86.6666666667%; } 135 | .offset-by-eleven.column, 136 | .offset-by-eleven.columns { margin-left: 95.3333333333%; } 137 | 138 | .offset-by-one-third.column, 139 | .offset-by-one-third.columns { margin-left: 34.6666666667%; } 140 | .offset-by-two-thirds.column, 141 | .offset-by-two-thirds.columns { margin-left: 69.3333333333%; } 142 | 143 | .offset-by-one-half.column, 144 | .offset-by-one-half.columns { margin-left: 52%; } 145 | 146 | } 147 | 148 | 149 | /* Base Styles 150 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 151 | /* NOTE 152 | html is set to 62.5% so that all the REM measurements throughout Skeleton 153 | are based on 10px sizing. So basically 1.5rem = 15px :) */ 154 | html { 155 | font-size: 62.5%; } 156 | body { 157 | font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */ 158 | line-height: 1.6; 159 | font-weight: 400; 160 | /* font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; */ 161 | font-family: "Rubik", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; 162 | color: #222; } 163 | 164 | 165 | /* Typography 166 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 167 | h1, h2, h3, h4, h5, h6, p { 168 | margin-top: 0; 169 | margin-bottom: 2rem; 170 | font-weight: 300; } 171 | 172 | /* Initial Font Styles */ 173 | /* h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;} 174 | h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; } 175 | h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; } 176 | h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; } 177 | h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; } 178 | h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; } 179 | p { font-size: 1.8rem; line-height: 1.6; } */ 180 | 181 | /* Larger than phablet */ 182 | /* @media (min-width: 550px) { 183 | h1 { font-size: 5.0rem; } 184 | h2 { font-size: 4.2rem; } 185 | h3 { font-size: 3.6rem; } 186 | h4 { font-size: 3.0rem; } 187 | h5 { font-size: 2.4rem; } 188 | h6 { font-size: 1.5rem; } 189 | } */ 190 | h1 { font-size: 3.0rem; line-height: 1.2; } 191 | h2 { font-size: 2.6rem; line-height: 1.25; } 192 | h3 { font-size: 2.0rem; line-height: 1.3; } 193 | h4 { font-size: 2.4rem; line-height: 1.35; } 194 | h5 { font-size: 1.8rem; line-height: 1.5; } 195 | h6 { font-size: 1.5rem; line-height: 1.6; } 196 | p { font-size: 1.8rem; line-height: 1.6; } 197 | 198 | 199 | @media (min-width: 550px) { 200 | h1 { font-size: 4.0rem; } 201 | h2 { font-size: 3.2rem; } 202 | h3 { font-size: 2.6rem; } 203 | h4 { font-size: 2.0rem; } 204 | h5 { font-size: 1.8rem; } 205 | h6 { font-size: 1.5rem; } 206 | } 207 | 208 | p { 209 | margin-top: 0; } 210 | 211 | 212 | /* Links 213 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 214 | a { 215 | color: #1EAEDB; } 216 | a:hover { 217 | color: #0FA0CE; } 218 | 219 | 220 | /* Buttons 221 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 222 | /* 223 | .button, 224 | button, 225 | input[type="submit"], 226 | input[type="reset"], 227 | input[type="button"] { 228 | display: inline-block; 229 | height: 38px; 230 | padding: 0 30px; 231 | color: #555; 232 | text-align: center; 233 | font-size: 11px; 234 | font-weight: 600; 235 | line-height: 38px; 236 | letter-spacing: .1rem; 237 | text-transform: uppercase; 238 | text-decoration: none; 239 | white-space: nowrap; 240 | background-color: transparent; 241 | border-radius: 4px; 242 | border: 1px solid #bbb; 243 | cursor: pointer; 244 | box-sizing: border-box; } 245 | .button:hover, 246 | button:hover, 247 | input[type="submit"]:hover, 248 | input[type="reset"]:hover, 249 | input[type="button"]:hover, 250 | .button:focus, 251 | button:focus, 252 | input[type="submit"]:focus, 253 | input[type="reset"]:focus, 254 | input[type="button"]:focus { 255 | color: #333; 256 | border-color: #888; 257 | outline: 0; } 258 | .button.button-primary, 259 | button.button-primary, 260 | input[type="submit"].button-primary, 261 | input[type="reset"].button-primary, 262 | input[type="button"].button-primary { 263 | color: #FFF; 264 | background-color: #33C3F0; 265 | border-color: #33C3F0; } 266 | .button.button-primary:hover, 267 | button.button-primary:hover, 268 | input[type="submit"].button-primary:hover, 269 | input[type="reset"].button-primary:hover, 270 | input[type="button"].button-primary:hover, 271 | .button.button-primary:focus, 272 | button.button-primary:focus, 273 | input[type="submit"].button-primary:focus, 274 | input[type="reset"].button-primary:focus, 275 | input[type="button"].button-primary:focus { 276 | color: #FFF; 277 | background-color: #1EAEDB; 278 | border-color: #1EAEDB; } 279 | */ 280 | 281 | /* Forms 282 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 283 | input[type="email"], 284 | input[type="number"], 285 | input[type="search"], 286 | input[type="text"], 287 | input[type="tel"], 288 | input[type="url"], 289 | input[type="password"], 290 | textarea, 291 | select { 292 | height: 38px; 293 | padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */ 294 | background-color: #fff; 295 | border: 1px solid #D1D1D1; 296 | border-radius: 4px; 297 | box-shadow: none; 298 | box-sizing: border-box; } 299 | /* Removes awkward default styles on some inputs for iOS */ 300 | input[type="email"], 301 | input[type="number"], 302 | input[type="search"], 303 | input[type="text"], 304 | input[type="tel"], 305 | input[type="url"], 306 | input[type="password"], 307 | textarea { 308 | -webkit-appearance: none; 309 | -moz-appearance: none; 310 | appearance: none; } 311 | textarea { 312 | min-height: 65px; 313 | padding-top: 6px; 314 | padding-bottom: 6px; } 315 | input[type="email"]:focus, 316 | input[type="number"]:focus, 317 | input[type="search"]:focus, 318 | input[type="text"]:focus, 319 | input[type="tel"]:focus, 320 | input[type="url"]:focus, 321 | input[type="password"]:focus, 322 | textarea:focus, 323 | select:focus { 324 | border: 1px solid #33C3F0; 325 | outline: 0; } 326 | label, 327 | legend { 328 | display: block; 329 | margin-bottom: .5rem; 330 | font-weight: 600; } 331 | fieldset { 332 | padding: 0; 333 | border-width: 0; } 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | display: inline; } 337 | label > .label-body { 338 | display: inline-block; 339 | margin-left: .5rem; 340 | font-weight: normal; } 341 | 342 | 343 | /* Lists 344 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 345 | ul { 346 | list-style: circle inside; } 347 | ol { 348 | list-style: decimal inside; } 349 | ol, ul { 350 | padding-left: 0; 351 | margin-top: 0; } 352 | ul ul, 353 | ul ol, 354 | ol ol, 355 | ol ul { 356 | margin: 1.5rem 0 1.5rem 3rem; 357 | font-size: 90%; } 358 | li { 359 | margin-bottom: 1rem; } 360 | 361 | 362 | /* Code 363 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 364 | code { 365 | padding: .2rem .5rem; 366 | margin: 0 .2rem; 367 | font-size: 90%; 368 | white-space: nowrap; 369 | background: #F1F1F1; 370 | border: 1px solid #E1E1E1; 371 | border-radius: 4px; } 372 | pre > code { 373 | display: block; 374 | padding: 1rem 1.5rem; 375 | white-space: pre; } 376 | 377 | 378 | /* Tables 379 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 380 | th, 381 | td { 382 | padding: 12px 15px; 383 | text-align: left; 384 | border-bottom: 1px solid #E1E1E1; } 385 | th:first-child, 386 | td:first-child { 387 | padding-left: 0; } 388 | th:last-child, 389 | td:last-child { 390 | padding-right: 0; } 391 | 392 | 393 | /* Spacing 394 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 395 | button, 396 | .button { 397 | margin-bottom: 1rem; } 398 | input, 399 | textarea, 400 | select, 401 | fieldset { 402 | margin-bottom: 1.5rem; } 403 | pre, 404 | blockquote, 405 | dl, 406 | figure, 407 | table, 408 | p, 409 | ul, 410 | ol, 411 | form { 412 | margin-bottom: 2.5rem; } 413 | 414 | 415 | /* Utilities 416 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 417 | .u-full-width { 418 | width: 100%; 419 | box-sizing: border-box; } 420 | .u-max-full-width { 421 | max-width: 100%; 422 | box-sizing: border-box; } 423 | .u-pull-right { 424 | float: right; } 425 | .u-pull-left { 426 | float: left; } 427 | 428 | 429 | /* Misc 430 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 431 | hr { 432 | margin-top: 3rem; 433 | margin-bottom: 3.5rem; 434 | border-width: 0; 435 | border-top: 1px solid #E1E1E1; } 436 | 437 | 438 | /* Clearing 439 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 440 | 441 | /* Self Clearing Goodness */ 442 | .container:after, 443 | .row:after, 444 | .u-cf { 445 | content: ""; 446 | display: table; 447 | clear: both; } 448 | 449 | 450 | /* Media Queries 451 | –––––––––––––––––––––––––––––––––––––––––––––––––– */ 452 | /* 453 | Note: The best way to structure the use of media queries is to create the queries 454 | near the relevant code. For example, if you wanted to change the styles for buttons 455 | on small devices, paste the mobile query code up in the buttons section and style it 456 | there. 457 | */ 458 | 459 | 460 | /* Larger than mobile */ 461 | @media (min-width: 400px) {} 462 | 463 | /* Larger than phablet (also point when grid becomes active) */ 464 | @media (min-width: 550px) {} 465 | 466 | /* Larger than tablet */ 467 | @media (min-width: 750px) {} 468 | 469 | /* Larger than desktop */ 470 | @media (min-width: 1000px) {} 471 | 472 | /* Larger than Desktop HD */ 473 | @media (min-width: 1200px) {} 474 | -------------------------------------------------------------------------------- /src/assets/styles/styles.scss: -------------------------------------------------------------------------------- 1 | @import './variables.scss'; 2 | 3 | p 4 | { 5 | font-family: 'Rubik', sans-serif; 6 | } 7 | 8 | h1, h2, h3, h4, h5, h6, button 9 | { 10 | font-family: 'Space Mono', monospace; 11 | font-weight: bold; 12 | } 13 | 14 | html, body 15 | { 16 | width: 100%; 17 | height: 100%; 18 | padding: 0px; 19 | margin: 0px; 20 | background: $lightgrey; 21 | } 22 | 23 | .section 24 | { 25 | color: $darkgrey; 26 | h2 27 | { 28 | text-align: center; 29 | font-weight: bold; 30 | } 31 | 32 | &.hero 33 | { 34 | margin-bottom: $spacingExtraLarge; 35 | padding: $spacingExtraLarge 0 ($spacingExtraLarge + $spacingMedium) 0; 36 | 37 | background-color: $darkergrey; 38 | background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23505050' fill-opacity='1'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); 39 | 40 | .logo 41 | { 42 | height: 60px; 43 | margin-bottom: $spacingMedium; 44 | img 45 | { 46 | max-height: 100%; 47 | max-width: 100%; 48 | } 49 | } 50 | h3 51 | { 52 | font-family: 'Rubik', sans-serif; 53 | color: $white; 54 | } 55 | } 56 | 57 | &.video 58 | { 59 | margin-bottom: $spacingExtraLarge; 60 | @media (max-width: 749px) 61 | { 62 | .column, .columns 63 | { 64 | width: 100%; 65 | } 66 | } 67 | .video-player 68 | { 69 | box-shadow: 0 5px 15px rgba(80, 80, 80, 0.4); 70 | margin: -15rem auto 0 auto; 71 | } 72 | } 73 | 74 | &.abstract 75 | { 76 | margin-bottom: $spacingExtraLarge; 77 | p 78 | { 79 | margin-bottom: $spacingLarge; 80 | } 81 | .row.buttons 82 | { 83 | .columns 84 | { 85 | // &:first-child 86 | // { 87 | // button 88 | // { 89 | // float: left; 90 | // } 91 | // } 92 | // &:last-child 93 | // { 94 | // button 95 | // { 96 | // float: right; 97 | // } 98 | // } 99 | // button 100 | // { 101 | // font-family: 'Space Mono', monospace; 102 | // font-weight: normal; 103 | // font-size: 1.8rem; 104 | // width: 100%; 105 | // float: right; 106 | // margin-bottom: $spacingSmall; 107 | // 108 | // @media (min-width: 550px) 109 | // { 110 | // margin-bottom: 0; 111 | // min-width: 220px; 112 | // width: 90%; 113 | // } 114 | // } 115 | text-align: center; 116 | button 117 | { 118 | font-family: 'Space Mono', monospace; 119 | font-weight: normal; 120 | font-size: 1.8rem; 121 | width: 100%; 122 | margin-bottom: $spacingSmall; 123 | max-width: 250px; 124 | 125 | @media (min-width: 550px) 126 | { 127 | margin-bottom: 0; 128 | min-width: 220px; 129 | } 130 | } 131 | } 132 | } 133 | } 134 | 135 | &.demo 136 | { 137 | background: $white; 138 | padding: $spacingExtraLarge 0; 139 | 140 | p 141 | { 142 | text-align: center; 143 | margin-bottom: $spacingLarge; 144 | } 145 | 146 | .demo-tiles 147 | { 148 | .columns 149 | { 150 | &:first-child 151 | { 152 | padding-right: 0; 153 | @media (min-width: 550px) 154 | { 155 | padding-right: $spacingSmall; 156 | } 157 | } 158 | 159 | &:last-child 160 | { 161 | padding-left: 0; 162 | @media (min-width: 550px) 163 | { 164 | padding-left: $spacingSmall; 165 | } 166 | } 167 | 168 | .demo-tile 169 | { 170 | &:hover 171 | { 172 | color: $darkergrey; 173 | border: 2px solid $darkergrey; 174 | } 175 | 176 | color: $darkgrey; 177 | cursor: pointer; 178 | border: 2px solid $darkgrey; 179 | display: flex; 180 | align-items: center; 181 | justify-content: center; 182 | height: 15rem; 183 | margin-bottom: $spacingSmall; 184 | 185 | @media (min-width: 550px) 186 | { 187 | &:last-child { 188 | margin-bottom: 0; 189 | } 190 | margin-bottom: $spacingSmall * 2; 191 | } 192 | 193 | h4 194 | { 195 | margin: 0; 196 | } 197 | } 198 | } 199 | } 200 | } 201 | &.contact 202 | { 203 | background: $darkergrey; 204 | color: $white; 205 | margin: 0; 206 | padding: $spacingExtraLarge 0; 207 | text-align: center; 208 | 209 | .columns:first-child 210 | { 211 | @media (min-width: 550px) { 212 | margin-bottom: 0; 213 | } 214 | margin-bottom: $spacingLarge; 215 | } 216 | 217 | h4 218 | { 219 | // font-family: 'Rubik', sans-serif; 220 | font-family: 'Space Mono', sans-serif; 221 | font-weight: bold; 222 | color: $white; 223 | } 224 | 225 | p 226 | { 227 | margin: 0; 228 | } 229 | } 230 | } 231 | 232 | .full-width-container 233 | { 234 | position: relative; 235 | width: 100%; 236 | max-width: 100%; 237 | margin: 0 auto; 238 | box-sizing: border-box; 239 | } 240 | 241 | .container 242 | { 243 | padding-left: $spacingExtraLarge; 244 | padding-right: $spacingExtraLarge; 245 | } 246 | 247 | button 248 | { 249 | cursor: pointer; 250 | border: none; 251 | padding: $spacingExtraSmall $spacingMedium; 252 | &.btn-primary 253 | { 254 | background: $darkgrey; 255 | color: $white; 256 | border: 2px solid $darkgrey; 257 | &:hover 258 | { 259 | background: $darkergrey; 260 | border: 2px solid $darkergrey; 261 | } 262 | } 263 | &.btn-secondary 264 | { 265 | background: transparent; 266 | color: $darkgrey; 267 | border: 2px solid $darkgrey; 268 | &:hover 269 | { 270 | color: $darkergrey; 271 | border: 2px solid $darkergrey; 272 | } 273 | } 274 | } 275 | -------------------------------------------------------------------------------- /src/assets/styles/variables.scss: -------------------------------------------------------------------------------- 1 | $darkergrey: rgb(10, 10, 10); 2 | $darkgrey: rgb(80, 80, 80); 3 | $grey: rgb(120, 120, 120); 4 | $lightgrey: rgb(240, 240, 240); 5 | $lightergrey: rgb(169, 169, 169); 6 | $white: white; 7 | 8 | $spacingExtraLarge: 8rem; 9 | $spacingLarge: 5.4rem; 10 | $spacingMedium: 2.4rem; 11 | $spacingSmall: 1.6rem; 12 | $spacingExtraSmall: 0.8rem; 13 | -------------------------------------------------------------------------------- /src/assets/styles/video-player.scss: -------------------------------------------------------------------------------- 1 | @import './variables.scss'; 2 | 3 | .video-player { 4 | @media (min-width: 1000px) 5 | { 6 | width: 60%; 7 | min-width: 1000px; 8 | max-width: 1200px; 9 | width: 80vw; 10 | height: 45vw; 11 | max-height: 500px; 12 | } 13 | width : 100%; 14 | display: flex; 15 | flex-wrap: wrap; 16 | 17 | .columns 18 | { 19 | position: relative; 20 | &.nine 21 | { 22 | align-items: center; 23 | .video-js 24 | { 25 | height: 100%; 26 | width: 100%; 27 | min-height: 400px; 28 | @media (min-width: 750px) 29 | { 30 | min-height: initial; 31 | } 32 | } 33 | } 34 | &.playlist-container 35 | { 36 | @media (max-width: 749px) 37 | { 38 | max-height: 200px; 39 | } 40 | overflow: auto; 41 | display: flex; 42 | .vjs-playlist 43 | { 44 | border-left: 1px solid $grey; 45 | box-sizing: border-box; 46 | width: 100%; 47 | background: #444954; 48 | .vjs-playlist-item-list 49 | { 50 | .vjs-playlist-item 51 | { 52 | &.vjs-selected .vjs-playlist-thumbnail-placeholder .vjs-playlist-title-container 53 | { 54 | background: rgba(43, 51, 63, 1); 55 | box-shadow: 0px 0px 10px 0px inset $darkergrey; 56 | color: $white; 57 | } 58 | height: initial; 59 | color: $white; 60 | margin: 0; 61 | border-bottom: 1px solid $grey; 62 | .vjs-playlist-thumbnail-placeholder 63 | { 64 | display: flex; 65 | border-radius: 2px; 66 | height: 70px; 67 | background: $white; 68 | .vjs-playlist-title-container 69 | { 70 | border: none; 71 | background: rgba(43, 51, 63, 0.9); 72 | text-shadow: none; 73 | height: 100%; 74 | position: relative; 75 | display: flex; 76 | align-items: center; 77 | padding-left: $spacingSmall; 78 | .vjs-up-next-text { 79 | display: none; 80 | } 81 | } 82 | .vjs-playlist-now-playing-text 83 | { 84 | display: none; 85 | } 86 | .vjs-playlist-name 87 | { 88 | bottom: 3px; 89 | display: flex; 90 | align-items: flex-end; 91 | } 92 | picture 93 | { 94 | img 95 | { 96 | height: 100%; 97 | max-width: 200px; 98 | opacity: 0.5; 99 | } 100 | } 101 | max-height: 100px; 102 | } 103 | } 104 | } 105 | } 106 | } 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | 15 | 16 | 17 | 18 | SpaceSheet 19 | 20 | 21 | 22 |
23 |
24 |
25 |
26 | 29 |
30 |
31 |
32 |
33 |

Interactive Latent Space Exploration through a Spreadsheet Interface

34 |
35 |
36 |
37 |
38 | 39 |
40 |
41 |
42 | 56 |
57 |
58 |
59 |
60 |
61 |
62 | 63 |
64 |
65 |
66 | 67 |

68 | Generative models capture properties and relationships of images in a generic vector space representation called a latent space. 69 |

70 | Latent spaces can be sampled to create novel images and perform semantic operations consistent with the principles inferred from the training set. 71 |

Designers can use representations learned by generative models to express design intent, enabling more effective design experimentation. 72 |

We present the SpaceSheet, a general-purpose spreadsheet interface designed to support the experimentation and exploration of latent spaces. 73 |

74 |
75 |
76 | 77 |
78 |
79 | 80 | 81 | 82 |
83 |
84 | 85 | 86 | 87 |
88 |
89 |
90 | 91 |
92 |
93 |
94 |
95 |

Try it out

96 |

Here are various implementations of the SpaceSheet.
Note: only desktop devices are supported.

97 |
98 |
99 |
100 |
101 | 102 | 103 |
104 |

Faces

105 |
106 | 107 | 108 | 109 |
110 |

MNIST Digits

111 |
112 | 113 | 114 |
115 |
116 | 117 | 118 |
119 |

Fonts

120 |
121 | 122 | 123 | 124 |
125 |

Word2Vec

126 |
127 | 128 | 129 |
130 |
131 |
132 |
133 | 134 |
135 |
136 |
137 |
138 |

Bryan Loh

139 |

bryanlohjy@hotmail.com

140 |
141 |
142 |

Tom White

143 |

tom.white@vuw.ac.nz

144 |
145 |
146 |
147 |
148 | 149 | 150 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'), 2 | webpack = require('webpack'), 3 | CleanWebpackPlugin = require('clean-webpack-plugin'), 4 | HtmlWebpackPlugin = require('html-webpack-plugin'), 5 | ExtractTextPlugin = require('extract-text-webpack-plugin'); 6 | 7 | const extractPlugin = new ExtractTextPlugin({ filename: './assets/css/app.css' }); 8 | 9 | const config = { 10 | 11 | // absolute path for project root 12 | context: path.resolve(__dirname, 'src'), 13 | 14 | entry: { 15 | // relative path declaration 16 | app: './app.js' 17 | }, 18 | 19 | output: { 20 | // absolute path declaration 21 | path: path.resolve(__dirname, 'docs'), 22 | filename: './assets/js/[name].bundle.js' 23 | }, 24 | 25 | module: { 26 | rules: [ 27 | 28 | // babel-loader with 'env' preset 29 | { test: /\.js$/, include: /src/, exclude: /node_modules/, use: { loader: "babel-loader", options: { presets: ['env'] } } }, 30 | // html-loader 31 | { test: /\.html$/, use: ['html-loader'] }, 32 | 33 | { 34 | test: /\.css$/, 35 | use: ['style-loader', 'css-loader'] 36 | }, 37 | // sass-loader with sourceMap activated 38 | { 39 | test: /\.scss$/, 40 | include: [path.resolve(__dirname, 'src', 'assets', 'styles')], 41 | use: extractPlugin.extract({ 42 | use: [ 43 | { 44 | loader: 'css-loader', 45 | options: { 46 | sourceMap: true 47 | } 48 | }, 49 | { 50 | loader: 'sass-loader', 51 | options: { 52 | sourceMap: true 53 | } 54 | } 55 | ], 56 | fallback: 'style-loader' 57 | }) 58 | }, 59 | // file-loader(for images) 60 | { test: /\.(jpg|png|gif|svg|mp4)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/media/' } } ] }, 61 | // file-loader(for fonts) 62 | { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: './assets/fonts/' } }] } 63 | 64 | 65 | ] 66 | }, 67 | 68 | plugins: [ 69 | // cleaning up only 'docs' folder 70 | new CleanWebpackPlugin(['docs']), 71 | new HtmlWebpackPlugin({ 72 | template: 'index.html' 73 | }), 74 | // extract-text-webpack-plugin instance 75 | extractPlugin 76 | ], 77 | 78 | devServer: { 79 | // static files served from here 80 | contentBase: path.resolve(__dirname, "./docs"), 81 | compress: true, 82 | // open app in localhost:2000 83 | port: 2000, 84 | stats: 'errors-only', 85 | open: true 86 | }, 87 | 88 | devtool: 'inline-source-map' 89 | 90 | }; 91 | 92 | module.exports = config; 93 | --------------------------------------------------------------------------------