如何使用 Cohere 教程:如何创建 Cohere 支持的摘要 Chrome 扩展
你好!你是否曾经有过紧急的事情,你真的很想读一篇文章,即使它是一篇很长的文章?在本教程中,您将学习如何创建一个 Google Chrome 扩展程序,它可以让您总结文章并减少阅读时间。让我们开始吧!
本教程需要一些 HTML、CSS、JavaScript 知识,但不是不能快速学习的东西!
🚀 让我们开始吧!
❓ 如何创建 Chrome 扩展程序?
因此,我们将通过创建适当的文件来开始创建扩展。我的文件结构如下所示:
|-popup-/-popup.html| ||-scripts-/-index.js|||-styles-/-index.css||-manifest.json|
popup
目录包含用于扩展弹出窗口的 .html 文件,我们不会用得太多,我将把扩展名放在这里。
scripts
目录包含用于扩展逻辑的 .js 文件 – 生成按钮和摘要。
Styles 目录包含用于扩展样式的 .css 文件。
manifest.json
是一个包含有关扩展名的所有信息的文件。我们将从它开始。
📚 清单文件
正如我之前写的,manifest.json
是一个包含有关扩展名的所有信息的文件。它是一个 JSON 格式的文件。这将是我们此文件的内容:
{ "name": "Post Summary Generator", "description": "Summary generator using Cohere technology", "version": "1.0", "manifest_version": 3, "permissions": ["storage", "activeTab", "scripting"], "action": { "default_popup": "popup/popup.html" }, "content_scripts": [ { "matches": [ "https://*.medium.com/*", "https://*.towardsai.net/*", "https://*.towardsdatascience.com/*", "https://*.levelup.gitconnected.com/*" ], "css": ["styles/index.css"], "js": [ "scripts/index.js" ] } ]}
对我们来说最重要的是什么:
css
– 我们的 css 文件的路径js
– 我们的 js 文件的路径matches
– 我们想要使用我们的扩展的域列表(在我的例子中,我想在 medium.com、towardai.net、towardsdatascience.com、levelup.gitconnected 上使用它。 com,但您可以使用的域更多,请随意添加更多。对我来说就足够了)
🔁 将扩展加载到浏览器
要加载扩展程序,请转到浏览器,然后转到设置 > 扩展程序。使用左上角的按钮打开开发者模式并加载扩展。选择您的扩展文件夹,您就完成了!
📝 让我们来编码吧!
📜 弹出窗口.html
对于这个文件,我将只放置带有扩展名的基本 html 模板。
Cohere powered summarization Chrome Extension Cohere powered summarization Chrome Extension
🎨 索引.css
在这里,我将放置一些我们将用于总结的按钮样式。他们不会很漂亮,但现在他们要履行自己的职责。我将在下一节中解释为什么要使用这些类。
.btn-container { display: flex; justify-content: center; align-items: center;}.btn-summary { display: inline-flex; justify-content: center; align-items: center; border: 1px solid #000000; border-radius: 100%;}.btn-summary:hover { cursor: pointer; background-color: #ededed;}.btn-side { width: 3rem; height: 3rem; margin-bottom: 2rem;}.btn-bottom { width: 2rem; height: 2rem; margin-left: 1rem;}
🤖 索引.js
在这里,我们将放置我们的扩展逻辑。首先,我们将创建一个函数来生成用于汇总的按钮。我们将使用它document.createElement
来创建按钮并将document.body.appendChild
它们附加到页面主体。我们还会给按钮添加事件监听器,所以当我们点击它们时,我们会调用函数进行汇总。
我们想在用户照片旁边放置按钮。为此,我们必须将其附加到两个位置 – 侧边栏,可用于桌面视图,底部栏 – 用于移动视图。为此,我需要翻页并使用开发工具为这些元素选择元素选择器。有两种可能的情况——我们将转到主页并选择一篇文章,或者我们将直接转到文章。两个选项的选择器略有不同,这将包含在指南中。
我们将创建三个将在教程中使用的函数 – loadButtons
, prediction
, cohereReq
。
const loadButtons = () => {}const prediction = e => {}const cohereReq = prompt => {}
我们将从加载按钮开始。我们希望在页面加载时加载它们,而不是主页。如果我们转到主页,最好将它们加载到click
或scroll
– 当我们从主页进入文章时,onload
事件不会执行,因此这对我们来说是正确的解决方案。让我们对其进行编码:
const loadButtons = () => { // don't want to add these buttons to main page // so if there is nothing after e.g. 'medium.com/' url we will just return if (window.location.pathname.length < 2) return; // Bottom button // add if there isn't already one (we can performe some events more than once, but don't want to add more than one button) if (!document.querySelector(".btn-bottom")) { const bottomBar = ( document.querySelector("#root > div > div.l.c > div > div > div.v.w.x.y.z.ab.ac.ae.af > nav > div:nth-child(3) > div > div.ec.an.dp.ed > div") || document.querySelector("#root > div > div.y.c > div > div > div.jc.jd.je.jf.jg.jh.ji.jj.jk > nav > div:nth-child(3) > div > div > div") ) // here we are creating structure for button const btnBottom = document.createElement("a") btnBottom.classList.add("btn-bottom") btnBottom.classList.add("btn-summary") btnBottom.textContent = "S" // we will create container for button const btnBottomContainer = document.createElement("div") btnBottomContainer?.classList.add("btn-container") // and then append container with button to the bar btnBottomContainer?.appendChild(btnBottom) bottomBar?.appendChild(btnBottomContainer) } // Side button if (document.querySelector(".btn-side")) return const sideBar = ( document.querySelector("#root > div > div.l.c > div > div > div.v.w.x.y.z.ab.ac.ae.af > nav > div.ag.h.k.j.i.cv > div") || document.querySelector("#root > div > div.y.c > div > div > div.jc.jd.je.jf.jg.jh.ji.jj.jk > nav > div.cx.h.k.j.i.hz > div") ) const btnSide = document.createElement("a") btnSide.classList.add("btn-side") btnSide.classList.add("btn-summary") btnSide.textContent = "SUM" const btnSideContainer = document.createElement("div") btnSideContainer?.classList.add("btn-container") btnSideContainer?.appendChild(btnSide) sideBar?.appendChild(btnSideContainer) // for all buttons we want to add event listener that will call function for summarization const allButtons = document.querySelectorAll(".btn-summary") allButtons.forEach(btn => btn.addEventListener("click", prediction))}
要在特定事件上加载按钮,我们将使用window.onload
事件:
window.onload = () => { loadButtons() window.addEventListener("scroll", loadButtons) window.addEventListener("click", loadButtons)};
现在让我们编写用于汇总的函数。我们将使用cohereReq
函数从 Cohere API 获取摘要。
// request to cohere xlarge modelconst cohereReq = async prompt => { const modelSettings = JSON.stringify({ model: "xlarge", prompt, max_tokens: 1024, temperature: 0.6, k: 0, p: 0.75 }) const reqBody = { method: "POST", mode: 'cors', headers: { "Authorization": "BEARER {YOUR_COHERE_API_KEY}", // replace with your API key "Content-Type": "application/json", "Cohere-Version": "2021-11-08", // model version // I added some headers to prevent CORS errors "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Methods": "DELETE, POST, GET, OPTIONS", "Access-Control-Allow-Headers": "Content-Type, Authorization, X-Requested-With" }, body: modelSettings, redirect: "follow" }; // make request let response = await fetch("https://api.cohere.ai/generate", reqBody); response = response.json(); return response;}
现在让我们实现从页面中提取数据和调用cohereReq
函数的逻辑。我们将为prediction
它使用功能。
const prediction = async e => { const articleElement = document.querySelector("section > div > div:nth-child(2)") // extract headings, text, skip images let texts = [] const heading = articleElement.querySelector("h1")?.textContent // get text from each element for (const node of (articleElement.childNodes || [])) if (node.textContent !== heading) texts.push(node.textContent.split(" ")); // flatten array texts = texts.flat() // remove empty strings texts = texts.filter(text => text !== "" && text !== " ") const prompt = `Summarize shortly this article, without code! If you want to finish use '--'. Article:Article heading: ${heading || texts[0]}Article content: ${texts.slice(0, 800).join(" ")}` const response = await cohereReq(prompt) // from response get generations (if response exists), from generations get first element (if generations exist), and from it get text (if theres is element exists) const text = response?.generations?.shift()?.text console.log(text)}
好的,现在我们可以使用它了!让我们去 Medium 试试吧!
如您所见,我们只能在控制台中得到答案。我这样做是为了给你留下改进。将其视为挑战!尝试通过编辑提示来提高模型的性能。在 中创建一个漂亮的弹出窗口popup.html
,并为收到的回复生成一个弹出窗口。在等待回复期间创建微调器。您还可以编辑主按钮。在教程的文本频道中展示您在我们 Discord 上的工作成果!我迫不及待地想看看你创造了什么!
请继续关注AIHubPro未来百科的教程!
谢谢你!– AI未来百科 ; 探索AI的边界与未来! 懂您的AI未来站