SOURCE

<!DOCTYPE html>
<html lang="zh-CN">
<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 = {
  theme: {
    extend: {
      colors: {
        museumBg: '#F7F3E9',
        museumText: '#5C3D2E',
        cardBg: '#fffbf4',
        borderLine: '#d9c9b8'
      },
      fontFamily: {
        serif: ['SimSun','serif']
      }
    }
  }
}
</script>
<style>
html {scroll-behavior:smooth}
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:50;align-items:center;justify-content:center;padding:1rem}
.modal.active{display:flex}
.card-hover{transition:0.3s ease;cursor:pointer}
.card-hover:hover{transform:translateY(-6px);box-shadow:0 8px 20px #00000018}
.section{min-height:100vh;padding:2rem 1rem}
</style>
</head>
<body class="bg-museumBg text-museumText font-serif">
<!-- 导航 -->
<nav class="fixed top-0 w-full bg-museumBg/90 backdrop-blur z-40 border-b border-borderLine shadow-sm">
  <div class="max-w-6xl mx-auto px-4 py-3 flex gap-6 justify-center text-sm md:text-base">
    <a href="#page1" class="hover:underline">封面展厅</a>
    <a href="#page2" class="hover:underline">时间轴长廊</a>
    <a href="#page3" class="hover:underline">术语标本室</a>
  </div>
</nav>

<!-- 页面一：封面，AI简史与术语 -->
<section id="page1" class="section pt-24 flex flex-col justify-center items-center text-center max-w-4xl mx-auto">
  <h1 class="text-4xl md:text-6xl font-bold mb-6">AI简史与术语数字博物馆</h1>
  <h2 class="text-xl md:text-2xl mb-4">策展人：张萌</h2>
  <div class="my-8 px-6 py-6 bg-cardBg rounded-lg border border-borderLine max-w-2xl shadow">
    <h3 class="text-lg italic">“机器智能，将是人类最后一项伟大的发明。”——尼克·波斯特洛姆</h3>
  </div>
  <p class="mt-6 text-base md:text-lg opacity-80">欢迎参观这座数字博物馆，在这里，我们回顾人工智能的发展历程，拆解AI领域核心术语标本。</p>
  <a href="#page2" class="mt-10 px-6 py-3 bg-museumText text-white rounded hover:opacity-90">进入时间长廊</a>
</section>

<!-- 页面二：时间轴长廊 1950–2026 AI事件卡片 -->
<section id="page2" class="section pt-20 max-w-6xl mx-auto">
  <h2 class="text-3xl font-bold text-center mb-12">时间轴长廊 · 1950–2026 AI发展事件</h2>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
    <!-- 卡片1 -->
    <div class="card-hover bg-cardBg p-5 rounded-lg border border-borderLine shadow" onclick="openModal('e1')">
      <div class="text-xl font-bold">1950｜图灵测试</div>
      <p class="mt-2">图灵发表论文《计算机器与智能》，提出模仿游戏。</p>
    </div>
    <!-- 卡片2 -->
    <div class="card-hover bg-cardBg p-5 rounded-lg border border-borderLine shadow" onclick="openModal('e2')">
      <div class="text-xl font-bold">1956｜达特茅斯会议</div>
      <p class="mt-2">首次提出人工智能（AI）名词，AI学科诞生。</p>
    </div>
    <!-- 卡片3 -->
    <div class="card-hover bg-cardBg p-5 rounded-lg border border-borderLine shadow" onclick="openModal('e3')">
      <div class="text-xl font-bold">2016｜AlphaGo击败李世石</div>
      <p class="mt-2">AI在围棋领域战胜人类顶尖棋手，深度学习出圈。</p>
    </div>
    <!-- 卡片4 -->
    <div class="card-hover bg-cardBg p-5 rounded-lg border border-borderLine shadow" onclick="openModal('e4')">
      <div class="text-xl font-bold">2022｜ChatGPT发布</div>
      <p class="mt-2">大语言模型爆发，生成式AI进入大众时代。</p>
    </div>
    <!-- 卡片5 -->
    <div class="card-hover bg-cardBg p-5 rounded-lg border border-borderLine shadow" onclick="openModal('e5')">
      <div class="text-xl font-bold">2023｜全民AI时代开启</div>
      <p class="mt-2">多模态AI普及，图文、视频生成全面落地。</p>
    </div>
    <!-- 卡片6 -->
    <div class="card-hover bg-cardBg p-5 rounded-lg border border-borderLine shadow" onclick="openModal('e6')">
      <div class="text-xl font-bold">2026｜AI深度融入各行各业</div>
      <p class="mt-2">AI成为学习、工作、创作的基础工具能力。</p>
    </div>
  </div>
</section>

<!-- 页面三：术语标本室 -->
<section id="page3" class="section pt-20 max-w-6xl mx-auto">
  <h2 class="text-3xl font-bold text-center mb-12">术语标本室 · 四大AI能力体系</h2>

  <h3 class="text-xl font-bold mt-6 mb-3">一、看懂脑（AI思考能力）</h3>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t1')">人工智能 AI</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t2')">机器学习 ML</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t3')">深度学习 DL</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t4')">大模型 LLM</div>
  </div>

  <h3 class="text-xl font-bold mt-8 mb-3">二、看懂嘴（AI语言能力）</h3>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t5')">自然语言处理 NLP</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t6')">文本生成</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t7')">对话交互</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t8')">语义理解</div>
  </div>

  <h3 class="text-xl font-bold mt-8 mb-3">三、看懂手（AI创作能力）</h3>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t9')">生成式AI AIGC</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t10')">图像生成</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t11')">视频生成</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t12')">音频生成</div>
  </div>

  <h3 class="text-xl font-bold mt-8 mb-3">四、看懂手脚（AI执行能力）</h3>
  <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t13')">计算机视觉 CV</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t14')">识别检测</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t15')">智能决策</div>
    <div class="card-hover bg-cardBg p-4 border border-borderLine rounded" onclick="openModal('t16')">自动化执行</div>
  </div>
