從一個(gè)爬蟲開始ChatGPT的編程秀

更新時(shí)間：2023年03月21日 14:10:41 作者：仝鍵

這篇文章主要為大家介紹了從一個(gè)爬蟲開始ChatGPT的編程秀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

思考問題域

我要寫一個(gè)爬蟲，把ChatGPT上我的數(shù)據(jù)都爬下來，首先想想我們的問題域，我想到幾個(gè)問題：

不能用HTTP請求去爬，如果我直接
用HTTP請求去抓的話，一個(gè)我要花太多精力在登錄上了，而我的數(shù)據(jù)又不多，另一個(gè)，現(xiàn)在都是單頁引用，你HTTP爬下來的根本就不對啊。
- 所以最好是自動化測試的那種方式，啟動瀏覽器去爬。
但是我又不能保證一次把代碼寫成功，反復(fù)登錄的話，會被網(wǎng)站封號，就幾個(gè)數(shù)據(jù)，不值當(dāng)?shù)摹?/li>

所以總的來說我需要一個(gè)這樣的流程：

從流程上我們是不是可以看出，這個(gè)流程跟我們用WebConsole試驗(yàn)一段代碼的過程很像？

從這種相似性可以看出，我需要一個(gè)類似WebConsole的東西來實(shí)現(xiàn)我要的效果，這個(gè)東西學(xué)名叫REPL（Read–eval–print loop），不過你不知道這個(gè)名字也無所謂，不影響。

而且還不止，我需要從文件讀入我的代碼，畢竟沒有代碼高亮，我可寫不好程序。從文件讀入的話，我就可以用vscode給我提供代碼高亮，這豈不是美滋滋。

想到這，如果是以前，我已經(jīng)一個(gè)頭兩個(gè)大了，我只是想抓點(diǎn)東西，你讓我搞個(gè)REPL，這玩意聽著就不科學(xué)，我一天就晚上有一個(gè)小時(shí)的時(shí)間寫點(diǎn)代碼，這玩意太復(fù)雜了，乍一看也不是我業(yè)余時(shí)間能寫出來的。

但是現(xiàn)在，我們有了ChatGPT，那么我接下來可以用ChatGPT開始寫，簡單做一個(gè)任務(wù)分解：

寫一個(gè)框架，可以最大限度的幫我們提高開發(fā)效率
在這個(gè)框架上，一個(gè)場景一個(gè)場景的開發(fā)爬蟲

用ChatGPT寫一個(gè)爬蟲

1. 先寫一個(gè)框架

首先，我可能不知道這個(gè)東西叫REPL，但是我知道控制臺，那我就這么問：

如何用nodejs做一個(gè)命令行交互控制臺，執(zhí)行輸入的js代碼

然后我就得到了下面的代碼：

const readline = require('readline');
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
prompt: '>> '
});
rl.prompt();
rl.on('line', (line) => {
try {
    const result = eval(line);
    console.log(result);
} catch (err) {
    console.error(err);
}
rl.prompt();
});
rl.on('close', () => {
console.log('Exiting...');
process.exit(0);
});

但是這個(gè)代碼還不夠我用的，我需要文件輸入，所以我可以問：

如果是讀入文件作為輸入呢？

然后我得到了下面的代碼：

const fs = require('fs');
const fileName = 'path/to/file.js';
const fileContent = fs.readFileSync(fileName, 'utf8');
try {
const result = eval(fileContent);
console.log(result);
} catch (err) {
console.error(err);
}

第一反應(yīng)，這個(gè)不是async/await模式調(diào)用的呀，我后面代碼寫起來會很麻煩，于是我就說：

我要用fs/promises庫實(shí)現(xiàn)上面邏輯怎么寫呢？

然后我就得到了下面的代碼：

const fs = require('fs').promises;
const fileName = 'path/to/file.js';
const fileContent = await fs.readFile(fileName, 'utf8');
try {
const result = eval(fileContent);
console.log(result);
} catch (err) {
console.error(err);
}

這個(gè)點(diǎn)算是令我滿意了，但馬上我又意識到不對勁，我需要執(zhí)行完之后 hang 在那里等待下一次輸入的，他這執(zhí)行完就退出了，于是我又改進(jìn)了的問題：

我要實(shí)現(xiàn)的效果是，啟動后在命令行里打印一個(gè)“>”然后等待輸入，我敲擊回車，程序就會讀入代碼中寫死的目標(biāo)文件，并執(zhí)行其中的js，然后重新打印一個(gè)“>“等待下一次輸入，無限循環(huán)。

