21ic电子技术开发论坛 › 软件应用 › 上位机与服务端开发 › 让GPT帮忙写个与它对话的网页
返回列表 发新帖我要提问

让GPT帮忙写个与它对话的网页

[复制链接]
 楼主| gaoyang9992006 发表于 2023-4-4 18:38 | 显示全部楼层 |阅读模式
gp
你的网页显示是怎么实现的，可以告诉我一下技术细节吗
GPT-----------------------------------
我的网页是基于一个前端框架构建的，它被称为React。React是由Facebook开发的一个JavaScript库，用于构建用户界面。使用React可以创建高效且易于维护的Web应用程序，因为它将用户界面拆分成可重用的组件。

我的网站还使用了一些其他的技术来帮助构建它。例如：

HTML和CSS：用于创建网页布局和样式。
JavaScript：用于与用户交互和执行动态操作。
Redux：用于管理Web应用程序的状态。
Webpack：用于打包和构建JavaScript和CSS文件。
Babel：用于将最新的JavaScript语法转换为向后兼容的代码，以确保所有用户都能访问我的网站。
我的网站还使用了一些其他的技术来帮助它运行。例如，它托管在云服务提供商的服务器上，并使用Node.js作为后端服务器。它还使用了一些第三方库和API来提供一些功能，例如谷歌地图API来提供位置搜索。

-----------------------------------

你当前页面的代码高亮是怎么实现的

GPT-----------------------------------
我的代码高亮是通过使用一个JavaScript库来实现的，这个库叫做Prism.js。Prism.js是一个轻量级的语法高亮库，它支持多种语言和语法，并且易于使用和自定义。

在我的网页中，我引入了Prism.js的JavaScript文件和CSS文件，并将它们与我的代码块一起使用。例如，以下是一个JavaScript代码块：

复制
  1. function greet(name) {
    

  2.   console.log(`Hello, ${name}!`);
    

  3. }
    


  4. 

  5. greet('World');


