Live visual feedback generated for source code

Abstract

The invention relates to live visual feedback generated for source code. A method of facilitating live feedback for code generation includes generating a first source code based on a user configuration, presenting the generated first source code in a live preview user interface, and obtaining a change in the user configuration. The method further includes, in response to the obtaining of the first change: generating a second source code based on the first change; calculating the difference between the second source code and the first source code; and presenting the second source code in the live preview user interface by: visually signaling a correspondence between the first change and a portion of the second source code associated with the difference; and visually differentiating the portion of the second source code from other portions of the second source code.

Description

Technical Field

[0001] The present disclosure relates to the fields of computer programming and human-computer interaction. The present disclosure more particularly relates to source code generation and real-time visual feedback. Background Art

[0002] Source code generation tools can allow programmers or other users to inspect user code as it is generated or compiled. They can generate code based on user configurations and dynamically introduce new source files into the user's assembly. The user can then generate code that is executed at compile time.

[0003] All subject matter discussed in the background section is not necessarily prior art, nor should it be assumed to be prior art simply because of its discussion in the background section. Along these lines, any identification of a problem in the prior art or a problem associated with such subject matter discussed in the background section should not be considered prior art unless it is explicitly stated to be prior art. Rather, the discussion of any subject matter in the background section should be considered as part of a method by the inventor to solve a particular problem, which may itself be inventive. Summary of the invention

[0004] Source code generators can provide source code to end users based on selections, parameters, data sources, or other user configurations performed via a graphical user interface (GUI). However, it may be difficult for end users to understand how user configurations performed via a GUI affect the associated source code file(s) in text format. Embodiments of the technology described in the present disclosure are directed to providing immediate or real-time feedback on the impact of source code generation caused by user configurations, thereby improving programming efficiency and flexibility via a novel human-computer interaction framework.

[0005] Embodiments of the present disclosure provide a computer-implemented method for facilitating live feedback on code generation. The method includes: generating a first source code based on at least one user configuration for code generation via a configuration user interface; presenting the generated first source code in a live preview user interface; and obtaining a first change of at least one user configuration for code generation via the configuration user interface. The method also includes, in response to obtaining the first change of at least one user configuration: generating a second source code based on the first change of at least one user configuration for code generation; calculating one or more differences between the second source code and the first source code; and presenting the second source code in the live preview user interface by the following operations: visually signaling the correspondence between the first change of at least one user configuration for code generation and one or more parts of the second source code, the one or more parts being associated with one or more differences between the second source code and the first source code; and visually distinguishing one or more parts of the second source code from other parts of the second source code, the one or more parts being associated with one or more differences between the second source code and the first source code.

[0006] Embodiments of the present disclosure provide a non-transitory computer-readable medium storing content that causes one or more processors to perform an action. The action includes: generating a first source code based on at least one user configuration for code generation via a configuration user interface; presenting the generated first source code in a live preview user interface; and obtaining a first change in at least one user configuration for code generation via a configuration user interface. The action also includes, in response to obtaining a first change in at least one user configuration: generating a second source code based on a first change in at least one user configuration for code generation; calculating one or more differences between the second source code and the first source code; and presenting the second source code in a live preview user interface by: visually signaling a correspondence between the first change in at least one user configuration for code generation and one or more parts of the second source code, the one or more parts being associated with one or more differences between the second source code and the first source code; and visually distinguishing one or more parts of the second source code from other parts of the second source code, the one or more parts being associated with one or more differences between the second source code and the first source code.

[0007] An embodiment of the present disclosure provides a system, which includes one or more processors and a computing device, which is coupled to the one or more processors and configured to perform an action. The action includes: generating a first source code based on at least one user configuration for code generation via a configuration user interface; presenting the generated first source code in a live preview user interface; and obtaining a first change of at least one user configuration for code generation via the configuration user interface. The action also includes, in response to the acquisition of the first change of at least one user configuration: generating a second source code based on the first change of at least one user configuration for code generation; calculating one or more differences between the second source code and the first source code; and presenting the second source code in the live preview user interface by the following operations: visually signaling the correspondence between the first change of at least one user configuration for code generation and one or more parts of the second source code, the one or more parts being associated with one or more differences between the second source code and the first source code; and visually distinguishing one or more parts of the second source code from other parts of the second source code, the one or more parts being associated with one or more differences between the second source code and the first source code. BRIEF DESCRIPTION OF THE DRAWINGS

[0008] Figure 1 is a block diagram of a network environment for source code generation and feedback according to some embodiments.

[0009] Figure 2 Illustrated is an example process for generating source code using the code generation and feedback service.

[0010] Figure 3 A flow diagram is illustrated of an example process for facilitating live feedback on source code generation in accordance with some embodiments.

[0011] Figure 4 is a block diagram illustrating elements of an example computing device or system used in accordance with some embodiments.

[0012] Figure 5 An example of a configuration user interface and an example of a live preview user interface are shown in accordance with some embodiments.

