Skip to content

QBBot: A human-like AI UI/UX Inspector using Local VLM (InternVL2) and LLMs to autonomously audit web flows, detect visual bugs, and generate professional QA reports.

Notifications You must be signed in to change notification settings

Shadowpasha/QB_Bot

Repository files navigation

QBBot: Human-like AI UI/UX Inspector

banner

QBBot is an advanced AI-powered Quality Assurance automation agent designed to evaluate web applications with human-like reasoning. It goes beyond functional testing by assessing User Experience (UX), User Interface (UI) consistency, Accessibility, and Responsiveness.


Overview

QBBot simulates real user behavior to test critical flows such as Sign-up or Login. It employs a sophisticated DOM-First and Vision-Backup strategy:

  1. DOM Analysis: Uses Playwright to extract a semantic map of interactive elements.
  2. Vision Reasoning: Utilizes InternVL2-1B (Local VLM) to visually perceive the layout, identify aesthetic issues, and verify the visible interface.
  3. LLM Orchestration: Powered by OpenRouter (StepFun-3.5-Flash) to make strategic decisions, handle complex workflows, and generate professional reports.

Demo Page

QBBot Demo


Key Features

  • Intelligent Navigation: Autonomous decision-making using LLMs to complete complex multi-step flows.
  • Visual Auditing: Local VLM (InternVL2) integration for layout and aesthetic critique.
  • Multi-Device Support: Built-in emulation for Mobile (iPhone 12), Tablet, and Desktop.
  • Professional Reporting:
    • Markdown and PDF: Detailed audits with screenshots and UX scores.
    • Structured JSON: Programmatic results for CI/CD integration.
    • Real-time Dashboard: A Flask-based UI to configure tests and monitor logs in real-time.
  • Automated Verification: Integrated Mail.tm support to handle email registration and verification links.
  • Enterprise Integration: Automatic ClickUp ticket creation for fatal server errors detected during testing.
  • Human-like Interaction: Realistic typing speeds, natural mouse movements, and anti-bot measures.

Project Architecture

Project Architecture


Project Structure

  • agent_ui_rater_internvl.py: Main entry point and orchestration logic.
  • scripts/: Modularized core components.
    • utils.py: Shared state, constants, and profiles.
    • vlm_loader.py: Local VLM (InternVL2) management.
    • llm_loader.py: LLM API integration.
    • playwright_bridge.py: Browser automation and stealth.
    • tools.py: Agent tool definitions.
  • front-end/: Flask web application for the dashboard.
  • runs/: Directory where test results and screenshots are stored.

Installation

Prerequisites

  • Python 3.10+
  • CUDA-compatible GPU (Recommended for local VLM performance)

1. Clone and Setup

git clone https://github.com/Shadowpasha/deriv_hackathon.git
cd deriv_hackathon
pip install -r requirements.txt
playwright install chromium

2. Environment Variables

Create a .env file in the root directory:

OPENROUTER_API_KEY=your_key_here
REASONER_MODEL_ID=stepfun/step-3.5-flash:free

Running the Application

Linux / macOS

./run.sh

Windows

run.bat

Open http://localhost:5000 in your browser once the server has started.


Contact and Credits

Developed by Mokhtar Ouardi, Anas Aburaya, and Johnston Yap for the Deriv Hackathon.


© 2026 QBBot Team. All rights reserved.

About

QBBot: A human-like AI UI/UX Inspector using Local VLM (InternVL2) and LLMs to autonomously audit web flows, detect visual bugs, and generate professional QA reports.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published

Contributors 2

  •  
  •