Hugging Face's logo

Spaces:
TitanML
/
Model-Memory-Calculator
Running

App Files Community
Gogryu commited on
Commit
853300d
·
1 Parent(s): 76197f0

name change

Browse files
Files changed (10) hide show
  1. build/asset-manifest.json +6 -6
  2. build/index.html +1 -1
  3. build/static/css/main.269ef4d4.css +0 -4
  4. build/static/css/main.269ef4d4.css.map +0 -1
  5. build/static/css/main.30d8f365.css +4 -0
  6. build/static/css/main.30d8f365.css.map +1 -0
  7. build/static/js/{main.5e03a8ae.js → main.45548513.js} +0 -0
  8. build/static/js/{main.5e03a8ae.js.LICENSE.txt → main.45548513.js.LICENSE.txt} +0 -0
  9. build/static/js/{main.5e03a8ae.js.map → main.45548513.js.map} +0 -0
  10. src/pages/Calculator.tsx +158 -158
build/asset-manifest.json CHANGED
@@ -1,15 +1,15 @@
1
  {
2
  "files": {
3
- "main.css": "/static/css/main.269ef4d4.css",
4
- "main.js": "/static/js/main.5e03a8ae.js",
5
  "static/media/logo-dark-mode.png": "/static/media/logo-dark-mode.0c51ff42111d2779453a.png",
6
  "static/media/logo-light-mode.png": "/static/media/logo-light-mode.6bc3b2d5ed1ec2d7d721.png",
7
  "index.html": "/index.html",
8
- "main.269ef4d4.css.map": "/static/css/main.269ef4d4.css.map",
9
- "main.5e03a8ae.js.map": "/static/js/main.5e03a8ae.js.map"
10
  },
11
  "entrypoints": [
12
- "static/css/main.269ef4d4.css",
13
- "static/js/main.5e03a8ae.js"
14
  ]
15
  }
 
1
  {
2
  "files": {
3
+ "main.css": "/static/css/main.30d8f365.css",
4
+ "main.js": "/static/js/main.45548513.js",
5
  "static/media/logo-dark-mode.png": "/static/media/logo-dark-mode.0c51ff42111d2779453a.png",
6
  "static/media/logo-light-mode.png": "/static/media/logo-light-mode.6bc3b2d5ed1ec2d7d721.png",
7
  "index.html": "/index.html",
8
+ "main.30d8f365.css.map": "/static/css/main.30d8f365.css.map",
9
+ "main.45548513.js.map": "/static/js/main.45548513.js.map"
10
  },
11
  "entrypoints": [
12
+ "static/css/main.30d8f365.css",
13
+ "static/js/main.45548513.js"
14
  ]
15
  }
build/index.html CHANGED
@@ -1 +1 @@
1
- <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="Titan Takeoff Server" content="Titan Takeoff Server"/><link rel="manifest" crossorigin="use-credentials" href="manifest.json"/><title>Titan Takeoff Server</title><script defer="defer" src="./static/js/main.5e03a8ae.js"></script><link href="./static/css/main.269ef4d4.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
 
