Build a simple data labeling tool

Here is a basic web-based data labeling tool using HTML, CSS, and JavaScript (React). It allows users to load text samples, label them (e.g., with predefined categories), and export the results.

This version is built with React and Tailwind CSS for a clean UI.

✅ Features:

• Load sample text data

• Label each item with predefined categories

• Navigate through samples

• Download labeled results as JSON

Code

javascript
CopyEdit
// File: DataLabelingTool.jsx
import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Download, ChevronLeft, ChevronRight } from "lucide-react";

const sampleData = [
  "AI is transforming the world rapidly.",
  "Climate change is a critical issue for humanity.",
  "React is a popular JavaScript library.",
];

const labels = ["Positive", "Neutral", "Negative"];

export default function DataLabelingTool() {
  const [index, setIndex] = useState(0);
  const [annotations, setAnnotations] = useState({});

  const currentText = sampleData[index];
  const currentLabel = annotations[index];

  const handleLabel = (label) => {
    setAnnotations({ ...annotations, [index]: label });
  };

  const downloadJSON = () => {
    const labeledData = sampleData.map((text, i) => ({
      text,
      label: annotations[i] || "Unlabeled",
    }));
    const blob = new Blob([JSON.stringify(labeledData, null, 2)], {
      type: "application/json",
    });
    const url = URL.createObjectURL(blob);
    const link = document.createElement("a");
    link.download = "labeled_data.json";
    link.href = url;
    link.click();
  };

  return (
    <div className="max-w-xl mx-auto p-6 space-y-4">
      <Card>
        <CardContent className="p-4">
          <h2 className="text-xl font-semibold mb-2">Sample {index + 1} of {sampleData.length}</h2>
          <p className="mb-4 text-gray-700">{currentText}</p>

          <div className="flex flex-wrap gap-2 mb-4">
            {labels.map((label) => (
              <Button
                key={label}
                variant={currentLabel === label ? "default" : "outline"}
                onClick={() => handleLabel(label)}
              >
                {label}
              </Button>
            ))}
          </div>

          <div className="flex justify-between items-center">
            <Button
              variant="outline"
              onClick={() => setIndex(Math.max(0, index - 1))}
              disabled={index === 0}
            >
              <ChevronLeft className="w-4 h-4 mr-1" /> Previous
            </Button>

            <Button
              variant="outline"
              onClick={() => setIndex(Math.min(sampleData.length - 1, index + 1))}
              disabled={index === sampleData.length - 1}
            >
              Next <ChevronRight className="w-4 h-4 ml-1" />
            </Button>
          </div>
        </CardContent>
      </Card>

      <Button onClick={downloadJSON} className="w-full">
        <Download className="w-4 h-4 mr-2" /> Download JSON
      </Button>
    </div>
  );
}

🛠 Setup Notes

1. React App: Create a new React app with Vite or Create React App.

2. Install Tailwind CSS and shadcn/ui (or use your own components).

3. Place the code in a component like DataLabelingTool.jsx.

4. Import and use it in your main App component.

Let me know if you want to extend this to support:

• CSV input/output

• Image/audio labeling

• User authentication

• Persistent storage (e.g., localStorage or backend)