Flask医疗聊天机器人如何实现Python输出到网页并接收网页输入处理

后端Flask接口改造 #

你之前用print()/input()的终端交互逻辑不适用Web场景，首先要解决HTTP无状态下的用户症状暂存问题，这里用Flask原生的session存储（医疗场景敏感数据存服务端更安全），步骤如下：

• 首先配置session加密密钥，生产环境请将密钥存入环境变量，禁止硬编码：

from flask import Flask, request, session, jsonify

app = Flask(__name__)
app.config['SECRET_KEY'] = '替换为你自己的安全加密密钥'

• 改造/processor接口，适配症状收集逻辑：

@app.route('/processor', methods=['POST'])
def processor():
    # 初始化当前用户的症状收集列表
    if 'collected_symptoms' not in session:
        session['collected_symptoms'] = []
    
    # 读取前端传入的用户输入
    user_input = request.json.get('user_input', '').strip()
    if user_input:
        session['collected_symptoms'].append(user_input)
        # 必须标记session已修改，否则列表变动不会被持久化
        session.modified = True
    
    # 判断症状数量是否满足要求
    if len(session['collected_symptoms']) < 2:
        return jsonify({
            "status": "pending",
            "msg": f"请再补充{2 - len(session['collected_symptoms'])}个症状，以便我为你进行准确判断"
        })
    else:
        # 此处替换为你原有的聊天机器人处理逻辑，入参为已收集的症状列表
        bot_response = f"你提交的症状为：{'、'.join(session['collected_symptoms'])}，初步判断为xxx"
        # 处理完成后清空本次症状收集记录
        session.pop('collected_symptoms', None)
        return jsonify({
            "status": "finished",
            "msg": bot_response
        })

如果你需要存储更多会话数据，或者对安全性要求更高，可以引入Flask-Session组件，将session存储到服务端Redis、数据库等位置，避免敏感数据留在用户cookie中。

前端页面改造 #

需要新增聊天内容渲染逻辑，以及适配后端两种返回状态的交互逻辑，示例代码如下：

• 基础DOM结构：

<!-- 聊天内容展示区 -->
<div id="chat-box" style="height: 450px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; padding: 12px; margin-bottom: 12px;"></div>
<!-- 输入控制区 -->
<div class="input-area" style="display: flex; gap: 8px;">
    <input type="text" id="user-input" placeholder="请输入你的症状" style="flex: 1; padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px;">
    <button id="send-btn" style="padding: 8px 20px; background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer;">发送</button>
</div>

• JS交互逻辑（原生JS实现，无需引入额外框架）：

const chatBox = document.getElementById('chat-box');
const userInput = document.getElementById('user-input');
const sendBtn = document.getElementById('send-btn');

// 消息渲染公共方法
function addMessage(content, isUser = false) {
    const msgEl = document.createElement('div');
    msgEl.style.padding = '8px 12px';
    msgEl.style.borderRadius = '6px';
    msgEl.style.maxWidth = '75%';
    msgEl.style.marginBottom = '10px';
    if (isUser) {
        msgEl.style.background = '#dbeafe';
        msgEl.style.marginLeft = 'auto';
    } else {
        msgEl.style.background = '#f3f4f6';
        msgEl.style.marginRight = 'auto';
    }
    msgEl.textContent = content;
    chatBox.appendChild(msgEl);
    // 自动滚动到最新消息位置
    chatBox.scrollTop = chatBox.scrollHeight;
}

// 消息发送逻辑
function submitMsg() {
    const inputVal = userInput.value.trim();
    if (!inputVal) return;
    // 先渲染用户发送的消息
    addMessage(inputVal, true);
    userInput.value = '';

    fetch('/processor', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        credentials: 'same-origin', // 必须携带cookie，否则session不生效
        body: JSON.stringify({user_input: inputVal})
    })
    .then(res => res.json())
    .then(res => {
        addMessage(res.msg);
    })
    .catch(err => {
        addMessage('服务异常，请稍后重试');
    })
}

// 绑定发送事件
sendBtn.addEventListener('click', submitMsg);
userInput.addEventListener('keydown', e => {
    if (e.key === 'Enter') submitMsg();
});

注意事项 #

• 医疗场景需要前后端双重做输入内容校验，过滤违规、敏感内容
• 可以根据需求新增会话超时逻辑，用户长时间未操作时清空已收集的症状
• 如果要兼容多端访问，可以将session存储改为基于用户ID的缓存方案，替代默认的cookie绑定逻辑

内容的提问来源于stack exchange，提问作者Li Qi