然后我得到了下面的代碼：

const readline = require('readline');
const fs = require('fs').promises;
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
prompt: '> '
});
let filePath = 'path/to/target/file.js';
rl.prompt();
rl.on('line', async () => {
try {
    const fileContent = await fs.readFile(filePath, 'utf8');
    const result = eval(fileContent);
    console.log(result);
} catch (err) {
    console.error(err);
}
rl.prompt();
});
rl.on('SIGINT', () => {
console.log('Exiting...');
rl.close();
process.exit(0);
});

注意，我再第一次的時(shí)候忘記了寫”無限循環(huán)“，所以他寫的代碼就只執(zhí)行兩次，仔細(xì)一看，確實(shí)這樣實(shí)現(xiàn)也符合我說的邏輯，他沒有猜測我要無限循環(huán)，所以在使用的時(shí)候要注意，有時(shí)候沒得到你想要的結(jié)果可能是你沒說清楚。

那么看起來到此為止就差不多了，沒想到也不復(fù)雜。那我測試一下。

我建立了一個(gè)下面的工程結(jié)構(gòu)：

.
├── index.js
└── input
    └── input.js

把文件名寫死為input/input.js
執(zhí)行 node index.js

彩蛋：其中有一次執(zhí)行的代碼在后續(xù)執(zhí)行發(fā)現(xiàn)錯(cuò)誤，

發(fā)現(xiàn)下面錯(cuò)誤：

  ```
  /Volumes/MyLab/chatgpt-show/crawler/workspace/v1/index.js:15
  const input = await new Promise(resolve => rl.question('', resolve));
                  ^^^^^
  SyntaxError: await is only valid in async functions and the top level bodies of modules
      at internalCompileFunction (node:internal/vm:73:18)
      at wrapSafe (node:internal/modules/cjs/loader:1149:20)
      at Module._compile (node:internal/modules/cjs/loader:1190:27)
      at Module._extensions..js (node:internal/modules/cjs/loader:1280:10)
      at Module.load (node:internal/modules/cjs/loader:1089:32)
      at Module._load (node:internal/modules/cjs/loader:930:12)
      at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
      at node:internal/main/run_main_module:23:47
  ```

原來是await用錯(cuò)了，不過沒關(guān)系，直接拷給他：

上面的代碼執(zhí)行報(bào)錯(cuò)： SyntaxError: await is only valid in async functions and the top level bodies of modules

于是得到了修改后的代碼

2. 在這個(gè)框架上，開發(fā)爬蟲

那么接下來，我可以試著抓取一下列表了，這部分GPT3.5就不能勝任了，我切換到GPT4，然后問：

我用puppeteer打開一個(gè)網(wǎng)頁，可以直接用document DOM API操作，然后返回?cái)?shù)據(jù)，請抓取這個(gè)網(wǎng)頁的列表，HTML如下：

.....

下面省略是openAI的頁面代碼，但是呢，因?yàn)樗罅耍也坏貌皇謩幼隽它c(diǎn)刪減，比如我列表很長，我就減到只剩3個(gè)元素，其他無關(guān)的元素的代碼我都刪掉。

經(jīng)過幾次詢問，他給出了我代碼：

const puppeteer = require('puppeteer');
(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('你的網(wǎng)址'); // 將'你的網(wǎng)址'替換為您要打開的頁面的實(shí)際URL
    const list = await page.evaluate(() => {
        const anchors = document.querySelectorAll('a');
        const items = [];
        for (const anchor of anchors) {
            const itemText = anchor.querySelector('div.flex-1.text-ellipsis.max-h-5.overflow-hidden.break-all.relative');
            if (itemText) {
                const itemTitle = itemText.textContent.trim();
                const itemLink = anchor.href;
                items.push({ title: itemTitle, link: itemLink });
            }
        }
        return items;
    });
    console.log(list);
    await browser.close();
})();

3. 回到任務(wù)1的問題域

真到執(zhí)行的時(shí)候又發(fā)現(xiàn)新問題，這個(gè)puppeteer我希望他一直開著，就不能在input.js里啟動，我需要在REPL代碼里就執(zhí)行，所以我需要稍微修改下代碼，我說：

我需要在控制臺啟動的時(shí)候用puppeteer啟動一個(gè)瀏覽器，然后每次回車可以讓文件中的代碼可以通過puppeteer訪問啟動的這個(gè)瀏覽器

然后得到了代碼：

