StrapTo Client

Disclaimer: This repository is currently under active development and not all features are available yet.

StrapTo Client is the consumer-facing component of the StrapTo suite, providing a modern React-based interface for interacting with streamed outputs from self-hosted AI models. Built with React and WebRTC, the client application enables real-time viewing of model outputs and facilitates interactive feedback through a user-friendly interface.

Overview

The StrapTo Client enables users to:

• Connect to live streams from self-hosted AI models in real time
• View diverse outputs including text, JSON, images, and more
• Provide interactive feedback that influences the model's behavior
• Participate in collaborative sessions with other viewers

This repository focuses on the frontend client component. For a complete interactive streaming experience, see the other StrapTo repositories:

• StrapTo Local Server: Captures and streams outputs from self-hosted AI models using WebRTC
• StrapTo Host: Manages room creation, WebRTC signaling, and real-time communication

Features

• Real-Time Stream Viewing: Experience low-latency streaming of model outputs through WebRTC data channels, ensuring smooth and responsive display of text, JSON, images, and other content types.

• Interactive Controls: Engage with the stream through various interaction methods including chat messages, suggestions, and voting mechanisms that can influence the model's behavior.

• Responsive Design: Enjoy a modern, responsive interface that adapts to different screen sizes and devices while maintaining optimal performance.

• Session Management: Join existing rooms, manage connection status, and control your viewing experience with intuitive UI controls.

• Collaborative Features: Participate in shared viewing sessions where multiple users can interact with the stream simultaneously.

Architecture Overview

The StrapTo Client is built with modern React and leverages WebRTC for real-time communications. Its core components include:

• WebRTC Integration: Establishes peer-to-peer connections with the local server component for efficient, low-latency streaming of model outputs.

• Stream Rendering: Handles the display of various output types through specialized rendering components that maintain performance while updating in real time.

• Interactive Components: Provides UI elements for user interaction, including chat interfaces, suggestion panels, and voting mechanisms.

• State Management: Implements robust state management to handle connection status, stream data, and user interactions while maintaining a responsive user experience.

Technical Stack

• React 18+
• WebRTC (via PeerJS)
• Tailwind CSS
• TypeScript
• Socket.io Client

Use Cases

• Live Model Demonstrations: View real-time demonstrations of AI models, perfect for educational sessions, research presentations, or product demos.

• Interactive AI Sessions: Participate in interactive sessions where your feedback can influence the model's outputs in real time.

• Collaborative Viewing: Join shared rooms where multiple viewers can collectively interact with and influence the AI model's behavior.

Getting Started

Coming Soon