LINE Chatbot x Perplexity AI ที่เค้าว่าจะมาปฏิวัติวงการ Search engine!

Perplexity เป็น AI Search ที่กำลังท้าทายอำนาจของ Google ในตลาด Search engine ด้วยการผสมผสานความสามารถของ AI กับการ Search แบบดั้งเดิมด้วยความสามารถในการค้นหาข้อมูลได้อย่างรวดเร็วและตรงประเด็นมากกว่า Search engine ทั่วไป โดยความเทพของ AI ตัวนี้คือนอกจากสรุปข้อมูลมาให้แบบ Real-time ยังมีการแนบ Resources หรือแหล่งอ้างอิงต่างๆที่เกี่ยวข้องมาให้ด้วยฮะ (ไม่ได้มั่วนา 55+)

ประวัติและการเติบโต:

• ก่อตั้งเมื่อเดือนสิงหาคม 2022 โดยอดีตนักวิจัย AI จาก OpenAI และ Meta
• ได้รับเงินลงทุนจาก Jeff Bezos (CEO ของ Amazon) และ Susan Wojcicki (อดีต CEO ของ YouTube)
• CEO ของ Perplexity คือคุณ Aravind Srinivas นักพัฒนาหนุ่มไฟแร๊งค์ชาวอินเดียที่เคยฝึกงานด้าน AI ทั้งที่ Google และ OpenAI

จุดเด่นของ Perplexity AI:

• ให้คำตอบที่แม่นยำ ครอบคลุม และเป็นปัจจุบัน
• มีความน่าเชื่อถือ: ระบุแหล่งที่มาของข้อมูลอย่างชัดเจนพร้อมลิงก์
• ผสมผสานโมเดลภาษาขนาดใหญ่ เช่น GPT-4 และ Claude กับการค้นหาข้อมูลจากอินเทอร์เน็ต (Package Pro)
• มีฟีเจอร์ที่น่าสนใจ เช่น การวิเคราะห์ไฟล์ PDF และวิดีโอ YouTube

ผมชอบตรงที่มี Reference มากับข้อมูลที่ได้ค่อนข้างแม่นและ Real-time :)

3 Steps ในการพัฒนา

สิ่งที่เราจะทำใน Chatbot ตัวนี้ก็ง่ายๆมีอยู่แค่ 3 ขั้นตอนเท่านั้นครับ ได้แก่

1. สร้าง LINE Chatbot ด้วย Cloud Functions
2. สมัครเข้าใช้งาน Perplexity API และสร้าง Secret Key เพื่อเข้าใช้งาน
3. พัฒนาระบบเพื่อจัดการข้อความในกลุ่มไลน์จาก Webhook เรียกใช้ Perplexity API และส่งผลลัพธ์หาผู้ใช้

1. สร้าง LINE Chatbot ด้วย Cloud Functions

สำหรับใครที่ยังไม่เคยพัฒนา LINE Chatbot ด้วย Cloud Functions for Firebase ให้ทำตามขั้นตอนของบทความนี้เพื่อสร้าง Chatbot ขึ้นมาก่อน (เฉพาะข้อ 1,2 ก็พอครับ) และบทความนี้ (เฉพาะข้อ 2)

2. สมัครเข้าใช้งาน Perplexity API และสร้าง Secret Key เพื่อเข้าใช้งาน

ก่อนจะไปเริ่มพัฒนาผมอยากให้เราได้ API Key เพื่อเอาไว้เข้าใช้งาน Perplexity API กันก่อน แรกสุดให้ไป Sign up สมัครเข้าใช้งาน Perplexity ให้เรียบร้อยที่ https://www.perplexity.ai/

พอสมัครเรียบร้อยแล้วจะเข้าไปที่หน้า Console ในหน้าแรกให้ทำการกดปุ่ม API ด้านบน และทำการเติม Credits เพื่อใช้งาน API จากนั้นเลื่อนลงมาในส่วนของ API Keys ให้กดปุ่ม Generate ตัว API Keys

3. พัฒนาระบบเพื่อจัดการข้อความในกลุ่มไลน์จาก Webhook เรียกใช้ Perplexity API และส่งผลลัพธ์หาผู้ใช้

ในโฟลเดอร์ /functions ของโปรเจคที่เราได้เตรียมไว้(ขั้นตอนที่ 1) ให้เปิดไฟล์ package.json ขึ้นมา แล้วเพิ่ม dependency ชื่อ axios เข้าไปครับ

"dependencies": {
    "axios": "^1.7.2",
    "firebase-admin": "^12.1.0",
    "firebase-functions": "^5.0.0"
  }

หลังจากเพิ่ม axios ใน package.json ให้เปิด Terminal หรือ Command line แล้ว cd ไปที่ /functions และใช้คำสั่งตามด้านล่างเพื่อให้สามารถเรียกใช้งานได้ด้วยครับ

npm install

จากนั้นให้เปิดไฟล์ index.js ขึ้นมาและสร้างฟังก์ชันต่างๆตาม code ด้านล่างนี้ครับ (XXX แทนด้วยค่า Channel Access Token ส่วน YYY แทนด้วยค่า Perplexity Secret Key)

