AI 日报

如何使用 Cohere 教程:如何创建 Cohere 支持的摘要 Chrome 扩展

  • By aihubon
  • Nov 08, 2023 - 2 min read



如何使用 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 => {}

我们将从加载按钮开始。我们希望在页面加载时加载它们,而不是主页。如果我们转到主页,最好将它们加载到clickscroll– 当我们从主页进入文章时,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未来站