当前位置：网站首页 > 技术分类 > 正文

大模型实战:Flask+H5三件套实现大模型基础聊天界面

ztj100 2025-07-09 18:38 4 浏览 0 评论

本文使用 Flask 和 H5 三件套（HTML+JS+CSS）实现大模型聊天应用的基本方式

话不多说，先贴上实现效果：

流式输出：

思考输出：

聊天界面

模型设置：

模型设置

会话切换：

前言

大模型的聊天应用从功能到 UI 设计来说都已经非常标准化了，然而身为小白的我至今还天真地以为页面上的流式响应是一门了不起的技术。于是在得空的时候亲手实现了一个名为 Chat Mate 的聊天应用，该应用主打低代码量和简单易用，并且实现了 Chat 应用需要具备的流式输出、历史记录、模型思考等功能。项目采用前后端分离的方式，前端完全由原生 HTML、JS、CSS 编写，没有使用任何封装好的框架，后端使用 Python 的 Flask 编写，实现简单。 用户可以输入自己已经购买的 API 调用商用 LLM，也可以调用通过 Ollama 部署的本地模型。完整的项目代码放在了 Github 上（见文末），欢迎小伙伴们下载学习和二次开发

关键实现

项目采用前后端分离的方式设计，分别使用 Flask 框架编写前端服务器和后端服务器。

页面文件：见 /templates/index.html 文件，其中 /templates 目录方便 Flask 直接读取和渲染。
样式文件：见 /static/styles.css 文件。
脚本文件：见 /static/script.js 文件，其中 /static 目录也是为了方便 Flask 直接读取和渲染。
后端文件：见 /web_server.py 和 /openai_server.py 文件，其中 /web_server.py 为前端服务器，/openai_server.py 为后端服务器。

一、页面设计

仿照主流聊天应用，前端页面主要包含侧边栏和主要内容区域，其中侧边栏用于显示历史记录和设置，主要内容区域用于显示聊天记录和输入框。


<html lang="zh-CN"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Chat Mate - 聊天搭子title>    <link rel="stylesheet" type="text/css" href="../static/styles.css">head><body>        <div class="sidebar" id="sidebar">        <div class="sidebar-header">            <div class="sidebar-title">历史对话div>            <button class="close-sidebar" id="close-sidebar">×button>        div>        <div class="history-list" id="history-list">                    div>        <div class="sidebar-footer">            <button class="new-chat-btn" id="new-chat-btn">开始新对话button>            设置 -->        div>    div>        <div class="settings-modal" id="settings-modal">        <div class="settings-content">            <div class="settings-header">                <h3 class="settings-title">API 设置h3>                <button class="close-settings" id="close-settings">×button>            div>            <form class="settings-form" id="settings-form">                <div class="form-group">                    <label for="api-url" class="form-label">API 地址label>                    <input type="text" id="api-url" class="form-input" placeholder="https://api.example.com/v1">                div>                <div class="form-group">                    <label for="api-key" class="form-label">API 密钥label>                    <input type="password" id="api-key" class="form-input" placeholder="输入您的API密钥">                div>                <div class="form-group">                    <label for="model-name" class="form-label">模型名称label>                    <input type="text" id="model-name" class="form-input" placeholder="Qwen/QwQ-32B">                div>            form>            <div class="settings-footer">                <button type="button" class="btn btn-secondary" id="clear-settings">清除button>                <button type="button" class="btn btn-primary" id="save-settings">保存button>            div>        div>    div>        <div class="sidebar-overlay" id="sidebar-overlay">div>        <div class="main-content" id="main-content">        <button class="menu-btn" id="settings-btn">            <img src="../static/logo/a-more2.svg" alt="更多" width="24" height="24">        button>        <button class="menu-btn" id="menu-btn" style="top: 80px;">            <img src="../static/logo/lishijilu.svg" alt="历史记录" width="24" height="24">        button>        <button class="menu-btn" id="clear-history-btn" style="top: 140px;">            <img src="../static/logo/shuaxin.svg" alt="刷新" width="24" height="24">        button>        <main>            <div class="chat-container">                <div class="chat-header">                    <div class="status">div>                    <span>Chat Mate - 你的在线聊天伙伴span>                div>                <div class="chat-messages" id="chat-messages">                    <div class="message-container bot">                        <div class="avatar bot-avatar">AIdiv>                        <div class="message bot-message">                            你好！我是你的聊天搭子。你可以跟我说说你的感受和想法，我会认真倾听并给予温暖的回应。今天有什么想分享的吗？                            <div class="message-time">刚刚div>                        div>                    div>                div>                <div class="typing-indicator" id="typing-indicator">                    <div class="typing-dot">div>                    <div class="typing-dot">div>                    <div class="typing-dot">div>                div>                <div class="input-area">                    <textarea class="message-input" id="message-input" placeholder="向 AI 发送消息 嗖嗖~咻~" rows="1">textarea>                    <button class="send-button" id="send-button">                        <svg class="send-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">                            <path d="M22 2L11 13" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>                            <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>                        svg>                    button>                div>            div>        main>    div>    <script src="../static/scripts.js">script>body>html>

