[免费]利用 Gemini Pro 给文章添加 AI摘要

共计 3968 个字符，预计需要花费 10 分钟才能阅读完成。

获取 Gemini Pro API key

进入官网ai.google.dev，点击Get API key in Google AI Studio，登入谷歌账号，进入ai聊天界面，选择第一项同意即可；

如下图为聊天界面，即可正常使用，如您还没有bingAI助手；点击左上角Get API Key，创建并拷贝ApiKey

使用Netlify平台，部署palm-netlify-proxy

项目地址：https://github.com/antergone/palm-netlify-proxy，打开项目，先进行Fork，解决地区不可用问题

Netlify部署地址：https://app.netlify.com，登录账号选择GitHub，方便接下来Deploy

进入主页面之后，选择Add new site，下拉框选择Import an existing project，接下来选择Deploy with GitHub，会有弹框进行一些设置，获取GitHub的所有项目即可，接着就可以选择本项目palm-netlify-proxy代码进行部署，等待完成即可

完成之后获取API URL ： https://calm-pothos-2edf47.netlify.app（这是作者的，以各自为准），备用

CloudFlare 部署 Gemini OpenAI Proxy

本次部署是为了将Gemini Pro 接口格式修改为 OpenAI 接口格式，涉及到项目地址：https://github.com/zuisong/gemini-openai-proxy，需要该项目下的文件：main_cloudflare-workers.mjs，复制该文件的全部内容

进入CloudFlare，没有账号的先注册，进入页面部署服务，自定义子域名，编辑代码（现将work.js文件全部删除，然后将刚才提到的文件内容粘贴进去），接下来还做一些操作，替换参数：

• 搜索var BASE_URL，将值修改为上文部署的Netlify 网址：https://calm-pothos-2edf47.netlify.app
• 搜索const apiKey，将值修改为上文获取的Gemini Pro Key：’YourGeminiProKey’

保存并部署，等待完成即可，获取到个人的请求url，可进行curl测试：

curl https://cloudflare部署地址/v1/chat/completions \
    -H "Authorization: Bearer $YOUR_GEMINI_API_KEY" \
    -H "Content-Type: application/json" \
    -d '{
        "model": "gpt-3.5-turbo",
        "messages": [{"role": "user", "content": "Hello"}],
        "temperature": 0.7
        }'

前端代码配置

如下这段代码复制粘贴到文章页面合适位置，比如正文内容上面

<div class="post-ai" onclick="geminiAI()">
  <img alt="Static Badge" src="https://api-shields.edui.fun/badge/Gemini-文章摘要-blue.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiIGQ9Im0yMS42NCAzLjY0bC0xLjI4LTEuMjhhMS4yMSAxLjIxIDAgMCAwLTEuNzIgMEwyLjM2IDE4LjY0YTEuMjEgMS4yMSAwIDAgMCAwIDEuNzJsMS4yOCAxLjI4YTEuMiAxLjIgMCAwIDAgMS43MiAwTDIxLjY0IDUuMzZhMS4yIDEuMiAwIDAgMCAwLTEuNzJNMTQgN2wzIDNNNSA2djRtMTQgNHY0TTEwIDJ2Mk03IDhIM20xOCA4aC00TTExIDNIOSIvPjwvc3ZnPg==">
</div>
<style>
@keyframes spin { from {transform: rotate(0deg);}to {transform: rotate(360deg);} }
.post-ai-result svg{animation: spin 1s infinite linear;}
</style>
<script>
let postAI = document.querySelector(".post-ai") // 注意修改你自己文章正文的选择器
let postTile = document.querySelector(".post-title a").textContent // 注意修改你自己文章标题的选择器
async function geminiAI() {
  postAI.insertAdjacentHTML('afterend', '<div class="post-ai-result"><svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 1 1-6.219-8.56"/></svg></div>');
  postAI.classList.add("noclick")
  let GeminiFetch = "上文CloudFlare生成的url"
  try{
    let postAIResult = document.querySelector(".post-ai-result")
    let input = document.querySelector(".post-content").textContent
    let inputHanzi = input.replace(/\n/g, '').replace(/[ ]+/g, ' ').replace(/<pre>[\s\S]*?<\/pre>/g, '').substring(0, 30000)
    let toAI = `文章标题：${postTile}，具体内容：${inputHanzi}`
    const res = await fetch(GeminiFetch, {
      headers: {
        'Content-Type': 'application/json'
      },
      method: 'POST', 
      body: JSON.stringify({
        model: 'gemini-pro',
        messages: [
          { role: 'system',content:`You are a highly skilled AI trained in language comprehension and summarization. I would like you to read the text delimited by triple quotes and summarize it into a concise abstract paragraph. Aim to retain the most important points, providing a coherent and readable summary that could help a person understand the main points of the discussion without needing to read the entire text. Please avoid unnecessary details or tangential points.
          Only give me the output and nothing else. Do not wrap responses in quotes. Respond in the Chinese language.`},
          { role: 'user', content: toAI } 
        ],
        temperature: 0.7,
        stream: true
      })
    })
    const reader = res.body.getReader()
    while(true) {
      const {value, done} = await reader.read()
      if (done) {
        break
      }
      const text = new TextDecoder().decode(value)
      const match = text.match(/DONE/)
      if(!match){
        const textJson = JSON.parse(text.substring(5))
        const resData = textJson.choices[0].delta.content
        if(resData.length > 0){
          //console.log(textJson)
          postAIResult.textContent += resData
        }
      }
    }
  } catch (error) {
    document.querySelector(".post-ai-result").remove();
    console.log(error);
  }
};
</script>

最后

愉快的享受ai概要带来的便捷与科幻吧