1
+ <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="Titan Takeoff Server" content="Titan Takeoff Server"/><link rel="manifest" crossorigin="use-credentials" href="manifest.json"/><title>Titan Takeoff Server</title><script defer="defer" src="./static/js/main.45548513.js"></script><link href="./static/css/main.30d8f365.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
build/static/css/main.269ef4d4.css DELETED
@@ -1,4 +0,0 @@
1
- /*
2
- ! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
3
- */*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.static{position:static}.m-2{margin:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-8{margin-left:2rem}.mr-4{margin-right:1rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-4xl{max-width:56rem}.flex-grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.whitespace-nowrap{white-space:nowrap}.border{border-width:1px}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.invert{--tw-invert:invert(100%)}.filter,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}:root{--text-color:#f9fafb;--background-color:#181f26;--input-color:#1f2937;--button-color:#374151;--button-hover-color:#4b5563;--scrollbar-color:#9b9b9bb3;--chatbox-color:#2f3e46;--message-border-colors:#e25e5b,#f29062,#ffc068,#ffe7dc,#71cbe8,#444292;--message-text-color:var(--text-color)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#181f26;background-color:var(--background-color);color:#f9fafb;color:var(--text-color);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:100vh;margin:0}body.light{--text-color:#111827;--background-color:#f9fafb;--input-color:#f1f5f9;--button-color:#e5e7eb;--button-hover-color:#d1d5db;--scrollbar-color:#646464b3;--chatbox-color:#64748b;--message-border-colors:#e25e5b,#f29062,#ffc068,#ffe7dc,#71cbe8,#444292;--message-text-color:#f9fafb}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#topbar{height:60px}#layout{height:calc(100vh - 60px)}#textarea{height:calc(100vh - 180px)}#textarea,.config-input{background-color:#1f2937;background-color:var(--input-color);color:#f9fafb;color:var(--text-color);width:100%}.button-style{background-color:#374151;background-color:var(--button-color);color:#f9fafb;color:var(--text-color)}.button-style:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.toggle-switch{display:inline-block;height:34px;margin-top:1em;position:relative;width:60px}.toggle-switch input{height:0;opacity:0;width:0}.toggle-switch .slider{background-color:#374151;background-color:var(--button-color);border-radius:34px;bottom:0;cursor:pointer;height:34px;left:0;position:absolute;right:0;top:0;transition:background-color .4s}.toggle-switch .slider:before{background-color:#f9fafb;background-color:var(--text-color);content:"";position:absolute}.toggle-switch .slider-content,.toggle-switch .slider:before{border-radius:50%;bottom:4px;height:26px;left:4px;transition:transform .4s;width:26px}.toggle-switch .slider-content{align-items:center;display:flex;justify-content:center;position:relative;top:4px}.toggle-switch input:checked+.slider .slider-content,.toggle-switch input:checked+.slider:before{transform:translateX(26px)}#sun-icon{color:#e5e7eb}#moon-icon{color:#374151}.modal-overlay{align-items:center;background-color:#000000b3;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.modal-content{background-color:#fff;background-color:#181f26;background-color:var(--background-color);border-radius:8px;color:#f9fafb;color:var(--text-color);max-width:500px;padding:20px;width:80%}.modal-header{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.form-button{background-color:#374151;background-color:var(--button-color);color:#f9fafb;color:var(--text-color);padding:8px;width:100%}.form-button:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.refresh-button{align-items:center;border-radius:50%;display:flex;height:36px;justify-content:center;min-width:36px;transition:transform .4s;width:36px}.refresh-button:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.content-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.dropdown-input{background-color:#1f2937;background-color:var(--input-color);color:#f9fafb;color:var(--text-color);height:32px;min-width:200px;padding-left:8px;width:100%}#chat-container,#playground-box{height:calc(100vh - 60px)}#chat-container{display:flex;flex-direction:column}#chatbox{background-color:#1f2937;background-color:var(--input-color);flex:1 1;margin:1em;overflow:auto;scrollbar-color:#9b9b9bb3 #0000;scrollbar-color:var(--scrollbar-color) #0000;scrollbar-width:thin}#chatbox::-webkit-scrollbar{width:12px}#chatbox::-webkit-scrollbar-track{background:#0000}#chatbox::-webkit-scrollbar-thumb{border-radius:50px}#chatbox::-webkit-scrollbar-thumb,#chatbox:hover::-webkit-scrollbar-thumb{background:#9b9b9bb3;background:var(--scrollbar-color)}#inputbox{background-color:#1f2937;background-color:var(--input-color);display:flex;flex-direction:row;height:80px;margin:1em}#message-input{background-color:#374151;background-color:var(--button-color);color:#f9fafb;color:var(--text-color);flex:1 1}.chat-button:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.message{background-color:#2f3e46;background-color:var(--chatbox-color);border-radius:10px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;color:#f9fafb;color:var(--message-text-color);margin:10px;padding:10px;position:relative;z-index:1}.message.user{margin-left:auto;margin-right:40px}.message.assistant{margin-left:40px;margin-right:auto}.home-button{width:600px}.home-button,.home-button-small{background-color:#374151;background-color:var(--button-color);border-radius:10px;color:#f9fafb;color:var(--text-color);cursor:pointer;padding:20px;text-align:center;transition:background-color .3s}.home-button-small{width:300px}.home-button-small:hover,.home-button:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.home-button-title{font-size:20px;font-weight:700;margin-bottom:10px}.home-button-description{font-size:16px}.chart{border:1px solid #f9fafb;border:1px solid var(--text-color);border-radius:4px;flex-direction:column;margin-bottom:10px;margin-top:10px;padding-bottom:12px;padding-left:20px;padding-top:12px}.chart,.chart-row{align-items:center;display:flex}.chart-row{flex-direction:row}.chart-row-size,.chart-row-title{width:100px}.calculator-input-box{display:flex;flex-direction:row}.calculator-box,.calculator-input-box{border:1px solid #f9fafb;border:1px solid var(--text-color);border-radius:4px;margin-bottom:10px;margin-top:10px;padding-block:12px;width:100%}.calculator-input-title{height:100%;margin-left:20px;width:140px}.calculator-input-tab,.calculator-input-tab-active{padding-bottom:4px;padding-left:8px;padding-right:8px}.calculator-input-tab-active{border-bottom:2px solid #f9fafb;border-bottom:2px solid var(--text-color)}.calculator-input,.calculator-select{background-color:#1f2937;background-color:var(--input-color);color:#f9fafb;color:var(--text-color);display:block;padding-block:4px;width:100%}#tooltip{opacity:0;padding:5px;pointer-events:none;position:absolute}#right-container{display:flex;flex-direction:column;height:calc(100vh - 60px)}.table-cell{border:1px solid #f9fafb;border:1px solid var(--text-color)}.chart-side-panel{width:200px}.side-panel-input{background-color:#1f2937;background-color:var(--input-color);color:#f9fafb;color:var(--text-color);display:block;padding-block:4px;width:100%}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
4
- /*# sourceMappingURL=main.269ef4d4.css.map*/
 
 
 
 
 
build/static/css/main.269ef4d4.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"static/css/main.269ef4d4.css","mappings":"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","sources":["index.css"],"sourcesContent":["@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n:root {\n --text-color: #f9fafb;\n --background-color: #181f26;\n --input-color: #1f2937; /* lighter */\n --button-color: #374151; /* lighter */\n --button-hover-color: #4b5563; /* lighter */\n --scrollbar-color: rgba(155, 155, 155, 0.7);\n --chatbox-color: #2f3e46;\n --message-border-colors: #e25e5b, #f29062, #ffc068, #ffe7dc, #71cbe8, #444292;\n --message-text-color: var(--text-color);\n}\n\nbody {\n margin: 0;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\n 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n background-color: var(--background-color);\n color: var(--text-color);\n display: flex;\n flex-direction: column;\n height: 100vh;\n margin: 0;\n}\n\nbody.light {\n --text-color: #111827;\n --background-color: #f9fafb;\n --input-color: #f1f5f9;\n --button-color: #e5e7eb;\n --button-hover-color: #d1d5db;\n --scrollbar-color: rgba(100, 100, 100, 0.7);\n --chatbox-color: #64748b;\n --message-border-colors: #e25e5b, #f29062, #ffc068, #ffe7dc, #71cbe8, #444292;\n --message-text-color: #f9fafb;\n}\n\ncode {\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\n}\n\n#topbar {\n height: 60px;\n}\n\n#layout {\n height: calc(100vh - 60px);\n}\n\n#textarea {\n color: var(--text-color);\n background-color: var(--input-color);\n width: 100%;\n height: calc(100vh - 180px);\n}\n\n.config-input {\n color: var(--text-color);\n background-color: var(--input-color);\n width: 100%;\n}\n\n/* button */\n.button-style {\n background-color: var(--button-color);\n color: var(--text-color);\n}\n\n.button-style:hover {\n background-color: var(--button-hover-color);\n}\n\n/* toggle switch */\n.toggle-switch {\n position: relative;\n display: inline-block;\n width: 60px;\n height: 34px;\n margin-top: 1em;\n}\n\n.toggle-switch input {\n opacity: 0;\n width: 0;\n height: 0;\n}\n\n.toggle-switch .slider {\n position: absolute;\n cursor: pointer;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n height: 34px;\n background-color: var(--button-color);\n transition: background-color 0.4s;\n border-radius: 34px;\n}\n\n.toggle-switch .slider:before {\n position: absolute;\n content: '';\n height: 26px;\n width: 26px;\n left: 4px;\n bottom: 4px;\n background-color: var(--text-color);\n transition: transform 0.4s;\n border-radius: 50%;\n}\n\n.toggle-switch .slider-content {\n position: relative;\n display: flex;\n height: 26px;\n width: 26px;\n top: 4px;\n align-items: center;\n justify-content: center;\n left: 4px;\n bottom: 4px;\n transition: transform 0.4s;\n border-radius: 50%;\n}\n\n.toggle-switch input:checked + .slider:before,\n.toggle-switch input:checked + .slider .slider-content {\n transform: translateX(26px);\n}\n\n#sun-icon {\n color: #e5e7eb;\n}\n\n#moon-icon {\n color: #374151;\n}\n\n/* modal */\n.modal-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.modal-content {\n background-color: #fff;\n padding: 20px;\n border-radius: 8px;\n max-width: 500px;\n width: 80%;\n background-color: var(--background-color);\n color: var(--text-color);\n}\n\n.modal-header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n}\n\n.form-button {\n background-color: var(--button-color);\n color: var(--text-color);\n width: 100%;\n padding: 8px;\n}\n\n.form-button:hover {\n background-color: var(--button-hover-color);\n}\n\n.refresh-button {\n width: 36px;\n height: 36px;\n min-width: 36px;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: transform 0.4s;\n border-radius: 50%;\n}\n\n.refresh-button:hover {\n /* transform: rotate(360deg); */\n background-color: var(--button-hover-color);\n}\n\n.content-header {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n width: 100%;\n}\n\n.dropdown-input {\n background-color: var(--input-color);\n color: var(--text-color);\n padding-left: 8px;\n width: 100%;\n min-width: 200px;\n height: 32px;\n}\n\n#playground-box {\n height: calc(100vh - 60px);\n}\n\n#chat-container {\n display: flex;\n flex-direction: column;\n height: calc(100vh - 60px);\n}\n\n#chatbox {\n flex: 1;\n overflow: auto;\n margin: 1em;\n scrollbar-width: thin; /* For Firefox */\n scrollbar-color: var(--scrollbar-color) transparent; /* For Firefox */\n background-color: var(--input-color);\n}\n\n#chatbox::-webkit-scrollbar {\n /* For Chrome, Safari, and Opera */\n width: 12px;\n}\n\n#chatbox::-webkit-scrollbar-track {\n /* For Chrome, Safari, and Opera */\n background: transparent;\n}\n\n#chatbox::-webkit-scrollbar-thumb {\n /* For Chrome, Safari, and Opera */\n background: var(--scrollbar-color);\n border-radius: 50px;\n}\n\n#chatbox:hover::-webkit-scrollbar-thumb {\n /* For Chrome, Safari, and Opera */\n background: var(--scrollbar-color);\n}\n\n#inputbox {\n height: 80px;\n margin: 1em;\n background-color: var(--input-color);\n display: flex;\n flex-direction: row;\n}\n\n#message-input {\n flex: 1;\n background-color: var(--button-color);\n color: var(--text-color);\n}\n\n.chat-button:hover {\n background-color: var(--button-hover-color);\n}\n\n.message {\n position: relative;\n background-color: var(--chatbox-color);\n box-shadow:\n 0 10px 15px -3px rgba(0, 0, 0, 0.1),\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n border-radius: 10px;\n color: var(--message-text-color);\n padding: 10px;\n margin: 10px;\n z-index: 1;\n}\n\n.message.user {\n margin-left: auto;\n margin-right: 40px;\n}\n\n.message.assistant {\n margin-left: 40px;\n margin-right: auto;\n}\n\n.home-button {\n padding: 20px;\n background-color: var(--button-color);\n color: var(--text-color);\n border-radius: 10px;\n width: 600px;\n text-align: center;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.home-button-small {\n padding: 20px;\n background-color: var(--button-color);\n color: var(--text-color);\n border-radius: 10px;\n width: 300px;\n text-align: center;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.home-button-small:hover {\n background-color: var(--button-hover-color);\n}\n\n.home-button:hover {\n background-color: var(--button-hover-color);\n}\n\n.home-button-title {\n font-size: 20px;\n font-weight: bold;\n margin-bottom: 10px;\n}\n\n.home-button-description {\n font-size: 16px;\n}\n\n/* Calculator */\n.chart {\n display: flex;\n flex-direction: column;\n align-items: center;\n margin-top: 10px;\n margin-bottom: 10px;\n border: 1px solid var(--text-color);\n border-radius: 4px;\n padding-left: 20px;\n padding-top: 12px;\n padding-bottom: 12px;\n}\n\n.chart-row {\n display: flex;\n flex-direction: row;\n align-items: center;\n}\n\n.chart-row-title {\n width: 100px;\n}\n\n.chart-row-size {\n width: 100px;\n}\n\n.calculator-input-box {\n display: flex;\n flex-direction: row;\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n border: 1px solid var(--text-color);\n border-radius: 4px;\n padding-block: 12px;\n}\n\n.calculator-box {\n width: 100%;\n margin-top: 10px;\n margin-bottom: 10px;\n border: 1px solid var(--text-color);\n border-radius: 4px;\n padding-block: 12px;\n}\n\n.calculator-input-title {\n width: 140px;\n margin-left: 20px;\n height: 100%;\n}\n\n.calculator-input-tab {\n padding-bottom: 4px;\n padding-left: 8px;\n padding-right: 8px;\n}\n\n.calculator-input-tab-active {\n padding-bottom: 4px;\n padding-left: 8px;\n padding-right: 8px;\n border-bottom: 2px solid var(--text-color);\n}\n\n.calculator-select {\n background-color: var(--input-color);\n color: var(--text-color);\n display: block;\n width: 100%;\n padding-block: 4px;\n}\n\n.calculator-input {\n background-color: var(--input-color);\n color: var(--text-color);\n display: block;\n width: 100%;\n padding-block: 4px;\n}\n\n#tooltip {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n padding: 5px;\n}\n\n#right-container {\n display: flex;\n flex-direction: column;\n height: calc(100vh - 60px);\n}\n\n.table-cell {\n border: 1px solid var(--text-color);\n}\n\n.chart-side-panel {\n width: 200px;\n}\n\n.side-panel-input {\n background-color: var(--input-color);\n color: var(--text-color);\n display: block;\n width: 100%;\n padding-block: 4px;\n}\n"],"names":[],"sourceRoot":""}
 
 
build/static/css/main.30d8f365.css ADDED
@@ -0,0 +1,4 @@
 
 
 
 
 
1
+ /*
2
+ ! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
3
+ */*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:normal;-webkit-tap-highlight-color:transparent;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-variation-settings:normal;line-height:1.5;tab-size:4}body{line-height:inherit}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:normal;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-feature-settings:inherit;color:inherit;font-family:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }.static{position:static}.absolute{position:absolute}.m-2{margin:.5rem}.mx-4{margin-left:1rem;margin-right:1rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-8{margin-left:2rem}.mr-4{margin-right:1rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-4xl{max-width:56rem}.flex-grow{flex-grow:1}.transform{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.resize-none{resize:none}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:1rem}.space-x-4>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(1rem*(1 - var(--tw-space-x-reverse)));margin-right:calc(1rem*var(--tw-space-x-reverse))}.space-y-8>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-bottom:calc(2rem*var(--tw-space-y-reverse));margin-top:calc(2rem*(1 - var(--tw-space-y-reverse)))}.whitespace-nowrap{white-space:nowrap}.border{border-width:1px}.p-4{padding:1rem}.px-4{padding-left:1rem;padding-right:1rem}.py-1{padding-bottom:.25rem;padding-top:.25rem}.py-2{padding-bottom:.5rem;padding-top:.5rem}.text-center{text-align:center}.text-2xl{font-size:1.5rem;line-height:2rem}.text-4xl{font-size:2.25rem;line-height:2.5rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.invert{--tw-invert:invert(100%)}.filter,.invert{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-duration:.15s;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1)}.ease-in-out{transition-timing-function:cubic-bezier(.4,0,.2,1)}:root{--text-color:#f9fafb;--background-color:#181f26;--input-color:#1f2937;--button-color:#374151;--button-hover-color:#4b5563;--scrollbar-color:#9b9b9bb3;--chatbox-color:#2f3e46;--message-border-colors:#e25e5b,#f29062,#ffc068,#ffe7dc,#71cbe8,#444292;--message-text-color:var(--text-color)}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#181f26;background-color:var(--background-color);color:#f9fafb;color:var(--text-color);display:flex;flex-direction:column;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;height:100vh;margin:0}body.light{--text-color:#111827;--background-color:#f9fafb;--input-color:#f1f5f9;--button-color:#e5e7eb;--button-hover-color:#d1d5db;--scrollbar-color:#646464b3;--chatbox-color:#64748b;--message-border-colors:#e25e5b,#f29062,#ffc068,#ffe7dc,#71cbe8,#444292;--message-text-color:#f9fafb}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}#topbar{height:60px}#layout{height:calc(100vh - 60px)}#textarea{height:calc(100vh - 180px)}#textarea,.config-input{background-color:#1f2937;background-color:var(--input-color);color:#f9fafb;color:var(--text-color);width:100%}.button-style{background-color:#374151;background-color:var(--button-color);color:#f9fafb;color:var(--text-color)}.button-style:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.toggle-switch{display:inline-block;height:34px;margin-top:1em;position:relative;width:60px}.toggle-switch input{height:0;opacity:0;width:0}.toggle-switch .slider{background-color:#374151;background-color:var(--button-color);border-radius:34px;bottom:0;cursor:pointer;height:34px;left:0;position:absolute;right:0;top:0;transition:background-color .4s}.toggle-switch .slider:before{background-color:#f9fafb;background-color:var(--text-color);content:"";position:absolute}.toggle-switch .slider-content,.toggle-switch .slider:before{border-radius:50%;bottom:4px;height:26px;left:4px;transition:transform .4s;width:26px}.toggle-switch .slider-content{align-items:center;display:flex;justify-content:center;position:relative;top:4px}.toggle-switch input:checked+.slider .slider-content,.toggle-switch input:checked+.slider:before{transform:translateX(26px)}#sun-icon{color:#e5e7eb}#moon-icon{color:#374151}.modal-overlay{align-items:center;background-color:#000000b3;display:flex;height:100%;justify-content:center;left:0;position:fixed;top:0;width:100%}.modal-content{background-color:#fff;background-color:#181f26;background-color:var(--background-color);border-radius:8px;color:#f9fafb;color:var(--text-color);max-width:500px;padding:20px;width:80%}.modal-header{align-items:center;display:flex;flex-direction:row;justify-content:space-between}.form-button{background-color:#374151;background-color:var(--button-color);color:#f9fafb;color:var(--text-color);padding:8px;width:100%}.form-button:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.refresh-button{align-items:center;border-radius:50%;display:flex;height:36px;justify-content:center;min-width:36px;transition:transform .4s;width:36px}.refresh-button:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.content-header{display:flex;flex-direction:row;justify-content:space-between;width:100%}.dropdown-input{background-color:#1f2937;background-color:var(--input-color);color:#f9fafb;color:var(--text-color);height:32px;min-width:200px;padding-left:8px;width:100%}#chat-container,#playground-box{height:calc(100vh - 60px)}#chat-container{display:flex;flex-direction:column}#chatbox{background-color:#1f2937;background-color:var(--input-color);flex:1 1;margin:1em;overflow:auto;scrollbar-color:#9b9b9bb3 #0000;scrollbar-color:var(--scrollbar-color) #0000;scrollbar-width:thin}#chatbox::-webkit-scrollbar{width:12px}#chatbox::-webkit-scrollbar-track{background:#0000}#chatbox::-webkit-scrollbar-thumb{border-radius:50px}#chatbox::-webkit-scrollbar-thumb,#chatbox:hover::-webkit-scrollbar-thumb{background:#9b9b9bb3;background:var(--scrollbar-color)}#inputbox{background-color:#1f2937;background-color:var(--input-color);display:flex;flex-direction:row;height:80px;margin:1em}#message-input{background-color:#374151;background-color:var(--button-color);color:#f9fafb;color:var(--text-color);flex:1 1}.chat-button:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.message{background-color:#2f3e46;background-color:var(--chatbox-color);border-radius:10px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;color:#f9fafb;color:var(--message-text-color);margin:10px;padding:10px;position:relative;z-index:1}.message.user{margin-left:auto;margin-right:40px}.message.assistant{margin-left:40px;margin-right:auto}.home-button{width:600px}.home-button,.home-button-small{background-color:#374151;background-color:var(--button-color);border-radius:10px;color:#f9fafb;color:var(--text-color);cursor:pointer;padding:20px;text-align:center;transition:background-color .3s}.home-button-small{width:300px}.home-button-small:hover,.home-button:hover{background-color:#4b5563;background-color:var(--button-hover-color)}.home-button-title{font-size:20px;font-weight:700;margin-bottom:10px}.home-button-description{font-size:16px}.chart{border:1px solid #f9fafb;border:1px solid var(--text-color);border-radius:4px;flex-direction:column;margin-bottom:10px;margin-top:10px;padding-bottom:12px;padding-left:20px;padding-top:12px}.chart,.chart-row{align-items:center;display:flex}.chart-row{flex-direction:row}.chart-row-size,.chart-row-title{width:100px}.calculator-input-box{display:flex;flex-direction:row}.calculator-box,.calculator-input-box{border:1px solid #f9fafb;border:1px solid var(--text-color);border-radius:4px;margin-bottom:10px;margin-top:10px;padding-block:12px;width:100%}.calculator-input-title{height:100%;margin-left:20px;width:140px}.calculator-input-tab,.calculator-input-tab-active{padding-bottom:4px;padding-left:8px;padding-right:8px}.calculator-input-tab-active{border-bottom:2px solid #f9fafb;border-bottom:2px solid var(--text-color)}.calculator-input,.calculator-select{background-color:#1f2937;background-color:var(--input-color);color:#f9fafb;color:var(--text-color);display:block;padding-block:4px;width:100%}#tooltip{opacity:0;padding:5px;pointer-events:none;position:absolute}#right-container{display:flex;flex-direction:column;height:calc(100vh - 60px)}.table-cell{border:1px solid #f9fafb;border:1px solid var(--text-color)}.chart-side-panel{width:200px}.side-panel-input{background-color:#1f2937;background-color:var(--input-color);color:#f9fafb;color:var(--text-color);display:block;padding-block:4px;width:100%}@media (min-width:640px){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
4
+ /*# sourceMappingURL=main.30d8f365.css.map*/
build/static/css/main.30d8f365.css.map ADDED
@@ -0,0 +1 @@
 
 
1
+ {"version":3,"file":"static/css/main.30d8f365.css","mappings":"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","sources":["index.css"],"sourcesContent":["@tailwind base;\r\n@tailwind components;\r\n@tailwind utilities;\r\n\r\n:root {\r\n --text-color: #f9fafb;\r\n --background-color: #181f26;\r\n --input-color: #1f2937; /* lighter */\r\n --button-color: #374151; /* lighter */\r\n --button-hover-color: #4b5563; /* lighter */\r\n --scrollbar-color: rgba(155, 155, 155, 0.7);\r\n --chatbox-color: #2f3e46;\r\n --message-border-colors: #e25e5b, #f29062, #ffc068, #ffe7dc, #71cbe8, #444292;\r\n --message-text-color: var(--text-color);\r\n}\r\n\r\nbody {\r\n margin: 0;\r\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',\r\n 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n background-color: var(--background-color);\r\n color: var(--text-color);\r\n display: flex;\r\n flex-direction: column;\r\n height: 100vh;\r\n margin: 0;\r\n}\r\n\r\nbody.light {\r\n --text-color: #111827;\r\n --background-color: #f9fafb;\r\n --input-color: #f1f5f9;\r\n --button-color: #e5e7eb;\r\n --button-hover-color: #d1d5db;\r\n --scrollbar-color: rgba(100, 100, 100, 0.7);\r\n --chatbox-color: #64748b;\r\n --message-border-colors: #e25e5b, #f29062, #ffc068, #ffe7dc, #71cbe8, #444292;\r\n --message-text-color: #f9fafb;\r\n}\r\n\r\ncode {\r\n font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;\r\n}\r\n\r\n#topbar {\r\n height: 60px;\r\n}\r\n\r\n#layout {\r\n height: calc(100vh - 60px);\r\n}\r\n\r\n#textarea {\r\n color: var(--text-color);\r\n background-color: var(--input-color);\r\n width: 100%;\r\n height: calc(100vh - 180px);\r\n}\r\n\r\n.config-input {\r\n color: var(--text-color);\r\n background-color: var(--input-color);\r\n width: 100%;\r\n}\r\n\r\n/* button */\r\n.button-style {\r\n background-color: var(--button-color);\r\n color: var(--text-color);\r\n}\r\n\r\n.button-style:hover {\r\n background-color: var(--button-hover-color);\r\n}\r\n\r\n/* toggle switch */\r\n.toggle-switch {\r\n position: relative;\r\n display: inline-block;\r\n width: 60px;\r\n height: 34px;\r\n margin-top: 1em;\r\n}\r\n\r\n.toggle-switch input {\r\n opacity: 0;\r\n width: 0;\r\n height: 0;\r\n}\r\n\r\n.toggle-switch .slider {\r\n position: absolute;\r\n cursor: pointer;\r\n top: 0;\r\n left: 0;\r\n right: 0;\r\n bottom: 0;\r\n height: 34px;\r\n background-color: var(--button-color);\r\n transition: background-color 0.4s;\r\n border-radius: 34px;\r\n}\r\n\r\n.toggle-switch .slider:before {\r\n position: absolute;\r\n content: '';\r\n height: 26px;\r\n width: 26px;\r\n left: 4px;\r\n bottom: 4px;\r\n background-color: var(--text-color);\r\n transition: transform 0.4s;\r\n border-radius: 50%;\r\n}\r\n\r\n.toggle-switch .slider-content {\r\n position: relative;\r\n display: flex;\r\n height: 26px;\r\n width: 26px;\r\n top: 4px;\r\n align-items: center;\r\n justify-content: center;\r\n left: 4px;\r\n bottom: 4px;\r\n transition: transform 0.4s;\r\n border-radius: 50%;\r\n}\r\n\r\n.toggle-switch input:checked + .slider:before,\r\n.toggle-switch input:checked + .slider .slider-content {\r\n transform: translateX(26px);\r\n}\r\n\r\n#sun-icon {\r\n color: #e5e7eb;\r\n}\r\n\r\n#moon-icon {\r\n color: #374151;\r\n}\r\n\r\n/* modal */\r\n.modal-overlay {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 100%;\r\n background-color: rgba(0, 0, 0, 0.7);\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.modal-content {\r\n background-color: #fff;\r\n padding: 20px;\r\n border-radius: 8px;\r\n max-width: 500px;\r\n width: 80%;\r\n background-color: var(--background-color);\r\n color: var(--text-color);\r\n}\r\n\r\n.modal-header {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n align-items: center;\r\n}\r\n\r\n.form-button {\r\n background-color: var(--button-color);\r\n color: var(--text-color);\r\n width: 100%;\r\n padding: 8px;\r\n}\r\n\r\n.form-button:hover {\r\n background-color: var(--button-hover-color);\r\n}\r\n\r\n.refresh-button {\r\n width: 36px;\r\n height: 36px;\r\n min-width: 36px;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n transition: transform 0.4s;\r\n border-radius: 50%;\r\n}\r\n\r\n.refresh-button:hover {\r\n /* transform: rotate(360deg); */\r\n background-color: var(--button-hover-color);\r\n}\r\n\r\n.content-header {\r\n display: flex;\r\n flex-direction: row;\r\n justify-content: space-between;\r\n width: 100%;\r\n}\r\n\r\n.dropdown-input {\r\n background-color: var(--input-color);\r\n color: var(--text-color);\r\n padding-left: 8px;\r\n width: 100%;\r\n min-width: 200px;\r\n height: 32px;\r\n}\r\n\r\n#playground-box {\r\n height: calc(100vh - 60px);\r\n}\r\n\r\n#chat-container {\r\n display: flex;\r\n flex-direction: column;\r\n height: calc(100vh - 60px);\r\n}\r\n\r\n#chatbox {\r\n flex: 1;\r\n overflow: auto;\r\n margin: 1em;\r\n scrollbar-width: thin; /* For Firefox */\r\n scrollbar-color: var(--scrollbar-color) transparent; /* For Firefox */\r\n background-color: var(--input-color);\r\n}\r\n\r\n#chatbox::-webkit-scrollbar {\r\n /* For Chrome, Safari, and Opera */\r\n width: 12px;\r\n}\r\n\r\n#chatbox::-webkit-scrollbar-track {\r\n /* For Chrome, Safari, and Opera */\r\n background: transparent;\r\n}\r\n\r\n#chatbox::-webkit-scrollbar-thumb {\r\n /* For Chrome, Safari, and Opera */\r\n background: var(--scrollbar-color);\r\n border-radius: 50px;\r\n}\r\n\r\n#chatbox:hover::-webkit-scrollbar-thumb {\r\n /* For Chrome, Safari, and Opera */\r\n background: var(--scrollbar-color);\r\n}\r\n\r\n#inputbox {\r\n height: 80px;\r\n margin: 1em;\r\n background-color: var(--input-color);\r\n display: flex;\r\n flex-direction: row;\r\n}\r\n\r\n#message-input {\r\n flex: 1;\r\n background-color: var(--button-color);\r\n color: var(--text-color);\r\n}\r\n\r\n.chat-button:hover {\r\n background-color: var(--button-hover-color);\r\n}\r\n\r\n.message {\r\n position: relative;\r\n background-color: var(--chatbox-color);\r\n box-shadow:\r\n 0 10px 15px -3px rgba(0, 0, 0, 0.1),\r\n 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n border-radius: 10px;\r\n color: var(--message-text-color);\r\n padding: 10px;\r\n margin: 10px;\r\n z-index: 1;\r\n}\r\n\r\n.message.user {\r\n margin-left: auto;\r\n margin-right: 40px;\r\n}\r\n\r\n.message.assistant {\r\n margin-left: 40px;\r\n margin-right: auto;\r\n}\r\n\r\n.home-button {\r\n padding: 20px;\r\n background-color: var(--button-color);\r\n color: var(--text-color);\r\n border-radius: 10px;\r\n width: 600px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n}\r\n\r\n.home-button-small {\r\n padding: 20px;\r\n background-color: var(--button-color);\r\n color: var(--text-color);\r\n border-radius: 10px;\r\n width: 300px;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: background-color 0.3s;\r\n}\r\n\r\n.home-button-small:hover {\r\n background-color: var(--button-hover-color);\r\n}\r\n\r\n.home-button:hover {\r\n background-color: var(--button-hover-color);\r\n}\r\n\r\n.home-button-title {\r\n font-size: 20px;\r\n font-weight: bold;\r\n margin-bottom: 10px;\r\n}\r\n\r\n.home-button-description {\r\n font-size: 16px;\r\n}\r\n\r\n/* Calculator */\r\n.chart {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n border: 1px solid var(--text-color);\r\n border-radius: 4px;\r\n padding-left: 20px;\r\n padding-top: 12px;\r\n padding-bottom: 12px;\r\n}\r\n\r\n.chart-row {\r\n display: flex;\r\n flex-direction: row;\r\n align-items: center;\r\n}\r\n\r\n.chart-row-title {\r\n width: 100px;\r\n}\r\n\r\n.chart-row-size {\r\n width: 100px;\r\n}\r\n\r\n.calculator-input-box {\r\n display: flex;\r\n flex-direction: row;\r\n width: 100%;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n border: 1px solid var(--text-color);\r\n border-radius: 4px;\r\n padding-block: 12px;\r\n}\r\n\r\n.calculator-box {\r\n width: 100%;\r\n margin-top: 10px;\r\n margin-bottom: 10px;\r\n border: 1px solid var(--text-color);\r\n border-radius: 4px;\r\n padding-block: 12px;\r\n}\r\n\r\n.calculator-input-title {\r\n width: 140px;\r\n margin-left: 20px;\r\n height: 100%;\r\n}\r\n\r\n.calculator-input-tab {\r\n padding-bottom: 4px;\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n}\r\n\r\n.calculator-input-tab-active {\r\n padding-bottom: 4px;\r\n padding-left: 8px;\r\n padding-right: 8px;\r\n border-bottom: 2px solid var(--text-color);\r\n}\r\n\r\n.calculator-select {\r\n background-color: var(--input-color);\r\n color: var(--text-color);\r\n display: block;\r\n width: 100%;\r\n padding-block: 4px;\r\n}\r\n\r\n.calculator-input {\r\n background-color: var(--input-color);\r\n color: var(--text-color);\r\n display: block;\r\n width: 100%;\r\n padding-block: 4px;\r\n}\r\n\r\n#tooltip {\r\n position: absolute;\r\n opacity: 0;\r\n pointer-events: none;\r\n padding: 5px;\r\n}\r\n\r\n#right-container {\r\n display: flex;\r\n flex-direction: column;\r\n height: calc(100vh - 60px);\r\n}\r\n\r\n.table-cell {\r\n border: 1px solid var(--text-color);\r\n}\r\n\r\n.chart-side-panel {\r\n width: 200px;\r\n}\r\n\r\n.side-panel-input {\r\n background-color: var(--input-color);\r\n color: var(--text-color);\r\n display: block;\r\n width: 100%;\r\n padding-block: 4px;\r\n}\r\n"],"names":[],"sourceRoot":""}
build/static/js/{main.5e03a8ae.js → main.45548513.js} RENAMED
The diff for this file is too large to render. See raw diff
 
build/static/js/{main.5e03a8ae.js.LICENSE.txt → main.45548513.js.LICENSE.txt} RENAMED
File without changes
build/static/js/{main.5e03a8ae.js.map → main.45548513.js.map} RENAMED
The diff for this file is too large to render. See raw diff
 
src/pages/Calculator.tsx CHANGED
@@ -5,15 +5,15 @@ import { useTheme } from '../context/themeContext';
5
  import MODELS from '../utils/models';
6
  import DEVICES from '../utils/devices';
7
 
8
- type Precision = 'fp32' | 'fp16' | 'int8' | 'int4';
9
- type PrecisionName = '32-bit' | '16-bit' | '8-bit' | '4-bit'
10
 
11
  interface ModelSizeBarChartProps {
12
  modelSize: number; // in GB
13
- largestModelSize: number; // largest model in full precision (fp32)
14
  modelPrecision: Precision;
15
  deviceMemorySet: boolean;
16
- activationMemorySize?: number;
17
  }
18
 
19
  interface InferenceRuntimeLineChartProps {
@@ -27,33 +27,30 @@ interface LineChartData {
27
  }
28
 
29
  interface AvailableMemory {
30
- int4: number;
31
- int8: number;
32
- fp16: number;
33
- fp32: number;
34
  }
35
 
36
  // Utility to determine color based on precision
37
  function chooseColor(precision: Precision) {
38
  const colors = {
39
- fp32: '#e45f5b',
40
- fp16: '#ffc068',
41
- int8: '#71cce9',
42
- int4: '#383d95',
43
  };
44
  return colors[precision] || 'gray';
45
  }
46
 
47
  // Calculate standard memory (model size based on precision only)
48
- function calculateStandardMemory(
49
- modelParams: number,
50
- precision: Precision
51
- ): number {
52
  const precisionFactor = {
53
- fp32: 4,
54
- fp16: 2,
55
- int8: 1,
56
- int4: 0.5,
57
  };
58
 
59
  const memory = modelParams * precisionFactor[precision]; // GB
@@ -70,10 +67,10 @@ function calculatePrefillMemory(
70
  precision: Precision
71
  ): number {
72
  const precisionFactor = {
73
- fp32: 4,
74
- fp16: 2,
75
- int8: 1,
76
- int4: 0.5,
77
  };
78
 
79
  // Max Chunk Size - adjustable in the future
@@ -81,7 +78,6 @@ function calculatePrefillMemory(
81
 
82
  // Calculate each memory component
83
  const modelMemorySize = modelParams * precisionFactor[precision]; // GB
84
- // const modelMemorySize = modelParams
85
  const activationMemorySize = (maxChunkSize * 2 * Math.max(2 * intermediateSize, 4 * hiddenSize)) / 1_000_000_000; // GB
86
  const memoryPerInput = (4 * hiddenSize * numLayers) / 1_000_000_000; // GB
87
 
@@ -101,7 +97,7 @@ function ModelSizeBarChart({
101
  largestModelSize,
102
  modelPrecision,
103
  deviceMemorySet,
104
- activationMemorySize = 0, // default to 0 for standard calculator
105
  }: ModelSizeBarChartProps) {
106
  const { theme } = useTheme();
107
  const chartRef = useRef<SVGSVGElement>(null);
@@ -113,7 +109,17 @@ function ModelSizeBarChart({
113
  if (modelSize > 0 && largestModelSize > 0) {
114
  d3.select(chartRef.current).selectAll('*').remove();
115
 
116
- const svg = d3.select(chartRef.current).attr('width', width).attr('height', height);
 
 
 
 
 
 
 
 
 
 
117
 
118
  const xScale = d3.scaleLinear().domain([0, largestModelSize]).range([0, width]);
119
 
@@ -174,12 +180,10 @@ function ModelSizeBarChart({
174
  }
175
 
176
  // Line chart for inference runtime (shared by both standard and prefill chunking calculators)
177
- function InferenceRuntimeLineChart({
178
- availableMemory,
179
- memoryPerInput,
180
- }: InferenceRuntimeLineChartProps) {
181
  const { theme } = useTheme();
182
  const chartRef = useRef(null);
 
183
  const maxSeqLength = 4096;
184
  const maxBatchSize = 128;
185
 
@@ -188,12 +192,6 @@ function InferenceRuntimeLineChart({
188
  const margin = { top: 20, right: 20, bottom: 50, left: 50 };
189
  const width = 600 - margin.left - margin.right;
190
  const height = 400 - margin.top - margin.bottom;
191
- const precisions = [
192
- { name: 'FP32', color: '#e45f5b' },
193
- { name: 'FP16', color: '#ffc068' },
194
- { name: 'INT8', color: '#71cce9' },
195
- { name: 'INT4', color: '#383d95' },
196
- ];
197
 
198
  const svg = d3.select(chartRef.current);
199
  svg.selectAll('*').remove();
@@ -204,13 +202,9 @@ function InferenceRuntimeLineChart({
204
  const xAxis = d3.axisBottom(xScale);
205
  const yAxis = d3.axisLeft(yScale);
206
 
207
- const zoom = d3
208
- .zoom()
209
  .scaleExtent([0.5, 10])
210
- .translateExtent([
211
- [-width, -height],
212
- [2 * width, 2 * height],
213
- ])
214
  .on('zoom', (event) => {
215
  const transform = event.transform;
216
  svg.select('.x-axis').call(xAxis.scale(transform.rescaleX(xScale)));
@@ -225,27 +219,17 @@ function InferenceRuntimeLineChart({
225
  .attr('transform', `translate(${margin.left}, ${margin.top})`)
226
  .call(zoom);
227
 
228
- svg
229
- .append('g')
230
- .attr('class', 'x-axis')
231
- .attr('transform', `translate(${margin.left}, ${height + margin.top})`)
232
- .call(xAxis);
233
 
234
- svg
235
- .append('g')
236
- .attr('class', 'y-axis')
237
- .attr('transform', `translate(${margin.left}, ${margin.top})`)
238
- .call(yAxis);
239
 
240
- svg
241
- .append('text')
242
  .attr('transform', `translate(${width / 2 + margin.left}, ${height + margin.top + 40})`)
243
  .style('text-anchor', 'middle')
244
  .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
245
  .text('Sequence Length');
246
 
247
- svg
248
- .append('text')
249
  .attr('transform', `rotate(-90)`)
250
  .attr('y', 0)
251
  .attr('x', 0 - height / 2 - margin.top)
@@ -255,6 +239,13 @@ function InferenceRuntimeLineChart({
255
  .text('Batch Size');
256
 
257
  // Adding legend for precisions
 
 
 
 
 
 
 
258
  const legend = svg
259
  .append('g')
260
  .attr('class', 'legend')
@@ -263,16 +254,14 @@ function InferenceRuntimeLineChart({
263
  precisions.forEach((precision, index) => {
264
  const legendItem = legend.append('g').attr('transform', `translate(0, ${index * 30})`);
265
 
266
- legendItem
267
- .append('rect')
268
  .attr('x', 10)
269
  .attr('y', 10)
270
  .attr('width', 10)
271
  .attr('height', 10)
272
  .style('fill', precision.color);
273
 
274
- legendItem
275
- .append('text')
276
  .attr('x', 30)
277
  .attr('y', 16)
278
  .text(precision.name)
@@ -281,8 +270,7 @@ function InferenceRuntimeLineChart({
281
  .attr('alignment-baseline', 'middle');
282
  });
283
 
284
- legend
285
- .append('rect')
286
  .attr('class', 'legend-box')
287
  .attr('width', 80)
288
  .attr('height', precisions.length * 30)
@@ -290,46 +278,48 @@ function InferenceRuntimeLineChart({
290
  .style('stroke-width', '1px')
291
  .style('stroke', theme === 'dark' ? '#f9fafb' : '#181f26');
292
 
293
- const tooltip = d3.select('#tooltip');
 
 
 
 
 
 
 
 
 
294
 
295
  for (const [precision, memory] of Object.entries(availableMemory)) {
296
- const sequenceLengths = d3
297
- .range(1, maxSeqLength, 1)
298
  .map((seqLength) => ({
299
  seqLength,
300
  batchSize: memory / (seqLength * memoryPerInput),
301
  }))
302
  .filter((d) => d.batchSize <= maxBatchSize && d.batchSize > 1 && d.seqLength > 1);
303
 
304
- const lineGroup = svg
305
- .append('g')
306
- .attr('transform', `translate(${margin.left}, ${margin.top})`);
307
 
308
- const line = d3
309
- .line<LineChartData>()
310
  .x((d) => xScale(d.seqLength))
311
  .y((d) => yScale(d.batchSize))
312
  .curve(d3.curveBasis);
313
 
314
- lineGroup
315
- .append('path')
316
  .datum(sequenceLengths)
317
  .attr('fill', 'none')
318
  .attr('stroke', chooseColor(precision as Precision))
319
  .attr('stroke-width', 4)
320
  .attr('d', line)
321
  .on('mouseover', () => {
322
- tooltip.style('opacity', 1);
323
- tooltip.style('background-color', theme === 'dark' ? '#181f26' : '#f9fafb');
324
  })
325
  .on('mousemove', (event) => {
326
  tooltip.selectAll('text').remove();
327
  const [x, y] = d3.pointer(event);
328
  const xValue = xScale.invert(x);
329
  const yValue = yScale.invert(y);
330
- tooltip
331
- .html(`Sequence Length: ${xValue.toFixed(0)}<br/>Batch Size: ${yValue.toFixed(0)}`)
332
- .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
333
  .style('left', event.pageX + 10 + 'px')
334
  .style('top', event.pageY + 10 + 'px');
335
  })
@@ -342,7 +332,7 @@ function InferenceRuntimeLineChart({
342
 
343
  return (
344
  <>
345
- <div id='tooltip'></div>
346
  <svg ref={chartRef} width={600} height={400} />
347
  </>
348
  );
@@ -367,15 +357,15 @@ function PrefillChunkingCalculator({
367
  }
368
 
369
  // Calculate activation memory size based on intermediate size and hidden size
370
- const activationMemorySize = (512 * 2 * (Math.max(2 * intermediateSize, 4 * hiddenSize)))/ 1_000_000_000;
371
 
372
  return (
373
  <>
374
  {/* Model Footprint with Prefill Chunking */}
375
- <div className='chart'>
376
- <div className='text-2xl text-center mb-4'>Model Footprint with Prefill Chunking</div>
377
- <div className='space-y-8'>
378
- {(['fp32', 'fp16', 'int8', 'int4'] as Precision[]).map((precision) => {
379
  const totalMemory = calculatePrefillMemory(
380
  modelParams,
381
  hiddenSize,
@@ -384,8 +374,8 @@ function PrefillChunkingCalculator({
384
  precision
385
  );
386
  return (
387
- <div key={precision} className='chart-row'>
388
- <div className='chart-row-title'>{precision.toUpperCase()}</div>
389
  <ModelSizeBarChart
390
  modelSize={totalMemory}
391
  largestModelSize={deviceMemory}
@@ -393,7 +383,7 @@ function PrefillChunkingCalculator({
393
  deviceMemorySet={deviceMemory > 0}
394
  activationMemorySize={activationMemorySize} // Updated to pass activation memory size
395
  />
396
- <div className='chart-row-size ml-8'>
397
  {totalMemory.toFixed(2)} / {deviceMemory} GB
398
  </div>
399
  </div>
@@ -403,16 +393,16 @@ function PrefillChunkingCalculator({
403
  </div>
404
 
405
  {/* Inference Runtime with Prefill Chunking */}
406
- <div className='chart'>
407
- <div className='text-2xl text-center mb-4'>
408
  Maximum Batch Size / Sequence Length with Prefill Chunking
409
  </div>
410
  <InferenceRuntimeLineChart
411
  availableMemory={{
412
- int4: deviceMemory - calculatePrefillMemory(modelParams, hiddenSize, numLayers, intermediateSize, 'int4'),
413
- int8: deviceMemory - calculatePrefillMemory(modelParams, hiddenSize, numLayers, intermediateSize, 'int8'),
414
- fp16: deviceMemory - calculatePrefillMemory(modelParams, hiddenSize, numLayers, intermediateSize, 'fp16'),
415
- fp32: deviceMemory - calculatePrefillMemory(modelParams, hiddenSize, numLayers, intermediateSize, 'fp32'),
416
  }}
417
  memoryPerInput={(4 * hiddenSize * numLayers) / 1_000_000_000}
418
  />
@@ -440,19 +430,19 @@ function StandardCalculator({
440
  return (
441
  <>
442
  {/* Model Footprint */}
443
- <div className='chart mb-8'>
444
- <div className='text-2xl text-center mb-4'>Model Footprint</div>
445
- <div className='space-y-8'>
446
- {(['fp32', 'fp16', 'int8', 'int4'] as Precision[]).map((precision) => (
447
- <div key={precision} className='chart-row'>
448
- <div className='chart-row-title'>{precision.toUpperCase()}</div>
449
  <ModelSizeBarChart
450
  modelSize={calculateStandardMemory(modelParams, precision)}
451
  largestModelSize={deviceMemory}
452
  modelPrecision={precision}
453
  deviceMemorySet={deviceMemory > 0}
454
  />
455
- <div className='chart-row-size ml-8'>
456
  {calculateStandardMemory(modelParams, precision).toFixed(2)} / {deviceMemory} GB
457
  </div>
458
  </div>
@@ -461,16 +451,16 @@ function StandardCalculator({
461
  </div>
462
 
463
  {/* Maximum Batch Size / Sequence Length */}
464
- <div className='chart'>
465
- <div className='text-2xl text-center mb-4'>
466
  Maximum Batch Size / Sequence Length
467
  </div>
468
  <InferenceRuntimeLineChart
469
  availableMemory={{
470
- int4: deviceMemory - calculateStandardMemory(modelParams, 'int4'),
471
- int8: deviceMemory - calculateStandardMemory(modelParams, 'int8'),
472
- fp16: deviceMemory - calculateStandardMemory(modelParams, 'fp16'),
473
- fp32: deviceMemory - calculateStandardMemory(modelParams, 'fp32'),
474
  }}
475
  memoryPerInput={(4 * hiddenSize * numLayers) / 1_000_000_000}
476
  />
@@ -491,16 +481,18 @@ const Calculator = () => {
491
  const [deviceSelectionTab, setDeviceSelectionTab] = useState<boolean>(true);
492
 
493
  return (
494
- <div className='flex flex-col items-center justify-center min-h-screen px-4'>
495
  {/* Toggle Between Standard and Prefill Chunking */}
496
- <div className='mb-4 flex space-x-4'>
497
  <button
 
498
  className={`${!isPrefillChunking ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
499
  onClick={() => setIsPrefillChunking(false)}
500
  >
501
  Standard Calculator
502
  </button>
503
  <button
 
504
  className={`${isPrefillChunking ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
505
  onClick={() => setIsPrefillChunking(true)}
506
  >
@@ -509,26 +501,28 @@ const Calculator = () => {
509
  </div>
510
 
511
  {/* Model and Device Selection */}
512
- <div className='w-full max-w-4xl'>
513
- <div className='text-4xl mb-4 text-center'>Model Memory Calculator</div>
514
- <div className='mb-6 text-center'>
515
  Use our Model Memory Calculator to help you estimate the memory footprint of your model
516
  and the maximum batch size/sequence length combination you can run on your device.
517
  </div>
518
 
519
- <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6'>
520
  {/* Model Selection */}
521
- <div className='calculator-input-box'>
522
- <div className='text-2xl calculator-input-title'>Model</div>
523
- <div className='calculator-input-content'>
524
- <div className='mb-2'>
525
  <button
 
526
  className={`${modelSelectionTab ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
527
  onClick={() => setModelSelectionTab(true)}
528
  >
529
  Model Selection
530
  </button>
531
  <button
 
532
  className={`${modelSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'}`}
533
  onClick={() => setModelSelectionTab(false)}
534
  >
@@ -538,13 +532,14 @@ const Calculator = () => {
538
  <div>
539
  {modelSelectionTab ? (
540
  <>
541
- <label htmlFor='model'>Select a Model</label>
542
  <select
543
- id='model'
544
- className='calculator-select'
 
545
  onChange={(e) => {
546
  const selectedModel = MODELS.find(
547
- (model) => model.params === Number(e.target.value),
548
  );
549
  if (selectedModel) {
550
  setModelParams(selectedModel.params);
@@ -554,12 +549,9 @@ const Calculator = () => {
554
  }
555
  }}
556
  >
557
- <option value=''>None selected</option>
558
  {MODELS.map((model) => (
559
- <option
560
- key={model.name}
561
- value={model.params}
562
- >
563
  {model.name}
564
  </option>
565
  ))}
@@ -567,44 +559,48 @@ const Calculator = () => {
567
  </>
568
  ) : (
569
  <>
570
- <label htmlFor='modelParams'>Model Parameters (in billions)</label>
571
  <input
572
- type='number'
573
- id='modelParams'
574
- className='calculator-input mb-2'
575
- placeholder='e.g. 7 (for LLaMA-7B)'
 
576
  value={modelParams || ''}
577
  min={0}
578
  onChange={(e) => setModelParams(Number(e.target.value))}
579
  />
580
- <label htmlFor='hiddenSize'>Hidden Size</label>
581
  <input
582
- type='number'
583
- id='hiddenSize'
584
- className='calculator-input mb-2'
585
- placeholder='e.g. 4096 (for LLaMA-7B)'
 
586
  value={hiddenSize || ''}
587
  min={1}
588
  onChange={(e) => setHiddenSize(Number(e.target.value))}
589
  />
590
- <label htmlFor='numLayers'>Number of Layers</label>
591
  <input
592
- type='number'
593
- id='numLayers'
594
- className='calculator-input'
595
- placeholder='e.g. 32 (for LLaMA-7B)'
 
596
  value={numLayers || ''}
597
  min={1}
598
  onChange={(e) => setNumLayers(Number(e.target.value))}
599
  />
600
  {isPrefillChunking && (
601
  <>
602
- <label htmlFor='intermediateSize'>Intermediate Size</label>
603
  <input
604
- type='number'
605
- id='intermediateSize'
606
- className='calculator-input'
607
- placeholder='e.g. 11008 (for LLaMA-7B)'
 
608
  value={intermediateSize || ''}
609
  min={1}
610
  onChange={(e) => setIntermediateSize(Number(e.target.value))}
@@ -618,11 +614,12 @@ const Calculator = () => {
618
  </div>
619
 
620
  {/* Device Selection */}
621
- <div className='calculator-input-box'>
622
- <div className='text-2xl calculator-input-title'>Device</div>
623
- <div className='calculator-input-content'>
624
- <div className='mb-2'>
625
  <button
 
626
  className={`${deviceSelectionTab ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
627
  onClick={() => {
628
  setDeviceSelectionTab(true);
@@ -632,6 +629,7 @@ const Calculator = () => {
632
  Device Selection
633
  </button>
634
  <button
 
635
  className={`${deviceSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'}`}
636
  onClick={() => {
637
  setDeviceSelectionTab(false);
@@ -644,13 +642,14 @@ const Calculator = () => {
644
  <div>
645
  {deviceSelectionTab ? (
646
  <>
647
- <label htmlFor='device'>Select a Device</label>
648
  <select
649
- id='device'
650
- className='calculator-select'
 
651
  onChange={(e) => setDeviceMemory(Number(e.target.value))}
652
  >
653
- <option value=''>None selected</option>
654
  {DEVICES.map((device) => (
655
  <option key={device.name} value={device.size}>
656
  {device.name}
@@ -660,12 +659,13 @@ const Calculator = () => {
660
  </>
661
  ) : (
662
  <>
663
- <label htmlFor='deviceMemory'>Device RAM (in GB)</label>
664
  <input
665
- type='number'
666
- id='deviceMemory'
667
- className='calculator-input'
668
- placeholder='e.g. 24'
 
669
  value={deviceMemory || ''}
670
  min={0}
671
  onChange={(e) => setDeviceMemory(Number(e.target.value))}
 
5
  import MODELS from '../utils/models';
6
  import DEVICES from '../utils/devices';
7
 
8
+ type Precision = '32-bit' | '16-bit' | '8-bit' | '4-bit';
9
+ type PrecisionName = '32-bit' | '16-bit' | '8-bit' | '4-bit';
10
 
11
  interface ModelSizeBarChartProps {
12
  modelSize: number; // in GB
13
+ largestModelSize: number; // largest model in full precision (32-bit)
14
  modelPrecision: Precision;
15
  deviceMemorySet: boolean;
16
+ activationMemorySize?: number;
17
  }
18
 
19
  interface InferenceRuntimeLineChartProps {
 
27
  }
28
 
29
  interface AvailableMemory {
30
+ '4-bit': number;
31
+ '8-bit': number;
32
+ '16-bit': number;
33
+ '32-bit': number;
34
  }
35
 
36
  // Utility to determine color based on precision
37
  function chooseColor(precision: Precision) {
38
  const colors = {
39
+ '32-bit': '#e45f5b',
40
+ '16-bit': '#ffc068',
41
+ '8-bit': '#71cce9',
42
+ '4-bit': '#383d95',
43
  };
44
  return colors[precision] || 'gray';
45
  }
46
 
47
  // Calculate standard memory (model size based on precision only)
48
+ function calculateStandardMemory(modelParams: number, precision: Precision): number {
 
 
 
49
  const precisionFactor = {
50
+ '32-bit': 4,
51
+ '16-bit': 2,
52
+ '8-bit': 1,
53
+ '4-bit': 0.5,
54
  };
55
 
56
  const memory = modelParams * precisionFactor[precision]; // GB
 
67
  precision: Precision
68
  ): number {
69
  const precisionFactor = {
70
+ '32-bit': 4,
71
+ '16-bit': 2,
72
+ '8-bit': 1,
73
+ '4-bit': 0.5,
74
  };
75
 
76
  // Max Chunk Size - adjustable in the future
 
78
 
79
  // Calculate each memory component
80
  const modelMemorySize = modelParams * precisionFactor[precision]; // GB
 
81
  const activationMemorySize = (maxChunkSize * 2 * Math.max(2 * intermediateSize, 4 * hiddenSize)) / 1_000_000_000; // GB
82
  const memoryPerInput = (4 * hiddenSize * numLayers) / 1_000_000_000; // GB
83
 
 
97
  largestModelSize,
98
  modelPrecision,
99
  deviceMemorySet,
100
+ activationMemorySize = 0,
101
  }: ModelSizeBarChartProps) {
102
  const { theme } = useTheme();
103
  const chartRef = useRef<SVGSVGElement>(null);
 
109
  if (modelSize > 0 && largestModelSize > 0) {
110
  d3.select(chartRef.current).selectAll('*').remove();
111
 
112
+ const svg = d3.select(chartRef.current)
113
+ .attr('width', width)
114
+ .attr('height', height)
115
+ .style('animation', 'fadeIn 0.3s ease-in-out') // Inline animation
116
+ .style('transition', 'transform 0.3s ease-in-out') // Hover effect
117
+ .on('mouseover', function () {
118
+ d3.select(this).style('transform', 'scale(1.02)');
119
+ })
120
+ .on('mouseout', function () {
121
+ d3.select(this).style('transform', 'scale(1)');
122
+ });
123
 
124
  const xScale = d3.scaleLinear().domain([0, largestModelSize]).range([0, width]);
125
 
 
180
  }
181
 
182
  // Line chart for inference runtime (shared by both standard and prefill chunking calculators)
183
+ function InferenceRuntimeLineChart({ availableMemory, memoryPerInput }: InferenceRuntimeLineChartProps) {
 
 
 
184
  const { theme } = useTheme();
185
  const chartRef = useRef(null);
186
+ const tooltipRef = useRef<HTMLDivElement>(null); // Ref for the tooltip
187
  const maxSeqLength = 4096;
188
  const maxBatchSize = 128;
189
 
 
192
  const margin = { top: 20, right: 20, bottom: 50, left: 50 };
193
  const width = 600 - margin.left - margin.right;
194
  const height = 400 - margin.top - margin.bottom;
 
 
 
 
 
 
195
 
196
  const svg = d3.select(chartRef.current);
197
  svg.selectAll('*').remove();
 
202
  const xAxis = d3.axisBottom(xScale);
203
  const yAxis = d3.axisLeft(yScale);
204
 
205
+ const zoom = d3.zoom()
 
206
  .scaleExtent([0.5, 10])
207
+ .translateExtent([[-width, -height], [2 * width, 2 * height]])
 
 
 
208
  .on('zoom', (event) => {
209
  const transform = event.transform;
210
  svg.select('.x-axis').call(xAxis.scale(transform.rescaleX(xScale)));
 
219
  .attr('transform', `translate(${margin.left}, ${margin.top})`)
220
  .call(zoom);
221
 
222
+ svg.append('g').attr('class', 'x-axis').attr('transform', `translate(${margin.left}, ${height + margin.top})`).call(xAxis);
 
 
 
 
223
 
224
+ svg.append('g').attr('class', 'y-axis').attr('transform', `translate(${margin.left}, ${margin.top})`).call(yAxis);
 
 
 
 
225
 
226
+ svg.append('text')
 
227
  .attr('transform', `translate(${width / 2 + margin.left}, ${height + margin.top + 40})`)
228
  .style('text-anchor', 'middle')
229
  .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
230
  .text('Sequence Length');
231
 
232
+ svg.append('text')
 
233
  .attr('transform', `rotate(-90)`)
234
  .attr('y', 0)
235
  .attr('x', 0 - height / 2 - margin.top)
 
239
  .text('Batch Size');
240
 
241
  // Adding legend for precisions
242
+ const precisions = [
243
+ { name: '32-bit', color: '#e45f5b' },
244
+ { name: '16-bit', color: '#ffc068' },
245
+ { name: '8-bit', color: '#71cce9' },
246
+ { name: '4-bit', color: '#383d95' },
247
+ ];
248
+
249
  const legend = svg
250
  .append('g')
251
  .attr('class', 'legend')
 
254
  precisions.forEach((precision, index) => {
255
  const legendItem = legend.append('g').attr('transform', `translate(0, ${index * 30})`);
256
 
257
+ legendItem.append('rect')
 
258
  .attr('x', 10)
259
  .attr('y', 10)
260
  .attr('width', 10)
261
  .attr('height', 10)
262
  .style('fill', precision.color);
263
 
264
+ legendItem.append('text')
 
265
  .attr('x', 30)
266
  .attr('y', 16)
267
  .text(precision.name)
 
270
  .attr('alignment-baseline', 'middle');
271
  });
272
 
273
+ legend.append('rect')
 
274
  .attr('class', 'legend-box')
275
  .attr('width', 80)
276
  .attr('height', precisions.length * 30)
 
278
  .style('stroke-width', '1px')
279
  .style('stroke', theme === 'dark' ? '#f9fafb' : '#181f26');
280
 
281
+ const tooltip = d3.select(tooltipRef.current)
282
+ .style('position', 'absolute')
283
+ .style('padding', '8px')
284
+ .style('border-radius', '4px')
285
+ .style('pointer-events', 'none')
286
+ .style('opacity', 0)
287
+ .style('transition', 'opacity 0.3s ease-in-out, transform 0.3s ease-in-out')
288
+ .style('background-color', 'rgba(0, 0, 0, 0.75)')
289
+ .style('color', 'white')
290
+ .style('font-size', '14px');
291
 
292
  for (const [precision, memory] of Object.entries(availableMemory)) {
293
+ const sequenceLengths = d3.range(1, maxSeqLength, 1)
 
294
  .map((seqLength) => ({
295
  seqLength,
296
  batchSize: memory / (seqLength * memoryPerInput),
297
  }))
298
  .filter((d) => d.batchSize <= maxBatchSize && d.batchSize > 1 && d.seqLength > 1);
299
 
300
+ const lineGroup = svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`);
 
 
301
 
302
+ const line = d3.line<LineChartData>()
 
303
  .x((d) => xScale(d.seqLength))
304
  .y((d) => yScale(d.batchSize))
305
  .curve(d3.curveBasis);
306
 
307
+ lineGroup.append('path')
 
308
  .datum(sequenceLengths)
309
  .attr('fill', 'none')
310
  .attr('stroke', chooseColor(precision as Precision))
311
  .attr('stroke-width', 4)
312
  .attr('d', line)
313
  .on('mouseover', () => {
314
+ tooltip.style('opacity', 1)
315
+ .style('transform', 'translateY(-10px)');
316
  })
317
  .on('mousemove', (event) => {
318
  tooltip.selectAll('text').remove();
319
  const [x, y] = d3.pointer(event);
320
  const xValue = xScale.invert(x);
321
  const yValue = yScale.invert(y);
322
+ tooltip.html(`Sequence Length: ${xValue.toFixed(0)}<br/>Batch Size: ${yValue.toFixed(0)}`)
 
 
323
  .style('left', event.pageX + 10 + 'px')
324
  .style('top', event.pageY + 10 + 'px');
325
  })
 
332
 
333
  return (
334
  <>
335
+ <div id="tooltip" ref={tooltipRef}></div>
336
  <svg ref={chartRef} width={600} height={400} />
337
  </>
338
  );
 
357
  }
358
 
359
  // Calculate activation memory size based on intermediate size and hidden size
360
+ const activationMemorySize = (512 * 2 * (Math.max(2 * intermediateSize, 4 * hiddenSize))) / 1_000_000_000;
361
 
362
  return (
363
  <>
364
  {/* Model Footprint with Prefill Chunking */}
365
+ <div className="chart">
366
+ <div style={{ animation: 'fadeIn 0.3s ease-in-out' }} className="text-2xl text-center mb-4">Model Footprint with Prefill Chunking</div>
367
+ <div className="space-y-8">
368
+ {(['32-bit', '16-bit', '8-bit', '4-bit'] as Precision[]).map((precision) => {
369
  const totalMemory = calculatePrefillMemory(
370
  modelParams,
371
  hiddenSize,
 
374
  precision
375
  );
376
  return (
377
+ <div key={precision} style={{ animation: 'fadeIn 0.3s ease-in-out' }} className="chart-row">
378
+ <div className="chart-row-title">{precision.toUpperCase()}</div>
379
  <ModelSizeBarChart
380
  modelSize={totalMemory}
381
  largestModelSize={deviceMemory}
 
383
  deviceMemorySet={deviceMemory > 0}
384
  activationMemorySize={activationMemorySize} // Updated to pass activation memory size
385
  />
386
+ <div className="chart-row-size ml-8">
387
  {totalMemory.toFixed(2)} / {deviceMemory} GB
388
  </div>
389
  </div>
 
393
  </div>
394
 
395
  {/* Inference Runtime with Prefill Chunking */}
396
+ <div className="chart">
397
+ <div style={{ animation: 'fadeIn 0.3s ease-in-out' }} className="text-2xl text-center mb-4">
398
  Maximum Batch Size / Sequence Length with Prefill Chunking
399
  </div>
400
  <InferenceRuntimeLineChart
401
  availableMemory={{
402
+ '4-bit': deviceMemory - calculatePrefillMemory(modelParams, hiddenSize, numLayers, intermediateSize, '4-bit'),
403
+ '8-bit': deviceMemory - calculatePrefillMemory(modelParams, hiddenSize, numLayers, intermediateSize, '8-bit'),
404
+ '16-bit': deviceMemory - calculatePrefillMemory(modelParams, hiddenSize, numLayers, intermediateSize, '16-bit'),
405
+ '32-bit': deviceMemory - calculatePrefillMemory(modelParams, hiddenSize, numLayers, intermediateSize, '32-bit'),
406
  }}
407
  memoryPerInput={(4 * hiddenSize * numLayers) / 1_000_000_000}
408
  />
 
430
  return (
431
  <>
432
  {/* Model Footprint */}
433
+ <div className="chart mb-8">
434
+ <div style={{ animation: 'fadeIn 0.3s ease-in-out' }} className="text-2xl text-center mb-4">Model Footprint</div>
435
+ <div className="space-y-8">
436
+ {(['32-bit', '16-bit', '8-bit', '4-bit'] as Precision[]).map((precision) => (
437
+ <div key={precision} style={{ animation: 'fadeIn 0.3s ease-in-out' }} className="chart-row">
438
+ <div className="chart-row-title">{precision.toUpperCase()}</div>
439
  <ModelSizeBarChart
440
  modelSize={calculateStandardMemory(modelParams, precision)}
441
  largestModelSize={deviceMemory}
442
  modelPrecision={precision}
443
  deviceMemorySet={deviceMemory > 0}
444
  />
445
+ <div className="chart-row-size ml-8">
446
  {calculateStandardMemory(modelParams, precision).toFixed(2)} / {deviceMemory} GB
447
  </div>
448
  </div>
 
451
  </div>
452
 
453
  {/* Maximum Batch Size / Sequence Length */}
454
+ <div className="chart">
455
+ <div style={{ animation: 'fadeIn 0.3s ease-in-out' }} className="text-2xl text-center mb-4">
456
  Maximum Batch Size / Sequence Length
457
  </div>
458
  <InferenceRuntimeLineChart
459
  availableMemory={{
460
+ '4-bit': deviceMemory - calculateStandardMemory(modelParams, '4-bit'),
461
+ '8-bit': deviceMemory - calculateStandardMemory(modelParams, '8-bit'),
462
+ '16-bit': deviceMemory - calculateStandardMemory(modelParams, '16-bit'),
463
+ '32-bit': deviceMemory - calculateStandardMemory(modelParams, '32-bit'),
464
  }}
465
  memoryPerInput={(4 * hiddenSize * numLayers) / 1_000_000_000}
466
  />
 
481
  const [deviceSelectionTab, setDeviceSelectionTab] = useState<boolean>(true);
482
 
483
  return (
484
+ <div className="flex flex-col items-center justify-center min-h-screen px-4">
485
  {/* Toggle Between Standard and Prefill Chunking */}
486
+ <div className="mb-4 flex space-x-4">
487
  <button
488
+ style={{ transition: 'background-color 0.3s ease-in-out, color 0.3s ease-in-out' }}
489
  className={`${!isPrefillChunking ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
490
  onClick={() => setIsPrefillChunking(false)}
491
  >
492
  Standard Calculator
493
  </button>
494
  <button
495
+ style={{ transition: 'background-color 0.3s ease-in-out, color 0.3s ease-in-out' }}
496
  className={`${isPrefillChunking ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
497
  onClick={() => setIsPrefillChunking(true)}
498
  >
 
501
  </div>
502
 
503
  {/* Model and Device Selection */}
504
+ <div className="w-full max-w-4xl">
505
+ <div style={{ animation: 'fadeIn 0.3s ease-in-out' }} className="text-4xl mb-4 text-center">Model Memory Calculator</div>
506
+ <div className="mb-6 text-center">
507
  Use our Model Memory Calculator to help you estimate the memory footprint of your model
508
  and the maximum batch size/sequence length combination you can run on your device.
509
  </div>
510
 
511
+ <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
512
  {/* Model Selection */}
513
+ <div className="calculator-input-box">
514
+ <div className="text-2xl calculator-input-title">Model</div>
515
+ <div className="calculator-input-content">
516
+ <div className="mb-2">
517
  <button
518
+ style={{ transition: 'background-color 0.3s ease-in-out, color 0.3s ease-in-out' }}
519
  className={`${modelSelectionTab ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
520
  onClick={() => setModelSelectionTab(true)}
521
  >
522
  Model Selection
523
  </button>
524
  <button
525
+ style={{ transition: 'background-color 0.3s ease-in-out, color 0.3s ease-in-out' }}
526
  className={`${modelSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'}`}
527
  onClick={() => setModelSelectionTab(false)}
528
  >
 
532
  <div>
533
  {modelSelectionTab ? (
534
  <>
535
+ <label htmlFor="model">Select a Model</label>
536
  <select
537
+ id="model"
538
+ className="calculator-select"
539
+ style={{ transition: 'border 0.3s ease-in-out, box-shadow 0.3s ease-in-out' }}
540
  onChange={(e) => {
541
  const selectedModel = MODELS.find(
542
+ (model) => model.params === Number(e.target.value)
543
  );
544
  if (selectedModel) {
545
  setModelParams(selectedModel.params);
 
549
  }
550
  }}
551
  >
552
+ <option value="">None selected</option>
553
  {MODELS.map((model) => (
554
+ <option key={model.name} value={model.params}>
 
 
 
555
  {model.name}
556
  </option>
557
  ))}
 
559
  </>
560
  ) : (
561
  <>
562
+ <label htmlFor="modelParams">Model Parameters (in billions)</label>
563
  <input
564
+ type="number"
565
+ id="modelParams"
566
+ className="calculator-input mb-2"
567
+ placeholder="e.g. 7 (for LLaMA-7B)"
568
+ style={{ transition: 'border 0.3s ease-in-out, box-shadow 0.3s ease-in-out' }}
569
  value={modelParams || ''}
570
  min={0}
571
  onChange={(e) => setModelParams(Number(e.target.value))}
572
  />
573
+ <label htmlFor="hiddenSize">Hidden Size</label>
574
  <input
575
+ type="number"
576
+ id="hiddenSize"
577
+ className="calculator-input mb-2"
578
+ placeholder="e.g. 4096 (for LLaMA-7B)"
579
+ style={{ transition: 'border 0.3s ease-in-out, box-shadow 0.3s ease-in-out' }}
580
  value={hiddenSize || ''}
581
  min={1}
582
  onChange={(e) => setHiddenSize(Number(e.target.value))}
583
  />
584
+ <label htmlFor="numLayers">Number of Layers</label>
585
  <input
586
+ type="number"
587
+ id="numLayers"
588
+ className="calculator-input"
589
+ placeholder="e.g. 32 (for LLaMA-7B)"
590
+ style={{ transition: 'border 0.3s ease-in-out, box-shadow 0.3s ease-in-out' }}
591
  value={numLayers || ''}
592
  min={1}
593
  onChange={(e) => setNumLayers(Number(e.target.value))}
594
  />
595
  {isPrefillChunking && (
596
  <>
597
+ <label htmlFor="intermediateSize">Intermediate Size</label>
598
  <input
599
+ type="number"
600
+ id="intermediateSize"
601
+ className="calculator-input"
602
+ placeholder="e.g. 11008 (for LLaMA-7B)"
603
+ style={{ transition: 'border 0.3s ease-in-out, box-shadow 0.3s ease-in-out' }}
604
  value={intermediateSize || ''}
605
  min={1}
606
  onChange={(e) => setIntermediateSize(Number(e.target.value))}
 
614
  </div>
615
 
616
  {/* Device Selection */}
617
+ <div className="calculator-input-box">
618
+ <div className="text-2xl calculator-input-title">Device</div>
619
+ <div className="calculator-input-content">
620
+ <div className="mb-2">
621
  <button
622
+ style={{ transition: 'background-color 0.3s ease-in-out, color 0.3s ease-in-out' }}
623
  className={`${deviceSelectionTab ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
624
  onClick={() => {
625
  setDeviceSelectionTab(true);
 
629
  Device Selection
630
  </button>
631
  <button
632
+ style={{ transition: 'background-color 0.3s ease-in-out, color 0.3s ease-in-out' }}
633
  className={`${deviceSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'}`}
634
  onClick={() => {
635
  setDeviceSelectionTab(false);
 
642
  <div>
643
  {deviceSelectionTab ? (
644
  <>
645
+ <label htmlFor="device">Select a Device</label>
646
  <select
647
+ id="device"
648
+ className="calculator-select"
649
+ style={{ transition: 'border 0.3s ease-in-out, box-shadow 0.3s ease-in-out' }}
650
  onChange={(e) => setDeviceMemory(Number(e.target.value))}
651
  >
652
+ <option value="">None selected</option>
653
  {DEVICES.map((device) => (
654
  <option key={device.name} value={device.size}>
655
  {device.name}
 
659
  </>
660
  ) : (
661
  <>
662
+ <label htmlFor="deviceMemory">Device RAM (in GB)</label>
663
  <input
664
+ type="number"
665
+ id="deviceMemory"
666
+ className="calculator-input"
667
+ placeholder="e.g. 24"
668
+ style={{ transition: 'border 0.3s ease-in-out, box-shadow 0.3s ease-in-out' }}
669
  value={deviceMemory || ''}
670
  min={0}
671
  onChange={(e) => setDeviceMemory(Number(e.target.value))}