MaxChatbot

---

Web Chatbot with document analysis and CMS.

📝 Table of Contents

• About
• Getting Started
  • Prerequisites
  • Backend Setup
  • Frontend Setup
• Running the tests
• Usage
• Deployment
• Built Using
• i18n / Translation
• Author

🧐 About

MaxChatbot project was made for internship purposes.

Its goal was to create a chatbot that can be integrated into a website and answer questions based on uploaded files (CSV, DOCX, PDF) and CMS content, using a vector database.

🏁 Getting Started

These instructions will get you a copy of the project up and running on your local machine for development and testing purposes. See deployment for notes on how to deploy the project on a live system.

Prerequisites

You need the following installed on your machine:

• A modern web browser (Chrome, Firefox, Edge, etc.)
• Live Server VSCode extension (optional, only if using VSCode and you want Live-Server preview)
• A running instance of the MaxChatbot backend (see Backend Setup)

Backend Setup

The frontend requires a working MaxChatbot backend API. You can use either the hosted version on Hugging Face Spaces or run it locally.

Hosted backend:

https://maxxxxior-maxchatbotbackend.hf.space

Local backend:

1. Clone or download the backend repository.
2. Open a terminal in the backend folder (where app.py is located).
3. Create and activate a virtual environment:

python -m venv venv
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope Process
.\venv\Scripts\Activate

4. Install dependencies:

pip install -r requirements.txt

5. Set your environment variables or edit app.py for testing purposes:

HF_TOKEN = "hf_your_token_here"
QDRANT_API_KEY = "your_qdrant_api_key_here"
QDRANT_HOST = "https://your-qdrant-host-url"

6. Run the backend:

uvicorn app:app --reload

7. The backend will now be accessible at:

http://127.0.0.1:8000

Frontend Setup

1. Open script.js and set the correct backend URL:

const BACKEND = "http://127.0.0.1:8000"; // for local testing
// or
const BACKEND = "https://maxxxxior-maxchatbotbackend.hf.space"; // for hosted backend

Make sure there is no trailing slash / at the end of the URL.

2. Open index.html in a browser.
   • For live reloading of CSS/JS, use Live Server VS Code extension.
   • To customize translations, edit i18n.js. You can modify existing strings or add new variables/languages.
3. Check the live demo frontend here: MaxChatbot Live Demo
4. Hosted backend: MaxChatbotBackend on Hugging Face

🔧 Running the tests

There are no automated tests for the frontend. Manual testing is recommended by:

• Starting a session
• Uploading sample files (TXT, PDF, CSV, DOCX, JSON)
• Asking the chatbot questions about uploaded files
• Deleting files and observing system bubbles and UI updates

🎈 Usage

1. Enter a session name and click Start session.
2. Upload files (up to 3, max 1 MiB each).
3. Chat with the bot to query file content.
4. Use the Show files panel to view or delete uploaded files.
5. Switch languages at any time to see translations of system messages.

🚀 Deployment

You can deploy the frontend simply by hosting index.html and the assets on any static web server. For example:

• GitHub Pages

Ensure the backend is accessible from your frontend (hosted on Hugging Face Spaces or another server) and update script.js with the correct backend URL.

⛏️ Built Using

Frontend

• HTML - Markup language for structure
• CSS - Styling
• JavaScript - Frontend logic

Backend

• FastAPI - Backend API (separate repository)
• Hugging Face Transformers - NLP model for file analysis
• Qdrant - Vector database for storing embeddings
• SentenceTransformers - Embeddings

🌐 i18n / Translation

All system messages, buttons, copyright and placeholders are translated via i18n.js.

• You can change existing translations by editing the pl or en objects in i18n.js.
• To add a new language, create a new key (e.g., es for Spanish) and provide translations for all existing variables.
• Make sure to also update window.lang in script.js or add a language switcher to use the new language.
• Examples of system messages: fileDeleted, startSessionFirst, selectFile, fileTooLarge, fileUploaded, etc.

✍️ Author

• @Maxxxxior - Idea & Full Implementation