加载环境变量中的APImima

加载环境变量中的APImima_key

2025-07-21 1164 网站建设

请提供您希望我总结的具体内容或相关文本，仅从“加载环境变量中的API密钥”这一短语，信息较为有限，无法生成详细且准确的摘要，如果您有关于如何在不同编程语言或环境中加载和使用API密钥的具体步骤、代码示例或其他相关信息，请提供更多细节，以便我能为您生成合适的摘要。

在当今数字化时代,人工智能（AI）技术正以前所未有的速度迅猛发展，作为其中的一员，ChatGPT以其卓越的自然语言处理能力，吸引了无数开发者和用户的广泛关注，通过将ChatGPT集成到自己的网站中，您可以为用户提供更加智能、个性化的服务体验，本文将为您详细介绍如何搭建一个能够调用ChatGPT API的网站。

准备工作

在开始之前,请确保您已准备好以下工具和资源：

服务器或虚拟主机：用于部署您的网站。
域名：如果您还没有域名，建议购买一个，以便为您的网站提供稳定的在线地址。
编程语言环境：推荐使用Python或Node.js来编写后端逻辑，Python的Flask框架是构建轻量级Web应用的理想选择。
API密钥：从OpenAI获取ChatGPT的API访问权限。

注册OpenAI账号并获取API密钥

要调用ChatGPT API，首先需要注册一个OpenAI账号，访问OpenAI官网，点击“Sign Up”按钮进行注册，注册完成后，登录到您的账户，在“API Keys”部分生成一个新的API密钥，这个密钥将是您与ChatGPT API通信的重要凭证。

创建后端服务以处理API请求

我们将构建一个简单的Web应用程序,该应用可以接收来自前端页面的请求，并转发这些请求给ChatGPT API，这里我们选择使用Flask框架来实现这一目标。

安装Flask

首先安装Flask库,可以在命令行中运行以下命令：

pip install flask

编写Flask应用代码

创建一个新的Python文件app.py，并在其中添加如下代码：

from flask import Flask, request, jsonify
import requests
import os
app = Flask(__name__)
OPENAI_API_KEY = os.getenv("OPENAI_API_KEY")
@app.route('/chat', methods=['POST'])
def chat():
    data = request.get_json()
    response = requests.post(
        "https://api.openai.com/v1/completions",
        headers={
            "Content-Type": "application/json",
            "Authorization": f"Bearer {OPENAI_API_KEY}"
        },
        json={
            "prompt": data['prompt'],
            "max_tokens": 100,
            "temperature": 0.7
        }
    )
    return jsonify(response.json())
if __name__ == '__main__':
    app.run(debug=True)

这段代码定义了一个名为chat的路由，它接收POST请求并将数据传递给ChatGPT API，请根据实际需求调整参数设置，例如最大生成令牌数（max_tokens）和温度值（temperature）。

设置环境变量

为了安全起见,建议不要直接在代码中硬编码API密钥，而是将其存储在环境变量中，您可以在.env文件中设置环境变量，或者在shell配置文件（如.bashrc或.zshrc）中添加API密钥，对于Windows用户，可以使用系统的环境变量管理器。

在Linux/macOS上，您可以创建一个.env文件，并添加以下内容：

OPENAI_API_KEY=your_api_key_here

在您的Flask应用启动脚本中加载该文件：

from dotenv import load_dotenv
load_dotenv()

确保安装了python-dotenv库：

pip install python-dotenv

开发前端界面供用户交互

现在让我们转向前端部分,设计一个简单的HTML页面，允许用户输入问题并查看回复。

创建HTML模板

创建一个名为index.html的文件，并放入以下代码：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">聊天机器人</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
    <textarea v-model="prompt" placeholder="请输入你的问题..."></textarea><br/>
    <button @click="sendPrompt">发送</button><br/>
    <div v-if="response">{{ response }}</div>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                prompt: '',
                response: ''
            };
        },
        methods: {
            sendPrompt() {
                axios.post('http://localhost:5000/chat', { prompt: this.prompt })
                    .then(res => {
                        this.response = res.data.choices[0].text;
                    })
                    .catch(error => {
                        console.error('Error:', error);
                    });
            }
        }
    });
</script>
</body>
</html>

上述代码引入了Vue.js库，并使用其组件模型来构建交互式表单，当用户点击“发送”按钮时，会触发sendPrompt方法，向后端发送HTTP POST请求，一旦收到响应，结果就会显示在页面上。

配置CORS（跨域资源共享）

由于现代浏览器的安全策略限制,直接从客户端发起跨域请求可能会失败，我们需要配置服务器允许来自特定源的请求，对于Flask而言，可以简单地安装flask-cors扩展包并启用全局CORS支持：

pip install flask-cors

修改app.py文件，添加以下导入语句及装饰器：

from flask_cors import CORS
CORS(app)

这样就完成了基本的前后端整合工作！

测试与优化

完成以上步骤后,您可以启动Flask应用并通过浏览器访问前端页面测试功能是否正常运行，如果遇到任何问题，请检查控制台输出日志寻找可能的原因，还可以考虑增加错误处理机制、缓存响应等内容来进一步提升用户体验。

本文介绍了如何搭建一个能够调用ChatGPT API的网站，从准备阶段的工具选取，到最后的前端设计与测试，每个环节都至关重要，希望这篇文章能帮助大家更好地理解和实践这一过程，如果您有任何疑问或建议，欢迎随时交流探讨！

微信咨询

您敢托付绝不辜负

邮件

12500+

10+