Tutorial membuat BingChatAI API dengan NodeJs dan Puppeteer

Setelah sebelumnya kita sudah membuat API yang sama dengan Python dan Selenium. Kali ini kita akan membuatnya dengan NodeJs dan Puppeteer, secara alur scraping akan sama, namun sedikit berbeda pada bagian mendapatkan element shadowRoot.

Bing Chat AI

Baca tutorial sebelumnya:

Tutorial membuat BingChatAI API dengan Python dan Selenium

Yang perlu kalian install:

1. Node. Download disini, untuk versi terbaru. Atau kalian juga bisa menggunakan nvm, panduannya disini.

Membuat Projek

Buat folder dengan nama bing-chat-ai-js, lalu gunakan perintah berikut untuk inisialisasi projek nodejs:

mkdir bing-chat-ai-js
cd bing-chat-ai-js
npm init -y

Selanjutnya, kita akan meng-install package atau library Puppeteer dan ExpressJs. Untuk panduan lengkap Puppeteer, bisa kalian baca disini.

npm install puppeteer express

Lalu buka projek kalian dengan Code Editor favorit masing-masing. Disini saya menggunakan Visual Studio Code.

Buat file bernama index.js, dan isi dengan kode awal seperti berikut:

const express = require('express')
const app = express()
const port = 8000

app.use(express.json());

app.get('/', (req, res) => {
  res.json({result: "Welcome"})
})

app.listen(port, () => {
  console.log(`App listening on port ${port}`)
})

Kode di atas untuk memastikan API yang akan kita buat sudah berjalan dengan benar. Buka kembali terminal, dan jalankan perintah berikut:

node index.js

Untuk mengetahui API nya sudah berjalan, kita coba dengan curl, seperti berikut:

curl -X GET http://127.0.0.1:8000

Jika muncul `{“result”:”Welcome”}`, maka API sudah berjalan seperti yang diharapkan.

Membuat bot

Buat file bernama bing.js, lalu isi dengan kode berikut:

const puppeteer = require('puppeteer')

function delay(time) {
  return new Promise(function(resolve) { 
    setTimeout(resolve, time)
  });
}

async function bot(question) {
  // Launch the browser and open a new blank page
  const browser = await puppeteer.launch({headless: 'new'});
  const page = await browser.newPage();

  await page.goto('https://www.bing.com/account/general', {
    waitUntil: "domcontentloaded"
  });

  await page.click("#adlt_set_off");

  await page.click("#sv_btn");

  await page.click("#adlt_confirm");

  await page.waitForSelector("#codex > a", {visible: true});

  await page.click("#codex > a");

  // NOTE: need adjustment here to show the input question form
  await delay(5000)

  await page.type('>>> #searchbox', question);
  await page.keyboard.press('Enter', {delay: 160});

  await page.waitForSelector(">>> cib-message-group.response-message-group", {timeout: 60000});

  const shared_element = await page.waitForSelector(">>> cib-shared > div > div > div", {timeout: 0});
  const value = await shared_element.evaluate(el => el.textContent);
  console.log(value);

  await page.screenshot({
    path: 'bing-cib-message.png',
    fullPage: true,
  });
  
  await browser.close();

  return value;
}

module.exports = {
  bot
}

Pada tutorial sebelumnya, kita sudah breakdown setiap element tree dari shadowRoot. Namun yang berbeda dengan menggunakan Puppeteer adalah, kita bisa langsung menuju element yang kita inginkan dengan cukup menggunakan simbol >>>.

Kode kita menjadi lebih ringkas dan mudah dibaca. Untuk lebih jelasnya tentang element shadow ini, baca disini.

Untuk melihat setiap proses scrapingnya, kalian bisa ganti value dari paramaeter headless dengan false, seperti berikut:

async function bot(question) {
  ...
  ...
  const browser = await puppeteer.launch({headless: false});
  
  ...

Membuat endpoint chat

Selanjutnya, kita akan membuat endpoint chat yang akan digunakan untuk request berdasarkan pertanyaan yang akan di input.

Buka kembali file index.js, dan isikan dengan kode berikut:

const express = require('express')
const bing = require('./bing')
const app = express()
const port = 8000

app.use(express.json());

app.get('/', (req, res) => {
  res.json({result: "Welcome"})
})

app.post('/chat', async (req, res) => {
  const question = req.body.question
  const result = await bing.bot(question)

  res.json({result: result})
})

app.listen(port, () => {
  console.log(`App listening on port ${port}`)
})

Jalankan pada terminal dengan perintah berikut:

node index.js

Setelah berhasil di jalankan, kita coba endpoint yang baru dengan curl berikut:

curl -X POST http://127.0.0.1:8000/chat -H 'Content-Type: application/json' -d '{"question": "Halo, siapa disana?"}'

Jika berhasil, maka akan muncul response json seperti berikut:

{"result":"Halo! Ini Bing. Apa yang bisa saya bantu? 😊\n"}

Untuk membuktikan responsenya benar, buka hasil save screenshot ‘bing-cib-message.png’ ✨

bing-cib-message.png

Jika terlihat sama, maka kita sudah sukses membuat bot Bing Chat AI. 👏

Download Source Code

Kalian bisa download full codenya di github 🤡

GitHub - apriliantocecep/bing-chat-ai-js: Unofficial Bing Chat AI API - Scraping bot made with…