文章总结： 该文档是一个基于Flask+MySQL+Ollama(DeepSeek)的漏洞资产分析平台的聊天前端页面(chat.html)渲染文件。它使用Jinja2模板和深色主题CSS实现AI对话界面，包含头部导航、消息容器和输入表单。JavaScript通过fetch实现异步请求、Markdown转HTML渲染及自动插入报告日期功能。页面还提供资产核查和FOFAHASH工具链接。该模板可直接用于安全分析平台的前端交互，但需后端API支持。 综合评分： 75 文章分类： 安全工具,WEB安全,安全开发,解决方案,实战经验

---

Flask + MySQL + Ollama(DeepSeek) 漏洞资产库 的网络安全资产分析平台的templates中（chat.html）渲染文件

原创

bqangus bqangus

bqAngus知识库

2026年8月20日 10:15 湖北

在小说阅读器读本章

去阅读

这是一个后端模板渲染的聊天前端页面（模板语法为{% %}，属于 Jinja2，常见于 Flask），实现深色风格 AI 对话界面；页面包含头部导航、聊天消息容器、输入提交表单，JS 实现表单提交、fetch 接口请求、简单 Markdown 转 HTML 渲染、自动插入报告日期功能。

关键点

1. chat_history

   ：后端传入的对话历史列表，循环渲染用户消息、机器人回复；

2. 两个超链接新窗口打开，对接后端另外两个功能页面：资产核查、FOFA HASH 工具；

3. form 表单阻止默认提交，全部走fetch异步请求，无页面刷新。

CSS 样式分析

页面基础

• 全屏居中布局，height:100vh，背景深色渐变，10s 循环渐变动画；
• 整体深色主题，主色调#00bcd4青蓝色作为强调色。

核心容器

1. .chat-container

   ：聊天主容器，最大宽度 750px，高度90vh，flex 纵向布局，实现头部‑消息区‑输入框固定布局；

2. .chat-box

   ：消息滚动容器，flex‑grow:1自动占满剩余高度，overflow‑y:auto消息滚动；

3. .user-message

   ：用户消息靠右对齐，深灰色背景；

4. .bot-response

   ：AI 回复靠左，左侧青色边框，支持内部 h1/h2/h3/strong/code/ul 列表渲染；

5. .input-box

   底部输入区，flex 布局，输入框圆角，发送按钮使用主题色。

动画

• backgroundAnimation

  ：背景渐变切换；

• fadeIn

  ：消息淡入动画。

JavaScript 逻辑分析

formatReport(text) 格式化函数

                 

 

   

        AI智能体        

            资产未报备             FOFA-HASH        

   

     

       

你好，请问需要什么帮助？

        {% for chat in chat_history %}            

{{ chat.user_message }}

           

{{ chat.bot_response }}

        {% endfor %}    

     

       

                        发送        

   

 

---

免责声明：

本文所载程序、技术方法仅面向合法合规的安全研究与教学场景，旨在提升网络安全防护能力，具有明确的技术研究属性。

任何单位或个人未经授权，将本文内容用于攻击、破坏等非法用途的，由此引发的全部法律责任、民事赔偿及连带责任，均由行为人独立承担，本站不承担任何连带责任。

本站内容均为技术交流与知识分享目的发布，若存在版权侵权或其他异议，请通过邮件联系处理，具体联系方式可点击页面上方的联系我。

本文转载自：bqAngus知识库 bqangus bqangus《Flask + MySQL + Ollama(DeepSeek) 漏洞资产库 的网络安全资产分析平台的templates中（chat.html）渲染文件》