1 of 8

Bingle�Highlight Search Engine

BY: SHUBHA SUNDAR, SUSHMA PONNA, GENE HORECKA, MONY CHHEN

2 of 8

Bingle Project Overview

  • Summary
    • Bingle is a Google Chrome extension that allows users to quickly access relevant information about some word(s) on a webpage without having to open another browser tab to search for the query. This is done by highlighting the candidate word(s) to search for, right-clicking on the highlighted word(s), and then selecting 'Search on Bingle'.
  • Frontend
    • Chrome Extension App
      • React Library & TypeScript
  • Backend
    • Python
      • BM25 Ranking Algorithm
        • Removal of Stop words, Lemmatization, Stemming
    • Node.js and Express.js Web Framework
  • Dataset
    • Wikipedia Dump (.br2 file)
      • Wikipedia Extractor tool

​

​

3 of 8

Data flow

4 of 8

Bingle App Usage

  1. Install Bingle using the instructions in the following slides.
  2. Highlight some words(s) on a webpage. This will act as the search query.
  3. Right click on the highlighted word(s) and select 'Search on Bingle' from the dropdown list.
  4. Bingle will return the 3 most relevant search results based on the search query. The results will be displayed in a mini dropdown list at the top right corner of your Chrome web browser.
  5. Each dropdown card will contain a summary of the relevant search result along with a link to the corresponding Wikipedia page for that result

​

5 of 8

Installation Guide Part 1

  1. git clone https://github.com/genefever/bingle.git
  2. cd bingle
  3. Install Node.js
    • Visit the official Node.js Downloads website 
    • Download installation
    • Confirm version with ‘node --version’ and ‘npm –version’
  4. Install python 3.5
    •  use pyenv. For Windows, use pyenv-win.
  5. pip install -r requirements.txt

Detail Installation guide link can be found: https://github.com/genefever/bingle/blob/main/README.md

6 of 8

Installation Guide Part 2

  • Configure the app to run locally
  • From the bingle/ project root directory, run: npm install
  • Within bingle/python/, you will need to add:
  • Within the bingle/python/wikipidia/, you will also need to add:
  • From the bingle/ project root directory, run:
          • cd chrome_extension
          • npm install
  • After npm install completes, build the Chrome extension by running:
          • npm start

​

7 of 8

Installation Guide Part 3

  • Running Project
  • Open up a new terminal shell, enter the bingle/ project root directory, then run:
        • npm install –g nodemon
        • nodemon start

​

  • Chrome extension minimize production build
  • Open up a new terminal shell, enter the bingle/ project root directory, then run:
        • npm run build

8 of 8

Usage Demo Video

YouTube Link: https://www.youtube.com/watch?v=7Xv4ZQc5zuk