The frontend of AI Lab is a modern single-page application built with React 19, TypeScript, and MUI (Material UI) v7, 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 React Router v7 with lazy-loaded routes, while state management is powered by the ai-lab.store Zustand store and the useRealtimeSocket hook, 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 MUI 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 useRealtimeSocket, 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 ai-lab.store 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 feature api/*.ts modules and TanStack Query mutation hooks, with async flows, user feedback via alert.store, and a global loading overlay during requests.

Thanks to Axios, 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 React architecture, it provides a cutting-edge tool for real-time interaction, media generation, and experimentation. Live demo: react.karnaukh-webdev.com/ai-lab.