universaldatatool / react-image-annotate Goto Github PK
View Code? Open in Web Editor NEWCreate image annotations. Classify, tag images with polygons, bounding boxes or points.
License: MIT License
Create image annotations. Classify, tag images with polygons, bounding boxes or points.
License: MIT License
Hi! Would it be possible to include an example of how to download the annotations from the webpage. It would be great to be see a clear example on how to access the annotations, and download as a json.
Thanks!
When an image is loaded in full pixel segmentation mode, it should show an error if the CORs header wasn't present (right now, a blank image/no image will be displayed)
This seems to break images completely. I only started looking at the codebase today, so please take this with a pinch of salt.
If videoTime is 0, which it is by default, then === undefined will not by true and the video tag will always render instead of the img tag.
Imagine User A has drawn something - say 2 random polygons. I have 2 questions:
My use case is something like a Recaptcha but with 1 background image. As User A you can designate certain areas on the image as "correct answers" and as User B you need to select an area and you will get a score for selecting the "correct" one. Does this fit the use case? Any other alternatives?
I have this error when I try to import react-image-annotate in my Create React App
./node_modules/material-survey/components/Survey/index.js
Module parse failed: Unexpected token (143:16)
You may need an appropriate loader to handle this file type.
| }
| }, _react2.default.createElement(_SurveyQuestion2.default, {
| question: { ...q,
| defaultAnswer: defaultAnswers[q.name]
| },
Can somebody help me please
It freezes the UI thread
Hey, could you please include a link to the npm package. And great job on the demo!!!
Thanks!
Jordan
Make the scroll behavior configurable in settings to allow Scroll to Pan.
Hi, @seveibar I just checked out your project. It looks great, I need some help.
I have few doubts
when I draw a region, I only have the option to select from the existing classes and tags, I wanted to know if there was an option to manually enter something in the text field and classify a region?
In the regions object 'x','y','w' and 'h' values are less than the actual image size, how do I get the actual coordinates? should I multiply 'x' with the width of the image, 'y' with the height of the image, 'w' with the width of the image, and 'h' with the height of the image?
Thanks
I tried to run the Usage code, and got an error:
Module not found: Can't resolve 'classnames' in 'C:......*PROJECT_NAME*\node_modules\material-survey\components\USRegionQuestion'
Bottom right corner. Just to indicate that it's loading and no errors occurred.
Hi!
Can you add circle and oval shape selectors also? Is it already on your roadmap?
Hi, I am trying to include your Component in a React project of mine.
Running "@material-ui/core": "^4.3.1",
Getting the following errors:
./node_modules/react-image-annotate/Theme/index.js
Module not found: Can't resolve '@material-ui/core/styles/MuiThemeProvider' in '.../node_modules/react-image-annotate/Theme'
When I go back to a Version 3.9.3 of @material-ui the MuiThemeProvider is found.
But the @material-ui/lab/Slider dependency from material-survey will be lost.
Can't resolve '@material-ui/lab/Slider' in '.../node_modules/material-survey/components/RatingQuestion'
Or it may be related to this
Any suggestions?
Hi. Thanks for your great work. I'm fairly new to React and I want to use this library for one of my project. I run the below command and everything has been installed successfully.
npm install react-image-annotate
But here is the problem. I don't know how/where to use these lines to run the editor:
import ReactImageAnnotate from "react-image-annotate"
const App = () => (
<ReactImageAnnotate
selectedImage="https://example.com/image1.png"
taskDescription="# Draw region around each face\n\nInclude chin and hair."
images={[{ src: "https://example.com/image1.png", name: "Image 1" }]}
regionClsList={["Man Face", "Woman Face"]}
/>
)
Any help would be appreciated. Thanks.
Is there a way to center an image vertically and horizontally?
Also I think it would be good to reset the pan to center when resetting the zoom via zoom tool. The zoom should also prevent having a negative zoom, cause I honestly think there is no use case for zooming it out too much since the library already rescale the image to fit it in the view port.
The demo page is offline.
The video support was build primarily for the UniversalDataTool so usage examples can be found there in the mean time.
I would like to render custom react-components instead of images. Any easy way to achieve this?
Hi, I Can't Change New Picture From Upload Button Help Me Plz
Arms and legs are often obscured in pose estimation settings, the user should be able to mark that on the points by double clicking them.
Hi guys!
Thanks for creating this awesome tool! Have been playing around with it a little bit and it seems very promising. π
I have one question though: now it seems that the image source needs to be an URLs to the image.. I was wondering that would it be possible to read the image directly from bytes for example? I have a MongoDB backend and I use Python as middleware that would allow me to pass the images to the frontend directly e.g. as Bytes (or some other in-memory format)? Do you think this would be a difficult thing to add/change? I would like to avoid saving the image to disk for this purpose..
I went through the codebase but as it is quite extensive so decided to ask first before spending more time trying to implement something silly without knowing too much about the insides of the project.. π
I am working on project where user upload a image zip file and it will get extracted in local. I want to render those extracted images.
Thanks.
I am trying to add functionality of the Save button using the annotator but following the documentation I am unsure of how to use the onExit property. Currently I am trying to just print to console the properties of the annotations I have made on an image and I assume that utilising the onExit property is the way to do this.
An example of using the onExit with its type MainLayoutState => any
would be really appreciated.
Thank you.
Hi, i can't load image into react image annotate component. It works only when i initial it by state. When i fetch list image in componentDidMount then render, it did not work.
class App extends React.Component {
state = {
data: [
{
"src": "https://images.unsplash.com/photo-1501426026826-31c667bdf23d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=676&q=80",
"name": "Image 2"
},
{
"src": "https://images.unsplash.com/photo-1494253109108-2e30c049369b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80",
"name": "Image 3"
},
{
"src": "https://images.unsplash.com/photo-1484100356142-db6ab6244067?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1262&q=80",
"name": "Image 4"
}
]
};
async getData() {
const result = await axios({
url: "http://127.0.0.1:5000/api/images",
}
);
this.setState({
data: result.data.images
});
}
componentDidMount() {
this.getData();
}
// Putting that data to use
render() {
const { data } = this.state;
return (
<ReactImageAnnotate
taskDescription="Draw."
images= {data}
regionClsList={["Man Face", "Woman Face"]}
onExit={output => {
console.log(JSON.stringify(output));
}}
/>
);
}
}
Is there a way to delete a point in a polygon? The problem is if for whatever reason you move two points too close to each other they become stuck, you can't be move them anymore because when you hover the mouse over them you get the plus icon and not the drag icon, when this happens you can't continue you have to delete the polygon and start all over.
I've been hunting for a package like this for so long!
Just trying to get this up and running but I'm running into this issue:
Here's the component that's using this library:
import React from 'react'
import ReactImageAnnotate from 'react-image-annotate'
function ImageAnnotator() {
return (
<ReactImageAnnotate
selectedImage="https://images.unsplash.com/photo-1561518776-e76a5e48f731?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80"
// taskDescription="# Draw region around each face\n\nInclude chin and hair."
// images={[
// { src: 'https://example.com/image1.png', name: 'Image 1' },
// ]}
// regionClsList={['Man Face', 'Woman Face']}
/>
)
}
export default ImageAnnotator
I'm using Next.js if that matters
Thank you!
Hi, I'm pretty new to react so this is may be something I'm doing wrong on my end, but I wrapped ReactImageAnnotate component in my own component, update the state on a button click callback, and feed the state's values back into image_url and images props - but the UI doesn't update with my new images. I simply got started by doing npm create-react-app and then npm install react-image-annotate
Probably rename to react-image-video-label
or something. Not sure yet.
Convert the pdf to an image and allow annotation. It may be possible to embed the PDF directly.
Once the annotation is complete and saved on the DB or some storage. If we want to see what we annotated previously, How can we reload the annotation data into the image without missing a pixel value.
Documentation is not clear and also seen the Source. Nothing is helping out.
Hi,
I really like your library, thank you for open sourcing it.
Our use case requires us to tag more than just a string and a list of string. Would you accept a PR when we give a custom form and use it instead of the provided RegionLabel
?
Cheers
The pixels under a bounding box should be covered by the mask.
To do this, bounding boxes should be converted to polygons in the <ImageMask />
component before being sent to mmgc
Please add a license to the project, preferably one that allows for commercial use. Thanks!
The demo site has a "Demo Playground" link leading to:
https://waoai.github.io/react-image-annotate/demo
It returns a 404.
I need to do something like:
<ReactImageAnnotate
.......
.......
regionClsList={input => this.getClasses(input)}
/>
where given the input typed into the select 'value container' I can perform an api call filtered on the input (our potential items that need to be available to that dropdown is a very, very large list)
Is this possible at the moment?
When updating state of parent component, (changing the set of images and/or the current image). If the new selected image is not a part of the initial set of images, it wont work.
Fix: Make images more dynamic. If images are changed in props, update in the state of the tool.
component does nothing when image is downloading on web page. It's very ambiguous, experience when images are 20+ MB in sizes.
In my project i need to label images on screen but i don't know at the start whats in there.
Is there a way to use simple form or something like that to input tags during polygon creation not before ?
master
branch failed. π¨I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.
You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. Iβm sure you can resolve this πͺ.
Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.
Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master
branch. You can also manually restart the failed CI job that runs semantic-release.
If you are not sure how to resolve this, here is some links that can help you:
If those donβt help, or if this issue is reporting something you think isnβt right, you can always ask the humans behind semantic-release.
package.json
file.A package.json file at the root of your project is required to release on npm.
Please follow the npm guideline to create a valid package.json
file.
Good luck with your project β¨
Your semantic-release bot π¦π
For some reason the pixelSize object for each region is missing now. It was working a couple of days ago. did you commit something or maybe I deleted necessary props? I can't find the reason
Create landing page to improve visibility and usage.
Related to #51
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.