Rendering Components Gallery
AI Squared offers many pre-configured options for visualizing information!
While AI Squared enables you to build fully customizable user interfaces, we also offer several options for data visualization out of the box, letting you go from idea to dashboard in minutes. These can also be tailored to your use case easily, by enabling you to set CSS styling within the Platform's configuration editor and / or the Python API.
Word Rendering lets you add a flag to keywords within the DOM, giving you contextual flags as to what is important. This also allows you to embed relevant information within pop-outs that can be accessed on-click or on-hover, as well as link to additional resources. See how it can be used with the Next Best Action and IP Address Lookup use cases!
The Container Rendering component serves as the canvas that you create dashboards with, and then inject those into the DOM. In the example above, you can see how a dashboard has been created by using the Container Rendering component to nest iframes, so one container holds multiple sub-containers, which in turn hold e.g. HTML Tag rendering objects, Table Rendering objects, etc. An example of this usage is the SOS dashboard use case.
The Doughnut Chart rendering component is a great choice to display information that is segmented and visualize the constituent pieces of that information. This example is drawn from the SOS Dashboard use case, where product recommendations and a sales propensity score are represented using doughnut charts. By mousing over each segment in a doughnut chart you will see a pop-out containing the value of that segment.
An alternative to the Doughnut Chart rendering component is the Pie Chart rendering component. This visualization is well-suited to displaying segmented metrics.
The Line Chart rendering component is a great fit for visualizing time-series information.
The Bar Chart rendering component inserts an bar chart to visualize your information.
The HTML Tag rendering component makes it easy to represent any characters, strings of numbers or letters, as HTML elements within a dashboard. In this example, from the SOS Dashboard use case, we create an HTML tag containing the name of the person whose information the dashboard represents.
The Table rendering component enables you to visualize information in a table. In this example from the SOS Dashboard use case, we have 2 examples of table rendering components, with the top one displaying an overview of a sales prospect and the bottom displaying information about a salesperson's previous engagement with this prospect.
The Image rendering component is for computer vision use cases where a single image is meant to be processed and a single prediction or classification is made. In this example, we have a model generate a single prediction - in this case, the classification of the age of a subject of a photo. We then overlay a bounding box around the entire image and apply a label to the image. The font size and color, as well as the size and color of the bounding box, are user-configurable. To see how this has been used in practice, see this guide.
The Object rendering component is designed for use in object detection use cases. While the Image rendering component creates a single label for, and draws a single bounding box around an entire image, the Object rendering component lets you overlay multiple bounding boxes and labels onto an image in the DOM.