Spaces:

TitanML
/

Model-Memory-Calculator

Running

App Files Files Community

Gogryu commited on Aug 23, 2024

Commit

154d183

1 Parent(s): f38b6a2

adjustments

Browse files

Files changed (10) hide show

build/asset-manifest.json +6 -6
build/index.html +1 -1
build/static/css/main.6f7196f1.css +4 -0
build/static/css/main.6f7196f1.css.map +1 -0
build/static/css/main.8c50b145.css +0 -4
build/static/css/main.8c50b145.css.map +0 -1
build/static/js/{main.1c60d32c.js → main.26cb67d8.js} +0 -0
build/static/js/{main.1c60d32c.js.LICENSE.txt → main.26cb67d8.js.LICENSE.txt} +0 -0
build/static/js/{main.1c60d32c.js.map → main.26cb67d8.js.map} +0 -0
src/pages/Calculator.tsx +428 -1130

build/asset-manifest.json CHANGED Viewed

@@ -1,15 +1,15 @@
 {
   "files": {
-    "main.css": "/static/css/main.8c50b145.css",
-    "main.js": "/static/js/main.1c60d32c.js",
     "static/media/logo-dark-mode.png": "/static/media/logo-dark-mode.0c51ff42111d2779453a.png",
     "static/media/logo-light-mode.png": "/static/media/logo-light-mode.6bc3b2d5ed1ec2d7d721.png",
     "index.html": "/index.html",
-    "main.8c50b145.css.map": "/static/css/main.8c50b145.css.map",
-    "main.1c60d32c.js.map": "/static/js/main.1c60d32c.js.map"
   },
   "entrypoints": [
-    "static/css/main.8c50b145.css",
-    "static/js/main.1c60d32c.js"
   ]
 }

 {
   "files": {
+    "main.css": "/static/css/main.6f7196f1.css",
+    "main.js": "/static/js/main.26cb67d8.js",
     "static/media/logo-dark-mode.png": "/static/media/logo-dark-mode.0c51ff42111d2779453a.png",
     "static/media/logo-light-mode.png": "/static/media/logo-light-mode.6bc3b2d5ed1ec2d7d721.png",
     "index.html": "/index.html",
+    "main.6f7196f1.css.map": "/static/css/main.6f7196f1.css.map",
+    "main.26cb67d8.js.map": "/static/js/main.26cb67d8.js.map"
   },
   "entrypoints": [
+    "static/css/main.6f7196f1.css",
+    "static/js/main.26cb67d8.js"
   ]
 }

build/index.html CHANGED Viewed

@@ -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.~~1c60d32c~~.js"></script><link href="./static/css/main.~~8c50b145~~.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>

+ <!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.26cb67d8.js"></script><link href="./static/css/main.6f7196f1.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.6f7196f1.css ADDED Viewed

	@@ -0,0 +1,4 @@

+/*
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
+*/*,: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}.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))}}
+/*# sourceMappingURL=main.6f7196f1.css.map*/

build/static/css/main.6f7196f1.css.map ADDED Viewed

	@@ -0,0 +1 @@

+ {"version":3,"file":"static/css/main.6f7196f1.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/css/main.8c50b145.css DELETED Viewed

@@ -1,4 +0,0 @@
-/*
-! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
-*/*,: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}.my-8{margin-bottom:2rem;margin-top:2rem}.mb-2{margin-bottom:.5rem}.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}.mb-8{margin-bottom:2rem}.ml-4{margin-left:1rem}.ml-8{margin-left:2rem}.mr-4{margin-right:1rem}.mt-4{margin-top:1rem}.block{display:block}.flex{display:flex}.table{display:table}.table-cell{display:table-cell}.grid{display:grid}.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}.table-auto{table-layout:auto}.border-collapse{border-collapse:collapse}.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}.pt-4{padding-top:1rem}.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))}}
-/*# sourceMappingURL=main.8c50b145.css.map*/

build/static/css/main.8c50b145.css.map DELETED Viewed

@@ -1 +0,0 @@

