chromium/ios/chrome/browser/optimization_guide/resources/on_device_llm_internals.html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta charset="utf-8"/>
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<title>On-device LLM Internals</title>
<script src="chrome://resources/js/ios/web_ui.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("llmForm").addEventListener("submit", function (e) {
      e.preventDefault();

      const formData = new FormData(e.target);
      var args = [];
      for (const pair of formData.entries()) {
        args.push(pair[1]);
      }
      chrome.send('initAndGenerateResponse', args);
    });
    chrome.send('requestModelInformation', []);
  });

  function updateModelInformation(information) {
    document.getElementById("modelName").textContent = information;
  }

  function showResult(result) {
    document.getElementById("response").textContent = result;
  }
</script>
</head>
<body>
<h1>chrome://llm-internals</h1>
<form id="llmForm">
  <label for="modelName">Model name:</label><br>
  <div id="modelName"></div><br>
  <label for="query">Query:</label><br>
  <input type="text" id="query" name="query" size="50"><br>
  <input type="submit" value="Submit">
</form>
<p>Response:</p>
<p id="response"></p>
</body>
</html>