admin 管理员组

文章数量: 1184232

在本文中，我们将一步一步地探索并构建一个名为"AI Prompt Testing"的项目。该项目是一个网站插件，旨在帮助网站生成一个ChatGPT提示测试题，以巩固当前网页的内容。

1、抽象提取

这个网站ChatGPT插件大概的效果，类比的实现有哪些？ addtoany， google analytics

addtoany的配置是这样子

<div  style="left:0px; top:150px;">
    <a ></a>
    <a ></a>
    <a ></a>
    <a  href="<https://www.addtoany/share>"></a>
</div>

<script async src="https://static.addtoany/menu/page.js"></script>

google analytics 的配置是这样子

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager/gtag/js?id=G-XXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-XXXXX');
</script>

都记下来，以被我们后续插件配置参考

2、技术实现思考

既然是网站chatgpt 插件，那么为何不让chatgpt 帮我写一下代码呢？

思考prompt

用一个js脚本，动态嵌入到网站上，脚本内容是，动态在网页右下侧生成一个类似分享按钮的按钮，按钮的功能如下：
1、假如用户点击按钮，按钮则生成一个一段文本，“基于链接{url}，生成一份测试题，选择题4题，问答题3题，判断题3题，并在问题之后附上答案”，这里的{url} 是当前网页地址。
2、按钮展示是一个chatgpt svg 图标，图标大小为32*32，，图标内部字体内容为“生成测试题”
3、用户点击按钮后，请把内容复制到剪贴板，并提示用户“内容已复制请前往chatgpt网站”
4、提示内容添加动画淡入显示，用户点击提示内容后自动淡出并移除

然后chatgpt一顿输出

// 创建一个div元素来包含按钮和提示内容
var container = document.createElement("div");
container.style.cssText = "position:fixed;right:20px;bottom:20px;z-index:9999;";

// 创建按钮元素
var button = document.createElement("button");
butto

本文标签： 插件 网站 ChatGpt

版权声明：本文标题：如何一步一步构建网站ChatGPT插件 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1754883718a3047570.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。