The frontend of AI Lab is a modern single-page application built with Angular 22 and Angular Material, offering users an intuitive interface to interact with advanced AI features including text chat, image generation, voice synthesis, and multimodal input processing. Designed with responsiveness and clarity in mind, the application serves as a user-friendly control center for exploring the capabilities of GPT-4o.

👉 You can see a description of the backend here.

Navigation is handled using Angular Router with lazy-loaded routes, while state management is powered by the AiLabStore signal store and dedicated WebSocket services, ensuring consistent application state and seamless data flow between components and the backend API. The interface is built around a clean Material Design aesthetic using Angular Material components, with thoughtful use of loading indicators, snackbar alerts, and form validation to guide users through their interactions.

Key features include:

• AI-powered chat: Users can send questions (optionally with uploaded images), and receive concise AI-generated responses displayed in a friendly chat-like interface.
• Real-time chat via WebSockets: Leveraging OpenAI's GPT-4o real-time preview API, the app enables live streaming of AI responses via AiLabRealtimeWebSocketService, delivering a dynamic conversational experience.
• Image generation: Users can prompt the AI to generate images from text, preview them in the interface, and download them directly.
• Voice generation: AI-generated voice messages are presented with embedded players, allowing users to listen to synthesized speech outputs from their text prompts.
• Prompt image uploads: Users can upload custom image files (JPEG/PNG, up to 20 MB) that are sent to the backend, enhancing the context for AI interactions.

The AiLabStore is cleanly structured, managing key state such as chat responses, generated image and voice URLs, uploaded vision images, and realtime chat history. API calls are encapsulated in AiLabApiService, with async flows, user feedback via AlertService, and a global loading bar during requests.

Thanks to HttpClient, all HTTP communication with the Django backend is secure and efficient. The application handles failures gracefully, with error messages surfaced through snackbars to ensure a smooth experience.

Overall, AI Lab’s frontend brings the power of multimodal AI to end users in a clear, responsive, and engaging interface. By combining state-of-the-art AI models with an elegant Angular architecture, it provides a cutting-edge tool for real-time interaction, media generation, and experimentation. Live demo: angular.karnaukh-webdev.com/ai-lab.