在我的代码块中，我使用了“```”来指定代码块的起始和结束位置，并使用“javascript”来指定代码块的语言类型。当网页加载时，Prism.js将扫描我的代码块，检测到它的语言类型并将其高亮显示。我也可以在我的代码块中使用其他语言类型，例如“html”、“css”、“python”等，以高亮显示相应语言的代码。

如果你想使用Prism.js来实现代码高亮，你需要将它的JavaScript和CSS文件下载并在你的网页中引入。然后，你需要将你的代码块包裹在“”中，并在“”后指定代码块的语言类型。最后，Prism.js会自动扫描你的代码块并进行语法高亮。



prism.js如何使用

GPT-----------------------------------
使用Prism.js来实现代码高亮可以分为以下几个步骤：

下载Prism.js库文件
在Prism.js的官方网站（https://prismjs.com/）上下载最新版的Prism.js文件。

引入Prism.js文件
将下载的Prism.js文件和它所依赖的CSS文件（例如prism.css）引入你的网页中，可以通过以下代码将Prism.js文件和CSS文件引入到你的网页中：

复制
  1. <!-- 引入Prism.js的JavaScript文件 -->
    

  2. <script src="path/to/prism.js"></script>
    


  3. 

  4. <!-- 引入Prism.js的CSS文件 -->
    

  5. <link rel="stylesheet" href="path/to/prism.css" />
使用Prism.js
将你想要高亮显示的代码包裹在特定的标记中，例如javascript...标记用于显示JavaScript代码，html...标记用于显示HTML代码等。示例如下：

复制
  1. <pre><code class="language-javascript">
    

  2. function greet(name) {
    

  3.   console.log(`Hello, ${name}!`);
    

  4. }
    


  5. 

  6. greet('World');
    

  7. </code></pre>
初始化Prism.js
在Prism.js库文件引入后，你需要调用它的Prism.highlightAll()函数来初始化所有代码块的高亮显示。例如：

复制
  1. <script>
    

  2.   // 初始化所有代码块的高亮显示
    

  3.   Prism.highlightAll();
    

  4. </script>
这些步骤完成后，你的网页中的代码块将会被自动高亮显示，使用Prism.js还可以自定义代码高亮的样式、插件等。


帮我写一个网页代码，可以实现通过API与您对话，并且支持代码高亮显示，数学公式显示。
GPT-----------------------------------
好的，以下是一个简单的网页代码示例，可以实现通过API与我对话，同时支持代码高亮显示和数学公式显示。这个示例使用了React框架、MathJax库和Prism.js库。请注意，这个示例仅作为参考，你需要根据你自己的需求和API接口进行修改和调整。
复制
  1. <!DOCTYPE html>
    

  2. <html>
    

  3. <head>
    

  4.   <meta charset="UTF-8">
    

  5.   <title>Chat with ChatGPT</title>
    

  6.   <!-- 引入Prism.js的CSS文件 -->
    

  7.   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" />
    

  8. </head>
    

  9. <body>
    

  10.   <div id="root"></div>
    


  11. 

  12.   <!-- 引入MathJax库文件 -->
    

  13.   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    

  14.   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    

  15.   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    

  16.   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    

  17.   <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
    

  18.   <script async src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-chtml.min.js"></script>
    


  19. 

  20.   <!-- 引入React和ReactDOM库文件 -->
    

  21.   <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    

  22.   <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    


  23. 

  24.   <!-- 引入Prism.js的JavaScript文件 -->
    

  25.   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/components/prism-core.min.js"></script>
    

  26.   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/plugins/autoloader/prism-autoloader.min.js"></script>
    


  27. 

  28.   <script>
    

  29.     // 定义React组件
    

  30.     class Chat extends React.Component {
    

  31.       constructor(props) {
    

  32.         super(props);
    

  33.         this.state = {
    

  34.           messages: [],
    

  35.           input: '',
    

  36.         };
    

  37.       }
    


  38. 

  39.       // 在组件加载完成后，初始化Prism.js的代码高亮显示
    

  40.       componentDidMount() {
    

  41.         Prism.highlightAll();
    

  42.       }
    


  43. 

  44.       // 处理用户输入
    

  45.       handleChange(event) {
    

  46.         this.setState({ input: event.target.value });
    

  47.       }
    


  48. 

  49.       // 处理用户提交
    

  50.       handleSubmit(event) {
    

  51.         event.preventDefault();
    

  52.         // 使用fetch函数发送POST请求到ChatGPT的API接口
    

  53.         fetch('https://api.openai.com/v1/engine/davinci-codex/completions', {
    

  54.           method: 'POST',
    

  55.           headers: {
    

  56.             'Content-Type': 'application/json',
    

  57.             'Authorization': 'Bearer YOUR_API_KEY, // 替换为你的API密钥
    

  58.           },
    

  59.           body: JSON.stringify({
    

  60.             prompt: `Q: ${this.state.input}\nA:`,
    

  61.             max_tokens: 1024,
    

  62.             n: 1,
    

  63.             stop: '\n',
    

  64.           })
    

  65.         })
    

  66.         .then(response => response.json())
    

  67.         .then(data => {
    

  68.                   // 将ChatGPT的回答添加到聊天记录中
    

  69.                   this.setState({
    

  70.                         messages: [...this.state.messages, { type: 'bot', text: data.choices[0].text }],
    

  71.                         input: '',
    

  72.                   });
    

  73.                   // 初始化Prism.js的代码高亮显示
    

  74.                   Prism.highlightAll();
    

  75.                 })
    

  76.     .catch(error => {
    

  77.       console.error(error);
    

  78.                 });
    

  79.           }
    


  80. 

  81.           render() {
    

  82.                 // 使用map函数将聊天记录渲染成DOM元素
    

  83.                 const messages = this.state.messages.map((message, index) => {
    

  84.                   if (message.type === 'bot') {
    

  85.                         // 使用Prism.js的highlight函数对回答进行代码高亮显示
    

  86.                         return (
    

  87.                           <div key={index} className="bot-message">
    

  88.                                 <pre><code className="language-python">{message.text}</code></pre>
    

  89.                           </div>
    

  90.                         );
    

  91.                   } else {
    

  92.                         return (
    

  93.                           <div key={index} className="user-message">
    

  94.                                 <p>{message.text}</p>
    

  95.                           </div>
    

  96.                         );
    

  97.                   }
    

  98.                 });
    


  99. 

  100.                 return (
    

  101.                   <div>
    

  102.                         <h1>Chat with ChatGPT</h1>
    

  103.                         <div className="messages">{messages}</div>
    

  104.                         <form onSubmit={this.handleSubmit.bind(this)}>
    

  105.                           <input type="text" value={this.state.input} onChange={this.handleChange.bind(this)} />
    

  106.                           <button type="submit">Send</button>
    

  107.                         </form>
    

  108.                   </div>
    

  109.                 );
    

  110.           }
    

  111.         }
    


  112. 

  113.         // 渲染React组件到页面上
    

  114.         ReactDOM.render(<Chat />, document.getElementById('root'));
    

  115.           </script>
    

  116. </body>
    

  117. </html>


在上面的代码中，你需要将YOUR_API_KEY替换为你的OpenAI API密钥。这个示例使用了OpenAI的Davinci Codex模型，用于自动完成Python代码。你可以根据你的需求选择其他OpenAI模型或其他API接口。

此外，这个示例使用了MathJax库和Prism.js库。MathJax库用于显示数学公式，Prism.js库用于对代码进行高亮显示。你需要在你的网页中引入这些库的文件，或者选择其他库来实现相应的功能。

回复 赏

举报

相关帖子
 楼主| gaoyang9992006 发表于 2023-4-4 18:40 | 显示全部楼层
我在windows10系统使用这个页面该做什么部署呢？

要在 Windows 10 系统上部署这个页面，你需要将代码保存到一个 HTML 文件中，例如 chat.html，然后在你的电脑上启动一个本地 Web 服务器来运行这个页面。以下是一个简单的步骤：

在你的计算机上安装一个本地 Web 服务器。你可以使用 Node.js 的 http-server 模块或 Python 的 SimpleHTTPServer 模块来启动一个本地 Web 服务器。这里以 Node.js 的 http-server 模块为例：

安装 Node.js。你可以在 Node.js 的官方网站（https://nodejs.org/）下载最新版本的 Node.js 安装包，并按照安装向导进行安装。

打开命令行界面（Command Prompt）或终端界面（Terminal），输入以下命令来安装 http-server 模块：

复制
  1. npm install -g http-server
在你的网页所在目录下，输入以下命令来启动本地 Web 服务器：
复制
  1. http-server
此时你应该能够在浏览器中通过 http://localhost:8080/chat.html 来访问这个页面。

在你的 OpenAI 账号中获取一个 API 密钥。你可以在 OpenAI 的网站（https://openai.com/）上注册一个账号并获取一个 API 密钥。

将你的 API 密钥替换掉代码中的 YOUR_API_KEY。

在浏览器中打开 http://localhost:8080/chat.html，你应该能够看到这个网页的界面，并能够通过 API 与 ChatGPT 进行对话了。

希望这些步骤能够帮助你在 Windows 10 系统上部署这个页面。

回复 赏

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册

本版积分规则

gaoyang9992006 Image
个人签名：如果你觉得我的分享或者答复还可以，请给我点赞，谢谢。

2046

主题

16351

帖子

222

粉丝
快速回复 在线客服 返回列表 返回顶部
gaoyang9992006 Image
个人签名：如果你觉得我的分享或者答复还可以，请给我点赞，谢谢。

2046

主题

16351

帖子

222

粉丝
快速回复 在线客服 返回列表 返回顶部