I KNOW 数据洞察网站

一个科幻风格的情感数据分析平台，通过5个交互页面提供从数据收集到深度洞察的完整体验。

🏗️ 项目架构

iknow/
├── server.py              # Flask后端服务器
├── page1.html             # 首页 - 霓虹灯效果展示
├── page2.html             # 数据收集页 - 3D黑洞文件上传
├── page3.html             # 洞察展示页 - 卡片式数据分析
├── page4.html             # 报告终端页 - 机密档案+AI聊天
├── page5.html             # 系统全景页 - 监控大屏
├── assets/                # 静态资源目录
│   ├── backgrounds/       # 背景图片 (1-13号)
│   ├── ip_cards/          # 洞察卡片图片 (tag1-5)
│   ├── page5/             # page5专用图片
│   └── users_input/       # 用户上传文件存储
└── uploads/               # 文件上传临时目录

🔧 技术栈

• 后端: Flask + Flask-CORS
• 前端: 纯HTML + CSS + JavaScript
• 样式: 科幻风格、霓虹灯效果、CSS动画
• 交互: 文件上传、3D效果、动态内容加载

📱 页面功能

Page 1: 数据洞察主页

• 功能: 霓虹灯标题效果、打字机副标题、磁吸按钮
• 特效: 频闪动画、横向滚动图片展示
• 交互: 点击按钮进入下一页

Page 2: 数据奇点

• 功能: 3D黑洞动画、文件上传交互
• 特效: 吸积盘旋转、数据碎片环绕、吸入动画
• 交互: 拖拽或点击上传文件，自动跳转page3

Page 3: 深度洞察

• 功能: 卡片式数据展示、翻转效果、模态框详情
• 特效: 扫描线动画、悬停高亮、横向滚动问题流
• 数据: 5条IP洞察数据，包含tag/summary/fact/description

Page 4: 最终报告终端

• 功能: 机密档案展示、AI聊天机器人、命令行终端
• 特效: 打字机效果、盖章动画、终端风格
• 交互: 实时聊天、报告逐条显示

Page 5: 系统全景

• 功能: 系统监控大屏、CRT滤镜效果
• 特效: 扫描线、故障效果、开机动画
• 交互: 重启系统按钮

🛠️ API接口

静态资源

• GET / → page1.html
• GET /page2-5 → 对应页面
• GET /images/{filename} → 背景图片
• GET /ip-images/{filename} → 卡片图片
• GET /assets/page5/{filename} → page5图片

数据接口

• GET /api/images → 背景图片列表
• GET /api/ip-data → IP洞察数据 (5条)
• POST /api/upload → 文件上传
• POST /api/chat → AI聊天响应

🚀 部署说明

环境要求

• Python 3.7+
• Flask + Flask-CORS

启动服务

# 安装依赖
pip install flask flask-cors

# 启动服务
python3 server.py

# 或使用部署脚本
bash deploy_build.sh
bash deploy_run.sh

端口配置

• 默认端口: 5000
• 支持环境变量: DEPLOY_RUN_PORT
• 监听地址: 0.0.0.0 (支持外网访问)

📊 核心数据

IP洞察数据结构

{
  "id": 1,
  "image": "tag1.png",
  "tag": "温差极大的情绪供暖",
  "summary": "摘要描述",
  "fact": "事实分析",
  "description": "详细解释"
}

聊天AI响应

• 支持关键词: "喜欢"、"难过"、"未来"
• 智能回复随机选择
• 响应延迟: 0.5-1.5秒模拟思考

🎨 设计特色

科幻风格元素

• 配色: 深色背景 + 霓虹蓝/紫
• 字体: 等宽字体营造代码感
• 动画: 频闪、扫描、故障效果
• 交互: 磁吸、悬浮、粒子效果

用户体验

• 流畅的页面转场动画
• 响应式设计适配多端
• 沉浸式数据可视化
• 智能化的交互反馈

🔒 文件结构说明

• uploads/: 用户上传文件临时存储
• server.log: 服务运行日志
• 静态资源支持PNG/JPG格式
• 自动创建目录结构无需手动配置

📝 开发笔记

项目采用前后端分离架构，后端仅提供API服务，前端通过原生JavaScript实现所有交互效果。所有动画和特效均使用CSS3实现，确保性能优化。