LLM-UI-Objects Library

Overview

The LLM-UI-Objects library provides a set of object components that enable the creation of Large Language Model (LLM)-powered writing interfaces that support object-oriented interaction. Object-oriented interaction can enable users to more flexibly experiment and iterate with LLMs. The objects supported in the library are: Cells (input text fragments), Generators (sets of model parameters), and Lenses (output containers). This library is an instantiation of the Cells, Generators, and Lenses design framework that was presenteed at UIST 2023.

Getting Started

Install by executing npm install llm-ui-objects. Refer to directory demo for examples of how to import and use the components.

Components

Below is an overview of the different components available in the library.

| Name | Description | Properties | | --------- | ----------- | ----------- | | ObjectContextProvider | Contains necessary context and information on the existing objects, their contents, and properties. Supports management of the objects by providing various helper functions that allow controlling, manipulating, and transferring information between these objects. | children: Component(s) that the context provider wraps around. cells: Array of initial set of cells. generators: Array of initial set of generators. lenses: Array of initial set of lenses. generateHandler: Handler function that can generate text or list of text based on input text or list of text and model parameters. minimizeHandler: Handler function that can process text to produce a minimized version of the text. | | Cell | Represents a text fragment as an object. Cells can be connected to each other to represent a complete text input. | id: Unique string ID. text: Text fragment contained within cell object. isActive: Controls whether the cell is activated and will be used when generating. isSelected: Controls whether the cell is selected. Selected cells can be copied, deleted, etc. isHovered: Controls whether the cell is being hovered on. isMinimized: Controls whether the cell is minimized. If it is, it will only show the minimized text. minimizedText: Version of the text that is shown when cell is minimized. tabDirection: Can take values "top", "right", "bottom, or "left" and determines what side of the cell will have additional padding space. onClick, onMouseEnter, onMouseLeave: Handlers for mouse events. parentCellId: ID of cell that this cell is connected to. style: Style for the cell container. | | Generator | Represents a set of model parameter configurations and can be clicked on to generate outputs. Generators can be connected to cells to take its text (and text of all cells connected from that cell) as input. Generators can also be connected to lenses where its generation outputs will be contained and represented. | id: Unique string ID. parameters: Array of parameter objects, where each object contains the parameters information and the current parameter value. color: Color of the generator. size: Can take values "small", "medium" and "large". numColumns: Number of parameters that are shown in each row of the generator. isGenerating: Controls whether the generator is generating. isSelected: Controls whether the generator is selected. cellId: ID of cell connected to the generator. lensId: Id of lens connected to the generator. onMouseEnter, onMouseLeave: Mouse event handlers. | | Lens | Represents the containers of generated outputs and can represent the outputs in various ways to support exploration of these outputs. Lenses can be connected together by assigning to the same group: lenses in the same group will show the same generated outputs. Examples of these representations are shown in the table below (e.g., ListLens, SpaceLens) | id: Unique string ID. type: Determines the type of lens. Currently takes the values "list", "space", "rating" or "plot". style: Style of the lens container. onGenerationClick: Handler function for when a generation is clicked in the lens. group: Group number that the lens belongs to. getGenerationMetadata: Handler function that processes outputs to produce metadata that is used to represent these outputs (e.g., getPosition or getRating for the SpaceLens and RatingLens respectively). |

For the Cell and Lens objects, we also provide a couple of examples of the different forms that these objects can take.

| Name | Description | Properties | | --------- | ----------- | ----------- | | CellBoard | A board of cells where the user can create multiple rows of cells and multiple cells within these rows. The user selects individual cells in each row to compose an input. | initialBoard: 2d-array that contains strings that are used to create cells and populate the board. maxRows and maxColumns: Maximum number of rows and columns that the board can contain. setEntryCell: Helper function to obtain the leaf-most cell, which can be used to concatenate the full input of selected cells. style: Style for the board container. | | CellTree | A tree representation of cells where parent-child relationships represent sentences that are continuations to each other. Each cells is minimized: they are represented by a rectangle containing the minimized text for the cell. | cellWidth and cellheight: Width and height of each individual cell block in the tree. style: Style for the tree container. | | CellEditor | A QuillJS-based text editor that shows the contatenation of multiple selected cells and allows editing of individual cells directly on the editor. | cellIds: IDs of cells to be shown in the text editor. style: Style for the editor container. textColor: Color of text in the editor. | | ListLens | A lens that shows different outputs as a hierarchical list, where outputs are first grouped based on the input that was used to generate them and then grouped based on the model parameter settings used to generate them. | generations: Array of generated outputs. onGenerationClick: Handler function for when a generation is clicked in the lens. | | SpaceLens | A lens that shows different outputs as dots in a 2D space where their position of each output is specified by the getPosition function passed to the component. | generations: ... onGenerationClick: ... getPosition: Calculates the positon of outputs (x, y coordinates) to represent in the lens. | | PlotLens | A lens that shows different outputs as dots in a scatter plot where the user can select the axis for the plot, and the value of the dots for each axis are determined by the getRatings function passed to the component. | generations: ... onGenerationClick: ... getRatings: Calculates the ratings of outputs on multiple dimensions. | | RatingLens | A lens that shows the ratings given to each output on multiple dimensions where the ratings of these outputs are determined by the getRatings function passed to the component | generations: ... onGenerationClick: ... getRatings: ... |