\u4eba\u5de5\u667a\u80fd\u60c5\u611f\u591a\u6a21\u6001\u8bad\u7ec3\u5e73\u53f0<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#4f46e5', \/\/ \u4e3b\u8272\u8c03\uff1a\u975b\u84dd\u8272\n secondary: '#10b981', \/\/ \u8f85\u52a9\u8272\uff1a\u7eff\u8272\n accent: '#f59e0b', \/\/ \u5f3a\u8c03\u8272\uff1a\u7425\u73c0\u8272\n danger: '#ef4444', \/\/ \u5371\u9669\u8272\uff1a\u7ea2\u8272\n dark: '#1e293b', \/\/ \u6df1\u8272\u80cc\u666f\n 'dark-light': '#334155', \/\/ \u6d45\u6df1\u8272\u80cc\u666f\n light: '#f8fafc', \/\/ \u6d45\u8272\u80cc\u666f\n },\n fontFamily: {\n sans: ['Noto Sans SC', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .glass {\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n }\n .card-hover {\n transition: all 0.3s ease;\n }\n .card-hover:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n .gradient-primary {\n background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);\n }\n .slider-thumb::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #4f46e5;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(79, 70, 229, 0.5);\n transition: all 0.2s ease;\n }\n .slider-thumb::-webkit-slider-thumb:hover {\n transform: scale(1.1);\n background: #6366f1;\n }\n .modal-backdrop {\n backdrop-filter: blur(5px);\n background-color: rgba(0, 0, 0, 0.5);\n }\n .scrollbar-thin {\n scrollbar-width: thin;\n }\n .scrollbar-thin::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .scrollbar-thin::-webkit-scrollbar-thumb {\n background-color: rgba(79, 70, 229, 0.5);\n border-radius: 3px;\n }\n .scrollbar-thin::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.05);\n }\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 font-sans text-dark min-h-screen\">\n\n \n <main class=\"container mx-auto px-4 py-6\">\n \n <div class=\"mb-6 bg-white rounded-xl shadow-sm p-4 border border-gray-100\">\n <div class=\"flex flex-wrap justify-between items-center gap-4\">\n <div>\n <h2 class=\"text-xl font-bold text-dark\">\u60c5\u611f\u5206\u6790\u6a21\u578b v3.2.1<\/h2>\n <p class=\"text-gray-500 text-sm mt-1\">\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u4e0e\u5206\u7c7b\u7cfb\u7edf – \u8bad\u7ec3\u4f1a\u8bdd #8742<\/p>\n <\/div>\n \n <div class=\"flex flex-wrap gap-3\">\n <button class=\"px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors flex items-center\">\n <i class=\"fas fa-save mr-2\"><\/i>\u4fdd\u5b58\u914d\u7f6e\n <\/button>\n <button id=\"top-start-btn\" class=\"px-4 py-2 bg-primary hover:bg-primary\/90 text-white rounded-lg text-sm font-medium transition-colors flex items-center\">\n <i class=\"fas fa-play mr-2\"><\/i>\u5f00\u59cb\u8bad\u7ec3\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n \n <div class=\"lg:col-span-3 space-y-6\">\n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-sliders-h text-primary mr-2\"><\/i>\u6a21\u578b\u53c2\u6570\u8bbe\u7f6e\n <\/h3>\n \n <div class=\"space-y-5\">\n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u5b66\u4e60\u7387<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"learning-rate-value\">0.0012<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"learning-rate\" \n min=\"0.0001\" \n max=\"0.1\" \n step=\"0.0001\" \n value=\"0.0012\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>0.0001<\/span>\n <span>0.1<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u6279\u6b21\u5927\u5c0f<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"batch-size-value\">32<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"batch-size\" \n min=\"8\" \n max=\"128\" \n step=\"8\" \n value=\"32\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>8<\/span>\n <span>128<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u8fed\u4ee3\u6b21\u6570<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"epochs-value\">50<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"epochs\" \n min=\"10\" \n max=\"200\" \n step=\"10\" \n value=\"50\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>10<\/span>\n <span>200<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">Dropout\u7387<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"dropout-value\">0.35<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"dropout\" \n min=\"0\" \n max=\"0.8\" \n step=\"0.05\" \n value=\"0.35\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>0<\/span>\n <span>0.8<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">L2\u6b63\u5219\u5316<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"l2-value\">0.0005<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"l2\" \n min=\"0\" \n max=\"0.01\" \n step=\"0.0001\" \n value=\"0.0005\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <\/div>\n <\/div>\n \n <button class=\"mt-6 w-full py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium\">\n \u91cd\u7f6e\u4e3a\u9ed8\u8ba4\u53c2\u6570\n <\/button>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-cubes text-primary mr-2\"><\/i>\u591a\u6a21\u6001\u6743\u91cd\u8bbe\u7f6e\n <\/h3>\n \n <div class=\"space-y-5\">\n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u6587\u672c\u6a21\u6001\u6743\u91cd<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"text-weight-value\">40%<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"text-weight\" \n min=\"0\" \n max=\"100\" \n step=\"5\" \n value=\"40\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u8bed\u97f3\u6a21\u6001\u6743\u91cd<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"audio-weight-value\">30%<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"audio-weight\" \n min=\"0\" \n max=\"100\" \n step=\"5\" \n value=\"30\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u56fe\u50cf\u6a21\u6001\u6743\u91cd<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"image-weight-value\">30%<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"image-weight\" \n min=\"0\" \n max=\"100\" \n step=\"5\" \n value=\"30\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <\/div>\n <\/div>\n \n <div class=\"mt-4 p-3 bg-blue-50 rounded-lg border border-blue-100\">\n <p class=\"text-sm text-blue-700 flex items-start\">\n <i class=\"fas fa-info-circle mt-0.5 mr-2\"><\/i>\n <span>\u6743\u91cd\u603b\u548c\u5c06\u81ea\u52a8\u5f52\u4e00\u5316\uff0c\u8c03\u6574\u4e00\u9879\u4f1a\u5f71\u54cd\u5176\u4ed6\u9879\u7684\u76f8\u5bf9\u6bd4\u4f8b<\/span>\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-heart text-primary mr-2\"><\/i>\u60c5\u611f\u7c7b\u522b\u8bbe\u7f6e\n <\/h3>\n \n <div class=\"space-y-3\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-happy\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-happy\" class=\"ml-2 text-sm text-gray-700\">\u559c\u60a6<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-sad\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-sad\" class=\"ml-2 text-sm text-gray-700\">\u60b2\u4f24<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-angry\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-angry\" class=\"ml-2 text-sm text-gray-700\">\u6124\u6012<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-fear\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-fear\" class=\"ml-2 text-sm text-gray-700\">\u6050\u60e7<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-surprise\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-surprise\" class=\"ml-2 text-sm text-gray-700\">\u60ca\u8bb6<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-disgust\" class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-disgust\" class=\"ml-2 text-sm text-gray-700\">\u538c\u6076<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-neutral\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-neutral\" class=\"ml-2 text-sm text-gray-700\">\u4e2d\u6027<\/label>\n <\/div>\n <\/div>\n \n <button class=\"mt-4 w-full py-2 text-sm text-primary hover:text-primary\/80 transition-colors flex items-center justify-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> \u6dfb\u52a0\u81ea\u5b9a\u4e49\u60c5\u611f\u7c7b\u522b\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:col-span-6 space-y-6\">\n \n <div id=\"training-monitor-section\" class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-tachometer-alt text-primary mr-2\"><\/i>\u8bad\u7ec3\u72b6\u6001\u76d1\u63a7\n <\/h3>\n <div id=\"training-status\" class=\"px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium\">\n \u672a\u5f00\u59cb\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-5\">\n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100\">\n <div class=\"text-xs text-gray-500 mb-1\">\u5f53\u524d epoch<\/div>\n <div class=\"text-2xl font-bold text-dark\" id=\"current-epoch\">0\/50<\/div>\n <\/div>\n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100\">\n <div class=\"text-xs text-gray-500 mb-1\">\u8bad\u7ec3\u51c6\u786e\u7387<\/div>\n <div class=\"text-2xl font-bold text-secondary\" id=\"train-accuracy\">0%<\/div>\n <\/div>\n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100\">\n <div class=\"text-xs text-gray-500 mb-1\">\u9a8c\u8bc1\u51c6\u786e\u7387<\/div>\n <div class=\"text-2xl font-bold text-primary\" id=\"val-accuracy\">0%<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-5\">\n <div class=\"flex justify-between items-center mb-2\">\n <span class=\"text-sm text-gray-600\">\u8bad\u7ec3\u8fdb\u5ea6<\/span>\n <span class=\"text-sm font-medium text-primary\" id=\"progress-percentage\">0%<\/span>\n <\/div>\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n <div id=\"progress-bar\" class=\"h-full gradient-primary w-0 transition-all duration-500\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"flex flex-wrap gap-3\">\n <button id=\"start-btn\" class=\"px-4 py-2 bg-primary hover:bg-primary\/90 text-white rounded-lg text-sm font-medium transition-colors flex items-center\">\n <i class=\"fas fa-play mr-2\"><\/i>\u5f00\u59cb\u8bad\u7ec3\n <\/button>\n <button id=\"pause-btn\" class=\"px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors flex items-center\" disabled>\n <i class=\"fas fa-pause mr-2\"><\/i>\u6682\u505c\n <\/button>\n <button id=\"step-btn\" class=\"px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors flex items-center\" disabled>\n <i class=\"fas fa-step-forward mr-2\"><\/i>\u5355\u6b65\u6267\u884c\n <\/button>\n <button id=\"stop-btn\" class=\"px-4 py-2 bg-danger hover:bg-danger\/90 text-white rounded-lg text-sm font-medium transition-colors flex items-center ml-auto\" disabled>\n <i class=\"fas fa-stop mr-2\"><\/i>\u7ec8\u6b62\u8bad\u7ec3\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-chart-line text-primary mr-2\"><\/i>\u6a21\u578b\u6027\u80fd\u6307\u6807\n <\/h3>\n <div class=\"flex gap-2\">\n <button id=\"accuracy-btn\" class=\"px-3 py-1 text-xs bg-primary\/10 text-primary rounded-full font-medium\">\u51c6\u786e\u7387<\/button>\n <button id=\"loss-btn\" class=\"px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition-colors\">\u635f\u5931\u503c<\/button>\n <button id=\"f1-btn\" class=\"px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition-colors\">F1\u5206\u6570<\/button>\n <\/div>\n <\/div>\n \n <div class=\"h-64\">\n <canvas id=\"performance-chart\"><\/canvas>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-table text-primary mr-2\"><\/i>\u6df7\u6dc6\u77e9\u9635\n <\/h3>\n \n <div class=\"overflow-x-auto scrollbar-thin\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-gray-50\">\n <th class=\"py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u9884\u6d4b\\\u5b9e\u9645<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u559c\u60a6<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u60b2\u4f24<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u6124\u6012<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u6050\u60e7<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u60ca\u8bb6<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u4e2d\u6027<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"bg-white divide-y divide-gray-200\">\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u559c\u60a6<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">87<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">5<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u60b2\u4f24<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">82<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">6<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u6124\u6012<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">5<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">88<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u6050\u60e7<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">5<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">83<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u60ca\u8bb6<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">6<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">85<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u4e2d\u6027<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">88<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:col-span-3 space-y-6\">\n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-database text-primary mr-2\"><\/i>\u6570\u636e\u96c6\u4fe1\u606f\n <\/h3>\n \n <div class=\"space-y-4\">\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u6570\u636e\u96c6\u540d\u79f0<\/span>\n <span class=\"text-sm font-medium\">\u60c5\u611f\u591a\u6a21\u6001\u6570\u636e\u96c6 v2.1<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u6837\u672c\u603b\u91cf<\/span>\n <span class=\"text-sm font-medium\">24,856<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u8bad\u7ec3\u96c6<\/span>\n <span class=\"text-sm font-medium\">19,885 (80%)<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u9a8c\u8bc1\u96c6<\/span>\n <span class=\"text-sm font-medium\">2,486 (10%)<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u6d4b\u8bd5\u96c6<\/span>\n <span class=\"text-sm font-medium\">2,485 (10%)<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-sm text-gray-600\">\u6570\u636e\u5e73\u8861\u5ea6<\/span>\n <span class=\"text-sm font-medium text-secondary\">\u826f\u597d<\/span>\n <\/div>\n <\/div>\n \n <button class=\"mt-5 w-full py-2 text-sm text-primary hover:text-primary\/80 transition-colors flex items-center justify-center\">\n <i class=\"fas fa-exchange-alt mr-1\"><\/i> \u66f4\u6362\u6570\u636e\u96c6\n <\/button>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-file-import text-primary mr-2\"><\/i>\u6d4b\u8bd5\u6570\u636e\u8f93\u5165\n <\/h3>\n \n <div class=\"space-y-4\">\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u6587\u672c\u8f93\u5165<\/label>\n <textarea \n id=\"text-input\"\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary text-sm\" \n rows=\"3\" \n placeholder=\"\u8f93\u5165\u6587\u672c\u4ee5\u6d4b\u8bd5\u6a21\u578b...\">\u4eca\u5929\u771f\u662f\u592a\u68d2\u4e86\uff01\u6211\u5f97\u5230\u4e86\u68a6\u5bd0\u4ee5\u6c42\u7684\u5de5\u4f5c\u673a\u4f1a\uff0c\u611f\u89c9\u6574\u4e2a\u4eba\u90fd\u5145\u6ee1\u4e86\u80fd\u91cf\uff01<\/textarea>\n <\/div>\n \n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bed\u97f3\u8f93\u5165<\/label>\n <div class=\"border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-colors\">\n <button class=\"w-12 h-12 bg-primary\/10 hover:bg-primary\/20 text-primary rounded-full flex items-center justify-center mx-auto mb-2 transition-colors\">\n <i class=\"fas fa-microphone\"><\/i>\n <\/button>\n <p class=\"text-xs text-gray-500\">\u70b9\u51fb\u5f55\u97f3\u6216\u62d6\u653e\u97f3\u9891\u6587\u4ef6<\/p>\n <\/div>\n <\/div>\n \n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u56fe\u50cf\u8f93\u5165<\/label>\n <div class=\"border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-colors\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/64\/300\/200\" alt=\"\u793a\u4f8b\u56fe\u50cf\" class=\"max-w-full h-24 object-cover rounded mx-auto mb-2\">\n <p class=\"text-xs text-gray-500\">\u70b9\u51fb\u4e0a\u4f20\u6216\u62d6\u653e\u56fe\u50cf\u6587\u4ef6<\/p>\n <\/div>\n <\/div>\n \n <button id=\"predict-btn\" class=\"w-full py-2 gradient-primary text-white rounded-lg text-sm font-medium transition-colors flex items-center justify-center\">\n <i class=\"fas fa-play-circle mr-2\"><\/i> \u8fd0\u884c\u6a21\u578b\u9884\u6d4b\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-chart-pie text-primary mr-2\"><\/i>\u9884\u6d4b\u7ed3\u679c\n <\/h3>\n \n <div class=\"h-48 mb-4\">\n <canvas id=\"prediction-chart\"><\/canvas>\n <\/div>\n \n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center\">\n <span class=\"w-3 h-3 rounded-full bg-primary mr-2\"><\/span>\n <span class=\"text-sm text-gray-700\">\u559c\u60a6<\/span>\n <\/div>\n <span id=\"joy-percent\" class=\"text-sm font-medium\">68%<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center\">\n <span class=\"w-3 h-3 rounded-full bg-secondary mr-2\"><\/span>\n <span class=\"text-sm text-gray-700\">\u60ca\u8bb6<\/span>\n <\/div>\n <span id=\"surprise-percent\" class=\"text-sm font-medium\">22%<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center\">\n <span class=\"w-3 h-3 rounded-full bg-accent mr-2\"><\/span>\n <span class=\"text-sm text-gray-700\">\u4e2d\u6027<\/span>\n <\/div>\n <span id=\"neutral-percent\" class=\"text-sm font-medium\">10%<\/span>\n <\/div>\n <\/div>\n \n <div id=\"model-analysis\" class=\"mt-4 p-3 bg-primary\/5 rounded-lg border border-primary\/10\">\n <p class=\"text-sm text-primary font-medium\">\u6a21\u578b\u5206\u6790<\/p>\n <p class=\"text-xs text-gray-600 mt-1\">\n \u6587\u672c\u8868\u8fbe\u4e86\u79ef\u6781\u60c5\u7eea\uff0c\u8bed\u97f3\u8bed\u8c03\u4e0a\u626c\uff0c\u9762\u90e8\u8868\u60c5\u663e\u793a\u5fae\u7b11\u548c\u5174\u594b\uff0c\u7efc\u5408\u5224\u65ad\u4e3a\u559c\u60a6\u60c5\u7eea\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-code-branch text-primary mr-2\"><\/i>\u6a21\u578b\u7248\u672c\n <\/h3>\n \n <div class=\"space-y-3\">\n <div class=\"p-3 bg-primary\/5 rounded-lg border border-primary\/10 flex justify-between items-center\">\n <div>\n <p class=\"text-sm font-medium\">\u5f53\u524d\u6a21\u578b<\/p>\n <p class=\"text-xs text-gray-500\">v3.2.1 – 2023-06-15<\/p>\n <\/div>\n <span class=\"px-2 py-1 bg-primary\/10 text-primary text-xs rounded-full\">\u6d3b\u8dc3<\/span>\n <\/div>\n \n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100 flex justify-between items-center\">\n <div>\n <p class=\"text-sm font-medium\">\u5386\u53f2\u7248\u672c<\/p>\n <p class=\"text-xs text-gray-500\">v3.2.0 – 2023-06-10<\/p>\n <\/div>\n <button class=\"text-xs text-primary hover:text-primary\/80\">\u5207\u6362<\/button>\n <\/div>\n \n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100 flex justify-between items-center\">\n <div>\n <p class=\"text-sm font-medium\">\u5386\u53f2\u7248\u672c<\/p>\n <p class=\"text-xs text-gray-500\">v3.1.2 – 2023-06-01<\/p>\n <\/div>\n <button class=\"text-xs text-primary hover:text-primary\/80\">\u5207\u6362<\/button>\n <\/div>\n <\/div>\n \n <button class=\"mt-4 w-full py-2 text-sm text-primary hover:text-primary\/80 transition-colors flex items-center justify-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> \u521b\u5efa\u65b0\u7248\u672c\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-6 bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-file-alt text-primary mr-2\"><\/i>\u8bad\u7ec3\u65e5\u5fd7\n <\/h3>\n <button class=\"text-sm text-primary hover:text-primary\/80 transition-colors\">\n <i class=\"fas fa-download mr-1\"><\/i>\u5bfc\u51fa\u65e5\u5fd7\n <\/button>\n <\/div>\n \n <div class=\"h-40 bg-gray-50 rounded-lg p-3 overflow-y-auto scrollbar-thin text-xs font-mono text-gray-700 space-y-1\" id=\"training-log\">\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:00]<\/span> \u521d\u59cb\u5316\u8bad\u7ec3\u73af\u5883…<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:02]<\/span> \u52a0\u8f7d\u6570\u636e\u96c6: \u60c5\u611f\u591a\u6a21\u6001\u6570\u636e\u96c6 v2.1<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:05]<\/span> \u6570\u636e\u96c6\u52a0\u8f7d\u5b8c\u6210\uff0c\u517124,856\u4e2a\u6837\u672c<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:07]<\/span> \u521d\u59cb\u5316\u6a21\u578b\u67b6\u6784: \u591a\u6a21\u6001\u60c5\u611f\u5206\u7c7b\u5668 v3.2<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:10]<\/span> \u6a21\u578b\u53c2\u6570\u8bbe\u7f6e\u5b8c\u6210<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:12]<\/span> \u7b49\u5f85\u8bad\u7ec3\u5f00\u59cb…<\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <script>\n \/\/ \u521d\u59cb\u5316\u6ed1\u5757\u663e\u793a\u503c\n function initSliders() {\n const sliders = [\n { id: 'learning-rate', type: 'decimal' },\n { id: 'batch-size', type: 'integer' },\n { id: 'epochs', type: 'integer' },\n { id: 'dropout', type: 'decimal' },\n { id: 'l2', type: 'decimal' },\n { id: 'text-weight', type: 'percent' },\n { id: 'audio-weight', type: 'percent' },\n { id: 'image-weight', type: 'percent' }\n ];\n \n sliders.forEach(slider => {\n const element = document.getElementById(slider.id);\n const valueDisplay = document.getElementById(`${slider.id}-value`);\n \n \/\/ \u8bbe\u7f6e\u521d\u59cb\u663e\u793a\u503c\n updateSliderDisplay(element, valueDisplay, slider.type);\n \n \/\/ \u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\n element.addEventListener('input', function() {\n updateSliderDisplay(this, valueDisplay, slider.type);\n \n \/\/ \u5904\u7406\u591a\u6a21\u6001\u6743\u91cd\u7684\u81ea\u52a8\u5f52\u4e00\u5316\n if (slider.id.includes('weight')) {\n normalizeWeights();\n }\n });\n });\n }\n \n \/\/ \u66f4\u65b0\u6ed1\u5757\u663e\u793a\u503c\n function updateSliderDisplay(slider, displayElement, type) {\n if (type === 'percent') {\n displayElement.textContent = `${slider.value}%`;\n } else if (type === 'decimal') {\n displayElement.textContent = parseFloat(slider.value).toFixed(4);\n } else if (type === 'integer') {\n displayElement.textContent = slider.value;\n }\n }\n \n \/\/ \u5f52\u4e00\u5316\u591a\u6a21\u6001\u6743\u91cd\n function normalizeWeights() {\n const textWeight = parseInt(document.getElementById('text-weight').value);\n const audioWeight = parseInt(document.getElementById('audio-weight').value);\n const imageWeight = parseInt(document.getElementById('image-weight').value);\n \n const total = textWeight + audioWeight + imageWeight;\n if (total === 0) return;\n \n \/\/ \u8ba1\u7b97\u5f52\u4e00\u5316\u540e\u7684\u767e\u5206\u6bd4\n const textPercent = Math.round((textWeight \/ total) * 100);\n const audioPercent = Math.round((audioWeight \/ total) * 100);\n const imagePercent = 100 - textPercent - audioPercent;\n \n \/\/ \u66f4\u65b0\u663e\u793a\u503c\uff08\u4e0d\u4fee\u6539\u6ed1\u5757\u5b9e\u9645\u503c\uff09\n document.getElementById('text-weight-value').textContent = `${textPercent}%`;\n document.getElementById('audio-weight-value').textContent = `${audioPercent}%`;\n document.getElementById('image-weight-value').textContent = `${imagePercent}%`;\n }\n \n \/\/ \u521d\u59cb\u5316\u6027\u80fd\u56fe\u8868\n function initPerformanceChart() {\n const ctx = document.getElementById('performance-chart').getContext('2d');\n \n const chart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: Array.from({length: 10}, (_, i) => i + 1),\n datasets: [\n {\n label: '\u8bad\u7ec3\u51c6\u786e\u7387',\n data: [0.62, 0.68, 0.73, 0.76, 0.79, 0.82, 0.84, 0.85, 0.86, 0.87],\n borderColor: '#10b981',\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\n borderWidth: 2,\n tension: 0.3,\n fill: true\n },\n {\n label: '\u9a8c\u8bc1\u51c6\u786e\u7387',\n data: [0.59, 0.65, 0.69, 0.72, 0.75, 0.77, 0.78, 0.79, 0.80, 0.81],\n borderColor: '#4f46e5',\n backgroundColor: 'rgba(79, 70, 229, 0.1)',\n borderWidth: 2,\n tension: 0.3,\n fill: true\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'top',\n labels: {\n boxWidth: 10,\n usePointStyle: true,\n pointStyle: 'circle'\n }\n }\n },\n scales: {\n y: {\n min: 0.5,\n max: 1,\n ticks: {\n callback: function(value) {\n return (value * 100) + '%';\n }\n }\n }\n }\n }\n });\n \n return chart;\n }\n \n \/\/ \u521d\u59cb\u5316\u9884\u6d4b\u7ed3\u679c\u56fe\u8868\n function initPredictionChart() {\n const ctx = document.getElementById('prediction-chart').getContext('2d');\n \n const chart = new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['\u559c\u60a6', '\u60ca\u8bb6', '\u4e2d\u6027'],\n datasets: [{\n data: [68, 22, 10],\n backgroundColor: [\n '#4f46e5',\n '#10b981',\n '#f59e0b'\n ],\n borderWidth: 0,\n hoverOffset: 5\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n \n return chart;\n }\n \n \/\/ \u6a21\u62df\u8bad\u7ec3\u8fc7\u7a0b\n function simulateTraining() {\n const startBtn = document.getElementById('start-btn');\n const topStartBtn = document.getElementById('top-start-btn');\n const pauseBtn = document.getElementById('pause-btn');\n const stopBtn = document.getElementById('stop-btn');\n const stepBtn = document.getElementById('step-btn');\n const progressBar = document.getElementById('progress-bar');\n const progressPercentage = document.getElementById('progress-percentage');\n const currentEpoch = document.getElementById('current-epoch');\n const trainAccuracy = document.getElementById('train-accuracy');\n const valAccuracy = document.getElementById('val-accuracy');\n const trainingLog = document.getElementById('training-log');\n const trainingStatus = document.getElementById('training-status');\n \n let progress = 0;\n let epoch = 0;\n const totalEpochs = parseInt(document.getElementById('epochs').value);\n let isTraining = false;\n let trainingInterval;\n \n \/\/ \u8bad\u7ec3\u72b6\u6001\u663e\u793a\u5143\u7d20\n const statusElement = trainingStatus;\n \n \/\/ \u8bad\u7ec3\u6570\u636e\n const trainAccData = [0.62, 0.68, 0.73, 0.76, 0.79, 0.82, 0.84, 0.85, 0.86, 0.87];\n const valAccData = [0.59, 0.65, 0.69, 0.72, 0.75, 0.77, 0.78, 0.79, 0.80, 0.81];\n \n \/\/ \u5f00\u59cb\u8bad\u7ec3\u51fd\u6570\n function startTraining() {\n if (isTraining) return;\n \n isTraining = true;\n statusElement.textContent = '\u8bad\u7ec3\u4e2d';\n statusElement.className = 'px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium';\n \n \/\/ \u542f\u7528\/\u7981\u7528\u6309\u94ae\n startBtn.disabled = true;\n topStartBtn.disabled = true;\n pauseBtn.disabled = false;\n stopBtn.disabled = false;\n stepBtn.disabled = false;\n \n \/\/ \u6dfb\u52a0\u65e5\u5fd7\n addLog('\u5f00\u59cb\u8bad\u7ec3...');\n \n \/\/ \u6a21\u62df\u8bad\u7ec3\u8fdb\u5ea6\n trainingInterval = setInterval(() => {\n progress += 0.5;\n if (progress >= 100) {\n progress = 0;\n epoch++;\n currentEpoch.textContent = `${epoch}\/${totalEpochs}`;\n \n \/\/ \u6a21\u62df\u51c6\u786e\u7387\u63d0\u5347\n const epochProgress = Math.min(epoch, totalEpochs);\n const trainAccIndex = Math.min(Math.floor(epochProgress \/ (totalEpochs \/ 10)), 9);\n const trainAcc = trainAccData[trainAccIndex];\n const valAcc = valAccData[trainAccIndex];\n \n trainAccuracy.textContent = `${(trainAcc * 100).toFixed(1)}%`;\n valAccuracy.textContent = `${(valAcc * 100).toFixed(1)}%`;\n \n addLog(`Epoch ${epoch}\/${totalEpochs} \u5b8c\u6210 - \u8bad\u7ec3\u51c6\u786e\u7387: ${(trainAcc * 100).toFixed(1)}% \u9a8c\u8bc1\u51c6\u786e\u7387: ${(valAcc * 100).toFixed(1)}%`);\n \n \/\/ \u5982\u679c\u8fbe\u5230\u6700\u5927epoch\uff0c\u7ed3\u675f\u8bad\u7ec3\n if (epoch >= totalEpochs) {\n clearInterval(trainingInterval);\n completeTraining();\n return;\n }\n }\n \n progressBar.style.width = `${progress}%`;\n progressPercentage.textContent = `${Math.round(progress)}%`;\n }, 50);\n }\n \n \/\/ \u6682\u505c\u8bad\u7ec3\n function pauseTraining() {\n if (!isTraining) return;\n \n clearInterval(trainingInterval);\n isTraining = false;\n statusElement.textContent = '\u5df2\u6682\u505c';\n statusElement.className = 'px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-medium';\n startBtn.disabled = false;\n startBtn.innerHTML = '<i class=\"fas fa-play mr-2\"><\/i>\u7ee7\u7eed\u8bad\u7ec3';\n topStartBtn.disabled = false;\n topStartBtn.innerHTML = '<i class=\"fas fa-play mr-2\"><\/i>\u7ee7\u7eed\u8bad\u7ec3';\n \n addLog('\u8bad\u7ec3\u5df2\u6682\u505c');\n }\n \n \/\/ \u505c\u6b62\u8bad\u7ec3\n function stopTraining() {\n clearInterval(trainingInterval);\n isTraining = false;\n resetTraining();\n \n addLog('\u8bad\u7ec3\u5df2\u7ec8\u6b62');\n }\n \n \/\/ \u5355\u6b65\u8bad\u7ec3\n function stepTraining() {\n if (isTraining) return;\n \n \/\/ \u5355\u6b65\u6267\u884c\n progress += 5;\n if (progress >= 100) {\n progress = 0;\n epoch++;\n currentEpoch.textContent = `${epoch}\/${totalEpochs}`;\n \n \/\/ \u6a21\u62df\u51c6\u786e\u7387\u63d0\u5347\n const epochProgress = Math.min(epoch, totalEpochs);\n const trainAccIndex = Math.min(Math.floor(epochProgress \/ (totalEpochs \/ 10)), 9);\n const trainAcc = trainAccData[trainAccIndex];\n const valAcc = valAccData[trainAccIndex];\n \n trainAccuracy.textContent = `${(trainAcc * 100).toFixed(1)}%`;\n valAccuracy.textContent = `${(valAcc * 100).toFixed(1)}%`;\n \n addLog(`Epoch ${epoch}\/${totalEpochs} \u5b8c\u6210 - \u8bad\u7ec3\u51c6\u786e\u7387: ${(trainAcc * 100).toFixed(1)}% \u9a8c\u8bc1\u51c6\u786e\u7387: ${(valAcc * 100).toFixed(1)}%`);\n \n \/\/ \u5982\u679c\u8fbe\u5230\u6700\u5927epoch\uff0c\u7ed3\u675f\u8bad\u7ec3\n if (epoch >= totalEpochs) {\n completeTraining();\n return;\n }\n }\n \n progressBar.style.width = `${progress}%`;\n progressPercentage.textContent = `${Math.round(progress)}%`;\n }\n \n \/\/ \u5b8c\u6210\u8bad\u7ec3\n function completeTraining() {\n isTraining = false;\n statusElement.textContent = '\u5df2\u5b8c\u6210';\n statusElement.className = 'px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium';\n \n startBtn.disabled = false;\n startBtn.innerHTML = '<i class=\"fas fa-redo mr-2\"><\/i>\u91cd\u65b0\u8bad\u7ec3';\n topStartBtn.disabled = false;\n topStartBtn.innerHTML = '<i class=\"fas fa-redo mr-2\"><\/i>\u91cd\u65b0\u8bad\u7ec3';\n pauseBtn.disabled = true;\n stepBtn.disabled = true;\n \n addLog('\u8bad\u7ec3\u5b8c\u6210\uff01\u6700\u7ec8\u51c6\u786e\u7387: ' + valAccuracy.textContent);\n }\n \n \/\/ \u91cd\u7f6e\u8bad\u7ec3\n function resetTraining() {\n progress = 0;\n epoch = 0;\n progressBar.style.width = '0%';\n progressPercentage.textContent = '0%';\n currentEpoch.textContent = `0\/${totalEpochs}`;\n trainAccuracy.textContent = '0%';\n valAccuracy.textContent = '0%';\n \n statusElement.textContent = '\u672a\u5f00\u59cb';\n statusElement.className = 'px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium';\n \n startBtn.disabled = false;\n startBtn.innerHTML = '<i class=\"fas fa-play mr-2\"><\/i>\u5f00\u59cb\u8bad\u7ec3';\n topStartBtn.disabled = false;\n topStartBtn.innerHTML = '<i class=\"fas fa-play mr-2\"><\/i>\u5f00\u59cb\u8bad\u7ec3';\n pauseBtn.disabled = true;\n stopBtn.disabled = true;\n stepBtn.disabled = true;\n }\n \n \/\/ \u6dfb\u52a0\u65e5\u5fd7\n function addLog(message) {\n const now = new Date();\n const timeString = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`;\n \n const logEntry = document.createElement('div');\n logEntry.innerHTML = `<span class=\"text-gray-500\">[${timeString}]<\/span> ${message}`;\n trainingLog.appendChild(logEntry);\n \n \/\/ \u6eda\u52a8\u5230\u5e95\u90e8\n trainingLog.scrollTop = trainingLog.scrollHeight;\n }\n \n \/\/ \u4e8b\u4ef6\u7ed1\u5b9a\n startBtn.addEventListener('click', startTraining);\n topStartBtn.addEventListener('click', startTraining);\n pauseBtn.addEventListener('click', pauseTraining);\n stopBtn.addEventListener('click', stopTraining);\n stepBtn.addEventListener('click', stepTraining);\n \n \/\/ \u521d\u59cb\u5316\n resetTraining();\n }\n \n \/\/ \u521d\u59cb\u5316\u9884\u6d4b\u529f\u80fd\n function initPrediction() {\n const predictBtn = document.getElementById('predict-btn');\n const textInput = document.getElementById('text-input');\n const joyPercent = document.getElementById('joy-percent');\n const surprisePercent = document.getElementById('surprise-percent');\n const neutralPercent = document.getElementById('neutral-percent');\n const modelAnalysis = document.getElementById('model-analysis');\n \n predictBtn.addEventListener('click', function() {\n const text = textInput.value.toLowerCase();\n \n \/\/ \u6839\u636e\u8f93\u5165\u6587\u672c\u751f\u6210\u9884\u6d4b\u7ed3\u679c\n let joy = 65;\n let surprise = 20;\n let neutral = 15;\n let analysis = \"\";\n \n if (text.includes('\u9ad8\u5174') || text.includes('\u5f00\u5fc3') || text.includes('\u5feb\u4e50')) {\n joy = 85;\n surprise = 10;\n neutral = 5;\n analysis = \"\u6587\u672c\u8868\u8fbe\u4e86\u5f3a\u70c8\u7684\u79ef\u6781\u60c5\u7eea\uff0c\u5173\u952e\u8bcd\u8868\u660e\u7528\u6237\u5904\u4e8e\u9ad8\u5174\u72b6\u6001\u3002\";\n } else if (text.includes('\u60ca\u8bb6') || text.includes('\u610f\u5916') || text.includes('\u60ca\u559c')) {\n joy = 35;\n surprise = 55;\n neutral = 10;\n analysis = \"\u6587\u672c\u5305\u542b\u60ca\u8bb6\u76f8\u5173\u7684\u8bcd\u6c47\uff0c\u8868\u660e\u7528\u6237\u53ef\u80fd\u7ecf\u5386\u4e86\u610f\u5916\u4e8b\u4ef6\u3002\";\n } else if (text.includes('\u4e2d') || text.includes('\u4e00\u822c') || text.includes('\u5e73\u5e38')) {\n joy = 20;\n surprise = 15;\n neutral = 65;\n analysis = \"\u6587\u672c\u8868\u8fbe\u4e86\u4e2d\u6027\u60c5\u7eea\uff0c\u6ca1\u6709\u660e\u663e\u7684\u79ef\u6781\u6216\u6d88\u6781\u503e\u5411\u3002\";\n } else {\n \/\/ \u9ed8\u8ba4\u5206\u6790\n analysis = \"\u6587\u672c\u8868\u8fbe\u4e86\u79ef\u6781\u60c5\u7eea\uff0c\u8bed\u97f3\u8bed\u8c03\u4e0a\u626c\uff0c\u9762\u90e8\u8868\u60c5\u663e\u793a\u5fae\u7b11\u548c\u5174\u594b\uff0c\u7efc\u5408\u5224\u65ad\u4e3a\u559c\u60a6\u60c5\u7eea\u3002\";\n }\n \n \/\/ \u66f4\u65b0UI\n joyPercent.textContent = `${joy}%`;\n surprisePercent.textContent = `${surprise}%`;\n neutralPercent.textContent = `${neutral}%`;\n \n modelAnalysis.innerHTML = `\n <p class=\"text-sm text-primary font-medium\">\u6a21\u578b\u5206\u6790<\/p>\n <p class=\"text-xs text-gray-600 mt-1\">${analysis}<\/p>\n `;\n \n \/\/ \u66f4\u65b0\u9884\u6d4b\u56fe\u8868\n updatePredictionChart(joy, surprise, neutral);\n });\n }\n \n \/\/ \u66f4\u65b0\u9884\u6d4b\u56fe\u8868\n function updatePredictionChart(joy, surprise, neutral) {\n if (window.predictionChart) {\n window.predictionChart.destroy();\n }\n \n const ctx = document.getElementById('prediction-chart').getContext('2d');\n window.predictionChart = new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['\u559c\u60a6', '\u60ca\u8bb6', '\u4e2d\u6027'],\n datasets: [{\n data: [joy, surprise, neutral],\n backgroundColor: [\n '#4f46e5',\n '#10b981',\n '#f59e0b'\n ],\n borderWidth: 0,\n hoverOffset: 5\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n }\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u521d\u59cb\u5316\n document.addEventListener('DOMContentLoaded', function() {\n initSliders();\n window.performanceChart = initPerformanceChart();\n window.predictionChart = initPredictionChart();\n simulateTraining();\n initPrediction();\n \n \/\/ \u66f4\u65b0epoch\u663e\u793a\n const epochsInput = document.getElementById('epochs');\n epochsInput.addEventListener('input', function() {\n document.getElementById('current-epoch').textContent = `0\/${this.value}`;\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u4eba\u5de5\u667a\u80fd\u60c5\u611f\u591a\u6a21\u6001\u8bad\u7ec3\u5e73\u53f0 \u60c5\u611f\u5206\u6790\u6a21\u578b v3.2.1 \u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u4e0e\u5206\u7c7b\u7cfb\u7edf – \u8bad\u7ec3\u4f1a\u8bdd # […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":228,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1317","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/1317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=1317"}],"version-history":[{"count":4,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/1317\/revisions"}],"predecessor-version":[{"id":1658,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/1317\/revisions\/1658"}],"up":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/228"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=1317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1317,"date":"2025-07-23T12:34:36","date_gmt":"2025-07-23T04:34:36","guid":{"rendered":"https:\/\/www.affectivechain.com\/?page_id=1317"},"modified":"2025-07-30T12:32:48","modified_gmt":"2025-07-30T04:32:48","slug":"api","status":"publish","type":"page","link":"https:\/\/www.affectivechain.com\/index.php\/heartsync\/api\/","title":{"rendered":"\u591a\u6a21\u6001\u8bad\u7ec3\u5e73\u53f0"},"content":{"rendered":"\n\n\n\n \n \n \u4eba\u5de5\u667a\u80fd\u60c5\u611f\u591a\u6a21\u6001\u8bad\u7ec3\u5e73\u53f0<\/title>\n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@4.4.8\/dist\/chart.umd.min.js\"><\/script>\n <script>\n tailwind.config = {\n theme: {\n extend: {\n colors: {\n primary: '#4f46e5', \/\/ \u4e3b\u8272\u8c03\uff1a\u975b\u84dd\u8272\n secondary: '#10b981', \/\/ \u8f85\u52a9\u8272\uff1a\u7eff\u8272\n accent: '#f59e0b', \/\/ \u5f3a\u8c03\u8272\uff1a\u7425\u73c0\u8272\n danger: '#ef4444', \/\/ \u5371\u9669\u8272\uff1a\u7ea2\u8272\n dark: '#1e293b', \/\/ \u6df1\u8272\u80cc\u666f\n 'dark-light': '#334155', \/\/ \u6d45\u6df1\u8272\u80cc\u666f\n light: '#f8fafc', \/\/ \u6d45\u8272\u80cc\u666f\n },\n fontFamily: {\n sans: ['Noto Sans SC', 'sans-serif'],\n },\n }\n }\n }\n <\/script>\n <style type=\"text\/tailwindcss\">\n @layer utilities {\n .content-auto {\n content-visibility: auto;\n }\n .glass {\n background: rgba(255, 255, 255, 0.1);\n backdrop-filter: blur(12px);\n -webkit-backdrop-filter: blur(12px);\n }\n .card-hover {\n transition: all 0.3s ease;\n }\n .card-hover:hover {\n transform: translateY(-3px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n }\n .gradient-primary {\n background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);\n }\n .slider-thumb::-webkit-slider-thumb {\n -webkit-appearance: none;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #4f46e5;\n cursor: pointer;\n box-shadow: 0 2px 8px rgba(79, 70, 229, 0.5);\n transition: all 0.2s ease;\n }\n .slider-thumb::-webkit-slider-thumb:hover {\n transform: scale(1.1);\n background: #6366f1;\n }\n .modal-backdrop {\n backdrop-filter: blur(5px);\n background-color: rgba(0, 0, 0, 0.5);\n }\n .scrollbar-thin {\n scrollbar-width: thin;\n }\n .scrollbar-thin::-webkit-scrollbar {\n width: 6px;\n height: 6px;\n }\n .scrollbar-thin::-webkit-scrollbar-thumb {\n background-color: rgba(79, 70, 229, 0.5);\n border-radius: 3px;\n }\n .scrollbar-thin::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.05);\n }\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-50 font-sans text-dark min-h-screen\">\n\n \n <main class=\"container mx-auto px-4 py-6\">\n \n <div class=\"mb-6 bg-white rounded-xl shadow-sm p-4 border border-gray-100\">\n <div class=\"flex flex-wrap justify-between items-center gap-4\">\n <div>\n <h2 class=\"text-xl font-bold text-dark\">\u60c5\u611f\u5206\u6790\u6a21\u578b v3.2.1<\/h2>\n <p class=\"text-gray-500 text-sm mt-1\">\u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u4e0e\u5206\u7c7b\u7cfb\u7edf – \u8bad\u7ec3\u4f1a\u8bdd #8742<\/p>\n <\/div>\n \n <div class=\"flex flex-wrap gap-3\">\n <button class=\"px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors flex items-center\">\n <i class=\"fas fa-save mr-2\"><\/i>\u4fdd\u5b58\u914d\u7f6e\n <\/button>\n <button id=\"top-start-btn\" class=\"px-4 py-2 bg-primary hover:bg-primary\/90 text-white rounded-lg text-sm font-medium transition-colors flex items-center\">\n <i class=\"fas fa-play mr-2\"><\/i>\u5f00\u59cb\u8bad\u7ec3\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-6\">\n \n <div class=\"lg:col-span-3 space-y-6\">\n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-sliders-h text-primary mr-2\"><\/i>\u6a21\u578b\u53c2\u6570\u8bbe\u7f6e\n <\/h3>\n \n <div class=\"space-y-5\">\n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u5b66\u4e60\u7387<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"learning-rate-value\">0.0012<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"learning-rate\" \n min=\"0.0001\" \n max=\"0.1\" \n step=\"0.0001\" \n value=\"0.0012\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>0.0001<\/span>\n <span>0.1<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u6279\u6b21\u5927\u5c0f<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"batch-size-value\">32<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"batch-size\" \n min=\"8\" \n max=\"128\" \n step=\"8\" \n value=\"32\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>8<\/span>\n <span>128<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u8fed\u4ee3\u6b21\u6570<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"epochs-value\">50<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"epochs\" \n min=\"10\" \n max=\"200\" \n step=\"10\" \n value=\"50\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>10<\/span>\n <span>200<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">Dropout\u7387<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"dropout-value\">0.35<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"dropout\" \n min=\"0\" \n max=\"0.8\" \n step=\"0.05\" \n value=\"0.35\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <div class=\"flex justify-between text-xs text-gray-500 mt-1\">\n <span>0<\/span>\n <span>0.8<\/span>\n <\/div>\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">L2\u6b63\u5219\u5316<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"l2-value\">0.0005<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"l2\" \n min=\"0\" \n max=\"0.01\" \n step=\"0.0001\" \n value=\"0.0005\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <\/div>\n <\/div>\n \n <button class=\"mt-6 w-full py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50 transition-colors text-sm font-medium\">\n \u91cd\u7f6e\u4e3a\u9ed8\u8ba4\u53c2\u6570\n <\/button>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-cubes text-primary mr-2\"><\/i>\u591a\u6a21\u6001\u6743\u91cd\u8bbe\u7f6e\n <\/h3>\n \n <div class=\"space-y-5\">\n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u6587\u672c\u6a21\u6001\u6743\u91cd<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"text-weight-value\">40%<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"text-weight\" \n min=\"0\" \n max=\"100\" \n step=\"5\" \n value=\"40\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u8bed\u97f3\u6a21\u6001\u6743\u91cd<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"audio-weight-value\">30%<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"audio-weight\" \n min=\"0\" \n max=\"100\" \n step=\"5\" \n value=\"30\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <\/div>\n \n \n <div>\n <div class=\"flex justify-between items-center mb-2\">\n <label class=\"text-sm font-medium text-gray-700\">\u56fe\u50cf\u6a21\u6001\u6743\u91cd<\/label>\n <span class=\"text-sm font-semibold text-primary\" id=\"image-weight-value\">30%<\/span>\n <\/div>\n <input \n type=\"range\" \n id=\"image-weight\" \n min=\"0\" \n max=\"100\" \n step=\"5\" \n value=\"30\" \n class=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer slider-thumb\"\n >\n <\/div>\n <\/div>\n \n <div class=\"mt-4 p-3 bg-blue-50 rounded-lg border border-blue-100\">\n <p class=\"text-sm text-blue-700 flex items-start\">\n <i class=\"fas fa-info-circle mt-0.5 mr-2\"><\/i>\n <span>\u6743\u91cd\u603b\u548c\u5c06\u81ea\u52a8\u5f52\u4e00\u5316\uff0c\u8c03\u6574\u4e00\u9879\u4f1a\u5f71\u54cd\u5176\u4ed6\u9879\u7684\u76f8\u5bf9\u6bd4\u4f8b<\/span>\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-heart text-primary mr-2\"><\/i>\u60c5\u611f\u7c7b\u522b\u8bbe\u7f6e\n <\/h3>\n \n <div class=\"space-y-3\">\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-happy\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-happy\" class=\"ml-2 text-sm text-gray-700\">\u559c\u60a6<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-sad\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-sad\" class=\"ml-2 text-sm text-gray-700\">\u60b2\u4f24<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-angry\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-angry\" class=\"ml-2 text-sm text-gray-700\">\u6124\u6012<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-fear\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-fear\" class=\"ml-2 text-sm text-gray-700\">\u6050\u60e7<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-surprise\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-surprise\" class=\"ml-2 text-sm text-gray-700\">\u60ca\u8bb6<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-disgust\" class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-disgust\" class=\"ml-2 text-sm text-gray-700\">\u538c\u6076<\/label>\n <\/div>\n <div class=\"flex items-center\">\n <input type=\"checkbox\" id=\"emotion-neutral\" checked class=\"w-4 h-4 text-primary rounded border-gray-300 focus:ring-primary\">\n <label for=\"emotion-neutral\" class=\"ml-2 text-sm text-gray-700\">\u4e2d\u6027<\/label>\n <\/div>\n <\/div>\n \n <button class=\"mt-4 w-full py-2 text-sm text-primary hover:text-primary\/80 transition-colors flex items-center justify-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> \u6dfb\u52a0\u81ea\u5b9a\u4e49\u60c5\u611f\u7c7b\u522b\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:col-span-6 space-y-6\">\n \n <div id=\"training-monitor-section\" class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-tachometer-alt text-primary mr-2\"><\/i>\u8bad\u7ec3\u72b6\u6001\u76d1\u63a7\n <\/h3>\n <div id=\"training-status\" class=\"px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium\">\n \u672a\u5f00\u59cb\n <\/div>\n <\/div>\n \n <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mb-5\">\n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100\">\n <div class=\"text-xs text-gray-500 mb-1\">\u5f53\u524d epoch<\/div>\n <div class=\"text-2xl font-bold text-dark\" id=\"current-epoch\">0\/50<\/div>\n <\/div>\n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100\">\n <div class=\"text-xs text-gray-500 mb-1\">\u8bad\u7ec3\u51c6\u786e\u7387<\/div>\n <div class=\"text-2xl font-bold text-secondary\" id=\"train-accuracy\">0%<\/div>\n <\/div>\n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100\">\n <div class=\"text-xs text-gray-500 mb-1\">\u9a8c\u8bc1\u51c6\u786e\u7387<\/div>\n <div class=\"text-2xl font-bold text-primary\" id=\"val-accuracy\">0%<\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mb-5\">\n <div class=\"flex justify-between items-center mb-2\">\n <span class=\"text-sm text-gray-600\">\u8bad\u7ec3\u8fdb\u5ea6<\/span>\n <span class=\"text-sm font-medium text-primary\" id=\"progress-percentage\">0%<\/span>\n <\/div>\n <div class=\"w-full h-2 bg-gray-200 rounded-full overflow-hidden\">\n <div id=\"progress-bar\" class=\"h-full gradient-primary w-0 transition-all duration-500\"><\/div>\n <\/div>\n <\/div>\n \n <div class=\"flex flex-wrap gap-3\">\n <button id=\"start-btn\" class=\"px-4 py-2 bg-primary hover:bg-primary\/90 text-white rounded-lg text-sm font-medium transition-colors flex items-center\">\n <i class=\"fas fa-play mr-2\"><\/i>\u5f00\u59cb\u8bad\u7ec3\n <\/button>\n <button id=\"pause-btn\" class=\"px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors flex items-center\" disabled>\n <i class=\"fas fa-pause mr-2\"><\/i>\u6682\u505c\n <\/button>\n <button id=\"step-btn\" class=\"px-4 py-2 bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-lg text-sm font-medium transition-colors flex items-center\" disabled>\n <i class=\"fas fa-step-forward mr-2\"><\/i>\u5355\u6b65\u6267\u884c\n <\/button>\n <button id=\"stop-btn\" class=\"px-4 py-2 bg-danger hover:bg-danger\/90 text-white rounded-lg text-sm font-medium transition-colors flex items-center ml-auto\" disabled>\n <i class=\"fas fa-stop mr-2\"><\/i>\u7ec8\u6b62\u8bad\u7ec3\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-chart-line text-primary mr-2\"><\/i>\u6a21\u578b\u6027\u80fd\u6307\u6807\n <\/h3>\n <div class=\"flex gap-2\">\n <button id=\"accuracy-btn\" class=\"px-3 py-1 text-xs bg-primary\/10 text-primary rounded-full font-medium\">\u51c6\u786e\u7387<\/button>\n <button id=\"loss-btn\" class=\"px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition-colors\">\u635f\u5931\u503c<\/button>\n <button id=\"f1-btn\" class=\"px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded-full font-medium hover:bg-gray-200 transition-colors\">F1\u5206\u6570<\/button>\n <\/div>\n <\/div>\n \n <div class=\"h-64\">\n <canvas id=\"performance-chart\"><\/canvas>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-table text-primary mr-2\"><\/i>\u6df7\u6dc6\u77e9\u9635\n <\/h3>\n \n <div class=\"overflow-x-auto scrollbar-thin\">\n <table class=\"min-w-full\">\n <thead>\n <tr class=\"bg-gray-50\">\n <th class=\"py-2 px-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u9884\u6d4b\\\u5b9e\u9645<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u559c\u60a6<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u60b2\u4f24<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u6124\u6012<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u6050\u60e7<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u60ca\u8bb6<\/th>\n <th class=\"py-2 px-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider border border-gray-200\">\u4e2d\u6027<\/th>\n <\/tr>\n <\/thead>\n <tbody class=\"bg-white divide-y divide-gray-200\">\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u559c\u60a6<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">87<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">5<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u60b2\u4f24<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">82<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">6<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u6124\u6012<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">5<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">88<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u6050\u60e7<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">5<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">83<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u60ca\u8bb6<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">6<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">85<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <\/tr>\n <tr>\n <td class=\"py-2 px-3 text-xs font-medium text-gray-500 border border-gray-200\">\u4e2d\u6027<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">3<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">4<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">1<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200\">2<\/td>\n <td class=\"py-2 px-3 text-center text-sm font-medium text-gray-900 border border-gray-200 bg-green-50\">88<\/td>\n <\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"lg:col-span-3 space-y-6\">\n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-database text-primary mr-2\"><\/i>\u6570\u636e\u96c6\u4fe1\u606f\n <\/h3>\n \n <div class=\"space-y-4\">\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u6570\u636e\u96c6\u540d\u79f0<\/span>\n <span class=\"text-sm font-medium\">\u60c5\u611f\u591a\u6a21\u6001\u6570\u636e\u96c6 v2.1<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u6837\u672c\u603b\u91cf<\/span>\n <span class=\"text-sm font-medium\">24,856<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u8bad\u7ec3\u96c6<\/span>\n <span class=\"text-sm font-medium\">19,885 (80%)<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u9a8c\u8bc1\u96c6<\/span>\n <span class=\"text-sm font-medium\">2,486 (10%)<\/span>\n <\/div>\n <div class=\"flex justify-between items-center pb-3 border-b border-gray-100\">\n <span class=\"text-sm text-gray-600\">\u6d4b\u8bd5\u96c6<\/span>\n <span class=\"text-sm font-medium\">2,485 (10%)<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <span class=\"text-sm text-gray-600\">\u6570\u636e\u5e73\u8861\u5ea6<\/span>\n <span class=\"text-sm font-medium text-secondary\">\u826f\u597d<\/span>\n <\/div>\n <\/div>\n \n <button class=\"mt-5 w-full py-2 text-sm text-primary hover:text-primary\/80 transition-colors flex items-center justify-center\">\n <i class=\"fas fa-exchange-alt mr-1\"><\/i> \u66f4\u6362\u6570\u636e\u96c6\n <\/button>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-file-import text-primary mr-2\"><\/i>\u6d4b\u8bd5\u6570\u636e\u8f93\u5165\n <\/h3>\n \n <div class=\"space-y-4\">\n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u6587\u672c\u8f93\u5165<\/label>\n <textarea \n id=\"text-input\"\n class=\"w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary text-sm\" \n rows=\"3\" \n placeholder=\"\u8f93\u5165\u6587\u672c\u4ee5\u6d4b\u8bd5\u6a21\u578b...\">\u4eca\u5929\u771f\u662f\u592a\u68d2\u4e86\uff01\u6211\u5f97\u5230\u4e86\u68a6\u5bd0\u4ee5\u6c42\u7684\u5de5\u4f5c\u673a\u4f1a\uff0c\u611f\u89c9\u6574\u4e2a\u4eba\u90fd\u5145\u6ee1\u4e86\u80fd\u91cf\uff01<\/textarea>\n <\/div>\n \n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u8bed\u97f3\u8f93\u5165<\/label>\n <div class=\"border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-colors\">\n <button class=\"w-12 h-12 bg-primary\/10 hover:bg-primary\/20 text-primary rounded-full flex items-center justify-center mx-auto mb-2 transition-colors\">\n <i class=\"fas fa-microphone\"><\/i>\n <\/button>\n <p class=\"text-xs text-gray-500\">\u70b9\u51fb\u5f55\u97f3\u6216\u62d6\u653e\u97f3\u9891\u6587\u4ef6<\/p>\n <\/div>\n <\/div>\n \n \n <div>\n <label class=\"block text-sm font-medium text-gray-700 mb-1\">\u56fe\u50cf\u8f93\u5165<\/label>\n <div class=\"border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-primary transition-colors\">\n <img decoding=\"async\" src=\"https:\/\/picsum.photos\/id\/64\/300\/200\" alt=\"\u793a\u4f8b\u56fe\u50cf\" class=\"max-w-full h-24 object-cover rounded mx-auto mb-2\">\n <p class=\"text-xs text-gray-500\">\u70b9\u51fb\u4e0a\u4f20\u6216\u62d6\u653e\u56fe\u50cf\u6587\u4ef6<\/p>\n <\/div>\n <\/div>\n \n <button id=\"predict-btn\" class=\"w-full py-2 gradient-primary text-white rounded-lg text-sm font-medium transition-colors flex items-center justify-center\">\n <i class=\"fas fa-play-circle mr-2\"><\/i> \u8fd0\u884c\u6a21\u578b\u9884\u6d4b\n <\/button>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-chart-pie text-primary mr-2\"><\/i>\u9884\u6d4b\u7ed3\u679c\n <\/h3>\n \n <div class=\"h-48 mb-4\">\n <canvas id=\"prediction-chart\"><\/canvas>\n <\/div>\n \n <div class=\"space-y-2\">\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center\">\n <span class=\"w-3 h-3 rounded-full bg-primary mr-2\"><\/span>\n <span class=\"text-sm text-gray-700\">\u559c\u60a6<\/span>\n <\/div>\n <span id=\"joy-percent\" class=\"text-sm font-medium\">68%<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center\">\n <span class=\"w-3 h-3 rounded-full bg-secondary mr-2\"><\/span>\n <span class=\"text-sm text-gray-700\">\u60ca\u8bb6<\/span>\n <\/div>\n <span id=\"surprise-percent\" class=\"text-sm font-medium\">22%<\/span>\n <\/div>\n <div class=\"flex justify-between items-center\">\n <div class=\"flex items-center\">\n <span class=\"w-3 h-3 rounded-full bg-accent mr-2\"><\/span>\n <span class=\"text-sm text-gray-700\">\u4e2d\u6027<\/span>\n <\/div>\n <span id=\"neutral-percent\" class=\"text-sm font-medium\">10%<\/span>\n <\/div>\n <\/div>\n \n <div id=\"model-analysis\" class=\"mt-4 p-3 bg-primary\/5 rounded-lg border border-primary\/10\">\n <p class=\"text-sm text-primary font-medium\">\u6a21\u578b\u5206\u6790<\/p>\n <p class=\"text-xs text-gray-600 mt-1\">\n \u6587\u672c\u8868\u8fbe\u4e86\u79ef\u6781\u60c5\u7eea\uff0c\u8bed\u97f3\u8bed\u8c03\u4e0a\u626c\uff0c\u9762\u90e8\u8868\u60c5\u663e\u793a\u5fae\u7b11\u548c\u5174\u594b\uff0c\u7efc\u5408\u5224\u65ad\u4e3a\u559c\u60a6\u60c5\u7eea\u3002\n <\/p>\n <\/div>\n <\/div>\n \n \n <div class=\"bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <h3 class=\"text-lg font-semibold mb-4 flex items-center\">\n <i class=\"fas fa-code-branch text-primary mr-2\"><\/i>\u6a21\u578b\u7248\u672c\n <\/h3>\n \n <div class=\"space-y-3\">\n <div class=\"p-3 bg-primary\/5 rounded-lg border border-primary\/10 flex justify-between items-center\">\n <div>\n <p class=\"text-sm font-medium\">\u5f53\u524d\u6a21\u578b<\/p>\n <p class=\"text-xs text-gray-500\">v3.2.1 – 2023-06-15<\/p>\n <\/div>\n <span class=\"px-2 py-1 bg-primary\/10 text-primary text-xs rounded-full\">\u6d3b\u8dc3<\/span>\n <\/div>\n \n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100 flex justify-between items-center\">\n <div>\n <p class=\"text-sm font-medium\">\u5386\u53f2\u7248\u672c<\/p>\n <p class=\"text-xs text-gray-500\">v3.2.0 – 2023-06-10<\/p>\n <\/div>\n <button class=\"text-xs text-primary hover:text-primary\/80\">\u5207\u6362<\/button>\n <\/div>\n \n <div class=\"p-3 bg-gray-50 rounded-lg border border-gray-100 flex justify-between items-center\">\n <div>\n <p class=\"text-sm font-medium\">\u5386\u53f2\u7248\u672c<\/p>\n <p class=\"text-xs text-gray-500\">v3.1.2 – 2023-06-01<\/p>\n <\/div>\n <button class=\"text-xs text-primary hover:text-primary\/80\">\u5207\u6362<\/button>\n <\/div>\n <\/div>\n \n <button class=\"mt-4 w-full py-2 text-sm text-primary hover:text-primary\/80 transition-colors flex items-center justify-center\">\n <i class=\"fas fa-plus-circle mr-1\"><\/i> \u521b\u5efa\u65b0\u7248\u672c\n <\/button>\n <\/div>\n <\/div>\n <\/div>\n \n \n <div class=\"mt-6 bg-white rounded-xl shadow-sm p-5 border border-gray-100 card-hover\">\n <div class=\"flex justify-between items-center mb-4\">\n <h3 class=\"text-lg font-semibold flex items-center\">\n <i class=\"fas fa-file-alt text-primary mr-2\"><\/i>\u8bad\u7ec3\u65e5\u5fd7\n <\/h3>\n <button class=\"text-sm text-primary hover:text-primary\/80 transition-colors\">\n <i class=\"fas fa-download mr-1\"><\/i>\u5bfc\u51fa\u65e5\u5fd7\n <\/button>\n <\/div>\n \n <div class=\"h-40 bg-gray-50 rounded-lg p-3 overflow-y-auto scrollbar-thin text-xs font-mono text-gray-700 space-y-1\" id=\"training-log\">\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:00]<\/span> \u521d\u59cb\u5316\u8bad\u7ec3\u73af\u5883…<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:02]<\/span> \u52a0\u8f7d\u6570\u636e\u96c6: \u60c5\u611f\u591a\u6a21\u6001\u6570\u636e\u96c6 v2.1<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:05]<\/span> \u6570\u636e\u96c6\u52a0\u8f7d\u5b8c\u6210\uff0c\u517124,856\u4e2a\u6837\u672c<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:07]<\/span> \u521d\u59cb\u5316\u6a21\u578b\u67b6\u6784: \u591a\u6a21\u6001\u60c5\u611f\u5206\u7c7b\u5668 v3.2<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:10]<\/span> \u6a21\u578b\u53c2\u6570\u8bbe\u7f6e\u5b8c\u6210<\/div>\n <div><span class=\"text-gray-500\">[2023-06-15 14:30:12]<\/span> \u7b49\u5f85\u8bad\u7ec3\u5f00\u59cb…<\/div>\n <\/div>\n <\/div>\n <\/main>\n\n <script>\n \/\/ \u521d\u59cb\u5316\u6ed1\u5757\u663e\u793a\u503c\n function initSliders() {\n const sliders = [\n { id: 'learning-rate', type: 'decimal' },\n { id: 'batch-size', type: 'integer' },\n { id: 'epochs', type: 'integer' },\n { id: 'dropout', type: 'decimal' },\n { id: 'l2', type: 'decimal' },\n { id: 'text-weight', type: 'percent' },\n { id: 'audio-weight', type: 'percent' },\n { id: 'image-weight', type: 'percent' }\n ];\n \n sliders.forEach(slider => {\n const element = document.getElementById(slider.id);\n const valueDisplay = document.getElementById(`${slider.id}-value`);\n \n \/\/ \u8bbe\u7f6e\u521d\u59cb\u663e\u793a\u503c\n updateSliderDisplay(element, valueDisplay, slider.type);\n \n \/\/ \u6dfb\u52a0\u4e8b\u4ef6\u76d1\u542c\n element.addEventListener('input', function() {\n updateSliderDisplay(this, valueDisplay, slider.type);\n \n \/\/ \u5904\u7406\u591a\u6a21\u6001\u6743\u91cd\u7684\u81ea\u52a8\u5f52\u4e00\u5316\n if (slider.id.includes('weight')) {\n normalizeWeights();\n }\n });\n });\n }\n \n \/\/ \u66f4\u65b0\u6ed1\u5757\u663e\u793a\u503c\n function updateSliderDisplay(slider, displayElement, type) {\n if (type === 'percent') {\n displayElement.textContent = `${slider.value}%`;\n } else if (type === 'decimal') {\n displayElement.textContent = parseFloat(slider.value).toFixed(4);\n } else if (type === 'integer') {\n displayElement.textContent = slider.value;\n }\n }\n \n \/\/ \u5f52\u4e00\u5316\u591a\u6a21\u6001\u6743\u91cd\n function normalizeWeights() {\n const textWeight = parseInt(document.getElementById('text-weight').value);\n const audioWeight = parseInt(document.getElementById('audio-weight').value);\n const imageWeight = parseInt(document.getElementById('image-weight').value);\n \n const total = textWeight + audioWeight + imageWeight;\n if (total === 0) return;\n \n \/\/ \u8ba1\u7b97\u5f52\u4e00\u5316\u540e\u7684\u767e\u5206\u6bd4\n const textPercent = Math.round((textWeight \/ total) * 100);\n const audioPercent = Math.round((audioWeight \/ total) * 100);\n const imagePercent = 100 - textPercent - audioPercent;\n \n \/\/ \u66f4\u65b0\u663e\u793a\u503c\uff08\u4e0d\u4fee\u6539\u6ed1\u5757\u5b9e\u9645\u503c\uff09\n document.getElementById('text-weight-value').textContent = `${textPercent}%`;\n document.getElementById('audio-weight-value').textContent = `${audioPercent}%`;\n document.getElementById('image-weight-value').textContent = `${imagePercent}%`;\n }\n \n \/\/ \u521d\u59cb\u5316\u6027\u80fd\u56fe\u8868\n function initPerformanceChart() {\n const ctx = document.getElementById('performance-chart').getContext('2d');\n \n const chart = new Chart(ctx, {\n type: 'line',\n data: {\n labels: Array.from({length: 10}, (_, i) => i + 1),\n datasets: [\n {\n label: '\u8bad\u7ec3\u51c6\u786e\u7387',\n data: [0.62, 0.68, 0.73, 0.76, 0.79, 0.82, 0.84, 0.85, 0.86, 0.87],\n borderColor: '#10b981',\n backgroundColor: 'rgba(16, 185, 129, 0.1)',\n borderWidth: 2,\n tension: 0.3,\n fill: true\n },\n {\n label: '\u9a8c\u8bc1\u51c6\u786e\u7387',\n data: [0.59, 0.65, 0.69, 0.72, 0.75, 0.77, 0.78, 0.79, 0.80, 0.81],\n borderColor: '#4f46e5',\n backgroundColor: 'rgba(79, 70, 229, 0.1)',\n borderWidth: 2,\n tension: 0.3,\n fill: true\n }\n ]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n plugins: {\n legend: {\n position: 'top',\n labels: {\n boxWidth: 10,\n usePointStyle: true,\n pointStyle: 'circle'\n }\n }\n },\n scales: {\n y: {\n min: 0.5,\n max: 1,\n ticks: {\n callback: function(value) {\n return (value * 100) + '%';\n }\n }\n }\n }\n }\n });\n \n return chart;\n }\n \n \/\/ \u521d\u59cb\u5316\u9884\u6d4b\u7ed3\u679c\u56fe\u8868\n function initPredictionChart() {\n const ctx = document.getElementById('prediction-chart').getContext('2d');\n \n const chart = new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['\u559c\u60a6', '\u60ca\u8bb6', '\u4e2d\u6027'],\n datasets: [{\n data: [68, 22, 10],\n backgroundColor: [\n '#4f46e5',\n '#10b981',\n '#f59e0b'\n ],\n borderWidth: 0,\n hoverOffset: 5\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n \n return chart;\n }\n \n \/\/ \u6a21\u62df\u8bad\u7ec3\u8fc7\u7a0b\n function simulateTraining() {\n const startBtn = document.getElementById('start-btn');\n const topStartBtn = document.getElementById('top-start-btn');\n const pauseBtn = document.getElementById('pause-btn');\n const stopBtn = document.getElementById('stop-btn');\n const stepBtn = document.getElementById('step-btn');\n const progressBar = document.getElementById('progress-bar');\n const progressPercentage = document.getElementById('progress-percentage');\n const currentEpoch = document.getElementById('current-epoch');\n const trainAccuracy = document.getElementById('train-accuracy');\n const valAccuracy = document.getElementById('val-accuracy');\n const trainingLog = document.getElementById('training-log');\n const trainingStatus = document.getElementById('training-status');\n \n let progress = 0;\n let epoch = 0;\n const totalEpochs = parseInt(document.getElementById('epochs').value);\n let isTraining = false;\n let trainingInterval;\n \n \/\/ \u8bad\u7ec3\u72b6\u6001\u663e\u793a\u5143\u7d20\n const statusElement = trainingStatus;\n \n \/\/ \u8bad\u7ec3\u6570\u636e\n const trainAccData = [0.62, 0.68, 0.73, 0.76, 0.79, 0.82, 0.84, 0.85, 0.86, 0.87];\n const valAccData = [0.59, 0.65, 0.69, 0.72, 0.75, 0.77, 0.78, 0.79, 0.80, 0.81];\n \n \/\/ \u5f00\u59cb\u8bad\u7ec3\u51fd\u6570\n function startTraining() {\n if (isTraining) return;\n \n isTraining = true;\n statusElement.textContent = '\u8bad\u7ec3\u4e2d';\n statusElement.className = 'px-3 py-1 bg-green-100 text-green-700 rounded-full text-xs font-medium';\n \n \/\/ \u542f\u7528\/\u7981\u7528\u6309\u94ae\n startBtn.disabled = true;\n topStartBtn.disabled = true;\n pauseBtn.disabled = false;\n stopBtn.disabled = false;\n stepBtn.disabled = false;\n \n \/\/ \u6dfb\u52a0\u65e5\u5fd7\n addLog('\u5f00\u59cb\u8bad\u7ec3...');\n \n \/\/ \u6a21\u62df\u8bad\u7ec3\u8fdb\u5ea6\n trainingInterval = setInterval(() => {\n progress += 0.5;\n if (progress >= 100) {\n progress = 0;\n epoch++;\n currentEpoch.textContent = `${epoch}\/${totalEpochs}`;\n \n \/\/ \u6a21\u62df\u51c6\u786e\u7387\u63d0\u5347\n const epochProgress = Math.min(epoch, totalEpochs);\n const trainAccIndex = Math.min(Math.floor(epochProgress \/ (totalEpochs \/ 10)), 9);\n const trainAcc = trainAccData[trainAccIndex];\n const valAcc = valAccData[trainAccIndex];\n \n trainAccuracy.textContent = `${(trainAcc * 100).toFixed(1)}%`;\n valAccuracy.textContent = `${(valAcc * 100).toFixed(1)}%`;\n \n addLog(`Epoch ${epoch}\/${totalEpochs} \u5b8c\u6210 - \u8bad\u7ec3\u51c6\u786e\u7387: ${(trainAcc * 100).toFixed(1)}% \u9a8c\u8bc1\u51c6\u786e\u7387: ${(valAcc * 100).toFixed(1)}%`);\n \n \/\/ \u5982\u679c\u8fbe\u5230\u6700\u5927epoch\uff0c\u7ed3\u675f\u8bad\u7ec3\n if (epoch >= totalEpochs) {\n clearInterval(trainingInterval);\n completeTraining();\n return;\n }\n }\n \n progressBar.style.width = `${progress}%`;\n progressPercentage.textContent = `${Math.round(progress)}%`;\n }, 50);\n }\n \n \/\/ \u6682\u505c\u8bad\u7ec3\n function pauseTraining() {\n if (!isTraining) return;\n \n clearInterval(trainingInterval);\n isTraining = false;\n statusElement.textContent = '\u5df2\u6682\u505c';\n statusElement.className = 'px-3 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-medium';\n startBtn.disabled = false;\n startBtn.innerHTML = '<i class=\"fas fa-play mr-2\"><\/i>\u7ee7\u7eed\u8bad\u7ec3';\n topStartBtn.disabled = false;\n topStartBtn.innerHTML = '<i class=\"fas fa-play mr-2\"><\/i>\u7ee7\u7eed\u8bad\u7ec3';\n \n addLog('\u8bad\u7ec3\u5df2\u6682\u505c');\n }\n \n \/\/ \u505c\u6b62\u8bad\u7ec3\n function stopTraining() {\n clearInterval(trainingInterval);\n isTraining = false;\n resetTraining();\n \n addLog('\u8bad\u7ec3\u5df2\u7ec8\u6b62');\n }\n \n \/\/ \u5355\u6b65\u8bad\u7ec3\n function stepTraining() {\n if (isTraining) return;\n \n \/\/ \u5355\u6b65\u6267\u884c\n progress += 5;\n if (progress >= 100) {\n progress = 0;\n epoch++;\n currentEpoch.textContent = `${epoch}\/${totalEpochs}`;\n \n \/\/ \u6a21\u62df\u51c6\u786e\u7387\u63d0\u5347\n const epochProgress = Math.min(epoch, totalEpochs);\n const trainAccIndex = Math.min(Math.floor(epochProgress \/ (totalEpochs \/ 10)), 9);\n const trainAcc = trainAccData[trainAccIndex];\n const valAcc = valAccData[trainAccIndex];\n \n trainAccuracy.textContent = `${(trainAcc * 100).toFixed(1)}%`;\n valAccuracy.textContent = `${(valAcc * 100).toFixed(1)}%`;\n \n addLog(`Epoch ${epoch}\/${totalEpochs} \u5b8c\u6210 - \u8bad\u7ec3\u51c6\u786e\u7387: ${(trainAcc * 100).toFixed(1)}% \u9a8c\u8bc1\u51c6\u786e\u7387: ${(valAcc * 100).toFixed(1)}%`);\n \n \/\/ \u5982\u679c\u8fbe\u5230\u6700\u5927epoch\uff0c\u7ed3\u675f\u8bad\u7ec3\n if (epoch >= totalEpochs) {\n completeTraining();\n return;\n }\n }\n \n progressBar.style.width = `${progress}%`;\n progressPercentage.textContent = `${Math.round(progress)}%`;\n }\n \n \/\/ \u5b8c\u6210\u8bad\u7ec3\n function completeTraining() {\n isTraining = false;\n statusElement.textContent = '\u5df2\u5b8c\u6210';\n statusElement.className = 'px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium';\n \n startBtn.disabled = false;\n startBtn.innerHTML = '<i class=\"fas fa-redo mr-2\"><\/i>\u91cd\u65b0\u8bad\u7ec3';\n topStartBtn.disabled = false;\n topStartBtn.innerHTML = '<i class=\"fas fa-redo mr-2\"><\/i>\u91cd\u65b0\u8bad\u7ec3';\n pauseBtn.disabled = true;\n stepBtn.disabled = true;\n \n addLog('\u8bad\u7ec3\u5b8c\u6210\uff01\u6700\u7ec8\u51c6\u786e\u7387: ' + valAccuracy.textContent);\n }\n \n \/\/ \u91cd\u7f6e\u8bad\u7ec3\n function resetTraining() {\n progress = 0;\n epoch = 0;\n progressBar.style.width = '0%';\n progressPercentage.textContent = '0%';\n currentEpoch.textContent = `0\/${totalEpochs}`;\n trainAccuracy.textContent = '0%';\n valAccuracy.textContent = '0%';\n \n statusElement.textContent = '\u672a\u5f00\u59cb';\n statusElement.className = 'px-3 py-1 bg-gray-100 text-gray-700 rounded-full text-xs font-medium';\n \n startBtn.disabled = false;\n startBtn.innerHTML = '<i class=\"fas fa-play mr-2\"><\/i>\u5f00\u59cb\u8bad\u7ec3';\n topStartBtn.disabled = false;\n topStartBtn.innerHTML = '<i class=\"fas fa-play mr-2\"><\/i>\u5f00\u59cb\u8bad\u7ec3';\n pauseBtn.disabled = true;\n stopBtn.disabled = true;\n stepBtn.disabled = true;\n }\n \n \/\/ \u6dfb\u52a0\u65e5\u5fd7\n function addLog(message) {\n const now = new Date();\n const timeString = `${now.getFullYear()}-${String(now.getMonth()+1).padStart(2,'0')}-${String(now.getDate()).padStart(2,'0')} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`;\n \n const logEntry = document.createElement('div');\n logEntry.innerHTML = `<span class=\"text-gray-500\">[${timeString}]<\/span> ${message}`;\n trainingLog.appendChild(logEntry);\n \n \/\/ \u6eda\u52a8\u5230\u5e95\u90e8\n trainingLog.scrollTop = trainingLog.scrollHeight;\n }\n \n \/\/ \u4e8b\u4ef6\u7ed1\u5b9a\n startBtn.addEventListener('click', startTraining);\n topStartBtn.addEventListener('click', startTraining);\n pauseBtn.addEventListener('click', pauseTraining);\n stopBtn.addEventListener('click', stopTraining);\n stepBtn.addEventListener('click', stepTraining);\n \n \/\/ \u521d\u59cb\u5316\n resetTraining();\n }\n \n \/\/ \u521d\u59cb\u5316\u9884\u6d4b\u529f\u80fd\n function initPrediction() {\n const predictBtn = document.getElementById('predict-btn');\n const textInput = document.getElementById('text-input');\n const joyPercent = document.getElementById('joy-percent');\n const surprisePercent = document.getElementById('surprise-percent');\n const neutralPercent = document.getElementById('neutral-percent');\n const modelAnalysis = document.getElementById('model-analysis');\n \n predictBtn.addEventListener('click', function() {\n const text = textInput.value.toLowerCase();\n \n \/\/ \u6839\u636e\u8f93\u5165\u6587\u672c\u751f\u6210\u9884\u6d4b\u7ed3\u679c\n let joy = 65;\n let surprise = 20;\n let neutral = 15;\n let analysis = \"\";\n \n if (text.includes('\u9ad8\u5174') || text.includes('\u5f00\u5fc3') || text.includes('\u5feb\u4e50')) {\n joy = 85;\n surprise = 10;\n neutral = 5;\n analysis = \"\u6587\u672c\u8868\u8fbe\u4e86\u5f3a\u70c8\u7684\u79ef\u6781\u60c5\u7eea\uff0c\u5173\u952e\u8bcd\u8868\u660e\u7528\u6237\u5904\u4e8e\u9ad8\u5174\u72b6\u6001\u3002\";\n } else if (text.includes('\u60ca\u8bb6') || text.includes('\u610f\u5916') || text.includes('\u60ca\u559c')) {\n joy = 35;\n surprise = 55;\n neutral = 10;\n analysis = \"\u6587\u672c\u5305\u542b\u60ca\u8bb6\u76f8\u5173\u7684\u8bcd\u6c47\uff0c\u8868\u660e\u7528\u6237\u53ef\u80fd\u7ecf\u5386\u4e86\u610f\u5916\u4e8b\u4ef6\u3002\";\n } else if (text.includes('\u4e2d') || text.includes('\u4e00\u822c') || text.includes('\u5e73\u5e38')) {\n joy = 20;\n surprise = 15;\n neutral = 65;\n analysis = \"\u6587\u672c\u8868\u8fbe\u4e86\u4e2d\u6027\u60c5\u7eea\uff0c\u6ca1\u6709\u660e\u663e\u7684\u79ef\u6781\u6216\u6d88\u6781\u503e\u5411\u3002\";\n } else {\n \/\/ \u9ed8\u8ba4\u5206\u6790\n analysis = \"\u6587\u672c\u8868\u8fbe\u4e86\u79ef\u6781\u60c5\u7eea\uff0c\u8bed\u97f3\u8bed\u8c03\u4e0a\u626c\uff0c\u9762\u90e8\u8868\u60c5\u663e\u793a\u5fae\u7b11\u548c\u5174\u594b\uff0c\u7efc\u5408\u5224\u65ad\u4e3a\u559c\u60a6\u60c5\u7eea\u3002\";\n }\n \n \/\/ \u66f4\u65b0UI\n joyPercent.textContent = `${joy}%`;\n surprisePercent.textContent = `${surprise}%`;\n neutralPercent.textContent = `${neutral}%`;\n \n modelAnalysis.innerHTML = `\n <p class=\"text-sm text-primary font-medium\">\u6a21\u578b\u5206\u6790<\/p>\n <p class=\"text-xs text-gray-600 mt-1\">${analysis}<\/p>\n `;\n \n \/\/ \u66f4\u65b0\u9884\u6d4b\u56fe\u8868\n updatePredictionChart(joy, surprise, neutral);\n });\n }\n \n \/\/ \u66f4\u65b0\u9884\u6d4b\u56fe\u8868\n function updatePredictionChart(joy, surprise, neutral) {\n if (window.predictionChart) {\n window.predictionChart.destroy();\n }\n \n const ctx = document.getElementById('prediction-chart').getContext('2d');\n window.predictionChart = new Chart(ctx, {\n type: 'doughnut',\n data: {\n labels: ['\u559c\u60a6', '\u60ca\u8bb6', '\u4e2d\u6027'],\n datasets: [{\n data: [joy, surprise, neutral],\n backgroundColor: [\n '#4f46e5',\n '#10b981',\n '#f59e0b'\n ],\n borderWidth: 0,\n hoverOffset: 5\n }]\n },\n options: {\n responsive: true,\n maintainAspectRatio: false,\n cutout: '70%',\n plugins: {\n legend: {\n display: false\n }\n }\n }\n });\n }\n \n \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\u540e\u521d\u59cb\u5316\n document.addEventListener('DOMContentLoaded', function() {\n initSliders();\n window.performanceChart = initPerformanceChart();\n window.predictionChart = initPredictionChart();\n simulateTraining();\n initPrediction();\n \n \/\/ \u66f4\u65b0epoch\u663e\u793a\n const epochsInput = document.getElementById('epochs');\n epochsInput.addEventListener('input', function() {\n document.getElementById('current-epoch').textContent = `0\/${this.value}`;\n });\n });\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>\u4eba\u5de5\u667a\u80fd\u60c5\u611f\u591a\u6a21\u6001\u8bad\u7ec3\u5e73\u53f0 \u60c5\u611f\u5206\u6790\u6a21\u578b v3.2.1 \u591a\u6a21\u6001\u60c5\u611f\u8bc6\u522b\u4e0e\u5206\u7c7b\u7cfb\u7edf – \u8bad\u7ec3\u4f1a\u8bdd # […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":228,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1317","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/1317","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/comments?post=1317"}],"version-history":[{"count":4,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/1317\/revisions"}],"predecessor-version":[{"id":1658,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/1317\/revisions\/1658"}],"up":[{"embeddable":true,"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/pages\/228"}],"wp:attachment":[{"href":"https:\/\/www.affectivechain.com\/index.php\/wp-json\/wp\/v2\/media?parent=1317"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}