From bf0f8ee3b22b84cee42d6e90b3d55f12fca86b6c Mon Sep 17 00:00:00 2001
From: Tanish Manku <tanish2k09.dev@gmail.com>
Date: Tue, 5 May 2026 13:07:10 -0700
Subject: [PATCH] artcraft: port website Generation Details to lightbox-modal

Add Aspect Ratio, Resolution, Duration, Audio, Size, and Created rows to the
desktop app's lightbox so it matches the website's Information panel. Promote
the website's local format helpers into @storyteller/model-list so both
clients can share them.
---
 frontend/libs/model-list/src/index.ts         |  1 +
 .../lib/classes/metadata/PromptFormatters.ts  | 39 +++++++++++++++++++
 2 files changed, 40 insertions(+)
 create mode 100644 frontend/libs/model-list/src/lib/classes/metadata/PromptFormatters.ts

diff --git a/frontend/libs/model-list/src/index.ts b/frontend/libs/model-list/src/index.ts
index 3113a4a6ed..482689b022 100644
--- a/frontend/libs/model-list/src/index.ts
+++ b/frontend/libs/model-list/src/index.ts
@@ -7,6 +7,7 @@ export * from "./lib/classes/properties/CommonQuality.js";
 export * from "./lib/classes/metadata/ModelCreator.js";
 export * from "./lib/classes/metadata/ModelCreatorIcons.js";
 export * from "./lib/classes/metadata/ModelMapping.js";
+export * from "./lib/classes/metadata/PromptFormatters.js";
 export * from "./lib/classes/metadata/ModelTag.js";
 export * from "./lib/classes/metadata/SizeOption.js";
 export * from "./lib/legacy/ModelConfig.js";
diff --git a/frontend/libs/model-list/src/lib/classes/metadata/PromptFormatters.ts b/frontend/libs/model-list/src/lib/classes/metadata/PromptFormatters.ts
new file mode 100644
index 0000000000..f55710e503
--- /dev/null
+++ b/frontend/libs/model-list/src/lib/classes/metadata/PromptFormatters.ts
@@ -0,0 +1,39 @@
+const ASPECT_RATIO_LABELS: Record<string, string> = {
+  auto: "Auto",
+  square: "Square",
+  square_hd: "Square (HD)",
+  wide: "Wide",
+  tall: "Tall",
+  wide_three_by_two: "3:2",
+  wide_four_by_three: "4:3",
+  wide_five_by_four: "5:4",
+  wide_sixteen_by_nine: "16:9",
+  wide_twenty_one_by_nine: "21:9",
+  tall_two_by_three: "2:3",
+  tall_three_by_four: "3:4",
+  tall_four_by_five: "4:5",
+  tall_nine_by_sixteen: "9:16",
+  tall_nine_by_twenty_one: "9:21",
+  auto_2k: "Auto (2K)",
+  auto_3k: "Auto (3K)",
+  auto_4k: "Auto (4K)",
+};
+
+const RESOLUTION_LABELS: Record<string, string> = {
+  half_k: "0.5K",
+  one_k: "1K",
+  two_k: "2K",
+  three_k: "3K",
+  four_k: "4K",
+  four_eighty_p: "480p",
+  seven_twenty_p: "720p",
+  ten_eighty_p: "1080p",
+};
+
+export const formatAspectRatio = (value: string): string =>
+  ASPECT_RATIO_LABELS[value] ?? value;
+
+export const formatResolution = (value: string): string =>
+  RESOLUTION_LABELS[value] ?? value;
+
+export const formatDuration = (seconds: number): string => `${seconds}s`;