Expose model parameters in Space UI

README.md

@@ -31,3 +31,10 @@ curl -X POST "http://localhost:7860/translate" \
   -H "Content-Type: application/json" \
   -d '{"text":"How are you?"}'
 ```
+
+Model parameter names, tensor shapes, and sizes are available in the Space UI
+with the **Model Parameters** button, or directly through:
+
+```bash
+curl "http://localhost:7860/model-parameters"
+```

app.py

@@ -4,7 +4,7 @@ from fastapi.responses import FileResponse
 from pydantic import BaseModel
 import os
 
-from inference import translate
+from inference import get_model_parameters, translate
 
 app = FastAPI(
     title="Transformer Translation API",
@@ -38,4 +38,8 @@ def translate_api(request: TranslationRequest):
     return {
         "input": request.text,
         "translation": translated_text
-    }
+    }
+
+@app.get("/model-parameters")
+def model_parameters_api():
+    return get_model_parameters()

inference.py

@@ -34,6 +34,15 @@ model.load_state_dict(
 
 model.eval()
 
+def get_model_parameters():
+    parameters = model.parameter_summary()
+    total_parameters = sum(item["num_parameters"] for item in parameters)
+
+    return {
+        "total_parameters": total_parameters,
+        "parameters": parameters,
+    }
+
 @torch.no_grad()
 def translate(sentence, max_new_tokens=32):
 
@@ -72,4 +81,10 @@ def translate(sentence, max_new_tokens=32):
 
 if __name__ == "__main__":
 
+    for item in get_model_parameters()["parameters"]:
+        print(
+            f'{item["name"]}: shape={item["shape"]}, '
+            f'parameters={item["num_parameters"]}'
+        )
+
     print(translate("How are you?"))

model.py

@@ -85,6 +85,19 @@ class Translation(nn.Module):
             parameters = (p for p in parameters if p.requires_grad)
         return sum(p.numel() for p in parameters)
 
+    def parameter_summary(self, only_trainable=False):
+        summary = []
+        for name, parameter in self.named_parameters():
+            if only_trainable and not parameter.requires_grad:
+                continue
+            summary.append({
+                "name": name,
+                "shape": list(parameter.shape),
+                "num_parameters": parameter.numel(),
+                "trainable": parameter.requires_grad,
+            })
+        return summary
+
     def forward(self, src, tgt, targets=None):
         B, T_src = src.shape
         src_tok_emb = self.transformer.token_embedding_encoder(src)

static/index.html

@@ -134,6 +134,17 @@
         background: #e0e0e0;
       }
 
+      .params-btn {
+        background: #333;
+        color: white;
+        flex: 1;
+        max-width: 240px;
+      }
+
+      .params-btn:hover:not(:disabled) {
+        background: #111;
+      }
+
       .status {
         text-align: center;
         margin-top: 20px;
@@ -165,6 +176,68 @@
         font-size: 0.95em;
       }
 
+      .parameters-panel {
+        display: none;
+        margin-top: 30px;
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        overflow: hidden;
+      }
+
+      .parameters-panel.visible {
+        display: block;
+      }
+
+      .parameters-header {
+        background: #f9f9f9;
+        border-bottom: 1px solid #e0e0e0;
+        color: #333;
+        padding: 15px;
+      }
+
+      .parameters-header h2 {
+        font-size: 1.2em;
+        margin-bottom: 6px;
+      }
+
+      .parameters-header p {
+        color: #666;
+        font-size: 0.95em;
+      }
+
+      .parameters-table-wrap {
+        max-height: 360px;
+        overflow: auto;
+      }
+
+      .parameters-table {
+        border-collapse: collapse;
+        color: #333;
+        font-size: 0.9em;
+        min-width: 720px;
+        width: 100%;
+      }
+
+      .parameters-table th,
+      .parameters-table td {
+        border-bottom: 1px solid #eee;
+        padding: 10px 12px;
+        text-align: left;
+      }
+
+      .parameters-table th {
+        background: white;
+        color: #555;
+        position: sticky;
+        top: 0;
+      }
+
+      .parameters-table code {
+        background: #f5f5f5;
+        border-radius: 4px;
+        padding: 2px 5px;
+      }
+
       @media (max-width: 768px) {
         .translator-box {
           grid-template-columns: 1fr;
@@ -227,10 +300,31 @@
       <div class="button-container">
         <button class="translate-btn" id="translateBtn">Translate</button>
         <button class="clear-btn" id="clearBtn">Clear</button>
+        <button class="params-btn" id="paramsBtn">Model Parameters</button>
       </div>
 
       <div class="status" id="status"></div>
 
+      <section class="parameters-panel" id="parametersPanel">
+        <div class="parameters-header">
+          <h2>Model Parameters</h2>
+          <p id="parametersSummary"></p>
+        </div>
+        <div class="parameters-table-wrap">
+          <table class="parameters-table">
+            <thead>
+              <tr>
+                <th>Name</th>
+                <th>Shape</th>
+                <th>Size</th>
+                <th>Trainable</th>
+              </tr>
+            </thead>
+            <tbody id="parametersBody"></tbody>
+          </table>
+        </div>
+      </section>
+
       <div class="info-box">
         ℹ️ Enter English text in the left box and click "Translate" to get the
         Hindi translation on the right side.
@@ -242,7 +336,12 @@
       const outputTextarea = document.getElementById("output");
       const translateBtn = document.getElementById("translateBtn");
       const clearBtn = document.getElementById("clearBtn");
+      const paramsBtn = document.getElementById("paramsBtn");
       const statusDiv = document.getElementById("status");
+      const parametersPanel = document.getElementById("parametersPanel");
+      const parametersSummary = document.getElementById("parametersSummary");
+      const parametersBody = document.getElementById("parametersBody");
+      let parametersLoaded = false;
 
       // Translate button click event
       translateBtn.addEventListener("click", async () => {
@@ -294,6 +393,55 @@
         statusDiv.className = "status";
       });
 
+      paramsBtn.addEventListener("click", async () => {
+        if (parametersPanel.classList.contains("visible")) {
+          parametersPanel.classList.remove("visible");
+          paramsBtn.textContent = "Model Parameters";
+          return;
+        }
+
+        parametersPanel.classList.add("visible");
+        paramsBtn.textContent = "Hide Parameters";
+
+        if (parametersLoaded) {
+          return;
+        }
+
+        paramsBtn.disabled = true;
+        parametersSummary.textContent = "Loading parameter details...";
+
+        try {
+          const response = await fetch("/model-parameters");
+
+          if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+          }
+
+          const data = await response.json();
+          parametersSummary.textContent =
+            `Total parameters: ${data.total_parameters.toLocaleString()} ` +
+            `across ${data.parameters.length} tensors`;
+          parametersBody.innerHTML = data.parameters
+            .map((item) => {
+              return `
+                <tr>
+                  <td><code>${item.name}</code></td>
+                  <td>[${item.shape.join(", ")}]</td>
+                  <td>${item.num_parameters.toLocaleString()}</td>
+                  <td>${item.trainable ? "Yes" : "No"}</td>
+                </tr>
+              `;
+            })
+            .join("");
+          parametersLoaded = true;
+        } catch (error) {
+          console.error("Error:", error);
+          parametersSummary.textContent = "Unable to load model parameters.";
+        } finally {
+          paramsBtn.disabled = false;
+        }
+      });
+
       // Allow Enter key to trigger translation (Ctrl+Enter or Cmd+Enter)
       inputTextarea.addEventListener("keydown", (e) => {
         if ((e.ctrlKey || e.metaKey) && e.key === "Enter") {