一款基于百度文心一言的商品品评智能回复Chrome插件

怀念夏天  论坛元老 | 2024-9-26 19:03:32 | 显示全部楼层 | 阅读模式
打印 上一主题 下一主题
楼主

主题 1869|帖子 1869|积分 5607

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要 登录 才可以下载或查看，没有账号？立即注册

x
一、引言

在前次小弟发布了一款基于openai大模子的Chrome网页插件后，有很多朋友向我提意见，表示这个插件需要翻墙，对于真正的小白还是有些不友好。因此这次我花了两个通宵，完成了一款基于百度文心一言大模子的网页插件的创作。本文将以作为一款商品品评的智能回复工具为例，具体介绍插件的功能及利用方法，大家可以根据本身的需求魔改插件，实现不同的目标，例如文稿助手、谈天助手等。本插件完全开源，也欢迎大家一起学习，或作为课设毕设利用。
二、功能展示

本文以作为商品品评智能回复工具的目标为例，具体展示插件各功能。

在普通模式下，用户可以将消耗者的品评输入进插件，插件将会调用百度api进行智能回复。

而在高级模式下，用户可以选择四种情绪模式、三种回复策略来让插件作答，如图所示，每种模式将会有不同的表达，如许能让商家对于不同范例的买家品评做出最得当且快速的回复。
三、插件部署

对于插件本身来说，包罗这几个文件：

1.manifest.json
  1. {
  2.     "manifest_version": 3,
  3.     "name": "Wenxin Chat reply",
  4.     "version": "1.0",
  5.     "description": "A Chrome extension to chat with Baidu Wenxin",
  6.     "permissions": [
  7.         "activeTab",
  8.         "storage"
  9.     ],
  10.     "background": {
  11.         "service_worker": "background.js"
  12.     },
  13.     "action": {
  14.         "default_popup": "popup.html",
  15.         "default_icon": {
  16.             "16": "icons/icon16.png",
  17.             "48": "icons/icon48.png",
  18.             "128": "icons/icon128.png"
  19.         }
  20.     },
  21.     "icons": {
  22.         "16": "icons/icon16.png",
  23.         "48": "icons/icon48.png",
  24.         "128": "icons/icon128.png"
  25.     }
  26. }
复制代码

2.popup.html（插件前端页面）
  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  8.     <title>文心一言商家智能回复</title>
  9.     <style>
  10.         html, body {
  11.             width: 500px;  /* 调整宽度 */
  12.             height: 100%;
  13.             margin: 0;
  14.             padding: 0;
  15.             box-sizing: border-box;
  16.         }
  17.     </style>
  18.     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
  19.     <link rel="stylesheet" href="./style.css">
  20.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.7.2/font/bootstrap-icons.min.css">
  21.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
  22. </head>
  24. <body>
  26.     <div class="container mt-4">
  28.         <h1 class="text-center mb-4">文心一言商品评价回复</h1>
  30.         <div class="form-check form-switch mb-3">
  31.             <span id="mode-text">智能回复（高级模式）</span>
  32.             <input class="form-check-input" type="checkbox" role="switch" id="model-selector">
  33.             <label class="form-check-label" for="model-selector"></label>
  34.         </div>
  36.         <p style="font-size: 17px;">消费者的评论</p>
  38.         <div class="form mb-3">
  39.             <textarea class="form-control" id="user-input" placeholder="请输入......" rows="4"></textarea>
  40.         </div>
  42.         <div id="review-section" class="d-none">
  43.             <div class="mb-3">
  44.                 <p>选择情绪模式:</p>
  45.                 <div class="btn-group-vertical w-100" role="group">
  46.                     <input type="radio" class="btn-check" name="emotionStrategy" id="acknowledgement" autocomplete="off" checked>
  47.                     <label class="btn btn-outline-primary" for="acknowledgement">认可</label>
  49.                     <input type="radio" class="btn-check" name="emotionStrategy" id="informal" autocomplete="off">
  50.                     <label class="btn btn-outline-primary" for="informal">随和</label>
  52.                     <input type="radio" class="btn-check" name="emotionStrategy" id="attentiveness" autocomplete="off">
  53.                     <label class="btn btn-outline-primary" for="attentiveness">关注</label>
  55.                     <input type="radio" class="btn-check" name="emotionStrategy" id="encouragement" autocomplete="off">
  56.                     <label class="btn btn-outline-primary" for="encouragement">鼓励</label>
  57.                 </div>
  58.             </div>
  60.             <div class="mb-3">
  61.                 <p>选择回复策略:</p>
  62.                 <div class="btn-group-vertical w-100" role="group">
  63.                     <input type="radio" class="btn-check" name="rationalStrategy" id="explanation" autocomplete="off" checked>
  64.                     <label class="btn btn-outline-success" for="explanation">解释</label>
  66.                     <input type="radio" class="btn-check" name="rationalStrategy" id="redress" autocomplete="off">
  67.                     <label class="btn btn-outline-success" for="redress">补偿</label>
  69.                     <input type="radio" class="btn-check" name="rationalStrategy" id="facilitation" autocomplete="off">
  70.                     <label class="btn btn-outline-success" for="facilitation">改进</label>
  71.                 </div>
  72.             </div>
  73.         </div>
  75.         <div class="d-grid gap-2 mb-4">
  76.             <button id="send-button" class="btn btn-primary">提交</button>
  77.         </div>
  79.         <div id="response" class="p-3 bg-light border rounded" style="min-height: 100px;"></div>
  81.     </div>
  83.     <script src="./popup.js"></script>
  85. </body>
  87. </html>
