Welcome to the hiring task for gstudio.ai! In this task, your objective is to create a frontend application that allows users to chat with a custom AI model. You will be provided with the necessary resources to set up the environment and interact with the AI model.
Your task is to create a frontend application using React that enables users to have interactive conversations with a custom AI model. You will use the provided Google Colab notebook for running the AI model and the example Python file for interacting with it.
-
Google Colab Notebook: This notebook contains the AI model and establishes a WebSocket connection along with a normal server for interaction.
-
Example Python File: Both Files demonstrates how to interact with the AI model programmatically, you can use any one of the two streaming methods to complete the task. But be ready with a reason of why you selected it.
-
Create a React Frontend: Develop a user-friendly chat interface using React where users can input their messages and receive responses from the AI model.
-
Integrate AI Model: Use the provided example Python file to communicate with the AI model. Messages from the frontend should be sent to the AI model, and the responses should be displayed back to the user in the chat interface.
-
Implement Message Limit and Login System: Limit the number of messages a user can send to 25. Optionally, you can implement a simple login system to track users' messages.
-
Bonus Points - Incorporate Whisper STT and Silero TTS: If you want to earn brownie points, consider integrating the Whisper Speech-to-Text (STT) system for voice input and Silero Text-to-Speech (TTS) for generating AI model responses as voice output.
Fork this repository and create your solution within it. Once you're done, please provide us with a link to your forked repository for evaluation.
- Functionality: Does the frontend allow users to chat with the AI model effectively?
- Code Quality: Is the code well-structured, clean, and maintainable?
- Additional Features: Did you successfully implement the message limit, login system, and any bonus tasks?
- Creativity: Did you go beyond the basic requirements to make the chat interface more engaging and user-friendly?
- Documentation: Is your
README.md
clear and comprehensive?
Feel free to reach out if you have any questions. Good luck!