diff --git a/app/page.tsx b/app/page.tsx index 097992f..5b820cf 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -21,6 +21,7 @@ import { LoaderIcon } from "lucide-react"; fal.config({ proxyUrl: "/api/proxy" }); interface ModelResult { + model: string; image: string; inferenceTime: number; } @@ -66,6 +67,7 @@ export default function UpscalerBattleground() { if (result) { setFirstModelOutput({ + model: firstModel.model, image: result.image.url as string, inferenceTime, }); @@ -95,6 +97,7 @@ export default function UpscalerBattleground() { if (result) { setSecondModelOutput({ + model: secondModel.model, image: result.image.url as string, inferenceTime, }); diff --git a/components/compare-image-label.tsx b/components/compare-image-label.tsx index 9de637a..32a2444 100644 --- a/components/compare-image-label.tsx +++ b/components/compare-image-label.tsx @@ -3,6 +3,7 @@ import { LoaderIcon } from "lucide-react"; interface CompareImageLabelProps { modelData: any; + modelOutput: any; name: string; loading: boolean; position?: "left" | "right"; @@ -10,25 +11,35 @@ interface CompareImageLabelProps { const CompareImageLabel = ({ modelData, + modelOutput, name, loading, position = "left", -}: CompareImageLabelProps) => ( -
- {name} - {loading ? ( - - ) : ( - - {modelData ? formatTime(modelData.inferenceTime * 1000) : `n/a`} - - )} -
-); +}: CompareImageLabelProps) => { + const hasInferenceTime = + modelOutput?.model === modelData?.model && !!modelOutput?.inferenceTime; + + return ( +
+ {name} + {loading ? ( + + ) : ( + + {hasInferenceTime + ? formatTime(modelOutput.inferenceTime * 1000) + : `n/a`} + + )} +
+ ); +}; export default CompareImageLabel; diff --git a/components/model-compare.tsx b/components/model-compare.tsx index 3bf3cad..de9d663 100644 --- a/components/model-compare.tsx +++ b/components/model-compare.tsx @@ -29,6 +29,11 @@ const ModelCompare = ({ secondModelOutput, secondModelLoading, }: ModelCompareProps) => { + const hideFirstResult = + firstModelLoading || firstModelOutput?.model !== firstModel.model; + const hideSecondResult = + secondModelLoading || secondModelOutput?.model !== secondModel.model; + return (
@@ -41,7 +46,7 @@ const ModelCompare = ({ itemOne={ <> @@ -58,7 +64,7 @@ const ModelCompare = ({ itemTwo={ <> diff --git a/components/original-compare.tsx b/components/original-compare.tsx index 0003afe..3b1c7f5 100644 --- a/components/original-compare.tsx +++ b/components/original-compare.tsx @@ -29,6 +29,11 @@ const OriginalCompare = ({ secondModelOutput, secondModelLoading, }: OriginalCompareProps) => { + const hideFirstResult = + firstModelLoading || firstModelOutput?.model !== firstModel.model; + const hideSecondResult = + secondModelLoading || secondModelOutput?.model !== secondModel.model; + return (
@@ -53,7 +58,7 @@ const OriginalCompare = ({ itemTwo={ <> @@ -124,7 +130,7 @@ const OriginalCompare = ({ itemTwo={ <>