- {"version":3,"file":"static/css/main.8c50b145.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/js/{main.1c60d32c.js → main.26cb67d8.js} RENAMED Viewed

The diff for this file is too large to render. See raw diff

build/static/js/{main.1c60d32c.js.LICENSE.txt → main.26cb67d8.js.LICENSE.txt} RENAMED Viewed

File without changes

build/static/js/{main.1c60d32c.js.map → main.26cb67d8.js.map} RENAMED Viewed

The diff for this file is too large to render. See raw diff

src/pages/Calculator.tsx CHANGED Viewed

@@ -1,747 +1,421 @@
-import React, { useState, useEffect, useRef } from 'react'
-import * as d3 from 'd3'
-import { useTheme } from '../context/themeContext'
-import MODELS from '../utils/models'
-import DEVICES from '../utils/devices'
-type Precision = 'fp32' | 'fp16' | 'int8' | 'int4'
 interface ModelSizeBarChartProps {
-  modelSize: number // in GB
-  largestModelSize: number // largest model in full precision (fp32)
-  modelPrecision: Precision // enum of fp32, fp16, int8, int4
-  deviceMemorySet: boolean // true if device memory is set
 }
 interface InferenceRuntimeLineChartProps {
-  availableMemory: AvailableMemory // in GB
-  memoryPerInput: number // in GB
 }
 interface LineChartData {
-  seqLength: number
-  batchSize: number
 }
 interface AvailableMemory {
-  int4: number
-  int8: number
-  fp16: number
-  fp32: number
 }
-// Table containing the mapping of backends to precisions
-const BackendPrecisionTable = () => {
-  return (
-    <table className='table-auto border-collapse'>
-      <thead>
-        <tr>
-          <th className='table-cell px-4 py-2'>Backend</th>
-          <th className='table-cell px-4 py-2'>GPU</th>
-          <th className='table-cell px-4 py-2'>CPU</th>
-          <th className='table-cell px-4 py-2'>Accuracy</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td className='table-cell px-4 py-2'>fast</td>
-          <td className='table-cell px-4 py-2'>16</td>
-          <td className='table-cell px-4 py-2'>16</td>
-          <td className='table-cell px-4 py-2'>⭐⭐⭐</td>
-        </tr>
-        <tr>
-          <td className='table-cell px-4 py-2'>compress-fast</td>
-          <td className='table-cell px-4 py-2'>4</td>
-          <td className='table-cell px-4 py-2'>8</td>
-          <td className='table-cell px-4 py-2'>⭐⭐</td>
-        </tr>
-        <tr>
-          <td className='table-cell px-4 py-2'>compress</td>
-          <td className='table-cell px-4 py-2'>4</td>
-          <td className='table-cell px-4 py-2'>4</td>
-          <td className='table-cell px-4 py-2'>⭐</td>
-        </tr>
-        <tr>
-          <td className='table-cell px-4 py-2'>baseline</td>
-          <td className='table-cell px-4 py-2'>16</td>
-          <td className='table-cell px-4 py-2'>16</td>
-          <td className='table-cell px-4 py-2'>⭐⭐⭐</td>
-        </tr>
-      </tbody>
-    </table>
-  )
 }
-// Bar chart for model footprint (standard version)
 function ModelSizeBarChart({
   modelSize,
   largestModelSize,
   modelPrecision,
   deviceMemorySet,
 }: ModelSizeBarChartProps) {
-  const { theme } = useTheme()
-  const chartRef = useRef<SVGSVGElement>(null)
-  const width = 600
-  const height = 50
   useEffect(() => {
-    d3.select(chartRef.current).selectAll('*').remove()
-    const svg = d3.select(chartRef.current).attr('width', width).attr('height', height)
-    const xScale = d3.scaleLinear().domain([0, largestModelSize]).range([0, width])
-    if (modelSize > largestModelSize) {
-      svg
-        .append('rect')
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', width)
-        .attr('height', height)
-        .attr('fill', 'transparent')
-        .style('stroke', theme === 'dark' ? '#f9fafb' : '#181f26')
-        .style('stroke-dasharray', '4, 4')
-        .style('stroke-width', '2px')
-      svg
-        .append('text')
-        .attr('x', width / 2)
-        .attr('y', height / 2)
-        .attr('text-anchor', 'middle')
-        .attr('alignment-baseline', 'middle')
-        .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-        .text('Out of Memory')
-    } else {
-      svg
-        .append('rect')
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', xScale(modelSize))
-        .attr('height', height)
-        .attr('fill', chooseColor(modelPrecision))
-      if (deviceMemorySet) {
         svg
           .append('rect')
-          .attr('x', xScale(modelSize))
           .attr('y', 0)
-          .attr('width', xScale(largestModelSize - modelSize))
           .attr('height', height)
           .attr('fill', 'transparent')
-          .style('stroke', chooseColor(modelPrecision))
-          .style('stroke-width', '2px')
       }
     }
-  }, [modelSize, largestModelSize, modelPrecision, deviceMemorySet, theme])
-  function chooseColor(precision: Precision) {
-    const colors = {
-      fp32: '#e45f5b',
-      fp16: '#ffc068',
-      int8: '#71cce9',
-      int4: '#383d95',
-    }
-    return colors[precision] || 'gray'
-  }
-  return <svg ref={chartRef}></svg>
 }
-// Line chart for standard inference runtime
 function InferenceRuntimeLineChart({
   availableMemory,
   memoryPerInput,
 }: InferenceRuntimeLineChartProps) {
-  const { theme } = useTheme()
-  const chartRef = useRef(null)
-  const maxSeqLength = 4096
-  const maxBatchSize = 128
   useEffect(() => {
-    const margin = { top: 20, right: 20, bottom: 50, left: 50 }
-    const width = 600 - margin.left - margin.right
-    const height = 400 - margin.top - margin.bottom
-    const precisions = [
-      { name: 'FP32', color: '#e45f5b' },
-      { name: 'FP16', color: '#ffc068' },
-      { name: 'INT8', color: '#71cce9' },
-      { name: 'INT4', color: '#383d95' },
-    ]
-    const svg = d3.select(chartRef.current)
-    svg.selectAll('*').remove()
-    const xScale = d3.scaleLinear().domain([0, maxSeqLength]).range([0, width])
-    const yScale = d3.scaleLinear().domain([0, maxBatchSize]).range([height, 0])
-    const xAxis = d3.axisBottom(xScale)
-    const yAxis = d3.axisLeft(yScale)
-    svg
-      .attr('width', width + margin.left + margin.right)
-      .attr('height', height + margin.top + margin.bottom)
-      .append('g')
-      .attr('transform', `translate(${margin.left}, ${margin.top})`)
-    svg
-      .append('g')
-      .attr('transform', `translate(${margin.left}, ${height + margin.top})`)
-      .call(xAxis)
-    svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`).call(yAxis)
-    svg
-      .append('text')
-      .attr('transform', `translate(${width / 2 + margin.left}, ${height + margin.top + 40})`)
-      .style('text-anchor', 'middle')
-      .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-      .text('Sequence Length')
-    svg
-      .append('text')
-      .attr('transform', `rotate(-90)`)
-      .attr('y', 0)
-      .attr('x', 0 - height / 2 - margin.top)
-      .attr('dy', '1em')
-      .style('text-anchor', 'middle')
-      .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-      .text('Batch Size')
-    const legend = svg
-      .append('g')
-      .attr('class', 'legend')
-      .attr('transform', `translate(${width - 20}, 20)`)
-    precisions.forEach((precision, index) => {
-      const legendItem = legend.append('g').attr('transform', `translate(0, ${index * 30})`)
-      legendItem
-        .append('rect')
-        .attr('x', 10)
-        .attr('y', 10)
-        .attr('width', 10)
-        .attr('height', 10)
-        .style('fill', precision.color)
-      legendItem
-        .append('text')
-        .attr('x', 30)
-        .attr('y', 16)
-        .text(precision.name)
-        .style('font-size', '16px')
-        .style('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-        .attr('alignment-baseline', 'middle')
-    })
-    legend
-      .append('rect')
-      .attr('class', 'legend-box')
-      .attr('width', 80)
-      .attr('height', precisions.length * 30)
-      .style('fill', 'none')
-      .style('stroke-width', '1px')
-      .style('stroke', theme === 'dark' ? '#f9fafb' : '#181f26')
-    const tooltip = d3.select('#tooltip')
-    for (const [precision, memory] of Object.entries(availableMemory)) {
-      const sequenceLengths = d3
-        .range(1, maxSeqLength, 1)
-        .map((seqLength) => {
-          return { seqLength, batchSize: memory / (seqLength * memoryPerInput) }
-        })
-        .filter((seqLength) => seqLength.batchSize <= maxBatchSize)
-        .filter((seqLength) => seqLength.batchSize > 1 && seqLength.seqLength > 1)
-      const lineGroup = svg
         .append('g')
         .attr('transform', `translate(${margin.left}, ${margin.top})`)
-      const line = d3
-        .line<LineChartData>()
-        .x((d) => xScale(d.seqLength))
-        .y((d) => yScale(d.batchSize))
-        .curve(d3.curveBasis)
-      lineGroup
-        .append('path')
-        .datum(sequenceLengths)
-        .attr('fill', 'none')
-        .attr('stroke', chooseColor(precision as Precision))
-        .attr('stroke-width', 4)
-        .attr('d', line)
-        .on('mouseover', () => {
-          tooltip.style('opacity', 1)
-          tooltip.style('background-color', theme === 'dark' ? '#181f26' : '#f9fafb')
-        })
-        .on('mousemove', (event) => {
-          tooltip.selectAll('text').remove()
-          const [x, y] = d3.pointer(event)
-          const xValue = xScale.invert(x)
-          const yValue = yScale.invert(y)
-          tooltip
-            .html(`Sequence Length: ${xValue.toFixed(0)}<br/>Batch Size: ${yValue.toFixed(0)}`)
-            .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-            .style('left', event.pageX + 10 + 'px')
-            .style('top', event.pageY + 10 + 'px')
-        })
-        .on('mouseout', () => {
-          tooltip.style('opacity', 0)
-        })
-    }
-  }, [availableMemory, memoryPerInput, theme])
-  function chooseColor(precision: Precision) {
-    const colors = {
-      fp32: '#e45f5b',
-      fp16: '#ffc068',
-      int8: '#71cce9',
-      int4: '#383d95',
-    }
-    return colors[precision] || 'gray'
-  }
-  return (
-    <>
-      <div id='tooltip'></div>
-      <svg ref={chartRef} width={600} height={400} />
-    </>
-  )
-}
-// Prefill Chunking Model Size Bar Chart
-function PrefillChunkingModelSizeBarChart({
-  modelSize,
-  largestModelSize,
-  modelPrecision,
-  deviceMemorySet,
-  activationMemorySize,
-}: {
-  modelSize: number // in GB
-  largestModelSize: number // largest model in full precision (fp32)
-  modelPrecision: Precision // enum of fp32, fp16, int8, int4
-  deviceMemorySet: boolean // true if device memory is set
-  activationMemorySize: number // additional memory for activations in GB
-}) {
-  const { theme } = useTheme()
-  const chartRef = useRef<SVGSVGElement>(null)
-  const width = 600
-  const height = 50
-  useEffect(() => {
-    d3.select(chartRef.current).selectAll('*').remove()
-    const svg = d3.select(chartRef.current).attr('width', width).attr('height', height)
-    const xScale = d3.scaleLinear().domain([0, largestModelSize]).range([0, width])
-    if (modelSize + activationMemorySize > largestModelSize) {
       svg
-        .append('rect')
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', width)
-        .attr('height', height)
-        .attr('fill', 'transparent')
-        .style('stroke', theme === 'dark' ? '#f9fafb' : '#181f26')
-        .style('stroke-dasharray', '4, 4')
-        .style('stroke-width', '2px')
       svg
         .append('text')
-        .attr('x', width / 2)
-        .attr('y', height / 2)
-        .attr('text-anchor', 'middle')
-        .attr('alignment-baseline', 'middle')
         .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-        .text('Out of Memory')
-    } else {
-      svg
-        .append('rect')
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', xScale(modelSize))
-        .attr('height', height)
-        .attr('fill', chooseColor(modelPrecision))
       svg
-        .append('rect')
-        .attr('x', xScale(modelSize))
         .attr('y', 0)
-        .attr('width', xScale(activationMemorySize))
-        .attr('height', height)
-        .attr('fill', '#a4b8e0')
-      if (deviceMemorySet) {
-        svg
-          .append('rect')
-          .attr('x', xScale(modelSize + activationMemorySize))
-          .attr('y', 0)
-          .attr('width', xScale(largestModelSize - (modelSize + activationMemorySize)))
-          .attr('height', height)
-          .attr('fill', 'transparent')
-          .style('stroke', chooseColor(modelPrecision))
-          .style('stroke-width', '2px')
-      }
-    }
-  }, [modelSize, largestModelSize, modelPrecision, deviceMemorySet, activationMemorySize, theme])
-  function chooseColor(precision: Precision) {
-    const colors = {
-      fp32: '#e45f5b',
-      fp16: '#ffc068',
-      int8: '#71cce9',
-      int4: '#383d95',
-    }
-    return colors[precision] || 'gray'
-  }
-  return <svg ref={chartRef}></svg>
-}
-// Prefill Chunking Inference Runtime Line Chart
-function PrefillChunkingInferenceRuntimeLineChart({
-  availableMemory,
-  memoryPerInput,
-  activationMemorySize,
-}: {
-  availableMemory: AvailableMemory // in GB
-  memoryPerInput: number // in GB
-  activationMemorySize: number // in GB
-}) {
-  const { theme } = useTheme()
-  const chartRef = useRef(null)
-  const maxSeqLength = 4096
-  const maxBatchSize = 128
-  useEffect(() => {
-    const margin = { top: 20, right: 20, bottom: 50, left: 50 }
-    const width = 600 - margin.left - margin.right
-    const height = 400 - margin.top - margin.bottom
-    const precisions = [
-      { name: 'FP32', color: '#e45f5b' },
-      { name: 'FP16', color: '#ffc068' },
-      { name: 'INT8', color: '#71cce9' },
-      { name: 'INT4', color: '#383d95' },
-    ]
-    const svg = d3.select(chartRef.current)
-    svg.selectAll('*').remove()
-    const xScale = d3.scaleLinear().domain([0, maxSeqLength]).range([0, width])
-    const yScale = d3.scaleLinear().domain([0, maxBatchSize]).range([height, 0])
-    const xAxis = d3.axisBottom(xScale)
-    const yAxis = d3.axisLeft(yScale)
-    svg
-      .attr('width', width + margin.left + margin.right)
-      .attr('height', height + margin.top + margin.bottom)
-      .append('g')
-      .attr('transform', `translate(${margin.left}, ${margin.top})`)
-    svg
-      .append('g')
-      .attr('transform', `translate(${margin.left}, ${height + margin.top})`)
-      .call(xAxis)
-    svg.append('g').attr('transform', `translate(${margin.left}, ${margin.top})`).call(yAxis)
-    svg
-      .append('text')
-      .attr('transform', `translate(${width / 2 + margin.left}, ${height + margin.top + 40})`)
-      .style('text-anchor', 'middle')
-      .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-      .text('Sequence Length')
-    svg
-      .append('text')
-      .attr('transform', `rotate(-90)`)
-      .attr('y', 0)
-      .attr('x', 0 - height / 2 - margin.top)
-      .attr('dy', '1em')
-      .style('text-anchor', 'middle')
-      .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-      .text('Batch Size')
-    const legend = svg
-      .append('g')
-      .attr('class', 'legend')
-      .attr('transform', `translate(${width - 20}, 20)`)
-    precisions.forEach((precision, index) => {
-      const legendItem = legend.append('g').attr('transform', `translate(0, ${index * 30})`)
-      legendItem
         .append('rect')
-        .attr('x', 10)
-        .attr('y', 10)
-        .attr('width', 10)
-        .attr('height', 10)
-        .style('fill', precision.color)
-      legendItem
-        .append('text')
-        .attr('x', 30)
-        .attr('y', 16)
-        .text(precision.name)
-        .style('font-size', '16px')
-        .style('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-        .attr('alignment-baseline', 'middle')
-    })
-    legend
-      .append('rect')
-      .attr('class', 'legend-box')
-      .attr('width', 80)
-      .attr('height', precisions.length * 30)
-      .style('fill', 'none')
-      .style('stroke-width', '1px')
-      .style('stroke', theme === 'dark' ? '#f9fafb' : '#181f26')
-    const tooltip = d3.select('#tooltip')
-    for (const [precision, memory] of Object.entries(availableMemory)) {
-      const sequenceLengths = d3
-        .range(1, maxSeqLength, 1)
-        .map((seqLength) => {
-          return {
             seqLength,
-            batchSize: (memory - activationMemorySize) / (seqLength * memoryPerInput),
-          }
-        })
-        .filter((seqLength) => seqLength.batchSize <= maxBatchSize)
-        .filter((seqLength) => seqLength.batchSize > 1 && seqLength.seqLength > 1)
-      const lineGroup = svg
-        .append('g')
-        .attr('transform', `translate(${margin.left}, ${margin.top})`)
-      const line = d3
-        .line<LineChartData>()
-        .x((d) => xScale(d.seqLength))
-        .y((d) => yScale(d.batchSize))
-        .curve(d3.curveBasis)
-      lineGroup
-        .append('path')
-        .datum(sequenceLengths)
-        .attr('fill', 'none')
-        .attr('stroke', chooseColor(precision as Precision))
-        .attr('stroke-width', 4)
-        .attr('d', line)
-        .on('mouseover', () => {
-          tooltip.style('opacity', 1)
-          tooltip.style('background-color', theme === 'dark' ? '#181f26' : '#f9fafb')
-        })
-        .on('mousemove', (event) => {
-          tooltip.selectAll('text').remove()
-          const [x, y] = d3.pointer(event)
-          const xValue = xScale.invert(x)
-          const yValue = yScale.invert(y)
-          tooltip
-            .html(`Sequence Length: ${xValue.toFixed(0)}<br/>Batch Size: ${yValue.toFixed(0)}`)
-            .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
-            .style('left', event.pageX + 10 + 'px')
-            .style('top', event.pageY + 10 + 'px')
-        })
-        .on('mouseout', () => {
-          tooltip.style('opacity', 0)
-        })
-    }
-  }, [availableMemory, memoryPerInput, activationMemorySize, theme])
-  function chooseColor(precision: Precision) {
-    const colors = {
-      fp32: '#e45f5b',
-      fp16: '#ffc068',
-      int8: '#71cce9',
-      int4: '#383d95',
     }
-    return colors[precision] || 'gray'
-  }
   return (
     <>
       <div id='tooltip'></div>
       <svg ref={chartRef} width={600} height={400} />
     </>
-  )
 }
-// Prefill Chunking Calculator
-const PrefillChunkingCalculator = ({
   deviceMemory,
   modelParams,
   hiddenSize,
   numLayers,
-  maxChunkSize,
   intermediateSize,
 }: {
-  deviceMemory: number
-  modelParams: number
-  hiddenSize: number
-  numLayers: number
-  batchSize: number | null
-  seqLength: number | null
-  maxChunkSize: number | null
-  intermediateSize: number | null
-}) => {
-  // Function to calculate memory usage based on precision and model parameters
-  function calculateMemory(params: number, precision: 'fp32' | 'fp16' | 'int8' | 'int4'): number {
-    const paramSize = { fp32: 4, fp16: 2, int8: 1, int4: 0.5 }
-    return params * paramSize[precision] // in GB
-  }
-  function calculateMemoryPerInput(hiddenSize: number, numLayers: number) {
-    const memoryPerInput = 4 * hiddenSize * numLayers
-    return memoryPerInput / 1_000_000_000 // in GB
-  }
-  function calculateMemoryNeededForActivations(
-    maxChunkSize: number,
-    intermediateSize: number,
-    hiddenSize: number,
-  ) {
-    const activationMemorySize = maxChunkSize * 2 * Math.max(2 * intermediateSize, 4 * hiddenSize)
-    return activationMemorySize / 1_000_000_000 // in GB
   }
-  const memoryPerInput = calculateMemoryPerInput(hiddenSize, numLayers)
-  const activationMemorySize = calculateMemoryNeededForActivations(
-    maxChunkSize!,
-    intermediateSize!,
-    hiddenSize,
-  )
   return (
     <>
       {/* Model Footprint with Prefill Chunking */}
-      <div>
-        <div className='chart'>
-            <div className='text-2xl text-center mb-4'>Model Footprint with Prefill Chunking</div>
-          <div>
-            <div className='chart-row'>
-              <div className='chart-row-title'>FP32</div>
-              <PrefillChunkingModelSizeBarChart
-                modelSize={calculateMemory(modelParams, 'fp32')}
-                largestModelSize={deviceMemory || calculateMemory(modelParams, 'fp32')}
-                modelPrecision='fp32'
-                deviceMemorySet={deviceMemory !== null && deviceMemory > 0}
-                activationMemorySize={activationMemorySize}
-              />
-              <div className='chart-row-size ml-8'>
-                {(calculateMemory(modelParams, 'fp32') + activationMemorySize).toFixed(2)}{' '}
-                {deviceMemory !== null && deviceMemory > 0 ? `/ ${deviceMemory} ` : null}GB
-              </div>
-            </div>
-            <div className='chart-row my-8'>
-              <div className='chart-row-title'>FP16</div>
-              <PrefillChunkingModelSizeBarChart
-                modelSize={calculateMemory(modelParams, 'fp16')}
-                largestModelSize={deviceMemory || calculateMemory(modelParams, 'fp16')}
-                modelPrecision='fp16'
-                deviceMemorySet={deviceMemory !== null && deviceMemory > 0}
-                activationMemorySize={activationMemorySize}
-              />
-              <div className='chart-row-size ml-8'>
-                {(calculateMemory(modelParams, 'fp16') + activationMemorySize).toFixed(2)}{' '}
-                {deviceMemory !== null && deviceMemory > 0 ? `/ ${deviceMemory} ` : null}GB
-              </div>
-            </div>
-            <div className='chart-row my-8'>
-              <div className='chart-row-title'>INT8</div>
-              <PrefillChunkingModelSizeBarChart
-                modelSize={calculateMemory(modelParams, 'int8')}
-                largestModelSize={deviceMemory || calculateMemory(modelParams, 'int8')}
-                modelPrecision='int8'
-                deviceMemorySet={deviceMemory !== null && deviceMemory > 0}
-                activationMemorySize={activationMemorySize}
-              />
-              <div className='chart-row-size ml-8'>
-                {(calculateMemory(modelParams, 'int8') + activationMemorySize).toFixed(2)}{' '}
-                {deviceMemory !== null && deviceMemory > 0 ? `/ ${deviceMemory} ` : null}GB
-              </div>
-            </div>
-            <div className='chart-row my-8'>
-              <div className='chart-row-title'>INT4</div>
-              <PrefillChunkingModelSizeBarChart
-                modelSize={calculateMemory(modelParams, 'int4')}
-                largestModelSize={deviceMemory || calculateMemory(modelParams, 'int4')}
-                modelPrecision='int4'
-                deviceMemorySet={deviceMemory !== null && deviceMemory > 0}
-                activationMemorySize={activationMemorySize}
-              />
-              <div className='chart-row-size ml-8'>
-                {(calculateMemory(modelParams, 'int4') + activationMemorySize).toFixed(2)}{' '}
-                {deviceMemory !== null && deviceMemory > 0 ? `/ ${deviceMemory} ` : null}GB
               </div>
-            </div>
-          </div>
         </div>
-        <div className='chart'>
-          <div className='flex flex-col items-center'>
-            <div className='text-2xl'>
-              Maximum Batch Size / Sequence Length with Prefill Chunking
-            </div>
-          </div>
-          <PrefillChunkingInferenceRuntimeLineChart
-            availableMemory={{
-              int4: deviceMemory - calculateMemory(modelParams, 'int4'),
-              int8: deviceMemory - calculateMemory(modelParams, 'int8'),
-              fp16: deviceMemory - calculateMemory(modelParams, 'fp16'),
-              fp32: deviceMemory - calculateMemory(modelParams, 'fp32'),
-            }}
-            memoryPerInput={memoryPerInput}
-            activationMemorySize={activationMemorySize}
-          />
         </div>
       </div>
     </>
-  )
 }
-// Calculator page with toggle feature
-const Calculator = () => {
-  // Model Parameters (billions)
-  const [modelParams, setModelParams] = useState<number | null>(null)
-  const [hiddenSize, setHiddenSize] = useState<number | null>(null)
-  const [numLayers, setNumLayers] = useState<number | null>(null)
-  // Device Memory (GB)
-  const [deviceMemory, setDeviceMemory] = useState<number | null>(null)
-  // Inputs
-  const [batchSize, setBatchSize] = useState<number | null>(null)
-  const [seqLength, setSeqLength] = useState<number | null>(null)
-  // Prefill Chunking Inputs
-  const [maxChunkSize, setMaxChunkSize] = useState<number | null>(null)
-  const [intermediateSize, setIntermediateSize] = useState<number | null>(null)
-  // Toggle between standard calculator and prefill chunking calculator
-  const [isPrefillChunking, setIsPrefillChunking] = useState<boolean>(false)
-  // Toggle between model selection and custom model input
-  const [modelSelectionTab, setModelSelectionTab] = useState<boolean>(true)
-  // Toggle between device selection and custom device input
-  const [deviceSelectionTab, setDeviceSelectionTab] = useState<boolean>(true)
-  // Calculate model memory
   function calculateMemory(params: number, precision: Precision) {
-    const paramSize = { fp32: 4, fp16: 2, int8: 1, int4: 0.5 }
-    return params * paramSize[precision] // in GB
   }
-  // Calculate memory per input (sequence length and batch size)
   function calculateMemoryPerInput(hiddenSize: number, numLayers: number) {
-    const memoryPerInput = 4 * hiddenSize * numLayers
-    return memoryPerInput / 1_000_000_000 // in GB
   }
-  // Calculate maximum batch size / sequence length
   function calculateMaxInputSize(
     deviceMemory: number,
     modelParams: number,
@@ -750,12 +424,11 @@ const Calculator = () => {
     precision: Precision,
     inputSize: number,
   ) {
-    const memoryPerInput = calculateMemoryPerInput(hiddenSize, numLayers)
-    const availableMemory = deviceMemory - calculateMemory(modelParams, precision)
-    return Math.floor(availableMemory / (memoryPerInput * inputSize))
   }
-  // Check if memory is valid for batch size / sequence length combination
   function calculateMemoryValid(
     deviceMemory: number,
     modelParams: number,
@@ -765,43 +438,90 @@ const Calculator = () => {
     batchSize: number,
     seqLength: number,
   ) {
-    const memoryPerInput = calculateMemoryPerInput(hiddenSize, numLayers)
-    const availableMemory = deviceMemory - calculateMemory(modelParams, precision)
-    return availableMemory >= memoryPerInput * batchSize * seqLength
   }
   return (
     <div className='flex flex-col items-center justify-center min-h-screen px-4'>
-      {/* Toggle Button */}
       <div className='mb-4 flex space-x-4'>
         <button
-          className={`${
-            !isPrefillChunking ? 'calculator-input-tab-active' : 'calculator-input-tab'
-          }`}
           onClick={() => setIsPrefillChunking(false)}
         >
           Standard Calculator
         </button>
         <button
-          className={`${
-            isPrefillChunking ? 'calculator-input-tab-active' : 'calculator-input-tab'
-          }`}
           onClick={() => setIsPrefillChunking(true)}
         >
           Calculator with Prefill Chunking
         </button>
       </div>
-      {/* Model Memory Calculator */}
       <div className='w-full max-w-4xl'>
         <div className='text-4xl mb-4 text-center'>Model Memory Calculator</div>
         <div className='mb-6 text-center'>
           Use our Model Memory Calculator to help you estimate the memory footprint of your model
-          for different precisions and the maximum batch size / sequence length combination you can
-          run on your device.
         </div>
-        {/* Model and Device Selection */}
         <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6'>
           {/* Model Selection */}
           <div className='calculator-input-box'>
@@ -809,17 +529,13 @@ const Calculator = () => {
             <div className='calculator-input-content'>
               <div className='mb-2'>
                 <button
-                  className={`${
-                    modelSelectionTab ? 'calculator-input-tab-active' : 'calculator-input-tab'
-                  }`}
                   onClick={() => setModelSelectionTab(true)}
                 >
                   Model Selection
                 </button>
                 <button
-                  className={`${
-                    modelSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'
-                  }`}
                   onClick={() => setModelSelectionTab(false)}
                 >
                   Custom Model
@@ -833,19 +549,15 @@ const Calculator = () => {
                       id='model'
                       className='calculator-select'
                       onChange={(e) => {
-                        setModelParams(Number(e.target.value))
-                        setHiddenSize(
-                          Number(
-                            e.target.options[e.target.selectedIndex].getAttribute(
-                              'data-hiddenSize'
-                            ),
-                          ),
-                        )
-                        setNumLayers(
-                          Number(
-                            e.target.options[e.target.selectedIndex].getAttribute('data-numLayers'),
-                          ),
-                        )
                       }}
                     >
                       <option value=''>None selected</option>
@@ -853,8 +565,6 @@ const Calculator = () => {
                         <option
                           key={model.name}
                           value={model.params}
-                          data-hiddenSize={model.hidden_size}
-                          data-numLayers={model.num_hidden_layers}
                         >
                           {model.name}
                         </option>
@@ -893,6 +603,20 @@ const Calculator = () => {
                       min={1}
                       onChange={(e) => setNumLayers(Number(e.target.value))}
                     />
                   </>
                 )}
               </div>
@@ -905,23 +629,19 @@ const Calculator = () => {
             <div className='calculator-input-content'>
               <div className='mb-2'>
                 <button
-                  className={`${
-                    deviceSelectionTab ? 'calculator-input-tab-active' : 'calculator-input-tab'
-                  }`}
                   onClick={() => {
-                    setDeviceSelectionTab(true)
-                    setDeviceMemory(null)
                   }}
                 >
                   Device Selection
                 </button>
                 <button
-                  className={`${
-                    deviceSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'
-                  }`}
                   onClick={() => {
-                    setDeviceSelectionTab(false)
-                    setDeviceMemory(null)
                   }}
                 >
                   Custom Device
@@ -963,448 +683,26 @@ const Calculator = () => {
           </div>
         </div>
-        {/* Prefill Chunking Settings */}
-        {isPrefillChunking && (
-          <div className='calculator-input-box mb-6'>
-            <div className='text-2xl calculator-input-title'>Prefill Chunking Settings</div>
-            <div className='calculator-input-content'>
-              <label htmlFor='maxChunkSize'>Max Chunk Size</label>
-              <input
-                type='number'
-                id='maxChunkSize'
-                className='calculator-input mb-2'
-                placeholder='e.g. 512'
-                value={maxChunkSize || ''}
-                min={1}
-                onChange={(e) => setMaxChunkSize(Number(e.target.value))}
-              />
-              <label htmlFor='intermediateSize'>Intermediate Size</label>
-              <input
-                type='number'
-                id='intermediateSize'
-                className='calculator-input'
-                placeholder='e.g. 2048'
-                value={intermediateSize || ''}
-                min={1}
-                onChange={(e) => setIntermediateSize(Number(e.target.value))}
-              />
-            </div>
-          </div>
-        )}
-        {/* Charts Section */}
         {isPrefillChunking ? (
           <PrefillChunkingCalculator
             deviceMemory={deviceMemory!}
             modelParams={modelParams!}
             hiddenSize={hiddenSize!}
             numLayers={numLayers!}
-            batchSize={batchSize}
-            seqLength={seqLength}
-            maxChunkSize={maxChunkSize}
-            intermediateSize={intermediateSize}
           />
         ) : (
-          hiddenSize &&
-          numLayers &&
-          deviceMemory &&
-          modelParams && (
-            <>
-              {/* Model Footprint Chart */}
-              <div className='chart mb-8'>
-                <div className='text-2xl text-center mb-4'>Model Footprint</div>
-                <div className='space-y-8'>
-                  <div className='chart-row'>
-                    <div className='chart-row-title'>FP32</div>
-                    <ModelSizeBarChart
-                      modelSize={calculateMemory(modelParams, 'fp32')}
-                      largestModelSize={deviceMemory || calculateMemory(modelParams, 'fp32')}
-                      modelPrecision='fp32'
-                      deviceMemorySet={deviceMemory !== null && deviceMemory > 0}
-                    />
-                    <div className='chart-row-size ml-8'>
-                      {calculateMemory(modelParams, 'fp32')}{' '}
-                      {deviceMemory ? `/ ${deviceMemory} ` : null}GB
-                    </div>
-                  </div>
-                  {/* FP16 */}
-                  <div className='chart-row'>
-                    <div className='chart-row-title'>FP16</div>
-                    <ModelSizeBarChart
-                      modelSize={calculateMemory(modelParams, 'fp16')}
-                      largestModelSize={deviceMemory || calculateMemory(modelParams, 'fp16')}
-                      modelPrecision='fp16'
-                      deviceMemorySet={deviceMemory !== null && deviceMemory > 0}
-                    />
-                    <div className='chart-row-size ml-8'>
-                      {calculateMemory(modelParams, 'fp16')}{' '}
-                      {deviceMemory ? `/ ${deviceMemory} ` : null}GB
-                    </div>
-                  </div>
-                  {/* INT8 */}
-                  <div className='chart-row'>
-                    <div className='chart-row-title'>INT8</div>
-                    <ModelSizeBarChart
-                      modelSize={calculateMemory(modelParams, 'int8')}
-                      largestModelSize={deviceMemory || calculateMemory(modelParams, 'int8')}
-                      modelPrecision='int8'
-                      deviceMemorySet={deviceMemory !== null && deviceMemory > 0}
-                    />
-                    <div className='chart-row-size ml-8'>
-                      {calculateMemory(modelParams, 'int8')}{' '}
-                      {deviceMemory ? `/ ${deviceMemory} ` : null}GB
-                    </div>
-                  </div>
-                  {/* INT4 */}
-                  <div className='chart-row'>
-                    <div className='chart-row-title'>INT4</div>
-                    <ModelSizeBarChart
-                      modelSize={calculateMemory(modelParams, 'int4')}
-                      largestModelSize={deviceMemory || calculateMemory(modelParams, 'int4')}
-                      modelPrecision='int4'
-                      deviceMemorySet={deviceMemory !== null && deviceMemory > 0}
-                    />
-                    <div className='chart-row-size ml-8'>
-                      {calculateMemory(modelParams, 'int4')}{' '}
-                      {deviceMemory ? `/ ${deviceMemory} ` : null}GB
-                    </div>
-                  </div>
-                </div>
-              </div>
-              {/* Maximum Batch Size / Sequence Length Chart */}
-              <div className='chart mb-8'>
-                <div className='text-2xl text-center mb-4'>
-                  Maximum Batch Size / Sequence Length
-                </div>
-                <div className='flex flex-row items-left'>
-                  <InferenceRuntimeLineChart
-                    availableMemory={{
-                      int4: deviceMemory - calculateMemory(modelParams, 'int4'),
-                      int8: deviceMemory - calculateMemory(modelParams, 'int8'),
-                      fp16: deviceMemory - calculateMemory(modelParams, 'fp16'),
-                      fp32: deviceMemory - calculateMemory(modelParams, 'fp32'),
-                    }}
-                    memoryPerInput={calculateMemoryPerInput(hiddenSize, numLayers)}
-                  />
-                  <div className='chart-side-panel ml-4 pt-4'>
-                    <div className='mb-2'>
-                      Memory/token:{' '}
-                      {(calculateMemoryPerInput(hiddenSize, numLayers) * 1_000_000).toFixed(0)} KB
-                    </div>
-                    <label htmlFor='batchSize'>Batch Size</label>
-                    <input
-                      type='number'
-                      id='batchSize'
-                      className='side-panel-input mb-2'
-                      value={batchSize || ''}
-                      min={1}
-                      onChange={(e) => setBatchSize(Number(e.target.value))}
-                    />
-                    <label htmlFor='seqLength'>Sequence Length</label>
-                    <input
-                      type='number'
-                      id='seqLength'
-                      className='side-panel-input'
-                      value={seqLength || ''}
-                      min={1}
-                      onChange={(e) => setSeqLength(Number(e.target.value))}
-                    />
-                    <div className='mt-4'>
-                      {!batchSize && !seqLength ? (
-                        <div>
-                          Input a batch size or sequence length to see the maximum batch size or
-                          sequence length you can run on your device.
-                        </div>
-                      ) : null}
-                      {batchSize && !seqLength ? (
-                        <>
-                          <div>Max Sequence Lengths:</div>
-                          <div>
-                            FP32:{' '}
-                            <strong>
-                              {calculateMaxInputSize(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'fp32',
-                                batchSize,
-                              ) > 0
-                                ? calculateMaxInputSize(
-                                    deviceMemory,
-                                    modelParams,
-                                    hiddenSize,
-                                    numLayers,
-                                    'fp32',
-                                    batchSize,
-                                  )
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                          <div>
-                            FP16:{' '}
-                            <strong>
-                              {calculateMaxInputSize(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'fp16',
-                                batchSize,
-                              ) > 0
-                                ? calculateMaxInputSize(
-                                    deviceMemory,
-                                    modelParams,
-                                    hiddenSize,
-                                    numLayers,
-                                    'fp16',
-                                    batchSize,
-                                  )
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                          <div>
-                            INT8:{' '}
-                            <strong>
-                              {calculateMaxInputSize(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'int8',
-                                batchSize,
-                              ) > 0
-                                ? calculateMaxInputSize(
-                                    deviceMemory,
-                                    modelParams,
-                                    hiddenSize,
-                                    numLayers,
-                                    'int8',
-                                    batchSize,
-                                  )
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                          <div>
-                            INT4:{' '}
-                            <strong>
-                              {calculateMaxInputSize(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'int4',
-                                batchSize,
-                              ) > 0
-                                ? calculateMaxInputSize(
-                                    deviceMemory,
-                                    modelParams,
-                                    hiddenSize,
-                                    numLayers,
-                                    'int4',
-                                    batchSize,
-                                  )
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                        </>
-                      ) : null}
-                      {!batchSize && seqLength ? (
-                        <>
-                          <div>Max Batch Sizes:</div>
-                          <div>
-                            FP32:{' '}
-                            <strong>
-                              {calculateMaxInputSize(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'fp32',
-                                seqLength,
-                              ) > 0
-                                ? calculateMaxInputSize(
-                                    deviceMemory,
-                                    modelParams,
-                                    hiddenSize,
-                                    numLayers,
-                                    'fp32',
-                                    seqLength,
-                                  )
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                          <div>
-                            FP16:{' '}
-                            <strong>
-                              {calculateMaxInputSize(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'fp16',
-                                seqLength,
-                              ) > 0
-                                ? calculateMaxInputSize(
-                                    deviceMemory,
-                                    modelParams,
-                                    hiddenSize,
-                                    numLayers,
-                                    'fp16',
-                                    seqLength,
-                                  )
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                          <div>
-                            INT8:{' '}
-                            <strong>
-                              {calculateMaxInputSize(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'int8',
-                                seqLength,
-                              ) > 0
-                                ? calculateMaxInputSize(
-                                    deviceMemory,
-                                    modelParams,
-                                    hiddenSize,
-                                    numLayers,
-                                    'int8',
-                                    seqLength,
-                                  )
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                          <div>
-                            INT4:{' '}
-                            <strong>
-                              {calculateMaxInputSize(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'int4',
-                                seqLength,
-                              ) > 0
-                                ? calculateMaxInputSize(
-                                    deviceMemory,
-                                    modelParams,
-                                    hiddenSize,
-                                    numLayers,
-                                    'int4',
-                                    seqLength,
-                                  )
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                        </>
-                      ) : null}
-                      {batchSize && seqLength ? (
-                        <>
-                          <div>Total Memory Usage:</div>
-                          <div>
-                            FP32:{' '}
-                            <strong>
-                              {calculateMemoryValid(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'fp32',
-                                batchSize,
-                                seqLength,
-                              )
-                                ? (
-                                    calculateMemory(modelParams, 'fp32') +
-                                    calculateMemoryPerInput(hiddenSize, numLayers) *
-                                      batchSize *
-                                      seqLength
-                                  ).toFixed(2) + ' GB'
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                          <div>
-                            FP16:{' '}
-                            <strong>
-                              {calculateMemoryValid(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'fp16',
-                                batchSize,
-                                seqLength,
-                              )
-                                ? (
-                                    calculateMemory(modelParams, 'fp16') +
-                                    calculateMemoryPerInput(hiddenSize, numLayers) *
-                                      batchSize *
-                                      seqLength
-                                  ).toFixed(2) + ' GB'
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                          <div>
-                            INT8:{' '}
-                            <strong>
-                              {calculateMemoryValid(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'int8',
-                                batchSize,
-                                seqLength,
-                              )
-                                ? (
-                                    calculateMemory(modelParams, 'int8') +
-                                    calculateMemoryPerInput(hiddenSize, numLayers) *
-                                      batchSize *
-                                      seqLength
-                                  ).toFixed(2) + ' GB'
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                          <div>
-                            INT4:{' '}
-                            <strong>
-                              {calculateMemoryValid(
-                                deviceMemory,
-                                modelParams,
-                                hiddenSize,
-                                numLayers,
-                                'int4',
-                                batchSize,
-                                seqLength,
-                              )
-                                ? (
-                                    calculateMemory(modelParams, 'int4') +
-                                    calculateMemoryPerInput(hiddenSize, numLayers) *
-                                      batchSize *
-                                      seqLength
-                                  ).toFixed(2) + ' GB'
-                                : 'Out of Memory'}
-                            </strong>
-                          </div>
-                        </>
-                      ) : null}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </>
-          )
         )}
       </div>
     </div>
-  )
-}
-export default Calculator

+import React, { useState, useEffect, useRef } from 'react';
+import * as d3 from 'd3';
+import { useTheme } from '../context/themeContext';
+import MODELS from '../utils/models';
+import DEVICES from '../utils/devices';
+type Precision = 'fp32' | 'fp16' | 'int8' | 'int4';
 interface ModelSizeBarChartProps {
+  modelSize: number; // in GB
+  largestModelSize: number; // largest model in full precision (fp32)
+  modelPrecision: Precision;
+  deviceMemorySet: boolean;
+  activationMemorySize?: number; // optional for standard calculator
 }
 interface InferenceRuntimeLineChartProps {
+  availableMemory: AvailableMemory; // in GB
+  memoryPerInput: number; // in GB
 }
 interface LineChartData {
+  seqLength: number;
+  batchSize: number;
 }
 interface AvailableMemory {
+  int4: number;
+  int8: number;
+  fp16: number;
+  fp32: number;
 }
+// Utility to determine color based on precision
+function chooseColor(precision: Precision) {
+  const colors = {
+    fp32: '#e45f5b',
+    fp16: '#ffc068',
+    int8: '#71cce9',
+    int4: '#383d95',
+  };
+  return colors[precision] || 'gray';
+}
+// Utility function to calculate total memory with precision factor for prefill chunking
+function calculateTotalMemory(
+  modelParams: number,
+  hiddenSize: number,
+  numLayers: number,
+  intermediateSize: number,
+  precision: Precision
+) {
+  const precisionFactor = {
+    fp32: 4,
+    fp16: 2,
+    int8: 1,
+    int4: 0.5,
+  };
+  const memoryPerInput = (4 * hiddenSize * numLayers) / 1_000_000_000; // GB
+  const modelMemorySize = modelParams * precisionFactor[precision]; // Adjusted by precision
+  const activationMemorySize = Math.max(2 * intermediateSize, 4 * hiddenSize) / 1_000_000_000; // GB
+  return memoryPerInput + modelMemorySize + activationMemorySize;
 }
+// Bar chart for model footprint (shared by both standard and prefill chunking calculators)
 function ModelSizeBarChart({
   modelSize,
   largestModelSize,
   modelPrecision,
   deviceMemorySet,
+  activationMemorySize = 0, // default to 0 for standard calculator
 }: ModelSizeBarChartProps) {
+  const { theme } = useTheme();
+  const chartRef = useRef<SVGSVGElement>(null);
+  const width = 600;
+  const height = 50;
   useEffect(() => {
+    if (modelSize > 0 && largestModelSize > 0) {
+      d3.select(chartRef.current).selectAll('*').remove();
+      const svg = d3.select(chartRef.current).attr('width', width).attr('height', height);
+      const xScale = d3.scaleLinear().domain([0, largestModelSize]).range([0, width]);
+      if (modelSize + activationMemorySize > largestModelSize) {
         svg
           .append('rect')
+          .attr('x', 0)
           .attr('y', 0)
+          .attr('width', width)
           .attr('height', height)
           .attr('fill', 'transparent')
+          .style('stroke', theme === 'dark' ? '#f9fafb' : '#181f26')
+          .style('stroke-dasharray', '4, 4')
+          .style('stroke-width', '2px');
+        svg
+          .append('text')
+          .attr('x', width / 2)
+          .attr('y', height / 2)
+          .attr('text-anchor', 'middle')
+          .attr('alignment-baseline', 'middle')
+          .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
+          .text('Out of Memory');
+      } else {
+        svg
+          .append('rect')
+          .attr('x', 0)
+          .attr('y', 0)
+          .attr('width', xScale(modelSize))
+          .attr('height', height)
+          .attr('fill', chooseColor(modelPrecision));
+        if (activationMemorySize > 0) {
+          svg
+            .append('rect')
+            .attr('x', xScale(modelSize))
+            .attr('y', 0)
+            .attr('width', xScale(activationMemorySize))
+            .attr('height', height)
+            .attr('fill', '#a4b8e0');
+        }
+        if (deviceMemorySet) {
+          svg
+            .append('rect')
+            .attr('x', xScale(modelSize + activationMemorySize))
+            .attr('y', 0)
+            .attr('width', xScale(largestModelSize - (modelSize + activationMemorySize)))
+            .attr('height', height)
+            .attr('fill', 'transparent')
+            .style('stroke', chooseColor(modelPrecision))
+            .style('stroke-width', '2px');
+        }
       }
     }
+  }, [modelSize, largestModelSize, modelPrecision, deviceMemorySet, activationMemorySize, theme]);
+  return <svg ref={chartRef}></svg>;
 }
+// Line chart for inference runtime (shared by both standard and prefill chunking calculators)
 function InferenceRuntimeLineChart({
   availableMemory,
   memoryPerInput,
 }: InferenceRuntimeLineChartProps) {
+  const { theme } = useTheme();
+  const chartRef = useRef(null);
+  const maxSeqLength = 4096;
+  const maxBatchSize = 128;
   useEffect(() => {
+    if (memoryPerInput > 0 && Object.values(availableMemory).some((val) => val > 0)) {
+      const margin = { top: 20, right: 20, bottom: 50, left: 50 };
+      const width = 600 - margin.left - margin.right;
+      const height = 400 - margin.top - margin.bottom;
+      const precisions = [
+        { name: 'FP32', color: '#e45f5b' },
+        { name: 'FP16', color: '#ffc068' },
+        { name: 'INT8', color: '#71cce9' },
+        { name: 'INT4', color: '#383d95' },
+      ];
+      const svg = d3.select(chartRef.current);
+      svg.selectAll('*').remove();
+      const xScale = d3.scaleLinear().domain([0, maxSeqLength]).range([0, width]);
+      const yScale = d3.scaleLinear().domain([0, maxBatchSize]).range([height, 0]);
+      const xAxis = d3.axisBottom(xScale);
+      const yAxis = d3.axisLeft(yScale);
+      const zoom = d3
+        .zoom()
+        .scaleExtent([0.5, 10])
+        .translateExtent([
+          [-width, -height],
+          [2 * width, 2 * height],
+        ])
+        .on('zoom', (event) => {
+          const transform = event.transform;
+          svg.select('.x-axis').call(xAxis.scale(transform.rescaleX(xScale)));
+          svg.select('.y-axis').call(yAxis.scale(transform.rescaleY(yScale)));
+          svg.selectAll('path').attr('transform', transform);
+        });
+      svg
+        .attr('width', width + margin.left + margin.right)
+        .attr('height', height + margin.top + margin.bottom)
         .append('g')
         .attr('transform', `translate(${margin.left}, ${margin.top})`)
+        .call(zoom);
+      svg
+        .append('g')
+        .attr('class', 'x-axis')
+        .attr('transform', `translate(${margin.left}, ${height + margin.top})`)
+        .call(xAxis);
       svg
+        .append('g')
+        .attr('class', 'y-axis')
+        .attr('transform', `translate(${margin.left}, ${margin.top})`)
+        .call(yAxis);
       svg
         .append('text')
+        .attr('transform', `translate(${width / 2 + margin.left}, ${height + margin.top + 40})`)
+        .style('text-anchor', 'middle')
         .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
+        .text('Sequence Length');
       svg
+        .append('text')
+        .attr('transform', `rotate(-90)`)
         .attr('y', 0)
+        .attr('x', 0 - height / 2 - margin.top)
+        .attr('dy', '1em')
+        .style('text-anchor', 'middle')
+        .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
+        .text('Batch Size');
+      // Adding legend for precisions
+      const legend = svg
+        .append('g')
+        .attr('class', 'legend')
+        .attr('transform', `translate(${width - 20}, 20)`);
+      precisions.forEach((precision, index) => {
+        const legendItem = legend.append('g').attr('transform', `translate(0, ${index * 30})`);
+        legendItem
+          .append('rect')
+          .attr('x', 10)
+          .attr('y', 10)
+          .attr('width', 10)
+          .attr('height', 10)
+          .style('fill', precision.color);
+        legendItem
+          .append('text')
+          .attr('x', 30)
+          .attr('y', 16)
+          .text(precision.name)
+          .style('font-size', '16px')
+          .style('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
+          .attr('alignment-baseline', 'middle');
+      });
+      legend
         .append('rect')
+        .attr('class', 'legend-box')
+        .attr('width', 80)
+        .attr('height', precisions.length * 30)
+        .style('fill', 'none')
+        .style('stroke-width', '1px')
+        .style('stroke', theme === 'dark' ? '#f9fafb' : '#181f26');
+      const tooltip = d3.select('#tooltip');
+      for (const [precision, memory] of Object.entries(availableMemory)) {
+        const sequenceLengths = d3
+          .range(1, maxSeqLength, 1)
+          .map((seqLength) => ({
             seqLength,
+            batchSize: memory / (seqLength * memoryPerInput),
+          }))
+          .filter((d) => d.batchSize <= maxBatchSize && d.batchSize > 1 && d.seqLength > 1);
+        const lineGroup = svg
+          .append('g')
+          .attr('transform', `translate(${margin.left}, ${margin.top})`);
+        const line = d3
+          .line<LineChartData>()
+          .x((d) => xScale(d.seqLength))
+          .y((d) => yScale(d.batchSize))
+          .curve(d3.curveBasis);
+        lineGroup
+          .append('path')
+          .datum(sequenceLengths)
+          .attr('fill', 'none')
+          .attr('stroke', chooseColor(precision as Precision))
+          .attr('stroke-width', 4)
+          .attr('d', line)
+          .on('mouseover', () => {
+            tooltip.style('opacity', 1);
+            tooltip.style('background-color', theme === 'dark' ? '#181f26' : '#f9fafb');
+          })
+          .on('mousemove', (event) => {
+            tooltip.selectAll('text').remove();
+            const [x, y] = d3.pointer(event);
+            const xValue = xScale.invert(x);
+            const yValue = yScale.invert(y);
+            tooltip
+              .html(`Sequence Length: ${xValue.toFixed(0)}<br/>Batch Size: ${yValue.toFixed(0)}`)
+              .attr('fill', theme === 'dark' ? '#f9fafb' : '#181f26')
+              .style('left', event.pageX + 10 + 'px')
+              .style('top', event.pageY + 10 + 'px');
+          })
+          .on('mouseout', () => {
+            tooltip.style('opacity', 0);
+          });
+      }
     }
+  }, [availableMemory, memoryPerInput, theme]);
   return (
     <>
       <div id='tooltip'></div>
       <svg ref={chartRef} width={600} height={400} />
     </>
+  );
 }
+// Prefill Chunking Calculator with Updated Logic and Precision Adjustment
+function PrefillChunkingCalculator({
   deviceMemory,
   modelParams,
   hiddenSize,
   numLayers,
   intermediateSize,
 }: {
+  deviceMemory: number;
+  modelParams: number;
+  hiddenSize: number;
+  numLayers: number;
+  intermediateSize: number;
+}) {
+  if (!deviceMemory || !modelParams || !hiddenSize || !numLayers || !intermediateSize) {
+    return null;
   }
   return (
     <>
       {/* Model Footprint with Prefill Chunking */}
+      <div className='chart'>
+        <div className='text-2xl text-center mb-4'>Model Footprint with Prefill Chunking</div>
+        <div className='space-y-8'>
+          {(['fp32', 'fp16', 'int8', 'int4'] as Precision[]).map((precision) => {
+            const totalMemory = calculateTotalMemory(
+              modelParams,
+              hiddenSize,
+              numLayers,
+              intermediateSize,
+              precision
+            );
+            return (
+              <div key={precision} className='chart-row'>
+                <div className='chart-row-title'>{precision.toUpperCase()}</div>
+                <ModelSizeBarChart
+                  modelSize={totalMemory}
+                  largestModelSize={deviceMemory}
+                  modelPrecision={precision}
+                  deviceMemorySet={deviceMemory > 0}
+                  activationMemorySize={
+                    Math.max(2 * intermediateSize, 4 * hiddenSize) / 1_000_000_000
+                  }
+                />
+                <div className='chart-row-size ml-8'>
+                  {totalMemory.toFixed(2)} / {deviceMemory} GB
+                </div>
               </div>
+            );
+          })}
         </div>
+      </div>
+      {/* Inference Runtime with Prefill Chunking */}
+      <div className='chart'>
+        <div className='text-2xl text-center mb-4'>
+          Maximum Batch Size / Sequence Length with Prefill Chunking
         </div>
+        <InferenceRuntimeLineChart
+          availableMemory={{
+            int4: deviceMemory - calculateTotalMemory(modelParams, hiddenSize, numLayers, intermediateSize, 'int4'),
+            int8: deviceMemory - calculateTotalMemory(modelParams, hiddenSize, numLayers, intermediateSize, 'int8'),
+            fp16: deviceMemory - calculateTotalMemory(modelParams, hiddenSize, numLayers, intermediateSize, 'fp16'),
+            fp32: deviceMemory - calculateTotalMemory(modelParams, hiddenSize, numLayers, intermediateSize, 'fp32'),
+          }}
+          memoryPerInput={(4 * hiddenSize * numLayers) / 1_000_000_000}
+        />
       </div>
     </>
+  );
 }
+// Standard Model Memory Calculator (unchanged)
+function StandardCalculator({
+  deviceMemory,
+  modelParams,
+  hiddenSize,
+  numLayers,
+}: {
+  deviceMemory: number;
+  modelParams: number;
+  hiddenSize: number;
+  numLayers: number;
+}) {
+  if (!deviceMemory || !modelParams || !hiddenSize || !numLayers) {
+    return null;
+  }
   function calculateMemory(params: number, precision: Precision) {
+    const paramSize = { fp32: 4, fp16: 2, int8: 1, int4: 0.5 };
+    return params * paramSize[precision]; // in GB
   }
   function calculateMemoryPerInput(hiddenSize: number, numLayers: number) {
+    const memoryPerInput = 4 * hiddenSize * numLayers;
+    return memoryPerInput / 1_000_000_000; // in GB
   }
   function calculateMaxInputSize(
     deviceMemory: number,
     modelParams: number,
     precision: Precision,
     inputSize: number,
   ) {
+    const memoryPerInput = calculateMemoryPerInput(hiddenSize, numLayers);
+    const availableMemory = deviceMemory - calculateMemory(modelParams, precision);
+    return Math.floor(availableMemory / (memoryPerInput * inputSize));
   }
   function calculateMemoryValid(
     deviceMemory: number,
     modelParams: number,
     batchSize: number,
     seqLength: number,
   ) {
+    const memoryPerInput = calculateMemoryPerInput(hiddenSize, numLayers);
+    const availableMemory = deviceMemory - calculateMemory(modelParams, precision);
+    return availableMemory >= memoryPerInput * batchSize * seqLength;
   }
+  return (
+    <>
+      {/* Model Footprint */}
+      <div className='chart mb-8'>
+        <div className='text-2xl text-center mb-4'>Model Footprint</div>
+        <div className='space-y-8'>
+          {(['fp32', 'fp16', 'int8', 'int4'] as Precision[]).map((precision) => (
+            <div key={precision} className='chart-row'>
+              <div className='chart-row-title'>{precision.toUpperCase()}</div>
+              <ModelSizeBarChart
+                modelSize={calculateMemory(modelParams, precision)}
+                largestModelSize={deviceMemory}
+                modelPrecision={precision}
+                deviceMemorySet={deviceMemory > 0}
+              />
+              <div className='chart-row-size ml-8'>
+                {calculateMemory(modelParams, precision).toFixed(2)} / {deviceMemory} GB
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      {/* Maximum Batch Size / Sequence Length */}
+      <div className='chart'>
+        <div className='text-2xl text-center mb-4'>
+          Maximum Batch Size / Sequence Length
+        </div>
+        <InferenceRuntimeLineChart
+          availableMemory={{
+            int4: deviceMemory - calculateMemory(modelParams, 'int4'),
+            int8: deviceMemory - calculateMemory(modelParams, 'int8'),
+            fp16: deviceMemory - calculateMemory(modelParams, 'fp16'),
+            fp32: deviceMemory - calculateMemory(modelParams, 'fp32'),
+          }}
+          memoryPerInput={calculateMemoryPerInput(hiddenSize, numLayers)}
+        />
+      </div>
+    </>
+  );
+}
+// Main Calculator Page
+const Calculator = () => {
+  const [modelParams, setModelParams] = useState<number | null>(null);
+  const [hiddenSize, setHiddenSize] = useState<number | null>(null);
+  const [numLayers, setNumLayers] = useState<number | null>(null);
+  const [intermediateSize, setIntermediateSize] = useState<number | null>(null);
+  const [deviceMemory, setDeviceMemory] = useState<number | null>(null);
+  const [isPrefillChunking, setIsPrefillChunking] = useState<boolean>(false);
+  const [modelSelectionTab, setModelSelectionTab] = useState<boolean>(true);
+  const [deviceSelectionTab, setDeviceSelectionTab] = useState<boolean>(true);
   return (
     <div className='flex flex-col items-center justify-center min-h-screen px-4'>
+      {/* Toggle Between Standard and Prefill Chunking */}
       <div className='mb-4 flex space-x-4'>
         <button
+          className={`${!isPrefillChunking ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
           onClick={() => setIsPrefillChunking(false)}
         >
           Standard Calculator
         </button>
         <button
+          className={`${isPrefillChunking ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
           onClick={() => setIsPrefillChunking(true)}
         >
           Calculator with Prefill Chunking
         </button>
       </div>
+      {/* Model and Device Selection */}
       <div className='w-full max-w-4xl'>
         <div className='text-4xl mb-4 text-center'>Model Memory Calculator</div>
         <div className='mb-6 text-center'>
           Use our Model Memory Calculator to help you estimate the memory footprint of your model
+          and the maximum batch size/sequence length combination you can run on your device.
         </div>
         <div className='grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6'>
           {/* Model Selection */}
           <div className='calculator-input-box'>
             <div className='calculator-input-content'>
               <div className='mb-2'>
                 <button
+                  className={`${modelSelectionTab ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
                   onClick={() => setModelSelectionTab(true)}
                 >
                   Model Selection
                 </button>
                 <button
+                  className={`${modelSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'}`}
                   onClick={() => setModelSelectionTab(false)}
                 >
                   Custom Model
                       id='model'
                       className='calculator-select'
                       onChange={(e) => {
+                        const selectedModel = MODELS.find(
+                          (model) => model.params === Number(e.target.value),
+                        );
+                        if (selectedModel) {
+                          setModelParams(selectedModel.params);
+                          setHiddenSize(selectedModel.hidden_size);
+                          setNumLayers(selectedModel.num_hidden_layers);
+                          setIntermediateSize(selectedModel.intermediate_size);
+                        }
                       }}
                     >
                       <option value=''>None selected</option>
                         <option
                           key={model.name}
                           value={model.params}
                         >
                           {model.name}
                         </option>
                       min={1}
                       onChange={(e) => setNumLayers(Number(e.target.value))}
                     />
+                    {isPrefillChunking && (
+                      <>
+                        <label htmlFor='intermediateSize'>Intermediate Size</label>
+                        <input
+                          type='number'
+                          id='intermediateSize'
+                          className='calculator-input'
+                          placeholder='e.g. 11008 (for LLaMA-7B)'
+                          value={intermediateSize || ''}
+                          min={1}
+                          onChange={(e) => setIntermediateSize(Number(e.target.value))}
+                        />
+                      </>
+                    )}
                   </>
                 )}
               </div>
             <div className='calculator-input-content'>
               <div className='mb-2'>
                 <button
+                  className={`${deviceSelectionTab ? 'calculator-input-tab-active' : 'calculator-input-tab'}`}
                   onClick={() => {
+                    setDeviceSelectionTab(true);
+                    setDeviceMemory(null);
                   }}
                 >
                   Device Selection
                 </button>
                 <button
+                  className={`${deviceSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'}`}
                   onClick={() => {
+                    setDeviceSelectionTab(false);
+                    setDeviceMemory(null);
                   }}
                 >
                   Custom Device
           </div>
         </div>
+        {/* Render Appropriate Calculator Based on Toggle */}
         {isPrefillChunking ? (
           <PrefillChunkingCalculator
             deviceMemory={deviceMemory!}
             modelParams={modelParams!}
             hiddenSize={hiddenSize!}
             numLayers={numLayers!}
+            intermediateSize={intermediateSize!}
           />
         ) : (
+          <StandardCalculator
+            deviceMemory={deviceMemory!}
+            modelParams={modelParams!}
+            hiddenSize={hiddenSize!}
+            numLayers={numLayers!}
+          />
         )}
       </div>
     </div>
+  );
+};
+export default Calculator;