Hugging Face's logo

Spaces:
NeerajCodz
/
aiBatteryLifeCycle
Running

App Files Community
aiBatteryLifeCycle
File size: 3,755 Bytes
f381be8
 
 
 
 
 
 
1552b5a
f381be8
 
 
 
 
 
 
 
d3996f2
f381be8
d3996f2
f381be8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1552b5a
 
 
 
 
f381be8
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
 
import { useState } from "react";
import SimulationPanel from "./components/SimulationPanel";
import PredictionForm from "./components/PredictionForm";
import GraphPanel from "./components/GraphPanel";
import RecommendationPanel from "./components/RecommendationPanel";
import MetricsPanel from "./components/MetricsPanel";
import ResearchPaper from "./components/ResearchPaper";
import VersionSelector from "./components/VersionSelector";
import { ToastProvider } from "./components/Toast";
import { getApiVersion, setApiVersion } from "./api";
import { BatteryCharging } from "lucide-react";

type Tab = "simulation" | "predict" | "graphs" | "recommend" | "metrics" | "paper";

export default function App() {
  const [activeTab, setActiveTab] = useState<Tab>("simulation");
  const [apiVersion, setVersion] = useState<"v1" | "v2" | "v3">(getApiVersion());

  const handleVersionChange = (v: "v1" | "v2" | "v3") => {
    setApiVersion(v);
    setVersion(v);
  };

  const tabs: { key: Tab; label: string }[] = [
    { key: "simulation", label: "Simulation" },
    { key: "predict", label: "Predict" },
    { key: "graphs", label: "Analytics" },
    { key: "recommend", label: "Recommendations" },
    { key: "metrics", label: "Metrics" },
    { key: "paper", label: "Research Paper" },
  ];

  return (
    <ToastProvider>
    <div className="min-h-screen bg-gray-950 text-white">
      {/* Header */}
      <header className="border-b border-gray-800 bg-gray-900/80 backdrop-blur-sm sticky top-0 z-50">
        <div className="max-w-7xl mx-auto px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div className="w-8 h-8 rounded bg-green-500/20 flex items-center justify-center">
              <BatteryCharging className="w-5 h-5 text-green-400" />
            </div>
            <h1 className="text-lg font-bold">AI Battery Lifecycle Predictor</h1>
          </div>
          <div className="flex items-center gap-4">
            {/* Version selector with submenu */}
            <VersionSelector
              activeVersion={apiVersion}
              onSwitch={handleVersionChange}
            />
            <nav className="flex gap-1">
            {tabs.map((t) => (
              <button
                key={t.key}
                onClick={() => setActiveTab(t.key)}
                className={`px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
                  activeTab === t.key
                    ? "bg-green-600 text-white"
                    : "text-gray-400 hover:text-white hover:bg-gray-800"
                }`}
              >
                {t.label}
              </button>
            ))}
            </nav>
          </div>
        </div>
      </header>

      {/* Content */}
      <main className="max-w-7xl mx-auto px-4 py-6">
        {activeTab === "simulation" && <SimulationPanel />}
        {activeTab === "predict" && <PredictionForm />}
        {activeTab === "graphs" && <GraphPanel />}
        {activeTab === "recommend" && <RecommendationPanel />}
        {activeTab === "metrics" && <MetricsPanel />}
        {activeTab === "paper" && <ResearchPaper />}
      </main>

      {/* Footer */}
      <footer className="border-t border-gray-800 py-4 mt-8">
        <div className="max-w-7xl mx-auto px-4 text-center text-sm text-gray-500">
          NASA PCoE Li-ion Battery Dataset &middot; IEEE Research-Grade Analysis &middot;{" "}
          <a href="/gradio" className="text-green-400 hover:underline">
            Gradio UI
          </a>{" "}
          &middot;{" "}
          <a href="/docs" className="text-green-400 hover:underline">
            API Docs
          </a>
        </div>
      </footer>
    </div>
    </ToastProvider>
  );
}