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;
 }