复制代码

3.popup.js
  1. document.getElementById('model-selector').addEventListener('change', function() {
  2.     const reviewSection = document.getElementById('review-section');
  3.     if (this.checked) {
  4.         reviewSection.classList.remove('d-none');
  5.     } else {
  6.         reviewSection.classList.add('d-none');
  7.     }
  8. });
  10. document.getElementById('send-button').addEventListener('click', function () {
  11.     const userInput = document.getElementById('user-input').value;
  12.     const responseElement = document.getElementById('response');
  14.     const isBasicMode = document.getElementById('model-selector').checked;
  15.     const emotionStrategy = isBasicMode ? document.querySelector('input[name="emotionStrategy"]:checked').id : null;
  16.     const rationalStrategy = isBasicMode ? document.querySelector('input[name="rationalStrategy"]:checked').id : null;
  18.     responseElement.innerText = 'Loading...';
  20.     chrome.runtime.sendMessage({ action: 'getWenxinResponse', content: userInput, emotionStrategy, rationalStrategy, isBasicMode }, function (response) {
  21.         if (chrome.runtime.lastError) {
  22.             responseElement.innerText = 'Error: ' + chrome.runtime.lastError.message;
  23.         } else {
  24.             responseElement.innerText = response;
  25.         }
  26.     });
  27. });
复制代码

