boom/GemMcpJev

Fork 1

Document GemLogin search and browser inspection method #1

New issue

Open

opened 2026-09-22 11:36:46 +00:00 by boom · 0 comments

boom commented

2026-09-22 11:36:46 +00:00

Owner

จุดประสงค์

บันทึกวิธีที่ MCP bridge ใช้ค้นหาและอ่านข้อมูลจากหน้าเว็บผ่าน GemLogin เพื่อให้เข้าใจว่าเหตุใดระบบจึงรู้ว่าหน้าบราวเซอร์มีข้อมูลอะไร และควรคลิกหรือกรอกตรงไหน

1. วิธีค้นหาผ่าน GemLogin

MCP bridge ไม่ได้อ่านฐานข้อมูลภายในของเว็บไซต์และไม่ได้ใช้ cookie/password เพื่อดึงข้อมูลโดยตรง แต่ควบคุม browser profile ที่ GemLogin เปิดให้ผ่าน Local API และ Chrome DevTools Protocol (CDP)

ลำดับการทำงานหลัก:

เรียก jev_gemlogin_start(profile_id) เพื่อเริ่ม GemLogin profile และเชื่อม Playwright เข้ากับ CDP address ที่ GemLogin คืนมา
เรียก jev_gemlogin_navigate(url) เพื่อเปิด search engine, หน้าเว็บเป้าหมาย หรือ URL ของผลการค้นหา โดยอนุญาตเฉพาะ http/https
ใช้ jev_gemlogin_inspect() อ่านสถานะหลังเปิดหน้าและหลังการเปลี่ยนหน้า
หากต้องมีการโต้ตอบ ให้ใช้ jev_gemlogin_type กรอกคำค้นใน textbox/combobox แล้ว inspect อีกครั้ง หรือใช้ jev_gemlogin_click คลิกผลลัพธ์/ปุ่มที่ระบุได้
ทำซ้ำ inspect หลังทุก page transition เพื่อให้การตัดสินใจใช้ข้อมูลหน้าเว็บล่าสุด

ดังนั้น “การค้นหา” คือการใช้ browser ที่เปิดโดย GemLogin ไปยัง search engine หรือเว็บเป้าหมาย แล้วอ่านผลลัพธ์ที่แสดงอยู่จริงบนหน้าเว็บ ไม่ใช่การเรียก API ลับของเว็บไซต์

2. วิธีที่ bridge อ่านข้อมูลจากหน้า browser

การอ่านทำใน BrowserSession.inspect() โดยใช้ Playwright:

อ่าน URL ปัจจุบันจาก page.url
อ่านชื่อหน้าจาก page.title()
อ่านข้อความที่มองเห็นจาก page.locator("body").inner_text()
ค้นหา interactive DOM nodes ด้วย selector:
a, button, input, textarea, select, [role]
แปลง element แต่ละตัวเป็นข้อมูลที่ใช้ได้กับ browser action ได้แก่ role, name, text และ box
ถ้า element ไม่มี ARIA role จะอนุมาน role เบื้องต้นจาก tag/type เช่น a เป็น link, button เป็น button, input search เป็น searchbox, textarea เป็น textbox
ชื่อ element ใช้จาก aria-label, placeholder, title หรือข้อความภายใน element ตามลำดับ

ตัวอย่างข้อมูลที่ inspect คืน:

{
  "role": "button",
  "name": "Sign in",
  "text": "Sign in",
  "box": {"x": 611, "y": 308, "width": 488, "height": 38}
}

3. ทำไมระบบรู้ว่าต้อง click ตรงไหน

ระบบไม่ได้เดาตำแหน่งจากภาพอย่างเดียว และไม่ได้คลิกพิกัดสุ่ม แต่ใช้ semantic locator ของ Playwright:

page.get_by_role(role, name=name).first.click()

ตัวอย่าง ถ้า inspect พบ:

