Flask+Plotly结合动态加载图形页面实践

news2025/4/19 7:49:04

1. DeepSeek帮我实践

1.1. 我的提问既设计方案

原有如下主页：dashboard.html，现增加“预测模型学习”，对感知机神经网络描述如下：
1、输入与输出为固定值，例如输入层215，输出层48；
2、模型为回归神经网络；
3、中层是可动态调整的，例如定义如下：第二层，200，第三层，100，则最终结果：215，200，100，48；
4、定义solver = ‘adam’, activation = ‘relu’, max_iter=100，都是可选；
5、设置好参数后，点击按钮“模型训练”，则显示训练曲线和相关的模型评价。
上述页面有输入参数，显示训练结果两部分功能，请帮在dashboard.html补充完善，并给出相应python代码。

主页：dashboard.html代码。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>监控系统 - 主控台</title>
	<link rel="stylesheet" href="{
    { url_for('static', filename='css/main.css') }}">
</head>
<body>
    <div class="container">
        <!-- 侧边导航栏 -->
        <aside class="sidebar">
            <div class="sidebar-header">
                <h2>监控系统</h2>
            </div>
            
            <div class="user-info">
                <div class="user-avatar">{
  { current_user.username[0]|upper }}</div>
                <div>
                    <div style="font-weight: 500;">{
  { current_user.username }}</div>
                    <small style="color: #888;">管理员</small>
                </div>
            </div>
            
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link active" data-target="thread-monitor">
                        <i>📊</i> 线程监控
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-target="task-monitor">
                        <i>⏱️</i> 任务监控
                    </a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link" data-target="load-study">
                        <i>🎯</i> 预测模型学习
                    </a>
                </li> 
           </ul>
        </aside>
        
        <!-- 主内容区 -->
        <main class="main-content">
            <div class="header">
                <h1 class="page-title">线程监控</h1>
                <a href="{
    { url_for('logout') }}" class="logout-btn">退出登录</a>
            </div>
             
			<!-- 线程监控内容 -->
			<div id="thread-monitor" class="content-card thread-monitor">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h2>线程监控</h2>
					<div>
						<button onclick="loadThreadsData()" class="refresh-btn">
							<i class="fas fa-sync-alt"></i> 刷新
						</button>
					</div>
				</div>
				
				<div class="loading-indicator" style="text-align: center; display: none; margin: 10px 0;">
					<i class="fas fa-spinner fa-spin"></i> 加载中...
				</div>
				
				<div style="overflow-x: auto;">
					<table style="width: 100%; border-collapse: collapse;">
						<thead>
							<tr style="background-color: #4361ee; color: white;">
								<th style="padding: 12px; text-align: left;">线程名称</th>
								<th style="padding: 12px; text-align: left;">状态</th>
								<th style="padding: 12px; text-align: left;">守护线程</th>
								<th style="padding: 12px; text-align: left;">启动时间</th>
							</tr>
						</thead>
						<tbody>
							<!-- 动态内容将通过JavaScript填充 -->
							<tr>
								<td colspan="4" style="text-align: center; padding: 20px; color: #888;">
									正在加载线程数据...
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				
				<p class="update-time" style="margin-top: 20px; color: #888; font-size: 0.9em;">
					<i class="fas fa-clock"></i> 最后更新时间: 未加载
				</p>
			</div