\u89e3\u69cb MHA\uff1a\u70ba\u4ec0\u9ebc\u6211\u5011\u9700\u8981\u591a\u982d\u6ce8\u610f\u529b\uff1f<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap');\n body { font-family: 'Noto Sans TC', sans-serif; }\n .gradient-text {\n background: linear-gradient(to right, #60a5fa, #c084fc);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .attention-line {\n transition: all 0.5s ease;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-200\">\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ Icons\n const BrainIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z\"\/><path d=\"M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z\"\/><\/svg>;\n const UserIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>;\n const LayersIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"\/><polyline points=\"2 17 12 22 22 17\"\/><polyline points=\"2 12 12 17 22 12\"\/><\/svg>;\n const AlertIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\"\/><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\"\/><\/svg>;\n\n const App = () => {\n return (\n <div className=\"min-h-screen pb-20\">\n <Hero \/>\n <TheProblem \/>\n <InteractiveDemo \/>\n <TheSolution \/>\n <Footer \/>\n <\/div>\n );\n };\n\n const Hero = () => (\n <div className=\"relative overflow-hidden bg-slate-900 border-b border-slate-800\">\n <div className=\"max-w-4xl mx-auto px-6 py-20 text-center relative z-10\">\n <div className=\"inline-flex items-center justify-center p-2 bg-blue-500\/10 rounded-full mb-6\">\n <span className=\"text-blue-400 text-sm font-semibold tracking-wide px-3\">Transformer \u67b6\u69cb\u6838\u5fc3\u89e3\u5bc6<\/span>\n <\/div>\n <h1 className=\"text-4xl md:text-6xl font-bold mb-6 leading-tight\">\n \u4e0d\u8981\u628a\u96de\u86cb\u653e\u5728<br\/>\n <span className=\"gradient-text\">\u540c\u4e00\u500b Attention \u77e9\u9663\u88e1<\/span>\n <\/h1>\n <p className=\"text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed\">\n \u60f3\u50cf\u4e00\u4e0b\uff0c\u5982\u679c\u6211\u5011\u8981\u6c42\u4e00\u500b AI \u6a21\u578b\u53ea\u7528\u300c\u4e00\u96d9\u773c\u775b\u300d\u770b\u5b8c\u6240\u6709\u7684\u8a9e\u7fa9\u95dc\u806f\uff0c\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\uff1f\n \u9019\u5c31\u662f\u70ba\u4ec0\u9ebc\u6211\u5011\u9700\u8981 Multi-Head Attention (\u591a\u982d\u6ce8\u610f\u529b)\u3002\n <\/p>\n <\/div>\n {\/* Decorative background elements *\/}\n <div className=\"absolute top-0 left-0 w-full h-full overflow-hidden opacity-20 pointer-events-none\">\n <div className=\"absolute top-10 left-10 w-64 h-64 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl animate-blob\"><\/div>\n <div className=\"absolute top-10 right-10 w-64 h-64 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000\"><\/div>\n <\/div>\n <\/div>\n );\n\n const TheProblem = () => (\n <div className=\"max-w-4xl mx-auto px-6 py-20\">\n <h2 className=\"text-3xl font-bold mb-12 text-center\">\u55ae\u4e00 Attention \u7684\u56f0\u5883<\/h2>\n \n <div className=\"grid md:grid-cols-2 gap-8 items-center\">\n <div className=\"bg-slate-900\/50 p-8 rounded-2xl border border-red-500\/20 relative overflow-hidden group hover:border-red-500\/40 transition-colors\">\n <div className=\"absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity\">\n <AlertIcon \/>\n <\/div>\n <h3 className=\"text-xl font-bold text-red-400 mb-4 flex items-center gap-2\">\n <UserIcon \/>\n \u5168\u80fd\u5de5\u7a0b\u5e2b\u7684\u60b2\u5287\n <\/h3>\n <p className=\"text-slate-300 leading-relaxed mb-4\">\n \u60f3\u50cf\u4f60\u8b93\u4e00\u500b\u5de5\u7a0b\u5e2b\u65e2\u8981\u5beb\u5f8c\u7aef\u7a0b\u5f0f\u78bc\uff0c\u53c8\u8981\u756b\u7cbe\u7f8e\u7684 UI\uff0c\u9084\u8ca0\u8cac\u53bb\u8ac7\u767e\u842c\u7d1a\u7684\u5ba2\u6236\uff0c\u6700\u5f8c\u9084\u8981\u8ca0\u8cac\u4fee\u516c\u53f8\u7684\u5370\u8868\u6a5f\u3002\n <\/p>\n <p className=\"text-slate-400 text-sm italic border-l-2 border-red-500\/30 pl-4\">\n \u300c\u7d50\u679c\u5927\u6982\u7387\u662f\u4ec0\u9ebc\u90fd\u5e72\u4e0d\u597d\u3002\u6b0a\u91cd\u7684\u5206\u4f48\u6703\u8b8a\u5f97\u975e\u5e38\u5e73\u5eb8\uff0c\u6216\u8005\u76f4\u63a5\u8eba\u5e73\u3002\u300d\n <\/p>\n <\/div>\n\n <div className=\"space-y-6\">\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center shrink-0 text-slate-400 font-mono\">1<\/div>\n <div>\n <h4 className=\"font-bold text-lg mb-1\">\u7dad\u5ea6\u7684\u64e0\u58d3<\/h4>\n <p className=\"text-slate-400 text-sm\">\u5047\u8a2d\u8f38\u5165\u7dad\u5ea6\u662f 4096\u3002\u55ae\u4e00\u77e9\u9663\u88ab\u8feb\u5c07\u300c\u8a9e\u6cd5\u300d\u3001\u300c\u79d1\u6280\u8a9e\u5883\u300d\u3001\u300c\u7269\u7406\u8a9e\u5883\u300d\u5168\u90e8\u58d3\u7e2e\u5728\u540c\u4e00\u500b\u7a7a\u9593\u8655\u7406\u3002<\/p>\n <\/div>\n <\/div>\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center shrink-0 text-slate-400 font-mono\">2<\/div>\n <div>\n <h4 className=\"font-bold text-lg mb-1\">\u7279\u5fb5\u7684\u5e72\u64fe<\/h4>\n <p className=\"text-slate-400 text-sm\">\u5c31\u50cf\u300c\u860b\u679c\u300d\u9019\u500b\u8a5e\u3002\u5728\u55ae\u4e00\u7a7a\u9593\u88e1\uff0c\u5b83\u65e2\u8981\u9760\u8fd1\u300c\u624b\u6a5f\u300d\uff0c\u53c8\u8981\u9760\u8fd1\u300c\u725b\u9813\u300d\u3002\u9019\u5728\u6578\u5b78\u5e7e\u4f55\u4e0a\u662f\u975e\u5e38\u56f0\u96e3\u7684\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n\n \/\/ --- Interactive Demo Component ---\n const sentence = [\n { id: 0, text: \"\u860b\u679c\", type: \"subject\" },\n { id: 1, text: \"\u767c\u5e03\u4e86\", type: \"verb\" },\n { id: 2, text: \"\u65b0\u6b3e\", type: \"adj\" },\n { id: 3, text: \"\u624b\u6a5f\", type: \"object\" },\n { id: 4, text: \"\uff0c\", type: \"punct\" },\n { id: 5, text: \"\u5c31\u50cf\", type: \"conn\" },\n { id: 6, text: \"\u725b\u9813\", type: \"noun\" },\n { id: 7, text: \"\u767c\u73fe\", type: \"verb\" },\n { id: 8, text: \"\u842c\u6709\u5f15\u529b\", type: \"object\" },\n { id: 9, text: \"\u4e00\u6a23\", type: \"conn\" },\n { id: 10, text: \"\u3002\", type: \"punct\" }\n ];\n\n const heads = [\n {\n id: 'head1',\n name: 'Head 1: \u79d1\u6280\u8a9e\u5883\u5c08\u5bb6',\n color: 'text-blue-400',\n bgColor: 'bg-blue-500\/20',\n borderColor: 'border-blue-500',\n description: '\u5c08\u6ce8\u65bc\u6355\u6349\u300c\u860b\u679c\u300d\u4f5c\u70ba\u79d1\u6280\u516c\u53f8\u7684\u5c6c\u6027\uff0c\u5c0b\u627e\u7522\u54c1\u95dc\u806f\u3002',\n connections: [[0, 3], [0, 1], [3, 2]] \/\/ \u860b\u679c->\u624b\u6a5f, \u860b\u679c->\u767c\u5e03, \u624b\u6a5f->\u65b0\u6b3e\n },\n {\n id: 'head2',\n name: 'Head 2: \u8b6c\u55bb\u8207\u9577\u8ddd\u96e2\u4f9d\u8cf4',\n color: 'text-purple-400',\n bgColor: 'bg-purple-500\/20',\n borderColor: 'border-purple-500',\n description: '\u5ffd\u7565\u4e2d\u9593\u7684\u7d30\u7bc0\uff0c\u5c08\u6ce8\u65bc\u6355\u6349\u300c\u860b\u679c\u300d\u8207\u300c\u725b\u9813\u300d\u4e4b\u9593\u7684\u5be6\u9ad4\u5c0d\u6bd4\u95dc\u4fc2\u3002',\n connections: [[0, 6], [5, 9]] \/\/ \u860b\u679c->\u725b\u9813, \u5c31\u50cf->\u4e00\u6a23\n },\n {\n id: 'head3',\n name: 'Head 3: \u8a9e\u6cd5\u7d50\u69cb\u5206\u6790',\n color: 'text-emerald-400',\n bgColor: 'bg-emerald-500\/20',\n borderColor: 'border-emerald-500',\n description: '\u53ea\u95dc\u5fc3\u53e5\u5b50\u7d50\u69cb\uff1a\u4e3b\u8a5e\u914d\u52d5\u8a5e\uff0c\u52d5\u8a5e\u914d\u53d7\u8a5e\u3002',\n connections: [[0, 1], [1, 3], [6, 7], [7, 8]] \/\/ \u860b\u679c->\u767c\u5e03, \u767c\u5e03->\u624b\u6a5f, \u725b\u9813->\u767c\u73fe, \u767c\u73fe->\u842c\u6709\u5f15\u529b\n }\n ];\n\n const InteractiveDemo = () => {\n const [activeHead, setActiveHead] = useState(heads[0]);\n\n const getIntensity = (idx) => {\n \/\/ Check if this word is involved in any connection of the active head\n const isConnected = activeHead.connections.some(conn => conn.includes(idx));\n return isConnected ? 1 : 0.3;\n };\n\n const getConnectionLines = () => {\n \/\/ Simple SVG lines calculation would go here in a full app, \n \/\/ but for this simplified version we highlight relationships via opacity\/color\n return null;\n };\n\n return (\n <div className=\"bg-slate-900 border-y border-slate-800 py-20\">\n <div className=\"max-w-4xl mx-auto px-6\">\n <div className=\"text-center mb-10\">\n <h2 className=\"text-3xl font-bold mb-4\">\u4e92\u52d5\u6f14\u793a\uff1a\u591a\u982d\u6ce8\u610f\u529b\u5982\u4f55\u5206\u5de5\uff1f<\/h2>\n <p className=\"text-slate-400\">\u9ede\u64ca\u4e0b\u65b9\u7684\u4e0d\u540c\u300cHead\u300d\uff0c\u770b\u770b\u5b83\u5011\u5982\u4f55\u7406\u89e3\u540c\u4e00\u500b\u53e5\u5b50\u3002<\/p>\n <\/div>\n\n {\/* Head Selectors *\/}\n <div className=\"flex flex-wrap justify-center gap-4 mb-12\">\n {heads.map(head => (\n <button\n key={head.id}\n onClick={() => setActiveHead(head)}\n className={`px-6 py-3 rounded-xl border transition-all duration-300 flex items-center gap-2\n ${activeHead.id === head.id \n ? `${head.bgColor} ${head.borderColor} ${head.color} ring-2 ring-offset-2 ring-offset-slate-900 ring-${head.color.split('-')[1]}-500` \n : 'bg-slate-800 border-slate-700 text-slate-400 hover:bg-slate-700'\n }`}\n >\n <BrainIcon \/>\n <span className=\"font-bold\">{head.name.split(':')[0]}<\/span>\n <\/button>\n ))}\n <\/div>\n\n {\/* Visualization Area *\/}\n <div className=\"bg-slate-950 rounded-2xl p-8 border border-slate-800 shadow-2xl relative min-h-[300px] flex flex-col items-center justify-center\">\n \n {\/* Description of current head *\/}\n <div className={`absolute top-0 left-0 w-full p-4 text-center rounded-t-2xl text-sm font-medium tracking-wide ${activeHead.color} bg-slate-900\/50`}>\n {activeHead.description}\n <\/div>\n\n {\/* The Sentence *\/}\n <div className=\"flex flex-wrap justify-center gap-x-4 gap-y-8 mt-12 max-w-2xl relative\">\n {sentence.map((word, idx) => {\n const intensity = getIntensity(idx);\n const isHighlight = intensity === 1;\n \n return (\n <div \n key={idx} \n className={`relative transition-all duration-500 px-3 py-2 rounded-lg text-xl md:text-2xl font-serif\n ${isHighlight ? `${activeHead.bgColor} ${activeHead.color} scale-110 shadow-lg font-bold` : 'text-slate-600 bg-slate-900'}\n `}\n >\n {word.text}\n {\/* Simulate Connection Arcs (Simplified visuals) *\/}\n {activeHead.connections.map(([start, end], i) => {\n if (start === idx) {\n \/\/ This is a simplified way to show \"outgoing\" attention\n return (\n <div key={i} className={`absolute -bottom-2 left-1\/2 w-full h-1 rounded-full opacity-50 ${activeHead.color.replace('text', 'bg')}`}><\/div>\n )\n }\n return null;\n })}\n <\/div>\n );\n })}\n <\/div>\n\n <div className=\"mt-12 text-center text-xs text-slate-500\">\n * \u5be6\u969b\u6a21\u578b\u4e2d\uff0c\u9019\u4e9b\u662f\u900f\u904e\u77e9\u9663\u904b\u7b97 (Q, K, V) \u8a08\u7b97\u51fa\u7684 Attention Score \u6b0a\u91cd\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const TheSolution = () => (\n <div className=\"max-w-4xl mx-auto px-6 py-20\">\n <div className=\"grid md:grid-cols-2 gap-12 items-center\">\n <div>\n <div className=\"inline-flex items-center gap-2 text-purple-400 mb-4\">\n <LayersIcon \/>\n <span className=\"font-bold uppercase tracking-wider\">Solution<\/span>\n <\/div>\n <h2 className=\"text-3xl font-bold mb-6\">\u7279\u5fb5\u5b50\u7a7a\u9593\u7684\u5207\u5206<\/h2>\n <p className=\"text-slate-300 text-lg leading-relaxed mb-6\">\n \u9019\u5c31\u662f Multi-Head Attention \u7684\u7cbe\u9ad3\u3002\u6211\u5011\u628a 4096 \u7dad\u7684\u5411\u91cf\uff0c\u5207\u6210 32 \u500b Head\uff0c\u6bcf\u500b Head \u8655\u7406 128 \u7dad\u3002\n <\/p>\n <p className=\"text-slate-300 text-lg leading-relaxed mb-6\">\n \u9019\u4e0d\u50c5\u50c5\u662f\u7dad\u5ea6\u7684\u964d\u4f4e\uff0c\u9019\u662f<strong className=\"text-white\">\u5f37\u5236\u8b93\u6a21\u578b\u5728\u4e0d\u540c\u7684\u8a9e\u7fa9\u6295\u5f71\u7a7a\u9593\u88e1\u53bb\u5b78\u7fd2<\/strong>\u3002\n <\/p>\n <ul className=\"space-y-4\">\n {[\n \"Head 1 \u5c08\u6ce8\u65bc\u8a9e\u6cd5\u7d50\u69cb\",\n \"Head 2 \u5c08\u6ce8\u65bc\u7269\u7406\u8a9e\u5883\uff08\u860b\u679c-\u725b\u9813\uff09\",\n \"Head 3 \u5c08\u6ce8\u65bc\u79d1\u6280\u8a9e\u5883\uff08\u860b\u679c-\u624b\u6a5f\uff09\"\n ].map((item, i) => (\n <li key={i} className=\"flex items-center gap-3 text-slate-400\">\n <div className=\"w-2 h-2 bg-purple-500 rounded-full\"><\/div>\n {item}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n <div className=\"relative\">\n {\/* Abstract visual of stacked layers *\/}\n <div className=\"aspect-square relative perspective-1000\">\n <div className=\"absolute inset-0 bg-blue-500\/10 border border-blue-500\/30 rounded-xl transform rotate-6 scale-90 translate-y-4 backdrop-blur-sm z-10 flex items-center justify-center text-blue-300 font-mono text-sm\">\n Subspace: Syntax\n <\/div>\n <div className=\"absolute inset-0 bg-purple-500\/10 border border-purple-500\/30 rounded-xl transform -rotate-3 scale-95 translate-y-0 backdrop-blur-sm z-20 flex items-center justify-center text-purple-300 font-mono text-sm\">\n Subspace: Tech Context\n <\/div>\n <div className=\"absolute inset-0 bg-emerald-500\/10 border border-emerald-500\/30 rounded-xl transform rotate-0 scale-100 -translate-y-4 backdrop-blur-sm z-30 flex items-center justify-center text-emerald-300 font-mono text-sm shadow-xl\">\n Subspace: Physics Context\n <\/div>\n <\/div>\n <p className=\"text-center text-sm text-slate-500 mt-8\">\n \u5c31\u50cf\u6e96\u5099\u4e86 32 \u5f35\u900f\u660e\u81a0\u7247\uff0c\u4e00\u5f35\u756b\u4ea4\u901a\uff0c\u4e00\u5f35\u756b\u6c23\u5019\uff0c\u4e00\u5f35\u756b\u5730\u5f62\u3002\u758a\u52a0\u8d77\u4f86\u5c31\u662f\u5b8c\u6574\u7684\u4e16\u754c\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n );\n\n const Footer = () => (\n <footer className=\"border-t border-slate-800 bg-slate-900 py-12 text-center\">\n <p className=\"text-slate-500 mb-2\">\u89e3\u91cb\u9748\u611f\u4f86\u81ea\u65bc\u4e00\u6bb5\u95dc\u65bc Attention \u77e9\u9663\u7684\u7cbe\u5f69\u5c0d\u8a71<\/p>\n <p className=\"text-slate-600 text-sm\">\n Designed to explain AI simply.\n <\/p>\n <\/footer>\n );\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u89e3\u69cb MHA\uff1a\u70ba\u4ec0\u9ebc\u6211\u5011\u9700\u8981\u591a\u982d\u6ce8\u610f\u529b\uff1f<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"post_format":[],"class_list":["post-1003","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_edit_lock":"1765767509:1","_edit_last":"1","_aioseo_title":"#post_title #separator_sa #site_title","_aioseo_description":"#post_excerpt","_aioseo_keywords":"","_aioseo_og_title":"","_aioseo_og_description":"","_aioseo_og_article_section":"","_aioseo_og_article_tags":"","_aioseo_twitter_title":"","_aioseo_twitter_description":"","_oembed_2544c1d0cb3503ab4c4d558c3b3c8873":"","_oembed_time_2544c1d0cb3503ab4c4d558c3b3c8873":"","_oembed_99481806ecbe6ce4ee46f8588d320993":"","_oembed_db663acf973e82e6d9d80df71945dfb8":"","_oembed_16cdfab488f57db73586f4286af2704f":"","_wp_old_slug":"%e8%a7%a3%e6%a7%8b-mha%ef%bc%9a%e7%82%ba%e4%bb%80%e9%ba%bc%e6%88%91%e5%80%91%e9%9c%80%e8%a6%81%e5%a4%9a%e9%a0%ad%e6%b3%a8%e6%84%8f%e5%8a%9b%ef%bc%9f","_links":{"self":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts\/1003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/comments?post=1003"}],"version-history":[{"count":2,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts\/1003\/revisions"}],"predecessor-version":[{"id":1005,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts\/1003\/revisions\/1005"}],"wp:attachment":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/media?parent=1003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/categories?post=1003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/tags?post=1003"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/post_format?post=1003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1003,"date":"2025-12-15T02:57:25","date_gmt":"2025-12-15T02:57:25","guid":{"rendered":"https:\/\/ouyangminwei.com\/?p=1003"},"modified":"2025-12-15T02:57:53","modified_gmt":"2025-12-15T02:57:53","slug":"why_we_need_mha","status":"publish","type":"post","link":"https:\/\/ouyangminwei.com\/index.php\/2025\/12\/15\/why_we_need_mha\/","title":{"rendered":"\u89e3\u69cb MHA\uff1a\u70ba\u4ec0\u9ebc\u6211\u5011\u9700\u8981\u591a\u982d\u6ce8\u610f\u529b\uff1f"},"content":{"rendered":"\n\n\n\n \n \n \u89e3\u69cb MHA\uff1a\u70ba\u4ec0\u9ebc\u6211\u5011\u9700\u8981\u591a\u982d\u6ce8\u610f\u529b\uff1f<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@300;400;700&display=swap');\n body { font-family: 'Noto Sans TC', sans-serif; }\n .gradient-text {\n background: linear-gradient(to right, #60a5fa, #c084fc);\n -webkit-background-clip: text;\n -webkit-text-fill-color: transparent;\n }\n .attention-line {\n transition: all 0.5s ease;\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-950 text-slate-200\">\n <div id=\"root\"><\/div>\n\n <script type=\"text\/babel\">\n const { useState, useEffect } = React;\n\n \/\/ Icons\n const BrainIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z\"\/><path d=\"M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z\"\/><\/svg>;\n const UserIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>;\n const LayersIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polygon points=\"12 2 2 7 12 12 22 7 12 2\"\/><polyline points=\"2 17 12 22 22 17\"\/><polyline points=\"2 12 12 17 22 12\"\/><\/svg>;\n const AlertIcon = () => <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><line x1=\"12\" x2=\"12\" y1=\"8\" y2=\"12\"\/><line x1=\"12\" x2=\"12.01\" y1=\"16\" y2=\"16\"\/><\/svg>;\n\n const App = () => {\n return (\n <div className=\"min-h-screen pb-20\">\n <Hero \/>\n <TheProblem \/>\n <InteractiveDemo \/>\n <TheSolution \/>\n <Footer \/>\n <\/div>\n );\n };\n\n const Hero = () => (\n <div className=\"relative overflow-hidden bg-slate-900 border-b border-slate-800\">\n <div className=\"max-w-4xl mx-auto px-6 py-20 text-center relative z-10\">\n <div className=\"inline-flex items-center justify-center p-2 bg-blue-500\/10 rounded-full mb-6\">\n <span className=\"text-blue-400 text-sm font-semibold tracking-wide px-3\">Transformer \u67b6\u69cb\u6838\u5fc3\u89e3\u5bc6<\/span>\n <\/div>\n <h1 className=\"text-4xl md:text-6xl font-bold mb-6 leading-tight\">\n \u4e0d\u8981\u628a\u96de\u86cb\u653e\u5728<br\/>\n <span className=\"gradient-text\">\u540c\u4e00\u500b Attention \u77e9\u9663\u88e1<\/span>\n <\/h1>\n <p className=\"text-xl text-slate-400 max-w-2xl mx-auto leading-relaxed\">\n \u60f3\u50cf\u4e00\u4e0b\uff0c\u5982\u679c\u6211\u5011\u8981\u6c42\u4e00\u500b AI \u6a21\u578b\u53ea\u7528\u300c\u4e00\u96d9\u773c\u775b\u300d\u770b\u5b8c\u6240\u6709\u7684\u8a9e\u7fa9\u95dc\u806f\uff0c\u6703\u767c\u751f\u4ec0\u9ebc\u4e8b\uff1f\n \u9019\u5c31\u662f\u70ba\u4ec0\u9ebc\u6211\u5011\u9700\u8981 Multi-Head Attention (\u591a\u982d\u6ce8\u610f\u529b)\u3002\n <\/p>\n <\/div>\n {\/* Decorative background elements *\/}\n <div className=\"absolute top-0 left-0 w-full h-full overflow-hidden opacity-20 pointer-events-none\">\n <div className=\"absolute top-10 left-10 w-64 h-64 bg-blue-600 rounded-full mix-blend-multiply filter blur-3xl animate-blob\"><\/div>\n <div className=\"absolute top-10 right-10 w-64 h-64 bg-purple-600 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000\"><\/div>\n <\/div>\n <\/div>\n );\n\n const TheProblem = () => (\n <div className=\"max-w-4xl mx-auto px-6 py-20\">\n <h2 className=\"text-3xl font-bold mb-12 text-center\">\u55ae\u4e00 Attention \u7684\u56f0\u5883<\/h2>\n \n <div className=\"grid md:grid-cols-2 gap-8 items-center\">\n <div className=\"bg-slate-900\/50 p-8 rounded-2xl border border-red-500\/20 relative overflow-hidden group hover:border-red-500\/40 transition-colors\">\n <div className=\"absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity\">\n <AlertIcon \/>\n <\/div>\n <h3 className=\"text-xl font-bold text-red-400 mb-4 flex items-center gap-2\">\n <UserIcon \/>\n \u5168\u80fd\u5de5\u7a0b\u5e2b\u7684\u60b2\u5287\n <\/h3>\n <p className=\"text-slate-300 leading-relaxed mb-4\">\n \u60f3\u50cf\u4f60\u8b93\u4e00\u500b\u5de5\u7a0b\u5e2b\u65e2\u8981\u5beb\u5f8c\u7aef\u7a0b\u5f0f\u78bc\uff0c\u53c8\u8981\u756b\u7cbe\u7f8e\u7684 UI\uff0c\u9084\u8ca0\u8cac\u53bb\u8ac7\u767e\u842c\u7d1a\u7684\u5ba2\u6236\uff0c\u6700\u5f8c\u9084\u8981\u8ca0\u8cac\u4fee\u516c\u53f8\u7684\u5370\u8868\u6a5f\u3002\n <\/p>\n <p className=\"text-slate-400 text-sm italic border-l-2 border-red-500\/30 pl-4\">\n \u300c\u7d50\u679c\u5927\u6982\u7387\u662f\u4ec0\u9ebc\u90fd\u5e72\u4e0d\u597d\u3002\u6b0a\u91cd\u7684\u5206\u4f48\u6703\u8b8a\u5f97\u975e\u5e38\u5e73\u5eb8\uff0c\u6216\u8005\u76f4\u63a5\u8eba\u5e73\u3002\u300d\n <\/p>\n <\/div>\n\n <div className=\"space-y-6\">\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center shrink-0 text-slate-400 font-mono\">1<\/div>\n <div>\n <h4 className=\"font-bold text-lg mb-1\">\u7dad\u5ea6\u7684\u64e0\u58d3<\/h4>\n <p className=\"text-slate-400 text-sm\">\u5047\u8a2d\u8f38\u5165\u7dad\u5ea6\u662f 4096\u3002\u55ae\u4e00\u77e9\u9663\u88ab\u8feb\u5c07\u300c\u8a9e\u6cd5\u300d\u3001\u300c\u79d1\u6280\u8a9e\u5883\u300d\u3001\u300c\u7269\u7406\u8a9e\u5883\u300d\u5168\u90e8\u58d3\u7e2e\u5728\u540c\u4e00\u500b\u7a7a\u9593\u8655\u7406\u3002<\/p>\n <\/div>\n <\/div>\n <div className=\"flex gap-4\">\n <div className=\"w-12 h-12 rounded-full bg-slate-800 flex items-center justify-center shrink-0 text-slate-400 font-mono\">2<\/div>\n <div>\n <h4 className=\"font-bold text-lg mb-1\">\u7279\u5fb5\u7684\u5e72\u64fe<\/h4>\n <p className=\"text-slate-400 text-sm\">\u5c31\u50cf\u300c\u860b\u679c\u300d\u9019\u500b\u8a5e\u3002\u5728\u55ae\u4e00\u7a7a\u9593\u88e1\uff0c\u5b83\u65e2\u8981\u9760\u8fd1\u300c\u624b\u6a5f\u300d\uff0c\u53c8\u8981\u9760\u8fd1\u300c\u725b\u9813\u300d\u3002\u9019\u5728\u6578\u5b78\u5e7e\u4f55\u4e0a\u662f\u975e\u5e38\u56f0\u96e3\u7684\u3002<\/p>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n\n \/\/ --- Interactive Demo Component ---\n const sentence = [\n { id: 0, text: \"\u860b\u679c\", type: \"subject\" },\n { id: 1, text: \"\u767c\u5e03\u4e86\", type: \"verb\" },\n { id: 2, text: \"\u65b0\u6b3e\", type: \"adj\" },\n { id: 3, text: \"\u624b\u6a5f\", type: \"object\" },\n { id: 4, text: \"\uff0c\", type: \"punct\" },\n { id: 5, text: \"\u5c31\u50cf\", type: \"conn\" },\n { id: 6, text: \"\u725b\u9813\", type: \"noun\" },\n { id: 7, text: \"\u767c\u73fe\", type: \"verb\" },\n { id: 8, text: \"\u842c\u6709\u5f15\u529b\", type: \"object\" },\n { id: 9, text: \"\u4e00\u6a23\", type: \"conn\" },\n { id: 10, text: \"\u3002\", type: \"punct\" }\n ];\n\n const heads = [\n {\n id: 'head1',\n name: 'Head 1: \u79d1\u6280\u8a9e\u5883\u5c08\u5bb6',\n color: 'text-blue-400',\n bgColor: 'bg-blue-500\/20',\n borderColor: 'border-blue-500',\n description: '\u5c08\u6ce8\u65bc\u6355\u6349\u300c\u860b\u679c\u300d\u4f5c\u70ba\u79d1\u6280\u516c\u53f8\u7684\u5c6c\u6027\uff0c\u5c0b\u627e\u7522\u54c1\u95dc\u806f\u3002',\n connections: [[0, 3], [0, 1], [3, 2]] \/\/ \u860b\u679c->\u624b\u6a5f, \u860b\u679c->\u767c\u5e03, \u624b\u6a5f->\u65b0\u6b3e\n },\n {\n id: 'head2',\n name: 'Head 2: \u8b6c\u55bb\u8207\u9577\u8ddd\u96e2\u4f9d\u8cf4',\n color: 'text-purple-400',\n bgColor: 'bg-purple-500\/20',\n borderColor: 'border-purple-500',\n description: '\u5ffd\u7565\u4e2d\u9593\u7684\u7d30\u7bc0\uff0c\u5c08\u6ce8\u65bc\u6355\u6349\u300c\u860b\u679c\u300d\u8207\u300c\u725b\u9813\u300d\u4e4b\u9593\u7684\u5be6\u9ad4\u5c0d\u6bd4\u95dc\u4fc2\u3002',\n connections: [[0, 6], [5, 9]] \/\/ \u860b\u679c->\u725b\u9813, \u5c31\u50cf->\u4e00\u6a23\n },\n {\n id: 'head3',\n name: 'Head 3: \u8a9e\u6cd5\u7d50\u69cb\u5206\u6790',\n color: 'text-emerald-400',\n bgColor: 'bg-emerald-500\/20',\n borderColor: 'border-emerald-500',\n description: '\u53ea\u95dc\u5fc3\u53e5\u5b50\u7d50\u69cb\uff1a\u4e3b\u8a5e\u914d\u52d5\u8a5e\uff0c\u52d5\u8a5e\u914d\u53d7\u8a5e\u3002',\n connections: [[0, 1], [1, 3], [6, 7], [7, 8]] \/\/ \u860b\u679c->\u767c\u5e03, \u767c\u5e03->\u624b\u6a5f, \u725b\u9813->\u767c\u73fe, \u767c\u73fe->\u842c\u6709\u5f15\u529b\n }\n ];\n\n const InteractiveDemo = () => {\n const [activeHead, setActiveHead] = useState(heads[0]);\n\n const getIntensity = (idx) => {\n \/\/ Check if this word is involved in any connection of the active head\n const isConnected = activeHead.connections.some(conn => conn.includes(idx));\n return isConnected ? 1 : 0.3;\n };\n\n const getConnectionLines = () => {\n \/\/ Simple SVG lines calculation would go here in a full app, \n \/\/ but for this simplified version we highlight relationships via opacity\/color\n return null;\n };\n\n return (\n <div className=\"bg-slate-900 border-y border-slate-800 py-20\">\n <div className=\"max-w-4xl mx-auto px-6\">\n <div className=\"text-center mb-10\">\n <h2 className=\"text-3xl font-bold mb-4\">\u4e92\u52d5\u6f14\u793a\uff1a\u591a\u982d\u6ce8\u610f\u529b\u5982\u4f55\u5206\u5de5\uff1f<\/h2>\n <p className=\"text-slate-400\">\u9ede\u64ca\u4e0b\u65b9\u7684\u4e0d\u540c\u300cHead\u300d\uff0c\u770b\u770b\u5b83\u5011\u5982\u4f55\u7406\u89e3\u540c\u4e00\u500b\u53e5\u5b50\u3002<\/p>\n <\/div>\n\n {\/* Head Selectors *\/}\n <div className=\"flex flex-wrap justify-center gap-4 mb-12\">\n {heads.map(head => (\n <button\n key={head.id}\n onClick={() => setActiveHead(head)}\n className={`px-6 py-3 rounded-xl border transition-all duration-300 flex items-center gap-2\n ${activeHead.id === head.id \n ? `${head.bgColor} ${head.borderColor} ${head.color} ring-2 ring-offset-2 ring-offset-slate-900 ring-${head.color.split('-')[1]}-500` \n : 'bg-slate-800 border-slate-700 text-slate-400 hover:bg-slate-700'\n }`}\n >\n <BrainIcon \/>\n <span className=\"font-bold\">{head.name.split(':')[0]}<\/span>\n <\/button>\n ))}\n <\/div>\n\n {\/* Visualization Area *\/}\n <div className=\"bg-slate-950 rounded-2xl p-8 border border-slate-800 shadow-2xl relative min-h-[300px] flex flex-col items-center justify-center\">\n \n {\/* Description of current head *\/}\n <div className={`absolute top-0 left-0 w-full p-4 text-center rounded-t-2xl text-sm font-medium tracking-wide ${activeHead.color} bg-slate-900\/50`}>\n {activeHead.description}\n <\/div>\n\n {\/* The Sentence *\/}\n <div className=\"flex flex-wrap justify-center gap-x-4 gap-y-8 mt-12 max-w-2xl relative\">\n {sentence.map((word, idx) => {\n const intensity = getIntensity(idx);\n const isHighlight = intensity === 1;\n \n return (\n <div \n key={idx} \n className={`relative transition-all duration-500 px-3 py-2 rounded-lg text-xl md:text-2xl font-serif\n ${isHighlight ? `${activeHead.bgColor} ${activeHead.color} scale-110 shadow-lg font-bold` : 'text-slate-600 bg-slate-900'}\n `}\n >\n {word.text}\n {\/* Simulate Connection Arcs (Simplified visuals) *\/}\n {activeHead.connections.map(([start, end], i) => {\n if (start === idx) {\n \/\/ This is a simplified way to show \"outgoing\" attention\n return (\n <div key={i} className={`absolute -bottom-2 left-1\/2 w-full h-1 rounded-full opacity-50 ${activeHead.color.replace('text', 'bg')}`}><\/div>\n )\n }\n return null;\n })}\n <\/div>\n );\n })}\n <\/div>\n\n <div className=\"mt-12 text-center text-xs text-slate-500\">\n * \u5be6\u969b\u6a21\u578b\u4e2d\uff0c\u9019\u4e9b\u662f\u900f\u904e\u77e9\u9663\u904b\u7b97 (Q, K, V) \u8a08\u7b97\u51fa\u7684 Attention Score \u6b0a\u91cd\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n );\n };\n\n const TheSolution = () => (\n <div className=\"max-w-4xl mx-auto px-6 py-20\">\n <div className=\"grid md:grid-cols-2 gap-12 items-center\">\n <div>\n <div className=\"inline-flex items-center gap-2 text-purple-400 mb-4\">\n <LayersIcon \/>\n <span className=\"font-bold uppercase tracking-wider\">Solution<\/span>\n <\/div>\n <h2 className=\"text-3xl font-bold mb-6\">\u7279\u5fb5\u5b50\u7a7a\u9593\u7684\u5207\u5206<\/h2>\n <p className=\"text-slate-300 text-lg leading-relaxed mb-6\">\n \u9019\u5c31\u662f Multi-Head Attention \u7684\u7cbe\u9ad3\u3002\u6211\u5011\u628a 4096 \u7dad\u7684\u5411\u91cf\uff0c\u5207\u6210 32 \u500b Head\uff0c\u6bcf\u500b Head \u8655\u7406 128 \u7dad\u3002\n <\/p>\n <p className=\"text-slate-300 text-lg leading-relaxed mb-6\">\n \u9019\u4e0d\u50c5\u50c5\u662f\u7dad\u5ea6\u7684\u964d\u4f4e\uff0c\u9019\u662f<strong className=\"text-white\">\u5f37\u5236\u8b93\u6a21\u578b\u5728\u4e0d\u540c\u7684\u8a9e\u7fa9\u6295\u5f71\u7a7a\u9593\u88e1\u53bb\u5b78\u7fd2<\/strong>\u3002\n <\/p>\n <ul className=\"space-y-4\">\n {[\n \"Head 1 \u5c08\u6ce8\u65bc\u8a9e\u6cd5\u7d50\u69cb\",\n \"Head 2 \u5c08\u6ce8\u65bc\u7269\u7406\u8a9e\u5883\uff08\u860b\u679c-\u725b\u9813\uff09\",\n \"Head 3 \u5c08\u6ce8\u65bc\u79d1\u6280\u8a9e\u5883\uff08\u860b\u679c-\u624b\u6a5f\uff09\"\n ].map((item, i) => (\n <li key={i} className=\"flex items-center gap-3 text-slate-400\">\n <div className=\"w-2 h-2 bg-purple-500 rounded-full\"><\/div>\n {item}\n <\/li>\n ))}\n <\/ul>\n <\/div>\n <div className=\"relative\">\n {\/* Abstract visual of stacked layers *\/}\n <div className=\"aspect-square relative perspective-1000\">\n <div className=\"absolute inset-0 bg-blue-500\/10 border border-blue-500\/30 rounded-xl transform rotate-6 scale-90 translate-y-4 backdrop-blur-sm z-10 flex items-center justify-center text-blue-300 font-mono text-sm\">\n Subspace: Syntax\n <\/div>\n <div className=\"absolute inset-0 bg-purple-500\/10 border border-purple-500\/30 rounded-xl transform -rotate-3 scale-95 translate-y-0 backdrop-blur-sm z-20 flex items-center justify-center text-purple-300 font-mono text-sm\">\n Subspace: Tech Context\n <\/div>\n <div className=\"absolute inset-0 bg-emerald-500\/10 border border-emerald-500\/30 rounded-xl transform rotate-0 scale-100 -translate-y-4 backdrop-blur-sm z-30 flex items-center justify-center text-emerald-300 font-mono text-sm shadow-xl\">\n Subspace: Physics Context\n <\/div>\n <\/div>\n <p className=\"text-center text-sm text-slate-500 mt-8\">\n \u5c31\u50cf\u6e96\u5099\u4e86 32 \u5f35\u900f\u660e\u81a0\u7247\uff0c\u4e00\u5f35\u756b\u4ea4\u901a\uff0c\u4e00\u5f35\u756b\u6c23\u5019\uff0c\u4e00\u5f35\u756b\u5730\u5f62\u3002\u758a\u52a0\u8d77\u4f86\u5c31\u662f\u5b8c\u6574\u7684\u4e16\u754c\u3002\n <\/p>\n <\/div>\n <\/div>\n <\/div>\n );\n\n const Footer = () => (\n <footer className=\"border-t border-slate-800 bg-slate-900 py-12 text-center\">\n <p className=\"text-slate-500 mb-2\">\u89e3\u91cb\u9748\u611f\u4f86\u81ea\u65bc\u4e00\u6bb5\u95dc\u65bc Attention \u77e9\u9663\u7684\u7cbe\u5f69\u5c0d\u8a71<\/p>\n <p className=\"text-slate-600 text-sm\">\n Designed to explain AI simply.\n <\/p>\n <\/footer>\n );\n\n const root = ReactDOM.createRoot(document.getElementById('root'));\n root.render(<App \/>);\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u89e3\u69cb MHA\uff1a\u70ba\u4ec0\u9ebc\u6211\u5011\u9700\u8981\u591a\u982d\u6ce8\u610f\u529b\uff1f<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1],"tags":[],"post_format":[],"class_list":["post-1003","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_edit_lock":"1765767509:1","_edit_last":"1","_aioseo_title":"#post_title #separator_sa #site_title","_aioseo_description":"#post_excerpt","_aioseo_keywords":"","_aioseo_og_title":"","_aioseo_og_description":"","_aioseo_og_article_section":"","_aioseo_og_article_tags":"","_aioseo_twitter_title":"","_aioseo_twitter_description":"","_oembed_2544c1d0cb3503ab4c4d558c3b3c8873":"","_oembed_time_2544c1d0cb3503ab4c4d558c3b3c8873":"","_oembed_99481806ecbe6ce4ee46f8588d320993":"","_oembed_db663acf973e82e6d9d80df71945dfb8":"","_oembed_16cdfab488f57db73586f4286af2704f":"","_wp_old_slug":"%e8%a7%a3%e6%a7%8b-mha%ef%bc%9a%e7%82%ba%e4%bb%80%e9%ba%bc%e6%88%91%e5%80%91%e9%9c%80%e8%a6%81%e5%a4%9a%e9%a0%ad%e6%b3%a8%e6%84%8f%e5%8a%9b%ef%bc%9f","_links":{"self":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts\/1003","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/comments?post=1003"}],"version-history":[{"count":2,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts\/1003\/revisions"}],"predecessor-version":[{"id":1005,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts\/1003\/revisions\/1005"}],"wp:attachment":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/media?parent=1003"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/categories?post=1003"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/tags?post=1003"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/post_format?post=1003"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}