feat(models): support PyTorch and ONNX metadata badges in ModelMetadata

frontend/src/components/__tests__/models/ModelMetadata.spec.js

@@ -0,0 +1,88 @@
+import { describe, it, expect, vi } from "vitest";
+import { mount } from "@vue/test-utils";
+import ModelMetadata from "../../models/ModelMetadata.vue";
+
+vi.mock("vue-i18n", () => ({
+  useI18n: () => ({
+    t: (key) => key,
+  }),
+}));
+
+const createWrapper = (props = {}) => {
+  return mount(ModelMetadata, {
+    props: {
+      framework: "Safetensors",
+      data: {
+        model_params: "7",
+        tensor_type: "BF16",
+        architecture: "LlamaForCausalLM",
+      },
+      namespacePath: "test/model",
+      currentBranch: "main",
+      ...props,
+    },
+    global: {
+      stubs: {
+        SvgIcon: true,
+      },
+    },
+  });
+};
+
+describe("ModelMetadata.vue", () => {
+  it("renders correctly for Safetensors framework", () => {
+    const wrapper = createWrapper({
+      framework: "Safetensors",
+      data: {
+        model_params: "7",
+        tensor_type: "BF16",
+      },
+    });
+
+    expect(wrapper.text()).toContain("Safetensors");
+    expect(wrapper.text()).toContain("7B params");
+    expect(wrapper.text()).toContain("BF16");
+  });
+
+  it("renders correctly for GGUF framework", () => {
+    const wrapper = createWrapper({
+      framework: "GGUF",
+      data: {
+        model_params: "14",
+        architecture: "LlamaForCausalLM",
+      },
+    });
+
+    expect(wrapper.text()).toContain("GGUF");
+    expect(wrapper.text()).toContain("14B params");
+    expect(wrapper.text()).toContain("LlamaForCausalLM");
+  });
+
+  it("renders correctly for PyTorch framework", () => {
+    const wrapper = createWrapper({
+      framework: "PyTorch",
+      data: {
+        model_params: "7",
+        architecture: "BertForMaskedLM",
+      },
+    });
+
+    expect(wrapper.text()).toContain("PyTorch");
+    expect(wrapper.text()).toContain("7B params");
+    expect(wrapper.text()).toContain("BertForMaskedLM");
+  });
+
+  it("renders correctly for ONNX framework", () => {
+    const wrapper = createWrapper({
+      framework: "ONNX",
+      data: {
+        model_params: "3",
+        architecture: "ResNetForImageClassification",
+      },
+    });
+
+    expect(wrapper.text()).toContain("ONNX");
+    expect(wrapper.text()).toContain("3B params");
+    expect(wrapper.text()).toContain("ResNetForImageClassification");
+  });
+});

frontend/src/components/models/ModelMetadata.vue

@@ -40,6 +40,22 @@
         :value="data.tensor_type"
       />
     </div>
+    <div
+      v-if="framework === 'PyTorch' || framework === 'ONNX'"
+      class="flex items-center gap-2 mt-4"
+    >
+      <MetaItem
+        v-if="data.model_params"
+        :title="$t('models.metadata.modelSize')"
+        :value="data.model_params"
+        :params="true"
+      />
+      <MetaItem
+        v-if="data.architecture"
+        :title="$t('models.metadata.architecture')"
+        :value="data.architecture"
+      />
+    </div>
     <div
       v-if="
         framework === 'GGUF' &&