app.cpython-313.pyc config.cpython-313.pyc index.html README.md

app.cpython-313.pyc

This file cannot be displayed in the browser.

config.cpython-313.pyc

This file cannot be displayed in the browser.

index.html

<!--
    Anthropic Claude Chatbot
    Project: Anthropic Claude Chatbot
    Category: OpenAI Integration
    Year: 2026
    
    Developer Details:
    - Website: https://rskworld.in
    - Email: help@rskworld.in, support@rskworld.in
    - Phone: +91 93305 39277
    - Organization: RSK World
    - Founder: Molla Samser
    - Designer & Tester: Rima Khatun
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Anthropic Claude 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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/11.1.1/marked.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>
<body>
    <div class="container">
        <header class="chat-header">
            <div class="header-content">
                <div class="logo">
                    <i class="fas fa-robot"></i>
                    <h1>Claude Chatbot <span class="logo-subtitle">by <a href="https://rskworld.in" target="_blank" title="RSK World - Free Programming Resources">RSK World</a></span></h1>
                </div>
                <div class="header-actions">
                    <button class="header-btn" id="sessionsBtn" title="Chat Sessions">
                        <i class="fas fa-comments"></i>
                        <span id="sessionCount">1</span>
                    </button>
                    <button class="header-btn" id="historyBtn" title="Chat History">
                        <i class="fas fa-history"></i>
                    </button>
                    <button class="header-btn" id="exportBtn" title="Export Chat">
                        <i class="fas fa-download"></i>
                    </button>
                    <button class="header-btn" id="darkModeBtn" title="Toggle Dark Mode">
                        <i class="fas fa-moon"></i>
                    </button>
                </div>
                <div class="header-info">
                    <span class="status-indicator" id="statusIndicator">
                        <i class="fas fa-circle"></i> Ready
                    </span>
                    <span class="api-stats" id="apiStats" title="API Usage">
                        <i class="fas fa-chart-line"></i> <span id="tokenCount">0</span>
                    </span>
                </div>
            </div>
        </header>

        <main class="chat-container">
            <div class="chat-messages" id="chatMessages">
                <div class="welcome-message">
                    <div class="welcome-icon">
                        <i class="fas fa-comments"></i>
                    </div>
                    <h2>Welcome to Claude Chatbot</h2>
                    <p>Experience advanced conversational AI with Anthropic Claude. Ask me anything!</p>
                    <div class="feature-list">
                        <span class="feature-tag"><i class="fas fa-check"></i> Long Context Support</span>
                        <span class="feature-tag"><i class="fas fa-check"></i> Advanced Reasoning</span>
                        <span class="feature-tag"><i class="fas fa-check"></i> Safe AI Interactions</span>
                    </div>
                </div>
            </div>

            <div class="chat-input-container">
                <div class="input-toolbar">
                    <button class="toolbar-btn" id="voiceInputBtn" title="Voice Input">
                        <i class="fas fa-microphone"></i>
                    </button>
                    <button class="toolbar-btn" id="voiceOutputBtn" title="Voice Output">
                        <i class="fas fa-volume-up"></i>
                    </button>
                    <button class="toolbar-btn" id="templateBtn" title="Quick Templates">
                        <i class="fas fa-lightbulb"></i>
                    </button>
                </div>
                <div class="input-wrapper">
                    <input type="file" id="fileInput" accept="image/*,.pdf,.txt,.doc,.docx" style="display: none;">
                    <button class="attach-btn" id="attachBtn" title="Attach file">
                        <i class="fas fa-paperclip"></i>
                    </button>
                    <textarea 
                        id="messageInput" 
                        placeholder="Type your message here... (Press Enter to send, Shift+Enter for new line)"
                        rows="1"
                    ></textarea>
                    <button class="send-btn" id="sendBtn" title="Send message">
                        <i class="fas fa-paper-plane"></i>
                    </button>
                </div>
                <div class="input-footer">
                    <span class="char-count" id="charCount">0 characters</span>
                    <span class="model-info">
                        Powered by <a href="https://rskworld.in" target="_blank" title="RSK World - Free Programming Resources">RSK World</a> | Anthropic Claude API
                    </span>
                    <span class="search-box">
                        <input type="text" id="searchInput" placeholder="Search in chat...">
                        <i class="fas fa-search"></i>
                    </span>
                </div>
            </div>
        </main>

        <aside class="sidebar" id="sidebar">
            <div class="sidebar-header">
                <h3>Settings</h3>
                <button class="close-sidebar" id="closeSidebar">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="sidebar-content">
                <div class="setting-group">
                    <label for="modelSelect">Model:</label>
                    <select id="modelSelect">
                        <option value="claude-3-5-sonnet-20241022">Claude 3.5 Sonnet</option>
                        <option value="claude-3-opus-20240229">Claude 3 Opus</option>
                        <option value="claude-3-sonnet-20240229">Claude 3 Sonnet</option>
                        <option value="claude-3-haiku-20240307">Claude 3 Haiku</option>
                    </select>
                </div>
                <div class="setting-group">
                    <label for="maxTokens">Max Tokens:</label>
                    <input type="number" id="maxTokens" value="1024" min="1" max="4096">
                </div>
                <div class="setting-group">
                    <label for="temperature">Temperature:</label>
                    <input type="range" id="temperature" min="0" max="1" step="0.1" value="0.7">
                    <span id="temperatureValue">0.7</span>
                </div>
                <div class="setting-group">
                    <label>
                        <input type="checkbox" id="streamResponse"> Stream Response
                    </label>
                </div>
                <div class="setting-group">
                    <label>
                        <input type="checkbox" id="autoVoiceOutput"> Auto Voice Output
                    </label>
                </div>
                <div class="setting-group">
                    <label for="voiceLanguage">Voice Language:</label>
                    <select id="voiceLanguage">
                        <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>
                    </select>
                </div>
                <div class="setting-group">
                    <button class="btn-secondary" id="exportSettings">
                        <i class="fas fa-file-export"></i> Export Settings
                    </button>
                    <button class="btn-secondary" id="importSettings">
                        <i class="fas fa-file-import"></i> Import Settings
                    </button>
                </div>
                <div class="setting-group">
                    <button class="btn-clear" id="clearChat">
                        <i class="fas fa-trash"></i> Clear Chat
                    </button>
                </div>
            </div>
        </aside>

        <!-- Sessions Sidebar -->
        <aside class="sessions-sidebar" id="sessionsSidebar">
            <div class="sidebar-header">
                <h3>Chat Sessions</h3>
                <button class="close-sidebar" id="closeSessionsSidebar">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="sidebar-content">
                <button class="btn-primary" id="newSessionBtn">
                    <i class="fas fa-plus"></i> New Session
                </button>
                <div class="sessions-list" id="sessionsList">
                    <!-- Sessions will be dynamically added here -->
                </div>
            </div>
        </aside>

        <!-- Templates Modal -->
        <div class="modal" id="templatesModal">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Quick Templates</h3>
                    <button class="close-modal" id="closeTemplatesModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="templates-grid" id="templatesGrid">
                        <!-- Templates will be dynamically added -->
                    </div>
                </div>
            </div>
        </div>

        <!-- File Preview Modal -->
        <div class="modal" id="filePreviewModal">
            <div class="modal-content modal-large">
                <div class="modal-header">
                    <h3>File Preview</h3>
                    <button class="close-modal" id="closeFileModal">
                        <i class="fas fa-times"></i>
                    </button>
                </div>
                <div class="modal-body">
                    <div id="filePreviewContent"></div>
                </div>
            </div>
        </div>

        <button class="settings-btn" id="settingsBtn" title="Settings">
            <i class="fas fa-cog"></i>
        </button>
    </div>

    <div class="loading-overlay" id="loadingOverlay" style="display: none;">
        <div class="spinner"></div>
        <p>Claude is thinking...</p>
        <div class="streaming-indicator" id="streamingIndicator" style="display: none;">
            <div class="streaming-dots">
                <span></span><span></span><span></span>
            </div>
            <p>Streaming response...</p>
        </div>
    </div>

    <div class="toast-container" id="toastContainer"></div>

    <script src="script.js"></script>
    <script src="advanced-features.js"></script>
