Generating photo manipulation tutorials by demonstration

We present a demonstration-based system for automatically generating succinct step-by-step visual tutorials of photo manipulations. An author first demonstrates the manipulation using an instrumented version of GIMP that records all changes in interface and application state. From the example recording, our system automatically generates tutorials that illustrate the manipulation using images, text, and annotations. It leverages automated image labeling (recognition of facial features and outdoor scene structures in our implementation) to generate more precise text descriptions of many of the steps in the tutorials. A user study comparing our automatically generated tutorials to hand-designed tutorials and screen-capture video recordings finds that users are 20--44% faster and make 60--95% fewer errors using our tutorials. While our system focuses on tutorial generation, we also present some initial work on generating content-dependent macros that use image recognition to automatically transfer selection operations from the example image used in the demonstration to new target images. While our macros are limited to transferring selection operations we demonstrate automatic transfer of several common retouching techniques including eye recoloring, whitening teeth and sunset enhancement.

[1]  Brad A. Myers,et al.  A system-wide macro facility based on aggregate events: a proposal , 1993 .

[2]  Susan M. Harrison A comparison of still, animated, or nonillustrated on-line help with written or spoken instructions in a graphical user interface , 1995, CHI '95.

[3]  Brad A. Myers,et al.  Pursuit: graphically representing programs in a demonstrational visual shell , 1994, CHI Conference Companion.

[4]  David Salesin,et al.  Adaptive grid-based document layout , 2003, ACM Trans. Graph..

[5]  Caitlin Kelleher,et al.  Stencils-based tutorials: design and evaluation , 2005, CHI.

[6]  Marwan Mattar,et al.  Labeled Faces in the Wild: A Database forStudying Face Recognition in Unconstrained Environments , 2008 .

[7]  Henry Lieberman,et al.  Watch what I do: programming by demonstration , 1993 .

[8]  Rob Miller,et al.  Automation and customization of rendered web pages , 2005, UIST.

[9]  Susan Palmiter,et al.  An evaluation of animated demonstrations of learning computer-based tasks , 1991, CHI.

[10]  Frédo Durand,et al.  Two-scale tone management for photographic look , 2006, SIGGRAPH 2006.

[11]  Steven K. Feiner,et al.  A history-based macro by example system , 1992, UIST '92.

[12]  R. Caplan,et al.  Skin , 1961, Your Baby's First Year.

[13]  Yi Zhou,et al.  Bayesian tangent shape model: estimating shape and pose parameters via Bayesian inference , 2003, 2003 IEEE Computer Society Conference on Computer Vision and Pattern Recognition, 2003. Proceedings..

[14]  Tessa A. Lau,et al.  Sheepdog: learning procedures for technical support , 2004, IUI '04.

[15]  Pat Hanrahan,et al.  Identification and validation of cognitive design principles for automated generation of assembly instructions , 2004, AVI.

[16]  L. R. Novick,et al.  Folding a fish, making a mushroom: The role of diagrams in executing assembly procedures , 2000, Memory & cognition.

[17]  Barry Huggins,et al.  Photoshop Retouching Cookbook for Digital Photographers (Cookbooks (O'Reilly)) , 2005 .

[18]  Alexei A. Efros,et al.  Geometric context from a single image , 2005, Tenth IEEE International Conference on Computer Vision (ICCV'05) Volume 1.

[19]  David Salesin,et al.  Image Analogies , 2001, SIGGRAPH.

[20]  Takeo Igarashi,et al.  An application-independent system for visualizing user operation history , 2008, UIST '08.

[21]  Xiaoyang Mao,et al.  Visualizing histories for selective undo and redo , 1998, Proceedings. 3rd Asia Pacific Computer Human Interaction (Cat. No.98EX110).

[22]  Henry Lieberman,et al.  Mondrian: a teachable graphical editor , 1993, INTERCHI.

[23]  Takeo Igarashi,et al.  Generating photo manipulation tutorials by demonstration , 2009, SIGGRAPH 2009.

[24]  Pat Hanrahan,et al.  Designing effective step-by-step assembly instructions , 2003, ACM Trans. Graph..

[25]  John Hart,et al.  ACM Transactions on Graphics , 2004, SIGGRAPH 2004.

[26]  Eser Kandogan,et al.  Koala: capture, share, automate, personalize business processes on the web , 2007, CHI.

[27]  Harold R. Booher Relative Comprehensibility of Pictorial Information and Printed Words in Proceduralized Instructions , 1975 .

[28]  Kevin Knabe Apple guide: a case study in user-aided design of online help , 1995, CHI '95.

[29]  Tessa A. Lau,et al.  DocWizards: a system for authoring follow-me documentation wizards , 2005, UIST.

[30]  Matthew Kay,et al.  Ingimp: introducing instrumentation to an end-user open source application , 2008, CHI.

[31]  S. Su Visualizing , Editing , and Inferring Structure in 2 D Graphics , 2022 .

[32]  Steven K. Feiner,et al.  A grid-based approach to automating display layout , 1998 .

[33]  Alexei A. Efros,et al.  Image quilting for texture synthesis and transfer , 2001, SIGGRAPH.