流式输出

流式输出的实现主要依赖如下三个函数，前端中依赖 generateResponse 和 updateStreamingMessage 函数，后端中依赖 stream_openai_generate 函数。

在 generateResponse 函数中，使用 fetch API 发送 POST 请求，并使用 response.body.getReader() 获取可读流。

async function generateResponse(userMessage) {    // ... 其他代码 ...    try {        const response = await fetch(`http://localhost:${SERVER_PORT}/stream_openai_generate`, {            method: 'POST',            headers: {'Content-Type': 'application/json'},            body: JSON.stringify({/* 请求数据 */})        });        const reader = response.body.getReader(); // 获取可读流        const decoder = new TextDecoder();        let solution = '';        let responseText = '';        while (true) {            const {done, value} = await reader.read(); // 读取数据块            if (done) break;            const chunk = decoder.decode(value); // 解码数据            const lines = chunk.split('\n');            for (const line of lines) {                if (line.startsWith('data:')) {                    const data = JSON.parse(line.substring(5).trim());                    // 根据字段类型累积内容                    if (data.reason != null && data.reason) {                        solution += data.text;                        updateStreamingMessage(solution, 'reasoner'); // 实时更新解决方案                    } else {                        responseText += data.text;                        updateStreamingMessage(responseText, 'bot'); // 实时更新回复                    }                }            }        }        // ... 返回最终结果 ...    } catch (error) {        console.error('Error:', error);        // ... 错误处理 ...    }}

2. 在 updateStreamingMessage 函数中，使用 innerHTML 更新消息内容，并支持 HTML 换行。

function updateStreamingMessage(text, sender) {    // 查找或创建消息容器    let messageContainer = document.querySelector(`.message-container.${sender}:last-child`);    if (!messageContainer) {        // 创建新消息容器（头像+消息框）        messageContainer = document.createElement('div');        messageContainer.classList.add('message-container', sender);        // ... 创建avatar和messageDiv ...        chatMessages.appendChild(messageContainer);    }    // 更新消息内容（支持HTML换行）    const messageDiv = messageContainer.querySelector('.message');    messageDiv.innerHTML = text.replace(/\n/g, '
');    // 自动滚动到底部    chatMessages.scrollTop = chatMessages.scrollHeight;}

3. 前端使用 fetch API 发送 POST 请求，将调用大模型所需的 base_url、api_key 和 model 三个参数发送给后端服务器（见 script.js/generateResponse 函数）。

try {    const response = await fetch(`http://localhost:${SERVER_PORT}/stream_openai_generate`, {        method: 'POST',        headers: {            'Content-Type': 'application/json',        },        body: JSON.stringify({            messages: currentConversation.messages,            base_url: apiUrlInput.value,            api_key: apiKeyInput.value,            model: apiModelInput.value,            newMessage: userMessage,        })    });    if (!response.ok) {        throw new Error(`HTTP error! status: ${response.status}`);    }    const reader = response.body.getReader();    const decoder = new TextDecoder();    let solution = '';    let responseText = '';    let currentField = '';    while (true) {        const {done, value} = await reader.read();        // console.log('value:', value);        // console.log('done:', done);        if (done) break;        const chunk = decoder.decode(value);        console.log('chunk:', chunk);        const lines = chunk.split('\n');        for (const line of lines) {            if (line.startsWith('data:')) {                const data = JSON.parse(line.substring(5).trim());                if (data.reason != null && data.reason) {                    solution += data.text;                    currentField = 'solution';                } else {                    responseText += data.text;                    currentField = 'response';                }                // 实时更新消息                if (currentField === 'solution') {                    updateStreamingMessage(solution, 'reasoner');                } else if (currentField === 'response') {                    updateStreamingMessage(responseText, 'bot');                }            }        }    }    // 返回最终结果    return {        solution: solution,        responseText: responseText    };} catch (error) {    console.error('Error:', error);    // 处理错误}

4. 在后端 openai_server.py 文件中，使用 stream_openai_generate 函数，将请求数据发送给 OpenAI API 或 Ollama，并使用 yield 逐行返回结果。

from flask import Flask, request, Responsefrom flask_cors import CORS  # 导入CORSimport jsonimport ollamaapp = Flask(__name__)CORS(app)  # 启用CORS支持role = {    'bot': 'assistant',    'user': 'user'}def generate_stream_response_by_openai(messages=None, model='Qwen/QwQ-32B', base_url=None, api_key=None):    from openai import OpenAI    client = OpenAI(        base_url=base_url,        api_key=api_key,  # ModelScope Token    )    response = client.chat.completions.create(        model=model,  # ModelScope Model-Id        messages=messages,        stream=True    )    for chunk in response:        reasoning_chunk = chunk.choices[0].delta.reasoning_content  # delta.reasoning_content 是推理        answer_chunk = chunk.choices[0].delta.content  # delta.content 是响应内容        if reasoning_chunk != '':            yield f"data: {json.dumps({'text': reasoning_chunk, 'reason': True}, ensure_ascii=False)}\n"        elif answer_chunk != '':            yield f"data: {json.dumps({'text': answer_chunk, 'reason': False}, ensure_ascii=False)}\n"        yield ""  # 结束标记def generate_stream_response_by_ollama(messages=None, model='qwen2'):    response = ollama.chat(        model=model,        messages=messages,        stream=True    )    for chunk in response:        answer_chunk = chunk['message']['content']        if answer_chunk != '':            yield f"data: {json.dumps({'text': answer_chunk, 'reason': False}, ensure_ascii=False)}\n"        yield ""  # 结束标记@app.route('/stream_openai_generate', methods=['POST'])def stream_generate_openai():    print(request.json)    # 获取请求中的输入数据    data = request.json['messages']    model = request.json['model']    base_url = request.json['base_url']    api_key = request.json['api_key']    messages = []    for line in data[1:]:        messages.append({            'role': role[line['sender']],            'content': line['text']        })    print(messages)    if base_url != 'Ollama':        # 返回流式响应        return Response(            generate_stream_response_by_openai(                messages=messages,                model=model,                base_url=base_url,                api_key=api_key            ),            mimetype='text/event-stream',  # Server-Sent Events类型            headers={                'X-Accel-Buffering': 'no',  # 禁用Nginx缓存                'Cache-Control': 'no-cache'            }        )    else:        # 返回流式响应        return Response(            generate_stream_response_by_ollama(                messages=messages,                model=model            ),            mimetype='text/event-stream',  # Server-Sent Events类型            headers={                'X-Accel-Buffering': 'no',  # 禁用Nginx缓存                'Cache-Control': 'no-cache'            }        )if __name__ == '__main__':    app.run(host='0.0.0.0', port=8000)

侧边栏的显示与隐藏

侧边栏的实现原理如下：

初始状态：

侧边栏通过transform: translateX(-100%)隐藏在屏幕左侧
遮罩层透明度为0且不可点击

2. 显示侧边栏：

点击菜单按钮触发toggleSidebar()
为侧边栏添加active类，使其平移到可视区域
同时显示半透明遮罩层

3. 隐藏侧边栏：

点击关闭按钮或遮罩层再次触发toggleSidebar()
移除active类，侧边栏平移回隐藏位置
隐藏遮罩层

4. 动画效果：

通过CSS的transition属性实现平滑的滑动动画
遮罩层也有淡入淡出效果

HTML结构：

<div id="sidebar">...div><div id="sidebar-overlay">div>

CSS样式：

.sidebar {    transform: translateX(-100%); /* 默认隐藏 */    transition: transform 0.3s ease; /* 添加过渡动画 */}.sidebar.active {    transform: translateX(0); /* 显示状态 */}.sidebar-overlay {    opacity: 0;    pointer-events: none; /* 默认不可点击 */    transition: opacity 0.3s ease;}.sidebar-overlay.active {    opacity: 1;    pointer-events: all; /* 激活时可点击 */}

JavaScript控制：

// 获取DOM元素const sidebar = document.getElementById('sidebar');const sidebarOverlay = document.getElementById('sidebar-overlay');const menuBtn = document.getElementById('menu-btn');const closeSidebar = document.getElementById('close-sidebar');// 切换侧边栏函数function toggleSidebar() {    sidebar.classList.toggle('active');    sidebarOverlay.classList.toggle('active');    mainContent.classList.toggle('sidebar-open');}// 事件监听menuBtn.addEventListener('click', toggleSidebar);closeSidebar.addEventListener('click', toggleSidebar);sidebarOverlay.addEventListener('click', toggleSidebar);

总结

以上仅展示了项目的部分功能和关键代码，完整代码和功能说明请查阅项目仓库。

代码地址：

appendchild

上一篇：SSE前端（sse前端数据）
下一篇：前端里的拖拖拽拽（拖拽式前端框架）

大模型实战:Flask+H5三件套实现大模型基础聊天界面

前言

关键实现

一、页面设计

流式输出

侧边栏的显示与隐藏

总结

相关推荐

取消回复欢迎你发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

大模型实战:Flask+H5三件套实现大模型基础聊天界面

前言

关键实现

一、页面设计

流式输出

侧边栏的显示与隐藏

总结

相关推荐

取消回复欢迎 你 发表评论:

Vue-实现自定义插件弹窗（vue 实现弹窗）

Vue自定义Hook示例:useUrlState（vue中的自定义指令如何使用）

MySQL中这14个小玩意，让人眼前一亮!

旗舰机新标杆 OPPO Find X2系列正式发布 售价5499元起

什么是幂等?分布式锁如何实现业务幂等?

手把手教你搞定菜单权限设计，精确到按钮级别，建议收藏

详解MySQL 字符串拼接之concat\concat_ws\group_concat

如何快速切换node版本?利用n包快速切换nodejs版本

如何发个 npm 包?

【Python机器学习系列】建立多层感知机模型预测心脏疾病

取消回复欢迎你发表评论:

旗舰机新标杆 OPPO Find X2系列正式发布售价5499元起