malavikapradeep2001 commited on
Commit
9eef730
·
1 Parent(s): 9b88237
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 { DownloadIcon, FileTextIcon, Loader2Icon } from "lucide-react";
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 Report..</p>
52
  </div>
53
  );
54
  }
@@ -70,14 +70,7 @@ export function ResultsPanel({ uploadedImage, result, loading }: ResultsPanelPro
70
  confidence,
71
  } = result;
72
 
73
- const handleDownload = () => {
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"