naturalintelligence / imglab Goto Github PK

Starting point: https://naturalintelligence.github.io/imglab/v2.html

It is quite difficult to work on large images. Hence a feature is required to zoom in / out image with SVG.

What to do

1. There is a tool button (2nd last on toolbox) "Zoom In". It needs to be renamed to "Zoom" (config.js)
2. Add an actions tag.html file in tags\actions folder with necessary functionality

• When user clicks on "Zoom" tool button, related actions should be loaded in action bar: Zoom in , Zoom out
• When user clicks on particular action then image with SVG overlay (workarea.tag.html) should be zoom in/out

3. Include new tag file in v2.html

Check technical documentation to know how to add an action bar.

Currently all the data is being saved to labellingData. We want to keep labellingData sync with browser store securely. So if the browser is accidentally closed, user should not loose data.

Considerations

1. Anytime labellingData is updated, deleted, populated through 3rd party plugin both copies must be in sync .

starting point: v2.html
link: https://naturalintelligence.github.io/imglab/v2.html

images-slider.tag.html

• use left and right arrow to load previous and next image in workarea respectively.
• Shit + o : to open images
• Alt + o : to open image folder

menu.tag.html

• o : to open data file
• s : to save data file

Note - all the new key mappings need to be mentioned in shortcuts.tag.html

better if it is automated.

When a label box or feature point is selected, widget left of the canvas show delete button. It's good if pressing delete key can delete the selected entry.

https://naturalintelligence.github.io/imglab

User can see key mappings when he clicks on keyboard icon. In addition, it'll be good if we display key mappings with each menu item.

Watch for changes, or Bookmark for easy discovery.
Fund this project for new features and maintenance.
[Showcase] your project with us by raising an issue

Imglab is currently implemented using jQuery. I believe it should be migrated to react app. Discussion and PRs are welcome.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

v2.html looks fine on chrome but on firefox it moves the menu bar down.

Hint: Try line height of the container.

Check technical documentation.

URL : https://naturalintelligence.github.io/imglab/v2.html
starting point : v2.html

Issue:

1. open above link
2. upload some images in thumbnail slider
3. click on an image
4. draw a shape from left toolbar
5. Click on lightbulb tool (left bottom)
6. In the action bar, you can see the slider (tags/actions/lightbulb-action.tag.html)
7. When we change the value of slider, it changes the fill-opacity of SVG. But it is not working.

Check technical documentation.

There is a switch just below the image gallery slider and just above the canvas / work area. It is helpful to switch between creating label or point. It doesn't display correctly in all the browsers.

I believe setting max-width may fix the issue. Manual switch or other libraries can also be the solution

On following cases

Update label-panel on every update on workarea and vice versa.

1. When data is imported, labels on currently selected image should be shown immediately
2. When a point is deleted or created, it should be shown on right sidebar ie label panel
3. When a shape is created, it should be selected and shown in label panel

Watch for changes, or Bookmark for easy discovery.
Fund this project for new features and maintenance.
[Showcase] your project with us by raising an issue

Currently imglab can export data in dlib pst or XML file only. We want to support PascalVoc XML as well.

labellingData format: https://github.com/NaturalIntelligence/imglab/blob/master/js/nimnObjStructure.js

Sample format:

<?xml version="1.0"?>
<annotation>
	<folder>images</folder>
	<filename>raccoon-63.png</filename>
	<path>/Users/datitran/Desktop/raccoon/images/raccoon-63.png</path>
	<source>
		<database>Unknown</database>
	</source>
	<size>
		<width>600</width>
		<height>400</height>
		<depth>3</depth>
	</size>
	<segmented>0</segmented>
	<object>
		<name>raccoon</name>
		<pose>Unspecified</pose>
		<truncated>0</truncated>
		<difficult>0</difficult>
		<bndbox>
			<xmin>74</xmin>
			<ymin>107</ymin>
			<xmax>280</xmax>
			<ymax>290</ymax>
		</bndbox>
	</object>
	<object>
		<name>raccoon</name>
		<pose>Unspecified</pose>
		<truncated>0</truncated>
		<difficult>0</difficult>
		<bndbox>
			<xmin>227</xmin>
			<ymin>93</ymin>
			<xmax>403</xmax>
			<ymax>298</ymax>
		</bndbox>
	</object>
