Skip to content

PCBot v3.4.0 - Platform Modernization & Deployment Excellence

Latest

Choose a tag to compare

@athem135-source athem135-source released this 08 Jan 14:46
· 5 commits to main since this release

PCBot v3.4.0 - Major Release 🚀

Platform Modernization & Deployment Excellence

This major release transforms PCBot into a production-ready, multi-platform application with professional deployment options, automated setup, and enhanced user experience.


🎯 Major Features

🎨 Enhanced User Interface

Mode Selector Landing Page

  • User Mode: Clean interface showing only public features
    • Shareable Widget Interface
    • Mobile Site Access
  • Admin Mode: Password-protected administrative tools
    • Statistics Dashboard
    • 300-Question Calibration Test
    • Development Widget
    • Admin Panel Access
  • Server-Side Authentication: Password validation via /admin/authenticate API
  • Session Management: Secure Flask sessions with no client-side password exposure
  • Visual Indicators: Mode badge and easy mode switching

Animated Widget Interface

  • Smooth Animations:
    • slideUp (0.3s) - Widget container opening
    • fadeIn (0.3s) - Message appearance
    • bounce (1.4s) - Typing indicator dots
    • buttonPulse - Chat button effects
    • scaleIn - Modal transitions
  • Backend Health Check: Automatic server availability verification with retry overlay
  • Enhanced UX: Improved loading states and error handling

🚀 Multi-Platform Deployment

GitHub Pages Integration ✨ NEW

  • Auto-Deployment: GitHub Actions workflow for automatic builds
  • Live Site: https://athem135-source.github.io/PCBot/
  • Features:
    • Deploys on every push to main
    • Free HTTPS and custom domain support
    • Global CDN distribution
    • DDoS protection
  • Documentation: Complete setup guide in deployment/GITHUB_PAGES.md

Netlify Deployment 📦

  • Pre-Configured: Ready-to-deploy with netlify.toml
  • Deployment Options:
    • GitHub integration (auto-deploy)
    • Netlify CLI
    • Drag-and-drop deployment
  • Features:
    • Security headers (CSP, X-Frame-Options, HSTS)
    • Asset caching (1-year immutable)
    • SPA redirects
    • Form handling ready
  • Documentation: Full guide in deployment/NETLIFY.md

Cloudflare Tunnel Enhancements 🌐

  • Warning System: 5-tip user guide for tunnel connection issues
  • Auto-Retry Instructions: Clear guidance when tunnel fails
  • Quick Recovery: Copy-paste URL reminder
  • Alternative Options: ngrok and cloud deployment suggestions

🔧 Installation & Setup Automation

Virtual Environment Auto-Setup

  • One-Command Installation: setup.bat handles everything
  • Automated Process (8 steps):
    1. ✅ Verify Python 3.10+ installation
    2. ✅ Create virtual environment (.venv)
    3. ✅ Install all Python packages in venv
    4. ✅ Check/install Node.js
    5. ✅ Install React dependencies
    6. ✅ Download and configure Qdrant
    7. ✅ Download Ollama and Mistral-7B model
    8. ✅ Run 30-second warmup (downloads embedding models)

Enhanced Launchers

  • run_widget_standalone.bat:
    • [1/5] Check and start Qdrant service
    • [2/5] Check and start Ollama service
    • [3/5] Activate virtual environment
    • [4/5] Start Flask backend (8-second model warmup)
    • [5/5] Open browser + Create Cloudflare tunnel
  • Root-Level Access: Key files visible in project root for easy discovery
  • Automatic Service Management: No manual service startup needed

Bug Fixes

  • Embedding Model Error: Fixed "pip install sentence-transformers" error
    • Root cause: Packages installed globally but not in venv
    • Solution: Auto-created .venv with all dependencies
    • Result: Zero manual configuration required

📁 Professional Folder Structure

PCBot/
├── public/                    # Static frontend files
│   ├── html/                  # All HTML interfaces
│   │   ├── landing.html       # Mode selector page
│   │   ├── widget-standalone.html
│   │   ├── widget-dev.html
│   │   └── mobile.html
│   └── assets/                # Images, CSS, JS
│       ├── uraan-pak.png
│       ├── 5Vs.png
│       └── favicon.ico
│
├── scripts/setup/             # Installation scripts
│   ├── setup.bat              # Complete environment setup
│   └── run_widget_standalone.bat
│
├── deployment/                # Deployment documentation
│   ├── GITHUB_PAGES.md        # GitHub Pages guide
│   └── NETLIFY.md             # Netlify deployment guide
│
├── src/                       # Python backend
│   ├── app.py                 # Streamlit app
│   ├── rag_langchain.py       # RAG pipeline
│   └── widget_api.py          # Flask REST API
│
├── frontend-widget/           # React widget source
│   ├── src/
│   ├── dist/                  # Built widget
│   └── package.json
│
├── .github/workflows/         # CI/CD pipelines
│   └── deploy-pages.yml       # GitHub Pages deployment
│
├── setup.bat                  # Root-level setup (copy)
├── run_widget_standalone.bat  # Root-level launcher (copy)
├── QUICKSTART.md              # Quick start guide
└── README.md                  # Updated documentation

Benefits:

  • Clear separation of concerns
  • Easy navigation for developers
  • Deployment-ready structure
  • Professional organization

🛡️ Security Enhancements

