Thanks to visit codestin.com
Credit goes to github.com

Skip to content

A modern, voice assistant built with React, TypeScript, and the Hugging Face Inference API. This application features a sleek UI with glowing effects, voice recognition, and text-to-speech capabilities.

Notifications You must be signed in to change notification settings

alwalid54321/AI-Voice-Assistant

Repository files navigation

AI Voice Assistant

A modern, voice assistant built with React, TypeScript, and the Hugging Face Inference API. This application features a sleek UI with glowing effects, voice recognition, and text-to-speech capabilities.

AI Assistant Preview

React TypeScript Tailwind CSS Hugging Face API

Features

  • πŸŽ™οΈ Voice Recognition - Speak to your AI assistant
  • πŸ”Š Text-to-Speech - Listen to AI responses
  • ✨ Real-time Streaming - See responses as they're generated
  • 🎨 Futuristic UI - Glowing effects and smooth animations
  • πŸ“± Responsive Design - Works on all devices
  • πŸ€– Powered by Llama 3.2 - Advanced language model from Meta

Tech Stack

  • React + TypeScript
  • Tailwind CSS
  • Hugging Face Inference API
  • Web Speech API
  • Lucide React Icons

Getting Started

  1. Clone the repository

    git clone https://github.com/alwalid54321/ai-voice-assistant.git
    cd ai-voice-assistant
  2. Install dependencies:

    npm install
  3. Create a .env file with your Hugging Face API key:

    VITE_HUGGINGFACE_API_KEY=your_api_key_here
    
  4. Start the development server:

    npm run dev

Usage

  • Click the microphone icon to start/stop voice recognition.
  • Click the speaker icon to mute/unmute AI responses.
  • Type in the input field or use voice recognition to interact.
  • Press enter or click the send button to submit your message.

Project Structure

src/
β”œβ”€β”€ components/        # React components
β”‚   β”œβ”€β”€ Header.tsx
β”‚   β”œβ”€β”€ InputForm.tsx
β”‚   └── MessageList.tsx
β”œβ”€β”€ hooks/             # Custom React hooks
β”‚   β”œβ”€β”€ useSpeechRecognition.ts
β”‚   └── useSpeechSynthesis.ts
β”œβ”€β”€ services/          # External services
β”‚   └── ai.ts
β”œβ”€β”€ types/             # TypeScript types
β”‚   └── index.ts
└── App.tsx            # Main application component

Contributing

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License

This project is licensed under the GPL License - see the LICENSE file for details.

About

A modern, voice assistant built with React, TypeScript, and the Hugging Face Inference API. This application features a sleek UI with glowing effects, voice recognition, and text-to-speech capabilities.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published