robust relational layout synthesis from examples
play

Robust Relational Layout Synthesis from Examples Pavol Bielik , - PowerPoint PPT Presentation

May 08, 2023 •100 likes •763 views

Robust Relational Layout Synthesis from Examples Pavol Bielik , Marc Fischer, Martin Vechev Department of Computer Science ETH Zurich User Interface Design Today Designer Developer picture created by [Credits: Radu Cristian] Designer

  1. Robust Relational Layout Synthesis from Examples Pavol Bielik , Marc Fischer, Martin Vechev Department of Computer Science ETH Zurich

  2. User Interface Design Today Designer Developer picture created by [Credits: Radu Cristian]

  3. Designer

  5. Materialize GroundworkCSS 2 Developer

  6. User Interface Design Today Designer Developer

  7. Our Goal Tool Designer Developer

  8. Preventing Layout Errors Nexus 4 Alcatel Pop 3

  9. Preventing Layout Errors Nexus 4 Alcatel Pop 3

  10. Preventing Layout Errors Centering Asobimasu Overlaying Views Amigo Out of Screen Candid

  11. Improving Performance Slow Layout #1 Layout #2 Fast Layout #3 [Credits: Sriram Ramani]

  12. Code Porting Linear Layout (horizontal) Linear Layout (vertical) Constraint Layout Relative Layout >98% <2% Old / Deprecated

  13. Automating End-User Design Designer Developer picture created by [Credits: Radu Cristian]

  14. Machine Learning Approach Training </> Layout ✘ Syntactically Incorrect ✘ No Formal Guarantees ✘ Robustness ✘ User Feedback Design Specification

  15. Programming Languages Approach Layout Robustness User Formalization Properties Feedback </> Layout Layout Synthesis Probabilistic List of Devices Model Design Specification

  16. Relational Layout Constraints left right top View View baseline bottom Align left of B to right of A A B margin B.left = A.right + margin

  17. Relational Layout Constraints left right top View View baseline bottom Align left of B to right of A A B margin B.left = A.right + 0 A B A B ✘

  18. Relational Layout Constraints left right top View View baseline bottom Align left of B to right of A Center B in between right of A and left of C A B A B C margin B.left = A.right + margin A B A B ✘

  19. Relational Layout Constraints left right top View View baseline bottom Align left of B to right of A Center B in between right of A and left of C A B A B C margin margin B.left = A.right + margin A B A B ✘

  20. Relational Layout Constraints left right top View View baseline bottom Align left of B to right of A Center B in between right of A and left of C A B A B C m L margin bias = 0.25 B.left = A.right + margin A B A B ✘

  21. Relational Layout Constraints left right top View View baseline bottom Align left of B to right of A Center B in between right of A and left of C A B A B C m L margin bias = 0.25 B.left = A.right + margin Center B in between right of A and left of C (Dynamic Size) A B A B C margin A B ✘

  22. Relational Layout Constraints left right top View View baseline bottom Align Center of A to Center of B Center B in between right of A and left of C at an Angle + Distance A B C m L A r bias = 0.25 (1-b)*B.left + b*B.right = (1-b)*(A.right + m L ) + b*(C.left - m R ) α B Center B in between right of A and left of C (Dynamic Size) A B C margin B.left + B.right = 2r*sin( α ) + A.left + A.right B.left = A.right + m L ∧ B.right = A.left + m R

  23. Relational Layout Constraints left right top View View baseline bottom Align Center of A to Center of B Center B in between right of A and left of C Formalized 26 types of constraints used by the at an Angle + Distance latest Android Constraint Layout A B C m L A r bias = 0.25 (1-b)*B.left + b*B.right = (1-b)*(A.right + m L ) + b*(C.left - m R ) α B Center B in between right of A and left of C (Dynamic Size) A B C margin B.left + B.right = 2r*sin( α ) + A.left + A.right B.left = A.right + m L ∧ B.right = A.left + m R

  24. Overview Layout Robustness User Formalization Properties Feedback </> Layout Layout Synthesis Probabilistic List of Devices Model Design Specification

  25. Layout Solving Goal Compute absolute position of all the views left right top bottom

  26. Layout Solving Goal Compute absolute position of all the views A.left = ? B.left = ? v : Absolute Horizontal Positions A.right = ? B.right = ? A B 20 40 B.left = A.right + 40 c : Horizontal Position Constraints A.left = screen.left + 20 screen: Target Device screen.left = 0 ∧ screen.right = 240

  27. Layout Solving Goal Compute absolute position of all the views A.left = 20 B.left = ? v : Absolute Horizontal Positions A.right = ? B.right = ? A B 20 40 B.left = A.right + 40 c : Horizontal Position Constraints A.left = 0 + 20 screen: Target Device screen.left = 0 ∧ screen.right = 240

  28. Layout Solving Goal Compute absolute position of all the views A.left = 20 B.left = 140 v : Absolute Horizontal Positions A.right = 100 B.right = 220 A B 20 40 B.left = A.right + 40 c : Horizontal Position Constraints A.left = 0 + 20 screen: Target Device screen.left = 0 ∧ screen.right = 240 A.right - A.left = 80 s : Horizontal Size Constraints B.right - B.left = 80 v ⊧ ψ layout (screen, c , s )

  29. Layout Solving vs Layout Synthesis Goal Goal Compute absolute position of all the views Synthesize position and size constraints A.left = ? B.left = ? A.left = 0 B.left = 120 A.right = ? B.right = ? A.right = 80 B.right = 200 A B A B 20 40 20 40 B.left = A.right + 40 ? A.left = screen.left + 20 ? screen.left = 0 ∧ screen.right = 240 screen.left = 0 ∧ screen.right = 240 A.right - A.left = 80 ? B.right - B.left = 80 ? v ⊧ ψ layout (screen, c , s ) c ∧ s ⊧ ψ syn (screen, v )

  30. Layout Solving vs Layout Synthesis Goal Goal Compute absolute position of all the views Synthesize position and size constraints Approach A.left = ? B.left = ? A.left = 0 B.left = 120 A.right = ? B.right = ? A.right = 80 B.right = 200 1. Encode the synthesis program as a logical formula ψ syn (screen, v ) A B A B 20 40 20 40 2. Find a satisfying assignment to B.left = A.right + 40 ? A.left = screen.left + 20 ? c ∧ s ⊧ ψ syn (screen, v ) screen.left = 0 ∧ screen.right = 240 screen.left = 0 ∧ screen.right = 240 A.right - A.left = 80 ? B.right - B.left = 80 ? v ⊧ ψ layout (screen, c , s ) c ∧ s ⊧ ψ syn (screen, v )

  31. Layout Synthesis ψ syn (screen, v ) = φ position (screen, v ) ∧ φ constraints ( v ) ∧ φ valid ( v ) ∧ φ acyclic ( v ) Input Constraints Ensure Constraints Specification Encoding are Valid

  32. Layout Synthesis ψ syn (screen, v ) = φ position (screen, v ) ∧ φ constraints ( v ) ∧ φ valid ( v ) ∧ φ acyclic ( v ) Input Constraints Ensure Constraints Specification Encoding are Valid screen.left = 0 ∧ φ position ≝ screen.right = 240 ∧ A.left = 0 ∧ A.right = 80 ∧ B.left = 120 ∧ B.right = 200

  33. Layout Synthesis ψ syn (screen, v ) = φ position (screen, v ) ∧ φ constraints ( v ) ∧ φ valid ( v ) ∧ φ acyclic ( v ) Input Constraints Ensure Constraints Specification Encoding are Valid

  34. Layout Synthesis What are the possible constraints for view B? C (B, v, screen) = {c B , c B , c B , … , c B } C (B, v, screen) = {c 1 , c 2 , c 3 , … , c n }

  35. Layout Synthesis What are the possible constraints for view B? C (B, v, screen) = {c B , c B , c B , … , c B } C (B, v, screen) = {c 1 , c 2 , c 3 , … , c n } A B B.left = A.right + m L (c 1 )

  36. Layout Synthesis What are the possible constraints for view B? C (B, v, screen) = {c B , c B , c B , … , c B } C (B, v, screen) = {c 1 , c 2 , c 3 , … , c n } A B A B B.left = A.right + m L (c 1 ) B.left = screen.right + m L (c 2 )

  37. Layout Synthesis What are the possible constraints for view B? C (B, v, screen) = {c B , c B , c B , … , c B } C (B, v, screen) = {c 1 , c 2 , c 3 , … , c n } A B A B B.left = A.right + m L (c 1 ) B.left = screen.right + m L (c 2 ) A B (1-b)*B.left + b*B.right = (1-b)*(A.right + m L ) + b*(screen.right - m R ) (c 3 )

  38. Layout Synthesis What are the possible constraints for view B? O(|v| 2 ) C (B, v, screen) = {c B , c B , c B , … , c B } C (B, v, screen) = {c 1 , c 2 , c 3 , … , c n } A B A B B.left = A.right + m L (c 1 ) B.left = screen.right + m L (c 2 ) A B (1-b)*B.left + b*B.right = (1-b)*(A.right + m L ) + b*(screen.right - m R ) (c 3 )

  39. Layout Synthesis What are the possible constraints for view B? O(|v| 2 ) C (B, v, screen) = {c B , c B , c B , … , c B } C (B, v, screen) = {c 1 , c 2 , c 3 , … , c n } Select exactly one constraint for each view A B A B B.left = A.right + m L (c 1 ) B.left = screen.right + m L (c 2 ) A B (1-b)*B.left + b*B.right = (1-b)*(A.right + m L ) + b*(screen.right - m R ) (c 3 )

  40. Layout Synthesis What are the possible constraints for view B? O(|v| 2 ) C (B, v, screen) = {c B , c B , c B , … , c B } C (B, v, screen) = {c 1 , c 2 , c 3 , … , c n } Select exactly one constraint for each view g 1 ⇒ (B.left = A.right + m L ) (c 1 ) g 2 ⇒ (B.left = A.left + m L ) Boolean variables (c 2 ) denoting whether … constraint was selected g n ⇒ ((1-b)*B.left + b*B.right = … ) (c n )

