Update code.txt

code.txt

@@ -139,3 +139,85 @@ for i, label in enumerate(label_names):
     print(f"  Recall: {recall[i]:.4f}")
     print(f"  F1-Score: {f1_score[i]:.4f}")
     print()
+
+
+
+import React, { useState, useEffect } from "react";
+import * as tflite from "@tensorflow/tfjs-tflite";
+
+function ObjectDetector() {
+  const [model, setModel] = useState(null);
+  const [imageUrl, setImageUrl] = useState(null);
+  const [predictions, setPredictions] = useState([]);
+
+  // Load the TFLite model
+  useEffect(() => {
+    const loadModel = async () => {
+      const loadedModel = await tflite.loadTFLiteModel('/path_to_your_model.tflite');
+      setModel(loadedModel);
+    };
+
+    loadModel();
+  }, []);
+
+  // Handle image input change
+  const handleImageChange = (event) => {
+    const file = event.target.files[0];
+    if (file) {
+      setImageUrl(URL.createObjectURL(file));
+    }
+  };
+
+  // Run inference on the selected image
+  const runInference = async () => {
+    if (!model || !imageUrl) return;
+
+    const imageElement = document.getElementById("inputImage");
+
+    // Prepare the image
+    const input = tflite.toTensor(imageElement, [1, 224, 224, 3]);  // Resize and convert to tensor, adjust size as per your model
+    const output = await model.predict(input);  // Run inference
+
+    // Interpret the results
+    // This part depends on the output format of your TFLite model (e.g., bounding boxes, class labels)
+    setPredictions(output);  // Adjust this based on your model's output structure
+  };
+
+  return (
+    <div>
+      <h1>Object Detection with TFLite</h1>
+
+      {/* Input: Upload Image */}
+      <input type="file" accept="image/*" onChange={handleImageChange} />
+
+      {/* Display Selected Image */}
+      {imageUrl && (
+        <div>
+          <img id="inputImage" src={imageUrl} alt="Input" width="300px" />
+        </div>
+      )}
+
+      {/* Run Inference Button */}
+      <button onClick={runInference} disabled={!model}>
+        Run Inference
+      </button>
+
+      {/* Display Predictions */}
+      {predictions.length > 0 && (
+        <div>
+          <h2>Predictions:</h2>
+          <ul>
+            {predictions.map((pred, index) => (
+              <li key={index}>
+                {`Class: ${pred.class}, Confidence: ${pred.confidence}, Bounding Box: ${pred.bbox}`}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ObjectDetector;
+