const { onRequest } = require("firebase-functions/v2/https");

const axios = require("axios");
const msgTemplate = require("./msgTemplate");

const LINE_HEADER = {
    "Content-Type": "application/json",
    Authorization: "Bearer XXX"
};

const PERPLEXITY_HEADER = {
    accept: 'application/json',
    'content-type': 'application/json',
    authorization: 'Bearer YYY'
};

exports.webhook = onRequest(async (req, res) => {
    if (req.method === "POST") {
        const events = req.body.events;
        for (const event of events) {
            const userId = event.source.userId;
            await loading(userId);
            if (event.type === "message" && event.message.type === "text") {
                const response = await perplexityRequest(event.message.text);
                const content = response.data.choices[0].message.content;
                const urls = getAllUrls(content);
                if (urls) {
                    const body = [];
                    urls.forEach((url, index) => {
                        const color = getRandomHexColor()
                        body.push(msgTemplate.refBody(color,url,index));
                    });
                    const payload = msgTemplate.refMessage(body);
                    await reply(event.replyToken, [{ type: "text", text: content },payload]);
                } else {
                    await reply(event.replyToken, [{ type: "text", text: content }]);
                }
            }
        }
    }
    res.send(req.method);
});

const perplexityRequest = (userPrompt) => {
    return axios({
        method: "post",
        url: "https://api.perplexity.ai/chat/completions",
        headers: PERPLEXITY_HEADER,
        data: {
            model: 'llama-3-sonar-small-32k-chat',
            messages: [
                { role: 'system', content: 'Provide hyperlinks to the sources.' },
                { role: 'user', content: userPrompt }
            ]
        }
    });
};

const reply = (token, payload) => {
    return axios({
        method: "post",
        url: "https://api.line.me/v2/bot/message/reply",
        headers: LINE_HEADER,
        data: { replyToken: token, messages: payload }
    });
};

function loading(userId) {
    return axios({
        method: "post",
        url: "https://api.line.me/v2/bot/chat/loading/start",
        headers: LINE_HEADER,
        data: { chatId: userId }
    });
}

function getAllUrls(text) {
    const regex = /https?:\/\/[^\s)]+/g;
    const urls = text.match(regex);

    console.log(urls);
    return urls;
};

function getRandomHexColor() {
    const r = Math.floor(Math.random() * 256);
    const g = Math.floor(Math.random() * 256); 
    const b = Math.floor(Math.random() * 256); 

    const hex = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`.toUpperCase();

    return hex;
}

สำหรับ Flex message เราจะสร้างอีกไฟล์ขึ้นมาชื่อ msgTemplate.js ใน Folder functions และเพิ่มโค้ดตามนี้

exports.refMessage = (bubble) => ({
    "type": "flex",
    "altText": "Reference from Perplexity AI",
    "contents": {
        "type": "carousel",
        "contents": bubble
    }
})

exports.refBody = (color, url, index) => ({
    "type": "bubble",
    "size": "nano",
    "header": {
        "type": "box",
        "layout": "vertical",
        "contents": [],
        "backgroundColor": color
      },
    "body": {
        "type": "box",
        "layout": "horizontal",
        "contents": [
            {
                "type": "text",
                "text": "Reference " + index,
                "weight": "bold",
                "size": "sm",
                "wrap": true
            }
        ],
        "spacing": "sm"
    },
    "action": {
        "type": "uri",
        "label": "action",
        "uri": url
    }
})

กลับมาที่ Terminal ให้เราเรียกคำสั่งด้านล่างก็สามารถทำการ Deploy ได้เบยยย

firebase deploy --only function

เมื่อ Deploy เรียบร้อยแล้วให้เอา URL ที่มี /webhook กลับไปใส่ใน LINE Developers Console พร้อมทั้งกดเปิด Use webhook ก็เป็นอันเรียบร้อยฮะ

Demo

Note

จริงๆแล้วความเทพของ Perplexity AI คือมันจะมี Reference แนบกับคำตอบมาให้ด้วย แต่ใน API ดันไม่มี! 😡

ซึ่งผมก็พยายามไปไล่ดูใน Webboard discussion ก็มีคนมาถามหาหลายคนซึ่ง Admin เคยให้คำตอบไว้ว่า…

สบายละ อยู่ใน Roadmap มา 8 เดือน T T

วิธีที่เราพอจะ Workaround ได้คือตอนที่เราส่ง Prompt ไปเราต้องระบุว่า ‘Provide hyperlinks to the sources’ ครับ

สรุป

ในบทความนี้เราได้เรียนรู้เกี่ยวกับ Perplexity AI ซึ่งเป็น AI ที่ได้รับความนิยมในการใช้เพื่อค้นหาที่มีแหล่งข้อมูลอ้างอิงชัดเจน ต่อไปเราจะมี AI ตัวไหนมาเชื่อมต่อกับ LINE Chatbot อีกติดตามตอนต่อไปฮะ!