如何将预测模型的数据显示到Html页面上？非Django框架

最新推荐文章于 2023-05-19 16:19:43 发布

小红茶007

最新推荐文章于 2023-05-19 16:19:43 发布

阅读量860

点赞数 3

分类专栏：毕设知识点文章标签： python html css javascript 神经网络

本文链接：https://blog.csdn.net/m0_55629669/article/details/117899310

版权

毕设知识点专栏收录该内容

7 篇文章 1 订阅

订阅专栏

本文作者分享了如何在懒得学习Django的情况下，利用纯HTML、CSS和JavaScript来实现神经网络预测结果的简单界面展示。通过创建一个棋盘格界面，每个小格代表一个样本的预测结果，点击按钮即可显示预测的正负标签，并展示模型的准确率。代码实现包括预测、结果转换、HTML页面生成等步骤，适合初学者快速实现数据输出。

摘要由CSDN通过智能技术生成

都说懒是人类创造力的来源之一，此话不假。

我在搭建完神经网络模型后，被要求将结果输出到界面上，但是我懒得学Django（别笑我，谢谢），然后逛遍全网，用了以下纯Html+Css+js的方法，实现了最简单的数据输出（就是在页面上单纯显示出结果）。如果你想做功能全的高级页面，还请学习Django……

下图是我的输出页面：千万不要被华丽的外表所蒙骗，其实很幼稚。

简单介绍一下：左侧的棋盘格里共有400个小方格，代表着我的测试集有400个样本。1代表此样本被预测为正，0代表此样本被预测负。右侧显示的是模型的准确率，数据集以及模型参数。

使用方法也很简单：打开界面后点击按钮“显示结果”，棋盘格会亮起来，然后……就没了……

下面是主代码详解：原始代码完完全全奉献给大家啦！

#对预测集进行预测
pt = model.predict(test)

#将概率值转换为标签值
resultNp = np.argmax(pt, axis=1)
m =str(resultNp).replace(" ", "")

# 以w的模式打开file.html文件，不存在就新建
with open('file.html', 'w') as file:  
        file.write('<html><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> '
            '<link href="file.css" rel="stylesheet" type="text/css"/>'
            '<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>'
            '<script src="file.js"></script>'
            '<style type="file.css"></style><body>')
        file.write( '<button onClick = "changecolor()">显示结果</button>''<table>')  

#下面是我设置的每11个方格换行一次，大家可自行设置。
        file.write("<tr>")
        j = 1
        for i in range(0,len(m)-2,2):
            a = m[i+1:i+2]
            file.write("<td>"f'{a}'"</td>")
            j = j + 1
            if j == 12:
                file.write("</tr>")
                file.write("<tr>")
                j = 1
        file.write('</table>')
        file.write('</body></html>')  # 使用write写入字符串内容到file.html

Css文件很好写的，就不展示啦！下面是js文件：只有一个点击功能，这里大家可以自行发挥想象。

function changecolor(){
    $('table td').each(function(){
        var res = $(this).text();
        if(res=='1'){
            $(this).css('background-color','#78c1ffa6');
        }
    });

}

怎么样！是不是很简单，有问题可在下面评论或者私信我！一起交流学习呀！