</body>
</html>

252 lines•11.4 KB

markup

README.md

Raw Download

README.md

# Anthropic Claude Chatbot

**Project:** Anthropic Claude Chatbot
**Category:** OpenAI Integration
**Year:** 2026
**Difficulty:** Intermediate

## Overview

This project integrates Anthropic Claude API to create intelligent chatbots with advanced reasoning capabilities. Features include long context handling, complex reasoning, and safe AI interactions.

### Developer Details
- **Website:** [https://rskworld.in](https://rskworld.in)
- **Email:** help@rskworld.in, support@rskworld.in
- **Phone:** +91 93305 39277
- **Organization:** RSK World
- **Founder:** Molla Samser
- **Designer & Tester:** Rima Khatun

## Features

### Core Features
- ✅ **Claude API Integration** - Seamless integration with Anthropic's Claude API
- ✅ **Long Context Support** - Handle extended conversations and context
- ✅ **Advanced Reasoning** - Leverage Claude's powerful reasoning capabilities
- ✅ **Safe AI Interactions** - Built-in safety features and content filtering
- ✅ **Multi-modal Support** - Support for text, images, and documents
- ✅ **Modern UI** - Beautiful and responsive user interface
- ✅ **Real-time Chat** - Smooth conversation experience
- ✅ **Customizable Settings** - Adjust model, temperature, and tokens

### Advanced & Unique Features
- 🎤 **Voice Input/Output** - Speech recognition and text-to-speech capabilities
- 📎 **File Upload & Analysis** - Upload images and documents for Claude to analyze
- 🌙 **Dark Mode** - Eye-friendly dark theme toggle
- 💾 **Export Chat History** - Export conversations as PDF or TXT files
- 💬 **Multiple Chat Sessions** - Create and manage multiple conversation threads
- 🎨 **Code Syntax Highlighting** - Beautiful code rendering with syntax highlighting
- 📝 **Markdown Rendering** - Rich text formatting support
- ⚡ **Streaming Responses** - Real-time token streaming for faster response display
- 📋 **Copy Messages** - One-click copy for any message
- 👍 **Message Reactions** - Like/unlike assistant responses
- 📊 **API Usage Tracking** - Monitor token usage and API statistics
- 🎯 **Quick Templates** - Pre-built conversation templates for common tasks
- 🔍 **Chat Search** - Search through conversation history
- ⚙️ **Settings Export/Import** - Save and restore your preferences
- 🗣️ **Multi-language Voice Support** - Support for multiple languages in voice features

## Technologies Used

- **Anthropic API** - For Claude AI integration
- **Python** - Backend server (Flask)
- **JavaScript** - Frontend interactivity
- **HTML/CSS** - User interface
- **Claude** - Advanced AI model

## Project Structure

```
anthropic-claude-chatbot/
├── index.html # Main HTML file
├── styles.css # CSS styles
├── script.js # Frontend JavaScript
├── app.py # Flask backend server
├── requirements.txt # Python dependencies
├── .env.example # Environment variables template
├── .gitignore # Git ignore file
└── README.md # Project documentation
```

## Installation

### Prerequisites

- Python 3.8 or higher
- Node.js (optional, for any frontend tooling)
- Anthropic API key ([Get one here](https://console.anthropic.com/))

### Setup Steps

1. **Clone or download the project**

2. **Create a virtual environment (recommended)**
```bash
python -m venv venv

# On Windows
venv\Scripts\activate

# On macOS/Linux
source venv/bin/activate
```

3. **Install Python dependencies**
```bash
pip install -r requirements.txt
```

4. **Set up environment variables**
```bash
# Copy the example file
cp .env.example .env

# Edit .env and add your Anthropic API key
ANTHROPIC_API_KEY=your_actual_api_key_here
```

5. **Start the Flask server**
```bash
python app.py
```

6. **Open the application**
- Open `index.html` in your web browser, or
- Use a local server (e.g., `python -m http.server 8000`) and navigate to `http://localhost:8000`

## Usage

1. **Configure API Key**: Make sure your `.env` file contains a valid Anthropic API key.

2. **Start Backend**: Run `python app.py` to start the Flask server on port 5000.

3. **Open Frontend**: Open `index.html` in your browser or serve it through a local server.

4. **Start Chatting**: Type your message and press Enter or click the send button.

5. **Use Advanced Features**:
- **Voice Input**: Click the microphone icon to speak your message
- **Voice Output**: Click the speaker icon to have Claude's response read aloud
- **File Upload**: Click the paperclip icon to attach images or documents
- **Dark Mode**: Toggle dark theme from the header
- **Multiple Sessions**: Click the chat icon to manage multiple conversations
- **Export Chat**: Download your conversation history as PDF or TXT
- **Quick Templates**: Click the lightbulb icon for pre-built prompts
- **Search**: Use the search box to find specific messages

6. **Adjust Settings**: Click the settings icon to customize:
- Model selection (Claude 3.5 Sonnet, Opus, Sonnet, or Haiku)
- Max tokens (1-4096)
- Temperature (0-1)
- Stream response option
- Auto voice output
- Voice language selection
- Export/Import settings

## API Endpoints

### `GET /api/health`
Health check endpoint to verify API status.

**Response:**
```json
{
"status": "healthy",
"anthropic_configured": true
}
```

### `POST /api/chat`
Main chat endpoint for conversing with Claude.

**Request Body:**
```json
{
"message": "Hello, Claude!",
"model": "claude-3-5-sonnet-20241022",
"max_tokens": 1024,
"temperature": 0.7,
"conversation_history": [],
"stream": false
}
```

**Response:**
```json
{
"response": "Hello! How can I help you today?",
"model": "claude-3-5-sonnet-20241022",
"usage": {
"input_tokens": 10,
"output_tokens": 8
}
}
```

### `GET /api/models`
Get list of available Claude models.

## Configuration

### Environment Variables

- `ANTHROPIC_API_KEY` - Your Anthropic API key (required)
- `FLASK_ENV` - Flask environment (development/production)
- `PORT` - Server port (default: 5000)

### Frontend Configuration

Edit `script.js` to change the API base URL:
```javascript
const API_BASE_URL = 'http://localhost:5000/api';
```

## Available Models

- **Claude 3.5 Sonnet** - Latest and most capable model (recommended)
- **Claude 3 Opus** - Most powerful for complex tasks
- **Claude 3 Sonnet** - Balanced performance and speed
- **Claude 3 Haiku** - Fastest and most cost-effective

## Features in Detail

### Long Context Support
Claude can handle conversations with up to 200K tokens of context, making it perfect for extended discussions and document analysis.

### Advanced Reasoning
Claude excels at complex reasoning tasks, coding, mathematics, and multi-step problem solving.

### Safe AI Interactions
Anthropic's safety measures ensure responsible AI usage with built-in content filtering and safety protocols.

## Troubleshooting

### API Key Issues
- Ensure your `.env` file contains a valid `ANTHROPIC_API_KEY`
- Check that the API key is correctly formatted (starts with `sk-ant-`)
- Verify your API key has sufficient credits

### CORS Issues
- Make sure Flask-CORS is installed: `pip install flask-cors`
- Check that the frontend and backend URLs are correct

### Connection Errors
- Verify the Flask server is running on port 5000
- Check firewall settings
- Ensure no other application is using port 5000

## Security Notes

- Never commit your `.env` file to version control
- Keep your API key secure and private
- Use environment variables for sensitive data
- Consider implementing rate limiting for production use

## Contributing

This project is part of RSK World's free programming resources. For contributions or issues, please contact:

- **Email:** help@rskworld.in
- **Website:** [https://rskworld.in](https://rskworld.in)

## License

This project is provided as-is for educational purposes. Please refer to Anthropic's API terms of service for usage guidelines.

## Acknowledgments

- **Anthropic** - For providing the Claude API
- **RSK World** - Project organization and development
- **Molla Samser** - Project founder
- **Rima Khatun** - Designer & Tester

## Support

For support, visit [https://rskworld.in/contact.php](https://rskworld.in/contact.php) or email help@rskworld.in

---

**© 2026 RSK World. All rights reserved.**

Theme Settings

Color Scheme

Display Options

Font Size

README.md

Theme Settings

Color Scheme

Display Options

Font Size

README.md

🚀 Support RSK World