{"id":876,"date":"2025-07-29T01:21:00","date_gmt":"2025-07-29T01:21:00","guid":{"rendered":"https:\/\/ouyangminwei.com\/?p=876"},"modified":"2025-07-18T09:22:10","modified_gmt":"2025-07-18T09:22:10","slug":"the-evolution-of-large-language-model-architectures","status":"publish","type":"post","link":"https:\/\/ouyangminwei.com\/index.php\/2025\/07\/29\/the-evolution-of-large-language-model-architectures\/","title":{"rendered":"\u5927\u578b\u8a9e\u8a00\u6a21\u578b\u67b6\u69cb\u6f14\u9032\u53f2"},"content":{"rendered":"\n\n\n\n \n \n \u5927\u578b\u8a9e\u8a00\u6a21\u578b\u67b6\u69cb\u6f14\u9032\u53f2<\/title>\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js\"><\/script>\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+TC:wght@400;500;700&display=swap\" rel=\"stylesheet\">\n <!-- Chosen Palette: Warm Neutrals -->\n <!-- Application Structure Plan: The application is designed as a single-page, chronological narrative to tell the story of LLM evolution. It starts with an introduction, then flows through three historical eras, each dedicated to an architecture: Encoder-Decoder, Decoder-Only, and Encoder-Only. This linear, story-like structure is intuitive for understanding historical progression. The final section is a powerful, interactive \"Grand Comparison\" dashboard. Here, users can break from the linear narrative and directly compare the architectures side-by-side using filter buttons and a summary chart. This dual structure (narrative + interactive dashboard) caters to both users who want a guided story and those who want to perform a direct, analytical comparison, making the complex information highly accessible and usable. -->\n <!-- Visualization & Content Choices:\n - Report Info: Historical evolution of LLMs. -> Goal: Tell a story. -> Viz\/Presentation: Interactive timeline\/cards for each era. -> Interaction: Clicking on a model reveals details. -> Justification: Breaks down dense history into digestible, user-driven chunks. -> Library\/Method: HTML\/CSS\/JS.\n - Report Info: Architectural diagrams. -> Goal: Explain data flow. -> Viz\/Presentation: Simple block diagrams. -> Interaction: Static. -> Justification: Clear, lightweight, and avoids forbidden SVG\/Mermaid. -> Library\/Method: HTML\/Tailwind.\n - Report Info: In-depth comparison of architectures. -> Goal: Compare and contrast. -> Viz\/Presentation: Three-column layout with filter buttons and a bar chart. -> Interaction: Buttons dynamically update text content in all three columns; chart provides a high-level visual summary. -> Justification: Allows users to focus on specific comparison points (strengths, weaknesses) across all architectures simultaneously, which is highly effective for learning. The chart offers a quick visual takeaway. -> Library\/Method: HTML\/Tailwind for layout, JS for filtering, Chart.js for visualization.\n -->\n <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. -->\n <style>\n body {\n font-family: 'Noto Sans TC', sans-serif;\n background-color: #FDFBF8;\n color: #4A4A4A;\n }\n .bg-warm-neutral { background-color: #FDFBF8; }\n .bg-warm-secondary { background-color: #F4EFEA; }\n .text-warm-heading { color: #3D3D3D; }\n .text-warm-body { color: #5A5A5A; }\n .accent-color { color: #4A90E2; }\n .accent-bg { background-color: #4A90E2; }\n .accent-border { border-color: #4A90E2; }\n .nav-link {\n transition: color 0.3s, border-bottom-color 0.3s;\n border-bottom: 2px solid transparent;\n }\n .nav-link:hover, .nav-link.active {\n color: #4A90E2;\n border-bottom-color: #4A90E2;\n }\n .card {\n background-color: white;\n border-radius: 12px;\n box-shadow: 0 4px 15px rgba(0,0,0,0.05);\n transition: transform 0.3s, box-shadow 0.3s;\n }\n .card:hover {\n transform: translateY(-5px);\n box-shadow: 0 8px 25px rgba(0,0,0,0.1);\n }\n .btn-filter {\n transition: background-color 0.3s, color 0.3s;\n }\n .btn-filter.active {\n background-color: #4A90E2;\n color: white;\n }\n .architecture-diagram {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1rem;\n border-radius: 8px;\n background-color: #F4EFEA;\n border: 1px dashed #D1C7BC;\n }\n .arch-box {\n background-color: white;\n border: 1px solid #D1C7BC;\n padding: 0.5rem 1rem;\n border-radius: 6px;\n text-align: center;\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\n }\n .arch-arrow {\n font-size: 1.5rem;\n color: #4A90E2;\n margin: 0 1rem;\n }\n .chart-container {\n position: relative;\n width: 100%;\n max-width: 800px;\n margin-left: auto;\n margin-right: auto;\n height: 350px;\n max-height: 40vh;\n }\n section {\n padding-top: 4rem;\n padding-bottom: 4rem;\n }\n <\/style>\n<\/head>\n<body class=\"bg-warm-neutral\">\n\n <header id=\"header\" class=\"bg-warm-neutral\/80 backdrop-blur-sm sticky top-0 z-50 shadow-sm\">\n <nav class=\"container mx-auto px-6 py-4 flex justify-between items-center\">\n <h1 class=\"text-xl font-bold text-warm-heading\">LLM \u67b6\u69cb\u6f14\u9032\u53f2<\/h1>\n <div class=\"hidden md:flex space-x-8\">\n <a href=\"#era-encoder-decoder\" class=\"nav-link\">\u958b\u7aef\uff1aEncoder-Decoder<\/a>\n <a href=\"#era-decoder-only\" class=\"nav-link\">\u8208\u76db\uff1aDecoder-Only<\/a>\n <a href=\"#era-encoder-only\" class=\"nav-link\">\u5c08\u7cbe\uff1aEncoder-Only<\/a>\n <a href=\"#comparison\" class=\"nav-link\">\u7d42\u5c40\uff1a\u4e09\u5f37\u9f0e\u7acb<\/a>\n <\/div>\n <button id=\"mobile-menu-button\" class=\"md:hidden text-warm-heading\">\n <svg class=\"w-6 h-6\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h16m-7 6h7\"><\/path><\/svg>\n <\/button>\n <\/nav>\n <div id=\"mobile-menu\" class=\"hidden md:hidden px-6 pb-4\">\n <a href=\"#era-encoder-decoder\" class=\"block py-2 nav-link text-center\">\u958b\u7aef\uff1aEncoder-Decoder<\/a>\n <a href=\"#era-decoder-only\" class=\"block py-2 nav-link text-center\">\u8208\u76db\uff1aDecoder-Only<\/a>\n <a href=\"#era-encoder-only\" class=\"block py-2 nav-link text-center\">\u5c08\u7cbe\uff1aEncoder-Only<\/a>\n <a href=\"#comparison\" class=\"block py-2 nav-link text-center\">\u7d42\u5c40\uff1a\u4e09\u5f37\u9f0e\u7acb<\/a>\n <\/div>\n <\/header>\n\n <main class=\"container mx-auto px-6\">\n <section id=\"intro\" class=\"text-center py-16\">\n <h2 class=\"text-4xl md:text-5xl font-bold text-warm-heading mb-4\">\u4e00\u5834\u6539\u8b8a\u4e16\u754c\u7684\u67b6\u69cb\u9769\u547d<\/h2>\n <p class=\"max-w-3xl mx-auto text-lg text-warm-body\">\n \u5f9e\u7406\u89e3\u5230\u751f\u6210\uff0c\u5927\u578b\u8a9e\u8a00\u6a21\u578b\u7684\u6f14\u9032\u662f\u4e00\u90e8\u7cbe\u5f69\u7684\u53f2\u8a69\u3002\u9019\u5834\u9769\u547d\u59cb\u65bc 2017 \u5e74\u4e00\u7bc7\u540d\u70ba\u300aAttention Is All You Need\u300b\u7684\u8ad6\u6587\uff0c\u5b83\u63d0\u51fa\u7684 Transformer \u67b6\u69cb\uff0c\u5982\u540c\u4e00\u584a\u5275\u4e16\u57fa\u77f3\uff0c\u884d\u751f\u51fa\u4e09\u5927\u5bb6\u65cf\uff1aEncoder-Decoder\u3001Decoder-Only \u8207 Encoder-Only\u3002\u672c\u7bc7\u5c07\u5e36\u60a8\u7a7f\u8d8a\u6642\u7a7a\uff0c\u898b\u8b49\u6bcf\u500b\u6642\u4ee3\u738b\u8005\u7684\u5d1b\u8d77\uff0c\u4e26\u6df1\u5165\u5256\u6790\u4e09\u7a2e\u67b6\u69cb\u7684\u5967\u79d8\u8207\u5929\u8ce6\u3002\n <\/p>\n <\/section>\n\n <div class=\"border-t border-gray-200\"><\/div>\n\n <section id=\"era-encoder-decoder\">\n <header class=\"text-center mb-12\">\n <h3 class=\"text-3xl font-bold text-warm-heading\">\u6642\u4ee3\u7684\u958b\u7aef\uff1aEncoder-Decoder \u67b6\u69cb<\/h3>\n <p class=\"max-w-2xl mx-auto mt-4 text-warm-body\">\n \u9019\u662f\u6545\u4e8b\u7684\u8d77\u9ede\u3002\u539f\u59cb\u7684 Transformer \u6a21\u578b\u63a1\u7528 Encoder-Decoder \u67b6\u69cb\uff0c\u5982\u540c\u4e00\u500b\u7cbe\u901a\u96d9\u8a9e\u7684\u7ffb\u8b6f\u5b98\u3002Encoder \u8ca0\u8cac\u6df1\u5165\u300c\u95b1\u8b80\u300d\u4e26\u7406\u89e3\u8f38\u5165\u7684\u5168\u6587\uff0c\u5c07\u5176\u7cbe\u9ad3\u58d3\u7e2e\u6210\u4e00\u500b\u5bcc\u542b\u8a9e\u7fa9\u7684\u5411\u91cf\uff1bDecoder \u5247\u57fa\u65bc\u9019\u500b\u5411\u91cf\uff0c\u9010\u5b57\u300c\u5beb\u300d\u51fa\u76ee\u6a19\u8f38\u51fa\u3002\u9019\u500b\u300c\u5148\u7406\u89e3\uff0c\u5f8c\u751f\u6210\u300d\u7684\u6a21\u5f0f\uff0c\u70ba\u6a5f\u5668\u7ffb\u8b6f\u7b49\u5e8f\u5217\u5230\u5e8f\u5217\uff08Seq2Seq\uff09\u4efb\u52d9\u5e36\u4f86\u4e86\u9769\u547d\u6027\u7684\u7a81\u7834\u3002\n <\/p>\n <\/header>\n \n <div class=\"architecture-diagram mb-12\">\n <div class=\"arch-box\">\u8f38\u5165\u5e8f\u5217<\/div>\n <div class=\"arch-arrow\">\u2192<\/div>\n <div class=\"arch-box\">Encoder (\u7406\u89e3)<\/div>\n <div class=\"arch-arrow\">\u2192<\/div>\n <div class=\"arch-box\">\u8a9e\u7fa9\u5411\u91cf<\/div>\n <div class=\"arch-arrow\">\u2192<\/div>\n <div class=\"arch-box\">Decoder (\u751f\u6210)<\/div>\n <div class=\"arch-arrow\">\u2192<\/div>\n <div class=\"arch-box\">\u8f38\u51fa\u5e8f\u5217<\/div>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\" id=\"encoder-decoder-models\"><\/div>\n <\/section>\n\n <div class=\"border-t border-gray-200\"><\/div>\n\n <section id=\"era-decoder-only\" class=\"bg-warm-secondary -mx-6 px-6\">\n <header class=\"text-center mb-12\">\n <h3 class=\"text-3xl font-bold text-warm-heading\">\u5de8\u4eba\u7684\u8208\u76db\uff1aDecoder-Only \u67b6\u69cb<\/h3>\n <p class=\"max-w-2xl mx-auto mt-4 text-warm-body\">\n \u7576\u4eba\u5011\u610f\u8b58\u5230\u53ea\u9700\u8981 Transformer \u7684\u300c\u751f\u6210\u300d\u90e8\u5206\u5c31\u80fd\u5275\u9020\u9a5a\u4eba\u7684\u8a9e\u8a00\u80fd\u529b\u6642\uff0c\u4e00\u500b\u65b0\u6642\u4ee3\u4f86\u81e8\u4e86\u3002Decoder-Only \u67b6\u69cb\u653e\u68c4\u4e86\u7368\u7acb\u7684 Encoder\uff0c\u5c08\u6ce8\u65bc\u4e00\u4ef6\u4e8b\uff1a\u6839\u64da\u5df2\u6709\u7684\u4e0a\u6587\uff0c\u9810\u6e2c\u4e0b\u4e00\u500b\u6700\u53ef\u80fd\u7684\u8a5e\u3002\u9019\u7a2e\u81ea\u56de\u6b78\uff08Auto-regressive\uff09\u7684\u7279\u6027\u8b93\u5b83\u6210\u70ba\u5929\u751f\u7684\u300c\u4f5c\u5bb6\u300d\u8207\u300c\u5c0d\u8a71\u8005\u300d\uff0cGPT \u7cfb\u5217\u7684\u5de8\u5927\u6210\u529f\uff0c\u6b63\u662f\u9019\u500b\u67b6\u69cb\u529b\u91cf\u7684\u6700\u597d\u8b49\u660e\uff0c\u4e5f\u958b\u555f\u4e86\u751f\u6210\u5f0f AI \u7684\u9ec3\u91d1\u6642\u4ee3\u3002\n <\/p>\n <\/header>\n\n <div class=\"architecture-diagram mb-12\">\n <div class=\"arch-box\">\u8f38\u5165\u63d0\u793a (Prompt)<\/div>\n <div class=\"arch-arrow\">\u2192<\/div>\n <div class=\"arch-box\">Decoder (\u81ea\u56de\u6b78\u751f\u6210)<\/div>\n <div class=\"arch-arrow\">\u21bb<\/div>\n <div class=\"arch-box\">\u9010\u5b57\u9810\u6e2c\u4e26\u8f38\u51fa<\/div>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\" id=\"decoder-only-models\"><\/div>\n <\/section>\n\n <div class=\"border-t border-gray-200\"><\/div>\n\n <section id=\"era-encoder-only\">\n <header class=\"text-center mb-12\">\n <h3 class=\"text-3xl font-bold text-warm-heading\">\u7406\u89e3\u7684\u5c08\u7cbe\uff1aEncoder-Only \u67b6\u69cb<\/h3>\n <p class=\"max-w-2xl mx-auto mt-4 text-warm-body\">\n \u8207\u6b64\u540c\u6642\uff0c\u53e6\u4e00\u689d\u9032\u5316\u8def\u7dda\u4e5f\u5728\u84ec\u52c3\u767c\u5c55\u3002Encoder-Only \u67b6\u69cb\u62cb\u68c4\u4e86 Decoder\uff0c\u5c07 Transformer \u7684\u300c\u7406\u89e3\u300d\u80fd\u529b\u767c\u63ee\u5230\u6975\u81f4\u3002\u5b83\u7684\u8a13\u7df4\u65b9\u5f0f\u5982\u540c\u505a\u300c\u514b\u6f0f\u5b57\u586b\u7a7a\u300d\uff0c\u901a\u904e\u9810\u6e2c\u53e5\u5b50\u4e2d\u88ab\u906e\u84cb\uff08Masked\uff09\u7684\u8a5e\u8a9e\uff0c\u8feb\u4f7f\u6a21\u578b\u5b78\u7fd2\u5230\u96d9\u5411\u3001\u6df1\u5ea6\u7684\u4e0a\u4e0b\u6587\u8a9e\u7fa9\u3002\u9019\u4f7f\u5f97 BERT \u53ca\u5176\u5f8c\u7e7c\u8005\u6210\u70ba\u8a9e\u7fa9\u7406\u89e3\u3001\u6587\u672c\u5206\u985e\u548c\u60c5\u611f\u5206\u6790\u7b49\u4efb\u52d9\u7684\u738b\u8005\uff0c\u5fb9\u5e95\u6539\u8b8a\u4e86\u81ea\u7136\u8a9e\u8a00\u7406\u89e3\uff08NLU\uff09\u7684\u683c\u5c40\u3002\n <\/p>\n <\/header>\n\n <div class=\"architecture-diagram mb-12\">\n <div class=\"arch-box\">\u5e36\u6709 [MASK] \u7684\u53e5\u5b50<\/div>\n <div class=\"arch-arrow\">\u2192<\/div>\n <div class=\"arch-box\">Encoder (\u96d9\u5411\u7406\u89e3)<\/div>\n <div class=\"arch-arrow\">\u2192<\/div>\n <div class=\"arch-box\">\u9810\u6e2c [MASK] \u7684\u8a5e<\/div>\n <\/div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-8\" id=\"encoder-only-models\"><\/div>\n <\/section>\n \n <div class=\"border-t border-gray-200\"><\/div>\n\n <section id=\"comparison\">\n <header class=\"text-center mb-12\">\n <h3 class=\"text-3xl font-bold text-warm-heading\">\u7d42\u5c40\u4e4b\u6230\uff1a\u4e09\u5f37\u9f0e\u7acb<\/h3>\n <p class=\"max-w-2xl mx-auto mt-4 text-warm-body\">\n \u4e09\u5927\u67b6\u69cb\u5404\u6709\u5c08\u9577\uff0c\u5171\u540c\u69cb\u5efa\u4e86\u4eca\u65e5\u7684 AI \u7248\u5716\u3002\u5b83\u5011\u4e0d\u662f\u53d6\u4ee3\u95dc\u4fc2\uff0c\u800c\u662f\u91dd\u5c0d\u4e0d\u540c\u4efb\u52d9\u7684\u6700\u4f73\u9078\u64c7\u3002\u5728\u9019\u88e1\uff0c\u6211\u5011\u5c07\u5b83\u5011\u4e26\u5217\u6bd4\u8f03\uff0c\u8b93\u60a8\u4e00\u76ee\u4e86\u7136\u5730\u770b\u6e05\u5b83\u5011\u7684\u672c\u8cea\u5dee\u7570\u8207\u5404\u81ea\u7684\u738b\u570b\u3002\u4f7f\u7528\u4e0b\u65b9\u7684\u6309\u9215\u4f86\u5207\u63db\u6bd4\u8f03\u7dad\u5ea6\u3002\n <\/p>\n <\/header>\n \n <div class=\"mb-8 flex flex-wrap justify-center gap-2 md:gap-4\" id=\"comparison-filters\">\n <button data-filter=\"concept\" class=\"btn-filter px-4 py-2 rounded-full border border-gray-300 active\">\u6838\u5fc3\u7406\u5ff5<\/button>\n <button data-filter=\"strengths\" class=\"btn-filter px-4 py-2 rounded-full border border-gray-300\">\u6838\u5fc3\u512a\u52e2<\/button>\n <button data-filter=\"weaknesses\" class=\"btn-filter px-4 py-2 rounded-full border border-gray-300\">\u4e3b\u8981\u5f31\u9ede<\/button>\n <button data-filter=\"tasks\" class=\"btn-filter px-4 py-2 rounded-full border border-gray-300\">\u64c5\u9577\u4efb\u52d9<\/button>\n <\/div>\n\n <div class=\"grid md:grid-cols-3 gap-8\">\n <div class=\"card p-6\">\n <h4 class=\"text-xl font-bold text-center mb-4 accent-color\">Decoder-Only<\/h4>\n <div id=\"decoder-only-comparison\" class=\"text-warm-body space-y-2\"><\/div>\n <\/div>\n <div class=\"card p-6\">\n <h4 class=\"text-xl font-bold text-center mb-4 accent-color\">Encoder-Decoder<\/h4>\n <div id=\"encoder-decoder-comparison\" class=\"text-warm-body space-y-2\"><\/div>\n <\/div>\n <div class=\"card p-6\">\n <h4 class=\"text-xl font-bold text-center mb-4 accent-color\">Encoder-Only<\/h4>\n <div id=\"encoder-only-comparison\" class=\"text-warm-body space-y-2\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"mt-16\">\n <h4 class=\"text-2xl font-bold text-center mb-6 text-warm-heading\">\u80fd\u529b\u8c61\u9650\u8996\u89ba\u5316<\/h4>\n <p class=\"max-w-2xl mx-auto text-center mt-2 mb-8 text-warm-body\">\u6b64\u5716\u8868\u70ba\u4e09\u5927\u67b6\u69cb\u5728\u300c\u751f\u6210\u80fd\u529b\u300d\u8207\u300c\u7406\u89e3\u6df1\u5ea6\u300d\u5169\u500b\u7dad\u5ea6\u4e0a\u7684\u6982\u5ff5\u6027\u6bd4\u8f03\uff0c\u5e6b\u52a9\u60a8\u5feb\u901f\u5efa\u7acb\u76f4\u89c0\u5370\u8c61\u3002<\/p>\n <div class=\"chart-container\">\n <canvas id=\"comparisonChart\"><\/canvas>\n <\/div>\n <\/div>\n <\/section>\n <\/main>\n\n <footer class=\"bg-warm-secondary mt-16 py-8\">\n <div class=\"container mx-auto px-6 text-center text-warm-body\">\n <p>© 2025 \u5927\u578b\u8a9e\u8a00\u6a21\u578b\u67b6\u69cb\u6f14\u9032\u53f2. All Rights Reserved.<\/p>\n <p class=\"text-sm mt-2\">\u6b64\u70ba\u4e00\u500b\u57fa\u65bc\u516c\u958b\u8cc7\u8a0a\u5efa\u69cb\u7684\u4e92\u52d5\u5f0f\u6559\u80b2\u9801\u9762\u3002<\/p>\n <\/div>\n <\/footer>\n\n <script>\n document.addEventListener('DOMContentLoaded', function() {\n const models = {\n encoderDecoder: [\n { name: 'Transformer', year: 2017, detail: '\u958b\u5275\u6027\u8ad6\u6587\u300aAttention Is All You Need\u300b\u4e2d\u63d0\u51fa\u7684\u539f\u59cb\u6a21\u578b\uff0c\u70ba\u6a5f\u5668\u7ffb\u8b6f\u8a2d\u5b9a\u4e86\u65b0\u6a19\u7aff\u3002' },\n { name: 'T5', year: 2019, detail: 'Google \u63d0\u51fa\uff0c\u5c07\u6240\u6709 NLP \u4efb\u52d9\u90fd\u7d71\u4e00\u70ba\u300c\u6587\u672c\u5230\u6587\u672c\u300d\u7684\u683c\u5f0f\uff0c\u6975\u5177\u9748\u6d3b\u6027\u3002' },\n { name: 'BART', year: 2019, detail: 'Facebook \u63d0\u51fa\uff0c\u7d50\u5408\u4e86 BERT \u7684\u96d9\u5411\u7de8\u78bc\u8207 GPT \u7684\u81ea\u56de\u6b78\u89e3\u78bc\uff0c\u5728\u751f\u6210\u8207\u7406\u89e3\u4efb\u52d9\u4e0a\u8868\u73fe\u5747\u4f73\u3002' }\n ],\n decoderOnly: [\n { name: 'GPT-1', year: 2018, detail: 'OpenAI \u7684\u958b\u5c71\u4e4b\u4f5c\uff0c\u8b49\u660e\u4e86 Decoder-Only \u67b6\u69cb\u5728\u7121\u76e3\u7763\u9810\u8a13\u7df4\u4e0a\u7684\u5de8\u5927\u6f5b\u529b\u3002' },\n { name: 'GPT-3', year: 2020, detail: '\u4ee5 1750 \u5104\u53c3\u6578\u9707\u9a5a\u4e16\u754c\uff0c\u5c55\u73fe\u4e86\u9a5a\u4eba\u7684\u96f6\u6a23\u672c\u548c\u5c11\u6a23\u672c\u5b78\u7fd2\u80fd\u529b\uff0c\u5f15\u7206\u751f\u6210\u5f0f AI \u9769\u547d\u3002' },\n { name: 'LLaMA', year: 2023, detail: 'Meta \u63a8\u51fa\u7684\u958b\u6e90\u6a21\u578b\u7cfb\u5217\uff0c\u6975\u5927\u5730\u63a8\u52d5\u4e86\u5927\u578b\u8a9e\u8a00\u6a21\u578b\u7684\u7814\u7a76\u8207\u61c9\u7528\u666e\u53ca\u3002' }\n ],\n encoderOnly: [\n { name: 'BERT', year: 2018, detail: 'Google \u7684\u9769\u547d\u6027\u6a21\u578b\uff0c\u5f15\u5165 Masked Language Model\uff0c\u5be6\u73fe\u4e86\u771f\u6b63\u7684\u96d9\u5411\u4e0a\u4e0b\u6587\u7406\u89e3\uff0c\u6a6b\u6383\u5404\u5927 NLU \u699c\u55ae\u3002' },\n { name: 'RoBERTa', year: 2019, detail: 'Facebook \u5c0d BERT \u7684\u6539\u826f\u7248\uff0c\u901a\u904e\u66f4\u9577\u7684\u8a13\u7df4\u548c\u66f4\u5927\u7684\u6578\u64da\u96c6\uff0c\u53d6\u5f97\u4e86\u66f4\u5f37\u7684\u6027\u80fd\u3002' },\n { name: 'ALBERT', year: 2019, detail: 'Google \u63d0\u51fa\u7684\u8f15\u91cf\u7248 BERT\uff0c\u901a\u904e\u53c3\u6578\u5171\u4eab\u7b49\u6280\u8853\u5927\u5e45\u6e1b\u5c11\u6a21\u578b\u5927\u5c0f\uff0c\u540c\u6642\u4fdd\u6301\u9ad8\u6027\u80fd\u3002' }\n ]\n };\n\n const comparisonData = {\n concept: {\n decoderOnly: '<strong>\u81ea\u56de\u6b78\u751f\u6210\uff1a<\/strong> \u50cf\u4e00\u500b\u4f5c\u5bb6\uff0c\u6839\u64da\u4e0a\u6587\u5beb\u4e0b\u6587\uff0c\u5c08\u6ce8\u65bc\u6d41\u66a2\u5730\u5ef6\u7e8c\u6587\u672c\u5e8f\u5217\u3002',\n encoderDecoder: '<strong>\u7ffb\u8b6f\u5b98\u6a21\u578b\uff1a<\/strong> \u5148\u5b8c\u6574\u95b1\u8b80\u3001\u7406\u89e3\u6e90\u6587\uff08Encoder\uff09\uff0c\u518d\u6839\u64da\u7406\u89e3\u751f\u6210\u8b6f\u6587\uff08Decoder\uff09\u3002',\n encoderOnly: '<strong>\u514b\u6f0f\u5b57\u5c08\u5bb6\uff1a<\/strong> \u5c08\u6ce8\u65bc\u7406\u89e3\u5b8c\u6574\u53e5\u5b50\u4e2d\u6bcf\u500b\u8a5e\u7684\u6df1\u5c64\u8a9e\u7fa9\uff0c\u5982\u540c\u505a\u514b\u6f0f\u5b57\u586b\u7a7a\u4f86\u5b78\u7fd2\u4e0a\u4e0b\u6587\u3002'\n },\n strengths: {\n decoderOnly: '<strong>\u2713 \u751f\u6210\u80fd\u529b\u6975\u5f37\uff1a<\/strong> \u64c5\u9577\u5275\u610f\u5beb\u4f5c\u3001\u5c0d\u8a71\u3001\u7a0b\u5f0f\u78bc\u751f\u6210\u7b49\u958b\u653e\u5f0f\u4efb\u52d9\u3002<br><strong>\u2713 \u4e0a\u4e0b\u6587\u9023\u8cab\u6027\uff1a<\/strong> \u80fd\u5beb\u51fa\u9577\u7bc7\u4e14\u908f\u8f2f\u901a\u9806\u7684\u6587\u7ae0\u3002<br><strong>\u2713 \u96f6\/\u5c11\u6a23\u672c\u5b78\u7fd2\uff1a<\/strong> \u5728\u6c92\u6709\u7279\u5225\u5fae\u8abf\u7684\u60c5\u6cc1\u4e0b\u4e5f\u80fd\u5b8c\u6210\u4efb\u52d9\u3002',\n encoderDecoder: '<strong>\u2713 Seq2Seq \u4efb\u52d9\u738b\u8005\uff1a<\/strong> \u5728\u7ffb\u8b6f\u3001\u6458\u8981\u7b49\u6709\u660e\u78ba\u8f38\u5165\/\u8f38\u51fa\u5c0d\u61c9\u7684\u4efb\u52d9\u4e0a\u8868\u73fe\u512a\u7570\u3002<br><strong>\u2713 \u7d50\u69cb\u53ef\u63a7\u6027\uff1a<\/strong> Encoder \u7684\u8f38\u51fa\u70ba Decoder \u63d0\u4f9b\u4e86\u5f37\u6709\u529b\u7684\u6307\u5c0e\uff0c\u751f\u6210\u5167\u5bb9\u66f4\u8cbc\u8fd1\u6e90\u6587\u3002',\n encoderOnly: '<strong>\u2713 \u8a9e\u7fa9\u7406\u89e3\u8d85\u7fa4\uff1a<\/strong> \u80fd\u6355\u6349\u6df1\u5c64\u3001\u96d9\u5411\u7684\u4e0a\u4e0b\u6587\u95dc\u4fc2\u3002<br><strong>\u2713 NLU \u4efb\u52d9\u9738\u4e3b\uff1a<\/strong> \u5728\u60c5\u611f\u5206\u6790\u3001\u6587\u672c\u5206\u985e\u3001\u547d\u540d\u5be6\u9ad4\u8b58\u5225\u7b49\u4efb\u52d9\u4e0a\u662f\u6700\u4f73\u9078\u64c7\u3002<br><strong>\u2713 \u6587\u672c\u8868\u793a\uff1a<\/strong> \u80fd\u751f\u6210\u9ad8\u8cea\u91cf\u7684\u8a5e\u5411\u91cf\u6216\u53e5\u5b50\u5411\u91cf\u3002'\n },\n weaknesses: {\n decoderOnly: '<strong>- \u7406\u89e3\u6df1\u5ea6\u76f8\u5c0d\u8f03\u6dfa\uff1a<\/strong> \u7531\u65bc\u662f\u55ae\u5411\u6ce8\u610f\u529b\uff0c\u5c0d\u8907\u96dc\u8a9e\u7fa9\u7684\u6355\u6349\u4e0d\u5982 Encoder-Only\u3002<br><strong>- \u53ef\u80fd\u7522\u751f\u5e7b\u89ba\uff1a<\/strong> \u6709\u6642\u6703\u7de8\u9020\u4e0d\u7b26\u5408\u4e8b\u5be6\u7684\u5167\u5bb9\u3002<br><strong>- \u8a08\u7b97\u6210\u672c\u9ad8\uff1a<\/strong> \u751f\u6210\u9577\u6587\u672c\u6642\uff0c\u6bcf\u4e00\u6b65\u90fd\u9700\u8981\u4f9d\u8cf4\u524d\u9762\u7684\u7d50\u679c\uff0c\u7121\u6cd5\u4e26\u884c\u3002',\n encoderDecoder: '<strong>- \u7d50\u69cb\u8907\u96dc\uff1a<\/strong> \u540c\u6642\u64c1\u6709 Encoder \u548c Decoder\uff0c\u8a13\u7df4\u548c\u63a8\u7406\u6210\u672c\u8f03\u9ad8\u3002<br><strong>- \u9748\u6d3b\u6027\u8f03\u5dee\uff1a<\/strong> \u4e0d\u5982 Decoder-Only \u9069\u5408\u958b\u653e\u5f0f\u751f\u6210\u4efb\u52d9\u3002',\n encoderOnly: '<strong>- \u4e0d\u5177\u5099\u751f\u6210\u80fd\u529b\uff1a<\/strong> \u7121\u6cd5\u76f4\u63a5\u7528\u65bc\u5beb\u4f5c\u6216\u5c0d\u8a71\u7b49\u751f\u6210\u4efb\u52d9\u3002<br><strong>- \u8f38\u5165\u683c\u5f0f\u53d7\u9650\uff1a<\/strong> \u901a\u5e38\u9700\u8981\u7279\u5b9a\u683c\u5f0f\u7684\u8f38\u5165\uff08\u5982 [CLS], [SEP]\uff09\u3002<br><strong>- \u9810\u8a13\u7df4\u76ee\u6a19\u8207\u67d0\u4e9b\u4e0b\u6e38\u4efb\u52d9\u4e0d\u4e00\u81f4\u3002'\n },\n tasks: {\n decoderOnly: '<strong>\u2713 \u5c0d\u8a71\u6a5f\u5668\u4eba (ChatGPT)<\/strong><br><strong>\u2713 \u5275\u610f\u5beb\u4f5c (\u5c0f\u8aaa\u3001\u8a69\u6b4c)<\/strong><br><strong>\u2713 \u7a0b\u5f0f\u78bc\u751f\u6210 (Copilot)<\/strong><br><strong>\u2713 \u554f\u7b54\u7cfb\u7d71<\/strong>',\n encoderDecoder: '<strong>\u2713 \u6a5f\u5668\u7ffb\u8b6f (Google Translate)<\/strong><br><strong>\u2713 \u6587\u672c\u6458\u8981<\/strong><br><strong>\u2713 \u6587\u6a94\u6539\u5beb<\/strong>',\n encoderOnly: '<strong>\u2713 \u60c5\u611f\u5206\u6790<\/strong><br><strong>\u2713 \u6587\u672c\u5206\u985e (\u65b0\u805e\u3001\u90f5\u4ef6)<\/strong><br><strong>\u2713 \u8a9e\u7fa9\u641c\u7d22<\/strong><br><strong>\u2713 \u547d\u540d\u5be6\u9ad4\u8b58\u5225<\/strong>'\n }\n };\n\n function createModelCard(model) {\n return `\n <div class=\"card p-6 flex flex-col\">\n <h5 class=\"text-xl font-bold text-warm-heading mb-2\">${model.name}<\/h5>\n <p class=\"text-sm font-semibold accent-color mb-3\">${model.year}<\/p>\n <p class=\"text-warm-body flex-grow\">${model.detail}<\/p>\n <\/div>\n `;\n }\n\n document.getElementById('encoder-decoder-models').innerHTML = models.encoderDecoder.map(createModelCard).join('');\n document.getElementById('decoder-only-models').innerHTML = models.decoderOnly.map(createModelCard).join('');\n document.getElementById('encoder-only-models').innerHTML = models.encoderOnly.map(createModelCard).join('');\n\n const comparisonFilters = document.getElementById('comparison-filters');\n const decoderOnlyComp = document.getElementById('decoder-only-comparison');\n const encoderDecoderComp = document.getElementById('encoder-decoder-comparison');\n const encoderOnlyComp = document.getElementById('encoder-only-comparison');\n\n function updateComparison(filter) {\n decoderOnlyComp.innerHTML = comparisonData[filter].decoderOnly;\n encoderDecoderComp.innerHTML = comparisonData[filter].encoderDecoder;\n encoderOnlyComp.innerHTML = comparisonData[filter].encoderOnly;\n\n comparisonFilters.querySelectorAll('button').forEach(btn => {\n btn.classList.toggle('active', btn.dataset.filter === filter);\n });\n }\n\n comparisonFilters.addEventListener('click', (e) => {\n if (e.target.tagName === 'BUTTON') {\n updateComparison(e.target.dataset.filter);\n }\n });\n \n updateComparison('concept');\n\n const ctx = document.getElementById('comparisonChart').getContext('2d');\n const comparisonChart = new Chart(ctx, {\n type: 'bar',\n data: {\n labels: ['Decoder-Only', 'Encoder-Decoder', 'Encoder-Only'],\n datasets: [\n {\n label: '\u751f\u6210\u80fd\u529b',\n data: [9, 6, 1],\n backgroundColor: 'rgba(74, 144, 226, 0.6)',\n borderColor: 'rgba(74, 144, 226, 1)',\n borderWidth: 1\n },\n {\n label: '\u7406\u89e3\u6df1\u5ea6',\n data: [6, 7, 10],\n backgroundColor: 'rgba(215, 115, 87, 0.6)',\n borderColor: 'rgba(215, 115, 87, 1)',\n borderWidth: 1\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n indexAxis: 'y',\n scales: {\n x: {\n beginAtZero: true,\n max: 10,\n title: {\n display: true,\n text: '\u80fd\u529b\u8a55\u5206 (\u6982\u5ff5\u6027)'\n }\n },\n y: {\n ticks: {\n font: {\n size: 14,\n }\n }\n }\n },\n plugins: {\n legend: {\n position: 'top',\n },\n tooltip: {\n callbacks: {\n label: function(context) {\n let label = context.dataset.label || '';\n if (label) {\n label += ': ';\n }\n if (context.parsed.x !== null) {\n label += context.parsed.x + ' \/ 10';\n }\n return label;\n }\n }\n }\n }\n }\n });\n\n const mobileMenuButton = document.getElementById('mobile-menu-button');\n const mobileMenu = document.getElementById('mobile-menu');\n mobileMenuButton.addEventListener('click', () => {\n mobileMenu.classList.toggle('hidden');\n });\n \n document.querySelectorAll('.nav-link').forEach(link => {\n link.addEventListener('click', (e) => {\n if (mobileMenu.offsetParent !== null) {\n mobileMenu.classList.add('hidden');\n }\n });\n });\n\n const navLinks = document.querySelectorAll('.nav-link');\n const sections = document.querySelectorAll('section[id]');\n \n window.addEventListener('scroll', () => {\n let current = '';\n sections.forEach(section => {\n const sectionTop = section.offsetTop;\n if (pageYOffset >= sectionTop - 150) {\n current = section.getAttribute('id');\n }\n });\n \n if (current.startsWith('era-')) {\n current = current;\n } else if (current === 'comparison') {\n current = 'comparison';\n }\n \n navLinks.forEach(link => {\n link.classList.remove('active');\n if (link.getAttribute('href').substring(1) === current) {\n link.classList.add('active');\n }\n });\n });\n\n });\n <\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>\u5927\u578b\u8a9e\u8a00\u6a21\u578b\u67b6\u69cb\u6f14\u9032\u53f2 LLM \u67b6\u69cb\u6f14\u9032\u53f2 \u958b\u7aef\uff1aEncoder-Decoder … <a href=\"https:\/\/ouyangminwei.com\/index.php\/2025\/07\/29\/the-evolution-of-large-language-model-architectures\/\">\u95b1\u8b80\u5168\u6587 <span class=\"meta-nav\">→<\/span><\/a><\/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-876","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_edit_lock":"1752830532: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":"","_links":{"self":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts\/876","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=876"}],"version-history":[{"count":1,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts\/876\/revisions"}],"predecessor-version":[{"id":877,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/posts\/876\/revisions\/877"}],"wp:attachment":[{"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/media?parent=876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/categories?post=876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/tags?post=876"},{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/ouyangminwei.com\/index.php\/wp-json\/wp\/v2\/post_format?post=876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}