Download Presentation
Download Policy: The content available on the website is offered to you 'AS IS' for your personal information and use only. It cannot be commercialized, licensed, or distributed on other websites without prior consent from the author. To download a presentation, simply click this link. If you encounter any difficulties during the download process, it's possible that the publisher has removed the file from their server.

Recommend

Goals Why relational learning? Review of logic programming Examples for

Goals Why relational learning? Review of logic programming Examples for

(Statistical) Relational Learning A E Kristian Kersting 1 Goals Why relational learning? Review of logic programming Examples for (statistical) relational models (Vanilla) relational learning approach nFOIL,

901 views • 48 slides
Texture Synthesis Given a texture, create more CS176: Texture Synthesis All examples from Wei

Texture Synthesis Given a texture, create more CS176: Texture Synthesis All examples from Wei

Texture Synthesis Given a texture, create more CS176: Texture Synthesis All examples from Wei &amp; Levoy CS 176 Winter 2011 CS 176 Winter 2011 1 2 Texture Synthesis Texture Synthesis Dont expect too much And amazing successes All

347 views • 3 slides
Towards Layout-Friendly High-Level Synthesis Jason Cong UCLA Bin Liu UCLA Peking University

Towards Layout-Friendly High-Level Synthesis Jason Cong UCLA Bin Liu UCLA Peking University