[0013] Figure 6 Examples of changes made to a user configuration via a configuration user interface and presentation of source code generated based thereon are shown in accordance with some embodiments.

[0014] Figure 7 An example of displaying multiple source code files in a sub-context of a live preview user interface is shown in accordance with some embodiments.

[0015] Figure 8An example of visually indicating source code line changes using an identifier of a live preview user interface subcontext is shown in accordance with some embodiments.

[0016] Fig. 9 An example of such a mini-map is shown and how it relates to the main display area of ​​a live preview interface showing a focused portion of the source code, according to some embodiments. DETAILED DESCRIPTION

[0017] Figure 1 is a block diagram of a network environment 100 for source code generation and feedback according to some embodiments. The environment 100 includes one or more user devices 102, which can be used by programmers, system developers, or other users to communicate with a code generation and feedback service 106. Examples of user devices 102 include personal computers, workstations, laptops, servers, tablet computers, smart phones, smart watches, or other portable or non-portable computing devices.

[0018] In some embodiments, the user device 102 may communicate with the code generation and feedback service 106 via a communication connection 110. The communication connection 110 may include one or more computer networks, one or more wired or wireless networks, satellite transmission media, one or more cellular networks, or some combination thereof. The communication connection 110 may include a publicly accessible network of linked networks that may be operated by various different parties, such as the Internet. The communication connection 110 may include other network types, such as one or more private networks (e.g., a company or university network that is completely or partially inaccessible to non-privileged users), and may include combinations thereof, such that (for example) one or more private networks have access to one or more public networks and / or are accessed from one or more public networks. In addition, the communication connection 110 may include various types of wired and / or wireless networks in various situations, including satellite transmissions. In addition, the communication connection 110 may include one or more communication interfaces, including radio frequency (RF) transceivers, cellular communication interfaces and antennas, USB interfaces, ports and connections (e.g., USB Type A, USB Type B, USB Type C (or USB-C), mini USB A, mini USB B, micro USB A, micro USB C), other RF transceivers (e.g., infrared transceivers, USB based on IEEE 802.15.4 specifications), and other communication interfaces. Network connection interface, connection interface, wireless Ethernet ("Wi-Fi") interface, short-range wireless (e.g. ) interface, etc.

[0019] In some embodiments, the code generation and feedback service 106 may be cloud-based or implemented in software and / or hardware form on one or more remote computing devices, including computers, mobile devices, tablet computers, smart phones, handheld computers, and / or workstations, etc. In some embodiments, the code generation and feedback service 106 is partially or completely implemented on one or more user devices 102.

[0020] Figure 2 An example process 200 for generating source code using, at least in part, a code generation and feedback service 106 is illustrated. In block 202, (multiple) templates or other code generation guidance frameworks are obtained. In block 204, a data context is obtained that will be fed into, paired with, or otherwise associated with the (multiple) templates. In various embodiments, obtaining the data context includes obtaining (multiple) user configurations via a GUI. In block 210, one or more (multiple) template engines parse the (multiple) templates in association with the data context and generate source code based on target language grammar, conventions, standards, or other requirements. In block 212, the generated source code is presented, stored, or otherwise used.

[0021] Figure 3 A flow chart of an example process 300 for facilitating live feedback on source code generation according to some embodiments of the presently disclosed technology is illustrated. Illustratively, process 300 may be implemented in part or in whole by code generation and feedback service 106. In some embodiments, at least a portion of process 300 is implemented by one or more user devices 102. In some embodiments, at least a portion of process 300 is performed in real time relative to any user configuration changes for code generation.

[0022] In box 302, process 300 includes generating and presenting a first source code based on at least one user configuration for code generation. The user configuration can be performed via a configuration user interface, and the generated first source code can be presented in a live preview user interface. The configuration user interface and the live preview user interface can be panels, frames, regions or other contexts of a single display, or can be different independent displays. (Multiple) user interfaces can be generated by code generation and feedback service 106 and presented by one or more user devices 102. Figure 5 A configuration panel (left side) is shown as an example of a configuration user interface including a user configuration - the value of one of the "Basic Parameters", "Default Polynomial State" is "Disabled". Figure 5 Also shown is a live preview panel (right side) as an example of a live preview user interface including at least a portion of source code generated based on a user configuration.

[0023] In block 304, process 300 includes obtaining changes to a user configuration for code generation. The changes may be made via a configuration user interface. Figure 6 An example of changes made to the user configuration is shown. More specifically, in the configuration panel (left side), the "Default Polynomial State" has been changed from Figure 5 Change the "disable" in Figure 6 The changed configuration may be highlighted or otherwise presented to distinguish it from other content shown in the configuration user interface, such as highlighting that the change was the last action performed by the user via the configuration user interface.

