yiyan-browser-agent 1.4.5 → 1.4.7

package/src/browser.js

@@ -0,0 +1,589 @@
+// src/browser.js — Playwright controller for Yiyan (yiyan.baidu.com)
+// Performance optimized: smart waits, paste input, MutationObserver
+'use strict';
+
+const { chromium } = require('playwright');
+const path         = require('path');
+const config       = require('./config');
+const logger       = require('./logger');
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  Selector banks — ordered by likelihood, with fallbacks
+// ─────────────────────────────────────────────────────────────────────────────
+
+const SEL = {
+  chatInput: [
+    '.editable__T7WAW4uW',
+    '[role="textbox"]',
+    '.editable',
+    '#chat-input',
+    'textarea[placeholder]',
+    'textarea',
+    '[contenteditable="true"][role="textbox"]',
+    '[contenteditable="true"]',
+    '[class*="input-box"]',
+    '[class*="chatInput"]',
+    '[class*="editor"]',
+    '.input-area textarea',
+  ],
+
+  sendButton: [
+    'button[aria-label*="Send" i]',
+    'button[aria-label*="发送"]',
+    'button[aria-label*="send" i]',
+    '[data-testid="send-button"]',
+    'button[type="submit"]',
+    '[class*="send-btn"]',
+    '[class*="sendBtn"]',
+    '[class*="send-button"]',
+    '[class*="submit"]',
+    '.send-btn',
+  ],
+
+  stopButton: [
+    'button[aria-label*="Stop" i]',
+    'button[aria-label*="停止"]',
+    '[aria-label*="stop generating" i]',
+    '[data-testid="stop-button"]',
+    '[class*="stop-btn"]',
+    '[class*="stopBtn"]',
+    '[class*="abort"]',
+  ],
+
+  newChat: [
+    'button[aria-label*="New chat" i]',
+    'button[aria-label*="新对话"]',
+    'button[aria-label*="New conversation" i]',
+    'a[href="/"][aria-label]',
+    '[data-testid="new-chat"]',
+    '[class*="new-chat"]',
+    '[class*="newChat"]',
+  ],
+
+  // Response ready indicators
+  responseReady: [
+    '[class*="answer"]',
+    '[class*="response"]',
+    '[class*="markdown"]',
+    '.ds-markdown',
+  ],
+
+  messageContainer: [
+    '[class*="chat-content"]',
+    '[class*="message-list"]',
+    '[class*="conversation"]',
+    'main',
+  ],
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+//  YiyanBrowser class (optimized)
+// ─────────────────────────────────────────────────────────────────────────────
+
+class YiyanBrowser {
+  constructor() {
+    this.context  = null;
+    this.page     = null;
+    this._closed  = false;
+  }
+
+  // ── Lifecycle ──────────────────────────────────────────────────────────────
+
+  async launch() {
+    logger.info('Launching browser with persistent session...');
+
+    const sessionDir = path.resolve(config.SESSION_DIR);
+
+    this.context = await chromium.launchPersistentContext(sessionDir, {
+      headless      : config.HEADLESS,
+      viewport      : { width: 1280, height: 900 },
+      userAgent     : [
+        'Mozilla/5.0 (X11; Linux x86_64)',
+        'AppleWebKit/537.36 (KHTML, like Gecko)',
+        'Chrome/124.0.0.0 Safari/537.36',
+      ].join(' '),
+      args: [
+        '--disable-blink-features=AutomationControlled',
+        '--no-first-run',
+        '--disable-default-apps',
+        '--no-sandbox',
+        '--disable-setuid-sandbox',
+      ],
+      ignoreDefaultArgs: ['--enable-automation'],
+    });
+
+    const pages   = this.context.pages();
+    this.page     = pages.length > 0 ? pages[0] : await this.context.newPage();
+
+    await this.page.addInitScript(() => {
+      Object.defineProperty(navigator, 'webdriver', { get: () => false });
+    });
+
+    await this._navigate(config.YIYAN_URL);
+    await this._ensureLoggedIn();
+
+    logger.success('Browser ready!');
+  }
+
+  async close() {
+    if (this._closed) return;
+    this._closed = true;
+    try { await this.context?.close(); } catch {}
+  }
+
+  // ── Navigation (optimized: smart wait) ─────────────────────────────────────
+
+  async _navigate(url) {
+    try {
+      // Fast navigation - domcontentloaded is faster than networkidle
+      await this.page.goto(url, { waitUntil: 'domcontentloaded', timeout: 15_000 });
+      await this.page.waitForTimeout(300);  // Minimal wait for SPA render
+    } catch (err) {
+      logger.warn(`Navigation warning: ${err.message}`);
+      await this.page.waitForTimeout(800);
+    }
+  }
+
+  async newChat() {
+    try {
+      for (const sel of SEL.newChat) {
+        try {
+          const el = await this.page.waitForSelector(sel, { timeout: 1_500, state: 'visible' });
+          if (el) {
+            await el.click();
+            await this.page.waitForTimeout(200);
+            logger.dim('Started new chat session');
+            return;
+          }
+        } catch {}
+      }
+    } catch {}
+
+    await this._navigate(config.YIYAN_URL);
+    logger.dim('Navigated to Yiyan home (new chat)');
+  }
+
+  // ── Login handling (optimized) ─────────────────────────────────────────────
+
+  async _ensureLoggedIn() {
+    // Quick check, no unnecessary waiting
+    await this.page.waitForTimeout(200);
+
+    const needsLogin = await this.page.evaluate(() => {
+      const url = window.location.href;
+      const bodyText = document.body?.innerText || '';
+      return (
+        url.includes('/auth') ||
+        url.includes('/login') ||
+        url.includes('/sign') ||
+        bodyText.includes('Sign in') ||
+        bodyText.includes('Log in') ||
+        bodyText.includes('登录') ||
+        bodyText.includes('登 录') ||
+        !!document.querySelector('input[type="password"]')
+      );
+    });
+
+    if (needsLogin) {
+      this._printLoginBanner();
+      await this._waitForEnter();
+      await this.page.waitForNavigation({ waitUntil: 'domcontentloaded', timeout: 15_000 }).catch(() => {});
+    }
+  }
+
+  _printLoginBanner() {
+    console.log('');
+    logger.warn('╔══════════════════════════════════════════════╗');
+    logger.warn('║  🔐  LOGIN REQUIRED                          ║');
+    logger.warn('║                                              ║');
+    logger.warn('║  1. Log in to Yiyan (文心一言) in browser    ║');
+    logger.warn('║  2. Return here and press  ENTER  to continue║');
+    logger.warn('╚══════════════════════════════════════════════╝');
+    console.log('');
+  }
+
+  async _waitForEnter() {
+    return new Promise(resolve => {
+      const stdin   = process.stdin;
+      const wasRaw  = stdin.isRaw;
+      const wasPaused = !stdin.readable;
+
+      if (stdin.isTTY) stdin.setRawMode(false);
+      stdin.resume();
+
+      const handler = chunk => {
+        const s = chunk.toString();
+        if (s.includes('\n') || s.includes('\r')) {
+          stdin.removeListener('data', handler);
+          if (stdin.isTTY && wasRaw) stdin.setRawMode(true);
+          if (wasPaused)            stdin.pause();
+          resolve();
+        }
+      };
+
+      stdin.on('data', handler);
+    });
+  }
+
+  // ── Sending Messages (stable: keyboard.type) ────────────────────────────────
+
+  async sendMessage(text) {
+    const { el } = await this._findInput();
+
+    // Focus and select all existing content
+    await el.click({ clickCount: 3, force: true });
+    await this.page.waitForTimeout(100);
+
+    // Clear by pressing Delete
+    await this.page.keyboard.press('Delete');
+    await this.page.waitForTimeout(50);
+
+    // Type text character by character (stable, works reliably)
+    await this.page.keyboard.type(text, { delay: 10 });
+
+    // Press Enter to send
+    await this.page.keyboard.press('Enter');
+  }
+
+  async _findInput() {
+    for (const sel of SEL.chatInput) {
+      try {
+        // Increased timeout for initial page load
+        const el = await this.page.waitForSelector(sel, { timeout: 8_000, state: 'visible' });
+        if (!el) continue;
+        const tagName          = await el.evaluate(e => e.tagName.toLowerCase());
+        const isContentEditable = await el.evaluate(e => e.isContentEditable);
+        return { el, isTextarea: tagName === 'textarea' && !isContentEditable };
+      } catch {}
+    }
+    throw new Error(
+      'Cannot find the Yiyan chat input box.\n' +
+      '  → Make sure the page is fully loaded and you are logged in.\n' +
+      '  → Run with --debug to inspect DOM selectors.\n' +
+      '  → Run: node src/calibrate.js to auto-detect selectors.'
+    );
+  }
+
+  // ── Waiting for Response (stable polling) ────────────────────────────────────
+
+  /**
+   * Wait until Yiyan finishes generating and return the response text.
+   */
+  async waitForResponse() {
+    const timeout     = config.RESPONSE_TIMEOUT;
+    const stableDelay = config.STABLE_DELAY;
+    const start       = Date.now();
+
+    // Phase 1: wait for a new message to appear
+    const initialCount = await this._getMessageCount();
+    let   appeared     = false;
+
+    for (let i = 0; i < 40; i++) {
+      const count = await this._getMessageCount();
+      if (count > initialCount) { appeared = true; break; }
+      await this.page.waitForTimeout(200);
+    }
+
+    if (!appeared) logger.warn('Response may have been delayed — continuing to wait...');
+
+    // Phase 2: wait for text to stabilise
+    let lastText    = '';
+    let stableStart = null;
+    let dotCount    = 0;
+
+    while (Date.now() - start < timeout) {
+      const text = await this._extractLastMessage();
+
+      if (text !== lastText) {
+        lastText    = text;
+        stableStart = null;
+      } else if (text.length > 0) {
+        if (!stableStart) stableStart = Date.now();
+        else if (Date.now() - stableStart >= stableDelay) {
+          if (!await this._isGenerating()) break;
+          stableStart = null;
+        }
+      }
+
+      // Progress indicator
+      dotCount = (dotCount + 1) % 4;
+      logger.thinking(`Receiving response${'.'.repeat(dotCount)}  (${text.length} chars)`);
+    }
+      await this.page.waitForTimeout(200);
+
+    logger.clearLine();
+
+    const final = await this._extractLastMessage();
+    return this._cleanText(final);
+  }
+
+  // ── DOM Extraction ─────────────────────────────────────────────────────────
+
+  async _getMessageCount() {
+    return await this.page.evaluate(() => {
+      const candidates = [
+        '[class*="answer"]',
+        '[class*="response"]',
+        '[class*="content"]',
+        '[class*="markdown"]',
+        '[class*="assistant"][class*="message"]',
+        '[data-role="assistant"]',
+        '[class*="markdown-content"]',
+        '.ds-markdown',
+        '[class*="chat-message"]',
+        '[class*="message-bubble"]',
+      ];
+      for (const sel of candidates) {
+        const els = document.querySelectorAll(sel);
+        if (els.length > 0) return els.length;
+      }
+      const textBlocks = Array.from(document.querySelectorAll('div, section, article'))
+        .filter(el => el.innerText && el.innerText.length > 50);
+      return textBlocks.length;
+    });
+  }
+
+  async _extractLastMessage() {
+    return await this.page.evaluate(() => {
+      function getFullText(el) {
+        if (!el) return '';
+        let result = '';
+
+        function walk(node) {
+          if (node.nodeType === Node.TEXT_NODE) {
+            result += node.textContent;
+            return;
+          }
+          if (node.nodeType !== Node.ELEMENT_NODE) return;
+          const tag = node.tagName.toLowerCase();
+
+          if (tag === 'pre') {
+            const codeEl = node.querySelector('code');
+            if (codeEl) {
+              const cls  = codeEl.className || '';
+              const lang = (cls.match(/language-(\S+)/) || [])[1] || '';
+              const body = codeEl.textContent || '';
+              result += '\n```' + lang + '\n' + body + '\n```\n';
+            } else {
+              result += '\n```\n' + node.textContent + '\n```\n';
+            }
+            return;
+          }
+
+          if (tag === 'code') {
+            const parentTag = node.parentElement && node.parentElement.tagName
+              ? node.parentElement.tagName.toLowerCase() : '';
+            if (parentTag !== 'pre') {
+              result += '`' + node.textContent + '`';
+            }
+            return;
+          }
+
+          for (const child of node.childNodes) walk(child);
+
+          if (['p','div','li','br','h1','h2','h3','h4','h5','h6'].includes(tag)) {
+            result += '\n';
+          }
+        }
+
+        walk(el);
+        return result.trim();
+      }
+
+      const directSelectors = [
+        // Yiyan specific: answer text container (highest priority)
+        '#answer_text_id',
+        '[id="answer_text_id"]',
+        // Generic selectors
+        '[class*="answer"]',
+        '[class*="response"]',
+        '[class*="message"][class*="content"]',
+        '.ds-markdown',
+        '[class*="assistant"] [class*="markdown"]',
+        '[class*="assistant"] [class*="content"]',
+        '[data-role="assistant"] [class*="content"]',
+        '[class*="ai-message"] [class*="content"]',
+        '[class*="bot-message"] [class*="content"]',
+        '[class*="response-content"]',
+        '[class*="message-content"]:last-child',
+      ];
+
+      for (const sel of directSelectors) {
+        try {
+          const els = document.querySelectorAll(sel);
+          if (els.length > 0) {
+            const t = getFullText(els[els.length - 1]);
+            if (t.length > 10) return t;
+          }
+        } catch {}
+      }
+
+      try {
+        const markdownEls = document.querySelectorAll(
+          '[class*="markdown"], [class*="prose"], [class*="rendered"], [class*="content"]'
+        );
+        if (markdownEls.length > 0) {
+          const t = getFullText(markdownEls[markdownEls.length - 1]);
+          if (t.length > 10) return t;
+        }
+      } catch {}
+
+      try {
+        const allBlocks = Array.from(
+          document.querySelectorAll('[class*="message"], [class*="chat-item"], [class*="turn"], [class*="answer"], [class*="content"]')
+        );
+        const candidates = allBlocks.filter(el => {
+          const cls = el.className || '';
+          const id = el.id || '';
+          return (
+            !cls.toLowerCase().includes('input') &&
+            !cls.toLowerCase().includes('user') &&
+            !cls.toLowerCase().includes('editable') &&
+            !id.toLowerCase().includes('input') &&
+            !el.querySelector('textarea, input[type="text"], [contenteditable="true"]') &&
+            (el.innerText || '').length > 20
+          );
+        });
+
+        if (candidates.length > 0) {
+          return getFullText(candidates[candidates.length - 1]);
+        }
+      } catch {}
+
+      try {
+        const allDivs = Array.from(document.querySelectorAll('div, section'));
+        const textBlocks = allDivs.filter(el => {
+          const text = el.innerText || '';
+          const cls = el.className || '';
+          if (cls.includes('input') || cls.includes('editable') || cls.includes('user')) return false;
+          return text.length > 50 && !el.querySelector('textarea, [contenteditable]');
+        });
+        if (textBlocks.length > 0) {
+          textBlocks.sort((a, b) => (b.innerText || '').length - (a.innerText || '').length);
+          return getFullText(textBlocks[0]);
+        }
+      } catch {}
+
+      return '';
+    });
+  }
+
+  async _isGenerating() {
+    return await this.page.evaluate(() => {
+      const stopSelectors = [
+        'button[aria-label*="Stop" i]',
+        '[class*="stop-gen"]',
+        '[class*="stopGen"]',
+        '[class*="generating"]',
+      ];
+      for (const sel of stopSelectors) {
+        const el = document.querySelector(sel);
+        if (el) {
+          const s = window.getComputedStyle(el);
+          if (s.display !== 'none' && s.visibility !== 'hidden' && s.opacity !== '0') return true;
+        }
+      }
+
+      const loaderSelectors = [
+        '[class*="typing"]',
+        '[class*="loading"]',
+        '[class*="spinner"]',
+        '[class*="blink"]',
+        '[class*="cursor"]',
+        '[class*="pulsing"]',
+        'svg[class*="loading"]',
+        'svg[class*="spinner"]',
+      ];
+      for (const sel of loaderSelectors) {
+        const el = document.querySelector(sel);
+        if (el) {
+          const s = window.getComputedStyle(el);
+          if (s.display !== 'none' && s.visibility !== 'hidden') return true;
+        }
+      }
+
+      return false;
+    });
+  }
+
+  // ── Text Cleanup ───────────────────────────────────────────────────────────
+
+  _cleanText(text) {
+    if (!text) return '';
+
+    // Remove everything before "准备输出结果" (Yiyan's thinking process)
+    const outputMarker = '准备输出结果';
+    const markerIndex = text.indexOf(outputMarker);
+    if (markerIndex !== -1) {
+      text = text.slice(markerIndex + outputMarker.length).trim();
+    }
+
+    // Remove everything after regenerate/suggestion markers (Yiyan's UI elements)
+    const cutMarkers = ['重新生成', '重新生成的', '换个回答', '输出更详细的', '再多提供'];
+    for (const marker of cutMarkers) {
+      const cutIndex = text.indexOf(marker);
+      if (cutIndex !== -1) {
+        text = text.slice(0, cutIndex).trim();
+        break;
+      }
+    }
+
+    return text
+      // Strip any remaining AI thinking blocks
+      .replace(/<think>[\s\S]*?<\/think>\n?/gi, '')
+      // Strip copy-code button artifacts
+      .replace(/^\d+(?:Copy|Run|Insert|Edit)\b.*$/gm, '')
+      // Collapse multiple blank lines
+      .replace(/\n{3,}/g, '\n\n')
+      .trim();
+  }
+
+  // ── Debug / Calibration Utilities ─────────────────────────────────────────
+
+  async dumpDebugInfo() {
+    const info = await this.page.evaluate(() => {
+      const classFreq = {};
+      document.querySelectorAll('*').forEach(el => {
+        el.classList.forEach(c => {
+          if (c.match(/message|chat|input|send|stop|markdown|content|assistant|user|bot/i)) {
+            classFreq[c] = (classFreq[c] || 0) + 1;
+          }
+        });
+      });
+
+      const inputs = Array.from(document.querySelectorAll('textarea, [contenteditable]')).map(e => ({
+        tag         : e.tagName,
+        id          : e.id || null,
+        class       : e.className?.slice(0, 80) || null,
+        placeholder : e.placeholder || null,
+        editable    : e.isContentEditable,
+        visible     : e.offsetParent !== null,
+      }));
+
+      return {
+        url    : window.location.href,
+        title  : document.title,
+        classes: Object.entries(classFreq).sort((a, b) => b[1] - a[1]).slice(0, 40),
+        inputs,
+      };
+    });
+
+    console.log('\n' + '═'.repeat(60));
+    console.log('  DOM DEBUG INFO');
+    console.log('═'.repeat(60));
+    console.log('URL   :', info.url);
+    console.log('Title :', info.title);
+    console.log('\nInput elements:');
+    info.inputs.forEach(i => console.log(' ', JSON.stringify(i)));
+    console.log('\nMatching CSS classes (by frequency):');
+    info.classes.forEach(([cls, count]) => console.log(`  ${String(count).padStart(3)}x  .${cls}`));
+    console.log('═'.repeat(60) + '\n');
+  }
+
+  async screenshot(filePath = '/tmp/yiyan-agent-debug.png') {
+    await this.page.screenshot({ path: filePath, fullPage: false });
+    logger.info(`Screenshot saved: ${filePath}`);
+  }
+}
+
+module.exports = YiyanBrowser;