Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI Tuning for DeepSeek #83

Merged
merged 5 commits into from
Feb 21, 2025
Merged

UI Tuning for DeepSeek #83

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
65f3cd9
UI Tuning for DeepSeek
ibelem Feb 21, 2025
b57773c
Merge branch 'main' into ui-update
ibelem Feb 21, 2025
9a0412b
Update for other pages
ibelem Feb 21, 2025
5774635
Merge remote-tracking branch 'upstream/main' into ui-update
ibelem Feb 21, 2025
1e644d9
Merge branch 'ui-update' of https://github.com/ibelem/web-ai-showcase…
ibelem Feb 21, 2025
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
24 changes: 12 additions & 12 deletions samples/deepseek-r1-webgpu/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,8 +23,8 @@ const STICKY_SCROLL_THRESHOLD = 120;

const EXAMPLES = [
"求方程 x^2 - 3x + 2 = 0 的解。",
"小李今年年龄是小王的3倍，15年后她的年龄将是小王的2倍，小李今年几岁？",
"请用Python写一个程序来计算第n个斐波那契数。"
"小李今年年龄是小王的 3 倍，15 年后她的年龄将是小王的 2 倍，小李今年几岁？",
"请用 Python 写一个程序来计算第 n 个斐波那契数。"
];

const DEFAULT_CACHE_STORAGE_NAME = "transformers-cache";
Expand Down Expand Up @@ -187,7 +187,7 @@ function App() {
href="${relativePath}/index.html"
class="font-mono font-bold text-4xl text-stone-50 text-shadow-sm block px-8 xl:px-16"
>
<svg class="2xl:w-[287px] w-[180px]" viewBox="0 0 887 157" fill="none" xmlns="http://www.w3.org/2000/svg">
<svg class="w-[180px] 2xl:w-[220px]" viewBox="0 0 887 157" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M249.752 121.336C249.752 117.752 250.477 114.616 251.928 111.928C253.379 109.197 255.363 107.085 257.88 105.592C260.44 104.099 263.277 103.352 266.392 103.352C269.464 103.352 272.131 104.013 274.392 105.336C276.653 106.659 278.339 108.323 279.448 110.328V103.928H285.336V139H279.448V132.472C278.296 134.52 276.568 136.227 274.264 137.592C272.003 138.915 269.357 139.576 266.328 139.576C263.213 139.576 260.397 138.808 257.88 137.272C255.363 135.736 253.379 133.581 251.928 130.808C250.477 128.035 249.752 124.877 249.752 121.336ZM279.448 121.4C279.448 118.755 278.915 116.451 277.848 114.488C276.781 112.525 275.331 111.032 273.496 110.008C271.704 108.941 269.72 108.408 267.544 108.408C265.368 108.408 263.384 108.92 261.592 109.944C259.8 110.968 258.371 112.461 257.304 114.424C256.237 116.387 255.704 118.691 255.704 121.336C255.704 124.024 256.237 126.371 257.304 128.376C258.371 130.339 259.8 131.853 261.592 132.92C263.384 133.944 265.368 134.456 267.544 134.456C269.72 134.456 271.704 133.944 273.496 132.92C275.331 131.853 276.781 130.339 277.848 128.376C278.915 126.371 279.448 124.045 279.448 121.4ZM300.362 109.624C301.386 107.619 302.837 106.061 304.714 104.952C306.634 103.843 308.959 103.288 311.69 103.288V109.304H310.154C303.626 109.304 300.362 112.845 300.362 119.928V139H294.538V103.928H300.362V109.624ZM324.877 108.728V129.4C324.877 131.107 325.24 132.323 325.965 133.048C326.69 133.731 327.949 134.072 329.741 134.072H334.029V139H328.781C325.538 139 323.106 138.253 321.485 136.76C319.864 135.267 319.053 132.813 319.053 129.4V108.728H314.509V103.928H319.053V95.096H324.877V103.928H334.029V108.728H324.877ZM343.454 98.232C342.344 98.232 341.406 97.848 340.638 97.08C339.87 96.312 339.486 95.3733 339.486 94.264C339.486 93.1547 339.87 92.216 340.638 91.448C341.406 90.68 342.344 90.296 343.454 90.296C344.52 90.296 345.416 90.68 346.142 91.448C346.91 92.216 347.294 93.1547 347.294 94.264C347.294 95.3733 346.91 96.312 346.142 97.08C345.416 97.848 344.52 98.232 343.454 98.232ZM346.27 103.928V139H340.446V103.928H346.27ZM369.828 108.728H362.468V139H356.644V108.728H352.1V103.928H356.644V101.432C356.644 97.5067 357.646 94.648 359.652 92.856C361.7 91.0213 364.964 90.104 369.444 90.104V94.968C366.884 94.968 365.07 95.48 364.004 96.504C362.98 97.4853 362.468 99.128 362.468 101.432V103.928H369.828V108.728ZM378.986 98.232C377.877 98.232 376.938 97.848 376.17 97.08C375.402 96.312 375.018 95.3733 375.018 94.264C375.018 93.1547 375.402 92.216 376.17 91.448C376.938 90.68 377.877 90.296 378.986 90.296C380.053 90.296 380.949 90.68 381.674 91.448C382.442 92.216 382.826 93.1547 382.826 94.264C382.826 95.3733 382.442 96.312 381.674 97.08C380.949 97.848 380.053 98.232 378.986 98.232ZM381.802 103.928V139H375.978V103.928H381.802ZM388.912 121.4C388.912 117.773 389.637 114.616 391.088 111.928C392.539 109.197 394.544 107.085 397.104 105.592C399.707 104.099 402.672 103.352 406 103.352C410.309 103.352 413.851 104.397 416.624 106.488C419.44 108.579 421.296 111.48 422.192 115.192H415.92C415.323 113.059 414.149 111.373 412.4 110.136C410.693 108.899 408.56 108.28 406 108.28C402.672 108.28 399.984 109.432 397.936 111.736C395.888 113.997 394.864 117.219 394.864 121.4C394.864 125.624 395.888 128.888 397.936 131.192C399.984 133.496 402.672 134.648 406 134.648C408.56 134.648 410.693 134.051 412.4 132.856C414.107 131.661 415.28 129.955 415.92 127.736H422.192C421.253 131.32 419.376 134.2 416.56 136.376C413.744 138.509 410.224 139.576 406 139.576C402.672 139.576 399.707 138.829 397.104 137.336C394.544 135.843 392.539 133.731 391.088 131C389.637 128.269 388.912 125.069 388.912 121.4ZM432.331 98.232C431.222 98.232 430.283 97.848 429.515 97.08C428.747 96.312 428.363 95.3733 428.363 94.264C428.363 93.1547 428.747 92.216 429.515 91.448C430.283 90.68 431.222 90.296 432.331 90.296C433.398 90.296 434.294 90.68 435.019 91.448C435.787 92.216 436.171 93.1547 436.171 94.264C436.171 95.3733 435.787 96.312 435.019 97.08C434.294 97.848 433.398 98.232 432.331 98.232ZM435.147 103.928V139H429.323V103.928H435.147ZM442.257 121.336C442.257 117.752 442.982 114.616 444.433 111.928C445.884 109.197 447.868 107.085 450.385 105.592C452.945 104.099 455.782 103.352 458.897 103.352C461.969 103.352 464.636 104.013 466.897 105.336C469.158 106.659 470.844 108.323 471.953 110.328V103.928H477.841V139H471.953V132.472C470.801 134.52 469.073 136.227 466.769 137.592C464.508 138.915 461.862 139.576 458.833 139.576C455.718 139.576 452.902 138.808 450.385 137.272C447.868 135.736 445.884 133.581 444.433 130.808C442.982 128.035 442.257 124.877 442.257 121.336ZM471.953 121.4C471.953 118.755 471.42 116.451 470.353 114.488C469.286 112.525 467.836 111.032 466.001 110.008C464.209 108.941 462.225 108.408 460.049 108.408C457.873 108.408 455.889 108.92 454.097 109.944C452.305 110.968 450.876 112.461 449.809 114.424C448.742 116.387 448.209 118.691 448.209 121.336C448.209 124.024 448.742 126.371 449.809 128.376C450.876 130.339 452.305 131.853 454.097 132.92C455.889 133.944 457.873 134.456 460.049 134.456C462.225 134.456 464.209 133.944 466.001 132.92C467.836 131.853 469.286 130.339 470.353 128.376C471.42 126.371 471.953 124.045 471.953 121.4ZM492.867 91.64V139H487.043V91.64H492.867ZM521.583 98.232C520.474 98.232 519.535 97.848 518.767 97.08C517.999 96.312 517.615 95.3733 517.615 94.264C517.615 93.1547 517.999 92.216 518.767 91.448C519.535 90.68 520.474 90.296 521.583 90.296C522.65 90.296 523.546 90.68 524.271 91.448C525.039 92.216 525.423 93.1547 525.423 94.264C525.423 95.3733 525.039 96.312 524.271 97.08C523.546 97.848 522.65 98.232 521.583 98.232ZM524.399 103.928V139H518.575V103.928H524.399ZM550.774 103.288C555.04 103.288 558.496 104.589 561.142 107.192C563.787 109.752 565.11 113.464 565.11 118.328V139H559.35V119.16C559.35 115.661 558.475 112.995 556.726 111.16C554.976 109.283 552.587 108.344 549.558 108.344C546.486 108.344 544.032 109.304 542.198 111.224C540.406 113.144 539.51 115.939 539.51 119.608V139H533.686V103.928H539.51V108.92C540.662 107.128 542.219 105.741 544.182 104.76C546.187 103.779 548.384 103.288 550.774 103.288ZM581.087 108.728V129.4C581.087 131.107 581.45 132.323 582.175 133.048C582.9 133.731 584.159 134.072 585.951 134.072H590.239V139H584.991C581.748 139 579.316 138.253 577.695 136.76C576.074 135.267 575.263 132.813 575.263 129.4V108.728H570.719V103.928H575.263V95.096H581.087V103.928H590.239V108.728H581.087ZM628.656 120.12C628.656 121.229 628.592 122.403 628.464 123.64H600.432C600.645 127.096 601.818 129.805 603.952 131.768C606.128 133.688 608.752 134.648 611.824 134.648C614.341 134.648 616.432 134.072 618.096 132.92C619.802 131.725 620.997 130.147 621.68 128.184H627.952C627.013 131.555 625.136 134.307 622.32 136.44C619.504 138.531 616.005 139.576 611.824 139.576C608.496 139.576 605.509 138.829 602.864 137.336C600.261 135.843 598.213 133.731 596.72 131C595.226 128.227 594.48 125.027 594.48 121.4C594.48 117.773 595.205 114.595 596.656 111.864C598.106 109.133 600.133 107.043 602.736 105.592C605.381 104.099 608.41 103.352 611.824 103.352C615.152 103.352 618.096 104.077 620.656 105.528C623.216 106.979 625.178 108.984 626.544 111.544C627.952 114.061 628.656 116.92 628.656 120.12ZM622.64 118.904C622.64 116.685 622.149 114.787 621.168 113.208C620.186 111.587 618.842 110.371 617.136 109.56C615.472 108.707 613.616 108.28 611.568 108.28C608.624 108.28 606.106 109.219 604.016 111.096C601.968 112.973 600.794 115.576 600.496 118.904H622.64ZM641.527 91.64V139H635.703V91.64H641.527ZM656.637 91.64V139H650.813V91.64H656.637ZM668.931 98.232C667.822 98.232 666.883 97.848 666.115 97.08C665.347 96.312 664.963 95.3733 664.963 94.264C664.963 93.1547 665.347 92.216 666.115 91.448C666.883 90.68 667.822 90.296 668.931 90.296C669.998 90.296 670.894 90.68 671.619 91.448C672.387 92.216 672.771 93.1547 672.771 94.264C672.771 95.3733 672.387 96.312 671.619 97.08C670.894 97.848 669.998 98.232 668.931 98.232ZM671.747 103.928V139H665.923V103.928H671.747ZM695.497 103.352C698.526 103.352 701.172 104.013 703.433 105.336C705.737 106.659 707.444 108.323 708.553 110.328V103.928H714.441V139.768C714.441 142.968 713.758 145.805 712.393 148.28C711.028 150.797 709.065 152.76 706.505 154.168C703.988 155.576 701.044 156.28 697.673 156.28C693.065 156.28 689.225 155.192 686.153 153.016C683.081 150.84 681.268 147.875 680.713 144.12H686.473C687.113 146.253 688.436 147.96 690.441 149.24C692.446 150.563 694.857 151.224 697.673 151.224C700.873 151.224 703.476 150.221 705.481 148.216C707.529 146.211 708.553 143.395 708.553 139.768V132.408C707.401 134.456 705.694 136.163 703.433 137.528C701.172 138.893 698.526 139.576 695.497 139.576C692.382 139.576 689.545 138.808 686.985 137.272C684.468 135.736 682.484 133.581 681.033 130.808C679.582 128.035 678.857 124.877 678.857 121.336C678.857 117.752 679.582 114.616 681.033 111.928C682.484 109.197 684.468 107.085 686.985 105.592C689.545 104.099 692.382 103.352 695.497 103.352ZM708.553 121.4C708.553 118.755 708.02 116.451 706.953 114.488C705.886 112.525 704.436 111.032 702.601 110.008C700.809 108.941 698.825 108.408 696.649 108.408C694.473 108.408 692.489 108.92 690.697 109.944C688.905 110.968 687.476 112.461 686.409 114.424C685.342 116.387 684.809 118.691 684.809 121.336C684.809 124.024 685.342 126.371 686.409 128.376C687.476 130.339 688.905 131.853 690.697 132.92C692.489 133.944 694.473 134.456 696.649 134.456C698.825 134.456 700.809 133.944 702.601 132.92C704.436 131.853 705.886 130.339 706.953 128.376C708.02 126.371 708.553 124.045 708.553 121.4ZM755.643 120.12C755.643 121.229 755.579 122.403 755.451 123.64H727.419C727.632 127.096 728.806 129.805 730.939 131.768C733.115 133.688 735.739 134.648 738.811 134.648C741.328 134.648 743.419 134.072 745.083 132.92C746.79 131.725 747.984 130.147 748.667 128.184H754.939C754 131.555 752.123 134.307 749.307 136.44C746.491 138.531 742.992 139.576 738.811 139.576C735.483 139.576 732.496 138.829 729.851 137.336C727.248 135.843 725.2 133.731 723.707 131C722.214 128.227 721.467 125.027 721.467 121.4C721.467 117.773 722.192 114.595 723.643 111.864C725.094 109.133 727.12 107.043 729.723 105.592C732.368 104.099 735.398 103.352 738.811 103.352C742.139 103.352 745.083 104.077 747.643 105.528C750.203 106.979 752.166 108.984 753.531 111.544C754.939 114.061 755.643 116.92 755.643 120.12ZM749.627 118.904C749.627 116.685 749.136 114.787 748.155 113.208C747.174 111.587 745.83 110.371 744.123 109.56C742.459 108.707 740.603 108.28 738.555 108.28C735.611 108.28 733.094 109.219 731.003 111.096C728.955 112.973 727.782 115.576 727.483 118.904H749.627ZM779.779 103.288C784.045 103.288 787.501 104.589 790.147 107.192C792.792 109.752 794.115 113.464 794.115 118.328V139H788.355V119.16C788.355 115.661 787.48 112.995 785.731 111.16C783.981 109.283 781.592 108.344 778.563 108.344C775.491 108.344 773.037 109.304 771.203 111.224C769.411 113.144 768.515 115.939 768.515 119.608V139H762.691V103.928H768.515V108.92C769.667 107.128 771.224 105.741 773.187 104.76C775.192 103.779 777.389 103.288 779.779 103.288ZM800.812 121.4C800.812 117.773 801.537 114.616 802.988 111.928C804.439 109.197 806.444 107.085 809.004 105.592C811.607 104.099 814.572 103.352 817.9 103.352C822.209 103.352 825.751 104.397 828.524 106.488C831.34 108.579 833.196 111.48 834.092 115.192H827.82C827.223 113.059 826.049 111.373 824.3 110.136C822.593 108.899 820.46 108.28 817.9 108.28C814.572 108.28 811.884 109.432 809.836 111.736C807.788 113.997 806.764 117.219 806.764 121.4C806.764 125.624 807.788 128.888 809.836 131.192C811.884 133.496 814.572 134.648 817.9 134.648C820.46 134.648 822.593 134.051 824.3 132.856C826.007 131.661 827.18 129.955 827.82 127.736H834.092C833.153 131.32 831.276 134.2 828.46 136.376C825.644 138.509 822.124 139.576 817.9 139.576C814.572 139.576 811.607 138.829 809.004 137.336C806.444 135.843 804.439 133.731 802.988 131C801.537 128.269 800.812 125.069 800.812 121.4ZM873.223 120.12C873.223 121.229 873.159 122.403 873.031 123.64H844.999C845.212 127.096 846.386 129.805 848.519 131.768C850.695 133.688 853.319 134.648 856.391 134.648C858.908 134.648 860.999 134.072 862.663 132.92C864.37 131.725 865.564 130.147 866.247 128.184H872.519C871.58 131.555 869.703 134.307 866.887 136.44C864.071 138.531 860.572 139.576 856.391 139.576C853.063 139.576 850.076 138.829 847.431 137.336C844.828 135.843 842.78 133.731 841.287 131C839.794 128.227 839.047 125.027 839.047 121.4C839.047 117.773 839.772 114.595 841.223 111.864C842.674 109.133 844.7 107.043 847.303 105.592C849.948 104.099 852.978 103.352 856.391 103.352C859.719 103.352 862.663 104.077 865.223 105.528C867.783 106.979 869.746 108.984 871.111 111.544C872.519 114.061 873.223 116.92 873.223 120.12ZM867.207 118.904C867.207 116.685 866.716 114.787 865.735 113.208C864.754 111.587 863.41 110.371 861.703 109.56C860.039 108.707 858.183 108.28 856.135 108.28C853.191 108.28 850.674 109.219 848.583 111.096C846.535 112.973 845.362 115.576 845.063 118.904H867.207Z"
fill="white" />
Expand Down Expand Up @@ -380,9 +380,9 @@ function App() {
// Model file start load: add a new progress item to the list.
setStatus("loading");
if (e.data.data === "Loading") {
setLoadingMessage("模型文件加载中...");
setLoadingMessage("模型文件加载中 ...");
} else if (e.data.data === "Warming up") {
setLoadingMessage("模型初始化中...");
setLoadingMessage("模型初始化中 ...");
}

break;
Expand Down Expand Up @@ -539,7 +539,7 @@ function App() {
src={logoImg}
width="100%"
height="auto"
className="2xl:block max-w-[180px] hidden"
className="2xl:block max-w-[160px] hidden"
></img>
<h1 className="text-4xl font-bold">DeepSeek-R1 WebGPU</h1>
<h2 className="font-semibold hidden 2xl:block">
Expand Down Expand Up @@ -575,7 +575,7 @@ function App() {
</div>
</div>
{status !== "ready" && (
<div className="flex items-center flex-col relative justify-center basis-2/4">
<div className="flex items-center flex-col relative justify-center basis-1/4">
<div className="flex flex-col items-center px-4">
<p className="max-w-[600px] text-sm">
<br />
Expand Down Expand Up @@ -619,7 +619,7 @@ function App() {
<div className="relative flex flex-row items-center">
<button
id="loadModelLocallyBtn"
className="w-[180px] 2xl:w-[200px] cursor-pointer control-entry transition ease-in-out bg-blue-500 hover:-translate-y-1 hover:translate-x-0 hover:bg-indigo-500 duration-200 text-stone-50 2xl:text-base text-sm font-semibold p-2 rounded-md disabled:bg-blue-100 disabled:cursor-not-allowed select-none"
className="cursor-pointer control-entry transition ease-in-out bg-blue-500 hover:-translate-y-1 hover:translate-x-0 hover:bg-indigo-500 duration-200 text-stone-50 2xl:text-base text-sm font-semibold py-2 px-4 rounded-md disabled:bg-blue-100 disabled:cursor-not-allowed select-none"
disabled={status !== null}
>
<label className="cursor-pointer" htmlFor="uploadModel">
Expand Down Expand Up @@ -691,7 +691,7 @@ function App() {
>
<Chat messages={[...historyMessages, ...dialogMessages]} />
{historyMessages.length === 0 && dialogMessages.length === 0 && (
<div className="grid gap-2 2xl:gap-4 my-10">
<div className="grid gap-2 my-8">
{" "}
<div className="font-semibold mx-auto mb-4">准备就绪！</div>
{EXAMPLES.map((msg, i) => (
Expand Down Expand Up @@ -746,8 +746,8 @@ function App() {
<div className="border dark:bg-gray-700 rounded-lg w-[600px] max-h-[200px] mx-auto relative mb-3 flex">
<textarea
ref={textareaRef}
className="scrollbar-thin w-[550px] dark:bg-gray-700 px-3 py-4 rounded-lg bg-transparent border-none outline-none text-stone-200 disabled:text-gray-400 dark:text-gray-200 placeholder-gray-500 dark:placeholder-gray-400 disabled:placeholder-gray-200 resize-none disabled:cursor-not-allowed"
placeholder="输入您的问题..."
className="scrollbar-thin w-[550px] dark:bg-gray-700 px-3 py-4 rounded-lg bg-transparent border-none outline-none text-stone-200 disabled:text-gray-400 dark:text-gray-200 placeholder:white-500 dark:placeholder:gray-400 disabled:placeholder-gray-200 resize-none disabled:cursor-not-allowed"
placeholder="输入您的问题 ..."
type="text"
rows={1}
value={input}
Expand Down Expand Up @@ -784,7 +784,7 @@ function App() {
</div>
)}
</div>
<div className="flex justify-center items-center gap-8 mb-3">
<div className="flex justify-center items-center mb-4">
<p className="text-xs text-white text-center">
免责声明：生成的内容可能是假的或是不准确的。
</p>
Expand Down
Loading
Loading