Audio-Enabled Chatbot with Text-to-Speech Streaming

Welcome to the Audio-Enabled Chatbot project! This repository contains the code for a chatbot interface that combines OpenAI’s API with real-time text-to-speech streaming capabilities, delivering a seamless conversational experience with both text and audio outputs.

Alt text

Features

Version 1

Chat Interface: A clean, modern interface for user-bot conversations.
Message History: Tracks the chat history to maintain context.
Real-Time Text-to-Speech: Converts bot responses into audio for playback.
Audio Playback Controls: Play, pause, and resume bot responses.
Smooth Animations: Subtle transitions for message rendering and audio playback states.
Visual Feedback: Indicators for audio states (playing, paused, loading).

Design

Colors: Clean whites, soft grays, and accent colors for interactive elements.
Typography: Modern, readable fonts for clear communication.
Animations: Smooth transitions for messages and pulsing effects for active audio playback.
Layout: Full-height chat window with a fixed input bar at the bottom.

Installation

Clone the Repository

git clone https://github.com/your-username/audio-chatbot.git  
cd audio-chatbot

Install Dependencies
Use the package manager of your choice:
```
npm install  
```
Set Up Environment Variables
Create a .env file in the project root and add your OpenAI API key:
```
OPENAI_API_KEY=your-api-key  
```
Start the Development Server
```
npm start  
```

How It Works

User Interaction
Users type messages into the chat input field and press send.
Bot Response
The chatbot processes user messages using OpenAI’s API and generates a response.
Text-to-Speech
Bot responses are converted into audio using a text-to-speech streaming service.
Audio Playback
The interface provides play/pause controls and visual feedback for audio playback states.

Project Structure

audio-chatbot/  
├── public/                 # Static assets  
├── src/  
│   ├── components/         # React components (ChatWindow, Message, AudioPlayer)  
│   ├── styles/             # CSS styles  
│   ├── utils/              # Helper functions (e.g., API calls, audio management)  
│   ├── App.js              # Main app component  
│   └── index.js            # Entry point  
├── .env                    # Environment variables  
├── package.json            # Project dependencies  
└── README.md               # Project documentation

TODOs

Implement OpenAI API calls for message handling. DONE
Add a text-to-speech conversion service for real-time audio streaming. DONE
Enhance error handling for network and API issues. DONE

Automated Course Generation