index.html README.md config.py GITHUB_RELEASE_INSTRUCTIONS.md

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
        Voice Assistant Chatbot
        Developed by: RSK World
        Website: https://rskworld.in
        Email: help@rskworld.in
        Phone: +91 93305 39277
        Year: 2026
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Voice Assistant Chatbot - RSK World</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <div class="container">
        <header>
            <h1><i class="fas fa-microphone"></i> Voice Assistant Chatbot</h1>
            <p class="subtitle">Powered by RSK World - Free Programming Resources & Source Code</p>
        </header>

        <div class="chat-container">
            <div class="chat-messages" id="chatMessages">
                <div class="message bot-message">
                    <div class="message-content">
                        <i class="fas fa-robot"></i>
                        <p>Hello! I'm your voice assistant. Click the microphone button or say "Hello" to start talking with me.</p>
                    </div>
                </div>
            </div>

            <div class="input-container">
                <div class="input-wrapper">
                    <input type="text" id="textInput" placeholder="Type your message or use voice..." />
                    <button id="sendBtn" class="btn-send" title="Send message">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                    <button id="voiceBtn" class="btn-voice" title="Start voice recording">
                        <i class="fas fa-microphone"></i>
                    </button>
                </div>
                <div class="voice-status" id="voiceStatus"></div>
            </div>
        </div>

        <div class="controls">
            <button id="clearBtn" class="btn-clear">
                <i class="fas fa-trash"></i> Clear Chat
            </button>
            <button id="exportBtn" class="btn-export" title="Export chat history">
                <i class="fas fa-download"></i> Export
            </button>
            <button id="statsBtn" class="btn-stats" title="View statistics">
                <i class="fas fa-chart-bar"></i> Stats
            </button>
            <button id="darkModeBtn" class="btn-dark" title="Toggle dark mode">
                <i class="fas fa-moon"></i>
            </button>
            <button id="settingsBtn" class="btn-settings">
                <i class="fas fa-cog"></i> Settings
            </button>
        </div>

        <div class="audio-visualizer" id="audioVisualizer">
            <canvas id="visualizerCanvas"></canvas>
        </div>

        <div class="stats-panel" id="statsPanel">
            <h3>Conversation Statistics</h3>
            <div class="stats-content">
                <div class="stat-item">
                    <span class="stat-label">Total Messages:</span>
                    <span class="stat-value" id="totalMessages">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Your Messages:</span>
                    <span class="stat-value" id="userMessages">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Bot Responses:</span>
                    <span class="stat-value" id="botMessages">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Voice Interactions:</span>
                    <span class="stat-value" id="voiceInteractions">0</span>
                </div>
                <div class="stat-item">
                    <span class="stat-label">Session Duration:</span>
                    <span class="stat-value" id="sessionDuration">0:00</span>
                </div>
            </div>
            <button id="closeStats" class="btn-close">Close</button>
        </div>

        <div class="settings-panel" id="settingsPanel">
            <h3>Settings</h3>
            <div class="setting-item">
                <label for="voiceSelect">Voice:</label>
                <select id="voiceSelect"></select>
            </div>
            <div class="setting-item">
                <label for="rateSelect">Speech Rate:</label>
                <input type="range" id="rateSelect" min="0.5" max="2" step="0.1" value="1">
                <span id="rateValue">1.0</span>
            </div>
            <div class="setting-item">
                <label for="pitchSelect">Pitch:</label>
                <input type="range" id="pitchSelect" min="0" max="2" step="0.1" value="1">
                <span id="pitchValue">1.0</span>
            </div>
            <div class="setting-item">
                <label for="volumeSelect">Volume:</label>
                <input type="range" id="volumeSelect" min="0" max="1" step="0.1" value="1">
                <span id="volumeValue">1.0</span>
            </div>
            <div class="setting-item">
                <label for="languageSelect">Language:</label>
                <select id="languageSelect">
                    <option value="en-US">English (US)</option>
                    <option value="en-GB">English (UK)</option>
                    <option value="es-ES">Spanish</option>
                    <option value="fr-FR">French</option>
                    <option value="de-DE">German</option>
                    <option value="it-IT">Italian</option>
                    <option value="pt-BR">Portuguese</option>
                    <option value="hi-IN">Hindi</option>
                    <option value="ja-JP">Japanese</option>
                    <option value="zh-CN">Chinese</option>
                </select>
            </div>
            <div class="setting-item">
                <label>
                    <input type="checkbox" id="continuousMode"> Continuous Listening Mode
                </label>
            </div>
            <div class="setting-item">
                <label>
                    <input type="checkbox" id="autoSpeak"> Auto Speak Responses
                </label>
            </div>
            <div class="setting-item">
                <label>
                    <input type="checkbox" id="showVisualizer"> Show Audio Visualizer
                </label>
            </div>
            <button id="closeSettings" class="btn-close">Close</button>
        </div>
    </div>

    <footer>
        <p>© 2026 <a href="https://rskworld.in" target="_blank">RSK World</a> - Free Programming Resources & Source Code</p>
        <p>Email: <a href="mailto:help@rskworld.in">help@rskworld.in</a> | Phone: <a href="tel:+919330539277">+91 93305 39277</a></p>
    </footer>

    <script src="config.js"></script>
    <script src="script.js"></script>
