Code Monkey home page Code Monkey logo

classifai_frontend's Introduction

Classifai_FrontEnd

License Quality Gate Bugs Count

Source code of Classifai with compiled front-end can be found here.

Component Design

Refer: Diagram - Component Design Concept

Code Scaffolding

  1. Install extension 'Angular Files'.
  2. After installed, right click your project src folder
  3. Look for the 'Generate' labelled section (Generate Component, Generate Directive and etc)

Change Development or Production Environment url

Default backend endpoint for development is http://localhost:4200.
Please navigate to src/environments/environment.ts and change the endpoint as necessary.

Default backend endpoint for production is http://localhost:9999.
Please navigate to src/environments/environment.prod.ts and change the endpoint as necessary.

Execute for Development

  1. Ensure backend is running, then open project.
  2. Look for the bottom left side 'NPM SCRIPTS' tab.
  3. If the package.json is collapsed, expand it by clicking it
  4. Lastly, click on 'start:dev', located just below package.json

Build Production

  1. After open project.
  2. Look for the bottom left side 'NPM SCRIPTS' tab.
  3. If the package.json is collapsed, expand it by clicking it
  4. Click on 'build:normal', located just below package.json
  5. The build artifacts will be stored in the dist/ directory.

Analyze Project Bundle Size

  1. After open project.
  2. Look for the bottom left side 'NPM SCRIPTS' tab.
  3. If the package.json is collapsed, expand it by clicking it
  4. Click on 'build:analyze', located just below package.json
  5. After that a browser tab will be opened to display the whole project bundles

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

classifai_frontend's People

Contributors

amalsyahmi avatar bobbylcw avatar bobbylee90 avatar codenamewei avatar daniellim07 avatar devenyantis avatar fariskamaludin-skymind avatar hansheng000512 avatar hansheng0512 avatar yipkhenlai avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar

classifai_frontend's Issues

Unable to erase drawn item(s) for project with already drawn item(s)

Steps to reproduce:

  1. Ensure you are loading a project with images & some BB drawn
  2. Load that project
  3. Draw a couple of BB (optional)
  4. Click the Eraser on left-sidebar (Notice all BB are gone, but project comp still has green light indicator)
  5. Click on next photo, then go back to previous photo again
  6. Notice that the BB are back even though it should all be removed

Loss of capturing mouse out event leading to bounding box missing when resume into the screen

Check out the video, the second bounding box onwards demonstrating the scenario mentioned below.

How to reproduce:

  1. Start to draw bounding box
  2. Prior to complete bounding box, have the mouse click to wander out of the picture
  3. Mouse click resume back to the picture
  4. Click somewhere in the picture (X, Y) to complete bounding box

Current outcome: the bounding box will missing.
Intended behavior: the bounding box formed with bottom right as X, Y

Its common for mouse click to wander off the picture, need to program the code to capture the mouse event still and complete the bounding box rather than losing it.

MouseOutEvent.mov

segmentation: unable to drag & move the photo around

Steps to reproduce:

  1. Load up a segmentation project with photos
  2. Use keyboard arrow or mouse click on thumbnail to navigate photo
  3. Click on the Pointer icon on the left panel
  4. Move the mouse around the displayed image
  5. Notice the image is being moved away from mouse cursor

Undo function not works as expected

Some important note:

  • It is very buggy in general, sometimes the undo function works correctly sometimes it does not
  • But 90% of the time it does not work correctly
  • There are multiple ways of triggering this bug so examples below are just what have been discovered
  • Most of the bug is due to the undo function trigger 2 undo steps at once

Several example of steps to reproduce

Project with imported label list:

  1. Second and third box move back to the original position at the same time

1

  1. Bounding box label got undoed at the wrong stage:
  • Draw the first box
  • Assign it the label “label”
  • Draw the second box
  • Assign it the label “test”
  • Reposition the second box
  • Reposition the first box
  • Press undo
  • The first box returned back to the original place (correct)
  • The second box returned back to the original place and the label of the second box was undoed and became “label” simultaneously

2

Project without imported label list

  • Draw a first box
  • Assign a label to the first box by typing on the input
  • Draw a second box
  • Assign a label to the second box by typing on the input
  • Reposition the first box
  • Reposition the second box
  • Press undo
  • Both of the boxes will return back to the original position at the same time as well as the label for the second box will removed making the second box does not have a label assigned to it

3

Request to change double click to single click

Request to change to single click to enter from Interface 1 - > 2

Currently Interface 1 -> Interface 2 takes double click (in v1 takes single click).
Reach out to me if there's any concern

Interface 1
Screenshot 2021-05-02 at 9 44 40 AM

Interface 2
Screenshot 2021-05-02 at 9 44 55 AM

Interface 2-> the next step takes single click

segmentation: drag photo causing photo to appear on top left

Steps to reproduce:

  1. Load up a segmentation project with photos
  2. Use keyboard arrow or mouse click on thumbnail to navigate photo
  3. Click on the Pointer icon on the left panel
  4. Click & drag the mouse around the displayed image
  5. Stop holding the mouse
  6. Repeat step 4 to 5
  7. Notice the image always appear on top left unintentionally

Image missing upon double click on thumbnail

Front End Branch: main as of 5th March
Back End Branch: v2 as of 5th March

double click of thumbnail resulted in image missing
single click on thumbnail behaves normal

Screen.Recording.2021-03-05.at.1.35.35.AM.mov

Import label file not working on V2

importing label file is not reflected in the label list

Screen.Recording.2021-04-25.at.12.41.16.AM.mov

Also while fixing that,
to match the dark theme, suggest to have backend to initiate the opening label selector window rather than frontend

