diff --git a/src/app/layout.js b/src/app/layout.js index e0c3f84..6466713 100755 --- a/src/app/layout.js +++ b/src/app/layout.js @@ -22,7 +22,7 @@ export default function RootLayout({ children }) { return ( {children} diff --git a/src/app/mobilenet/layout.js b/src/app/mobilenet/layout.js new file mode 100644 index 0000000..a0bb1b0 --- /dev/null +++ b/src/app/mobilenet/layout.js @@ -0,0 +1,13 @@ +export const metadata = { + title: "Tensor Hub", + description: + "A central hub for AI-powered analysis using TensorFlow.js models", +}; + +export default function RootLayout({ children }) { + return ( + + {children} + + ); +} diff --git a/src/app/mobilenet/page.js b/src/app/mobilenet/page.js new file mode 100644 index 0000000..6f0809e --- /dev/null +++ b/src/app/mobilenet/page.js @@ -0,0 +1,213 @@ +"use client"; + +import { useState, useEffect, useMemo } from "react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Progress } from "@/components/ui/progress"; +import { Upload, Github } from "lucide-react"; +import { loadModel, loadImage } from "@/utils/imageProcessing"; +import Image from "next/image"; +import Header from "@/components/common/Header"; +import Footer from "@/components/common/Footer"; + +export default function MobileNet() { + const [model, setModel] = useState(null); + const [predictions, setPredictions] = useState([]); + const [isAnalyzing, setIsAnalyzing] = useState(false); + const [selectedFile, setSelectedFile] = useState(null); + const [imagePreview, setImagePreview] = useState(null); + const [error, setError] = useState(null); + + useEffect(() => { + const loadTensorFlowModel = async () => { + try { + const loadedModel = await loadModel(); + setModel(loadedModel); + } catch (error) { + console.error("Error loading the model:", error); + setError("Failed to load the model. Please try again later."); + } + }; + loadTensorFlowModel(); + }, []); + + const handleFileChange = (event) => { + const file = event.target.files[0]; + if (file) { + setSelectedFile(file); + + const reader = new FileReader(); + reader.onload = () => { + setImagePreview(reader.result); + }; + reader.readAsDataURL(file); + } + }; + + const handleAnalyzeClick = async () => { + if (!selectedFile) { + setError("Please upload an image file."); + return; + } + + if (!model) { + setError("The model is still loading. Please try again in a moment."); + return; + } + + setError(null); + setIsAnalyzing(true); + + try { + const image = await loadImage(selectedFile); + const predictions = await model.classify(image); + setPredictions(predictions); + } catch (err) { + console.error("Error analyzing the image:", err); + setError("An error occurred while analyzing the image."); + } finally { + setIsAnalyzing(false); + } + }; + + const downloadResults = useMemo(() => { + return () => { + const element = document.createElement("a"); + const file = new Blob( + [ + `Predictions: \n${predictions + .map( + (pred) => + `${pred.className}: ${(pred.probability * 100).toFixed(2)}%\n` + ) + .join("")}`, + ], + { + type: "text/plain", + } + ); + element.href = URL.createObjectURL(file); + element.download = "image-analysis-results.txt"; + document.body.appendChild(element); + element.click(); + }; + }, [predictions]); + + return ( +
+
{/* Use Header component here */} +
+ + + Analyze Your Image + + +
+
+ + +
+ + {imagePreview && ( +
+

Image Preview:

+ Preview +
+ )} + + {isAnalyzing && } + + {error &&

{error}

} + + {predictions.length > 0 && ( +
+

Results:

+
    + {predictions.map((pred, index) => ( +
  • +
    + {pred.className} + + (Learn More) + +
    + +
    + +
    + +
    + {(pred.probability * 100).toFixed(2)}% +
    +
    • + ))} +
+ + +
+ )} +
+ + +
+ +
+ ); +} diff --git a/src/app/page.js b/src/app/page.js index b082f9e..878e37d 100755 --- a/src/app/page.js +++ b/src/app/page.js @@ -1,222 +1,17 @@ "use client"; -import { useState, useEffect, useMemo } from "react"; -import { Button } from "@/components/ui/button"; -import { Input } from "@/components/ui/input"; -import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { Progress } from "@/components/ui/progress"; -import { Upload, Github } from "lucide-react"; -import { loadModel, loadImage } from "@/utils/imageProcessing"; -import Image from "next/image"; +import Header from "@/components/common/Header"; +import Footer from "@/components/common/Footer"; +import TensorFlowModels from "@/components/pages/home/TensorFlowModels"; export default function Component() { - const [model, setModel] = useState(null); - const [predictions, setPredictions] = useState([]); - const [isAnalyzing, setIsAnalyzing] = useState(false); - const [selectedFile, setSelectedFile] = useState(null); - const [imagePreview, setImagePreview] = useState(null); - const [error, setError] = useState(null); - - useEffect(() => { - const loadTensorFlowModel = async () => { - try { - const loadedModel = await loadModel(); - setModel(loadedModel); - } catch (error) { - console.error("Error loading the model:", error); - setError("Failed to load the model. Please try again later."); - } - }; - loadTensorFlowModel(); - }, []); - - const handleFileChange = (event) => { - const file = event.target.files[0]; - if (file) { - setSelectedFile(file); - - const reader = new FileReader(); - reader.onload = () => { - setImagePreview(reader.result); - }; - reader.readAsDataURL(file); - } - }; - - const handleAnalyzeClick = async () => { - if (!selectedFile) { - setError("Please upload an image file."); - return; - } - - if (!model) { - setError("The model is still loading. Please try again in a moment."); - return; - } - - setError(null); - setIsAnalyzing(true); - - try { - const image = await loadImage(selectedFile); - const predictions = await model.classify(image); - setPredictions(predictions); - } catch (err) { - console.error("Error analyzing the image:", err); - setError("An error occurred while analyzing the image."); - } finally { - setIsAnalyzing(false); - } - }; - - const downloadResults = useMemo(() => { - return () => { - const element = document.createElement("a"); - const file = new Blob( - [ - `Predictions: \n${predictions - .map( - (pred) => - `${pred.className}: ${(pred.probability * 100).toFixed(2)}%\n` - ) - .join("")}`, - ], - { - type: "text/plain", - } - ); - element.href = URL.createObjectURL(file); - element.download = "image-analysis-results.txt"; - document.body.appendChild(element); - element.click(); - }; - }, [predictions]); - return (
-
-
-

- Tensor Hub -

-

- A central hub for AI-powered analysis using TensorFlow.js models -

-
-
- -
- - - Analyze Your Image - - -
-
- - -
- - {imagePreview && ( -
-

Image Preview:

- Preview -
- )} - - {isAnalyzing && } - - {error &&

{error}

} - - {predictions.length > 0 && ( -
-

Results:

-
    - {predictions.map((pred, index) => ( -
  • -
    - {pred.className} - - (Learn More) - -
    - -
    - -
    - -
    - {(pred.probability * 100).toFixed(2)}% -
    -
    • - ))} -
- - -
- )} -
- - +
+
+
- -
-
-

- © 2024 Tensor Hub. Design & Developed By Nisal Renuja Palliyaguru. -

- -
-
+
); } diff --git a/src/components/common/Footer/index.js b/src/components/common/Footer/index.js new file mode 100644 index 0000000..8cb0ceb --- /dev/null +++ b/src/components/common/Footer/index.js @@ -0,0 +1,25 @@ +"use client"; + +import { Github } from "lucide-react"; + +export default function Footer() { + return ( + + ); +} diff --git a/src/components/common/Header/index.js b/src/components/common/Header/index.js new file mode 100644 index 0000000..24fadd2 --- /dev/null +++ b/src/components/common/Header/index.js @@ -0,0 +1,20 @@ +"use client"; + +import Link from "next/link"; + +export default function Header() { + return ( +
+
+ +

+ Tensor Hub +

+ +

+ A central hub for AI-powered analysis using TensorFlow.js models +

+
+
+ ); +} diff --git a/src/components/pages/home/TensorFlowModels.js b/src/components/pages/home/TensorFlowModels.js new file mode 100644 index 0000000..c0861b7 --- /dev/null +++ b/src/components/pages/home/TensorFlowModels.js @@ -0,0 +1,64 @@ +import { + Card, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Button } from "@/components/ui/button"; +import Link from "next/link"; +import { ArrowRight, Brain, Camera, Mic, FileText } from "lucide-react"; + +const models = [ + { + title: "MobileNet", + description: "Classify images into predefined categories", + icon: Camera, + link: "/mobilenet", + }, + { + title: "Natural Language Processing", + description: "Process and analyze human language", + icon: FileText, + link: "/models/nlp", + }, + { + title: "Speech Recognition", + description: "Convert spoken language into text", + icon: Mic, + link: "/models/speech-recognition", + }, + { + title: "Neural Network", + description: "Build and train custom neural networks", + icon: Brain, + link: "/models/neural-network", + }, +]; + +export default function TensorFlowModels() { + return ( +
+
+ {models.map((model, index) => ( + + +
+ +
+ {model.title} + {model.description} + + + + + + ))} +
+
+ ); +}