</body>
</html>

163 lines•7 KB

markup

README.md

Raw Download

README.md

# Voice Assistant Chatbot



A modern, voice-enabled chatbot with speech recognition and text-to-speech capabilities. This project integrates Web Speech API for real-time voice interactions, allowing users to communicate with the chatbot using voice commands.

## Features

### Core Features
- **Speech-to-Text**: Convert spoken words into text using browser's speech recognition
- **Text-to-Speech**: Convert text responses into natural voice output
- **Voice Commands**: Support for various voice commands and natural language processing
- **Audio Processing**: Real-time audio processing and voice interaction
- **Real-time Voice Interaction**: Seamless two-way voice communication
- **Customizable Settings**: Adjustable voice, rate, pitch, and volume settings
- **Modern UI**: Beautiful, responsive design with gradient backgrounds

### Advanced Features
- **Audio Visualization**: Real-time waveform visualization of voice input
- **Conversation History**: Complete chat history with timestamps
- **Multi-Language Support**: Support for 10+ languages (English, Spanish, French, German, Italian, Portuguese, Hindi, Japanese, Chinese, and more)
- **Dark Mode**: Toggle between light and dark themes
- **Export Chat History**: Download your conversation as a text file
- **Continuous Listening Mode**: Hands-free operation with continuous voice recognition
- **Conversation Statistics**: Track messages, interactions, and session duration
- **Context Awareness**: Remembers conversation context for better responses
- **Enhanced Natural Language Understanding**: Improved command recognition and response generation
- **Voice Activity Detection**: Visual feedback during voice input
- **Auto-Speak Toggle**: Control whether responses are automatically spoken
- **Session Timer**: Track how long you've been chatting

## Technologies Used

- **HTML5**: Structure and semantic markup
- **CSS3**: Modern styling with gradients and animations
- **JavaScript (ES6+)**: Core functionality and Web Speech API integration
- **Web Speech API**: Browser-native speech recognition and synthesis
- **Font Awesome**: Icons for enhanced UI

## Browser Compatibility

This project uses the Web Speech API, which is supported in:
- Chrome/Edge (Chromium-based browsers)
- Safari (with limited support)
- Firefox (limited support)

**Note**: For best experience, use Chrome or Edge browser.

## Installation

1. Download or clone this project
2. Extract the files to your web server directory
3. Open `index.html` in a modern web browser
4. Ensure you have a working microphone for voice input

## Usage

### Basic Usage

1. **Text Input**: Type your message in the input field and click the send button or press Enter
2. **Voice Input**: Click the microphone button to start voice recording
3. **Voice Commands**: Try saying:
- "Hello" or "Hi" to greet the assistant
- "What time is it?" to get the current time
- "What's the date?" to get today's date
- "Tell me a joke" for a random joke
- "Calculate 5 plus 3" for basic math
- "Help" to see available commands

### Settings

Click the Settings button to customize:
- **Voice**: Choose from available system voices
- **Speech Rate**: Control how fast the assistant speaks (0.5x to 2x)
- **Pitch**: Adjust the voice pitch (0 to 2)
- **Volume**: Control the output volume (0 to 1)
- **Language**: Select from 10+ supported languages
- **Continuous Listening Mode**: Enable hands-free operation
- **Auto Speak Responses**: Toggle automatic text-to-speech
- **Show Audio Visualizer**: Display real-time audio waveform

Settings are automatically saved to your browser's local storage.

### Advanced Controls

- **Export Button**: Download your chat history as a text file
- **Statistics Button**: View conversation statistics and analytics
- **Dark Mode Button**: Toggle between light and dark themes
- **Clear Chat**: Reset the conversation (statistics are preserved)

## Project Structure

```
voice-assistant-chatbot/
├── index.html # Main HTML file
├── styles.css # CSS styling
├── script.js # JavaScript functionality
└── README.md # This file
```

## Features in Detail

### Speech Recognition
- Uses Web Speech API for browser-native speech-to-text
- Supports continuous and single recognition modes
- Error handling for unsupported browsers

### Text-to-Speech
- Multiple voice options
- Adjustable rate, pitch, and volume
- Natural language responses

