👻 死亡网络的回声
Kiroween黑客马拉松2025-复活类别
“因为互联网永远不会忘记……它只需要一场盛宴。”
使用Kiro的代理人工智能、MCP扩展和规范驱动开发,让死去的网站和丢失的互联网知识复活。一个浏览器插件+网络应用程序,让用户通过人工智能重建“与已死的网站对话”,如GeoCities、MySpace 2005或废弃的论坛——融合了数字考古和人工智能复活。
🎯 为什么会赢
复活类别:让死网复活:
- Wayback Machine快照检索和重建
- 基于人工智能的内容推理和填补空白
- 与“幽灵”网站的互动对话
- 通过向量嵌入实现复活内容的语义记忆
- 从URL到活鬼的实时复活管道
潜在价值:
- 数字保存:使用AI上下文恢复历史内容
- 教育研究:以交互方式了解网络历史
- 娱乐:怀旧+讲故事(“与2000年代的网站交谈”)
- 品牌复活即服务:SaaS让品牌重振传统页面
创意设计:令人毛骨悚然的“CRT闪烁”终端主题,带有交互式数字音乐UI。每个复活的网站都会变成一个基于其原始内容的具有个性的对话幽灵。
🪦 复活特征
🔮 神秘复活仪式
将无聊的加载屏幕变成壮观的场景:
- 旋转五角星 -闪烁的绿色恒星,具有脉冲效果
- Runic Circle -12个反向旋转的古代符号
- 浮动代码片段 -数字精神(`
,{},404,💀`) - 能量脉冲 -不断扩大的神秘浪潮
- 自行车信息 -“从时光机中召唤灵魂……”
💀 数字尸检报告
对死亡网站的全面尸检分析:
- 生命统计 -域名、时代、死亡年龄、最后出现日期、快照计数
- 技术栈检测 -自动识别技术(PHP、Flash、MySQL等)
- 死亡原因 -智能分析(放弃、域过期、迁移)
- 精神实质 -使用动态力量计进行人格评估
- 官方认证 -旋转印章和审查员签名
👻 幽灵互动
- 人工智能聊天 -使用LLM+历史数据与复活的网站进行对话
- Wayback查看器 -显示实际历史快照的嵌入式iframe
- 复活画廊 -浏览以前调用的网站
- 成功动画 -复活完成时的胜利庆典
🎨 哥特式UI
- CRT终端主题 -深黑色上的磷绿色
- 扫描线效果 -真正的复古显示器感觉
- Glitch动画 -标题出现故障和闪烁
- 漂浮的幽灵 -表情符号动画背景
- 纯CSS3 -所有动画GPU加速,60fps,无库!
📚 文档
新来的? 结账 INDEX.md 获取所有文档的完整指南。
快速链接:
- 🚀 QUICKSTART.md -5分钟后开始跑步
- 🏆 提交.md -黑客马拉松提交
- 🎬 HACKATHON_DEMO.md -演示脚本
- 🏗️ 建筑.md -技术深潜
- ✅ HACKATHON_CHECKLIST.md -提交前检查表
🚀 快速开始
地方发展
# Install dependencies
npm install
cd frontend && npm install
# Set up environment variables
cp .env.example .env
# Add your OpenAI/Anthropic API key and Pinecone credentials
# Start backend resurrection engine
npm run backend
# Start frontend séance UI (separate terminal)
cd frontend
npm run dev
# Load Chrome extension (optional)
# 1. Open chrome://extensions/
# 2. Enable "Developer mode"
# 3. Click "Load unpacked"
# 4. Select the chrome_extension/ folderAWS部署
快速部署到AWS Amplify+应用程序运行器:
# 1. Push to GitHub
git push origin main
# 2. Deploy backend (AWS App Runner Console)
# - Connect GitHub repo
# - Use apprunner.yaml config
# - Add environment variables
# 3. Deploy frontend (AWS Amplify Console)
# - Connect GitHub repo
# - Use amplify.yml config
# - Add VITE_API_URL variable
# 4. Deploy infrastructure (optional - for S3/DynamoDB)
cd infrastructure
python -m venv venv
venv\Scripts\activate # Windows
pip install -r requirements.txt
cdk bootstrap
cdk deploy📚 部署指南:
- 放大器_快速启动.md -快速参考卡
- 部署到示例.md -分步指南
- 部署.md -完整的部署文档
替代方案:无服务器(Lambda)
npm install -g serverless
serverless deploy --stage prod🏗️ 建筑
┌─────────────────────────────────────────────┐
│ Chrome Extension (Dead Link Detector) │
│ - Detects 404s and dead sites │
│ - "Summon This Page" button │
│ - Sends URL to resurrection engine │
└──────┬──────────────────────────────────────┘
│
┌──────▼──────────────────────────────────────┐
│ React Frontend (Digital Séance UI) │
│ - Gothic CRT terminal theme │
│ - Ghost chat interface │
│ - Resurrection progress visualization │
│ - Historical snapshot browser │
└──────┬──────────────────────────────────────┘
│
┌──────▼──────────────────────────────────────┐
│ FastAPI Backend (Resurrection Engine) │
│ - Wayback Machine API integration │
│ - LangChain orchestration │
│ - Semantic reconstruction pipeline │
│ - Ghost personality generation │
└──────┬──────────────────────────────────────┘
│
┌──────▼──────────────────────────────────────┐
│ Data & AI Layer │
│ ├─ Wayback Machine: Historical snapshots │
│ ├─ Pinecone: Vector memory storage │
│ ├─ OpenAI/Anthropic: Ghost conversations │
│ ├─ S3: Cached resurrection data │
│ └─ DynamoDB: Resurrection metadata │
└─────────────────────────────────────────────┘🎮 用户体验
复活之旅
- 输入地址 -键入任何已关闭的网站(myspace.com、geocities.com、vine.co)
- 召唤幽灵 -点击发光的“👻 召唤”按钮
- 观看仪式 -五角星旋转,符文发光,代码片段浮动(10-15s)
- 庆祝成功 -带有复选标记和能量爆发的全屏动画(3秒)
- 阅读尸检 -技术栈与死因综合分析
- 探索幽灵 -在Wayback Machine iframe中查看实际站点
- 与Spirit聊天 -询问有关网站历史和内容的问题
主要特点
- 一键复活:输入任何无效的URL,然后看着它恢复生机
- 壮观的动画:每个加载屏幕都是一种神秘的体验
- 智能分析:自动检测时代、技术栈和死因
- 幽灵对话:与复活的网站谈论他们的历史
- 视觉时间旅行:浏览历史快照
- 个性化引擎:每个鬼魂都有基于原创内容的独特个性
- 复活画廊:浏览以前调用的网站
- 纯粹的性能:所有动画均为CSS3,GPU加速,60fps
🎃 Kiro功能演示
- 氛围编程:“让这个项目更有趣”→ 壮观的五角星仪式和尸检报告在30分钟内生成
- 组件生成:创建了3个复杂的React组件,包含1200多行CSS动画
- 转向规则:哥特式考古学家角色
.kiro/steering/gothic_archeologist.md确保所有UI副本的叙述基调一致 - 快速迭代:在人工智能的帮助下,从概念到工作动画只需几分钟
- 纯CSS精通:生成的GPU加速动画没有任何库
- 文档:自动生成的综合指南、演示脚本和测试说明
📊 演示场景
最佳URL尝试
90年代 (HTML 3.2、框架、CGI):
geocities.com-90年代经典网页,带建筑GIFangelfire.com-个人主页丰富tripod.com-早期网络托管
2000年代 (PHP、Flash、MySQL):
myspace.com-具有自定义配置文件的社交网络friendster.com-第一大社交网络digg.com-科技新闻聚合器
2010年代 (HTML5、CSS3、jQuery):
vine.co-6秒视频平台(2017年去世)google.com/reader-亲爱的RSS阅读器
你会看到什么
- 五角星仪式 -20秒旋转,符文符号,浮动代码
- 成功动画 -成长圈、复选标记、能量爆发
- 尸检报告 -时代徽章、技术栈标签、死亡证明
- 精神测量仪 -动画进度条显示幽灵强度
- 复活现场 -实际回程机器快照
🏆 黑客马拉松提交
- 主类别:复活(使死去的网站复活)
- 奖金类别:
- 最具创意(交互式数字音乐用户界面) - 最佳创业项目(品牌复活即服务)
- 视频演示:\[YouTube链接-3分钟电影“降神会”体验\]
- 现场演示:\[部署URL\]
- Chrome 扩展:可用
/chrome_extension/
🎥 演示视频
\[3分钟电影演示-即将推出\]
演示亮点:
- 开场:死链接和丢失网络历史的问题
- 五角星仪式:观看壮观的加载动画
- 成功庆典:胜利复活完整画面
- 数字尸检:技术检测综合分析
- 幽灵互动:与复活的网站对话
- Kiro展示:人工智能如何在30分钟内构建动画
📸 截图
复活仪式
⚡ ANIMATED PENTAGRAM ⚡
ᚠ ᚢ ᚦ ᚨ
ᚱ ᚲ
╱─────────────╲
ᚷ ╱ ⭐ STAR ⭐ ╲ ᚹ
│ │
ᚺ │ myspace.com │ ᚾ
│ │
ᛁ ╲ "Summoning ╱ ᛃ
╲ spirits..." ╱
ᛇ ᛈ ᛉ ᛊ数字尸检报告
╔═══════════════════════════════════════╗
║ 💀 DIGITAL AUTOPSY REPORT 💀 ║
║ Post-Mortem Analysis ║
╠═══════════════════════════════════════╣
║ 📊 VITAL STATISTICS ║
║ Domain: myspace.com ║
║ Era: [Early 2000s Web] ║
║ Age at Death: 15 years ║
║ Last Seen: March 15, 2009 ║
║ Snapshots Preserved: 127 ║
║ ║
║ ⚙️ TECH STACK ║
║ [PHP 4] [MySQL] [Flash] [JS ES3] ║
║ ║
║ 🪦 CAUSE OF DEATH ║
║ Migration - Moved to new realm ║
╚═══════════════════════════════════════╝🏗️ 项目结构
aws-resurrection/
├── .kiro/ # Kiro configuration
│ └── steering/ # AI guidance
│ ├── aws-standards.md
│ └── gothic_archeologist.md # Narrative tone rules
├── frontend/ # React + Vite
│ ├── src/
│ │ ├── components/
│ │ │ ├── ResurrectionRitual.jsx # Pentagram loading animation
│ │ │ ├── ResurrectionRitual.css # Ritual styling (300+ lines)
│ │ │ ├── SiteAutopsy.jsx # Autopsy report panel
│ │ │ ├── SiteAutopsy.css # Autopsy styling (400+ lines)
│ │ │ ├── ResurrectionComplete.jsx # Success animation
│ │ │ └── ResurrectionComplete.css # Success styling (150+ lines)
│ │ ├── App.jsx # Main app with state orchestration
│ │ └── App.css # Gothic CRT terminal theme
│ └── package.json
├── infrastructure/ # AWS CDK
│ ├── app.py
│ └── stacks/
├── backend-server.js # Resurrection engine
├── .env.example # Configuration template
├── DEPLOYMENT.md # Setup guide
├── HACKATHON_DEMO.md # Demo script
├── NEW_FEATURES.md # Feature documentation
├── DEMO_SCRIPT.md # Presentation guide
└── TESTING_GUIDE.md # Testing instructions🎨 技术亮点
动画架构
- 纯CSS3 -没有动画库,只有创意关键帧
- GPU加速 -所有变换和不透明度更改
- 60fps性能 -针对流畅播放进行了优化
- 响应式设计 -从移动设备扩展到桌面
- SVG图形 -五角星和神秘符号
- 时间错位 -精心编排的揭示和过渡
组件设计
- 复活仪式 -5个动画层(五角星、符文、核心、碎片、脉冲)
- 现场尸检 -4节智能数据分析
- 复苏完成 -全屏庆祝活动,自动关闭
- 状态编排 -加载、成功和显示之间的平滑过渡
调色板
- 🟢 荧光绿 (#00FF41)-主要、终端真实性
- 🔵 幽灵蓝 (#4ECDC4)-次要的、空灵的口音
- 🔴 光谱红 (#FF006E)-尸检、警告、死亡
- 🟣 以太紫 (#9D4EDD)-神秘能量,魔法
- ⚫ 深黑色 (#0A0E27)-空白背景
🤝 贡献
这是一个黑客马拉松项目,但欢迎投稿!
增强的想法:
- 🔊 添加声音效果(仪式吟唱、成功钟声)
- 🎃 为著名的死亡遗址(GeoCities、Angelfire)准备复活节彩蛋
- 📱 增强的移动手势
- 🤖 人工智能驱动的历史分析
- 📊 时间线可视化
- 🎨 其他主题(赛博朋克、蒸汽朋克)
如何做出贡献:
- 分叉存储库
- 创建要素分支
- 遵循哥特式考古学家的基调(见
.kiro/steering/) - 提交拉取请求
📄 许可证
MIT许可证-请参阅许可证文件
🙏 致谢
- 时间机器 -保存互联网历史
- 基罗 -让人工智能辅助开发变得神奇
- 死网 -为了激励这场数字盛宴
______________________________________________________________________
内置于💚 (荧光绿)为Kiroween Hackathon 2025
*“互联网永远不会忘记……它只是需要一场盛宴。”* 👻