Towards Layout-Friendly High-Level Synthesis Jason Cong UCLA Bin Liu UCLA Peking University Guojie Luo Raghu Prabhakar UCLA Outline High-level synthesis and layout-friendly architecture Evaluation of the impact of high-level

719 views • 37 slides
CS6710 Tool Suite Verilog Sim Synopsys Behavioral Synthesis Verilog Structural Verilog

CS6710 Tool Suite Verilog Sim Synopsys Behavioral Synthesis Verilog Structural Verilog

CS6710 Tool Suite Verilog Sim Synopsys Behavioral Synthesis Verilog Structural Verilog Cadence Your Encounter Library Digital Impl. Circuit Verilog sim Layout Cadence Cadence LVS AutoRouter Virtuoso Composer Layout-XL Layout

899 views • 63 slides
CSS Flexbox Layout Joan Boone jpboone@email.unc.edu Slide 1 Topics Part 1: Flexbox Layout

CSS Flexbox Layout Joan Boone jpboone@email.unc.edu Slide 1 Topics Part 1: Flexbox Layout

INLS 572 Web Development CSS Flexbox Layout Joan Boone jpboone@email.unc.edu Slide 1 Topics Part 1: Flexbox Layout Overview Part 2: Examples: 2-3 column layouts Part 3: Flexbox for Navigation Part 4: Examples: Centering Content, Media

888 views • 31 slides
Query by Analogical Examples: Relational Search Using Web Search Engine Indices by: Lohit Jain

Query by Analogical Examples: Relational Search Using Web Search Engine Indices by: Lohit Jain

Query by Analogical Examples: Relational Search Using Web Search Engine Indices by: Lohit Jain (11390) Advisor: Prof Amitabha Mukerjee Motivation Relational search is an effective way to obtain information in an unknown field for users. For

