Skip to content

Commit 1daab77

Browse files
shollingsworthfeydandependabot[bot]Zesky665
authored
Added Schema files to download zip (#174)
* Adding a link to Running-man-01/trashai_nbs project * Bump vm2 from 3.9.17 to 3.9.19 in /infra (#162) Bumps [vm2](https://github.com/patriksimek/vm2) from 3.9.17 to 3.9.19. - [Release notes](https://github.com/patriksimek/vm2/releases) - [Changelog](https://github.com/patriksimek/vm2/blob/master/CHANGELOG.md) - [Commits](patriksimek/vm2@3.9.17...3.9.19) --- updated-dependencies: - dependency-name: vm2 dependency-type: indirect ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump vite from 3.2.5 to 3.2.7 in /infra (#165) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 3.2.5 to 3.2.7. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v3.2.7/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v3.2.7/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * Bump vite from 3.0.4 to 3.2.7 in /frontend (#164) Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 3.0.4 to 3.2.7. - [Release notes](https://github.com/vitejs/vite/releases) - [Changelog](https://github.com/vitejs/vite/blob/v3.2.7/packages/vite/CHANGELOG.md) - [Commits](https://github.com/vitejs/vite/commits/v3.2.7/packages/vite) --- updated-dependencies: - dependency-name: vite dependency-type: direct:development ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fixing build and fixing local (#170) * Add testing instructions and auto tests (#171) * Adding a link to Running-man-01/trashai_nbs project (#168) * update frontend app doc * Add manual instructions. * Added test-ids * Add test-ids to the navigation tabs * Add smoke test draft * Add placeholder file * Add photos for manual testing instructions * Upgrade node version * Remove cypress * Add test ids to summary page * Jest + Puppeteer setup * Add smoke test * Added back manual instructions * Add images for manual instructions * Add instruction for running auto tests --------- Co-authored-by: Dan Fey <[email protected]> * Adding schema files to download (#173) * adding schema files to the zip download * revert yarn change * fixing list * indentation --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Dan Fey <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Zesky665 <[email protected]>
1 parent b6c774a commit 1daab77

29 files changed

+546
-53
lines changed

.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,4 @@ delete.bat
2929
model/build/Mask*
3030
model/build/taco*
3131
tags
32+
frontend/yarn.lock

frontend/Dockerfile

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
# Dockerfile for trash-ai frontend
22

33
# Stage 1: Build the project
4-
FROM node:16.12.0 as builder
4+
FROM node:16.20.0 as builder
55

66
# Set the working directory
77
WORKDIR /app

frontend/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -20,5 +20,10 @@ yarn build
2020
yarn lint
2121
```
2222

23+
### Run Cypress Tests
24+
```
25+
yarn run cypress open
26+
```
27+
2328
### Customize configuration
2429
See [Configuration Reference](https://cli.vuejs.org/config/).

frontend/__tests__/README.md

+62
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Tests and Verifications
2+
3+
## Automatic Tests
4+
5+
### Scenarios
6+
1. Does the landing pag load?
7+
2. On hitting show samples, does processing complete in an expected amount of time? Does it show all the results expected?
8+
3. After recieving results, can you click an image and does the page show the expected data/metadata/etc?
9+
4. After recieving results, does the summary page contain the correct data?
10+
11+
## How to run
12+
13+
1. Navigate to `frontend/`
14+
2. Run `yarn install`
15+
2. Spin up docker container
16+
`docker-compose up`
17+
3. Run the auto tests
18+
`yarn run jest`
19+
20+
## Manual Tests
21+
22+
1. Does the landing pag load?
23+
24+
When you open the landing page. Either at https://www.trashai.org/ or http://localhost:5150
25+
26+
The page should loads in a reasonable timeframe. (<2 seconds)
27+
28+
*You can use the `Network` tab in the dev tools for more fine grained analysis.*
29+
30+
2. On hitting show samples, does processing complete in an expected amount of time? Does it show all the results expected?
31+
32+
When the show samples button is pressed. (as depicted below)
33+
![Instructions](misc/Show_Samples_Button.png "Show Title Button")
34+
35+
Then the app will start processing images. (as depcited below)
36+
![Processing](misc/Processing_Samples.png "Processing Samples Progress Bar")
37+
38+
*The processing should be relatively quick, it it takes more than a minute, something is definetly wrong.*
39+
40+
When the processing is done, the results will be available in the summary page.
41+
42+
![Summary ](misc/Summary_Of_Samples.png "Summary of Sample Results")
43+
44+
It should be populated like above.
45+
46+
3. After recieving results, can you click an image and does the page show the expected data/metadata/etc?
47+
48+
When one of the links in the summary table is clicked.
49+
50+
![Open images](misc/Open_images.png "Open Images")
51+
52+
Then the images will be displayed along with the segmentation and classes detected.
53+
54+
![List Images](misc/Images_with_Segmentation.png "List Images")
55+
56+
When the METADATA tab is opened, the relevant metadata for the image is displayed.
57+
58+
![View Metadata](misc/Viewing_Metadata.png "View Metadata")
59+
60+
4. After recieving results, does the summary page contain the correct data?
61+
62+
*The summary page shows the results of processing a random sample of images, as long as it's not empty it can be considered as correct.*
Loading
226 KB
Loading
414 KB
Loading

frontend/__tests__/misc/README.md

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
*placeholder*
Loading
228 KB
Loading
497 KB
Loading

frontend/__tests__/smokeTest.js

+110
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
/* eslint-disable no-undef */
2+
const timeout = 12000
3+
const url = 'http://localhost:5150/'
4+
5+
describe(
6+
'Smoke test for Trash-AI',
7+
() => {
8+
let page
9+
beforeAll(async () => {
10+
page = await global.__BROWSER__.newPage()
11+
await page.setViewport({
12+
width: 1536,
13+
height: 960,
14+
})
15+
await page.goto(url)
16+
}, timeout)
17+
18+
afterAll(async () => {
19+
await page.close()
20+
})
21+
22+
it('should load without error', async () => {
23+
const text = await page.evaluate(() => document.body.textContent)
24+
expect(text).toContain('Trash AI')
25+
})
26+
27+
it(
28+
'should show samples when prompted',
29+
async () => {
30+
// Open actions menu
31+
const openActionsBtn = await page.waitForSelector(
32+
'#actions-button-test-id',
33+
)
34+
await openActionsBtn.click()
35+
await page.waitForTimeout(1000)
36+
37+
// Click Show Samples
38+
const showSamplesBtn = await page.waitForSelector(
39+
'#show-samples-test-id',
40+
)
41+
await showSamplesBtn.click()
42+
await page.waitForTimeout(2000)
43+
44+
// Navigate to Summary page
45+
const summaryBtn = await page.waitForSelector(
46+
'#summary-tab-test-id',
47+
)
48+
await summaryBtn.click()
49+
await page.waitForTimeout(500)
50+
51+
// Check if navigations was successful
52+
current_url = await page.url()
53+
expect(current_url).toBe(`${url}summary/detections`)
54+
55+
// Check if results are displayed
56+
const drinkCanImg = await page.waitForSelector(
57+
'a[href="/detection/Drink%20can"]',
58+
)
59+
await drinkCanImg.click()
60+
await page.waitForTimeout(500)
61+
62+
// Check if navigation happened
63+
current_url = await page.url()
64+
expect(current_url).toBe(`${url}detection/Drink%20can`)
65+
66+
// Navigate to image view page
67+
const sampleImg = await page.waitForSelector(
68+
'div[id="sample01.jpg-test-id"]',
69+
)
70+
await sampleImg.click()
71+
await page.waitForTimeout(500)
72+
73+
// Check if navigation happened
74+
current_url = await page.url()
75+
expect(current_url).toBe(`${url}image/0/image`)
76+
77+
// Check if the image is loaded
78+
const canvasImg = await page.waitForSelector('#canvasparent')
79+
80+
// Check of the images classes are loaded
81+
const drinkCanClass = await page.waitForSelector(
82+
'a[href="/detection/Drink%20can"]',
83+
)
84+
85+
const paperCupClass = await page.waitForSelector(
86+
'a[href="/detection/Paper%20cup"]',
87+
)
88+
89+
// Check of the image and metadata tabs are loaded
90+
const imageTab = await page.waitForSelector(
91+
'#image-tab-test-id',
92+
)
93+
94+
const metadataTab = await page.waitForSelector(
95+
'#meta-tab-test-id',
96+
)
97+
metadataTab.click()
98+
await page.waitForTimeout(500)
99+
100+
// Check is exif data is displayed
101+
const exifData = await page.waitForSelector('#exifData-test-id')
102+
// Check if metadata is displayed
103+
const metaData = await page.waitForSelector('#metaData-test-id')
104+
await page.waitForTimeout(500)
105+
},
106+
timeout,
107+
)
108+
},
109+
timeout,
110+
)

frontend/cypress.config.ts

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { defineConfig } from "cypress";
2+
3+
export default defineConfig({
4+
e2e: {
5+
baseUrl: "https://www.trashai.org/",
6+
pageLoadTimeout: 3000
7+
},
8+
});

frontend/jest.config.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
module.exports = {
2+
globalSetup: './setup.js',
3+
globalTeardown: './teardown.js',
4+
testEnvironment: './puppeteer_environment.js',
5+
}

frontend/package.json

+6-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@
66
"serve": "vite preview",
77
"build": "vite build",
88
"lint": "vue-cli-service lint",
9-
"dev": "vite"
9+
"dev": "vite",
10+
"test": "jest"
1011
},
1112
"dependencies": {
1213
"@fawmi/vue-google-maps": "^0.9.72",
@@ -23,11 +24,14 @@
2324
"dexie": "^3.2.2",
2425
"file-saver": "^2.0.5",
2526
"fuse.js": "^6.6.2",
27+
"jest": "^29.5.0",
2628
"jszip": "^3.10.0",
2729
"loglevel": "^1.8.0",
2830
"p-queue": "^7.3.0",
2931
"pinia": "^2.0.17",
3032
"pinia-plugin-persistedstate": "^1.6.3",
33+
"puppeteer": "^20.7.1",
34+
"rimraf": "^5.0.1",
3135
"roboto-fontface": "^0.10.0",
3236
"rxjs": "^7.5.7",
3337
"ts-exif-parser": "^0.2.2",
@@ -56,6 +60,7 @@
5660
"eslint-config-prettier": "^8.5.0",
5761
"eslint-plugin-prettier": "^4.2.1",
5862
"eslint-plugin-vue": "^9.2.0",
63+
"jest-puppeteer": "^9.0.0",
5964
"prettier": "^2.7.1",
6065
"sass": "^1.53.0",
6166
"typescript": "^4.7.4",
+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
{
2+
"$schema": "http://json-schema.org/draft-07/schema#",
3+
"type": "object",
4+
"properties": {
5+
"hash": { "type": "string" },
6+
"filename": { "type": "string" },
7+
"exifdata": {
8+
"type": "object",
9+
"properties": {
10+
"Make": { "type": "string" },
11+
"Model": { "type": "string" },
12+
"DateTimeOriginal": { "type": "integer" },
13+
"ModifyDate": { "type": "integer" },
14+
"CreateDate": { "type": "integer" },
15+
"GPSLatitudeRef": { "type": "string" },
16+
"GPSLatitude": { "type": "number" },
17+
"GPSLongitudeRef": { "type": "string" },
18+
"GPSLongitude": { "type": "number" },
19+
"GPSAltitudeRef": { "type": "integer" },
20+
"GPSAltitude": { "type": "number" },
21+
"GPSTimeStamp": {
22+
"type": "array",
23+
"items": { "type": "integer" }
24+
},
25+
"GPSDateStamp": { "type": "string" },
26+
"ExifImageWidth": { "type": "integer" },
27+
"ExifImageHeight": { "type": "integer" }
28+
},
29+
"required": [
30+
"Make",
31+
"Model",
32+
"DateTimeOriginal",
33+
"ModifyDate",
34+
"CreateDate",
35+
"GPSLatitudeRef",
36+
"GPSLatitude",
37+
"GPSLongitudeRef",
38+
"GPSLongitude",
39+
"GPSAltitudeRef",
40+
"GPSAltitude",
41+
"GPSTimeStamp",
42+
"GPSDateStamp",
43+
"ExifImageWidth",
44+
"ExifImageHeight"
45+
]
46+
},
47+
"metadata": {
48+
"type": "array",
49+
"items": {
50+
"type": "object",
51+
"properties": {
52+
"score": { "type": "string" },
53+
"correction": { "type": "string" },
54+
"remove": { "type": "boolean" },
55+
"is_tf": { "type": "boolean" },
56+
"id": { "type": "string" },
57+
"label": { "type": "string" },
58+
"area": {
59+
"type": "object",
60+
"properties": {
61+
"x1": { "type": "number" },
62+
"y1": { "type": "number" },
63+
"x2": { "type": "number" },
64+
"y2": { "type": "number" }
65+
},
66+
"required": ["x1", "y1", "x2", "y2"]
67+
}
68+
},
69+
"required": [
70+
"score",
71+
"correction",
72+
"remove",
73+
"is_tf",
74+
"id",
75+
"label",
76+
"area"
77+
]
78+
}
79+
}
80+
},
81+
"required": ["hash", "filename", "exifdata", "metadata"]
82+
}
+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
# Image Schema Description
2+
3+
**hash** (String): A hash associated with the image file.
4+
5+
**filename** (String): The filename of the image.
6+
7+
**exifdata** (Object): An object that contains EXIF data with the following properties:
8+
9+
- **Make** (String): The manufacturer of the camera that took the image.
10+
- **Model** (String): The camera model that took the image.
11+
- **DateTimeOriginal** (Integer): The original date and time the image was taken, represented as a Unix timestamp.
12+
- **ModifyDate** (Integer): The date and time the image was last modified, represented as a Unix timestamp.
13+
- **CreateDate** (Integer): The date and time the image was created, represented as a Unix timestamp.
14+
- **GPSLatitudeRef** (String): The reference for latitude (usually "N" or "S").
15+
- **GPSLatitude** (Number): The latitude coordinate of where the image was taken.
16+
- **GPSLongitudeRef** (String): The reference for longitude (usually "E" or "W").
17+
- **GPSLongitude** (Number): The longitude coordinate of where the image was taken.
18+
- **GPSAltitudeRef** (Integer): The reference for altitude (usually 0).
19+
- **GPSAltitude** (Number): The altitude where the image was taken.
20+
- **GPSTimeStamp** (Array): The GPS timestamp of when the image was taken, represented as an array of integers [hours, minutes, seconds].
21+
- **GPSDateStamp** (String): The GPS date when the image was taken.
22+
- **ExifImageWidth** (Integer): The width of the original image.
23+
- **ExifImageHeight** (Integer): The height of the original image.
24+
25+
**metadata** (Array): An array of objects where each object represents a detected item with the following properties:
26+
27+
- **score** (String): The confidence score of the AI model for the detection.
28+
- **correction** (String): A correction applied to the AI model's prediction. This is usually empty if no correction is applied.
29+
- **remove** (Boolean): A flag indicating whether this detection should be removed. False means the detection is valid.
30+
- **is_tf** (Boolean): A flag indicating if the detection is a true positive (true) or false positive (false).
31+
- **id** (String): A unique identifier for the detection.
32+
- **label** (String): The label of the detected item (e.g., "Plastic film").
33+
area (Object): An object that contains the coordinates of the detected area with the following properties:
34+
- **x1** (Number): The x-coordinate of the top left corner of the detected area.
35+
- **y1** (Number): The y-coordinate of the top left corner of the detected area.
36+
- **x2** (Number): The x-coordinate of the bottom right corner of the detected area.
37+
- **y2** (Number): The y-coordinate of the bottom right corner of the detected area.
38+
Please note that all of the properties described above are required. If any property is missing or if a property's value is of an incorrect type, the JSON will not validate against the schema.

0 commit comments

Comments
 (0)