LEAF Playground WebUI

A browser interface based on Next.js for leaf-playground.

Development

This is a Next.js project bootstrapped with create-next-app.

Requirements

• yarn >= 1.22.10
• node >= 18
• Running leaf-playground

Getting Started

First, run the development server:

yarn dev

Open http://localhost:3000 with your browser to see the result.

The Playground is initially configured to use the address http://127.0.0.1:8000. If you wish to change this, you can do so by setting a new address through the PLAYGROUND_SERVER_BASE_URL environment variable.

Custom Scene Visualization Components

To develop customized visualization components for specific scenes, follow these unified steps:

1. Create Component:

• Develop your custom scene visualization component in the src/app/processing/components/specialized directory.
• Ensure the component's props extend from DefaultProcessingVisualizationComponentProps.

2. Register Component:

• Register your component within the getProcessingVisualizationComponent function located in src/app/processing/[taskId]/page.tsx.
• This is achieved by adding a case statement for your scene's name.

Add Scene-Specific Result Report Components

To display custom scene result components in the Report section of the result page, follow these unified steps:

1. Define Component:

• Define your component as either a ResultReportFunctionComponent or a ResultReportClassComponent, depending on your implementation approach.
• It's recommended to store these custom components in the src/app/result/components/specialized directory.

2. Register Component:

• Register your component within the getSpecializedReportComponents function found in src/app/result/[taskId]/page.tsx.
• Ensure the registration occurs after the validation process by checkMetrics.

Environment Variables

This project includes the following environment variables:

1. PLAYGROUND_SERVER_BASE_URL: Defines the Playground Server's URL, with a default setting of http://127.0.0.1:8000

2. WEB_UI_EXTERNAL_URL: This represents the external URL where the WebUI is accessible post-deployment, initially set as undefined. This URL is particularly used in creating links for human agents.

Make WebUI Bundle

To make a production-ready bundle, run the following command:

yarn bundle

This will create a bundle directory with the bundled files.

Learn More

To learn more about this project, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.
• Ant Design - An enterprise-class UI design language and React UI library.
• antd-style - A business-level css-in-js solution built on the Ant Design V5 Token System.
• Formily - Dynamic Form Solution
• Emotion - The Next Generation of CSS-in-JS
• zustand - 🐻 Bear necessities for state management in React