4. background.js
  1. const serverUrl = 'http://127.0.0.1:3000';  // 代理服务器的URL
  3. function getAccessToken() {
  4.     return new Promise((resolve, reject) => {
  5.         fetch(`${serverUrl}/getAccessToken`, {
  6.             method: 'POST',
  7.             headers: {
  8.                 'Content-Type': 'application/json'
  9.             },
  10.             body: JSON.stringify({})
  11.         })
  12.         .then(response => {
  13.             if (!response.ok) {
  14.                 throw new Error(`HTTP error! Status: ${response.status}`);
  15.             }
  16.             return response.json();
  17.         })
  18.         .then(data => {
  19.             if (data.access_token) {
  20.                 resolve(data.access_token);
  21.             } else {
  22.                 throw new Error('Failed to retrieve access token');
  23.             }
  24.         })
  25.         .catch(error => {
  26.             console.error('Error fetching access token:', error);
  27.             reject(error);
  28.         });
  29.     });
  30. }
  32. function getPrompt(userMessage, emotionStrategy, rationalStrategy, isBasicMode) {
  33.     if (!isBasicMode) {
  34.         return `我是一名商家，需要回复消费者对自己商品的评价：${userMessage}`;
  35.     }
  37.     let emotionPrompt = '';
  38.     let rationalPrompt = '';
  40.     switch (emotionStrategy) {
  41.         case 'acknowledgement':
  42.             emotionPrompt = '请用一种理解客户情绪的方式进行回答';
  43.             break;
  44.         case 'informal':
  45.             emotionPrompt = '请用一种轻松、友好的语气与客户沟通';
  46.             break;
  47.         case 'attentiveness':
  48.             emotionPrompt = '请表示你会关注客户的问题，并尽力解决';
  49.             break;
  50.         case 'encouragement':
  51.             emotionPrompt = '请表达出你会改善的强烈意愿';
  52.             break;
  53.     }
  55.     switch (rationalStrategy) {
  56.         case 'explanation':
  57.             rationalPrompt = '请解释客户投诉的原因';
  58.             break;
  59.         case 'redress':
  60.             rationalPrompt = '请提供合适的补救措施来弥补';
  61.             break;
  62.         case 'facilitation':
  63.             rationalPrompt = '请提出改进措施';
  64.             break;
  65.     }
  67.     return `我是一名商家，需要回复消费者对自己商品的评价。${emotionPrompt}。${rationalPrompt}：${userMessage}`;
  68. }
  70. function getWenxinResponse(accessToken, userMessage, emotionStrategy, rationalStrategy, isBasicMode) {
  71.     const prompt = getPrompt(userMessage, emotionStrategy, rationalStrategy, isBasicMode);
  72.     return new Promise((resolve, reject) => {
  73.         fetch(`${serverUrl}/getWenxinResponse`, {
  74.             method: 'POST',
  75.             headers: {
  76.                 'Content-Type': 'application/json'
  77.             },
  78.             body: JSON.stringify({ accessToken, prompt })
  79.         })
  80.         .then(response => {
  81.             if (!response.ok) {
  82.                 throw new Error(`HTTP error! Status: ${response.status}`);
  83.             }
  84.             return response.json();
  85.         })
  86.         .then(data => {
  87.             if (data.result) {
  88.                 resolve(data.result);
  89.             } else {
  90.                 throw new Error('Failed to retrieve Wenxin response');
  91.             }
  92.         })
  93.         .catch(error => {
  94.             console.error('Error fetching Wenxin response:', error);
  95.             reject(error);
  96.         });
  97.     });
  98. }
  100. chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  101.     if (message.action === 'getWenxinResponse') {
  102.         getAccessToken()
  103.             .then(accessToken => getWenxinResponse(accessToken, message.content, message.emotionStrategy, message.rationalStrategy, message.isBasicMode))
  104.             .then(response => sendResponse(response))
  105.             .catch(error => sendResponse('Error: ' + error.message));
  106.         return true;  // Will respond asynchronously.
  107.     }
  108. });
复制代码

5.style.css
  1. body {
  2.     font-family: Arial, sans-serif;
  3.     background-color: #f7f7f7;
  4.     margin: 0;
  5.     padding: 0;
  6.     box-sizing: border-box;
  7. }
  9. .container {
  10.     padding: 20px;
  11.     max-width: 480px; /* 调整宽度 */
  12.     margin: auto;
  13.     background-color: #fff;
  14.     border-radius: 8px;
  15.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  16. }
  18. .text-center {
  19.     font-size: 24px;
  20.     margin-bottom: 20px;
  21.     color: #333;
  22. }
  24. .form-control {
  25.     font-size: 16px;
  26.     padding: 10px;
  27.     border-radius: 4px;
  28.     border: 1px solid #ddd;
  29.     resize: none;
  30. }
  32. .btn-primary {
  33.     background-color: #4CAF50;
  34.     border-color: #4CAF50;
  35.     border-radius: 4px;
  36.     font-size: 16px;
  37.     transition: background-color 0.3s ease;
  38. }
  40. .btn-primary:hover {
  41.     background-color: #45a049;
  42. }
  44. .bg-light {
  45.     background-color: #f1f1f1;
  46.     border: 1px solid #ddd;
  47.     border-radius: 4px;
  48.     font-size: 14px;
  49.     white-space: pre-wrap;
  50. }
  52. .btn-outline-primary {
  53.     color: #007bff;
  54.     border-color: #007bff;
  55. }
  57. .btn-outline-primary:hover {
  58.     background-color: #007bff;
  59.     color: #ffffff;
  60. }
  62. .btn-check:checked + .btn-outline-primary {
  63.     background-color: #007bff;
  64.     border-color: #007bff;
  65.     color: #ffffff;
  66. }
  68. .btn-outline-success {
  69.     color: #28a745;
  70.     border-color: #28a745;
  71. }
  73. .btn-outline-success:hover {
  74.     background-color: #28a745;
  75.     color: #ffffff;
  76. }
  78. .btn-check:checked + .btn-outline-success {
  79.     background-color: #28a745;
  80.     border-color: #28a745;
  81.     color: #ffffff;
  82. }
