Django连接Azure服务器里的gpt-4o并实现聊天功能

python 复制代码

# 配置OpenAI API
api_key = ""
# 配置OpenAI APIURL
endpoint = ""
# 配置模型名称
deployment_name = "gpt-4o-0312"
# 配置API版本
api_version = "2023-03-15-preview"
# 初始化 tiktoken 编码器，计算详细token值
encoding = tiktoken.encoding_for_model("gpt-4o")


# 计算token数量
def count_tokens(text):
    return len(encoding.encode(text))


# 连接Openai并发送请求传递到页面
def dify_Azure(request):
    b_token = request.COOKIES.get('b_token')
    if b_token is None:
        return redirect("B_Login:b_login")
    else:
        b_token = request.COOKIES.get('b_token')
        A = B_user.objects.using('default').filter(b_power="1").filter(b_token=b_token).values_list('b_user',
                                                                                                    flat=True).first()
        B = B_usertwo.objects.using('default').filter(b_power="2").filter(b_token=b_token).values_list('b_user',
                                                                                                       flat=True).first()
        if A or B:
            # 发送请求到OpenAI API
            headers = {
                "Content-Type": "application/json",
                "api-key": api_key
            }
            speak = request.GET.get('speak')
            data = {
                # 与OpenAI对话
                "messages": [
                    {"role": "user", "content": speak}
                ],
                # 限制max_tokens的合理值
                "max_tokens": 10000
            }

            try:
                url = f"{endpoint}openai/deployments/{deployment_name}/chat/completions?api-version={api_version}"
                response = requests.post(url, headers=headers, data=json.dumps(data))
                if response.status_code == 200:
                    response_data = response.json()
                    content = response_data['choices'][0]['message']['content']
                    # 计算token数量
                    user_tokens = count_tokens(data['messages'][0]['content'])
                    response_tokens = count_tokens(content)
                    # 计算总token数量并输出页面
                    total_tokens = user_tokens + response_tokens
                    return render(request, 'dify_AzureAI.html', {'response': content, 'speak': speak, 'A': A, 'B': B})
                else:
                    # 捕获连接、请求失败、账户资金缺少错误信息
                    errorcontent = f"Error: {response.status_code} - {response.text}"
                    return render(request, 'dify_AzureAI.html')
            # 捕获其他异常错误
            except requests.exceptions.RequestException as e:
                errorcontent = f"Request failed: {str(e)}"
                return render(request, 'dify_AzureAI.html', {'response': errorcontent})
        else:
            return redirect("Error_Page:authority_warn")

dify_AzureAI.html

python 复制代码

{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
    <meta name="robots" content="noindex, nofollow">
    <link href="{% static 'plugin/assets/lib/perfect-scrollbar/css/perfect-scrollbar.css' %}" rel="stylesheet">
    <link href="{% static 'plugin/assets/lib/metismenu/css/metisMenu.min.css' %}" rel="stylesheet">
    <link href="{% static 'plugin/assets/lib/bootstrap/bootstrap.min.css' %}" rel="stylesheet">
    <link href="{% static 'plugin/assets/css/main.css' %}" rel="stylesheet">
    <style>
        html, body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .chat-container {
            height: 80vh;
            overflow-y: auto;
            border: 1px solid #dee2e6;
            border-radius: .375rem;
            background-color: #ffffff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }

        .message {
            margin-bottom: 1rem;
            display: flex;
            align-items: flex-end;
        }

        .message.user {
            flex-direction: row-reverse;
        }

        .message-content {
            padding: 10px 15px;
            border-radius: .375rem;
            position: relative;
            max-width: 75%;
            word-wrap: break-word;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .message.user .message-content {
            background-color: #39BAF5;
            color: white;
            border-top-right-radius: 0;
            word-wrap: break-word;
        }

        .message .message-content {
            background-color: #f1f1f1;
            color: #212529;
            border-top-left-radius: 0;
            word-wrap: break-word;
        }

        .typing-indicator {
            font-style: italic;
            color: #6c757d;
            margin-top: 5px;
            text-align: right;
        }

        .rr {
            display: flex;
            justify-content: center;
        }
    </style>
</head>
<body>
<div class="page-content">
    <div class="card">
        <div class="card-body">
            <div class="chat-container" id="chat-container">
                {% if response == None %}
                {% else %}
                    <div class="message">
                        <img src="{% static 'AI_head.jpg' %}" width="48" height="48" class="rounded-circle">
                        <div class="message-content">
                            &nbsp;{{ response }}&nbsp;
                        </div>
                    </div>
                {% endif %}
                {% if response == None %}
                {% else %}
                    <div class="message user">
                        <img src="{% static A.b_head %}" width="48" height="48" class="rounded-circle">
                        <div class="message-content">
                            {{ speak }}&nbsp;
                        </div>
                    </div>
                    <div id="typing-indicator" class="typing-indicator" style="display:none;">AI正在输入...</div>
                {% endif %}
            </div>
        </div>
        <div class="card-footer" style="margin-top: -30px;">
            <form method="get" id="chat-form" class="form-inline"
                  action="{% url 'Core_dify:dify_Azure' %}">{% csrf_token %}
                <div class="row rr">
                    <div class="col-auto col-sm-10">
                        <input type="text" class="form-control" name="speak" placeholder="请输入你与AI对话的消息...">
                    </div>
                    <div class="col-auto">
                        <button type="submit" class="btn btn-primary form-control"><i class="fas fa-sign-in-alt"></i>发送对话
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<script src="{% static 'plugin/assets/lib/metismenu/js/metisMenu.min.js' %}"></script>
<script src="{% static 'plugin/assets/lib/perfect-scrollbar/js/perfect-scrollbar.js' %}"></script>
<script src="{% static 'plugin/assets/js/main.js' %}"></script>
<script>
    $(document).ready(function () {
        $('#chat-form').on('submit', function (e) {
            e.preventDefault();
            const message = $(this).find('input').val();
            if (message) {
                $('.chat-container').append(`
                    <div class="message user">
                        <img src="https://via.placeholder.com/40" class="avatar">
                        <div class="message-content">
                            ${message}
                        </div>
                    </div>
                `);
                $(this).find('input').val('');
                $('.chat-container').scrollTop($('.chat-container')[0].scrollHeight);
                showTypingIndicator();
            }
        });

        function showTypingIndicator() {
            $('#typing-indicator').show();
            setTimeout(() => {
                $('#typing-indicator').hide();
                const botMessage = "这是AI的自动回复。";
                $('.chat-container').append(`
                    <div class="message">
                        <img src="{% static 'AI_head.jpg' %}" width="48" height="48" class="rounded-circle">
                        <div class="message-content">
                            ${botMessage}
                        </div>
                    </div>
                `);
                $('.chat-container').scrollTop($('.chat-container')[0].scrollHeight);
            }, 2000);
        }
    });
</script>
</body>
</html>