have created import label list with endpoints (to backend)
details as below
https://gist.github.com/codenamewei/249e9b57bbd6f118bc068b94801fcdd5

branch: v2_alpha_cw_label_refactor of classifai repo (do send PR to v2_alpha from that branch once frontend and backend both reflected changes)

segmentation: click any polygon and then mouseup get undefined error

mouseUp TypeError: Cannot read property 'length' of undefined
at UndoRedoService.isLabelChange (undo-redo.service.ts)
at UndoRedoService.isStateChange (undo-redo.service.ts)
at ImageLabellingSegmentationComponent.mouseUp (image-labelling-segmentation.component.ts)
at ImageLabellingSegmentationComponent_mouseup_HostBindingHandler (image-labelling-segmentation.component.ts)

Labelling output same with image name

img0.png -> img0.xml

currently the image ending format is included such as img0_png.xml which is much distaste by data scientist
(v1 have implemented the change previously)

Screenshot 2021-05-10 at 5 34 46 PM

@amalsyahmi-certifai this will not need to rush for today tomorrow, currently we will only ask people to export projects.

Create new project takes too long

Issue:
Create a new project takes too long because it sending requests to API to get thumbnails, which is unnecessary.

Solution:
Remove 'GET thumbnails' request when creating new project

Label text missing

Date: 2021 March 8th 10:35pm
Backend branch : cw_importexport
Frontend branch: main

Screenshot 2021-03-08 at 10 33 13 PM

Labels saved despite all labels were disabled in advanced settings

Say an image have car and carplate,
when the labels both car and carplate are disabled in advanced settings,
and saved the bulk images,
that image is still save in the zip file (xml appears with no specific labels)

Since our condition were no label file saved when labels are not found,
the label file should not exist when all the labels in that image is disabled.

@amalsyahmi-certifai @hansheng000512
this can wait , doesn't need to include in the build to give to labeller on 25th May

Status of project "Not Available" -> "Opened"

Status of project "Not Available" when the particular project has opened elsewhere.

The red color and and the phrase seems alarming that something is wrong .
Screenshot 2021-04-25 at 12 25 56 AM

Suggest to change to "Opened" (Also open to any other better suggestions) and change to a less alarming color tone. Can reference from below

Screenshot 2021-04-25 at 12 30 45 AM

Add license header in this repo

@hansheng000512

Add license header to all files of this repo, refer to other angular repo to see how they do their licenses header

Our license of Classifai is Apache 2.0

For reference. backend repo did it for every file, just like this example this

segmentation: black area surrounding image

Steps to reproduce:

  1. Load up a segmentation project with photos
  2. Use keyboard arrow or mouse click on thumbnail to navigate photo
  3. Click on the Pointer icon on the left panel and drag the photo around
  4. Click on Polygon icon and draw
  5. After draw repeat step 3
  6. Notice the black area is surrounding the image
  7. Repeat step 3 until step 6
  8. Notice the black area is expanding more

Project Not Available bug

Screen.Recording.2021-02-11.at.6.08.14.PM.mov

backend: Classifai v2 branch

commit 42ad4c7b34f1c5cf653a41235d3443c5d0e70a71 (HEAD -> v2, origin/v2)
Merge: 9410105 ba6b9e5
Author: Daniel Lim <[email protected]>
Date:   Thu Feb 11 17:37:33 2021 +0800

    Merge pull request #305 from CertifaiAI/cw_load_bug_fix_v2
    
    load bug fix

frontend: Classifai_FrontEnd daniel_clone_bobby branch commit

commit 18d1886048c0b06d2a27d071d4de3595385af6ec (HEAD -> daniel_clone_bobby, origin/daniel_clone_bobby)
Author: Daniel Jie <[email protected]>
Date:   Mon Feb 8 14:36:01 2021 +0800

    update type used
    
    undo-redo.service: isMethodChange function to use Method type as argument instead of string

Left Panel buttons no show darker tone when pressed

Tested on Classifai v2_alpha branch commit 7dd6d1d

the left panels (other than the first button showing dark color when pressed), others not showing darken color when button pressed

left_panel_buttons_uncolored.mov

Screenshot 2021-05-09 at 7 30 33 PM

Screenshot 2021-05-09 at 7 30 38 PM

segmentation: image position glitch with mouse drag & move

Steps to reproduce (Updated after PR #95):

  1. Load up a segmentation project with photos
  2. Use keyboard arrow or mouse click on thumbnail to navigate photo
  3. Click on the Pointer icon on the left panel and drag the photo around
  4. Click on Polygon icon and draw
  5. After draw repeat step 3
  6. Notice the image is glitching to bottom right
  7. Repeat step 3 until step 6
  8. Notice the image is still glitching to bottom right

Failed to load project of over 100++ of images

@YCCertifai Kindly verify if you are seeing the same senario

How to reproduce

  1. Import folder contains of a total of roughly more than 150 images (The more the easier to see this scenario)
  2. After finish import, click to load the project
  3. Project failed to go in to canvas page, tab displayed opened (Cant open in another tab either)

Use branch: sum_v2a_improveImageValidationSpeed of Classifai repo

System tested on: Mac

Extra note:
Tested on latest frontend main branch code and seeing the same thing

Extra resources to show:
big

big.mov

Redundant close button for import project.

  • close button is redundant, closing operation can happen by clicking on background or pressing the x on top

Screenshot 2021-05-10 at 5 42 37 PM

  • the bottom right button should be "Proceed"
    (meaning import do not start after selecting json, import start after pressing the button Proceed)

Screenshot 2021-05-10 at 5 43 01 PM

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.