Spaces:
Sleeping
Sleeping
File size: 3,984 Bytes
743409d | 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 | import { useState, useEffect } from 'react';
import { UploadSection } from './components/UploadSection';
import { DashboardHeader } from './components/DashboardHeader';
import { AnalyzingAnimation } from './components/AnalyzingAnimation';
import { Footer } from './components/Footer';
import { AnalysisResults } from './components/AnalysisResults';
import { ModelExplorer } from './components/ModelExplorer';
import { MarketPrices } from './components/MarketPrices';
import { AnalysisData } from './types/analysis';
import { API_BASE_URL } from './config';
function App() {
const [activeTab, setActiveTab] = useState<'auditor' | 'market' | 'explorer'>('auditor');
const [isDarkMode, setIsDarkMode] = useState(true); // default to dark theme
const [analysisData, setAnalysisData] = useState<AnalysisData | null>(null);
const [isAnalyzing, setIsAnalyzing] = useState(false);
const [error, setError] = useState<string | null>(null);
// Sync dark mode class
useEffect(() => {
if (isDarkMode) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, [isDarkMode]);
const handleAnalyze = async (imageUrl: string) => {
setIsAnalyzing(true);
setError(null);
setAnalysisData(null);
try {
// Direct call to local Python AI endpoint
const response = await fetch(`${API_BASE_URL}/api/analyze`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ imageUrl })
});
if (!response.ok) {
throw new Error(`Server returned status: ${response.status}`);
}
const data = await response.json();
if (data.error) throw new Error(data.error);
setAnalysisData(data);
} catch (err: any) {
console.error(err);
setError(err.message || 'Failed to connect to Python backend.');
} finally {
setIsAnalyzing(false);
}
};
return (
<div className="min-h-screen bg-background text-foreground pb-12 font-sans flex flex-col justify-between transition-colors duration-300">
<div>
{/* Unified Dashboard Header with Tab Switcher & Theme Toggle */}
<DashboardHeader
activeTab={activeTab}
setActiveTab={(tab: any) => setActiveTab(tab)}
isDarkMode={isDarkMode}
setIsDarkMode={setIsDarkMode}
/>
<main className="container mx-auto px-6 py-8 max-w-7xl">
{activeTab === 'auditor' && (
<div className="space-y-8">
{/* Uploader Section */}
<UploadSection onAnalyze={handleAnalyze} isAnalyzing={isAnalyzing} />
{/* Error logs */}
{error && (
<div className="p-4 rounded-xl text-rose-500 bg-rose-500/10 border border-rose-500/25 text-xs font-semibold">
<strong>Audit Failed:</strong> {error}
</div>
)}
{/* AI Processing animation */}
{isAnalyzing && (
<div className="bg-card/40 backdrop-blur-md p-16 rounded-2xl border border-border flex flex-col items-center justify-center">
<AnalyzingAnimation />
<p className="text-muted-foreground mt-6 font-mono text-xs animate-pulse uppercase tracking-widest font-bold">
Running OCR Boundary & NLP Vector Models...
</p>
</div>
)}
{/* Audit Diagnostic Results */}
{analysisData && !isAnalyzing && (
<AnalysisResults data={analysisData} />
)}
</div>
)}
{activeTab === 'market' && (
<MarketPrices />
)}
{activeTab === 'explorer' && (
<ModelExplorer />
)}
</main>
</div>
<Footer />
</div>
);
}
export default App;
|