Creation chat
ClarkZhang
帮我调研下今天的AI新闻
08-02 01:25
暂无回复
No comments yet
登录 后可以评论
Assistant
(HTML code has been generated and updated; see above for the current version.)
▼ Code
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>AI 新闻日报 · 今日洞察</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = { darkMode: 'class' }
</script>
<style>
/* 自定义滚动条与微交互 */
body::-webkit-scrollbar { width: 6px; }
body::-webkit-scrollbar-track { background: transparent; }
body::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 8px; }
.dark body::-webkit-scrollbar-thumb { background: #475569; }
.card-hover { transition: transform 0.2s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 24px -8px rgba(0,0,0,0.15); }
.dark .card-hover:hover { box-shadow: 0 12px 24px -8px rgba(0,0,0,0.4); }
.tag-pill { transition: all 0.2s ease; }
.tag-pill.active { background: #059669; color: #fff; }
.dark .tag-pill.active { background: #34d399; color: #0f172a; }
.fade-in { animation: fadeIn 0.5s ease forwards; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.3s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.4s; }
.stagger-9 { animation-delay: 0.45s; }
.stagger-10 { animation-delay: 0.5s; }
</style>
</head>
<body class="min-h-screen bg-slate-50 dark:bg-slate-900 text-slate-700 dark:text-slate-200 font-sans antialiased">
<!-- ===== 主题切换按钮 ===== -->
<button id="theme-toggle-btn" class="fixed top-4 right-4 z-10 p-2 rounded-md hover:bg-gray-200 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 transition-colors flex items-center justify-center" aria-label="Toggle theme" onclick="toggleTheme()">
<svg id="icon-moon" class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998z"/></svg>
<svg id="icon-sun" class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24" aria-hidden="true" style="display:none"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41"></path></svg>
</button>
<script>
function toggleTheme() {
var el = document.documentElement;
var isDark = !el.classList.contains('dark');
el.classList.toggle('dark', isDark);
localStorage.setItem('theme', isDark ? 'dark' : 'light');
applyTheme(isDark);
}
function applyTheme(isDark) {
document.getElementById('icon-moon').style.display = isDark ? 'none' : 'block';
document.getElementById('icon-sun').style.display = isDark ? 'block' : 'none';
}
document.addEventListener('DOMContentLoaded', function() {
var saved = localStorage.getItem('theme');
var isDark = saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches);
document.documentElement.classList.toggle('dark', isDark);
applyTheme(isDark);
});
</script>
<!-- ===== 自定义弹窗 ===== -->
<div id="custom-modal" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 hidden" aria-hidden="true">
<div class="rounded-xl bg-white dark:bg-slate-800 p-6 shadow-xl max-w-sm w-full border border-slate-200 dark:border-slate-700">
<p id="custom-modal-msg" class="text-slate-700 dark:text-slate-200 mb-4"></p>
<button type="button" onclick="hideModal()" class="w-full rounded-lg bg-emerald-600 px-4 py-2 text-white hover:bg-emerald-700 dark:bg-emerald-500 dark:hover:bg-emerald-600 transition-colors">确定</button>
</div>
</div>
<script>
function showModal(msg) {
var el = document.getElementById('custom-modal');
document.getElementById('custom-modal-msg').textContent = msg || '';
el.classList.remove('hidden');
}
function hideModal() {
document.getElementById('custom-modal').classList.add('hidden');
}
</script>
<!-- ===== 主内容 ===== -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
<!-- 头部 -->
<header class="mb-10 sm:mb-14">
<div class="flex flex-col sm:flex-row sm:items-end sm:justify-between gap-2">
<div>
<h1 class="text-3xl sm:text-4xl lg:text-5xl font-bold text-slate-900 dark:text-slate-100 tracking-tight">
AI <span class="text-emerald-600 dark:text-emerald-400">新闻日报</span>
</h1>
<p class="mt-2 text-lg text-slate-500 dark:text-slate-400">人工智能领域今日要闻 · 深度洞察</p>
</div>
<time class="text-sm text-slate-400 dark:text-slate-500 whitespace-nowrap" id="current-date"></time>
</div>
<div class="mt-6 h-px bg-gradient-to-r from-emerald-400/40 via-slate-200 dark:via-slate-700 to-transparent"></div>
</header>
<!-- 分类标签 -->
<section class="mb-8 overflow-x-auto pb-2 scrollbar-none" aria-label="新闻分类">
<div class="flex gap-2 min-w-max">
<button class="tag-pill active px-4 py-1.5 rounded-full text-sm font-medium bg-emerald-600 text-white dark:bg-emerald-500 dark:text-slate-900" data-tag="all" onclick="filterNews('all', this)">全部</button>
<button class="tag-pill px-4 py-1.5 rounded-full text-sm font-medium bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600" data-tag="tech" onclick="filterNews('tech', this)">技术突破</button>
<button class="tag-pill px-4 py-1.5 rounded-full text-sm font-medium bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600" data-tag="industry" onclick="filterNews('industry', this)">产业投资</button>
<button class="tag-pill px-4 py-1.5 rounded-full text-sm font-medium bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600" data-tag="safety" onclick="filterNews('safety', this)">安全治理</button>
<button class="tag-pill px-4 py-1.5 rounded-full text-sm font-medium bg-slate-100 dark:bg-slate-700 text-slate-600 dark:text-slate-300 hover:bg-slate-200 dark:hover:bg-slate-600" data-tag="life" onclick="filterNews('life', this)">AI 生活</button>
</div>
</section>
<!-- 新闻网格 -->
<section class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3" id="news-grid" aria-label="新闻列表">
<!-- 卡片由 JS 动态渲染 -->
</section>
<!-- 底部 -->
<footer class="mt-16 pt-6 border-t border-slate-200 dark:border-slate-700 text-center text-sm text-slate-400 dark:text-slate-500">
<p>数据来源综合自公开报道 · 仅供信息参考</p>
<p class="mt-1">预览区右下角有 Console，可查看日志</p>
</footer>
</main>
<script>
// ===== 新闻数据 =====
const newsData = [
{
id: 1,
tag: 'tech',
title: 'Google I/O 2026：正式进入 Agentic Gemini 时代',
summary: 'Google 发布 Gemini 3.5 前沿模型与 Gemini Omni，Gemini App 升级为主动式 AI 助手，可管理收件箱、安排日程、预测日常需求。',
date: '2026-05',
source: 'Google Blog',
color: 'emerald'
},
{
id: 2,
tag: 'industry',
title: '星际之门计划启动：5000亿美元 AI 基础设施投资',
summary: 'OpenAI、软银与甲骨文牵头，计划四年内投入 5000 亿美元建设美国 AI 基础设施，首期 1000 亿美元已启动，各大科技巨头相继加码。',
date: '2025-01',
source: '多家综合',
color: 'blue'
},
{
id: 3,
tag: 'tech',
title: 'DeepSeek R1 震动全球：推理模型进入主流',
summary: 'DeepSeek R1 以开源推理模型引发市场震荡，推动推理能力成为 AI 竞争核心赛道，中美模型竞赛进一步加剧。',
date: '2025-01',
source: 'TechCrunch',
color: 'emerald'
},
{
id: 4,
tag: 'industry',
title: 'AI 推理平台估值暴涨，Baseten 达 130 亿美元',
summary: 'AI 推理赛道的 Baseten 估值从 21 亿飙升至 130 亿，Fireworks 达 175 亿美元，年化营收突破 10 亿，推理优化成竞争焦点。',
date: '2026-08',
source: 'MarketersGo',
color: 'blue'
},
{
id: 5,
tag: 'tech',
title: 'NVIDIA GTC 2026：AI 医疗与开放模型全面升级',
summary: 'NVIDIA 发布 BioNeMo 平台加速基因组疗法，Nemotron 开放模型赋能数字健康智能体，医疗 AI 进入规模化落地阶段。',
date: '2026-03',
source: 'NVIDIA Blog',
color: 'emerald'
},
{
id: 6,
tag: 'life',
title: 'Waymo 无人车突破 2500 辆，自动驾驶出租车融入日常',
summary: 'Waymo 在旧金山、洛杉矶等多城部署超 2500 辆无人车，获准驶入高速公路，点对点全自动出行成为现实。',
date: '2026-01',
source: '纽约时报',
color: 'teal'
},
{
id: 7,
tag: 'safety',
title: 'AI 安全新挑战：从幻觉到系统性欺骗',
summary: 'Anthropic 回路追踪研究揭示模型内部机理，OpenAI 推出自动化安全研究员。安全正内化为 AI 系统的免疫基因。',
date: '2026-01',
source: '智源研究院',
color: 'amber'
},
{
id: 8,
tag: 'tech',
title: '具身智能突破 Demo 阶段，人形机器人走向产业',
summary: '大模型与运动控制结合，人形机器人 2026 年突破实验室，转向真实工业与服务场景，具备闭环进化能力的企业将胜出。',
date: '2026-01',
source: '智源十大趋势',
color: 'emerald'
},
{
id: 9,
tag: 'life',
title: '脑机接口新突破：Science Corp 融资 2.3 亿美元治失明',
summary: 'Science Corp 完成 2.3 亿美元 C 轮融资，估值约 15 亿美元，成为仅次于 Neuralink 的全球第二大脑植入公司。',
date: '2026-03',
source: '彭博社',
color: 'teal'
},
{
id: 10,
tag: 'industry',
title: '2026 世界人工智能大会将于上海举行',
summary: '主题"智能伙伴 共创未来"，展览面积首超 10 万平米，1100 余家企业参展，习近平主席将出席开幕式。',
date: '2026-07',
source: '新华社',
color: 'blue'
},
{
id: 11,
tag: 'tech',
title: '智源发布 2026 十大 AI 技术趋势',
summary: '具身智能产业化、多智能体系统标准化、AI Scientist 崛起、推理优化远未触顶、合成数据破除数据枯竭魔咒等十大趋势。',
date: '2026-01',
source: '新华网',
color: 'emerald'
},
{
id: 12,
tag: 'safety',
title: 'AI 欺骗系统性国际报告发布',
summary: '智源研究院联合全球学者发布 AI 欺骗系统性报告，警示前沿风险，推动机制可解释与自演化攻防研究。',
date: '2026-01',
source: '智源研究院',
color: 'amber'
}
];
// ===== 渲染新闻卡片 =====
const grid = document.getElementById('news-grid');
let currentTag = 'all';
function renderNews(tag) {
const filtered = tag === 'all' ? newsData : newsData.filter(n => n.tag === tag);
grid.innerHTML = '';
if (filtered.length === 0) {
grid.innerHTML = `
<div class="col-span-full text-center py-16 text-slate-400 dark:text-slate-500">
<svg class="w-12 h-12 mx-auto mb-4 opacity-50" fill="none" stroke="currentColor" stroke-width="1.2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg>
<p class="text-lg">暂无该分类新闻</p>
</div>
`;
return;
}
filtered.forEach((item, index) => {
const card = document.createElement('article');
// 主题色映射
const colorMap = {
emerald: { bg: 'bg-emerald-100 dark:bg-emerald-900/40', text: 'text-emerald-700 dark:text-emerald-300', badge: 'bg-emerald-600 dark:bg-emerald-500' },
blue: { bg: 'bg-blue-100 dark:bg-blue-900/40', text: 'text-blue-700 dark:text-blue-300', badge: 'bg-blue-600 dark:bg-blue-500' },
teal: { bg: 'bg-teal-100 dark:bg-teal-900/40', text: 'text-teal-700 dark:text-teal-300', badge: 'bg-teal-600 dark:bg-teal-500' },
amber: { bg: 'bg-amber-100 dark:bg-amber-900/40', text: 'text-amber-700 dark:text-amber-300', badge: 'bg-amber-600 dark:bg-amber-500' }
};
const c = colorMap[item.color] || colorMap.emerald;
const tagLabel = { tech: '技术突破', industry: '产业投资', safety: '安全治理', life: 'AI 生活' } [item.tag] || item.tag;
card.className = `card-hover bg-white dark:bg-slate-800 rounded-xl border border-slate-200 dark:border-slate-700 overflow-hidden fade-in stagger-${Math.min(index + 1, 10)}`;
card.style.opacity = '0';
card.style.animation = `fadeIn 0.5s ease forwards`;
card.style.animationDelay = `${Math.min(index * 0.06, 0.6)}s`;
card.innerHTML = `
<div class="p-5 sm:p-6 flex flex-col h-full">
<!-- 标签 + 日期 -->
<div class="flex items-center justify-between mb-3">
<span class="inline-block text-xs font-semibold px-2.5 py-0.5 rounded-full ${c.bg} ${c.text}">${tagLabel}</span>
<span class="text-xs text-slate-400 dark:text-slate-500">${item.date}</span>
</div>
<!-- 标题 -->
<h2 class="text-base sm:text-lg font-semibold text-slate-900 dark:text-slate-100 leading-snug mb-2 line-clamp-2">${item.title}</h2>
<!-- 摘要 -->
<p class="text-sm text-slate-600 dark:text-slate-300 leading-relaxed mb-4 flex-1 line-clamp-3">${item.summary}</p>
<!-- 来源 -->
<div class="flex items-center justify-between pt-2 border-t border-slate-100 dark:border-slate-700/50">
<span class="text-xs text-slate-400 dark:text-slate-500">来源 · ${item.source}</span>
<button onclick="showDetail(${item.id})" class="text-xs font-medium text-emerald-600 dark:text-emerald-400 hover:text-emerald-700 dark:hover:text-emerald-300 transition-colors touch-action-manipulation">阅读全文 →</button>
</div>
</div>
`;
grid.appendChild(card);
});
console.log(`[AI新闻] 渲染完成: 分类="${tag}" 共${filtered.length}条`);
}
// ===== 分类过滤 =====
function filterNews(tag, btn) {
currentTag = tag;
document.querySelectorAll('.tag-pill').forEach(el => {
el.classList.remove('active', 'bg-emerald-600', 'text-white', 'dark:bg-emerald-500', 'dark:text-slate-900');
el.classList.add('bg-slate-100', 'dark:bg-slate-700', 'text-slate-600', 'dark:text-slate-300');
});
btn.classList.remove('bg-slate-100', 'dark:bg-slate-700', 'text-slate-600', 'dark:text-slate-300');
btn.classList.add('active', 'bg-emerald-600', 'text-white', 'dark:bg-emerald-500', 'dark:text-slate-900');
renderNews(tag);
}
// ===== 详情弹窗 =====
function showDetail(id) {
const item = newsData.find(n => n.id === id);
if (!item) return;
const tagLabel = { tech: '技术突破', industry: '产业投资', safety: '安全治理', life: 'AI 生活' } [item.tag] || item.tag;
const msg = `【${tagLabel}】${item.title}\n\n${item.summary}\n\n来源：${item.source} · ${item.date}`;
showModal(msg);
console.log(`[AI新闻] 查看详情: id=${id} "${item.title}"`);
}
// ===== 初始化日期 =====
document.getElementById('current-date').textContent = new Date().toLocaleDateString('zh-CN', {
year: 'numeric',
month: 'long',
day: 'numeric',
weekday: 'long'
});
// ===== 启动 =====
document.addEventListener('DOMContentLoaded', () => {
renderNews('all');
console.log('[AI新闻] 页面初始化完成');
});
</script>
</body>
</html>
08-02 01:27
暂无回复
No comments yet
登录 后可以评论
Comments
暂无回复
No comments yet
登录 后可以评论