The frontend of AI Lab is a modern single-page application built with Vue.js 3 and Vuetify 3, 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 Vue Router, while state management is powered by Vuex, 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 Vuetify components, with thoughtful use of loading indicators, alerts, and 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, 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 that are sent to the backend, enhancing the context for AI interactions.

The Vuex store is modular and cleanly structured, managing all key state variables such as messages, generated image/voice URLs, error messages, and WebSocket chat history. Actions are defined for all major API endpoints, handling async flows with user feedback and error handling.

Thanks to axios, all HTTP communication with the backend is secure and efficient. The application gracefully handles failures, with fallback logic and detailed user notifications 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 frontend architecture, it provides a cutting-edge tool for real-time interaction, media generation, and experimentation.