LiquidAI/LFM2.5-VL-1.6B-WebGPU
94
1/* Brand color system for VLM Demo */2 3:root {4 /* Base brand colors */5 --white: rgb(255, 255, 255);6 --black: rgb(0, 0, 0);7 --light-purple: rgb(205, 130, 240);8 --purple: rgb(85, 5, 75);9 --orange: rgb(255, 95, 30);10 11 /* Alpha variations */12 --white-70: rgba(255, 255, 255, 0.7);13 --white-50: rgba(255, 255, 255, 0.5);14 --white-30: rgba(255, 255, 255, 0.3);15 --white-10: rgba(255, 255, 255, 0.1);16 17 --black-70: rgba(0, 0, 0, 0.7);18 --black-50: rgba(0, 0, 0, 0.5);19 --black-30: rgba(0, 0, 0, 0.3);20 --black-10: rgba(0, 0, 0, 0.1);21 22 --light-purple-70: rgba(205, 130, 240, 0.7);23 --light-purple-50: rgba(205, 130, 240, 0.5);24 --light-purple-30: rgba(205, 130, 240, 0.3);25 --light-purple-10: rgba(205, 130, 240, 0.1);26 27 --purple-70: rgba(85, 5, 75, 0.7);28 --purple-50: rgba(85, 5, 75, 0.5);29 --purple-30: rgba(85, 5, 75, 0.3);30 --purple-10: rgba(85, 5, 75, 0.1);31 32 --orange-70: rgba(255, 95, 30, 0.7);33 --orange-50: rgba(255, 95, 30, 0.5);34 --orange-30: rgba(255, 95, 30, 0.3);35 --orange-10: rgba(255, 95, 30, 0.1);36 37 /* Border style controls - change these to customize all dividers */38 --border-style: solid; /* Options: solid, dashed, dotted */39 /* --border-width: 1px; */40 --border-width: 2px;41 42 --dash-length: 5px; /* Only applies when border-style is dashed */43 44 /* Semantic color assignments */45 --bg-primary: var(--black);46 --bg-secondary: var(--black-70);47 --bg-tertiary: var(--black-50);48 --text-primary: var(--white);49 --text-secondary: var(--white-70);50 /* --border-color: var(--white-30); */51 --border-color: var(--light-purple-30);52 --accent-primary: var(--purple);53 --accent-secondary: var(--light-purple);54 --accent-hover: var(--light-purple);55 --message-user-bg: var(--purple);56 --message-assistant-bg: var(--black-70);57 --input-bg: var(--black-30);58 --input-border: var(--light-purple-30);59 --input-focus: var(--light-purple);60}61 62* {63 box-sizing: border-box;64 margin: 0;65 padding: 0;66}67 68body {69 font-family: 'Söhne', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;70 background-color: var(--bg-primary);71 color: var(--text-primary);72 padding: 0;73 margin: 0;74 min-height: 100vh;75}76 77.app-layout {78 display: flex;79 flex-direction: column;80 height: 100vh;81 overflow: hidden;82}83 84/* Top Navigation Bar */85.top-nav {86 position: relative;87 display: flex;88 align-items: center;89 justify-content: space-between;90 background-color: var(--bg-secondary);91 border-bottom: var(--border-width) var(--border-style) var(--border-color);92 padding: 24px 24px;93}94 95.nav-left {96 display: flex;97 align-items: baseline;98 gap: 12px;99 z-index: 1;100}101 102.nav-center {103 position: absolute;104 left: 50%;105 transform: translateX(-50%);106 display: flex;107 flex-direction: column;108 align-items: center;109 gap: 2px;110}111 112.nav-title {113 font-size: 22px;114 font-weight: 600;115 color: var(--text-primary);116}117 118.nav-subtitle {119 font-size: 16px;120 color: var(--text-secondary);121 text-align: center;122}123 124.nav-logo-img {125 height: 24px;126 width: auto;127}128 129.nav-logo-link {130 font-size: 28px;131 font-weight: 600;132 color: var(--text-primary);133 text-decoration: none;134 transition: color 0.2s ease;135 display: inline-block;136 line-height: 1;137}138 139.nav-logo-link:hover {140 color: var(--light-purple);141}142 143.model-status {144 font-size: 18px;145 font-weight: 500;146 color: var(--text-secondary);147}148 149.loading-progress {150 width: 100%;151 max-width: 300px;152 margin: 8px 0;153}154 155.progress-bar {156 width: 100%;157 height: 6px;158 background: var(--white-10);159 border-radius: 3px;160 overflow: hidden;161}162 163.progress-fill {164 height: 100%;165 background: linear-gradient(90deg, var(--light-purple), var(--orange));166 border-radius: 3px;167 transition: width 0.3s ease;168}169 170.progress-text {171 font-size: 12px;172 color: var(--text-secondary);173 margin-top: 4px;174 text-align: center;175}176 177.model-input-wrapper {178 display: flex;179 align-items: center;180 gap: 8px;181 width: 100%;182}183 184.model-input {185 flex: 1;186 padding: 6px 12px;187 background-color: var(--input-bg);188 border: 1px solid var(--input-border);189 border-radius: 6px;190 font-size: 13px;191 color: var(--text-primary);192 font-family: inherit;193 min-width: 0;194}195 196select.model-input {197 cursor: pointer;198 appearance: none;199 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");200 background-repeat: no-repeat;201 background-position: right 10px center;202 padding-right: 30px;203}204 205select.model-input option {206 background-color: var(--bg-primary);207 color: var(--text-primary);208}209 210.model-input:focus {211 outline: none;212 border-color: var(--input-focus);213 box-shadow: 0 0 0 3px var(--light-purple-10);214}215 216.model-input:disabled {217 opacity: 0.6;218 cursor: not-allowed;219}220 221.cache-info {222 font-size: 12px;223 color: var(--text-secondary);224 white-space: nowrap;225}226 227.container {228 flex: 1;229 background-color: var(--bg-primary);230 display: flex;231 flex-direction: column;232 overflow: hidden;233 min-height: 0;234}235 236.mode-container {237 display: none;238 flex-direction: column;239 height: 100%;240 overflow: hidden;241}242 243.mode-container.active {244 display: flex;245}246 247/* Live Caption Mode Styles */248#live-caption-mode.active {249 display: flex;250 flex-direction: column;251 width: 100%;252 height: 100%;253 padding: 32px;254 gap: 24px;255 background-color: var(--bg-primary);256}257 258.live-caption-content {259 flex: 1;260 display: flex;261 gap: 24px;262 min-height: 0;263}264 265.live-caption-video-section {266 flex: 2;267 display: flex;268 flex-direction: column;269 justify-content: space-between;270 gap: 16px;271 min-width: 0;272}273 274/* Safari: aspect-ratio on container causes incorrect width calculation */275.is-safari .live-caption-video-container {276 aspect-ratio: auto;277 width: 100%;278}279 280 281.live-caption-video-container {282 position: relative;283 aspect-ratio: 1;284 height: 100%;285 max-height: calc(100vh - 220px);286 border: 2px solid var(--light-purple-30);287 border-radius: 12px;288 background-color: var(--black-50);289 overflow: hidden;290 display: flex;291 align-items: center;292 justify-content: center;293}294 295#live-caption-video {296 width: 100%;297 height: 100%;298 object-fit: contain;299 background-color: var(--black);300 transform: scaleX(-1); /* Mirror the video horizontally */301}302 303/* Capture Overlay (on video) */304.capture-overlay {305 position: absolute;306 top: 12px;307 right: 12px;308 display: flex;309 flex-direction: column;310 align-items: flex-end;311 gap: 8px;312 padding: 10px 12px;313 background: rgba(0, 0, 0, 0.6);314 backdrop-filter: blur(8px);315 border-radius: 8px;316 z-index: 10;317 min-width: 100px;318}319 320.capture-overlay .control-btn {321 padding: 8px 16px;322 font-size: 14px;323 width: 100%;324}325 326.capture-overlay .control-select {327 padding: 6px 10px;328 padding-right: 24px;329 font-size: 14px;330 background-position: right 6px center;331}332 333.overlay-field {334 display: flex;335 align-items: center;336 gap: 8px;337}338 339.overlay-label {340 font-size: 14px;341 color: var(--white-70);342 white-space: nowrap;343}344 345.capture-status {346 display: flex;347 align-items: center;348 justify-content: center;349 gap: 6px;350}351 352.capture-overlay .status-text {353 font-size: 14px;354 color: var(--white-70);355}356 357/* Controls Bar */358.controls-bar {359 display: flex;360 flex-direction: column;361 gap: 10px;362 padding: 12px 16px;363 background-color: var(--black-50);364 border: 1px solid var(--light-purple-30);365 border-radius: 12px;366}367 368.controls-row {369 display: flex;370 align-items: center;371 justify-content: space-between;372 gap: 16px;373 flex-wrap: wrap;374}375 376.controls-row.status-row {377 gap: 12px;378}379 380.control-group {381 display: flex;382 align-items: center;383 gap: 8px;384}385 386.control-label {387 font-size: 13px;388 color: var(--text-secondary);389 white-space: nowrap;390}391 392.control-btn {393 padding: 8px 16px;394 background-color: var(--light-purple-30);395 border: 1px solid var(--light-purple-50);396 border-radius: 6px;397 color: var(--text-primary);398 font-size: 13px;399 font-weight: 500;400 cursor: pointer;401 transition: all 0.2s ease;402 white-space: nowrap;403}404 405.control-btn:hover:not(:disabled) {406 background-color: var(--light-purple-50);407 border-color: var(--light-purple);408}409 410.control-btn:disabled {411 opacity: 0.5;412 cursor: not-allowed;413}414 415.control-btn.primary {416 background: linear-gradient(135deg, var(--purple) 0%, var(--light-purple) 100%);417 border: none;418 color: white;419 padding: 8px 20px;420}421 422.control-btn.primary:hover:not(:disabled) {423 transform: translateY(-1px);424 box-shadow: 0 4px 12px var(--purple-50);425}426 427.control-btn.primary.stop {428 background: linear-gradient(135deg, var(--orange) 0%, var(--orange-70) 100%);429}430 431.control-btn.small {432 padding: 6px 12px;433 font-size: 12px;434}435 436.control-select {437 padding: 8px 12px;438 padding-right: 28px;439 background-color: var(--input-bg);440 border: 1px solid var(--input-border);441 border-radius: 6px;442 color: var(--text-primary);443 font-size: 13px;444 cursor: pointer;445 appearance: none;446 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L2 4h8z'/%3E%3C/svg%3E");447 background-repeat: no-repeat;448 background-position: right 8px center;449}450 451.control-select:focus {452 outline: none;453 border-color: var(--input-focus);454}455 456.control-select option {457 background-color: var(--bg-primary);458 color: var(--text-primary);459}460 461.control-select.model-select {462 min-width: 140px;463}464 465.status-text {466 font-size: 13px;467 color: var(--text-secondary);468 min-width: 40px;469}470 471/* Progress Bar (inline in status row) */472.progress-bar-row {473 flex: 1;474 max-width: 200px;475 height: 4px;476 background: var(--white-10);477 border-radius: 2px;478 overflow: hidden;479}480 481.progress-bar-row .progress-fill {482 height: 100%;483 background: linear-gradient(90deg, var(--light-purple), var(--orange));484 border-radius: 2px;485 transition: width 0.3s ease;486}487 488/* Indeterminate progress animation for large downloads */489.progress-bar-row.indeterminate .progress-fill {490 width: 30% !important;491 animation: indeterminate 1.5s ease-in-out infinite;492}493 494@keyframes indeterminate {495 0% { transform: translateX(-100%); }496 100% { transform: translateX(400%); }497}498 499.status-indicator {500 width: 10px;501 height: 10px;502 border-radius: 50%;503 background-color: var(--text-secondary);504}505 506.status-indicator.active {507 background-color: var(--light-purple);508 box-shadow: 0 0 8px var(--light-purple);509 animation: pulse 2s infinite;510}511 512@keyframes pulse {513 0%, 100% {514 opacity: 1;515 }516 50% {517 opacity: 0.5;518 }519}520 521.live-caption-text-section {522 flex: 1;523 display: flex;524 flex-direction: column;525 gap: 16px;526 min-width: 0;527 padding: 20px;528 background-color: var(--black-50);529 border: 1px solid var(--light-purple-30);530 border-radius: 12px;531}532 533.caption-section-title {534 font-size: 22px;535 font-weight: 600;536 color: var(--text-primary);537 padding-bottom: 12px;538 border-bottom: 1px solid var(--light-purple-30);539}540 541.latest-caption {542 font-size: 20px;543 font-weight: 500;544 color: var(--white);545 line-height: 1.4;546 padding: 12px;547 background-color: var(--black-30);548 border-radius: 8px;549 border-left: 3px solid var(--light-purple);550}551 552.caption-history {553 flex: 1;554 display: flex;555 flex-direction: column;556 gap: 8px;557 overflow-y: auto;558}559 560.caption-history-item {561 display: flex;562 gap: 12px;563 padding: 12px 16px;564 background-color: var(--black-30);565 border-radius: 8px;566 border: 1px solid var(--light-purple-30);567 border-left: 3px solid transparent;568 transition: opacity 0.3s ease, border-color 0.3s ease;569}570 571.caption-history-item.latest {572 border-left-color: var(--light-purple);573 background-color: var(--black-50);574}575 576.caption-timestamp {577 font-size: 11px;578 color: var(--text-secondary);579 flex-shrink: 0;580 font-family: 'JetBrains Mono', monospace;581 opacity: 0.7;582}583 584.caption-text {585 font-size: 14px;586 color: var(--text-primary);587 line-height: 1.4;588}589 590/* Responsive Design */591@media (max-width: 1024px) {592 .live-caption-content {593 flex-direction: column;594 }595 596 .live-caption-video-section,597 .live-caption-text-section {598 flex: none;599 width: 100%;600 }601 602 .live-caption-text-section {603 max-height: 300px;604 }605}606 607@media (max-width: 768px) {608 .top-nav {609 flex-direction: column;610 align-items: flex-start;611 gap: 16px;612 padding: 12px 16px;613 }614 615 .nav-left,616 .nav-center {617 width: 100%;618 }619 620 .nav-center {621 position: static;622 transform: none;623 align-items: flex-start;624 }625 626 .nav-subtitle {627 text-align: left;628 font-size: 14px;629 }630 631 .model-status {632 max-width: 100%;633 }634 635 .model-input-wrapper {636 width: 100%;637 }638 639 #live-caption-mode.active {640 padding: 16px;641 gap: 16px;642 }643 644 .live-caption-video-container {645 min-height: 200px;646 }647 648 .live-caption-text-section {649 padding: 16px;650 }651 652 .latest-caption {653 font-size: 20px;654 padding: 12px;655 }656 657 /* Controls bar mobile layout */658 .controls-bar {659 padding: 12px;660 }661 662 .controls-row {663 flex-direction: column;664 align-items: stretch;665 gap: 12px;666 }667 668 .control-group {669 flex-wrap: wrap;670 width: 100%;671 }672 673 .control-group.model-group {674 flex-direction: column;675 align-items: stretch;676 gap: 10px;677 }678 679 .control-group.model-group .control-label {680 margin-bottom: 4px;681 }682 683 .control-group.model-group .control-select {684 width: 100%;685 min-width: auto;686 }687 688 .control-group.model-group .control-btn {689 width: 100%;690 padding: 12px 16px;691 }692 693 .control-group.cache-group {694 flex-direction: row;695 justify-content: space-between;696 align-items: center;697 }698 699 /* Allow scrolling on mobile */700 .app-layout {701 overflow-y: auto;702 overflow-x: hidden;703 }704 705 .container {706 overflow-y: auto;707 overflow-x: hidden;708 }709 710 #live-caption-mode.active {711 overflow-y: auto;712 min-height: auto;713 height: auto;714 }715 716 .live-caption-content {717 min-height: auto;718 }719 720 .live-caption-video-section {721 flex-shrink: 0;722 }723}724 725 726/* Smooth transitions */727.mode-container {728 transition: opacity 0.2s ease;729}730 731/* Scrollbar styling for webkit browsers */732.caption-history::-webkit-scrollbar {733 width: 6px;734}735 736.caption-history::-webkit-scrollbar-track {737 background: var(--black-30);738}739 740.caption-history::-webkit-scrollbar-thumb {741 background: var(--light-purple-50);742 border-radius: 3px;743}744 745.caption-history::-webkit-scrollbar-thumb:hover {746 background: var(--light-purple);747}748 749/* Loading states */750@keyframes shimmer {751 0% {752 background-position: -1000px 0;753 }754 100% {755 background-position: 1000px 0;756 }757}758 759.loading {760 background: linear-gradient(761 90deg,762 var(--bg-tertiary) 0%,763 var(--bg-secondary) 50%,764 var(--bg-tertiary) 100%765 );766 background-size: 1000px 100%;767 animation: shimmer 2s infinite;768}769 770/* Focus visible for accessibility */771button:focus-visible,772input:focus-visible {773 outline: 2px solid var(--light-purple);774 outline-offset: 2px;775}776 777/* Ensure proper text rendering */778body {779 -webkit-font-smoothing: antialiased;780 -moz-osx-font-smoothing: grayscale;781 text-rendering: optimizeLegibility;782}783 784 785/* High contrast improvements */786@media (prefers-contrast: high) {787 button:not(:disabled) {788 border: 2px solid var(--light-purple);789 }790}791 792/* ===================================793 LOADING SCREEN / WELCOME PAGE794 =================================== */795 796 .loading-screen {797 position: fixed;798 top: 0;799 left: 0;800 width: 100%;801 height: 100%;802 background-color: var(--black);803 z-index: 10000;804 display: flex;805 align-items: center;806 justify-content: center;807 overflow-y: auto;808 overflow-x: hidden;809}810 811.loading-screen.hidden {812 display: none;813}814 815.loading-canvas {816 position: absolute;817 top: 0;818 left: 0;819 width: 100%;820 height: 100%;821 z-index: 1;822}823 824.loading-vignette {825 position: absolute;826 top: 0;827 left: 0;828 width: 100%;829 height: 100%;830 background: radial-gradient(ellipse at center, transparent 0%, rgba(0, 0, 0, 0.7) 100%);831 z-index: 2;832}833 834.loading-content {835 position: relative;836 z-index: 3;837 display: flex;838 flex-direction: column;839 align-items: center;840 justify-content: center;841 padding: 2rem;842 max-width: 800px;843 width: 100%;844 text-align: center;845 color: var(--white);846 margin: auto;847}848 849.loading-header {850 margin-bottom: 2rem;851}852 853.loading-logo {854 height: 60px;855 width: auto;856 margin-bottom: 1rem;857}858 859.loading-title-section {860 margin-bottom: 2rem;861}862 863.loading-title {864 font-size: 2.5rem;865 font-weight: 700;866 color: var(--white);867 margin: 0 0 0.5rem 0;868 text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);869}870 871.loading-subtitle {872 font-size: 1.25rem;873 color: var(--white-70);874 margin: 0;875 font-weight: 400;876}877 878.loading-description {879 margin-bottom: 3rem;880 max-width: 600px;881}882 883.loading-description p {884 font-size: 1rem;885 color: var(--white-70);886 line-height: 1.6;887 margin: 0 0 1rem 0;888}889 890.loading-description p:last-child {891 margin-bottom: 0;892}893 894.loading-action-section {895 margin-bottom: 2rem;896}897 898.loading-explore-button {899 padding: 16px 48px;900 background: linear-gradient(135deg, var(--purple) 0%, var(--light-purple) 100%);901 color: var(--white);902 border: none;903 border-radius: 12px;904 font-size: 1.125rem;905 font-weight: 600;906 cursor: pointer;907 transition: all 0.3s ease;908 box-shadow: 0 4px 16px var(--purple-50);909 display: inline-flex;910 align-items: center;911 gap: 12px;912 min-width: 200px;913 justify-content: center;914}915 916.loading-explore-button:hover:not(:disabled) {917 transform: translateY(-2px);918 box-shadow: 0 6px 24px var(--purple-70);919 background: linear-gradient(135deg, var(--light-purple) 0%, var(--purple) 100%);920}921 922.loading-explore-button:active:not(:disabled) {923 transform: translateY(0);924}925 926.loading-explore-button:disabled {927 opacity: 0.7;928 cursor: not-allowed;929}930 931.loading-spinner {932 display: inline-block;933 width: 20px;934 height: 20px;935 border: 3px solid var(--white-30);936 border-top-color: var(--white);937 border-radius: 50%;938 animation: spin 0.8s linear infinite;939}940 941@keyframes spin {942 to {943 transform: rotate(360deg);944 }945}946 947.loading-progress-text {948 font-size: 0.875rem;949 color: var(--white-70);950 font-weight: 500;951}952 953.loading-error {954 margin-top: 2rem;955 padding: 1.5rem;956 background-color: var(--black-70);957 border: 1px solid var(--orange-50);958 border-radius: 8px;959 max-width: 500px;960}961 962.loading-error p {963 color: var(--orange);964 margin: 0 0 1rem 0;965 font-size: 0.95rem;966}967 968.loading-retry-button {969 padding: 10px 24px;970 background-color: var(--orange);971 color: var(--white);972 border: none;973 border-radius: 8px;974 font-size: 0.95rem;975 font-weight: 500;976 cursor: pointer;977 transition: all 0.2s ease;978}979 980.loading-retry-button:hover {981 background-color: var(--orange-70);982 transform: translateY(-1px);983}984 985.hidden {986 display: none !important;987}988 989@media (max-width: 768px) {990 .loading-screen {991 align-items: flex-start;992 }993 994 .loading-content {995 padding: 2rem 1.5rem;996 min-height: 100%;997 justify-content: flex-start;998 padding-top: 3rem;999 }1000 1001 .loading-title {1002 font-size: 1.75rem;1003 }1004 1005 .loading-subtitle {1006 font-size: 1rem;1007 }1008 1009 .loading-description p {1010 font-size: 0.9rem;1011 }1012 1013 .loading-explore-button {1014 padding: 14px 36px;1015 font-size: 1rem;1016 min-width: 180px;1017 }1018}1019 1020/* Mobile Warning */1021.mobile-warning {1022 margin-bottom: 1.5rem;1023 padding: 1rem 1.5rem;1024 background-color: rgba(255, 95, 30, 0.15);1025 border: 1px solid var(--orange-50);1026 border-radius: 8px;1027 max-width: 400px;1028}1029 1030.mobile-warning-title {1031 color: var(--orange);1032 font-weight: 600;1033 font-size: 1rem;1034 margin-bottom: 0.5rem;1035 text-align: center;1036 display: flex;1037 align-items: center;1038 justify-content: center;1039 gap: 6px;1040}1041 1042.mobile-warning-title svg {1043 flex-shrink: 0;1044}1045 1046.mobile-warning p {1047 color: var(--white-70);1048 font-size: 0.85rem;1049 line-height: 1.5;1050 margin: 0 0 0.5rem 0;1051 text-align: center;1052}1053 1054.mobile-warning p:last-child {1055 margin-bottom: 0;1056}1057 1058/* Safari Warning */1059.safari-warning {1060 margin-bottom: 1.5rem;1061 padding: 1rem 1.5rem;1062 background-color: rgba(205, 130, 240, 0.15);1063 border: 1px solid var(--light-purple-50);1064 border-radius: 8px;1065 max-width: 500px;1066}1067 1068.safari-warning-title {1069 color: var(--light-purple);1070 font-weight: 600;1071 font-size: 1rem;1072 margin-bottom: 0.5rem;1073 text-align: center;1074 display: flex;1075 align-items: center;1076 justify-content: center;1077 gap: 6px;1078}1079 1080.safari-warning-title svg {1081 flex-shrink: 0;1082}1083 1084.safari-warning p {1085 color: var(--white-70);1086 font-size: 0.85rem;1087 line-height: 1.5;1088 margin: 0 0 0.5rem 0;1089 text-align: center;1090}1091 1092.safari-warning p:last-child {1093 margin-bottom: 0;1094}1095 1096.safari-warning a {1097 color: var(--light-purple);1098 text-decoration: underline;1099}1100 1101.safari-warning a:hover {1102 color: var(--white);1103}1104