</annotation>

Note:

• Web version of imglab can't extract the value of folder name so it should be be set to UNKNOWN.
• segmented, truncated, difficult, and depth fields can be set to 0
• pose field can be set to 'Unspecified'
• Value for object.bndbox can be taken from labellingData[n].shapes.bbox

Check technical documentation.

The x position of the cursor displays extra numbers. In the image below it's displaying ".84375" Even if that number is technically correct (I don't know if it is or not), it should probably just display a whole number and not a decimal. This was in Chrome. A different number appeared in FireFox. And I actually couldn't get any image to load in IE, but that should be a separate issue.

The code is already there to identify the SVG element and select it. workarea.tag.html

Watch for changes, or Bookmark for easy discovery.
Fund this project for new features and maintenance.
[Showcase] your project with us by raising an issue

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

In dlib face, there are 68 points. Is it necessary that you have to order them right?
For example, you might label your eyebrow first before your cheek if order doesn't matter.
And what if the landmark labeler mislabeled the number of points to, say 67 or 69?

When multiple images are loaded in image slider and a user is scrolling through the images, it'll be a good user experience if an icon overlayed on image can notify them which images are already labelled. Currently user need to click every image to check if they are labelled.

Note
This feature should work in all the cases;

• When labels are manually drawn
• When labels are drawn with the help of 3rd party APIs
• When labels are drawn when user import a data file.

To motivate more people for opensource contribution we need to create an easy to start development guide for this project. It should contain

1. Summary of riot js component
2. How to test common features
3. Various components and their purpose
4. Anything which you feel necessary but missed

technical.md

Once a polygon is created, user should be able to add extra points later to change the shape of polygon.

Watch for changes, or Bookmark for easy discovery.
Fund this project for new features and maintenance.
[Showcase] your project with us by raising an issue

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

starting point: v2.html
link: https://naturalintelligence.github.io/imglab/v2.html

Following issues has to be fixed

• When you open the page, you can see vertical scrollbar. and when you scroll up there is some empty white space of 5-10 px.

Can I save the face and landmark point which I am getting by using face++ API. I tried to save it but the generated .xml file in not including any points.

Currently workarea / canvas where we load the image for labeling is small. I believe we should take the advantage of full browser width.

Note : A small change in class file can do that. But it may lead change in cursor position.

We can also discuss for the new design to maximize the work area.

starting point: v2.html
link: https://naturalintelligence.github.io/imglab/v2.html

1. Load an image into the galleries
2. select an image to load in workarea
3. draw a rectangle on image
4. select point tool and create a point on rectangle . hold the mouse button and drag. shape should not be dragged

Check technical documentation.

Though Imglab works offline once it is loaded in the browser, it'll be more handy if it can be installed on the machine without internet.

Using node js, electron and other helpful technologies, it's installer can be created. Discussion and PR are welcome for this thread.

After creating a label or feature point on an image, user can delete selected element from the left side widget.

Instead, we would like to create an action bar between canvas and thumbnail slider with "delete", "empty", "move" buttons. Appropriate options should be visible or enable. Eg when a feature point is selected then "empty" option either should not be visible or disabled.

starting point: v2.html
link: https://naturalintelligence.github.io/imglab/v2.html

Just like version 1 we need to show vertical and horizontal crossing lines to track mouse pointer.

It's hard to detect landmark point when the background color is same. Light tool helps a bit.

We're planning to introduce an action or make it automatic to change the color of SVG circle point based on the image background color.

I believe taking white and black color based on the image background would be good. Suggestions are welcome.