复制代码
末了，大家需要在文件内里创建一个icons文件夹，如果不会调代码，请往内里存放命名为icon16、icon48、icon128的图片。
四、服务器部署

CORS（跨域资源共享）策略限制题目足足硬控了笔者一天，欣赏器会制止从插件的背景脚本直接发送跨域请求到第三方API。为相识决这个题目，笔者先通过修改background.js权限、利用CORS署理服务等方法进行实验，但都以失败告终。无奈之下，只好通过部署了一个本地服务器，在服务器上创建一个署理，将请求转发到百度API，从而解决CORS题目。
创建一个新python项目，命名为wenxin_proxy_pythonreply（举例）
创建一个名为server.py的文件
  1. from flask import Flask, request, jsonify
  2. from flask_cors import CORS
  3. import requests
  5. app = Flask(__name__)
  6. CORS(app)  # 启用CORS
  8. CLIENT_ID = '*****'  # 替换为你的API Key
  9. CLIENT_SECRET = '****'  # 替换为你的Secret Key
  11. @app.route('/getAccessToken', methods=['POST'])
  12. def get_access_token():
  13.     url = f"https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id={CLIENT_ID}&client_secret={CLIENT_SECRET}"
  14.     headers = {
  15.         'Content-Type': 'application/json'
  16.     }
  17.     response = requests.post(url, headers=headers, json={})
  18.     if response.status_code == 200:
  19.         return jsonify(response.json())
  20.     else:
  21.         return jsonify({'error': 'Failed to retrieve access token'}), response.status_code
  23. @app.route('/getWenxinResponse', methods=['POST'])
  24. def get_wenxin_response():
  25.     data = request.get_json()
  26.     access_token = data['accessToken']
  27.     prompt = data['prompt']
  28.     url = f"https://aip.baidubce.com/rpc/2.0/ai_custom/v1/wenxinworkshop/chat/ernie-4.0-8k-0329?access_token={access_token}"
  29.     payload = {
  30.         "messages": [
  31.             {
  32.                 "role": "user",
  33.                 "content": prompt
  34.             }
  35.         ]
  36.     }
  37.     headers = {
  38.         'Content-Type': 'application/json'
  39.     }
  40.     response = requests.post(url, headers=headers, json=payload)
  41.     if response.status_code == 200:
  42.         return jsonify(response.json())
  43.     else:
  44.         return jsonify({'error': 'Failed to retrieve Wenxin response'}), response.status_code
  46. if __name__ == '__main__':
  47.     app.run(host='0.0.0.0', port=3000)
复制代码
复制后，在对应位置填入API Key和Secret Key，并在终端分别运行这两段代码
  1. pip install flask requests
复制代码
  1. pip install flask-cors
复制代码
然后运行server.py
如果没有报错，就将之前插件的文件夹在chrome://extensions/里打开，选择开辟者模式并点击“加载已解压的拓展步伐”。
末了，点击插件，输入内容，如果能够乐成运行，那么恭喜你大功告成。
五、总结

一款即插即用的多功能网页插件，能根据个人需求魔改成各种工具，欢迎大家交流学习！如有不解之处，请仔细阅读API调用文档https://cloud.baidu.com/doc/WENXINWORKSHOP/s/xlvlzz84k，或与我接洽，我将尽我所能。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
回复

使用道具 举报

0 个回复

倒序浏览
返回列表

快速回复

高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

怀念夏天

论坛元老
这个人很懒什么都没写!

楼主热帖

标签云

AI 运维 CIO 存储 服务器
微信订阅号
微信服务号
微信客服
小程序
H5
关于我们 商务合作 网站地图
©Copyright 2022-2024 杭州祥升科技有限公司 版权所有 浙ICP备20004199号
快速回复 返回顶部 返回列表