[0024] In block 306, process 300 includes generating and presenting a second source code based on the changes in the user configuration to visually feedback the impact of the changes on the generated source code. Illustratively, the second source code is generated based on the user configuration including the changes, the difference between the second source code and the first source code is calculated or otherwise determined, and the second source code is presented. Figure 6 An example of rendering the second source code via the live preview panel (right side) is shown, including highlight portion(s) corresponding to the difference(s).

[0025] The second source code can be presented in the live preview user interface by visually signaling the correspondence between the change of the user configuration and the (multiple) parts of the second source code (the (multiple) parts of the second source code are associated with the (multiple) differences between the second source code and the first source code). This can be achieved by presenting the change of the user configuration and those parts of the second source code with at least one of the same flashing frequency, rhythm or other pattern, the same highlight, the same format, the same size, the same font or the same color. Alternatively or in addition, this can be achieved by presenting an animation of at least one arrow, line or connection from the user configuration change to those parts of the second source code. Those parts of the second source code can be presented in a manner that is visually distinguishable from the other parts of the second source code, such as with different flashing frequencies, rhythms or other patterns, different highlights, different formats, different sizes, different fonts or different colors.

[0026] In some embodiments, the second source code includes a plurality of source code files, each source code file being shown in a respective tab, sub-panel, sub-frame, or other sub-context of the live preview user interface. Figure 7 An example of displaying multiple source code files via different subcontexts (e.g., different tabs) of a live preview user interface is shown. In these embodiments, visually distinguishing those portions of the second source code includes visually indicating source code line changes using an identifier of the subcontext. Figure 8An example of visually indicating source code line changes using an identifier of a live preview user interface subcontext (eg, a tab) is shown.

[0027] In some embodiments, visually distinguishing those portions of the second source code from other portions of the second source code includes presenting a minimap to visually distinguish at least a subset of those portions that would be out of display range or hidden in the live preview user interface without the minimap. Fig. 9 An example of such a mini-map 901 is shown and how it relates to the main display area of ​​the live preview user interface showing a focused portion 902 of the second source code.

[0028] In some embodiments, process 300 includes obtaining a second change of at least one user configuration for code generation, for example, via a configuration user interface. The second change can be a subsequent change in time of the same user configuration in box 304, a concurrent or partially overlapping change in time of a different user configuration, or a subsequent change in time of a different user configuration. The second change can be displayed in a different manner from the change in box 304 (with a different flashing frequency, rhythm or other pattern, different highlight, different format, different size, different font or different color, or a different subcontext of the configuration user interface).

[0029] In response to obtaining the second change, a third source code may be generated based on a user configuration including the second change. Difference(s) between the third source code and at least one of the first source code or the second source code may be calculated or otherwise determined, and the third source code may be presented (e.g., in a live preview user interface). Presenting the third source code may include visually signaling a correspondence between the second change and the portion(s) of the third source code associated with the difference(s), and / or visually distinguishing those portions of the third source code from other portions of the third source code.

[0030] In some embodiments, presenting the third source code in the live preview user interface includes merging or otherwise retaining the second source code within the third source code and visually distinguishing the portion(s) of the second source code associated with the difference(s) between the second source code and the first source code from other portions of the second source code. In some embodiments, the presentation of the third source code and the presentation of the second source code are independent and / or concurrent, for example, via respective subcontexts of the live preview user interface.

[0031] Those skilled in the art will understand that Figure 2 and 3The various operations depicted and described elsewhere herein may be modified in various ways. For example, the specific order of operations may be rearranged; some operations may be performed in parallel; illustrated operations may be omitted or other operations may be included; illustrated operations may be divided into one or more component operations, or multiple illustrated operations may be combined into a single operation, etc.

[0032] Figure 4 4 is a block diagram illustrating elements of an example computing device or system 400 used in accordance with some embodiments of the techniques described herein. Illustratively, computing device 400 corresponds to a computing device that implements code generation and feedback service 106 or at least a portion thereof. In some embodiments, computing device 400 corresponds to user device 102.

[0033] In some embodiments, one or more general or special computing systems or devices may be used to implement computing device 400. In addition, in some embodiments, computing device 400 may include one or more different computing systems or devices and may span distributed locations. Figure 4 Each block shown may represent one or more such blocks, or may be combined with other blocks, depending on the specific embodiment. Furthermore, the feedback manager 422 may be implemented in software, hardware, firmware, or some combination to achieve the capabilities described herein.

[0034] As shown, computing device 400 includes computer memory ("memory") 401, display 402 (including but not limited to light emitting diode (LED) panels, cathode ray tube (CRT) displays, liquid crystal displays (LCD), touch screen displays, projectors, etc.), one or more central processing units (CPUs) or other processors 403, input / output (I / O) devices 404 (e.g., keyboard, mouse, RF or infrared receiver, Universal Serial Bus (USB) port, High Definition Multimedia Interface (HDMI) port, other communication ports, etc.), other computer readable media 405, network connection 406, power supply (or power interface) 407. Feedback manager 422 is shown as residing in memory 401. In other embodiments, some portions of the content of feedback manager 422 and some or all components may be stored on and / or sent through other computer readable media 405. Components of computing device 400 and feedback manager 422 may execute on one or more processors 403 and implement applicable functions described herein. In some embodiments, feedback manager 422 can operate as, as part of, in conjunction with, and / or in cooperation with other software applications stored in memory 401 or on various other computing devices. In some embodiments, feedback manager 422 also facilitates communication with peripheral devices via I / O devices 404, or with another device or system via network connection 406.

