chrome/browser/resources/on_device_internals/tools.html

<style include="cr-shared-style cr-hidden-style md-select">
  :host {
    display: block;
    margin: auto;
    max-width: 800px;
    padding: 20px;
  }

  @media (prefers-color-scheme: dark) {
    :host {
      color: var(--google-grey-200);
    }
  }

  .throbber {
    background: url(chrome://resources/images/throbber_small.svg) no-repeat;
    display: block;
    height: 20px;
    margin: auto;
    width: 20px;
  }

  #textInput {
    --cr-input-error-display: none;
    margin: 0 0 10px 0;
  }

  .output-options {
    margin-top: 20px;
  }

  .output-options cr-input {
    display: inline-block;
    vertical-align: middle;
    margin-inline-end: 20px;
    width: 100px;
  }

  .performance-class {
    padding-bottom: 20px;
    text-align: center;
  }

  .model-text {
    margin: 15px 5px 20px 0;
  }

  .session {
    margin-top: 20px;
  }

  .action-button {
    margin-inline-end: 8px;
  }

  .multimodal-buttons {
    margin-bottom: 10px;
    display: flex;
    gap: 8px;
  }

  #imageInput {
    display: none;
  }

  #audioInput {
    display: none;
  }

  .text,
  .response {
    background-color: var(--google-grey-300);
    border-radius: 15px;
    color: var(--google-grey-800);
    margin: 10px 5px 5px 5px;
    padding: 15px 20px;
    white-space: pre-wrap;
  }

  .response {
    background-color: var(--google-blue-200);
    margin-bottom: 30px;
    margin-inline-start: 50px;
    overflow-wrap: break-word;
  }

  .retracted, .error {
    background-color: var(--google-red-100);
  }

  .image-error {
    color: var(--cr-fallback-color-error);
    margin-bottom: 3px;
  }

  .text {
    margin-inline-end: 50px;
  }

  #modelInput {
    max-width: 400px;
  }

  cr-collapse {
    padding: 10px var(--cr-section-padding);
  }

  cr-textarea {
    margin-bottom: 10px;
  }

  cr-collapse,
  cr-expand-button {
    background-color: var(--cr-card-background-color);
  }

  cr-expand-button:hover {
    background-color: var(--cr-hover-background-color);
  }

  .model-options {
    display: flex;
    flex-direction: row;
  }

  cr-checkbox {
    margin-left: 20px;
    --cr-checkbox-label-padding-start: 10px;
  }
</style>
<div class="performance-class">
  Device performance class: <strong>[[performanceClassText_]]</strong>
</div>
<cr-input id="modelInput" label="Model directory" placeholder="/tmp/model"
    disabled="[[isLoading_(loadModelStart_)]]"
    error-message="[[error_]]" invalid="[[error_.length]]" autofocus>
  <cr-button slot="suffix" disabled="[[isLoading_(loadModelStart_)]]"
      on-click="onLoadClick_">
    Load
  </cr-button>
</cr-input>
<div class="model-options">
  <select id="performanceHintSelect" class="md-select"
      value="[[performanceHint_]]" on-change="onPerformanceHintChange_">
    <option value="kHighestQuality">Highest Quality</option>
    <option value="kFastestInference">Fastest Inference</option>
  </select>
  <cr-checkbox slot="suffix" checked="{{enableImageInput_}}">
    Enable images
  </cr-checkbox>
  <cr-checkbox slot="suffix" checked="{{enableAudioInput_}}">
    Enable audio
  </cr-checkbox>
</div>
<div class="model-text">
  [[getModelText_(modelPath_, loadModelDuration_, loadedPerformanceHint_)]]
  <div class="throbber" hidden$="[[!isLoading_(loadModelStart_)]]"></div>
</div>

<cr-expand-button class="cr-row first" expanded="{{contextExpanded_}}"
    disabled="[[!model_]]">
  Context options (current size: [[contextLength_]] words)
</cr-expand-button>
<cr-collapse id="expandedContent" opened="[[contextExpanded_]]">
  <cr-textarea type="text" label="Context" value="{{contextText_}}">
  </cr-textarea>
  <cr-button on-click="onAddContextClick_">
    Add
  </cr-button>
  <cr-button class="cr-button-gap" on-click="startNewSession_">
    New session
  </cr-button>
</cr-collapse>
<div class="output-options">
  <cr-input id="topKInput" type="number" min="1" max="128" label="Top K"
    error-message="Top K must be between 1 and 128" auto-validate
    value="{{topK_}}">
  </cr-input>
  <cr-input id="temperatureInput" type="number" min="0" max="2"
    label="Temperature" auto-validate
    error-message="Temperature must be between 0 and 2"
    value="{{temperature_}}">
  </cr-input>
</div>
<cr-textarea id="textInput"
    disabled="[[!canEnterInput_(currentResponse_, model_)]]" label="Input"
    placeholder="Place control tokens {$SYSTEM, $MODEL, $USER, $END} on their own lines, in between lines of text."
    value="{{text_}}">
</cr-textarea>
<div class="multimodal-buttons" >
  <div class="image-buttons" hidden$="[[!imagesEnabled_(model_, baseModel_)]]">
    <div class="image-error">[[imageError_]]</div>
    <div hidden$="[[imageFile_]]">
      <cr-button class="floating-button"
          disabled="[[!canUploadFile_(currentResponse_, model_, imageFile_)]]"
          on-click="onAddImageClick_">
        <cr-icon icon="cr:add" slot="prefix-icon"></cr-icon>
        Add image
      </cr-button>
      <input id="imageInput" type="file">
    </div>
    <cr-button class="floating-button" hidden$="[[!imageFile_]]"
        on-click="onRemoteImageClick_">
      <cr-icon icon="cr:delete" slot="prefix-icon"></cr-icon>
      [[imageFile_.name]]
    </cr-button>
  </div>
  <div class="audio-buttons" hidden$="[[!audioEnabled_(model_, baseModel_)]]">
    <div class="audio-error">[[audioError_]]</div>
    <div hidden$="[[audioFile_]]">
      <cr-button class="floating-button"
          disabled="[[!canUploadFile_(currentResponse_, model_, audioFile_)]]"
          on-click="onAddAudioClick_">
        <cr-icon icon="cr:add" slot="prefix-icon"></cr-icon>
        Add audio
      </cr-button>
      <input id="audioInput" type="file">
    </div>
    <cr-button class="floating-button" hidden$="[[!audioFile_]]"
        on-click="onRemoteAudioClick_">
      <cr-icon icon="cr:delete" slot="prefix-icon"></cr-icon>
      [[audioFile_.name]]
    </cr-button>
    </div>
  </div>
<div>

  <cr-button class="action-button"
      disabled="[[!canExecute_(currentResponse_, model_, text_)]]"
      on-click="onExecuteClick_">
    Execute
  </cr-button>
  <cr-button disabled="[[!currentResponse_]]" on-click="onCancelClick_">
    Cancel
  </cr-button>
</div>

<div class="session" hidden="[[!currentResponse_]]">
  <div class="text">[[currentResponse_.text]]</div>
  <div hidden$="[[!currentResponse_.response.length]]"
      class$="[[currentResponse_.responseClass]]"><!--
      -->[[currentResponse_.response]]</div>
  <div class="throbber"
      hidden$="[[currentResponse_.response.length]]"></div>
</div>
<template is="dom-repeat" items="[[responses_]]">
  <div class="session">
    <div class="text">[[item.text]]</div>
    <div class$="[[item.responseClass]]">[[item.response]]</div>
  </div>
</template>