475 views • 16 slides
A Step Beyond the State of the Art Robust Model Predictive Control Synthesis Methods by c

A Step Beyond the State of the Art Robust Model Predictive Control Synthesis Methods by c

A Step Beyond the State of the Art Robust Model Predictive Control Synthesis Methods by c Sa sa V. Rakovi (based on recent collaborative research with B. Kouvaritakis, M. Cannon &amp; C. Panos) ISR, University of Maryland

1.11k views • 86 slides
CS6710 Tool Suite Verilog-XL Synopsys Behavioral Synthesis Verilog Structural Verilog

CS6710 Tool Suite Verilog-XL Synopsys Behavioral Synthesis Verilog Structural Verilog

CS6710 Tool Suite Verilog-XL Synopsys Behavioral Synthesis Verilog Structural Verilog Cadence Your SOC Encounter Library Circuit Verilog-XL CSI Layout Cadence Cadence LVS AutoRouter Virtuoso Composer Layout-XL Layout

811 views • 55 slides
Layout Dynamic layout Layout design pattern Layout strategies 2 Dynamic Layout Applications

Layout Dynamic layout Layout design pattern Layout strategies 2 Dynamic Layout Applications

Layout Dynamic layout Layout design pattern Layout strategies 2 Dynamic Layout Applications need to be able to adjust the presentation of our interfaces. We need to dynamically reposition and resize our content in response to: Change in

681 views • 28 slides
Layout Dynamic layout Layout design pattern Layout strategies 2 Dynamic Layout Applications

Layout Dynamic layout Layout design pattern Layout strategies 2 Dynamic Layout Applications

Layout Dynamic layout Layout design pattern Layout strategies 2 Dynamic Layout Applications need to be able to adjust the presentation of our interfaces. We need to dynamically reposition and resize our content in response to: Change in

594 views • 26 slides
Optimal and Robust controller Synthesis Using Energy Timed Automata with Uncertainty Giovanni

Optimal and Robust controller Synthesis Using Energy Timed Automata with Uncertainty Giovanni

Optimal and Robust controller Synthesis Using Energy Timed Automata with Uncertainty Giovanni Bacci, Patricia Bouyer, Uli Fahrenberg, Kim G. Larsen, Nicolas Markey, Pierre-Alain Reynier Presentation based on a paper accepted for publication at

672 views • 36 slides
Relational Algebra Relational Query Languages Recall: Query = Retrieval Program Language

Relational Algebra Relational Query Languages Recall: Query = Retrieval Program Language

Relational Algebra Relational Query Languages Recall: Query = Retrieval Program Language Examples: Theoretical: 1. Relational Algebra 2. Relational Calculus a. Tuple Relational Calculus (TRC) b. Domain Relational Calculus (DRC)

1.23k views • 44 slides
Synthesis and optimization of railway signalling layouts Bjrnar Luteberget FMCAD student

Synthesis and optimization of railway signalling layouts Bjrnar Luteberget FMCAD student

Synthesis and optimization of railway signalling layouts Bjrnar Luteberget FMCAD student forum, Oct 31, 2018 Layout of signals and detectors Layout of signals and detectors Layout of signals and detectors Layout of signals and detectors

316 views • 9 slides
Robust Analysis and Synthesis for Linear Parameter Varying Systems Peter Seiler University of

Robust Analysis and Synthesis for Linear Parameter Varying Systems Peter Seiler University of

Robust Analysis and Synthesis for Linear Parameter Varying Systems Peter Seiler University of Minnesota A EROSPACE E NGINEERING AND M ECHANICS Research Areas Jen Annoni Bin Hu Parul Singh Inchara Lakshminarayan Shu Wang Raghu Venkataraman

1.1k views • 57 slides
Model averaging for robust extrapolation in evidence synthesis over 1 , Simon Wandel 2 , Tim

Model averaging for robust extrapolation in evidence synthesis over 1 , Simon Wandel 2 , Tim

Model averaging for robust extrapolation in evidence synthesis over 1 , Simon Wandel 2 , Tim Friede 1 Christian R 1 Department of Medical Statistics, University Medical Center G otingen, G otingen, Germany 2 Novartis Pharma AG, Basel,

624 views • 31 slides
Towards Robust Detection of Adversarial Examples Tianyu Pang, Chao Du, Yinpeng Dong

Towards Robust Detection of Adversarial Examples Tianyu Pang, Chao Du, Yinpeng Dong