async function main() {
const readline = require('readline');
const fs = require('fs').promises;
const puppeteer = require('puppeteer-core');
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
    prompt: '> '
});
const browser = await puppeteer.launch({
    executablePath: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome'
});
let filePath = 'path/to/target/file.js';
rl.prompt();
async function executeWithBrowser(browser) {
    const fileContent = await fs.readFile(filePath, 'utf8');
    return eval(`async function (browser) { ${fileContent} }`)(browser);
}
rl.on('line', async () => {
    try {
    const result = await executeWithBrowser(browser);
    console.log(result);
    } catch (err) {
    console.error(err);
    }
    rl.prompt();
});
rl.on('SIGINT', async () => {
    console.log('Exiting...');
    await browser.close();
    rl.close();
    process.exit(0);
});
}
main();

這代碼還是不令我滿意，我又接連問了下面幾個(gè)問題：

我需要browser是GUI可見的
把path/to/target/file.js 改為 input/input.js
我需要在進(jìn)入input/input.js之前直接啟動一個(gè)page，里直接訪問page而不是browser
這行代碼： return eval(async function (page) { ${fileContent} })(page);
報(bào)錯(cuò)：
xxxx 能不能不用eval？
報(bào)錯(cuò)： /Volumes/MyLab/chatgpt-show/crawler/workspace/v1/index.js:11
const browser = await puppeteer.launch({
^^^^^
SyntaxError: await is only valid in async functions and the top level bodies of modules

最后得到了我可以執(zhí)行的代碼。不過實(shí)際執(zhí)行中還出現(xiàn)了防抓機(jī)器人的問題，經(jīng)過一些列的查找解決了這個(gè)問題，為了突出重點(diǎn)，這里就不貼解決過程了，最終代碼如下：

const readline = require('readline');
const fs = require('fs').promises;
// const puppeteer = require('puppeteer-core');
const puppeteer = require('puppeteer-extra')
// add stealth plugin and use defaults (all evasion techniques)
const StealthPlugin = require('puppeteer-extra-plugin-stealth');
puppeteer.use(StealthPlugin());
(async () => {
const rl = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
    prompt: '> '
});
const browser = await puppeteer.launch({
    executablePath: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome',
    headless: false,
    args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-web-security']
});
const page = await browser.newPage();
let filePath = 'input/input.js';
rl.prompt();
async function executeWithPage(page) {
    const fileContent = await fs.readFile(filePath, 'utf8');
    const func = new Function('page', fileContent);
    return func(page);
}
rl.on('line', async () => {
    try {
    const result = await executeWithPage(page);
    console.log(result);
    } catch (err) {
    console.error(err);
    }
    rl.prompt();
});
rl.on('SIGINT', async () => {
    console.log('Exiting...');
    await browser.close();
    rl.close();
    process.exit(0);
});
})();

4. 最后回到具體的爬蟲代碼

而既然瀏覽器一直開著了，那我們需要執(zhí)行的代碼其實(shí)只有兩個(gè)了：

goto_chatgpt.js

(async () => {
    await page.goto('https://chat.openai.com/chat/'); 
})();

fetch_list.js

(async () => {
    const list = await page.evaluate(() => {
        const anchors = document.querySelectorAll('a');
        const items = [];
        for (const anchor of anchors) {
            const itemText = anchor.querySelector('div.flex-1.text-ellipsis.max-h-5.overflow-hidden.break-all.relative');
            if (itemText) {
                const itemTitle = itemText.textContent.trim();
                const itemLink = anchor.href;
                items.push({ title: itemTitle, link: itemLink });
            }
        }
        return items;
    });
    console.log(list);
})();

當(dāng)然實(shí)際上fetch_list.js有點(diǎn)問題，因?yàn)閛penai做了防抓程序，我們可能很難搞到列表項(xiàng)的鏈接，不過這個(gè)也不難，我們用名字匹配挨個(gè)點(diǎn)就好了嘛，反正也不多。

比如下面這樣：

(async () => {
    const targetTitle = 'AI Replacing Human';
    const targetSelector = await page.evaluateHandle((targetTitle) => {
        const anchors = document.querySelectorAll('a');
        for (const anchor of anchors) {
            const itemText = anchor.querySelector('div.flex-1.text-ellipsis.max-h-5.overflow-hidden.break-all.relative');
            if (itemText && itemText.textContent.trim() === targetTitle) {
                return anchor;
            }
        }
        return null;
    }, targetTitle);
    if (targetSelector) {
        const box = await targetSelector.boundingBox();
        await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2);
        console.log(`Clicked the link with title "${targetTitle}".`);
    } else {
        console.log(`No link found with title "${targetTitle}".`);
    }
})();

