ChatGPT Demo

19:I[15621,["/_next/static/immutable/chunks/3gm-8e62xn1qd.js","/_next/static/immutable/chunks/0n2yq6f-f75k2.js"],"ArticleReader"] 1a:T432,

from flask import Flask, render_template, request
from transformers import AutoModelWithLMHead, AutoTokenizer

app = Flask(__name__)


model = AutoModelWithLMHead.from_pretrained("microsoft/DialoGPT-small")
tokenizer = AutoTokenizer.from_pretrained("microsoft/DialoGPT-small")

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        
        input_text = request.form["input_text"]

        
        prompt = (input_text, "")
        response = model.generate(prompt, max_length=1024, do_sample=True, temperature=0.7)
        response_text = tokenizer.decode(response[0], skip_special_tokens=True)

        return render_template("index.html", response_text=response_text)
    else:
        return render_template("index.html")

if __name__ == "__main__":
    app.run()

1b:Tb93,

<html>
  <head>
    <title>ChatGPT Demo</title>
    
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  </head>
  <body>
    
    <div class="container mt-5">
      <div class="card">
        <div class="card-header">
          聊天窗口
        </div>
        <div class="card-body p-0" id="messages">
          
          <div class="row mb-2">
            <div class="col-md-2"></div>
            <div class="col-md-10 text-right">
              你好，我是ChatGPT，有什么想聊的？
            </div>
          </div>
        </div>
        
        <div class="card-footer">
          <form>
            <div class="form-group">
              <input type="text" class="form-control" id="input_text" placeholder="输入文本">
            </div>
            <button type="submit" class="btn btn-primary" id="send_button">发送</button>
          </form>
        </div>
      </div>
    </div>

    
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    
    <script>
      $(function() {
        $("form").submit(function(event) {
          event.preventDefault();

          
          var input_text = $("#input_text").val();

          
          $("#messages").append(
            '<div class="row mb-2"><div class="col-md-2"></div><div class="col-md-10">' + input_text + '</div></div>'
          );

          
          $.ajax({
            type: "POST",
            url: "/chat",
            data: {
              "input_text": input_text
            },
            success: function(response) {
              
              $("#messages").append(
                '<div class="row mb-2"><div class="col-md-10 text-left">' + response + '</div><div class="col-md-2"></div></div>'
              );
            }
          });
        });
      });
    </script>
  </body>
</html>

1c:T615,123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172 ChatGPT Demo

聊天窗口

你好，我是ChatGPT，有什么想聊的？

1d:T9a5,

HTML 部分：
- 页面中包含一个聊天窗口，其中有一个卡片（card），卡片中包含聊天记录（card-body）和输入框（card-footer）。
- 聊天记录中默认显示一条消息：“你好，我是 ChatGPT，有什么想聊的？”
- 输入框中包含一个文本输入框（input）和一个发送按钮（button）。
jQuery 部分：
- 页面加载完成后，通过 jQuery 监听表单提交事件（submit）。当表单提交时，jQuery 会触发一个回调函数，这个回调函数中的代码会被执行。
- 当用户在输入框中输入文本并点击发送按钮时，表单提交事件（submit）被触发。
- 在表单提交事件的回调函数中，首先使用 event.preventDefault() 阻止默认的表单提交行为。
- 然后使用 $("#input_text").val() 获取用户输入的文本。
- 接着使用 $("#messages").append() 将文本添加到聊天记录中。
- 最后，使用 jQuery 的 AJAX 功能发送一个 POST 请求到服务器，将用户输入的文本作为请求参数。
- 当服务器返回响应时，将服务器返回的内容添加到聊天记录中。
- 最后，清空文本输入框，准备下一次聊天。
整个流程如下：
1. 用户在文本输入框中输入文本，点击发送按钮。
2. jQuery 监听到表单提交事件，阻止默认的表单提交行为。
3. 获取用户输入的文本。
4. 将文本添加到聊天记录中。
5. 发送 AJAX 请求，将用户输入的文本作为请求参数。
6. 服务器返回响应，将响应的内容添加到聊天记录中。
7. 清空文本输入框，准备下一次聊天。
这个 HTML 模板只是个简单的框架，具体的逻辑实现还需要你在服务器端进行开发。
感谢您阅读这篇文章，希望能帮助到您。在这篇文章中，我们介绍了如何将 ChatGPT 部署到网站上，并使用 jQuery 和 Bootstrap 构建聊天系统的界面。如果您有任何疑问或建议，欢迎在评论区留言。最后，如果这篇文章对您有所帮助，希望能给个打赏鼓励一下作者。
如果你觉得我的博客不错的话，可以赞助我 (・̀ ω・́)✧：https://jdjwzx233.cn/support。