Towards Robust Detection of Adversarial Examples Tianyu Pang, Chao Du, Yinpeng Dong and Jun Zhu Department of Computer Science and Technology Tsinghua University TSAIL NeurIPS | 2018 Adversarial Examples From

590 views • 10 slides
1 Further information: go.ifrs.org/IFRS-17-implementation and IFRS 17 webcasts YouTube playlist:

1 Further information: go.ifrs.org/IFRS-17-implementation and IFRS 17 webcasts YouTube playlist:

1 Further information: go.ifrs.org/IFRS-17-implementation and IFRS 17 webcasts YouTube playlist: https://www.youtube.com/playlist?list=PLrLeeuMbuaUeLNX7Qoqlq7Oh3csegFwYn 2 3 4 Further information: IFRS 17 paragraph 32 IFRS 17 Appendix A

559 views • 23 slides
Linear, Binary SVM Classifiers COMPSCI 371D Machine Learning COMPSCI 371D Machine

Linear, Binary SVM Classifiers COMPSCI 371D Machine Learning COMPSCI 371D Machine

Linear, Binary SVM Classifiers COMPSCI 371D Machine Learning COMPSCI 371D Machine Learning Linear, Binary SVM Classifiers 1 / 17 Outline 1 What Linear, Binary SVM Classifiers Do 2 Margin 3 Loss and Regularized Risk 4 Training an SVM is

510 views • 17 slides
Does aid reduce inequality? Evidence for Latin America David Castells-Quintana AQR-IREA.

Does aid reduce inequality? Evidence for Latin America David Castells-Quintana AQR-IREA.

Does aid reduce inequality? Evidence for Latin America David Castells-Quintana AQR-IREA. Universidad de Barcelona, Jos Mara Larr Universidad CEU San Pablo larram@ceu.es MOTIVATION &amp; FRAMEWORK POVERTY within - + income between

533 views • 20 slides
LITTLE VALUE CREATION, ARTICULATION AND PROPAGATING FORCES : A HYPOTHESIS FOR THE MEXICAN

LITTLE VALUE CREATION, ARTICULATION AND PROPAGATING FORCES : A HYPOTHESIS FOR THE MEXICAN

LITTLE VALUE CREATION, ARTICULATION AND PROPAGATING FORCES : A HYPOTHESIS FOR THE MEXICAN MANUFACTURING SECTOR Authors: Santiago Roca Luis Simabuko Escuela Escuela de Administracin e Administracin de Negocios de Negocios para para

654 views • 40 slides
On the Security Margin of TinyJAMBU with Refined Differential and Linear Cryptanalysis Dhiman Saha

On the Security Margin of TinyJAMBU with Refined Differential and Linear Cryptanalysis Dhiman Saha

On the Security Margin of TinyJAMBU with Refined Differential and Linear Cryptanalysis Dhiman Saha 1 Yu Sasaki 2 Danping Shi 3,4 Ferdinand Sibleyras 5 Siwei Sun 3,4 Yingjie Zhang 3,4 1 de.ci.phe.red Lab, Department of Electrical Engineering and

444 views • 40 slides
CSS Styl e WHAT IS CSS? language for specifying the presentations of Web documents

CSS Styl e WHAT IS CSS? language for specifying the presentations of Web documents

CS 498RK SPRING 2019 Cascadin g Sheet s CSS Styl e WHAT IS CSS? language for specifying the presentations of Web documents www.w3.org/TR/CSS/ IF THERE WAS NO CSS tex t i n image s Hkon Wium Lie Interview Timelin e 1993: 1st HTML spec

1.29k views • 41 slides
CSC 411 Lecture 9: SVMs and Boosting Roger Grosse, Amir-massoud Farahmand, and Juan Carrasquilla

CSC 411 Lecture 9: SVMs and Boosting Roger Grosse, Amir-massoud Farahmand, and Juan Carrasquilla

CSC 411 Lecture 9: SVMs and Boosting Roger Grosse, Amir-massoud Farahmand, and Juan Carrasquilla University of Toronto UofT CSC 411: 09-Classification Odds and Ends 1 / 34 Overview Support Vector Machines Connection between Exponential Loss

387 views • 34 slides
Support Vector Machines INFO-4604, Applied Machine Learning University of Colorado Boulder

Support Vector Machines INFO-4604, Applied Machine Learning University of Colorado Boulder

Support Vector Machines INFO-4604, Applied Machine Learning University of Colorado Boulder September 27, 2018 Prof. Michael Paul Today Two important concepts: Margins Kernels Large Margin Classification Linear Predictions

709 views • 27 slides

More recommend