在 Flask 应用中实现 ChatGPT

zencartmoban

608人浏览 · 2026-02-28 13:45:44

zencartmoban · 2026-02-28 13:45:44 发布

通过将 ChatGPT 集成到 Flask 应用中，您可以构建动态且交互式的聊天界面。本文的说明将帮助您将ChatGPT集成到 Flask 项目中，并为用户提供引人入胜的聊天体验。您可以改进用户界面、尝试新的提示信息，并探索新的选项，从而使您的聊天程序功能更加强大。

使用 API 在 Flask 应用程序中实现 ChatGPT 的步骤

将 ChatGPT 集成到Flask Web 应用程序中，可以构建交互式聊天界面，并为用户提供动态的对话体验。下面我们概括一下整个步骤：

搭建 Flask 项目。
定义一个 Flask app.py 文件来处理聊天功能。
配置 Django 的 URL 路由，将聊天视图连接到特定的 URL 模式。
设计用户界面。
测试和运行应用程序。

在 Flask 应用中实现 ChatGPT

文件夹结构

app.py：创建聊天视图

这段代码需要你拥有一个有效的 OpenAI API 密钥，请将其替换为 'YOUR_API_KEY'。Flask 应用监听根路由 '/' 上的请求，当收到 POST 请求时，它会根据用户的提示使用OpenAI API 生成响应。响应随后以JSON 格式返回。

from flask import Flask, render_template, request, jsonify import openai app = Flask(__name__) # OpenAI API Key openai.api_key = 'YOUR_API_KEY' def get_completion(prompt): print(prompt) query = openai.Completion.create( engine="text-davinci-003", prompt=prompt, max_tokens=1024, n=1, stop=None, temperature=0.5, ) response = query.choices[0].text return response @app.route("/", methods=['POST', 'GET']) def query_view(): if request.method == 'POST': print('step1') prompt = request.form['prompt'] response = get_completion(prompt) print(response) return jsonify({'response': response}) return render_template('index.html') if __name__ == "__main__": app.run(debug=True)

templates/index.html：创建用户界面

使用 HTML、CSS 和 Bootstrap 为聊天界面创建 HTML 模板，并设置必要的 JavaScript 和 AJAX 代码来处理用户交互。

<!<-- query.html --> <html> <head> <title>Query</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.0/dist/js.cookie.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.2/font/bootstrap-icons.css" integrity="sha384-b6lVK+yci+bfDmaY1u0zE8YYJt0TZxLEAFyYSLHId4xoVvsrQu3INevFKo+Xir8e" crossorigin="anonymous"> <script> $(document).ready(function() { // Send the form on enter keypress and avoid if shift is pressed $('#prompt').keypress(function(event) { if (event.keyCode === 13 && !event.shiftKey) { event.preventDefault(); $('form').submit(); } }); $('form').on('submit', function(event) { event.preventDefault(); // get the CSRF token from the cookie var csrftoken = Cookies.get('csrftoken'); // set the CSRF token in the AJAX headers $.ajaxSetup({ headers: { 'X-CSRFToken': csrftoken } }); // Get the prompt var prompt = $('#prompt').val(); var dateTime = new Date(); var time = dateTime.toLocaleTimeString(); // Add the prompt to the response div $('#response').append('<p id="GFG1">('+ time + ') <i class="bi bi-person"></i>: ' + prompt + '</p>'); $('#response #GFG1').css({"color": "green", "width": "90%", "float": "left"}); // Clear the prompt $('#prompt').val(''); $.ajax({ url: '/', type: 'POST', data: {prompt: prompt}, dataType: 'json', success: function(data) { $('#response').append('<p id="GFG2">('+ time + ') <i class="bi bi-robot"></i>: ' + data.response + '</p>'); $('#response #GFG2').css({"color": "red", "width": "90%", "float": "right"}); } }); }); }); </script> </head> <body> <div class="container p-3"> <h3>GFG ChatGPT Clone</h3> <div class="mb-3"> <form method="post" action=""> <label for="prompt" class="form-label"><strong>Prompt: </strong></label> <textarea class="form-control" type="textarea" id="prompt" name="prompt" rows="3"></textarea> <br> <button class="btn btn-primary " type="submit">Submit</button> </form> </div> <br> <div class="mb-3"> <h6>Response:</h6> <div class="container border overflow-auto h-50" id="response"></div> </div> </div> </body> </html>