minor fixes

src/pages/Calculator.tsx

@@ -614,90 +614,94 @@ const PrefillChunkingCalculator = ({
   )
 
   return (
-
-    <div>
-      <div className='chart mb-8'>
-        <div className='flex flex-col items-center'>
-          <div className='text-2xl'>Model Footprint with Prefill Chunking</div>
-        </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>
+    <>
+      {/* Model Footprint with Prefill Chunking */}
+      <div>
+        <div className='chart mb-8'>
+          <div className='flex flex-col items-center'>
+            <div className='text-2xl'>Model Footprint with Prefill Chunking</div>
           </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 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>
 
-          <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 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>
 
-          <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 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>
-      <div className='chart'>
-        <div className='flex flex-col items-center'>
-          <div className='text-2xl'>Maximum Batch Size / Sequence Length with Prefill Chunking</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>
-        <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>
+    </>
   )
 }
 
@@ -770,343 +774,353 @@ const Calculator = () => {
   }
 
   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>
 
-<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 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">
-        <div className="text-2xl calculator-input-title">Model</div>
-        <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
-            </button>
-          </div>
-          <div>
-            {modelSelectionTab ? (
-              <>
-                <label htmlFor="model">Select a Model</label>
-                <select
-                  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')
-                      )
-                    );
-                  }}
+        {/* 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'>
+            <div className='text-2xl calculator-input-title'>Model</div>
+            <div className='calculator-input-content'>
+              <div className='mb-2'>
+                <button
+                  className={`${
+                    modelSelectionTab ? 'calculator-input-tab-active' : 'calculator-input-tab'
+                  }`}
+                  onClick={() => setModelSelectionTab(true)}
                 >
-                  <option value="">None selected</option>
-                  {MODELS.map((model) => (
-                    <option
-                      key={model.name}
-                      value={model.params}
-                      data-hiddenSize={model.hidden_size}
-                      data-numLayers={model.num_hidden_layers}
+                  Model Selection
+                </button>
+                <button
+                  className={`${
+                    modelSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'
+                  }`}
+                  onClick={() => setModelSelectionTab(false)}
+                >
+                  Custom Model
+                </button>
+              </div>
+              <div>
+                {modelSelectionTab ? (
+                  <>
+                    <label htmlFor='model'>Select a Model</label>
+                    <select
+                      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'),
+                          ),
+                        )
+                      }}
                     >
-                      {model.name}
-                    </option>
-                  ))}
-                </select>
-              </>
-            ) : (
-              <>
-                <label htmlFor="modelParams">Model Parameters (in billions)</label>
-                <input
-                  type="number"
-                  id="modelParams"
-                  className="calculator-input mb-2"
-                  placeholder="e.g. 7 (for LLaMA-7B)"
-                  value={modelParams || ''}
-                  min={0}
-                  onChange={(e) => setModelParams(Number(e.target.value))}
-                />
-                <label htmlFor="hiddenSize">Hidden Size</label>
-                <input
-                  type="number"
-                  id="hiddenSize"
-                  className="calculator-input mb-2"
-                  placeholder="e.g. 4096 (for LLaMA-7B)"
-                  value={hiddenSize || ''}
-                  min={1}
-                  onChange={(e) => setHiddenSize(Number(e.target.value))}
-                />
-                <label htmlFor="numLayers">Number of Layers</label>
-                <input
-                  type="number"
-                  id="numLayers"
-                  className="calculator-input"
-                  placeholder="e.g. 32 (for LLaMA-7B)"
-                  value={numLayers || ''}
-                  min={1}
-                  onChange={(e) => setNumLayers(Number(e.target.value))}
-                />
-              </>
-            )}
+                      <option value=''>None selected</option>
+                      {MODELS.map((model) => (
+                        <option
+                          key={model.name}
+                          value={model.params}
+                          data-hiddenSize={model.hidden_size}
+                          data-numLayers={model.num_hidden_layers}
+                        >
+                          {model.name}
+                        </option>
+                      ))}
+                    </select>
+                  </>
+                ) : (
+                  <>
+                    <label htmlFor='modelParams'>Model Parameters (in billions)</label>
+                    <input
+                      type='number'
+                      id='modelParams'
+                      className='calculator-input mb-2'
+                      placeholder='e.g. 7 (for LLaMA-7B)'
+                      value={modelParams || ''}
+                      min={0}
+                      onChange={(e) => setModelParams(Number(e.target.value))}
+                    />
+                    <label htmlFor='hiddenSize'>Hidden Size</label>
+                    <input
+                      type='number'
+                      id='hiddenSize'
+                      className='calculator-input mb-2'
+                      placeholder='e.g. 4096 (for LLaMA-7B)'
+                      value={hiddenSize || ''}
+                      min={1}
+                      onChange={(e) => setHiddenSize(Number(e.target.value))}
+                    />
+                    <label htmlFor='numLayers'>Number of Layers</label>
+                    <input
+                      type='number'
+                      id='numLayers'
+                      className='calculator-input'
+                      placeholder='e.g. 32 (for LLaMA-7B)'
+                      value={numLayers || ''}
+                      min={1}
+                      onChange={(e) => setNumLayers(Number(e.target.value))}
+                    />
+                  </>
+                )}
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      {/* Device Selection */}
-      <div className="calculator-input-box">
-        <div className="text-2xl calculator-input-title">Device</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
-            </button>
-          </div>
-          <div>
-            {deviceSelectionTab ? (
-              <>
-                <label htmlFor="device">Select a Device</label>
-                <select
-                  id="device"
-                  className="calculator-select"
-                  onChange={(e) => setDeviceMemory(Number(e.target.value))}
+          {/* Device Selection */}
+          <div className='calculator-input-box'>
+            <div className='text-2xl calculator-input-title'>Device</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)
+                  }}
                 >
