如何将IPython Notebook嵌入网页？Jupyter模型网页可视化求助

阿华AIGC实验室

2026-5-26

嘿，别担心，我来一步步帮你搞定这个事儿！作为编程新手，Flask其实是更适合你的选择——它轻量、容易上手，和Python模型的整合非常顺畅。下面是具体的步骤：

第一步：把Jupyter里的模型导出保存

首先你得把Notebook里训练好的模型存成独立文件，这样Flask服务才能调用它。推荐用joblib（比pickle更适合存机器学习模型），在你的Notebook里运行这段代码：

from joblib import dump
# 假设你的训练好的模型变量名叫model
dump(model, 'my_prediction_model.joblib')

运行后会生成一个my_prediction_model.joblib文件，把它放到后续创建的Flask项目文件夹里就行。

第二步：搭建Flask后端服务

先安装Flask，打开终端输入：

pip install flask

然后创建一个项目文件夹，结构大概是这样：

my_model_project/
├── app.py                  # Flask主程序文件
├── my_prediction_model.joblib  # 刚才导出的模型
├── templates/              # 存放前端HTML页面的文件夹
│   └── index.html

接下来写app.py的代码：

from flask import Flask, request, jsonify, render_template
from joblib import load

# 初始化Flask应用
app = Flask(__name__)
# 加载预训练的模型
model = load('my_prediction_model.joblib')

# 首页路由：返回前端可视化页面
@app.route('/')
def home_page():
    return render_template('index.html')

# 预测接口：接收前端传的特征数据，返回预测结果
@app.route('/get_prediction', methods=['POST'])
def make_prediction():
    # 获取前端传来的JSON格式特征数据
    input_data = request.get_json()
    # 提取5个特征（注意要和你模型的输入格式匹配）
    features = [
        input_data['feature1'],
        input_data['feature2'],
        input_data['feature3'],
        input_data['feature4'],
        input_data['feature5']
    ]
    # 执行预测（如果模型需要二维数组输入，就套一层[]）
    prediction_result = model.predict([features])[0]
    # 返回JSON格式的预测结果
    return jsonify({'prediction': float(prediction_result)})

if __name__ == '__main__':
    # 启动服务，debug=True方便开发时自动刷新
    app.run(debug=True)

第三步：写前端HTML+JS页面（实现可视化）

在templates/index.html里写代码，这里用简单的表单输入特征，再用Chart.js做基础可视化（新手友好）：

<!DOCTYPE html>
<html>
<head>
    <title>模型预测可视化</title>
    <!-- 引入Chart.js用于绘制图表 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <h1>输入5个特征获取预测结果</h1>
    <!-- 特征输入表单 -->
    <div class="feature-inputs">
        <label>特征1：</label><input type="number" id="f1" step="0.01"><br>
        <label>特征2：</label><input type="number" id="f2" step="0.01"><br>
        <label>特征3：</label><input type="number" id="f3" step="0.01"><br>
        <label>特征4：</label><input type="number" id="f4" step="0.01"><br>
        <label>特征5：</label><input type="number" id="f5" step="0.01"><br>
        <button onclick="fetchPrediction()">获取预测结果</button>
    </div>

    <!-- 预测结果展示区 -->
    <div class="result-area">
        <h3>预测值：<span id="pred-text"></span></h3>
        <!-- 用于绘制图表的画布 -->
        <canvas id="pred-chart" width="400" height="200"></canvas>
    </div>

    <script>
        function fetchPrediction() {
            // 收集输入的特征值
            const inputFeatures = {
                feature1: parseFloat(document.getElementById('f1').value),
                feature2: parseFloat(document.getElementById('f2').value),
                feature3: parseFloat(document.getElementById('f3').value),
                feature4: parseFloat(document.getElementById('f4').value),
                feature5: parseFloat(document.getElementById('f5').value)
            };

            // 向Flask后端发送请求
            fetch('/get_prediction', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(inputFeatures)
            })
            .then(response => response.json())
            .then(data => {
                // 更新文本显示的预测结果
                document.getElementById('pred-text').textContent = data.prediction.toFixed(2);
                // 用Chart.js绘制柱状图可视化结果
                const chartCtx = document.getElementById('pred-chart').getContext('2d');
                new Chart(chartCtx, {
                    type: 'bar',
                    data: {
                        labels: ['模型预测结果'],
                        datasets: [{
                            label: '预测值',
                            data: [data.prediction],
                            backgroundColor: 'rgba(54, 162, 235, 0.6)',
                            borderColor: 'rgba(54, 162, 235, 1)',
                            borderWidth: 1
                        }]
                    },
                    options: {
                        scales: {
                            y: {
                                beginAtZero: true,
                                title: {
                                    display: true,
                                    text: '数值'
                                }
                            }
                        }
                    }
                });
            })
            .catch(error => alert('请求出错啦：' + error));
        }
    </script>
</body>
</html>

第四步：运行整个项目