Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>RWKV参数量换算</title> | |
| <style> | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| background-color: #121212; | |
| color: #e0e0e0; | |
| height: 100vh; | |
| overflow: hidden; | |
| } | |
| .container { | |
| background-color: #1e1e1e; | |
| height: 100vh; | |
| padding: 30px; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: space-around; | |
| } | |
| .slider-container { | |
| margin: 10px 0; | |
| } | |
| label { | |
| font-size: 16px; | |
| margin-bottom: 5px; | |
| display: block; | |
| } | |
| .slider { | |
| width: 100%; | |
| -webkit-appearance: none; | |
| height: 10px; | |
| border-radius: 5px; | |
| background: #333; | |
| outline: none; | |
| margin: 5px 0; | |
| } | |
| .slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: #4CAF50; | |
| cursor: pointer; | |
| } | |
| .slider::-moz-range-thumb { | |
| width: 24px; | |
| height: 24px; | |
| border-radius: 50%; | |
| background: #4CAF50; | |
| cursor: pointer; | |
| border: none; | |
| } | |
| .values { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 5px; | |
| color: #aaa; | |
| font-size: 12px; | |
| } | |
| .result { | |
| font-size: 32px; | |
| text-align: center; | |
| font-weight: bold; | |
| color: #fff; | |
| margin: 20px 0; | |
| } | |
| .circle-container { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex: 1; | |
| max-height: 400px; | |
| padding: 0 40px; | |
| } | |
| .model-container { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| position: relative; | |
| flex: 1; | |
| } | |
| .circle { | |
| background-color: #ffffff; | |
| border-radius: 50%; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 8px rgba(255,255,255,0.1); | |
| } | |
| .circle-label { | |
| text-align: center; | |
| margin-top: 20px; | |
| font-weight: bold; | |
| color: #fff; | |
| font-size: 20px; | |
| } | |
| .model-codename { | |
| font-size: 16px; | |
| color: #888; | |
| margin-top: 5px; | |
| } | |
| .param-label { | |
| position: absolute; | |
| bottom: -50px; | |
| font-size: 20px; | |
| font-weight: bold; | |
| } | |
| .equals-sign { | |
| font-size: 80px; | |
| color: #4CAF50; | |
| font-weight: bold; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| text-shadow: 0 0 10px rgba(76, 175, 80, 0.5); | |
| animation: glow 2s ease-in-out infinite alternate; | |
| } | |
| @keyframes glow { | |
| from { | |
| text-shadow: 0 0 10px rgba(76, 175, 80, 0.5); | |
| } | |
| to { | |
| text-shadow: 0 0 20px rgba(76, 175, 80, 0.8); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="slider-container"> | |
| <label for="generation">RWKV代数 (N)：<span id="gen-value">4</span></label> | |
| <input type="range" id="generation" class="slider" min="4" max="20" value="4" step="1"> | |
| <div class="values"> | |
| <span>4</span> | |
| <span>12</span> | |
| <span>20</span> | |
| </div> | |
| </div> | |
| <div class="slider-container"> | |
| <label for="params">参数量 (B)：<span id="param-value">1</span></label> | |
| <input type="range" id="params" class="slider" min="0.1" max="10" value="1" step="0.1"> | |
| <div class="values"> | |
| <span>0.1B</span> | |
| <span>5B</span> | |
| <span>10B</span> | |
| </div> | |
| </div> | |
| <div class="result"> | |
| RWKV-<span id="result-gen">4</span> <span id="result-param">1</span>B ≈ RWKV-4 <span id="result-equiv">1</span>B | |
| </div> | |
| <div class="circle-container"> | |
| <div class="model-container"> | |
| <div id="circle-new" class="circle"></div> | |
| <div class="circle-label"> | |
| RWKV-<span id="circle-gen">4</span> | |
| <div id="new-codename" class="model-codename">Dove</div> | |
| </div> | |
| <div id="new-param" class="param-label">1B</div> | |
| </div> | |
| <div class="equals-sign">≈</div> | |
| <div class="model-container"> | |
| <div id="circle-old" class="circle"></div> | |
| <div class="circle-label"> | |
| RWKV-4 | |
| <div class="model-codename">Dove</div> | |
| </div> | |
| <div id="old-param" class="param-label">1B</div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| const genSlider = document.getElementById('generation'); | |
| const paramSlider = document.getElementById('params'); | |
| const genValue = document.getElementById('gen-value'); | |
| const paramValue = document.getElementById('param-value'); | |
| const resultGen = document.getElementById('result-gen'); | |
| const resultParam = document.getElementById('result-param'); | |
| const resultEquiv = document.getElementById('result-equiv'); | |
| const circleNew = document.getElementById('circle-new'); | |
| const circleOld = document.getElementById('circle-old'); | |
| const circleGen = document.getElementById('circle-gen'); | |
| const newParam = document.getElementById('new-param'); | |
| const oldParam = document.getElementById('old-param'); | |
| const newCodename = document.getElementById('new-codename'); | |
| // 模型代号映射 | |
| const modelCodenames = { | |
| 4: 'Dove', | |
| 5: 'Eagle', | |
| 6: 'Finch', | |
| 7: 'Goose', | |
| 8: 'Heron', | |
| 9: 'Ibis' | |
| }; | |
| function getCodename(generation) { | |
| return modelCodenames[generation] || ''; | |
| } | |
| function updateResult() { | |
| const generation = parseFloat(genSlider.value); | |
| const params = parseFloat(paramSlider.value); | |
| genValue.textContent = generation; | |
| paramValue.textContent = params.toFixed(1); | |
| resultGen.textContent = generation; | |
| resultParam.textContent = params.toFixed(1); | |
| circleGen.textContent = generation; | |
| // 更新模型代号 | |
| const codename = getCodename(generation); | |
| newCodename.textContent = codename; | |
| newCodename.style.display = codename ? 'block' : 'none'; | |
| // 计算公式：RWKV-N参数量 = RWKV-4 2^(N-4) * 参数量 | |
| const equivalent = params * Math.pow(2, generation - 4); | |
| resultEquiv.textContent = equivalent.toFixed(1); | |
| // 更新圆形大小 - 移除大小限制，只保留极小的最小值 | |
| const baseSize = 80; | |
| const newSize = baseSize * Math.sqrt(params); | |
| const oldSize = baseSize * Math.sqrt(equivalent); | |
| // 只设置一个很小的最小值，避免完全看不见 | |
| const minSize = 20; | |
| circleNew.style.width = `${Math.max(minSize, newSize)}px`; | |
| circleNew.style.height = `${Math.max(minSize, newSize)}px`; | |
| newParam.textContent = `${params.toFixed(1)}B`; | |
| circleOld.style.width = `${Math.max(minSize, oldSize)}px`; | |
| circleOld.style.height = `${Math.max(minSize, oldSize)}px`; | |
| oldParam.textContent = `${equivalent.toFixed(1)}B`; | |
| // 调整参数文本颜色 | |
| newParam.style.color = '#4CAF50'; // 绿色 | |
| oldParam.style.color = '#3498db'; // 蓝色 | |
| } | |
| genSlider.addEventListener('input', updateResult); | |
| paramSlider.addEventListener('input', updateResult); | |
| // 初始化结果 | |
| updateResult(); | |
| </script> | |
| </body> | |
| </html> |