import { useGenerateText } from '@localmode/react';
import { webllm } from '@localmode/webllm';

const model = webllm.languageModel('Llama-3.2-1B-Instruct-q4f16_1-MLC');

function Demo() {
  const { data, isLoading, execute } = useGenerateText({ model, maxTokens: 200 });

  return (
    <div>
      <button onClick={() => execute('Write a haiku about AI')}>Generate</button>
      {data && <p>{data.text}</p>}
    </div>
  );
}

import { useGenerateObject } from '@localmode/react';
import { z } from 'zod';

const schema = z.object({ name: z.string(), age: z.number() });

const { data, isLoading, execute } = useGenerateObject({ model, schema });
await execute('Extract: John is 30 years old');
// data.object = { name: 'John', age: 30 }

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

const { data, execute } = useAnswerQuestion({ model });
await execute({ question: 'Who founded Apple?', context: 'Apple was founded by Steve Jobs...' });
// data.answer = 'Steve Jobs', data.score = 0.95

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

const { data, execute } = useAskDocument({ model });
await execute({ image: imageDataUrl, question: 'What is the total amount?' });
// data.answer = '$42.50'

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

const { data, execute } = useFillMask({ model });
await execute('The capital of France is [MASK].');
// data.predictions = [{ token: 'Paris', score: 0.98 }, ...]

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

const { data, execute } = useSummarize({ model });
await execute('Long article text...');
// data.summary = "A concise summary..."

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

const { data, execute } = useTranslate({ model });
await execute({ text: 'Hello world', targetLanguage: 'fr' });
// data.translation = "Bonjour le monde"

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

const { data, execute } = useExtractText({ model });
await execute(imageDataUrl);
// data.text = "Text extracted from the image"