{"role": "button", "name": "Search"}

ก็สามารถเรียก:

jev_gemlogin_click(role="button", name="Search")

การระบุด้วย role + accessible name ทำให้เลือกปุ่ม/ลิงก์จากโครงสร้าง DOM และ accessibility metadata ของหน้าเว็บ ไม่ต้องพึ่งตำแหน่ง pixel ซึ่งอาจเปลี่ยนเมื่อหน้าจอหรือ layout เปลี่ยน

สำหรับการกรอกข้อมูลใช้หลักการเดียวกัน:

page.get_by_role(role, name=name).first.fill(text)

4. บทบาทของ Jev

jev_decide(instruction, questions) จะส่ง browser state ที่ inspect ได้ พร้อมคำถามและตัวเลือกที่ caller กำหนด ไปให้ Jev เลือกคำตอบแบบ typed decision

Jev มีหน้าที่ช่วยตัดสินใจจากตัวเลือกที่กำหนด เช่น:

ผลการค้นหาใดน่าจะเกี่ยวข้องที่สุด
ข้อมูลใดสอดคล้องกันข้ามแหล่ง
ควรเลือกปุ่มใดจากตัวเลือกที่ inspect พบ

Jev ไม่ได้ execute arbitrary code และไม่ได้คลิกเองโดยอัตโนมัติ ผลการตัดสินใจต้องถูกตรวจสอบก่อน แล้วจึงเรียก browser action ที่จำกัดไว้ เช่น click หรือ type

5. วิธีอ่านข้อมูลเพื่อทำรายงานให้เชื่อถือได้

สำหรับงานค้นคว้า การอ่านหน้าเว็บควรทำซ้ำเป็นรอบ:

เปิดแหล่งข้อมูลด้วย GemLogin
Inspect เนื้อหาและ interactive elements
บันทึก URL/title และข้อมูลที่มองเห็น
เปิดแหล่งข้อมูลอิสระอื่นเพื่อ cross-check
ให้น้ำหนักแหล่งทางการ/เอกสารต้นฉบับ/ฐานข้อมูลวิชาการมากกว่าโพสต์หรือโปรไฟล์รอง
แยกข้อเท็จจริงที่ยืนยันได้ออกจากข้อความที่ยังไม่ยืนยัน
ตรวจความขัดแย้ง เช่น ชื่อสะกดต่างกัน ตัวเลข citation ต่างกัน หรือ identifier ไม่ตรงกัน

6. ขอบเขตและข้อจำกัด

ข้อมูลที่อ่านได้คือข้อมูลที่หน้าเว็บส่งมาและแสดงใน DOM ณ เวลานั้น
inspect จำกัด page text ไว้สูงสุด 12,000 ตัวอักษร และ interactive elements สูงสุด 300 รายการ
แต่ละชื่อ/ข้อความของ element จำกัดความยาวไว้เพื่อไม่ส่งข้อมูลเกินจำเป็น
ไม่อ่าน cookies, local storage, password, session store หรือ credential ของ browser
นำทางได้เฉพาะ URL แบบ HTTP(S)
ถ้าหน้าต้อง login หรือถูกบล็อก ระบบไม่ควรพยายาม bypass
เว็บที่ใช้ client-side rendering, iframe, infinite scroll, CAPTCHA หรือ network error อาจทำให้ข้อมูล inspect ไม่ครบ

ไฟล์อ้างอิงในโปรเจกต์

jev_gemlogin_bridge/browser.py — เปิด profile, inspect DOM/page และ click/type
jev_gemlogin_bridge/contracts.py — จำกัด/ทำความสะอาด browser state และตรวจ URL
jev_gemlogin_bridge/server.py — ประกาศ MCP tools และเชื่อม BrowserSession กับ JevClient
jev_gemlogin_bridge/jev.py — ส่ง state/questions ไปยัง Jev API