11:["$","main",null,{"className":"reader-page","children":[["$","div",null,{"className":"reader-kicker","children":[["$","$L10",null,{"href":"/sources/8913715f4defa7d3","children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":16,"height":16,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-arrow-left","children":[["$","path","1l729n",{"d":"m12 19-7-7 7-7"}],["$","path","x3x0zl",{"d":"M19 12H5"}],"$undefined"]}]," 返回 ","jdjwzx233的博客"]}],["$","span",null,{"children":"工程"}]]}],["$","header",null,{"className":"article-meta","children":[["$","span",null,{"children":["FROM · ","jdjwzx233的博客"]}],["$","div",null,{"children":[["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":15,"height":15,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"lucide lucide-calendar-days","children":[["$","path","1cmpym",{"d":"M8 2v4"}],["$","path","4m81vk",{"d":"M16 2v4"}],["$","rect","1hopcy",{"width":"18","height":"18","x":"3","y":"4","rx":"2"}],["$","path","8toen8",{"d":"M3 10h18"}],["$","path","6423bh",{"d":"M8 14h.01"}],["$","path","1etili",{"d":"M12 14h.01"}],["$","path","1gbofw",{"d":"M16 14h.01"}],["$","path","lrp35t",{"d":"M8 18h.01"}],["$","path","mhygvu",{"d":"M12 18h.01"}],["$","path","kzsmim",{"d":"M16 18h.01"}],"$undefined"]}]," ","2022年12月24日"," · 本文作者： jdjwzx233 @jdjwzx233的博客"]}]]}],["$","$L19",null,{"article":{"title":"将ChatGPT部署到网站上 - Web - Flask - python - ChatGpt - 编程 - jdjwzx233 - 奇怪的知识","byline":"本文作者： jdjwzx233 @jdjwzx233的博客","publishedAt":"2022-12-24T10:26:35.000Z","language":"fr","blocks":[{"id":"b0","type":"paragraph","html":"

ChatGPT 是一个用于自然语言对话的预训练语言模型。要将 ChatGPT 部署到网站上，你需要执行以下步骤：

","text":"ChatGPT 是一个用于自然语言对话的预训练语言模型。要将 ChatGPT 部署到网站上，你需要执行以下步骤："},{"id":"b1","type":"list","html":"

下载 ChatGPT 模型：你可以从 Hugging Face 的 Transformers 库中下载 ChatGPT 模型。
使用 Python 的 Flask 库创建一个 Web 应用程序。Flask 是一种轻量级的 Web 应用框架，可以让你快速构建 Web 应用程序。
在 Web 应用中加载 ChatGPT 模型：在 Web 应用程序中，你可以使用 Transformers 库中的 AutoModelWithLMHead 类加载 ChatGPT 模型。
创建一个 HTML 表单，允许用户输入对话文本。
使用 ChatGPT 模型对用户输入的文本进行响应：当用户提交表单时，你可以使用 ChatGPT 模型的 generate 方法生成响应文本。

","text":"下载 ChatGPT 模型：你可以从 Hugging Face 的 Transformers 库中下载 ChatGPT 模型。使用 Python 的 Flask 库创建一个 Web 应用程序。Flask 是一种轻量级的 Web 应用框架，可以让你快速构建 Web 应用程序。在 Web 应用中加载 ChatGPT 模型：在 Web 应用程序中，你可以使用 Transformers 库中的 AutoModelWithLMHead 类加载 ChatGPT 模型。创建一个 HTML 表单，允许用户输入对话文本。使用 ChatGPT 模型对用户输入的文本进行响应：当用户提交表单时，你可以使用 ChatGPT 模型的 generate 方法生成响应文本。"},{"id":"b2","type":"paragraph","html":"

以下是一个简单的例子，展示了如何使用 Flask 和 ChatGPT 构建一个简单的 Web 应用程序：

","text":"以下是一个简单的例子，展示了如何使用 Flask 和 ChatGPT 构建一个简单的 Web 应用程序："},{"id":"b3","type":"paragraph","html":"$1a","text":"1234567891011121314151617181920212223242526from flask import Flask, render_template, requestfrom transformers import AutoModelWithLMHead, AutoTokenizerapp = Flask(__name__)model = AutoModelWithLMHead.from_pretrained(\"microsoft/DialoGPT-small\")tokenizer = AutoTokenizer.from_pretrained(\"microsoft/DialoGPT-small\")@app.route(\"/\", methods=[\"GET\", \"POST\"])def index(): if request.method == \"POST\": input_text = request.form[\"input_text\"] prompt = (input_text, \"\") response = model.generate(prompt, max_length=1024, do_sample=True, temperature=0.7) response_text = tokenizer.decode(response[0], skip_special_tokens=True) return render_template(\"index.html\", response_text=response_text) else: return render_template(\"index.html\")if __name__ == \"__main__\": app.run()"},{"id":"b4","type":"paragraph","html":"

在这段代码中，我们使用了 Flask 的 render_template 函数来渲染一个 HTML 模板，并将响应文本传递给模板。我们还使用了 Transformers 库中的 AutoTokenizer 类来将响应文本解码为可读的文本。

","text":"在这段代码中，我们使用了 Flask 的 render_template 函数来渲染一个 HTML 模板，并将响应文本传递给模板。我们还使用了 Transformers 库中的 AutoTokenizer 类来将响应文本解码为可读的文本。"},{"id":"b5","type":"paragraph","html":"

下面是一个简单的 HTML 模板，你可以使用它来显示用户输入和 ChatGPT 响应：

","text":"下面是一个简单的 HTML 模板，你可以使用它来显示用户输入和 ChatGPT 响应："},{"id":"b6","type":"paragraph","html":"

<html>
  <head>
    <title>ChatGPT Demo</title>
  </head>
  <body>
    <form method=\"POST\">
      <label>输入文本：</label>
      <input type=\"text\" name=\"input_text\" placeholder=\"输入文本\" />
      <button type=\"submit\">发送</button>
    </form>
    {% if response_text %}
      <p>响应文本：{{ response_text }}</p>
    {% endif %}
  </body>
</html>

","text":"123456789101112131415 ChatGPT Demo {% if response_text %}

响应文本：{{ response_text }}

{% endif %} "},{"id":"b7","type":"paragraph","html":"

在这个 HTML 模板中，我们创建了一个表单，允许用户输入对话文本。当用户提交表单时，Web 应用程序会使用 ChatGPT 模型生成响应文本，并使用 Flask 的 render_template 函数将响应文本传递给 HTML 模板。

","text":"在这个 HTML 模板中，我们创建了一个表单，允许用户输入对话文本。当用户提交表单时，Web 应用程序会使用 ChatGPT 模型生成响应文本，并使用 Flask 的 render_template 函数将响应文本传递给 HTML 模板。"},{"id":"b8","type":"paragraph","html":"

要运行这个 Web 应用程序，你需要安装 Flask 和 Transformers 库，然后运行代码：

","text":"要运行这个 Web 应用程序，你需要安装 Flask 和 Transformers 库，然后运行代码："},{"id":"b9","type":"paragraph","html":"

1
2

pip install flask transformers
python app.py

","text":"12pip install flask transformerspython app.py"},{"id":"b10","type":"paragraph","html":"

然后，你就可以在浏览器中访问 http://localhost:5000/ 来使用这个 Web 应用程序了。

","text":"然后，你就可以在浏览器中访问 http://localhost:5000/ 来使用这个 Web 应用程序了。"},{"id":"b11","type":"paragraph","html":"

要在上述代码的基础上创建一个更美观的界面，你可以使用 HTML、CSS 和 JavaScript 来设计界面，并使用 AJAX 技术在用户输入文本后异步获取 ChatGPT 响应。

","text":"要在上述代码的基础上创建一个更美观的界面，你可以使用 HTML、CSS 和 JavaScript 来设计界面，并使用 AJAX 技术在用户输入文本后异步获取 ChatGPT 响应。"},{"id":"b12","type":"paragraph","html":"

下面是一个示例代码，展示了如何使用这些技术创建一个类似聊天系统的界面：

","text":"下面是一个示例代码，展示了如何使用这些技术创建一个类似聊天系统的界面："},{"id":"b13","type":"paragraph","html":"$1b","text":"$1c"},{"id":"b14","type":"paragraph","html":"

上面的代码是一个基于 HTML 和 jQuery 的聊天系统模板，使用了 Bootstrap 框架进行布局。

","text":"上面的代码是一个基于 HTML 和 jQuery 的聊天系统模板，使用了 Bootstrap 框架进行布局。"},{"id":"b15","type":"list","html":"$1d","text":"HTML 部分：页面中包含一个聊天窗口，其中有一个卡片（card），卡片中包含聊天记录（card-body）和输入框（card-footer）。聊天记录中默认显示一条消息：“你好，我是 ChatGPT，有什么想聊的？”输入框中包含一个文本输入框（input）和一个发送按钮（button）。jQuery 部分：页面加载完成后，通过 jQuery 监听表单提交事件（submit）。当表单提交时，jQuery 会触发一个回调函数，这个回调函数中的代码会被执行。当用户在输入框中输入文本并点击发送按钮时，表单提交事件（submit）被触发。在表单提交事件的回调函数中，首先使用 event.preventDefault() 阻止默认的表单提交行为。然后使用 $(\"#input_text\").val() 获取用户输入的文本。接着使用 $(\"#messages\").append() 将文本添加到聊天记录中。最后，使用 jQuery 的 AJAX 功能发送一个 POST 请求到服务器，将用户输入的文本作为请求参数。当服务器返回响应时，将服务器返回的内容添加到聊天记录中。最后，清空文本输入框，准备下一次聊天。整个流程如下：用户在文本输入框中输入文本，点击发送按钮。jQuery 监听到表单提交事件，阻止默认的表单提交行为。获取用户输入的文本。将文本添加到聊天记录中。发送 AJAX 请求，将用户输入的文本作为请求参数。服务器返回响应，将响应的内容添加到聊天记录中。清空文本输入框，准备下一次聊天。这个 HTML 模板只是个简单的框架，具体的逻辑实现还需要你在服务器端进行开发。感谢您阅读这篇文章，希望能帮助到您。在这篇文章中，我们介绍了如何将 ChatGPT 部署到网站上，并使用 jQuery 和 Bootstrap 构建聊天系统的界面。如果您有任何疑问或建议，欢迎在评论区留言。最后，如果这篇文章对您有所帮助，希望能给个打赏鼓励一下作者。如果你觉得我的博客不错的话，可以赞助我 (・̀ ω・́)✧：https://jdjwzx233.cn/support。"}],"source":"$0:f:0:1:0:props:children:props:children:1:props:children:props:children:props:children:0:props:sources:316","originalUrl":"https://jdjwzx233.cn/2022/12/24/%E5%B0%86ChatGPT%E9%83%A8%E7%BD%B2%E5%88%B0%E7%BD%91%E7%AB%99%E4%B8%8A/","excerpt":"ChatGPT 是一个用于自然语言对话的预训练语言模型。要将 ChatGPT 部署到网站上，你需要执行以下步骤："},"shouldTranslate":true}],"$L1e"]}]