help@rskworld.in +91 93305 39277
RSK World
  • Home
  • Development
    • Web Development
    • Mobile Apps
    • Software
    • Games
    • Project
  • Technologies
    • Data Science
    • AI Development
    • Cloud Development
    • Blockchain
    • Cyber Security
    • Dev Tools
    • Testing Tools
  • Blog
  • About
  • Contact

Theme Settings

Color Scheme
Display Options
Font Size
100%
Back to Project
RSK World
multi-language-chatbot
/
templates
RSK World
multi-language-chatbot
Multi-language Chatbot - Python + Flask + OpenAI API + NLP + Translation + Language Detection + Cultural Adaptation
templates
  • index.html12.6 KB
run.shindex.html
templates/index.html
Raw Download
Find: Go to:
<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    Multi-language Chatbot Interface
    Author: RSK World (https://rskworld.in)
    Founder: Molla Samser
    Designer & Tester: Rima Khatun
    Contact: help@rskworld.in, +91 93305 39277
    Year: 2026
    Description: Modern web interface for multi-language chatbot
    -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Multi-language Chatbot - RSK World</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="{{ url_for('static', filename='css/style.css') }}" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- Header -->
    <header class="bg-gradient-primary text-white py-3 shadow-sm">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1 class="h3 mb-0">
                        <i class="fas fa-globe me-2"></i>
                        Multi-language Chatbot
                    </h1>
                    <p class="mb-0 opacity-75">Powered by RSK World</p>
                </div>
                <div class="col-md-6 text-md-end">
                    <span class="small">
                        <i class="fas fa-code me-1"></i>
                        Advanced NLP & Translation Technology
                    </span>
                </div>
            </div>
        </div>
    </header>

    <!-- Main Content -->
    <main class="container-fluid py-4">
        <div class="row">
            <!-- Sidebar -->
            <div class="col-lg-3 col-md-4 mb-4">
                <div class="card shadow-sm">
                    <div class="card-header bg-light">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-cog me-2"></i>
                            Settings
                        </h5>
                    </div>
                    <div class="card-body">
                        <!-- Language Selection -->
                        <div class="mb-4">
                            <label for="languageSelect" class="form-label fw-semibold">
                                <i class="fas fa-language me-1"></i>
                                Preferred Language
                            </label>
                            <select class="form-select" id="languageSelect">
                                <option value="auto">Auto-detect</option>
                                {% for code, name in supported_languages.items() %}
                                <option value="{{ code }}">{{ name }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <!-- Features -->
                        <div class="mb-4">
                            <h6 class="fw-semibold mb-3">
                                <i class="fas fa-star me-1"></i>
                                Features
                            </h6>
                            <ul class="list-unstyled small">
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Multi-language support
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Auto translation
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Language detection
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Cultural adaptation
                                </li>
                                <li class="mb-2">
                                    <i class="fas fa-check text-success me-2"></i>
                                    Language switching
                                </li>
                            </ul>
                        </div>

                        <!-- Stats -->
                        <div class="mb-4">
                            <h6 class="fw-semibold mb-3">
                                <i class="fas fa-chart-bar me-1"></i>
                                Session Stats
                            </h6>
                            <div class="row g-2 text-center">
                                <div class="col-6">
                                    <div class="bg-light rounded p-2">
                                        <div class="fw-bold" id="messageCount">0</div>
                                        <div class="small text-muted">Messages</div>
                                    </div>
                                </div>
                                <div class="col-6">
                                    <div class="bg-light rounded p-2">
                                        <div class="fw-bold" id="languageCount">0</div>
                                        <div class="small text-muted">Languages</div>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Actions -->
                        <div class="d-grid gap-2">
                            <button class="btn btn-outline-primary btn-sm" onclick="clearChat()">
                                <i class="fas fa-trash me-1"></i>
                                Clear Chat
                            </button>
                            <button class="btn btn-outline-secondary btn-sm" onclick="exportChat()">
                                <i class="fas fa-download me-1"></i>
                                Export Chat
                            </button>
                        </div>
                    </div>
                </div>

                <!-- Info Card -->
                <div class="card shadow-sm mt-3">
                    <div class="card-body">
                        <h6 class="fw-semibold mb-2">
                            <i class="fas fa-info-circle me-1"></i>
                            About
                        </h6>
                        <p class="small text-muted mb-2">
                            This advanced chatbot supports multiple languages with automatic detection and translation. Features include cultural adaptation for global applications.
                        </p>
                        <div class="small">
                            <strong>Technologies:</strong><br>
                            Python, OpenAI API, Translation APIs, NLP
                        </div>
                    </div>
                </div>
            </div>

            <!-- Chat Area -->
            <div class="col-lg-9 col-md-8">
                <div class="card shadow-sm h-100">
                    <div class="card-header bg-light d-flex justify-content-between align-items-center">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-comments me-2"></i>
                            Chat Interface
                        </h5>
                        <div class="d-flex align-items-center">
                            <span class="badge bg-success me-2" id="statusBadge">
                                <i class="fas fa-circle me-1"></i>
                                Online
                            </span>
                            <span class="small text-muted" id="currentLanguage">
                                English
                            </span>
                        </div>
                    </div>
                    
                    <!-- Chat Messages -->
                    <div class="card-body p-0">
                        <div id="chatMessages" class="chat-messages">
                            <div class="text-center text-muted py-5">
                                <i class="fas fa-robot fa-3x mb-3 opacity-50"></i>
                                <p class="mb-0">Start a conversation in any language!</p>
                                <small>I'll detect your language and respond accordingly.</small>
                            </div>
                        </div>
                    </div>

                    <!-- Input Area -->
                    <div class="card-footer bg-light">
                        <div class="input-group">
                            <input 
                                type="text" 
                                class="form-control" 
                                id="messageInput" 
                                placeholder="Type your message in any language..."
                                onkeypress="handleKeyPress(event)"
                            >
                            <button class="btn btn-primary" onclick="sendMessage()">
                                <i class="fas fa-paper-plane me-1"></i>
                                Send
                            </button>
                        </div>
                        
                        <!-- Quick Actions -->
                        <div class="mt-3 d-flex flex-wrap gap-2">
                            <button class="btn btn-sm btn-outline-secondary" onclick="insertText('Hello, how are you?')">
                                <i class="fas fa-hand-wave me-1"></i>
                                Greeting
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" onclick="insertText('What can you do?')">
                                <i class="fas fa-question me-1"></i>
                                Capabilities
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" onclick="insertText('Thank you for your help')">
                                <i class="fas fa-heart me-1"></i>
                                Thanks
                            </button>
                            <button class="btn btn-sm btn-outline-secondary" onclick="detectLanguage()">
                                <i class="fas fa-language me-1"></i>
                                Detect Language
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-dark text-white py-4 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <h6 class="mb-2">Multi-language Chatbot</h6>
                    <p class="small mb-0">
                        Advanced NLP chatbot with multi-language support and cultural adaptation.
                    </p>
                </div>
                <div class="col-md-6 text-md-end">
                    <p class="small mb-0">
                        © {{ current_year }} RSK World. All rights reserved.<br>
                        <i class="fas fa-envelope me-1"></i>
                        help@rskworld.in | 
                        <i class="fas fa-phone me-1"></i>
                        +91 93305 39277
                    </p>
                </div>
            </div>
        </div>
    </footer>

    <!-- Loading Modal -->
    <div class="modal fade" id="loadingModal" tabindex="-1" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-sm modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-body text-center py-4">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Processing...</span>
                    </div>
                    <p class="mb-0">Processing your message...</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="{{ url_for('static', filename='js/chatbot.js') }}"></script>
</body>
</html>
267 lines•12.6 KB
markup

About RSK World

Founded by Molla Samser, with Designer & Tester Rima Khatun, RSK World is your one-stop destination for free programming resources, source code, and development tools.

Founder: Molla Samser
Designer & Tester: Rima Khatun

Development

  • Game Development
  • Web Development
  • Mobile Development
  • AI Development
  • Development Tools

Legal

  • Terms & Conditions
  • Privacy Policy
  • Disclaimer

Contact Info

Nutanhat, Mongolkote
Purba Burdwan, West Bengal
India, 713147

+91 93305 39277

hello@rskworld.in
support@rskworld.in

© 2026 RSK World. All rights reserved.

Content used for educational purposes only. View Disclaimer