import { useCaptionImage } from '@localmode/react';
import { transformers } from '@localmode/transformers';

const model = transformers.imageCaptioner('Xenova/vit-gpt2-image-captioning');

function Demo() {
  const { data, isLoading, execute } = useCaptionImage({ model });
  // execute(imageDataUrl) => data.caption = "A cat sitting on a couch"
}

import { useDetectObjects } from '@localmode/react';

const { data, execute } = useDetectObjects({ model });
await execute(imageDataUrl);
// data.objects = [{ label: 'person', score: 0.95, box: { x, y, width, height } }]

import { useClassifyImage } from '@localmode/react';

const { data, execute } = useClassifyImage({ model });
await execute(imageDataUrl);
// data.label = 'cat', data.score = 0.97

import { useSegmentImage } from '@localmode/react';

const { data, execute } = useSegmentImage({ model });
await execute(imageDataUrl);
// data.masks = [{ label: 'background', mask: Uint8Array, score: 0.98 }]

import { useClassifyImageZeroShot } from '@localmode/react';

const { data, execute } = useClassifyImageZeroShot({ model });
await execute({ image: imageDataUrl, labels: ['cat', 'dog', 'bird'] });
// data.label = 'cat', data.score = 0.92

import { useExtractImageFeatures } from '@localmode/react';

const { data, execute } = useExtractImageFeatures({ model });
await execute(imageDataUrl);
// data.features = Float32Array(768)

import { useImageToImage } from '@localmode/react';

const { data, execute } = useImageToImage({ model });
await execute(imageDataUrl);
// data.image = 'data:image/png;base64,...' (upscaled/transformed image)

import { useDetectHands } from '@localmode/react';
import { mediapipe } from '@localmode/mediapipe';

const { data, execute } = useDetectHands({ model: mediapipe.handLandmarker() });
await execute(imageBlob);
// data.hands = [{ landmarks, worldLandmarks, handedness, score }, ...]

import { useRef } from 'react';
import { useStreamingTracker } from '@localmode/react';
import { createHandTracker } from '@localmode/mediapipe';
import type { HandLandmarkResultItem } from '@localmode/core';

function HandOverlay() {
  const videoRef = useRef<HTMLVideoElement>(null);
  const { status, results, fps, error, start, stop } = useStreamingTracker<
    HandLandmarkResultItem[]
  >({
    video: videoRef,
    create: ({ video, onResults, onError }) =>
      createHandTracker({ video, onResults, onError }),
  });

  return (
    <>
      <video ref={videoRef} autoPlay muted playsInline />
      <button onClick={status === 'running' ? stop : start}>
        {status === 'running' ? `Stop (${fps} fps)` : 'Start'}
      </button>
      {results?.map((hand, i) => <HandSkeleton key={i} hand={hand} />)}
    </>
  );
}