Getting Started with React
Use the Universal Data Tool in React Applications.
Example Loading Image Classification Interface
npm install universal-data-tool
The
<UniversalDataViewer /> component has every interface baked in. Just provide a dataset in the dataset prop to view any dataset!import React from "react";
import UniversalSampleEditor from "universal-data-tool";
export default function App() {
return (
<div className="App">
<UniversalSampleEditor
// Read more about this format here:
// https://github.com/UniversalDataTool/udt-format
interface={{
type: "image_classification",
labels: ["cat", "dog"]
}}
sample={{
imageUrl: "https://placekitten.com/408/287"
}}
onExit={(action: "go-to-prev" | "go-to-next" | undefined) => {
// Called when user hits "Save", "Next", or "Prev"
}}
// when data is saved this is called
onModifySample={(sampleIndex, newSampleData) => {
// do something
}}
/>
</div>
);
}