Skip to content

antvis/T8

Repository files navigation

English | 简体中文

🧬 T8: Narrative Text Visualization

T8 is a text visualization solution for unstructured data within the AntV technology stack, where T stands for Text, and 8 represents a byte of 8 bits, symbolizing that it can deeply uncover insights hidden beneath the text.

gzip size Build Status npm Version npm License

T8-Preview-Lite.mp4

T8 is a declarative JSON Schema syntax that can be used to describe the content of data interpretation reports. Technically, based on the assumption that the JSON Schema data is generated by the server, the frontend simply consumes the Schema for rendering. As the demand for diversity and immediacy in data representation grows, along with the increasing application of AI and NLP technologies, maintaining text templates on the frontend will become unsustainable. In this context, using T8 for unified rendering will be the optimal choice.

  • Introduction - a brief overview and T8's motivations.
  • T8's Schema - the JSON Schema and description for T8.
  • API - interactive case-driven guides of T8's core concepts, and how to use them.
  • Example - a live agent for using T8 with ai.

✨ Features

  • 🛫 Technology stack agnostic - Can be used into React, Vue, and other frontend stack.
  • 🤖 LLM friendly - The T8's schema is easy to be generated by AI with prompt.
  • 🛠️ Extensible - Register custom EntityPhrase to easily customize the T8's ui elements.
  • 🪩 Lightweight - Few dependencies, small footprint, before gzip it was less than 20 Kb.

🔨 Getting Started

T8 is usually installed via a package manager such as npm or Yarn.

$ npm install @antv/t8
$ yarn add @antv/t8

The Text object then can be imported from T8.

<div id="container"></div>
import { Text } from '@antv/t8';

// A text json schema to be visualized.
const schema = {
  /*  */
};

// Instantiate a new Text.
const text = new Text({
  container: 'container',
});

// Specify schema visualization.
text.schema(schema).theme('light');

// Render visualization.
const unmont = text.render();

// Destroy.
unmont();

If all goes well, you can get the following narrative text visualization!

T8 examples light

🤖 Using in LLM

T8 can be used to output specific text into a schema that meets the requirements, and then render it in a more easily readable text. For the processing of text, LLM is one of the core advantages of large models. To help you better use T8, we provide several pieces of content that can be used in your own Agent to quickly generate and render text information summaries.

  1. JSON Schema: Standard JSON Schema format for describing the format and structure of text, which can be obtained from remote or from the current GitHub repository.
  2. Prompt Template: A set of templates for prompting LLMs, see prompt.md and prompt.zh-CN.md.
  3. Some examples: T8 Schema Example.
  4. An example of an agent based on the tbox: [Text Summary].

We welcome all contributors to T8 and all our backers, and thank you for your suggestions and feedback.

📮 Contributing

This project exists thanks to all the people who contribute. And thank you to all our backers! 🙏

📄 License

MIT@AntV.