Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 20 additions & 7 deletions documemts/AI-Knowledge/Transformer/AI-Generation.html
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,10 @@
pointer-events: none;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

#copyright a {
pointer-events: auto;
}
</style>
</head>
<body>
Expand Down Expand Up @@ -188,6 +192,7 @@ <h3 class="chart-title">候选词概率分布</h3>
<!-- 在body最后添加版权信息 -->
<div id="copyright">
<span>© Senparc</span>
<span> | <a href="https://github.com/Senparc/Senparc.AI/tree/main/documemts/AI-Knowledge/Transformer" target="_blank" style="color: rgba(255, 255, 255, 0.7); text-decoration: none;">GitHub</a></span>
</div>

<!-- 引入本地 Three.js 文件 -->
Expand Down Expand Up @@ -1080,16 +1085,24 @@ <h3 class="chart-title">候选词概率分布</h3>
function startDemo() {
currentStep = 0;

// 先执行相机旋转动画
animateCameraRotation(25); // 向右旋转25度
// 禁用按钮,防止多次点击
document.getElementById('start-btn').disabled = true;

// 立即初始化场景,避免黑屏
// 这样相机旋转时就已经有内容可见了
steps[currentStep]();

// 首次执行时只禁用前进和后退按钮
document.getElementById('prev-btn').disabled = true;
document.getElementById('next-btn').disabled = true;

// 延迟执行第一步,等待相机旋转完成
// 再执行相机旋转动画,使用较短的持续时间
animateCameraRotation(25, 1000); // 向右旋转25度,持续1秒

// 在动画完成后启用下一步按钮
setTimeout(() => {
steps[currentStep]();
document.getElementById('start-btn').disabled = true;
document.getElementById('prev-btn').disabled = true;
document.getElementById('next-btn').disabled = false;
}, 800); // 等待0.8秒,让旋转动画先开始
}, 1100); // 稍微长于动画时间,确保动画完成
}

// 上一步
Expand Down
25 changes: 24 additions & 1 deletion documemts/AI-Knowledge/Transformer/AI-Tree.html
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,23 @@
.legend-checkbox {
margin-left: 5px;
}

/* 添加版权信息样式 */
#copyright {
position: absolute;
bottom: 10px;
left: 10px;
color: rgba(255, 255, 255, 0.7);
font-size: 14px;
font-family: Arial, sans-serif;
z-index: 1000;
pointer-events: none;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

#copyright a {
pointer-events: auto;
}
</style>
</head>
<body>
Expand All @@ -142,7 +159,7 @@ <h1>人工智能知识树 (3D版)</h1>
<button id="zoomIn">放大</button>
<button id="zoomOut">缩小</button>
<button id="resetView">重置视图</button>
<button id="runSimulation">重新布局</button>
<button id="runSimulation">重新布局(词云)</button>
<button id="toggleRotation">切换自动旋转</button>
</div>
<div id="nodeInfo"></div>
Expand All @@ -151,6 +168,12 @@ <h3>层级图例</h3>
<div id="legendItems"></div>
</div>
<div class="info" style="display: none;">鼠标拖动可旋转视图,滚轮可缩放,点击并拖动节点可调整位置</div>

<!-- 添加版权信息,与AI-Generation.html一致 -->
<div id="copyright">
<span>© Senparc</span>
<span> | <a href="https://github.com/Senparc/Senparc.AI/tree/main/documemts/AI-Knowledge/Transformer" target="_blank" style="color: rgba(255, 255, 255, 0.7); text-decoration: none;">GitHub</a></span>
</div>
</div>

<!-- 引入Three.js库 -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@

展示 AI 部分技术和应用层次关系,双击节点可以平面展示相关上下游的信息。


## AI-Generation.html:

展示 Transformer(GPT、DeepSeek 所使用的基础算法)在 Token 生成过程中的原理(主要是概率)。
展示 Transformer(GPT、DeepSeek 所使用的基础算法)在 Token 生成过程中的原理(主要是概率)。

开源项目地址(保持更新):https://github.com/Senparc/Senparc.AI/tree/main/documemts/AI-Knowledge/Transformer