finished dataset and dashboard pages

bliutech · Jul 26, 2023 · be414d4 · be414d4
1 parent 66f1b7d
commit be414d4
Show file tree

Hide file tree

Showing 4 changed files with 143 additions and 62 deletions.
diff --git a/blockchain/generate_data.py b/blockchain/generate_data.py
@@ -40,7 +40,7 @@
 test_data = dataset.data
 
 for i, tensor in enumerate(test_data):
-    img = transforms.ToPILImage()(tensor)
+    img = transforms.ToPILImage()(test_data[1])
     base64_img = base64.b64encode(img.tobytes())
     img.save("data/" + str(i) + ".png")
     break
diff --git a/client/src/components/NavBar.jsx b/client/src/components/NavBar.jsx
@@ -34,13 +34,6 @@ function NavBar() {
             </Link>
           </li>
         ) : null}
-        {auth ? (
-          <li>
-            <Link id={styles.navLink} to="/datasets">
-              Datasets
-            </Link>
-          </li>
-        ) : null}
         {auth ? (
           <li>
             <Link id={styles.navLink} to="/create">

diff --git a/client/src/pages/DashboardPage.jsx b/client/src/pages/DashboardPage.jsx
@@ -95,7 +95,7 @@ function DashboardPage() {
     <div className="page">
       <h1>Datasets</h1>
       <ul className={styles.list}>
-        {datasets.map((dataset) => {
+        {datasets.map((dataset, index) => {
           console.log(dataset);
           return (
             <li className={styles.datasets} key={dataset.name}>
@@ -104,28 +104,8 @@ function DashboardPage() {
                 Description: {dataset.description}
               </p>
               <p>
-                <Link to={"/dataset?id=1"}>Link</Link>
+                <Link to={"/datasets?id=" + (index + 1).toString()}>Link</Link>
               </p>
-              <p>Images:</p>
-              <ul>
-                {dataset.images.map((image) => {
-                  console.log(image);
-                  return (
-                    <li key={String(Math.random())}>
-                      <p>{image.class}</p>
-                      <p>
-                        {image.value.substring(0, 22) ===
-                        "data:image/png;base64," ? (
-                          <img src={image.value} alt={image.class} />
-                        ) : (
-                          image.value
-                        )}
-                      </p>
-                      <p>{image.approved ? "Approved" : "Not Approved"}</p>
-                    </li>
-                  );
-                })}
-              </ul>
             </li>
           );
         })}

diff --git a/client/src/pages/DatasetPage.jsx b/client/src/pages/DatasetPage.jsx
@@ -1,7 +1,13 @@
 import { useEffect, useState } from "react";
+import web3 from "web3";
+
 // import { Grid } from "react-visual-grid";
 
 import { Image } from "../components/Image";
+import { getABI } from "../api/abi";
+import { getDataset } from "../api/dataset";
+
+import { DataContext } from "../components/DataProvider";
 
 import styles from "../styles/pages/DatasetPage.module.css";
 
@@ -12,25 +18,134 @@ function DatasetPage() {
 
   const [id, setId] = useState(null);
 
-  const [images, setImage] = useState([
-    { text: "../assets/dog1.png" },
-    { text: "../assets/dog2.png" },
-    { text: "../assets/dog3.png" },
-  ]);
-  //code the img retrieval
-  // add key
-
-  const addList = () => {
-    const newImage = { id: Math.random(), text: "New todo" };
-    setImage([images, newImage]);
-  };
+  const [dataImages, setDataImages] = useState([]);
+
+  const verifyImage = (index) => {
+    const load = async () => {
+      let datasetABI = await getABI("1");
+      let imageABI = await getABI("2");
+
+      if (datasetABI === null || imageABI === null) {
+        alert("Error loading dataset manager or dataset ABI.");
+        return;
+      }
+
+      window.web3 = new web3(window.ethereum);
+
+      const urlParams = new URLSearchParams(window.location.search);
+      let id = urlParams.get("id");
+      setId(id);
+
+      if (id === null) {
+        alert("ID not found.");
+        return;
+      }
+
+      let dataset = await getDataset(id);
+      if (dataset === null) {
+        alert("Dataset not found.");
+        return;
+      }
+
+      console.log(dataset);
+
+      let DatasetContract = new window.web3.eth.Contract(
+        datasetABI,
+        dataset[0].address,
+      );
+
+      let image = await DatasetContract.methods.getImage(index);
+      let address = await image.call();
+      let ImageContract = new window.web3.eth.Contract(imageABI, address);
+      await ImageContract.methods
+        .approve()
+        .send({ from: window.ethereum.selectedAddress });
+
+      let images = [];
+      let imageCount = await DatasetContract.methods.getImageCount().call();
+
+      for (let j = 0; j < imageCount; j++) {
+        let imageAddress = await DatasetContract.methods.getImage(j).call();
+
+        let ImageContract = await new window.web3.eth.Contract(
+          imageABI,
+          imageAddress,
+        );
+
+        let image = {
+          class: await ImageContract.methods.getClass().call(),
+          value: await ImageContract.methods.getValue().call(),
+          approved: await ImageContract.methods.getApproved().call(),
+        };
+
+        images.push(image);
+      }
+      setDataImages(images);
 
-  console.log(id);
+      alert("Image approved.");
+    };
+
+    load();
+  };
 
   useEffect(() => {
-    const urlParams = new URLSearchParams(window.location.search);
-    let id = urlParams.get("id");
-    setId(id);
+    const load = async () => {
+      let datasetABI = await getABI("1");
+      let imageABI = await getABI("2");
+
+      if (datasetABI === null || imageABI === null) {
+        alert("Error loading dataset manager or dataset ABI.");
+        return;
+      }
+
+      window.web3 = new web3(window.ethereum);
+
+      const urlParams = new URLSearchParams(window.location.search);
+      let id = urlParams.get("id");
+      setId(id);
+
+      if (id === null) {
+        alert("ID not found.");
+        return;
+      }
+
+      let dataset = await getDataset(id);
+      if (dataset === null) {
+        alert("Dataset not found.");
+        return;
+      }
+
+      console.log(dataset);
+
+      let images = [];
+
+      let DatasetContract = new window.web3.eth.Contract(
+        datasetABI,
+        dataset[0].address,
+      );
+
+      let imageCount = await DatasetContract.methods.getImageCount().call();
+
+      for (let j = 0; j < imageCount; j++) {
+        let imageAddress = await DatasetContract.methods.getImage(j).call();
+
+        let ImageContract = await new window.web3.eth.Contract(
+          imageABI,
+          imageAddress,
+        );
+
+        let image = {
+          class: await ImageContract.methods.getClass().call(),
+          value: await ImageContract.methods.getValue().call(),
+          approved: await ImageContract.methods.getApproved().call(),
+        };
+
+        images.push(image);
+      }
+      setDataImages(images);
+    };
+
+    load();
   }, []);
 
   if (id === null) {
@@ -45,24 +160,17 @@ function DatasetPage() {
     <div className="page">
       <div className={styles.data}>
         <ul>
-          {images.map((images, index) => (
-            <li key={index}>{images.text}</li>
+          {dataImages.map((image, index) => (
+            <li key={index}>
+              <p>{image.class}</p>
+              <img src={image.value} alt={image.class + index} />
+              <button onClick={() => verifyImage(index)}>
+                {image.approved ? "Approved" : "Not approved"}
+              </button>
+            </li>
           ))}
         </ul>
-        {/* <Grid
-        images={images}
-        width={900}
-        height={1200}
-        gridLayout="vertical"
-        theme={{
-          backgroundColor: "#000",
-          controlBgColor: "#303030",
-          controlBtnColor: "#595959",
-          controlsBackDropColor: "rgba(0, 0, 0, 0.95)",
-          thumbnailBgColor: "#202020",
-        }}
-      />; */}
-        <img height={300} width={300} src={dog} alt={"test img"} />
+
         <Image></Image>
         {/* {data && data.length>0 && data.map((item)=><p>{item.about}</p>)} */}
         {"ID:" + id}