Hugging Face's logo

Spaces:
ManalifeAI
/
Pathora
Sleeping

App Files Community
Pathora
File size: 4,486 Bytes 
bf5da6b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6df1c09
bf5da6b
 
 
 
 
 
 
 
6df1c09
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf5da6b
 
 
6df1c09
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
bf5da6b
6df1c09
bf5da6b
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9eef730
bf5da6b
6df1c09
 
 
bf5da6b
 
 
 
 
 
 
 
 
 
 
 
 
6df1c09
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
 
import { useState, useEffect } from "react";
import axios from "axios";
import { Header } from "./components/Header";
import { Sidebar } from "./components/Sidebar";
import { UploadSection } from "./components/UploadSection";
import { ResultsPanel } from "./components/ResultsPanel";
import { Footer } from "./components/Footer";
import { ProgressBar } from "./components/progressbar";

export function App() {
const [selectedTest, setSelectedTest] = useState("cytology");
const [uploadedImage, setUploadedImage] = useState<string | null>(null);
const [selectedModel, setSelectedModel] = useState("");
const [apiResult, setApiResult] = useState<any>(null);
const [showResults, setShowResults] = useState(false);
const [currentStep, setCurrentStep] = useState(0);
const [loading, setLoading] = useState(false);

// Progress bar logic
useEffect(() => {
if (showResults) setCurrentStep(2);
else if (uploadedImage) setCurrentStep(1);
else setCurrentStep(0);
}, [uploadedImage, showResults]);

// Reset logic
useEffect(() => {
setCurrentStep(0);
setShowResults(false);
setUploadedImage(null);
setSelectedModel("");
setApiResult(null);
}, [selectedTest]);

  const handleAnalyze = async () => {
    console.log('Analyze button clicked', { uploadedImage, selectedModel });
    if (!uploadedImage || !selectedModel) {
      alert("Please select a model and upload an image first!");
      return;
    }

    setLoading(true);
    setShowResults(false);
    setApiResult(null);

    try {
      // Extract file extension from data URL or use .jpg default
      const extension = uploadedImage.startsWith('data:image/')
        ? uploadedImage.split(';')[0].split('/')[1]
        : 'jpg';
      
      // Create a more descriptive filename
      const filename = `analysis_input.${extension}`;
      
      let blob: Blob;
      if (uploadedImage.startsWith('data:')) {
        // Handle data URLs (from file upload)
        blob = await fetch(uploadedImage).then(r => r.blob());
      } else {
        // Handle sample images (relative URLs)
        blob = await fetch(uploadedImage)
          .then(r => r.blob())
          .catch(() => {
            // If fetch fails, try with base URL
            const baseURL = import.meta.env.MODE === "development"
              ? "http://127.0.0.1:5173"
              : window.location.origin;
            return fetch(`${baseURL}${uploadedImage}`).then(r => r.blob());
          });
      }

      const file = new File([blob], filename, { type: blob.type || `image/${extension}` });
      const formData = new FormData();
      formData.append("file", file);
      formData.append("model_name", selectedModel);

      console.log('Sending request:', {
        filename,
        type: file.type,
        size: file.size,
        model: selectedModel
      });

      const baseURL = import.meta.env.MODE === "development"
        ? "http://127.0.0.1:8000"
        : window.location.origin;

      const res = await axios.post(`${baseURL}/predict/`, formData, {
        headers: { "Content-Type": "multipart/form-data" },
      });

      if (res.data.error) {
        throw new Error(res.data.error);
      }

      console.log('Received response:', res.data);
      setApiResult(res.data);
      setShowResults(true);
    } catch (err: any) {
      console.error("❌ Error during inference:", err);
      const errorMessage = err.response?.data?.error || err.message || "Unknown error occurred";
      alert(`Error analyzing the image: ${errorMessage}`);
    } finally {
      setLoading(false);
    }
};

return ( <div className="flex flex-col min-h-screen w-full bg-gray-50"> <Header /> <ProgressBar currentStep={currentStep} />


  <div className="flex flex-1">
    <Sidebar selectedTest={selectedTest} onTestChange={setSelectedTest} />

    <main className="flex-1 p-6">
      <div className="max-w-7xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-6">
        <UploadSection
          selectedTest={selectedTest}
          uploadedImage={uploadedImage}
          setUploadedImage={setUploadedImage}
          selectedModel={selectedModel}
          setSelectedModel={setSelectedModel}
          onAnalyze={handleAnalyze}
        />

        {(showResults || loading) && (
          <ResultsPanel
            uploadedImage={
              apiResult?.annotated_image_url || uploadedImage
            }
            result={apiResult}
            loading={loading}
          />
        )}
      </div>
    </main>
  </div>

  <Footer />
</div>


);
}