## จุดประสงค์ บันทึกวิธีที่ MCP bridge ใช้ค้นหาและอ่านข้อมูลจากหน้าเว็บผ่าน GemLogin เพื่อให้เข้าใจว่าเหตุใดระบบจึงรู้ว่าหน้าบราวเซอร์มีข้อมูลอะไร และควรคลิกหรือกรอกตรงไหน ## 1. วิธีค้นหาผ่าน GemLogin MCP bridge ไม่ได้อ่านฐานข้อมูลภายในของเว็บไซต์และไม่ได้ใช้ cookie/password เพื่อดึงข้อมูลโดยตรง แต่ควบคุม browser profile ที่ GemLogin เปิดให้ผ่าน Local API และ Chrome DevTools Protocol (CDP) ลำดับการทำงานหลัก: 1. เรียก `jev_gemlogin_start(profile_id)` เพื่อเริ่ม GemLogin profile และเชื่อม Playwright เข้ากับ CDP address ที่ GemLogin คืนมา 2. เรียก `jev_gemlogin_navigate(url)` เพื่อเปิด search engine, หน้าเว็บเป้าหมาย หรือ URL ของผลการค้นหา โดยอนุญาตเฉพาะ `http`/`https` 3. ใช้ `jev_gemlogin_inspect()` อ่านสถานะหลังเปิดหน้าและหลังการเปลี่ยนหน้า 4. หากต้องมีการโต้ตอบ ให้ใช้ `jev_gemlogin_type` กรอกคำค้นใน textbox/combobox แล้ว inspect อีกครั้ง หรือใช้ `jev_gemlogin_click` คลิกผลลัพธ์/ปุ่มที่ระบุได้ 5. ทำซ้ำ inspect หลังทุก page transition เพื่อให้การตัดสินใจใช้ข้อมูลหน้าเว็บล่าสุด ดังนั้น “การค้นหา” คือการใช้ browser ที่เปิดโดย GemLogin ไปยัง search engine หรือเว็บเป้าหมาย แล้วอ่านผลลัพธ์ที่แสดงอยู่จริงบนหน้าเว็บ ไม่ใช่การเรียก API ลับของเว็บไซต์ ## 2. วิธีที่ bridge อ่านข้อมูลจากหน้า browser การอ่านทำใน `BrowserSession.inspect()` โดยใช้ Playwright: - อ่าน URL ปัจจุบันจาก `page.url` - อ่านชื่อหน้าจาก `page.title()` - อ่านข้อความที่มองเห็นจาก `page.locator("body").inner_text()` - ค้นหา interactive DOM nodes ด้วย selector: `a, button, input, textarea, select, [role]` - แปลง element แต่ละตัวเป็นข้อมูลที่ใช้ได้กับ browser action ได้แก่ `role`, `name`, `text` และ `box` - ถ้า element ไม่มี ARIA role จะอนุมาน role เบื้องต้นจาก tag/type เช่น `a` เป็น `link`, `button` เป็น `button`, input search เป็น `searchbox`, textarea เป็น `textbox` - ชื่อ element ใช้จาก `aria-label`, `placeholder`, `title` หรือข้อความภายใน element ตามลำดับ ตัวอย่างข้อมูลที่ inspect คืน: ```json { "role": "button", "name": "Sign in", "text": "Sign in", "box": {"x": 611, "y": 308, "width": 488, "height": 38} } ``` ## 3. ทำไมระบบรู้ว่าต้อง click ตรงไหน ระบบไม่ได้เดาตำแหน่งจากภาพอย่างเดียว และไม่ได้คลิกพิกัดสุ่ม แต่ใช้ semantic locator ของ Playwright: ```python page.get_by_role(role, name=name).first.click() ``` ตัวอย่าง ถ้า inspect พบ: ```json {"role": "button", "name": "Search"} ``` ก็สามารถเรียก: ```text jev_gemlogin_click(role="button", name="Search") ``` การระบุด้วย role + accessible name ทำให้เลือกปุ่ม/ลิงก์จากโครงสร้าง DOM และ accessibility metadata ของหน้าเว็บ ไม่ต้องพึ่งตำแหน่ง pixel ซึ่งอาจเปลี่ยนเมื่อหน้าจอหรือ layout เปลี่ยน สำหรับการกรอกข้อมูลใช้หลักการเดียวกัน: ```python page.get_by_role(role, name=name).first.fill(text) ``` ## 4. บทบาทของ Jev `jev_decide(instruction, questions)` จะส่ง browser state ที่ inspect ได้ พร้อมคำถามและตัวเลือกที่ caller กำหนด ไปให้ Jev เลือกคำตอบแบบ typed decision Jev มีหน้าที่ช่วยตัดสินใจจากตัวเลือกที่กำหนด เช่น: - ผลการค้นหาใดน่าจะเกี่ยวข้องที่สุด - ข้อมูลใดสอดคล้องกันข้ามแหล่ง - ควรเลือกปุ่มใดจากตัวเลือกที่ inspect พบ Jev ไม่ได้ execute arbitrary code และไม่ได้คลิกเองโดยอัตโนมัติ ผลการตัดสินใจต้องถูกตรวจสอบก่อน แล้วจึงเรียก browser action ที่จำกัดไว้ เช่น click หรือ type ## 5. วิธีอ่านข้อมูลเพื่อทำรายงานให้เชื่อถือได้ สำหรับงานค้นคว้า การอ่านหน้าเว็บควรทำซ้ำเป็นรอบ: 1. เปิดแหล่งข้อมูลด้วย GemLogin 2. Inspect เนื้อหาและ interactive elements 3. บันทึก URL/title และข้อมูลที่มองเห็น 4. เปิดแหล่งข้อมูลอิสระอื่นเพื่อ cross-check 5. ให้น้ำหนักแหล่งทางการ/เอกสารต้นฉบับ/ฐานข้อมูลวิชาการมากกว่าโพสต์หรือโปรไฟล์รอง 6. แยกข้อเท็จจริงที่ยืนยันได้ออกจากข้อความที่ยังไม่ยืนยัน 7. ตรวจความขัดแย้ง เช่น ชื่อสะกดต่างกัน ตัวเลข citation ต่างกัน หรือ identifier ไม่ตรงกัน ## 6. ขอบเขตและข้อจำกัด - ข้อมูลที่อ่านได้คือข้อมูลที่หน้าเว็บส่งมาและแสดงใน DOM ณ เวลานั้น - `inspect` จำกัด page text ไว้สูงสุด 12,000 ตัวอักษร และ interactive elements สูงสุด 300 รายการ - แต่ละชื่อ/ข้อความของ element จำกัดความยาวไว้เพื่อไม่ส่งข้อมูลเกินจำเป็น - ไม่อ่าน cookies, local storage, password, session store หรือ credential ของ browser - นำทางได้เฉพาะ URL แบบ HTTP(S) - ถ้าหน้าต้อง login หรือถูกบล็อก ระบบไม่ควรพยายาม bypass - เว็บที่ใช้ client-side rendering, iframe, infinite scroll, CAPTCHA หรือ network error อาจทำให้ข้อมูล inspect ไม่ครบ ## ไฟล์อ้างอิงในโปรเจกต์ - `jev_gemlogin_bridge/browser.py` — เปิด profile, inspect DOM/page และ click/type - `jev_gemlogin_bridge/contracts.py` — จำกัด/ทำความสะอาด browser state และตรวจ URL - `jev_gemlogin_bridge/server.py` — ประกาศ MCP tools และเชื่อม BrowserSession กับ JevClient - `jev_gemlogin_bridge/jev.py` — ส่ง state/questions ไปยัง Jev API

No labels

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

boom/GemMcpJev#1

No description provided.

Rows
Columns