-                  <option value="">None selected</option>
-                  {DEVICES.map((device) => (
-                    <option key={device.name} value={device.size}>
-                      {device.name}
-                    </option>
-                  ))}
-                </select>
-              </>
-            ) : (
-              <>
-                <label htmlFor="deviceMemory">Device RAM (in GB)</label>
-                <input
-                  type="number"
-                  id="deviceMemory"
-                  className="calculator-input"
-                  placeholder="e.g. 24"
-                  value={deviceMemory || ''}
-                  min={0}
-                  onChange={(e) => setDeviceMemory(Number(e.target.value))}
-                />
-              </>
-            )}
+                  Device Selection
+                </button>
+                <button
+                  className={`${
+                    deviceSelectionTab ? 'calculator-input-tab' : 'calculator-input-tab-active'
+                  }`}
+                  onClick={() => {
+                    setDeviceSelectionTab(false)
+                    setDeviceMemory(null)
+                  }}
+                >
+                  Custom Device
+                </button>
+              </div>
+              <div>
+                {deviceSelectionTab ? (
+                  <>
+                    <label htmlFor='device'>Select a Device</label>
+                    <select
+                      id='device'
+                      className='calculator-select'
+                      onChange={(e) => setDeviceMemory(Number(e.target.value))}
+                    >
+                      <option value=''>None selected</option>
+                      {DEVICES.map((device) => (
+                        <option key={device.name} value={device.size}>
+                          {device.name}
+                        </option>
+                      ))}
+                    </select>
+                  </>
+                ) : (
+                  <>
+                    <label htmlFor='deviceMemory'>Device RAM (in GB)</label>
+                    <input
+                      type='number'
+                      id='deviceMemory'
+                      className='calculator-input'
+                      placeholder='e.g. 24'
+                      value={deviceMemory || ''}
+                      min={0}
+                      onChange={(e) => setDeviceMemory(Number(e.target.value))}
+                    />
+                  </>
+                )}
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
 
-      <div className='calculator-box'>
-          <div className='text-2xl ml-5 mb-4'>Backend Precision Table</div>
-          <div className='ml-5 mb-4'>
-            <BackendPrecisionTable />
-          </div>
-          <div className='ml-5'>
-            This table shows the precision used by each Takeoff backend for CPUs and GPUs, as well
-            as their accuracy preservation.
+          <div className='calculator-box'>
+            <div className='text-2xl ml-5 mb-4'>Backend Precision Table</div>
+            <div className='ml-5 mb-4'>
+              <BackendPrecisionTable />
+            </div>
+            <div className='ml-5'>
+              This table shows the precision used by each Takeoff backend for CPUs and GPUs, as well
+              as their accuracy preservation.
+            </div>
           </div>
-        </div>
 
-        <div className='calculator-box'>
-          <div className='text-2xl ml-5 mb-4'>Input parameters</div>
-          <div className='ml-5 mb-4'>
-            <strong>Sequence Length</strong>: The combined length of input tokens and output tokens.
-            To restrict the maximum sequence length for inference on Takeoff, use the API parameters{' '}
-            <code>prompt_new_tokens</code> for input tokens and <code>max_new_tokens</code> for
-            output tokens when making a request.
-          </div>
-          <div className='ml-5'>
-            <strong>Batch Size</strong>: The number of sequences that can be processed in parallel.
-            To set a maximum batch size for inference on Takeoff, set the environment variable{' '}
-            <code>TAKEOFF_MAX_BATCH_SIZE</code> to your desired value.
+          <div className='calculator-box'>
+            <div className='text-2xl ml-5 mb-4'>Input parameters</div>
+            <div className='ml-5 mb-4'>
+              <strong>Sequence Length</strong>: The combined length of input tokens and output
+              tokens. To restrict the maximum sequence length for inference on Takeoff, use the API
+              parameters <code>prompt_new_tokens</code> for input tokens and{' '}
+              <code>max_new_tokens</code> for output tokens when making a request.
+            </div>
+            <div className='ml-5'>
+              <strong>Batch Size</strong>: The number of sequences that can be processed in
+              parallel. To set a maximum batch size for inference on Takeoff, set the environment
+              variable <code>TAKEOFF_MAX_BATCH_SIZE</code> to your desired value.
+            </div>
           </div>
         </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))}
+        {/* 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}
           />
-        </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
+        ) : (
+          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>
 
-              {/* 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
+              {/* 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>
-            </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'>
+                <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>
@@ -1411,17 +1425,14 @@ const Calculator = () => {
                         </>
                       ) : null}
                     </div>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </>
-      )
-    )}
-  </div>
-</div>
-
-
-
+            </>
+          )
+        )}
+      </div>
+    </div>
   )
 }