### Voice Commands
The chatbot recognizes and responds to:
- **Greetings**: "Hello", "Hi", "Hey"
- **Time & Date**: "What time is it?", "What's the date?"
- **Calculations**: "Calculate 5 plus 3", "What is 10 times 4"
- **Entertainment**: "Tell me a joke", "Say something funny"
- **Settings Control**:
- "Enable continuous mode"
- "Turn on visualizer"
- "Dark mode"
- "Show statistics"
- **General Conversation**: Natural language interaction with context awareness

## Advanced Features Explained

### Audio Visualization
The audio visualizer shows real-time waveform of your voice input. Enable it in settings to see visual feedback while speaking.

### Conversation History
All messages are stored with timestamps. You can export the entire conversation history as a text file using the Export button.

### Multi-Language Support
Switch between languages in settings. The assistant will recognize and respond in the selected language.

### Continuous Listening Mode
When enabled, the assistant keeps listening after each interaction, allowing for hands-free operation. Say "stop" or click the microphone button to pause.

### Context Awareness
The assistant remembers the last few messages in the conversation, allowing for more natural and contextually relevant responses.

### Statistics & Analytics
Track your usage with detailed statistics including:
- Total messages sent and received
- Voice interactions count
- Session duration
- Message breakdown

## Development

### Customization

To add custom responses, modify the `generateResponse()` method in `script.js`:

```javascript
generateResponse(input) {
const lowerInput = input.toLowerCase().trim();

// Add your custom commands here
if (lowerInput.includes('your-keyword')) {
return "Your custom response";
}

// ... existing code
}
```

### Adding New Features

1. **New Voice Commands**: Add conditions in the `generateResponse()` method
2. **UI Enhancements**: Modify `styles.css` for styling changes
3. **Additional Settings**: Add new controls in `index.html` and handle them in `script.js`
4. **New Languages**: Add language options to the language select dropdown
5. **Custom Visualizations**: Modify the `visualize()` method for different visualization styles

## Browser Permissions

The application requires microphone access for voice input. When you first use the voice feature, your browser will prompt you to allow microphone access. Please grant permission for the voice features to work.

## Troubleshooting

### Voice Recognition Not Working
- Ensure microphone permissions are granted
- Check that you're using a supported browser (Chrome/Edge recommended)
- Verify your microphone is working in other applications

### Text-to-Speech Not Working
- Check browser console for errors
- Verify that system voices are available
- Try selecting a different voice in settings

### Settings Not Saving
- Ensure localStorage is enabled in your browser
- Check browser console for any errors

## License

This project is provided as free source code by RSK World.

## Contact

