如何从HTML前端向Flask后端传递二维数组并解决类型错误

问题背景 #

在Google Colab中运行的预测代码完全正常，但通过HTML前端输入特征数组到Flask后端时，抛出TypeError: unhashable type: 'numpy.ndarray'错误。

Colab中正常运行的代码 #

import numpy as np

# 示例输入数据
input_data = [[3758096389, 0, 114456999, 0, 0, 0, 2601295.432, 10001143, 2601295.432, 10001143, 1, 0, 0.393160754, 0, 0, 0, 0, 0, 0, 0, -1, 0, 0]]

import joblib

# 转换为numpy数组
input_array = np.array(input_data)

ensemble_model=joblib.load('/content/ensemble_model_3_DT_RF.pkl')

# 生成预测结果
ensemble_predictions = ensemble_model.predict(input_array)

# 打印预测标签
print("Predicted Labels:", ensemble_predictions)

当前Flask后端代码（存在问题版本） #

def predictFunction():
    data = request.form['feature_array'] # 获取前端传来的字符串格式特征数组
    
    # 将字符串转换为二维列表
    data = np.array(eval(data))
    data = data.tolist()
    selected_model = request.form['model']
    
    if selected_model == 'Ensemble Model 1':
        # 使用集成模型1预测
        prediction = Ensemble_model_1.predict(data)
    elif selected_model == 'Ensemble Model 2':
        # 使用集成模型2预测
        prediction = Ensemble_model_2.predict(data)
    elif selected_model == 'Ensemble Model 3':
        # 使用集成模型3预测
        prediction = Ensemble_model_3.predict(data)
    else:
        prediction =  selected_model       

当前HTML表单代码 #

<form method="POST" action="/predictFunction">
  <div class="mb-3">
    <label for="feature_array">Feature Array:</label>
    <input type="text" id="feature_array" class="form-control" name="feature_array" placeholder="Enter the feature array" value="">
  </div>
  <button class="btn btn-dark">Predict</button>
</form>

解决方案 #

错误核心原因：eval()解析存在安全风险且数据格式易出错，同时模型predict()要求输入为二维numpy数组，当前处理流程未严格匹配该格式。

修正步骤 #

1. 优化前端输入体验（可选）

将单行输入框改为多行文本框，同时增加模型选择下拉框，减少用户输入错误：

<form method="POST" action="/predictFunction">
  <div class="mb-3">
    <label for="feature_array">特征数组（每行一个样本，元素用逗号分隔）:</label>
    <textarea id="feature_array" class="form-control" name="feature_array" rows="3" placeholder="例如：3758096389,0,114456999,..."></textarea>
  </div>
  <div class="mb-3">
    <label for="model">选择模型:</label>
    <select id="model" name="model" class="form-control">
      <option value="Ensemble Model 1">集成模型1</option>
      <option value="Ensemble Model 2">集成模型2</option>
      <option value="Ensemble Model 3">集成模型3</option>
    </select>
  </div>
  <button class="btn btn-dark">预测</button>
</form>

2. 修正Flask后端代码

import ast
import numpy as np
from flask import request, jsonify

def predictFunction():
    try:
        # 获取前端提交的数据
        feature_str = request.form.get('feature_array', '')
        selected_model = request.form.get('model', '')

        # 支持两种输入格式解析
        if feature_str.startswith('['):
            # 直接解析二维数组字符串（如"[[1,2],[3,4]]"）
            data_list = ast.literal_eval(feature_str)
        else:
            # 按行分割解析（每行一个样本，元素用逗号分隔）
            data_list = []
            for row in feature_str.split('\n'):
                row = row.strip()
                if row:
                    elements = [float(x.strip()) for x in row.split(',')]
                    data_list.append(elements)
        
        # 转换为模型要求的二维numpy数组
        input_array = np.array(data_list)

        # 校验输入维度
        if input_array.ndim != 2:
            return jsonify({'error': '输入必须是二维数组'}), 400

        # 执行预测
        prediction = None
        if selected_model == 'Ensemble Model 1':
            prediction = Ensemble_model_1.predict(input_array)
        elif selected_model == 'Ensemble Model 2':
            prediction = Ensemble_model_2.predict(input_array)
        elif selected_model == 'Ensemble Model 3':
            prediction = Ensemble_model_3.predict(input_array)
        else:
            return jsonify({'error': '无效的模型选择'}), 400

        # 返回可序列化的预测结果
        return jsonify({'predicted_labels': prediction.tolist()})
    
    except Exception as e:
        return jsonify({'error': f'处理失败：{str(e)}'}), 500

关键优化点 #

• 用ast.literal_eval()替代eval()：避免执行恶意代码，提升安全性
• 严格匹配模型输入格式：确保最终输入为二维numpy数组，与Colab中测试格式完全一致
• 增加错误处理：捕获解析、维度等异常，返回明确的错误信息
• 兼容多种输入格式：既支持直接输入二维数组字符串，也支持按行输入样本

内容的提问来源于stack exchange，提问作者Swami Mahale