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={
<>