**RSK World**
Website: [https://rskworld.in](https://rskworld.in)
Email: [help@rskworld.in](mailto:help@rskworld.in)
Phone: [+91 93305 39277](tel:+919330539277)

## Credits

Developed by RSK World - Free Programming Resources & Source Code
Year: 2026

---

© 2026 RSK World. All rights reserved.

GITHUB_RELEASE_INSTRUCTIONS.md

Raw Download

GITHUB_RELEASE_INSTRUCTIONS.md

# GitHub Release Instructions



## ✅ Code Successfully Pushed!

All code has been pushed to GitHub repository:
**https://github.com/rskworld/voice-assistant-chatbot.git**

---

## 📦 What Was Pushed

### Files Committed:
1. ✅ `index.html` - Main HTML file
2. ✅ `styles.css` - CSS styling
3. ✅ `script.js` - JavaScript functionality
4. ✅ `config.js` - Configuration settings
5. ✅ `README.md` - Complete documentation
6. ✅ `LICENSE` - MIT License
7. ✅ `DATA_STORAGE.md` - Data storage documentation
8. ✅ `ERROR_FIXES.md` - Error handling documentation
9. ✅ `RELEASE_NOTES.md` - Release notes
10. ✅ `.gitignore` - Git ignore file

### Git Information:
- **Branch**: `main`
- **Tag**: `v1.0.0`
- **Commit**: Initial commit with all features
- **Total Files**: 10 files
- **Total Lines**: 2,727+ lines of code

---

## 🏷️ Tag Created

Tag `v1.0.0` has been created and pushed to GitHub.

**Tag Message**: "Voice Assistant Chatbot v1.0.0 - Initial Release with all features"

---

## 🚀 How to Create a GitHub Release

### Option 1: Using GitHub Web Interface (Recommended)

1. **Go to your repository:**
- Visit: https://github.com/rskworld/voice-assistant-chatbot

2. **Navigate to Releases:**
- Click on "Releases" in the right sidebar
- Or go directly to: https://github.com/rskworld/voice-assistant-chatbot/releases

3. **Create New Release:**
- Click "Create a new release" button
- Or click "Draft a new release"

4. **Fill Release Details:**
- **Tag version**: Select `v1.0.0` (or type `v1.0.0`)
- **Release title**: `Voice Assistant Chatbot v1.0.0 - Initial Release`
- **Description**: Copy and paste from `RELEASE_NOTES.md` file

5. **Release Notes Template:**
```markdown
# 🎉 Voice Assistant Chatbot v1.0.0 - Initial Release

## ✨ Features

### Core Features
- Speech-to-Text conversion
- Text-to-Speech output
- Voice commands support
- Real-time voice interaction
- Customizable settings

### Advanced Features
- Audio visualization
- Conversation history with persistence
- Multi-language support (10+ languages)
- Dark mode
- Export chat history
- Continuous listening mode
- Conversation statistics
- Context awareness
- Enhanced natural language understanding

## 🛠️ Technical Details

- **Technologies**: HTML5, CSS3, JavaScript (ES6+), Web Speech API
- **Browser Support**: Chrome/Edge (full), Safari/Firefox (limited)
- **Data Storage**: Browser localStorage (client-side only)

## 📦 Installation

1. Clone the repository
2. Open `index.html` in a modern browser
3. Allow microphone access
4. Start using!

## 📄 License

MIT License - See LICENSE file for details

## 👨‍💻 Developer

**RSK World**
Website: https://rskworld.in
Email: help@rskworld.in
Phone: +91 93305 39277
```

6. **Publish Release:**
- Click "Publish release" button
- Your release will be live!

---

### Option 2: Using GitHub CLI

If you have GitHub CLI installed:

```bash
gh release create v1.0.0 \
--title "Voice Assistant Chatbot v1.0.0 - Initial Release" \
--notes-file RELEASE_NOTES.md
```

---

### Option 3: Using Git Commands

You can also create a release via GitHub API:

```bash
# Using curl (replace YOUR_TOKEN with your GitHub token)
curl -X POST \
-H "Authorization: token YOUR_TOKEN" \
-H "Accept: application/vnd.github.v3+json" \
https://api.github.com/repos/rskworld/voice-assistant-chatbot/releases \
-d '{
"tag_name": "v1.0.0",
"name": "Voice Assistant Chatbot v1.0.0 - Initial Release",
"body": "Release notes from RELEASE_NOTES.md"
}'
```

---

## 📋 Release Checklist

- [x] Code pushed to GitHub
- [x] Tag created (v1.0.0)
- [x] Tag pushed to GitHub
- [x] Release notes created (RELEASE_NOTES.md)
- [ ] GitHub Release created (via web interface)
- [ ] Release notes added to GitHub Release
- [ ] Release published

---

## 🔗 Useful Links

- **Repository**: https://github.com/rskworld/voice-assistant-chatbot
- **Releases Page**: https://github.com/rskworld/voice-assistant-chatbot/releases
- **Tags**: https://github.com/rskworld/voice-assistant-chatbot/tags
- **Create Release**: https://github.com/rskworld/voice-assistant-chatbot/releases/new

---

## 📝 Quick Release Notes (Copy This)

```markdown
# 🎉 Voice Assistant Chatbot v1.0.0

## Initial Release - Complete Voice Assistant with Advanced Features

### ✨ Key Features
- 🎤 Speech-to-Text & Text-to-Speech
- 🌍 Multi-language support (10+ languages)
- 📊 Conversation statistics & analytics
- 💾 Persistent conversation history
- 🌙 Dark mode
- 📈 Audio visualization
- 🔄 Continuous listening mode
- 📤 Export chat history
- 🎯 Context-aware responses
- ⚙️ Comprehensive settings

### 🛠️ Technologies
- HTML5, CSS3, JavaScript (ES6+)
- Web Speech API
- localStorage for data persistence

### 📦 Installation
1. Clone repository
2. Open `index.html` in browser
3. Allow microphone access
4. Start chatting!

### 📄 License
MIT License

### 👨‍💻 Developer
**RSK World** - https://rskworld.in
```

---

## 🎯 Next Steps

1. **Create GitHub Release** using the instructions above
2. **Add Release Notes** from `RELEASE_NOTES.md`
3. **Publish the Release**
4. **Share the Release** link with users

---

## 📞 Support

For questions or issues:
- **Website**: https://rskworld.in
- **Email**: help@rskworld.in
- **Phone**: +91 93305 39277
- **GitHub Issues**: https://github.com/rskworld/voice-assistant-chatbot/issues

---

© 2026 RSK World. All rights reserved.

Theme Settings

Color Scheme

Display Options

Font Size

README.md

GITHUB_RELEASE_INSTRUCTIONS.md

Theme Settings

Color Scheme

Display Options

Font Size

README.md

GITHUB_RELEASE_INSTRUCTIONS.md

🚀 Support RSK World