Audio Chat Bot

Audio Chat Bot

•
ai react typescript

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

  1. Clone the Repository

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

  2. Install Dependencies
    Use the package manager of your choice:

    npm install

  3. Set Up Environment Variables
    Create a .env file in the project root and add your OpenAI API key:

    OPENAI_API_KEY=your-api-key

  4. Start the Development Server

    npm start

How It Works

  1. User Interaction
    Users type messages into the chat input field and press send.

  2. Bot Response
    The chatbot processes user messages using OpenAI’s API and generates a response.

  3. Text-to-Speech
    Bot responses are converted into audio using a text-to-speech streaming service.

  4. 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