import React          from "https://esm.sh/react@19/";
import { createRoot } from "https://esm.sh/react-dom@19/client/";
import { pipeline }   from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers';

import {initState,reducer} from './reducer.js';
import rawData from './rawData.js';
import BusySignal from './busy.js';


function App () {
  const [state, dispatch] = React.useReducer(reducer, initState());
  const setData = (key,data) => dispatch({type:'setData', key:key, data:data});

  async function ask() {
    dispatch({type:'thinking'});
    /*
    let qaGen = await pipeline('question-answering');
    let qaOutput = await qaGen(state.question, rawData.sean);
    // hide busy; show answer
    dispatch({type:'answerQ', answer:qaOutput.answer});
    */
    
    //let qaGen = await pipeline('text-generation');
    //let qaGen = await pipeline('text-generation', 'Xenova/gpt2');
    // cant find https://huggingface.co/Xenova/gpt2/resolve/main/onnx/model_quantized.onnx

    //let qaGen = await pipeline('text-generation', 'onnx-community/Bonsai-1.7B-ONNX');
    //Could not find an implementation for GatherBlockQuantized(1) node with name '/model/embed_tokens/Gather_Quant

    //let qaGen = await pipeline('text-generation', 'HuggingFaceTB/SmolLM2-1.7B-Instruct');
    // weird answer
    
    //let qaGen = await pipeline('text-generation', 'onnx-community/SmolLM-135M-Instruct');
    // Unauthorized access to file: "https://huggingface.co/onnx-community/SmolLM-135M-Instruct/resolve/main/config.json

    //let qaGen = await pipeline('text-generation', 'onnx-community/Qwen3-4B-ONNX');
    // Error: Can't create a session.

    //let qaGen = await pipeline('text-generation', 'onnx-community/Bonsai-1.7B-ONNX');
    // Error: Can't create a session.

    let qaGen = await pipeline('text-generation', 'HuggingFaceTB/SmolLM2-135M-Instruct');
    
    let prompt = `Context: ${rawData.sean}  Question: ${state.question} Answer:`;
    let qaOutput = await qaGen(prompt, { max_new_tokens: 20 });
    console.log(qaOutput);
    dispatch({type:'answerQ', answer:qaOutput[0].generated_text});
    
  }
  
  return (
    <>
      {state.error && <h3 className='error'>ERROR</h3>}

      <p>Demonstration of Hugging Face's transformers.js text-generation engine to answer questions based on context.</p>
      
      <div id='KBtextDIV'>{rawData.sean}</div>

      <p>
	<input value={state.question}
	       onChange={e=>setData('question', e.target.value)} />
	{!state.busy && <button onClick={ask}>Ask</button>}
      </p>
      
      {state.busy && <p className='busyDIV'>Working... <BusySignal  /></p>}
      {state.done && <p>{state.answer}</p>}
	 
       
    </>
  )
}

createRoot(document.getElementById('root')).render( <React.StrictMode> <App/> </React.StrictMode> );