🧩Elements
Form Elements are the backbone of user interaction in form design. They dictate how users input information, make choices, and comprehend instructions. Each element has its unique purpose and customization options. Dive in to learn about these versatile components and how to best utilize them.
Form Elements
Paragraph
The Paragraph is a non-interactive text block meant to display information to the user. It can elucidate specific functions of a form or clarify the purpose of certain inputs. Within the Form Builder, users have the capability to customize the content of the Paragraph using a WYSIWYG editor, enabling stylistic choices like bold or italic texts.
Short Text
This input field allows the user to type a single line of text. The available customizations are:
Variable: Assigns a unique identifier to this input.
Required: Determines if providing information in this input is mandatory.
Anonymized: When activated, ensures the user's input remains confidential, never leaving the local browser. This feature is vital for sensitive information.
Label: Displays an overhead title or descriptor for the input, such as “Name”.
Placeholder: Provides a hint within the input field itself, offering context like “[email protected]” in an email input.
Icon: Inserts a visual icon alongside the input.
Hint: Offers additional guidance or information below the input to assist users.
Long Text
Here, users can write multiline content. Alongside the customizations from Short Text, it includes:
Minimum rows size and Maximum rows size: These settings control the visual size of the text area. The area can auto-expand based on user input, capped at the maximum limit set.
Maximum length: Designates the total number of characters permissible within the input.
Choice
This input field provides a pre-defined list from which users can select one or several options. Key personalizations are:
Options: Lists out the choices available for selection. Additional options can be included using the 'Add option' button.
Dropdown: When enabled, the choices are presented as a drop-down list, requiring interaction to view and select. If disabled, all options are directly visible, and the format is akin to radio buttons or checkboxes, depending on the "Multiple" setting.
Multiple: This toggle dictates whether multiple options from the list can be selected simultaneously.
Toggle
A binary switch input, typically representing an "on" or "off" state. Key customizations are:
Variable: Unique identifier for this input.
Label: Descriptor for the toggle.
Hint: Provides clarity about the toggle's function.
Load File
This feature permits users to upload a file, which the system then processes to extract its readable/human text or image data into a designated variable. The available customizations for this element are as follows:
Required: Determines if uploading a document is mandatory.
File Type: Select between Document and Image
Document
Supported Types: Users can select from multiple file formats that are permissible for upload. The options include:
PDF (.pdf)
Microsoft Word (.docx)
Microsoft Excel (.xlsx)
Microsoft PowerPoint (.pptx)
Image
Multiple: A toggle that determines whether users can upload more than one file at once.
Select Button: Defines the label text on the button which users press to upload their file(s). For instance, this can be set to "Select File", "Upload Document", etc.
Clear Button: Indicates the text on the button that users can press to remove or clear the uploaded file. Examples include "Clear", "Remove File", etc.
Hint: Provides clarity about the toggle's function. Offer additional information or guidance regarding the upload process, such as file size limits, acceptable content, or any other related instructions. This helps users in ensuring their files meet the required standards for upload.
Section
Sections are containers for elements, facilitating the grouping of inputs into organized blocks. At least one section must always be present.
Execution Elements
Generate Text
This employs AI to produce text. Configurations include:
Variable: The AI's output is stored under this designated identifier.
Prompt: Instructs the AI, and can utilize templates to guide the text generation.
Mode: Users can opt between 'Fast' or 'Enhanced'. The Fast mode is quicker and suitable for most use cases. Enhanced mode, while slower and consuming more credits, prioritizes creative output.
Truncate Excessively Long Prompt: If the given prompt exceeds the allowed limit, it will be truncated rather than causing a failure.
Generate Image
AI is harnessed to create images based on the settings:
Variable: Stores the AI-generated image content.
Prompt: Commands the AI on the type of image to generate.
Model: Users can select between the models 'Stable Diffusion XL' and 'DALL·E'
Truncate Excessively Long Prompt: If the given prompt exceeds the allowed limit, it will be truncated rather than causing a failure.
Execution Layer
The Execution Layer serves as a foundational element in the form building process, particularly when there's a need to coordinate and manage multiple execution tasks. It plays a pivotal role in determining how AI tasks are structured and orchestrated. Here's an in-depth breakdown
Parallelization: When multiple execution elements reside within the same Execution Layer, they are run in parallel. This means that the tasks start simultaneously, optimizing processing time. However, the completion time for each might vary based on the complexity and type of operation.
Sequential Execution: Execution Layers introduce sequential processing for tasks. After all tasks within one layer are completed, the next layer begins its operations. This feature ensures that certain tasks can only commence once preceding ones are finalized, bringing order to potentially complex workflows.
Layer Rearrangement: Users have the flexibility to rearrange Execution Layers, thereby customizing the sequence in which grouped tasks are processed. This dynamic nature allows for iterative fine-tuning of workflow structures, tailoring them to specific use-cases.
Minimum Requirement: For a form to be functional, at least one Execution Layer must be present. This stipulation ensures that there's always a designated space for tasks to be orchestrated and managed.
Usage Scenarios: To exemplify the power and utility of Execution Layers, consider a scenario where a user wishes to generate an image and text concurrently, and once both are completed, they desire to process these results further. This is achievable by:
Placing the "Generate Image" and "Generate Text" elements within the first Execution Layer, ensuring they run in parallel.
Adding subsequent processing elements (like refining the generated content) in the next Execution Layer, guaranteeing they only start post the completion of the tasks in the initial layer.
Output
Paragraph
Functions identically to the Paragraph in Form Elements, reiterating its non-interactive nature.
Dynamic Text
Displays text utilizing the template system, ideal for showcasing AI outputs or embellishing said outputs. For instance, if text is generated under the “generated_text” variable, users can design the display as “Generated Text: {{generated_text}}”.
Dynamic Image
Exhibits any image produced by the AI during the execution process. Customizations include:
Label: Solely visible in the form builder, it gives context about the element's purpose.
Generated Image: A dropdown to select an AI-generated image from prior steps.
Section
Mirroring the functionality in Form Elements, it allows the grouping of output elements. At least one section must always exist.
General Notes on Common Properties
Variable: Must be unique and can only contain lowercase alphanumeric characters and underscores, excluding numbers at the beginning. This identifier helps access input content or AI output via templates.
Anonymized: Protects sensitive input to ensure it remains confined to the local browser. More details can be found in the 'Anonymized' section link.
Label: Acts as an overhead descriptor for inputs, guiding users on the kind of information expected.
Placeholder: Present within empty input fields, it hints at the expected content, enhancing user guidance.
Icon: Enhances visual appeal and context of the input.
Hint: Positioned below the input, it offers added details or explanations to guide users.
Last updated