Identify and filter post emotion using ChatGPT. Target page: www.douban.com/group/
// ==UserScript==
// @name DoubanPostEmotionDetection
// @name:zh-cn 利用 ChatGPT 对豆瓣帖子进行情绪分类过滤
// @namespace https://github.com/JimSunJing
// @version 0.1.1
// @description Identify and filter post emotion using ChatGPT. Target page: www.douban.com/group/
// @description:zh-cn 保存豆瓣广播内容到本地. 需要打开 douban.com/mine/statuses
// @author JimSunJing
// @include https://www.douban.com/group/*
// @exclude https://www.douban.com/group/*/topic
// @exclude https://www.douban.com/group/search*
// @exclude https://www.douban.com/group/topic/*
// @require https://unpkg.com/axios/dist/axios.min.js
// @license MIT
// @grant GM_setValue
// @grant GM_getValue
// ==/UserScript==
(() => {
"use strict";
// ask user to set openAI api key
const requireApiKey = () => {
// use GM_setValue to store api key
let secret = prompt("请输入你的 Open AI api 密匙");
if (secret) {
GM_setValue("OPENAI_API_KEY", secret);
return true;
} else {
console.log("no input.");
return false;
}
};
// store posts
class Data {
constructor() {
this.postStore = [];
this.checkbox = [];
this.analyseButton;
this.analyseFlag = false;
}
addPost(posts) {
this.postStore = this.postStore.concat(posts);
}
getPostStore() {
return this.postStore;
}
clearPost() {
this.postStore = [];
}
analysed() {
return this.analyseFlag;
}
addCheckbox(checkbox) {
this.checkbox.push(checkbox);
}
resetCheckbox() {
this.checkbox.forEach((element) => {
element.checked = true;
});
}
addAnalyseResult(result) {
const emotionMap = new Map();
result.map((post) => {
emotionMap.set(post.id, post.emotion);
});
this.postStore = this.postStore.map((post) => {
return {
...post,
emotion: emotionMap.has(post.id)
? emotionMap.get(post.id)
: "neutral",
};
});
this.analyseFlag = true;
this.resetCheckbox();
console.log("addAnalyseResult update:", this.postStore);
}
setAnalyseButton(button) {
this.analyseButton = button;
}
toggleAnalyseButton(disabled) {
if (disabled === true) {
this.analyseButton.disabled = true;
} else {
this.analyseButton.disabled = false;
}
}
}
const current = new Data();
// extract douban group post title list from current page
const getPosts = () => {
if (current.getPostStore().length > 0) {
console.log("already parsed posts");
return;
}
// get all elements with class name 'td-subject'
let tdSubjects = document.querySelectorAll(".td-subject");
// 进入小组后 class 改变（why??）
if (tdSubjects.length === 0) {
tdSubjects = document.querySelectorAll("td.title");
}
// convert nodelist to array
const posts = [];
tdSubjects.forEach((tdSubject) => {
posts.push({
id: tdSubject.querySelector("a").getAttribute("href").split("/")[5],
title: tdSubject.querySelector("a").textContent.trim(),
href: tdSubject.querySelector("a").getAttribute("href"),
});
});
current.clearPost();
current.addPost(posts);
// console.log("posts", current.getPostStore());
};
// load init button to Page HTML
// inject style
const injectStyle = () => {
const style = document.createElement("style");
style.innerHTML = `
.greasy-button {
background-color: #f8fafc;
color: black;
padding: 3px 6px;
margin: 3px;
border-radius: 7px;
border: none;
}
.newContainer {
width: 90%;
height: 26px;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
background-color: #f0f9ff;
padding: 10px;
margin: 10px 10px;
border-radius: 10px;
font-size: 14px;
}
.newInput {
margin: 3px 0px;
padding: 3px;
width: 70%;
border: 1px solid;
}
.newInput:hover {
outline: none
}
`;
document.head.appendChild(style);
};
// create button
const createBtn = (text = "") => {
let btn = document.createElement("button");
btn.classList.add("greasy-button");
btn.innerText = text;
return btn;
};
// create checkbox
const createEmotionCheckBox = (container) => {
let checkboxLabels = ["积极", "中立", "负面"];
let checkboxNames = ["positive", "neutral", "negative"];
for (let i = 0; i < checkboxLabels.length; i++) {
let label = document.createElement("label");
let checkbox = document.createElement("input");
checkbox.classList.add("emotion-checkbox");
checkbox.type = "checkbox";
checkbox.name = checkboxNames[i];
checkbox.checked = true;
current.addCheckbox(checkbox);
label.appendChild(checkbox);
label.appendChild(document.createTextNode(" " + checkboxLabels[i]));
container.appendChild(label);
checkbox.addEventListener("change", function () {
if (checkbox.checked) {
console.log(checkbox.name, "is checked");
showPost(checkbox.name);
} else {
console.log(checkbox.name, "is not checked");
hidePost(checkbox.name);
}
});
}
};
const addScriptBtn = () => {
// 在 我的小组讨论 下添加按钮
const aside = document.querySelector(".aside");
// 添加一个控制新增按钮的div
const newContainer = document.createElement("div");
newContainer.classList.add("newContainer");
aside.insertBefore(newContainer, aside.firstChild);
// 要求 ChatGPT 分析情绪按钮
const analyse = createBtn("AI分析");
analyse.addEventListener("click", analyseTitles);
current.setAnalyseButton(analyse);
newContainer.appendChild(analyse);
// 用户输入 API KEY 按钮
const changeAPIKEY = createBtn("输入API密匙");
changeAPIKEY.addEventListener("click", requireApiKey);
newContainer.appendChild(changeAPIKEY);
// 情绪分类选择 checkbox
const checkboxWrap = document.createElement("div");
checkboxWrap.classList.add("newContainer");
createEmotionCheckBox(checkboxWrap);
newContainer.insertAdjacentElement("afterend", checkboxWrap);
// notification
const noteWrap = document.createElement("div");
noteWrap.classList.add("newContainer");
noteWrap.style.justifyContent = "center";
const notification = document.createElement("p");
notification.id = "scriptNotification";
notification.innerText = "豆瓣帖子情绪过滤";
noteWrap.appendChild(notification);
checkboxWrap.insertAdjacentElement("afterend", noteWrap);
};
// notification message
const sendNotification = (msg) => {
document.getElementById("scriptNotification").innerText = msg;
};
// create api connect session using axios
const connectOpenAISession = () => {
if (!GM_getValue("OPENAI_API_KEY")) {
requireApiKey();
return;
}
const apiKey = GM_getValue("OPENAI_API_KEY");
return axios.create({
baseURL: "https://api.openai.com/v1/",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${apiKey}`,
},
});
};
// analyse with ChatGPT
const analyseTitles = async () => {
// get post titles
getPosts();
let prompt = `I want you to modify a JSON object array. You need to detect and classify each object's title text emotion, classify them into 3 types: 'positive', 'neutral', 'negative'. You need to add your classification result into the JSON object array as 'emotion' property, do not change other property. And then you need to only reply this JSON object array, when you reply you need to remove the title property. Only reply JSON object arrat, do not reply other text. Here are the JSON object array I provide: `;
const titleJson = JSON.stringify(
current.getPostStore().map((post, index) => ({
title: post.title,
id: post.id,
}))
);
prompt += titleJson;
console.log("prompt:", prompt);
// connect to open AI api
const openaiAxios = connectOpenAISession();
if (!openaiAxios) {
console.log("analyseTitles aborted");
}
// run title emotion analyse
sendNotification("AI正在分析...");
current.toggleAnalyseButton(true);
openaiAxios
.post("chat/completions", {
model: "gpt-3.5-turbo",
messages: [{ role: "user", content: prompt }],
temperature: 0.2,
})
.then((response) => {
// console.log(response.data);
current.toggleAnalyseButton(false);
const data = response.data.choices[0].message.content;
// regex for JSON array
const regex = /\[[^\]]*\{[^}]*\}[^\]]*\]/;
// Use the RegExp 'exec' method to extract the JSON object array
const match = regex.exec(data);
if (match !== null) {
const jsonArray = JSON.parse(match[0]);
// console.log("parse result array:", jsonArray);
current.addAnalyseResult(jsonArray);
} else {
throw new Error("No JSON object array found in the string.");
}
// save results, push finished notificatio to HTML
sendNotification("AI分析完毕!");
})
.catch((error) => {
console.error(error);
sendNotification("错误: " + error.message);
});
};
// hide unselected post
const hidePost = (emotion) => {
if (!current.analyseFlag) {
sendNotification("AI 还没分析.");
return;
}
try {
current
.getPostStore()
.filter((post) => post.emotion === emotion)
.map((post) => {
let postElement = document.querySelector(`a[href="${post.href}"]`)
.parentNode.parentNode;
if (postElement && !postElement.hasAttribute("hidden")) {
postElement.setAttribute("hidden", true);
}
});
} catch (error) {
console.log(error);
sendNotification("错误:", error);
}
};
// show post
const showPost = (emotion) => {
if (!current.analyseFlag) {
sendNotification("AI 还没分析.");
return;
}
try {
current
.getPostStore()
.filter((post) => post.emotion === emotion)
.map((post) => {
let postElement = document.querySelector(`a[href="${post.href}"]`)
.parentNode.parentNode;
if (postElement && postElement.hasAttribute("hidden")) {
postElement.removeAttribute("hidden");
}
});
} catch (error) {
console.log(error);
sendNotification("错误:", error);
}
};
const init = () => {
console.log("Hello, Douban Post Emotion Detection");
injectStyle();
addScriptBtn();
};
init();
})();