Merge pull request #52 from bliutech/newBranch

changes to UI

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

client/src/App.js

@@ -25,8 +25,8 @@ function App() {
             {auth ? null : <Route path="/login" element={<LoginPage />} />}
             {auth ? null : <Route path="/registration" element={<RegistrationPage />} />}
             {auth ? <Route path="/profile" element={<ProfilePage />} /> : null}
-            {auth ? <Route path="/dataset" element={<DatasetPage />} /> : null}
-            {auth ? <Route path="/datasets" element={<CreateDatasetPage />} /> : null}
+            {auth ? <Route path="/datasets" element={<DatasetPage />} /> : null}
+            {auth ? <Route path="/create" element={<CreateDatasetPage />} /> : null}
             {auth ? <Route path="/dashboard" element={<DashboardPage />} /> : null}
             {auth ? <Route path="/contribute" element={<Contribute />} /> : null}
             {auth ? <Route path="*" element={<Navigate to="/dashboard" />} /> : <Route path="*" element={<Navigate to="/login" />} />}

client/src/components/NavBar.jsx

@@ -36,8 +36,8 @@ function NavBar() {
         ) : null}
         {auth ? (
           <li>
-            <Link id={styles.navLink} to="/datasets">
-              Datasets
+            <Link id={styles.navLink} to="/create">
+              Create a Dataset
             </Link>
           </li>
         ) : null}

client/src/pages/CreateDatasetPage.jsx

@@ -7,8 +7,10 @@ import { getDataset, createDataset } from "../api/dataset";
 
 import { DataContext } from "../components/DataProvider";
 
+import styles from "../styles/pages/CreateDatasetPage.module.css";
+
 function CreateDatasetPage() {
-  document.title = "Create Dataset | SeBRUS";
+  document.title = "Create a Dataset | SeBRUS";
 
   const navigate = useNavigate();
 
@@ -77,20 +79,26 @@ function CreateDatasetPage() {
 
   return (
     <div className="page">
-      <h1>Create Dataset</h1>
-      <input
-        type="text"
-        placeholder="Name"
-        value={name}
-        onChange={(e) => setName(e.target.value)}
-      />
-      <input
-        type="text"
-        placeholder="Description"
-        value={description}
-        onChange={(e) => setDescription(e.target.value)}
-      />
-      <button onClick={() => handleClick()}>Create</button>
+      <div className={styles.create}>
+        <p className={styles.header}>Create Dataset</p>
+        <input
+          className={styles.box}
+          type="text"
+          placeholder="Name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+        <input
+          className={styles.box}
+          type="text"
+          placeholder="Description"
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+        />
+        <button className={styles.button} onClick={() => handleClick()}>
+          Create
+        </button>
+      </div>
     </div>
   );
 }

client/src/pages/DashboardPage.jsx

@@ -63,7 +63,7 @@ function DashboardPage() {
         let imageCount = await DatasetContract.methods.getImageCount().call();
 
         for (let j = 0; j < imageCount; j++) {
-          let imageAddress = await DatasetContract.methods.getImages(j).call();
+          let imageAddress = await DatasetContract.methods.getImage(j).call();
 
           let ImageContract = await new window.web3.eth.Contract(
             imageABI,
@@ -94,36 +94,18 @@ function DashboardPage() {
   return (
     <div className="page">
       <h1>Datasets</h1>
-      <ul>
-        {datasets.map((dataset) => {
+      <ul className={styles.list}>
+        {datasets.map((dataset, index) => {
           console.log(dataset);
           return (
-            <li key={dataset.name}>
-              <p>{dataset.name}</p>
-              <p>{dataset.description}</p>
+            <li className={styles.datasets} key={dataset.name}>
+              <p className={styles.name}>Dataset name: {dataset.name}</p>
+              <p className={styles.description}>
+                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>
           );
         })}

client/src/pages/DatasetPage.jsx

@@ -1,36 +1,151 @@
 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";
 
 import dog from "../assets/dog1.png";
 
 function DatasetPage() {
-  document.title = "Dataset | SeBRUS";
+  document.title = "Datasets | SeBRUS";
 
   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}

client/src/styles/pages/ContributePage.module.css

@@ -6,7 +6,7 @@
     width: 40vw;
     padding-bottom: 30px;
     overflow-x: visible;
-    overflow-y:auto;
+    overflow-y: auto;
 }
 
 .header {
@@ -15,31 +15,32 @@
 }
 
 .image {
-    width:90%;
+    width: 90%;
     object-fit: contain;
 }
 
 .file {
-  margin: 1rem auto;
-  display: block;
+    margin: 1rem auto;
+    display: block;
 }
 
 .label {
-  display: block;
-  margin: 2rem auto;
-  padding: 1rem;
-  border-radius: 1rem;
+    display: block;
+    margin: 2rem auto;
+    padding: 1rem;
+    border-radius: 1rem;
+    height: 5px;
 }
 
 .uploader {
-  font-family: Verdana, sans-serif;
-  border-radius: 30px;
-  border-color: black;
-  width: 300px;
-  height: 40px;
-  font-size: 12pt;
-  color: 282c34;
-  margin: 0 px;
-  bottom: 0px;
-  background-color: snow;
+    font-family: Verdana, sans-serif;
+    border-radius: 30px;
+    border-color: black;
+    width: 300px;
+    height: 40px;
+    font-size: 12pt;
+    color: 282c34;
+    margin: 0 px;
+    bottom: 0px;
+    background-color: snow;
 }