說句題外話，上面的代碼很有意思，似乎它為了防止點(diǎn)某個(gè)具體元素不管用，竟然點(diǎn)擊了一個(gè)區(qū)域。

接下來如果我們想備份我們的每一個(gè)thread就可以在這個(gè)基礎(chǔ)上，讓ChatGPT繼續(xù)給我們寫實(shí)現(xiàn)完成即可，這里就不繼續(xù)展開了，大家可以自己完成。

回顧一下，我們做了什么，得到了什么？

首先，我們對問題域做了分析，把目標(biāo)網(wǎng)站和工作者我本人以及時(shí)間限制等約束都納入了問題域進(jìn)行了分析，得到了一個(gè)方案，然后通過類比發(fā)現(xiàn)我們的方案其實(shí)就是做一個(gè)有特定上下文的REPL，然后用這個(gè)REPL再去干具體的事。
接著，我們基于這個(gè)方案做了任務(wù)分解，粗略分成了做一個(gè)REPL和實(shí)現(xiàn)具體的抓取代碼兩部分。
接著我們靠ChatGPT把些任務(wù)實(shí)現(xiàn)，在實(shí)現(xiàn)的過程中，我們發(fā)現(xiàn)自己對問題域的細(xì)節(jié)了解不夠，于是我們又迭代了我們的任務(wù)列表?？梢哉f方案沒有大的變化，實(shí)現(xiàn)上做了很多調(diào)整。

最終，我們就靠ChatGPT把這個(gè)REPL給做了出來，為了寫一個(gè)這樣的小功能，我們做了個(gè)框架，頗有點(diǎn)為了這點(diǎn)醋才包的這頓餃子的味道了。這要是在以前的時(shí)代，是一個(gè)巨大的浪費(fèi)，但其實(shí)先做一個(gè)框架的思路在ChatGPT時(shí)代應(yīng)該成為一種習(xí)慣，它會從兩個(gè)方面帶來好處：

可以降低輸入的文本數(shù)量，避免ChatGPT犯錯(cuò)。因?yàn)楹芏嗳硕贾?，ChatGPT可以快速寫出一些小程序，但是長一點(diǎn)的總是會出錯(cuò)，很多人到這里就放棄了，但其實(shí)，我們會發(fā)現(xiàn)如果我們能把問題分解到它恰好擅長的領(lǐng)域我們就可以最大限度的利用它的優(yōu)勢，規(guī)避它的劣勢。人類歷史上，蒸汽機(jī)車發(fā)明的時(shí)候，它肯定不如馬耐顛，但為了充分理由他的優(yōu)勢，人們?yōu)樗伭髓F軌。直到今天為了發(fā)揮機(jī)動車的效力，我們還是要修路鋪軌，但是我們并不覺得有什么不對，從這個(gè)角度來講，我們也不該只盯著ChatGPT的缺點(diǎn)看，揚(yáng)長避短才是正道。
縮短反饋環(huán)，提高效率。從整體效率角度來講，只有反饋環(huán)的縮短才是真正提高了效率，某一步的快速完成并不真正提高效率。所謂反饋環(huán)的縮短在我們的上下文里就是”我想到怎么編碼完成任務(wù) -> 編碼 -> 測試 -> 得知代碼執(zhí)行失敗->我又想到怎么編碼完成任務(wù)"的這個(gè)循環(huán)，我們不能假設(shè)代碼編寫一次成功，所以這個(gè)環(huán)越短，我們的效率就越高。在這個(gè)例子里我想到了我不能一次寫對，所以我就先做了REPL，這就是所謂磨刀不誤砍柴工。但是道理大家都懂，在有ChatGPT之前，磨刀這個(gè)事他總是誤砍柴工的，但是在今天，你可以用幾個(gè)問題就得到一個(gè)趁手的工具，開始你的工作，所以不要著急沖進(jìn)去工作，先做個(gè)工具可能是新時(shí)代的好習(xí)慣。

下一篇，我們將進(jìn)入這樣一個(gè)場景：我基于這個(gè)框架，我寫了很多爬蟲代碼，我該怎么組織和管理這些代碼呢？我需不需要一個(gè)精妙設(shè)計(jì)的內(nèi)部框架和規(guī)范來組織我的代碼呢？

您可能感興趣的文章: