Build UIs for AI services faster and easier with the SingularityNET UI Sandbox. This web-based platform offers integrated tools, simplified workflows, and a modern framework for efficient UI creation, customization, and deployment.

The development of user interfaces (UI) for AI services has historically required substantial time investment from AI researchers and developers. Creating interfaces must accurately reflect AI service functionality, including input parameters, output formats, and error handling, often diverting resources from core AI algorithm development. A well-designed user interface is essential for facilitating effective interaction and enabling broad accessibility to AI services, even for tasks with minimal computational requirements.

The SingularityNET Platform offers multiple access points for utilizing AI services, including Software Development Kits (SDKs) in various programming languages that enable direct integration of AI functionalities into existing applications. The SingularityNET Marketplace expands this access by providing a platform for discovering and utilizing diverse AI services. However, the development of custom UIs for these marketplace services remained complex until now.

The SingularityNET Platform Development team has developed the UI Sandbox to address these challenges. A key advancement has been transforming the Sandbox from a SingularityNET dApp-dependent system into a standalone web application with integrated developer tools, significantly simplifying the development process while providing comprehensive UI creation capabilities.

Enhanced UI Development with the UI Sandbox

The UI Sandbox provides comprehensive file management capabilities, integrated compilation systems, and real-time preview functionality. These features combine with error-handling mechanisms and a custom components library to optimize the development process. The web-based architecture eliminates previous dependencies, enables in-place metadata updates without project restarts, and streamlines the entire development workflow.

The platform includes extensive technical improvements: A getting started template accessible through the ‘New Project’ menu item, example elements with pre-populated metadata for service invocation, and automated project packaging systems. The transition to a functional React framework includes a curated library of UI elements with detailed usage examples and parameter descriptions. Additional features include project import/export capabilities and enhanced UI customization options, allowing developers to control panel sizing, font characteristics, and overall layout elements.

The development workflow operates through a web-based application with integrated developer tools. The process begins with JavaScript stub generation from .proto definitions, following documented procedures in the developer portal. Developers access the Sandbox through Cognito authentication, create new projects, and integrate generated stubs directly into the development environment. The system enables immediate code customization through index.js and styles.js files, with real-time compilation and preview capabilities for rapid development iteration. Projects can be exported as .zip archives and deployed through the Publisher Portal.

Key Improvements and Functionality

The UI Sandbox Version 2 introduces several key improvements designed to streamline the UI development process for AI services. These enhancements focus on simplifying workflows, providing powerful built-in tools, and leveraging modern web technologies for increased efficiency and flexibility:

• Standalone Web Application: Eliminates the need for local SingularityNET dApp installation, complex library management, and manual environment configuration;
• Integrated Development Environment: Provides developers with all the necessary tools within the web application, removing the requirement for external IDEs;
• Simplified Workflow: Enables in-place metadata updates without project restarts, A getting started template accessible through the ‘New Project’ menu item, example elements with pre-populated metadata, and automated project packaging;
• Modern Development Framework: Transitions to a functional React framework for efficient development and includes a curated library of UI elements with comprehensive usage examples;
• Enhanced Customization and Management: This offers project import/export capabilities and expanded UI customization options, allowing greater control over the final interface.

Development Workflow

The UI Sandbox is accessible through ai-ui-constructor.singularitynet.io, with comprehensive documentation available through the Developer Portal.

For developers looking to get started, the process follows a clear sequence:

1. Generate JavaScript Stub Files: Use your own .proto file to generate the necessary JavaScript stub files following the guide provided here;
2. Access the UI Sandbox: Navigate to the UI Sandbox portal;
3. Sign In or Create an Account: Sign in using your existing Cognito account or register with the “Sign Up” form;
4. Create a New Project: Initiate a fresh workspace for your UI development by selecting “New Project” from the menu options;
5. Upload Stub Files: Upload the generated JavaScript stub files into your newly created project within the Sandbox;
6. Customize Code: Modify the index.js and styles.js files to tailor the functionality and appearance of your UI. You can also upload or create additional files as needed;
7. Compile and Preview: Use the “Compile” button to build and test your application code. The Sandbox provides real-time preview functionality for visualizing the UI as you make changes;
8. Configure Application Details: In the preview application section, fill in the fields for “OrganisationID”, “ServiceId” and “Endpoint” with the appropriate values for the AI service you’re targeting;
9. Debug and Refine: If necessary, debug your code and repeat the “Compile” action until you achieve the desired results;
10. Export Project: Once satisfied with your UI, press the “Export Project” button to download a compressed archive (.zip) containing all the project files;
11. Publish the UI: Use the Publisher Portal to deploy your custom UI.

Integration and Future Development

The UI Sandbox integrates with existing SingularityNET infrastructure, supporting multiple programming languages through SDK integration and offering direct compatibility with marketplace services. This integration enables developers to deploy their interfaces through the Publisher Portal while maintaining the ability to modify existing frontends as needed.

Development continues on template library architecture for zero-code frontend assembly, enhanced customization capabilities, and streamlined deployment processes. The system collects developer feedback through monitoring systems and designated feedback channels, enabling continuous improvement based on usage patterns and requirements. Our biweekly decentralized AI Platform development blog updates will provide more details on these developments.