AI Service Visualization

[yhbcode000]

Description

This is our first issue related to the front-end, and we need to ensure the solution is simple and streamlined. We require a front-end tool that can visually showcase the AI services we're building for our current competition. The goal is to provide a clear, user-friendly interface that demonstrates how our AI services function, from input to output.

Goals

1. Design a minimal front-end interface:

   • Focus on simplicity and clarity to show how our AI services operate.
   • The interface should visually represent the flow of data between the AI modules.

2. Integrate AI services:

   • The front-end should be connected to the AI services to reflect real-time data and processing.
   • Ensure smooth API integration with the backend for dynamic results display.

3. Interactive elements:

   • Allow users to input data and see how the AI processes it in real time.
   • Provide simple user instructions for ease of understanding.

Technical Requirements

• Front-end Framework: React, Vue, or another lightweight framework that integrates well with our current setup.
• Backend Integration: Ensure seamless API interaction between the front-end and AI service layers.
• Data Visualization: Support for basic visualizations (charts, flows) to represent AI results clearly.

Additional Notes

• This is the first front-end related issue, so simplicity is key. Ensure the design is easy to understand and implement, while leaving room for future enhancements.

[yhbcode000]

For now, we only need a frontend with the following features:

1. Periodically send information to the server.
2. When the server returns a specific flag, such as an "ALERT" tag in a JSON file, display it in a pop-up window (or a block).
3. Allow the user to click on the pop-up window to view detailed information.
4. Include a debug window that allows modifying the information sent to the server and adjusting the tag (e.g., *ALERT) used to trigger the pop-up window.