[0035] One or more feedback modules 424 are configured to perform actions directly or indirectly related to source code generation, presentation, and feedback as described herein. In some embodiments, feedback module(s) 424 stores, retrieves, or otherwise accesses at least some feedback-related data on some portion of feedback data storage 416 or other data storage internal or external to computing device 400. In various embodiments, at least some of feedback modules 424 may be implemented in software or hardware.

[0036] Other codes or programs 430 (e.g., other data processing modules, communication modules, web servers, etc.) and potential other data repositories (such as data repositories 420 for storing other data) may also reside in the memory 401 and may be executed on one or more processors 403. It is worth noting that Figure 4 One or more components in may or may not be present in any particular implementation. For example, some embodiments may not provide other computer-readable media 405 or display 402.

[0037] In some embodiments, computing device 400 and feedback manager 422 include (a plurality of) APIs that provide programmatic access for adding, removing, or changing one or more functions of computing device 400. In some embodiments, components / modules of computing device 400 and feedback manager 422 are implemented using standard programming techniques. For example, feedback manager 422 may be implemented as an executable file running on processor(s) 403 along with one or more static or dynamic libraries. In other embodiments, computing device 400 and feedback manager 422 may be implemented as instructions processed by a virtual machine executed as one of other programs 430. In general, such example embodiments may be implemented using a range of programming languages ​​known in the art, including representative implementations of various programming language paradigms, including but not limited to object-oriented (e.g., Java, C++, C#, Visual Basic.NET, Smalltalk, etc.), functional (e.g., ML, Lisp, Scheme, etc.), procedural (e.g., C, Pascal, Ada, Modula, etc.), scripting (e.g., Perl, Ruby, Python, JavaScript, VBScript, etc.), or declarative (e.g., SQL, Prolog, etc.).

[0038] In a software or firmware implementation, the instructions stored in the memory, when executed, configure one or more processors of the computing device 400 to perform the functions of the feedback manager 422. In some embodiments, the instructions cause the one or more processors 403 or some other processor(s) (such as an I / O controller / processor) to perform at least some of the functions described herein.

[0039] The above embodiments may also use known or other synchronous or asynchronous client-server computing techniques. However, the various components may also be implemented using more monolithic programming techniques, such as executable files running on a single CPU computer system, or alternatively decomposed using various structured techniques known in the art, including but not limited to multiprogramming, multithreading, client-server or peer-to-peer, executed on one or more computer systems, each of which has one or more CPUs or other processors. Some embodiments may be executed concurrently and asynchronously, and communicate using message passing techniques. The implementation of the feedback manager 422 also supports equivalent synchronous embodiments. Moreover, other functions may be implemented and / or executed by each component / module in a different order and by different components / modules, but the functions of the computing device 400 and the feedback manager 422 may still be implemented.

[0040] Additionally, programming interfaces to data stored as part of computing device 400 and feedback manager 422 may be available through standard mechanisms, such as through C, C++, C#, and Java APIs; libraries for accessing files, databases, or other data repositories; scripting languages ​​such as XML; or Web servers, FTP servers, NFS file servers, or other types of servers that provide access to stored data. Feedback data storage 416 and data repository 420 may be implemented as one or more database systems, file systems, or any other technology for storing such information, or any combination of the above, including implementations using distributed computing techniques.

[0041] Different configurations and locations of programs and data are contemplated for use with the techniques described herein. Various distributed computing technologies are suitable for implementing the components of the illustrated embodiments in a distributed manner, including but not limited to TCP / IP sockets, RPC, RMI, HTTP, and Web services (XML-RPC, JAX-RPC, SOAP, etc.). Other variations are possible. Other functionality may also be provided by each component / module, or existing functionality may be distributed between components / modules in different ways, but still implement the functionality of feedback manager 422.

[0042] Additionally, in some embodiments, some or all of the components of the computing device 400 and feedback manager 422 may be implemented or provided in other ways, such as at least in part in firmware and / or hardware, including but not limited to one or more application specific integrated circuits (“ASICs”), standard integrated circuits, controllers (e.g., by executing appropriate instructions, and including microcontrollers and / or embedded controllers), field programmable gate arrays (“FPGAs”), complex programmable logic devices (“CPLDs”), etc. Some or all of the system components and / or data structures may also be stored as content (e.g., as executable files or other machine-readable software instructions or structured data) on a computer-readable medium (e.g., as a hard disk; memory; a computer network, cellular wireless network, or other data transmission medium; or a portable media item such as a DVD or flash memory device that is read by an appropriate drive or via an appropriate connection) to enable the computer-readable medium and / or one or more associated computing systems or devices to execute or otherwise use or provide the content to perform at least some of the techniques described, or to configure the computer-readable medium and / or one or more associated computing systems or devices to execute or otherwise use or provide the content to perform at least some of the techniques described.

[0043] In some embodiments, a computer-implemented method for facilitating live feedback on code generation includes: generating a first source code based on at least one user configuration for code generation via a configuration user interface; presenting the generated first source code in a live preview user interface; and obtaining a first change of at least one user configuration for code generation via the configuration user interface. The method also includes, in response to obtaining the first change of at least one user configuration: generating a second source code based on the first change of at least one user configuration for code generation; calculating one or more differences between the second source code and the first source code; and presenting the second source code in the live preview user interface by: visually signaling a correspondence between the first change of at least one user configuration for code generation and one or more portions of the second source code, the one or more portions being associated with one or more differences between the second source code and the first source code; and visually distinguishing the one or more portions of the second source code from other portions of the second source code, the one or more portions being associated with one or more differences between the second source code and the first source code.

[0044] In some embodiments, visually signaling a correspondence between a first change of at least one user configuration for code generation and one or more portions of a second source code, the one or more portions being associated with one or more differences between the second source code and the first source code, comprises: presenting the first change of at least one user configuration for code generation and the one or more portions of the second source code in at least one of a same blinking pattern, highlight, font, or color.

[0045] In some embodiments, visually signaling a correspondence between a first change in at least one user configuration for code generation and one or more portions of a second source code, the one or more portions being associated with one or more differences between the second source code and the first source code, comprises: presenting an animation of at least an arrow, a line, or a connection from the first change in at least one user configuration for code generation to the one or more portions of the second source code.

[0046] In some embodiments, the method further includes obtaining, via the configuration user interface, a second change of at least one user configuration for code generation; and in response to obtaining the second change of the at least one user configuration: generating a third source code based on the second change of the at least one user configuration for code generation; calculating one or more differences between the third source code and at least one of the first source code or the second source code; and presenting the third source code in a live preview user interface by: visually signaling a correspondence between the second change of the at least one user configuration for code generation and one or more portions of the third source code, the one or more portions being associated with the one or more differences between the third source code and at least one of the first source code or the second source code; and visually distinguishing the one or more portions of the third source code from other portions of the third source code, the one or more portions being associated with the one or more differences between the third source code and at least one of the first source code or the second source code.

[0047] In some embodiments, presenting the third source code in the live preview user interface includes: preserving, in the presentation of the third source code, a visual distinction of one or more portions of the second source code from other portions of the second source code, the one or more portions being associated with one or more differences between the second source code and the first source code. In some embodiments, the presentation of the third source code and the presentation of the second source code are independent and concurrent via respective subcontexts of the live preview user interface.

[0048] In some embodiments, the second source code includes a plurality of source code files that respectively correspond to respective subcontexts of the live preview user interface, and wherein visually distinguishing one or more portions of the second source code includes visually indicating source code line changes with one or more identifiers of the subcontexts.

[0049] In some embodiments, visually distinguishing one or more portions of the second source code from other portions of the second source code includes presenting a minimap to visually distinguish at least a subset of the one or more portions that would be hidden in the live preview user interface without the minimap.

[0050] In some embodiments, a non-transitory computer-readable medium stores content that causes one or more processors to perform an action. The action includes: generating a first source code based on at least one user configuration for code generation performed via a configuration user interface; presenting the generated first source code in a live preview user interface; and obtaining a first change of at least one user configuration for code generation via the configuration user interface. The action also includes, in response to obtaining the first change of at least one user configuration: generating a second source code based on the first change of at least one user configuration for code generation; calculating one or more differences between the second source code and the first source code; and presenting the second source code in the live preview user interface by: visually signaling a correspondence between the first change of at least one user configuration for code generation and one or more portions of the second source code, the one or more portions being associated with one or more differences between the second source code and the first source code; and visually distinguishing one or more portions of the second source code from other portions of the second source code, the one or more portions being associated with one or more differences between the second source code and the first source code.

[0051] In some embodiments, visually signaling a correspondence between a first change of at least one user configuration for code generation and one or more portions of a second source code, the one or more portions being associated with one or more differences between the second source code and the first source code, comprises: presenting the first change of at least one user configuration for code generation and the one or more portions of the second source code in at least one of a same blinking pattern, highlight, font, or color.

[0052] In some embodiments, visually signaling a correspondence between a first change of at least one user configuration for code generation and one or more portions of a second source code, the one or more portions being associated with one or more differences between the second source code and the first source code, comprises: presenting an animation of at least an arrow, a line, or a connection between the first change of at least one user configuration for code generation and the one or more portions of the second source code.

[0053] In some embodiments, the actions further include: obtaining, via a configuration user interface, a second change of at least one user configuration for code generation; and in response to obtaining the second change of at least one user configuration: generating a third source code based on the second change of at least one user configuration for code generation; calculating one or more differences between the third source code and at least one of the first source code or the second source code; and presenting the third source code in a live preview user interface by: visually signaling a correspondence between the second change of at least one user configuration for code generation and one or more portions of the third source code, the one or more portions being associated with the one or more differences between the third source code and at least one of the first source code or the second source code; and visually distinguishing the one or more portions of the third source code from other portions of the third source code, the one or more portions being associated with the one or more differences between the third source code and at least one of the first source code or the second source code.

[0054] In some embodiments, presenting the third source code in the live preview user interface includes: preserving, in the presentation of the third source code, a visual distinction of one or more portions of the second source code from other portions of the second source code, the one or more portions being associated with one or more differences between the second source code and the first source code. In some embodiments, the presentation of the third source code and the presentation of the second source code are independent and concurrent via respective subcontexts of the live preview user interface.

[0055] In some embodiments, the second source code includes a plurality of source code files that respectively correspond to respective subcontexts of the live preview user interface, and wherein visually distinguishing one or more portions of the second source code includes visually indicating source code line changes with one or more identifiers of the subcontexts.

[0056] In some embodiments, visually distinguishing one or more portions of the second source code from other portions of the second source code includes presenting a minimap to visually distinguish at least a subset of the one or more portions that would be hidden in the live preview user interface without the minimap.

[0057] In some embodiments, a system includes one or more processors and a computing device, the computing device being coupled to the one or more processors and configured to perform an action. The action includes: generating a first source code based on at least one user configuration for code generation via a configuration user interface; presenting the generated first source code in a live preview user interface; and obtaining a first change of at least one user configuration for code generation via the configuration user interface. The action also includes, in response to obtaining the first change of at least one user configuration: generating a second source code based on the first change of at least one user configuration for code generation; calculating one or more differences between the second source code and the first source code; and presenting the second source code in the live preview user interface by: visually signaling a correspondence between the first change of at least one user configuration for code generation and one or more portions of the second source code, the one or more portions being associated with one or more differences between the second source code and the first source code; and visually distinguishing one or more portions of the second source code from other portions of the second source code, the one or more portions being associated with one or more differences between the second source code and the first source code.

[0058] In some embodiments, visually signaling a correspondence between a first change of at least one user configuration for code generation and one or more portions of a second source code, the one or more portions being associated with one or more differences between the second source code and the first source code, comprises: presenting the first change of at least one user configuration for code generation and the one or more portions of the second source code in at least one of a same blinking pattern, highlight, font, or color.

[0059] In some embodiments, visually signaling a correspondence between a first change of at least one user configuration for code generation and one or more portions of a second source code, the one or more portions being associated with one or more differences between the second source code and the first source code, comprises: presenting an animation of at least an arrow, a line, or a connection between the first change of at least one user configuration for code generation and the one or more portions of the second source code.

[0060] In some embodiments, the actions further include: obtaining, via a configuration user interface, a second change of at least one user configuration for code generation; and in response to obtaining the second change of at least one user configuration: generating a third source code based on the second change of at least one user configuration for code generation; calculating one or more differences between the third source code and at least one of the first source code or the second source code; and presenting the third source code in a live preview user interface by: visually signaling a correspondence between the second change of at least one user configuration for code generation and one or more portions of the third source code, the one or more portions being associated with the one or more differences between the third source code and at least one of the first source code or the second source code; and visually distinguishing the one or more portions of the third source code from other portions of the third source code, the one or more portions being associated with the one or more differences between the third source code and at least one of the first source code or the second source code.

[0061] In some embodiments, presenting the third source code in the live preview user interface includes: preserving, in the presentation of the third source code, a visual distinction of one or more portions of the second source code from other portions of the second source code, the one or more portions being associated with one or more differences between the second source code and the first source code. In some embodiments, the presentation of the third source code and the presentation of the second source code are independent and concurrent via respective subcontexts of the live preview user interface.

[0062] In some embodiments, the second source code includes a plurality of source code files that respectively correspond to respective subcontexts of the live preview user interface, and wherein visually distinguishing one or more portions of the second source code includes visually indicating source code line changes with one or more identifiers of the subcontexts.

[0063] In some embodiments, visually distinguishing one or more portions of the second source code from other portions of the second source code includes presenting a minimap to visually distinguish at least a subset of the one or more portions that would be hidden in the live preview user interface without the minimap.

[0064] The various embodiments described above can be combined to provide other embodiments. In view of the above detailed description, these and other changes can be made to the embodiments. Generally, in the following claims, the terms used should not be interpreted as limiting the claims to the specific embodiments disclosed in this specification and the claims, but should be interpreted to include all possible embodiments and the full range of equivalents to which such claims are given. Therefore, the claims are not limited by the present disclosure.

Claims

1. A computer-implemented method for facilitating live feedback on code generation, the method comprising: generating a first source code based on at least one user configuration for code generation via a configuration user interface; presenting the generated first source code in a live preview user interface; obtaining, via the configuration user interface, a first change to the at least one user configuration for code generation; as well as In response to said obtaining of said first change of said at least one user configuration: generating second source code based on the first change to at least one user configuration for code generation; calculating one or more differences between the second source code and the first source code; as well as The second source code is presented in the live preview user interface by the following operations: visually signaling a correspondence between the first change of the at least one user configuration for code generation and one or more portions of the second source code, the one or more portions of the second source code being associated with the one or more differences between the second source code and the first source code; as well as The one or more portions of the second source code are visually distinguished from other portions of the second source code, the one or more portions of the second source code being associated with the one or more differences between the second source code and the first source code.

2. The method of claim 1 , wherein visually signaling a correspondence between the first change of the at least one user configuration for code generation and one or more portions of the second source code associated with the one or more differences between the second source code and the first source code comprises: Both the first change to the at least one user configuration for code generation and the one or more portions of the second source code are presented in at least one of a same blinking pattern, highlighting, size, font, or color.

3. The method of claim 1 , wherein visually signaling a correspondence between the first change of the at least one user configuration for code generation and one or more portions of the second source code associated with the one or more differences between the second source code and the first source code comprises: Animation of at least an arrow, line, or connection from the first change to the one or more portions of the second source code is presented.

4. The method according to claim 1, further comprising: obtaining, via the configuration user interface, a second change to the at least one user configuration for code generation; as well as In response to said obtaining of said second change of said at least one user configuration: generating third source code based on the second change to the at least one user configuration for code generation; calculating one or more differences between the third source code and at least one of the first source code or the second source code; as well as The third source code is presented in the live preview user interface by the following operations: visually signaling a correspondence between the second change of the at least one user configuration for code generation and one or more portions of the third source code, the one or more portions of the third source code being associated with the one or more differences between the third source code and the at least one of the first source code or the second source code; as well as The one or more portions of the third source code are visually distinguished from other portions of the third source code, the one or more portions of the third source code being associated with the one or more differences between the third source code and the at least one of the first source code or the second source code.

5. The method of claim 4, wherein presenting the third source code in the live preview user interface comprises: In the presentation of the third source code, visual distinction of the one or more portions of the second source code from other portions of the second source code is preserved, the one or more portions of the second source code being associated with the one or more differences between the second source code and the first source code.

6. The method of claim 4, wherein the presentation of the third source code and the presentation of the second source code are independent via respective sub-contexts of the live preview user interface.

7. The method of claim 1 , wherein the second source code comprises a plurality of source code files, each of the plurality of source code files corresponding to a respective subcontext of the live preview user interface, and wherein visually distinguishing the one or more portions of the second source code comprises visually indicating source code line changes with one or more identifiers of the subcontexts.

8. The method of claim 1 , wherein visually distinguishing the one or more portions of the second source code from other portions of the second source code comprises: A mini-map is presented to visually distinguish at least a subset of the one or more portions that would be hidden in the live preview user interface without the mini-map.

9. A non-transitory computer-readable medium storing content, the content causing one or more processors to perform actions, the actions comprising: generating a first source code based on at least one user configuration for code generation via a configuration user interface; presenting the generated first source code in a live preview user interface; obtaining, via the configuration user interface, a first change to the at least one user configuration for code generation; as well as In response to said obtaining of said first change of said at least one user configuration: generating second source code based on the first change to at least one user configuration for code generation; calculating one or more differences between the second source code and the first source code; as well as The second source code is presented in the live preview user interface by the following operations: visually signaling a correspondence between the first change of the at least one user configuration for code generation and one or more portions of the second source code, the one or more portions of the second source code being associated with the one or more differences between the second source code and the first source code; as well as The one or more portions of the second source code are visually distinguished from other portions of the second source code, the one or more portions of the second source code being associated with the one or more differences between the second source code and the first source code.

10. The computer-readable medium of claim 9, wherein visually signaling a correspondence between the first change to the at least one user configuration for code generation and one or more portions of the second source code associated with the one or more differences between the second source code and the first source code comprises: Both the first change to the at least one user configuration for code generation and the one or more portions of the second source code are presented in at least one of a same blinking pattern, highlighting, font, or color.

11. The computer-readable medium of claim 9, wherein visually signaling a correspondence between the first change to the at least one user configuration for code generation and one or more portions of the second source code associated with the one or more differences between the second source code and the first source code comprises: Animation of at least an arrow, line, or connection between the first change to the at least one user configuration for code generation and the one or more portions of the second source code is presented.

12. The computer-readable medium of claim 9, wherein the actions further comprise: obtaining, via the configuration user interface, a second change to the at least one user configuration for code generation; as well as In response to said obtaining of said second change of said at least one user configuration: generating third source code based on the second change to the at least one user configuration for code generation; calculating one or more differences between the third source code and at least one of the first source code or the second source code; as well as The third source code is presented in the live preview user interface by the following operations: visually signaling a correspondence between the second change of the at least one user configuration for code generation and one or more portions of the third source code, the one or more portions of the third source code being associated with the one or more differences between the third source code and the at least one of the first source code or the second source code; as well as The one or more portions of the third source code are visually distinguished from other portions of the third source code, the one or more portions of the third source code being associated with the one or more differences between the third source code and the at least one of the first source code or the second source code.

13. The computer-readable medium of claim 12, wherein presenting the third source code in the live preview user interface comprises: In the presentation of the third source code, visual distinction of the one or more portions of the second source code from other portions of the second source code is preserved, the one or more portions of the second source code being associated with the one or more differences between the second source code and the first source code.

14. The computer-readable medium of claim 12, wherein the rendering of the third source code and the rendering of the second source code via respective subcontexts of the live preview user interface are independent and concurrent.

15. The computer-readable medium of claim 9, wherein the second source code comprises a plurality of source code files, each of the plurality of source code files corresponding to a respective subcontext of the live preview user interface, and wherein visually distinguishing the one or more portions of the second source code comprises: Source code line changes are visually indicated using one or more identifiers of the subcontext.

16. The computer-readable medium of claim 9, wherein visually distinguishing the one or more portions of the second source code from other portions of the second source code comprises: A mini-map is presented to visually distinguish at least a subset of the one or more portions that would be hidden in the live preview user interface without the mini-map.

17. A system comprising: one or more processors; as well as A computing device coupled to the one or more processors and configured to perform actions comprising: generating a first source code based on at least one user configuration for code generation via a configuration user interface; presenting the generated first source code in a live preview user interface; obtaining, via the configuration user interface, a first change to the at least one user configuration for code generation; and In response to said obtaining of said first change of said at least one user configuration: generating second source code based on the first change to at least one user configuration for code generation; calculating one or more differences between the second source code and the first source code; and The second source code is presented in the live preview user interface by the following operations: visually signaling a correspondence between the first change of the at least one user configuration for code generation and one or more portions of the second source code, the one or more portions of the second source code being associated with the one or more differences between the second source code and the first source code; and The one or more portions of the second source code are visually distinguished from other portions of the second source code, the one or more portions of the second source code being associated with the one or more differences between the second source code and the first source code.

18. The system of claim 17, wherein visually signaling a correspondence between the first change of the at least one user configuration for code generation and one or more portions of the second source code associated with the one or more differences between the second source code and the first source code comprises: Both the first change to the at least one user configuration for code generation and the one or more portions of the second source code are presented in at least one of a same blinking pattern, highlighting, font, or color.

19. The system of claim 17, wherein visually signaling a correspondence between the first change of the at least one user configuration for code generation and one or more portions of the second source code associated with the one or more differences between the second source code and the first source code comprises: Animation of at least an arrow, line, or connection between the first change to the at least one user configuration for code generation and the one or more portions of the second source code is presented.

20. The system of claim 17, wherein the actions further comprise: obtaining, via the configuration user interface, a second change to the at least one user configuration for code generation; as well as In response to said obtaining of said second change of said at least one user configuration: generating third source code based on the second change to the at least one user configuration for code generation; calculating one or more differences between the third source code and at least one of the first source code or the second source code; as well as The third source code is presented in the live preview user interface by the following operations: visually signaling a correspondence between the second change of the at least one user configuration for code generation and one or more portions of the third source code, the one or more portions of the third source code being associated with the one or more differences between the third source code and the at least one of the first source code or the second source code; as well as The one or more portions of the third source code are visually distinguished from other portions of the third source code, the one or more portions of the third source code being associated with the one or more differences between the third source code and the at least one of the first source code or the second source code.

21. The system of claim 20, wherein presenting the third source code in the live preview user interface comprises: In the presentation of the third source code, visual distinction of the one or more portions of the second source code from other portions of the second source code is preserved, the one or more portions of the second source code being associated with the one or more differences between the second source code and the first source code.

22. The system of claim 20, wherein the presentation of the third source code and the presentation of the second source code via respective subcontexts of the live preview user interface are independent and concurrent.

23. The system of claim 17, wherein the second source code comprises a plurality of source code files, each of the plurality of source code files corresponding to a respective subcontext of the live preview user interface, and wherein visually distinguishing the one or more portions of the second source code comprises visually indicating source code line changes with one or more identifiers of the subcontexts.

24. The system of claim 17, wherein visually distinguishing the one or more portions of the second source code from other portions of the second source code comprises: A mini-map is presented to visually distinguish at least a subset of the one or more portions that would be hidden in the live preview user interface without the mini-map.

Images