Watch for changes, or Bookmark for easy discovery.
Fund this project for new features and maintenance.
[Showcase] your project with us by raising an issue

1. Output from your software is floating point values for x,y but dlib requires them to be integers.
2. Encoding of the file does not match dlib. You output UTF-8 and the first line of the XML is buggy (dlib yelled error at the first line of the XML when training). But dlib requires encoding of ISO-xxxxx

Please fix this if possible.

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

With the inspiration of many photo editing software and to support other features in future, I was wondering if we should change the UI of Imglab.

Some points in my mind

1. Dark theme: Pleasant for eyes. More focus on currently open image.
2. cursor position on image or the position of feature point and label box should be displayed in bottom bar.
3. label name can be attached to label box
4. Left tool bar for selection, draw point, draw label etc.
5. Top toolbar action on currently selected tool or item on the image: delete
6. Optional mouse tracking lines, grid etc.
7. Sliding "Time Saver" window. (Lets rename it to something else

A user can create a label box or feature points inside the label box. For this he/she needs to click on a switch;

Instead, we want to provide a toolbox , preferably left hand side, like other image editing tools where user can select the tool icon. It'll give the benefit of creating multiple tools.

Steps

1. Visit: https://naturalintelligence.github.io/imglab/v2.html
2. Browse some images. Open an image
3. Draw a shape and some points on the image
4. select shape. You should see label panel in right side

Some UI changes has to be done on this

1. When we drag an item to move, we should not be able to move it out from page (right side)
2. Display Numbering with List item. It is helpful in case of long list
3. Show some colorful move handler before textbox
4. Show scroll bar when so many points
5. Display count of feature points after heading

Files to be changed: tags\label-panel.tag.html

starting point: v2.html
link: https://naturalintelligence.github.io/imglab/v2.html

Following issues has to be fixed

1. Polygon icon need to be transparent. [done]
2. display bulb icon for Labels only tool button [done]
3. keyboard icon need to be aligned properly [done]
4. circle icon should not cut [done]
5. point icon should be smaller than circle and it should be filled circle, not the ring [done]
6. Zoom (magnifier) icon instead of 2 zoom in/out icons [done]
7. Imglab text should be aligned in middle with logo

Starting point: https://naturalintelligence.github.io/imglab/v2.html

Issue: Tools displayed in left bottom are extra padded

Check technical documentation.

For the sake of laziness, we were wondering to introduce a smart selection tool which can automatically create a polygon and select particular part of an object.

How to

1. workarea.tag.html load the image on hidden canvas.
2. When smart selection tool is selected then select the area and convert it into either SVG path or SVG polygon.

Watch for changes, or Bookmark for easy discovery.
Fund this project for new features and maintenance.
[Showcase] your project with us by raising an issue

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

starting point: v2.html
link: https://naturalintelligence.github.io/imglab/v2.html

Steps:

1. Open the link above.
2. Load images into gallery
3. select an image to load into workareas.
4. select polygon tool
5. press F12 to inspect "myCanvas" svg
6. draw polygon. You'll see the element being created in DOM with 2 points on every click (sometime one point).

<polygon id="SvgjsPolygon1063" points="179,177 179,177 397,147 323,381 323,381 88,350 88,350" class="labelbox shape"></polygon>

7. Delete repeated points manually from the DOM element. Now resize or move the polygon, you'll notice that duplicate points re-appear.

In case of 3 points (triangle) polygon, total points are 5.
In case of 4 points polygon, total points are 7.
In case of 5 points polygon, total points are 8.

Starting point: https://naturalintelligence.github.io/imglab/v2.html

While annotating the images sometimes you may need to copy almost similar element on the same image or across the images. It'll be more handy when we can just copy paste svg elements (workarea.tag.html). So that the user's effort and time can be saved.

Check technical documentation.

Landmark points are small and hard to find on an image. Hence we've introduced that for some images they are bigger and for some images they're not much visible due the back ground.

Hence we're planning to create an action bar which can let the users to change it's size.

To do it,

1. You can copy paste tags\actions\lightbulb-action.tag.html
2. set the css property on change event

Watch for changes, or Bookmark for easy discovery.
Fund this project for new features and maintenance.
[Showcase] your project with us by raising an issue

You must be labeling a face with landmark points. What if you add extra detail about that. E.g. age, gender, name etc.

This issue is raised to discuss what will be the best option to associate this information. As this tool is not limited to label only the faces, we can't hard code the attributes related to particular type of objects only.

In my opinion tags can be the good option for that. Your thought for discussion and PR for code change is welcome.

Check technical documentation.

Label box which is used to mark an object in the image is of fixed size once it is created. It needs to be resizable

It is difficult to see a small feature point on an image. Hence I've fixed their size to 2px. But when you draw multiple points on small faces, you only see the points not the face. Moreover, it is very difficult to draw point on small face / object. Hence it'll be good if can enlarge workarea to draw points correctly.

file: tags\actions\lightbulb-action.tag.html, tags\workarea.tag.html

Currently we can click use light tool to set the opacity of an image. We want to remember the settings so that when a new image is loaded in work area it uses the same opacity.

Watch for changes, or Bookmark for easy discovery.
Fund this project for new features and maintenance.
[Showcase] your project with us by raising an issue

Latest refactoring have broken Face ++ integration.

As per console log,

Face++DataParser.js:42 Uncaught ReferenceError: deleteAll is not defined
    at Object.success (Face++DataParser.js:42)
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at A (jquery.min.js:4)
    at XMLHttpRequest.<anonymous> (jquery.min.js:4)

Steps to reproduce

1. Loan an image which is bigger than canvas size.
2. You must see the scroll bar in canvas
3. now scroll and move the cursor. You'll not see the tracking line

Possible solution

1. Set the height & width when image is loaded as per imgoverlay not container.

Demo: https://naturalintelligence.github.io/imglab/

workarea.tag.html

• Ctrl + arrow key: to move a selected shape(s) by 1 pix

Hint code:

if(up) diffY = -1
if(down) diffY = 1
if(left) diffX = -1
if(right) diffX = 1

selectedShapes.forEach(shape => { 
   shape.move(shape.rbox.x + diffX ,shape.rbox.y + diffY) ;
}

Note - all the new key mappings need to be mentioned in shortcuts.tag.html

Check technical documentation.

Through imglab, you can only make the rectangular labels. As a part of this issue, we want to let user create polygons.

This issue has dependency on issue #17 Create Toolbar

Features

• The points of the polygons should be draggable to increase accuracy.
• Selected polygon can be deleted

If user has not saved the data and close the window, he should be warned before closing the window.

Starting point: v2.html

Don't show when

• Use has started an application but not uploaded any image yet
• User has uploaded images but there is no labeling data present

ref: https://stackoverflow.com/questions/7317273/warn-user-before-leaving-web-page-with-unsaved-changes

Check technical documentation.

starting point: v2.html
link: https://naturalintelligence.github.io/imglab/v2.html

On top right side there are 3 buttons: plugins, keyboard, donate. When the browser window is < 1412px. They are not properly aligned.

All the elements in a menu should be aligned for different screen size.

Imglab currently save data in json format. The size of project file can be reduced by 66% if it uses निम्न (nimn) format.

Hii,
I want to detect face from HOG based face detector using dlib's face detector and then train this for land mark detection using my dataset. Can I load this face points and generate one .xml file using this imglab tool. If yes how to do it. Is there any specific format to load the face points (i.e. 4 points of rectangle)
Please help me in this regard.

Regards
Nidhi

starting point: v2.html
link: https://naturalintelligence.github.io/imglab/v2.html

1. Display a slider on action bar when user clicks on "light bulb" / "Labels only" icon.
2. On slider change, change the fill-opacity of myCanvas svg so that users can see labels correctly