Wie viele Minuten seit Mitternacht?

// Import Transformers.js for browser-based ML
import {
  AutoTokenizer, AutoModelForImageTextToText
} from 'https://cdn.jsdelivr.net/npm/@huggingface/[email protected]';

async function run() {
  // Get DOM elements for progress visualization
  const progressBar = document.getElementById('progress-bar');
  let maxProgress = 0;

  // Model configuration - Ministral-3-3B is a VLM but works for text-only
  const modelId = 'mistralai/Ministral-3-3B-Instruct-2512-ONNX';
  
  // Step 1: Load tokenizer (converts text to tokens)
  const tokenizer = await AutoTokenizer.from_pretrained(modelId);
  
  // Step 2: Load model with WebGPU acceleration
  const model = await AutoModelForImageTextToText.from_pretrained(modelId, {
    device: 'webgpu',  // Enable GPU acceleration in browser
    dtype: { 
      embed_tokens: 'fp16', 
      vision_encoder: 'q4', 
      decoder_model_merged: 'q4f16' 
    },  // Mixed precision for optimal performance
    progress_callback: (e) => {
      // Update progress bar during model loading
      if (e.progress !== undefined) {
        maxProgress = Math.max(maxProgress, e.progress);
        progressBar.style.width = `${maxProgress}%`;
      }
    }
  });

  // Step 3: Prepare input - chat template adds model-specific formatting
  const messages = [{ role: 'user', content: 'Erkläre WebGPU in einem Satz.' }];
  const inputs = tokenizer.apply_chat_template(messages, {
    add_generation_prompt: true,  // Add model's generation prompt
    return_dict: true,            // Return as dictionary for easy access
  });

  // Step 4: Generate text with the model
  const outputs = await model.generate({
    input_ids: inputs.input_ids,      // Tokenized input
    attention_mask: inputs.attention_mask,  // Attention mask for input
    max_new_tokens: 50               // Limit response length
  });

  // Step 5: Extract only the generated tokens (skip input tokens)
  const newTokens = outputs.slice(
    null,
    [inputs.input_ids.dims.at(-1) ?? 0, null]  // Slice from end of input to end
  );
  
  // Step 6: Decode tokens back to human-readable text
  const text = tokenizer.batch_decode(newTokens, { 
    skip_special_tokens: true 
  })[0].trim();
  
  // Display the result
  document.body.innerHTML = `<h1>Antwort:</h1><pre>${text}</pre>`;
}

// Start the demo and handle errors
run().catch(err => {
  console.error(err);
  document.body.innerHTML = `<h1>Fehler:</h1><pre>${err.stack || err}</pre>`;
});

[persona, if any]

You solve the user's task with a strict Reason → Act → Observe loop.

You have access to the following tools:
- <toolname>: <description>
  Arguments (JSON): { "arg": <type>, ... }
...

Respond with ONE step per reply, in EXACTLY this format:

Thought: <your reasoning about what to do next>
Action: <one of: tool1, tool2, ...>
Action Input: <a single-line JSON object of arguments, or {} if the tool takes none>

After each Action, you will be given:
Observation: <the tool's result>

Repeat the Thought / Action / Action Input cycle as needed. When you have enough
information, reply instead with:

Thought: <why you can now answer>
Final Answer: <the answer for the user>

Rules:
- ...