A React-based real-time chat application that integrates various advanced features, including Firebase for real-time database management, text recognition, text-to-speech, speech-to-text, and a chatbot powered by an LLM (Large Language Model) for enhanced user interaction.
- Real-time Chat: Communicate with other users instantly using Firebase.
- Text Recognition: Optical character recognition (OCR) for recognizing text from images.
- Text-to-Speech: Convert chat messages into audio.
- Speech-to-Text: Transcribe speech input into text to send as messages.
- Chatbot Integration: A chatbot powered by an LLM model to assist and engage users with AI-generated responses.
Before you begin, ensure you have the following installed on your machine:
- Node.js (>= 14.x)
- npm or yarn
- Firebase account and project setup
- API keys for Gemini
- Go to the Firebase Console and create a new project.
- Set up Firebase Realtime Database and Firestore (for user authentication and chat storage).
- Enable Firebase Authentication (Email/Password or Google Authentication).
- Set up Firebase Storage for image uploads (if necessary for text recognition).
- Add the Firebase configuration to your React app.
In src/firebase/utils.ts
:
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
databaseURL: "https://YOUR_PROJECT_ID.firebaseio.com",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_PROJECT_ID.appspot.com",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID",
};
export default firebaseConfig;
-
Clone the repository:
git clone https://github.com/DewaSRY/react-chat-app.git cd react-chat-app
-
Install dependencies:
pnpm install
-
Set up environment variables:
Create a
.env
file in the root directory and add your Firebase and API keys:REACT_APP_FIREBASE_API_KEY=<api key> VITE_FIREBASE_API_KEY=<api key> VITE_FIREBASE_CLOUD_API_KEY=<api key>
-
Start the development server:
pnpm run dev
- Once logged in, users can chat with others in real time.
- Chats are synced instantly using Firebase's real-time database.
- Upload an image, and the app will recognize and extract text using an OCR library (e.g., Google Vision API).
- Recognized text can be directly used in chat.
- Users can convert any text message to audio using the Web Speech API or Google Cloud Text-to-Speech API.
- The feature allows users to listen to messages instead of reading them.
- Users can input messages using speech with speech recognition technology.
- Use the Web Speech API or Google Cloud Speech-to-Text API to convert spoken words into text.
- The chatbot, powered by an LLM Google Gemini, provides real-time responses.
- Users can interact with the chatbot in the chat interface.
- Authentication: Provides user authentication via Firebase Authentication.
- Realtime Database: Manages real-time message exchanges between users.
- Firestore: Stores user information, conversation histories, and other data.
- Storage: Handles image uploads for text recognition.
To integrate text recognition
- Browser api
To convert text to speech
- SpeechSynthesisUtterance
To transcribe speech into text, you can use:
- webkitSpeechRecognition
For chatbot integration,Use google gemini