Spaces:
Sleeping
Sleeping
Commit
·
9eef730
1
Parent(s):
9b88237
Update
Browse files
frontend/src/App.tsx
CHANGED
|
@@ -122,7 +122,7 @@ return ( <div className="flex flex-col min-h-screen w-full bg-gray-50"> <Header
|
|
| 122 |
onAnalyze={handleAnalyze}
|
| 123 |
/>
|
| 124 |
|
| 125 |
-
{showResults && (
|
| 126 |
<ResultsPanel
|
| 127 |
uploadedImage={
|
| 128 |
apiResult?.annotated_image_url || uploadedImage
|
|
|
|
| 122 |
onAnalyze={handleAnalyze}
|
| 123 |
/>
|
| 124 |
|
| 125 |
+
{(showResults || loading) && (
|
| 126 |
<ResultsPanel
|
| 127 |
uploadedImage={
|
| 128 |
apiResult?.annotated_image_url || uploadedImage
|
frontend/src/components/ResultsPanel.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
import { useState } from "react";
|
| 2 |
-
import {
|
| 3 |
import { ImageWithFallback } from "./ImageWithFallback";
|
| 4 |
import { ReportModal } from "./ReportModal";
|
| 5 |
import axios from "axios";
|
|
@@ -48,7 +48,7 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
|
|
| 48 |
return (
|
| 49 |
<div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center justify-center">
|
| 50 |
<Loader2Icon className="w-10 h-10 text-blue-600 animate-spin mb-3" />
|
| 51 |
-
<p className="text-teal-700 font-medium">Analysing
|
| 52 |
</div>
|
| 53 |
);
|
| 54 |
}
|
|
@@ -70,14 +70,7 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
|
|
| 70 |
confidence,
|
| 71 |
} = result;
|
| 72 |
|
| 73 |
-
|
| 74 |
-
if (annotated_image_url) {
|
| 75 |
-
const link = document.createElement("a");
|
| 76 |
-
link.href = annotated_image_url;
|
| 77 |
-
link.download = "analysis_result.jpg";
|
| 78 |
-
link.click();
|
| 79 |
-
}
|
| 80 |
-
};
|
| 81 |
|
| 82 |
return ( <div className="bg-white rounded-lg shadow-sm p-6">
|
| 83 |
{/* Header */}
|
|
@@ -90,15 +83,6 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
|
|
| 90 |
</div>
|
| 91 |
|
| 92 |
<div className="flex items-center gap-3">
|
| 93 |
-
{annotated_image_url && (
|
| 94 |
-
<button
|
| 95 |
-
onClick={handleDownload}
|
| 96 |
-
className="flex items-center gap-2 bg-gradient-to-r from-teal-700 via-teal-600 to-teal-700 text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all"
|
| 97 |
-
>
|
| 98 |
-
<DownloadIcon className="w-4 h-4" />
|
| 99 |
-
Download Image
|
| 100 |
-
</button>
|
| 101 |
-
)}
|
| 102 |
<button
|
| 103 |
onClick={() => setShowReportModal(true)}
|
| 104 |
className="flex items-center gap-2 bg-gradient-to-r from-teal-700 via-teal-600 to-teal-700 text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all"
|
|
|
|
| 1 |
import { useState } from "react";
|
| 2 |
+
import { FileTextIcon, Loader2Icon } from "lucide-react";
|
| 3 |
import { ImageWithFallback } from "./ImageWithFallback";
|
| 4 |
import { ReportModal } from "./ReportModal";
|
| 5 |
import axios from "axios";
|
|
|
|
| 48 |
return (
|
| 49 |
<div className="bg-white rounded-lg shadow-sm p-6 flex flex-col items-center justify-center">
|
| 50 |
<Loader2Icon className="w-10 h-10 text-blue-600 animate-spin mb-3" />
|
| 51 |
+
<p className="text-teal-700 font-medium">Analysing Image...</p>
|
| 52 |
</div>
|
| 53 |
);
|
| 54 |
}
|
|
|
|
| 70 |
confidence,
|
| 71 |
} = result;
|
| 72 |
|
| 73 |
+
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 74 |
|
| 75 |
return ( <div className="bg-white rounded-lg shadow-sm p-6">
|
| 76 |
{/* Header */}
|
|
|
|
| 83 |
</div>
|
| 84 |
|
| 85 |
<div className="flex items-center gap-3">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 86 |
<button
|
| 87 |
onClick={() => setShowReportModal(true)}
|
| 88 |
className="flex items-center gap-2 bg-gradient-to-r from-teal-700 via-teal-600 to-teal-700 text-white px-4 py-2 rounded-lg hover:opacity-90 transition-all"
|