Authentication & Access Control

  • Server-Side Validation: Admin password verified via Flask backend
  • Session Management: Secure session cookies with httpOnly flag
  • Mode Separation: Different capabilities for User vs Admin modes
  • No Client Secrets: Zero passwords or API keys in JavaScript

Network Security

  • HTTPS Everywhere:
    • GitHub Pages: Built-in HTTPS
    • Netlify: Automatic SSL
    • Cloudflare: Encrypted tunnels
  • CORS Configuration: Whitelist-based origin control
  • Security Headers: CSP, X-Frame-Options, HSTS (Netlify)
  • Input Validation: Enhanced API input sanitization

Deployment Security

Platform Security Features
GitHub Pages HTTPS, DDoS protection, GitHub infrastructure
Netlify CSP headers, X-Frame-Options, HSTS, automatic SSL
Cloudflare Encrypted tunnels, temporary URLs, DDoS mitigation
Local Virtual environment isolation, no external exposure

📚 Documentation Improvements

New Guides

  • QUICKSTART.md:

    • First-time setup (15-20 minutes)
    • Daily use (30 seconds)
    • File organization overview
    • Troubleshooting section
  • GITHUB_PAGES.md:

    • 3-step deployment process
    • Backend hosting options (Railway, Render, Office Server)
    • CORS configuration guide
    • Custom domain setup
    • Comparison: GitHub Pages vs Netlify
  • NETLIFY.md:

    • GitHub integration setup
    • CLI deployment commands
    • Drag-and-drop deployment
    • Backend deployment strategies
    • Security header configuration

Updated README

  • v3.4.0 feature highlights
  • New deployment options section
  • Updated system architecture
  • Enhanced security documentation
  • Revised quick start guide
  • Updated version history

🔄 Breaking Changes

File Locations

  • HTML Files: Moved from root to public/html/
  • Assets: Moved to public/assets/
  • Scripts: Organized in scripts/setup/

Migration Guide

No migration needed for end users. For developers:

  1. Update any hardcoded paths to use new folder structure
  2. Use root-level setup.bat instead of scripts/setup/setup.bat
  3. Update asset references to public/assets/

📊 Technical Specifications

Updated Stack

Component Technology Version/Config
Vector DB Qdrant 360+ chunks, auto-configured
Embeddings sentence-transformers all-MiniLM-L6-v2, auto-downloaded
Reranker Cross-Encoder ms-marco-MiniLM, 0.33 threshold
Primary LLM Ollama (Mistral 7B) Local, auto-warmup
Fallback LLM Groq API (LLaMA 3.1 70B) Cloud backup
Frontend React 18.2 TypeScript, Tailwind, animations
Backend Flask + Waitress WSGI, venv-isolated
Deployment Multi-platform GitHub Pages, Netlify, Cloudflare
Python Env Virtual Environment Auto-created .venv

Performance Metrics (Unchanged)

  • In-Scope Accuracy: 100% (300-question test)
  • Numeric Accuracy: 100% (40 financial questions)
  • Off-Scope Detection: 100% (40 off-topic questions)
  • Source Citation: 94.3% (283/300 responses)
  • Avg Response Time: 5.02s

🎬 Demo & Screenshots

Mode Selector Landing Page

Mode Selector

  • Choose User Mode for public access
  • Choose Admin Mode for administrative tools

Animated Widget

Widget Interface

  • Smooth animations and transitions
  • Real-time typing indicators
  • Backend health monitoring

🚀 Quick Start

First-Time Setup (15-20 minutes)

# Just double-click this file:
setup.bat

# Automated process:
# ✅ Creates virtual environment
# ✅ Installs all dependencies
# ✅ Downloads Ollama + Mistral model
# ✅ Configures Qdrant
# ✅ Downloads embedding models

Daily Use (30 seconds)

# Double-click to start:
run_widget_standalone.bat

# Starts everything automatically:
# [1/5] Qdrant service
# [2/5] Ollama service
# [3/5] Virtual environment
# [4/5] Flask backend
# [5/5] Browser + Cloudflare tunnel

Deploy to GitHub Pages (5 minutes)

# 1. Enable GitHub Pages in repository settings
#    Settings > Pages > Source: GitHub Actions

# 2. Push your code
git push origin main

# 3. Your site goes live at:
#    https://athem135-source.github.io/PCBot/

🐛 Bug Fixes

  • Fixed "Embedding model not available" error via venv isolation
  • Resolved widget-dev.html blank page issue
  • Fixed Cloudflare tunnel first-run connection failures
  • Corrected asset loading paths after folder restructure
  • Fixed admin panel access in standalone widget

🙏 Acknowledgments

Special thanks to the Government of Pakistan's Planning Commission for their support and the opportunity to develop this enterprise-grade RAG system.


📞 Support & Contact

Developer: M. Hassan Arif Afridi
Institution: GIKI - Ghulam Ishaq Khan Institute
LinkedIn: Connect
GitHub: @athem135-source


📝 License

PROPRIETARY SOFTWARE - ALL RIGHTS RESERVED
Copyright (c) 2025-2026 M. Hassan Arif Afridi

This software may NOT be copied, modified, or distributed without 
explicit written permission.

Permitted: Evaluation, Academic Research, GoP Internal Use (with approval)

🇵🇰 Built with ❤️ for the Government of Pakistan

PCBot v3.4.0 | Planning Commission Intelligent Assistant