Schema Builder User Interface 💬

• Created by Michelle Zhang, Fall 2020
• Advised by Shikib Mehri and Dr. Maxine Eskenazi
• Project for DialRC, Language Technologies Institute, Carnegie Mellon University

Description

Schema Builder is an application that allows users to build dialog schema, which are then passed into schema-guided models trained on the STAR dataset. The schema are used in conjunction with pre-existing model knowledge to facilitate generalizability and zero-shot transfer learning.

Usage

Users can drag and drop components and arrows to create a flowchart-style schema diagram and test their dialog implementation in real time by interacting with the system.

Basic functions:

• To edit a component: right click on component
• To delete a component or arrow: select and backspace

Details

• The frontend uses React.js (JavaScript, HTML, and CSS).
• The backend API uses the Python Tornado framework.
• Some UI components for the chatbox (namely Message, MessageList, Messenger, Toolbar) are based on React Messenger.

Component Breakdown

Component Name	Function
DragDrop	Contains buttons which allow users to create State, Action, & Query components Controls ability to title the schema Contains save button & error handling
Flow	Contains workspace for building the dialog schema Utilizes the React Flow library
Message	Controls the message properties
MessageList	Controls list of messages displayed on the frontend
Messenger	Ability to type and send messages to the chatbox Auto refresh when schema is saved
SplitDisplay	Split screen display (drag-drop area on left, messenger on right)
Modal	Pop up which appears when a component is right clicked: allows user to edit node information
Toast	Notifications that appear when save button is clicked
Toolbar	Controls the properties for the toolbar above the message display area

Example Usage

Inquiries

Please contact mwzhang@andrew.cmu.edu.