Code editor

Here, you can manage the functionality behind your form. On the lefthand side, you can see your form preview and your variables, and on the righthand side you can see the Code editor. There, you can input custom code and call custom variables so that your form can function the way you need it to.

If you want to publish a form without any functionality, you can simply skip this section and publish.

Preview

This tab will show you a preview of your form. Depending on how you've set up your components, you will see how they line up when finalized.

Variables

Under this tab, you can add custom variables and their values. To add a new variable:

1. Click + Add Variable.
2. Type in a name for your variable.
3. Type in a value.
4. Check Secure to keep this value private (Optional).

After creating a variable, it will automatically be imported in your code as follows:

from environments import yourVariableHere

You can delete a variable by clicking its corresponding Delete button on the right side.

Code editor

This is your code editor. Here, you can customize your form's code extensively to produce the functionality you want. Based on the components you chose in the UI builder, their layout and their individual property values and settings, the builder will automatically generate a base code structure that outlines your form. You can use this and build on it as you like by manipulating the existing code or using any of your custom variables.

Above the code editor, you have two buttons that you can use: Regenerate and Run.

Run

To test your code after editing, you must click Run to update the form preview.

Regenerate

After your form's base code is generated, when you make changes to your form in the UI builder, the code editor will be modified accordingly. Clicking Regenerate will replace the code with an initial state based on the updated form UI.

📘

Save your code!

If there are any lines of custom code that you want to keep, make sure to have a copy of them with you before regenerating the code editor.

Using the code editor

Here we have an example of how you can make use of the code editor:

from typing import List, Union
from accessor import getValue, repeatRow, setValue, setLoading, getGroupLength
from pyodide.http import pyfetch, FetchResponse
import json

from environments import token

input_r_r4lz7m = ['r_r4lz7m']
button_r_sf4owl = ['r_sf4owl']
paragraph_r_789tb4 = ['r_789tb4']

async def on_r_sf4owl_click(path: List[Union[str, int]]):
    value = getValue(input_r_r4lz7m)
    setLoading(True)
    req = await pyfetch('https://api.cohere.ai/v1/generate', **{
      'headers': {'accept': "application/json", 'content-type': 'application/json', 'authorization': token},
      'body': json.dumps({'prompt': value, 'max_tokens': 200 }),
      'method': 'POST',
    })
    res = await req.json()
    setValue(paragraph_r_789tb4, res)
    setLoading(False)
    return

In this case, the form has three components: Input, Button, and Paragraph.

Let's say in our case, the button is called Submit. The Input bar takes a text entered by the user in the form of a question. Then, the user clicks Submit.

The text is acquired by the async function using getValue and the input component's ID path.

It is then used as the prompt parameter when using the Pyodide-imported pyfetch command. This makes a request from the LLM to respond to the given text, returning the response as a string.

After this, setValue is used to give the Paragraph component the response text from the model.

Visually, the form has an input bar that the user types a prompt into and upon clicking submit, they will receive a response below the input with the LLM's answer.

This is the most basic version of this use case. It is possible to use a Rating or Approve/Disapprove component to then allow the user to rate the response and annotate how well the LLM did in its answer. The user may also require an additional input box to provide any comments or feedback.

The code could be modified to allow multiple answers by making the Paragraph component repeatable. This means every time an input is submitted, a new Paragraph component appears below with the response to the new prompt.

Publish form

The final step to making your form is to publish it. You can publish your form as it is without generating any items to annotate, or you can publish and begin the item generation process immediately after. Learn more.

❗️

Editing forms in use

If you make any changes to a published form after you have already generated items for it, the items that were generated and annotated based on the old form setup may become corrupted and invalid.