</section>

<!-- 弹窗通用层 -->
<div id="modal" class="modal" onclick="closeModal(event)">
  <div class="bg-white p-6 max-w-lg w-full rounded-lg relative" onclick="event.stopPropagation()">
    <span class="absolute top-3 right-4 cursor-pointer text-xl" onclick="closeModal()">×</span>
    <div id="modal-content"></div>
  </div>
</div>

<script>
// 弹窗内容库
const data = {
  e1:{title:"1950 图灵测试",text:"图灵发表《计算机器与智能》，提出经典问题：机器能否思考？图灵测试成为最早的人工智能判断标准。"},
  e2:{title:"1956 达特茅斯会议",text:"约翰·麦卡锡正式提出「人工智能」术语，标志AI作为独立学科诞生。"},
  e3:{title:"2016 AlphaGo",text:"DeepMind的AlphaGo战胜九段棋手李世石，证明AI可以掌握复杂、直觉性人类智慧。"},
  e4:{title:"2022 ChatGPT 问世",text:"OpenAI发布ChatGPT，大语言模型出圈，普通人第一次可以自然对话使用AI。"},
  e5:{title:"2023 全民AI时代",text:"图文生成、AI绘画、AI剪辑普及，生成式AI全面进入学习与生活场景。"},
  e6:{title:"2026 AI普及落地",text:"AI从工具变成基础能力，深度辅助写作、设计、办公、学习、创作等领域。"},

  t1:{title:"人工智能 AI",text:"让机器模拟、延伸、拓展人类智能的技术科学，是所有智能技术的总称。"},
  t2:{title:"机器学习 ML",text:"让机器从数据中自动学习规律、无需人工逐条编程的AI核心技术。"},
  t3:{title:"深度学习 DL",text:"多层神经网络模拟人脑结构，是现代AI高精度、强能力的基础。"},
  t4:{title:"大模型 LLM",text:"海量数据训练的巨型神经网络，具备理解、总结、创作、推理等通用能力。"},

  t5:{title:"自然语言处理 NLP",text:"让机器听懂、读懂、会说人类语言，是AI对话、翻译、写作的基础。"},
  t6:{title:"文本生成",text:"AI自动产出通顺、逻辑完整的文字，如作文、文案、总结、故事等。"},
  t7:{title:"对话交互",text:"AI理解上下文，实现连续、自然、拟人式聊天沟通。"},
  t8:{title:"语义理解",text:"不止看懂字面，而是读懂意图、情绪、逻辑与深层含义。"},

  t9:{title:"生成式AI AIGC",text:"人工智能自动创造内容，包括文字、图片、音频、视频、代码等。"},
  t10:{title:"图像生成",text:"根据文字描述自动绘画、制图、修图、设计画面。"},
  t11:{title:"视频生成",text:"AI自动剪辑、生成、换景、配音、制作完整视频。"},
  t12:{title:"音频生成",text:"AI作曲、配音、音效、人声生成与变声。"},

  t13:{title:"计算机视觉 CV",text:"让机器看懂世界，识别图片、画面、物体、人脸、动作。"},
  t14:{title:"识别检测",text:"定位、分类、判断画面中的目标与状态。"},
  t15:{title:"智能决策",text:"AI根据信息自动分析、判断、给出最优方案。"},
  t16:{title:"自动化执行",text:"AI分析后直接完成任务，实现全流程智能自动工作。"}
}

function openModal(id){
  const d = data[id]
  document.getElementById("modal-content").innerHTML = `<h3 class="text-xl font-bold mb-3">${d.title}</h3><p class="text-gray-700">${d.text}</p>`
  document.getElementById("modal").classList.add("active")
}
function closeModal(e){
  if(!e || e.target.id==="modal") document.getElementById("modal").classList.remove("active")
}
</script>

</body>
</html>