A sleek and responsive React-based frontend for a voice assistant powered by supervised Large Language Models (LLMs). This application provides an intuitive interface for users to interact with the voice assistant, leveraging speech-to-text and text-to-speech technologies.
- Voice Input: Captures user input via microphone and converts it into text.
- Backend Integration: Sends the transcribed text to a backend API for processing.
- Voice Output: Receives the backend's response as text and speaks it out using text-to-speech.
- Intuitive Interface: Clean and user-friendly React interface for seamless interaction.
- Frontend: React.js
- Speech-to-Text: Browser-based Web Speech API or a library of your choice.
- Text-to-Speech: Browser-based Speech Synthesis API or a library of your choice.
- Backend Communication: REST API integration.
. ├── src │ ├── components # React components for UI │ ├── assets # Images, icons, and other static assets │ │ └── voice_assistant.png │ ├── utils # Utility functions for speech-to-text and text-to-speech │ └── App.js # Main application entry point ├── public │ └── index.html # HTML template ├── package.json # Dependencies and scripts └── README.md
- Input: The user speaks into the microphone.
- Processing: The speech is converted to text using the Web Speech API.
- Backend Communication: The transcribed text is sent to the backend API for processing.
- Response: The backend returns a response, which is displayed on the screen.
- Output: The response is read out to the user using text-to-speech technology.
- Clone the repository:
git clone https://github.com/your-username/voice-assistant-frontend.git cd voice-assistant-frontend - install dependencies:
npm install - Start the development server:
npm start
Contributions are welcome! Feel free to open issues or submit pull requests to improve the project.