Source code
Revision control
Copy as Markdown
Other Tools
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
<!doctype html>
<html>
<head>
<meta
http-equiv="Content-Security-Policy"
content="default-src chrome:;img-src data: blob:; object-src 'none'"
/>
<meta name="color-scheme" content="light dark" />
<title data-l10n-id="about-inference-title"></title>
<link rel="stylesheet" href="chrome://global/content/aboutInference.css" />
<link rel="localization" href="preview/aboutInference.ftl" />
<script
type="module"
src="chrome://global/content/model-files-view.mjs"
></script>
<script src="chrome://global/content/aboutInference.js"></script>
</head>
<body id="body">
<div id="categories">
<div
class="category category-no-icon"
selected="true"
id="category-local-inference"
>
<span
class="category-name"
data-l10n-id="about-inference-category-local-inference"
></span>
</div>
<div class="category category-no-icon" id="category-models-storage">
<span
class="category-name"
data-l10n-id="about-inference-category-models-storage"
></span>
</div>
<div class="category category-no-icon" id="category-benchmark">
<span
class="category-name"
data-l10n-id="about-inference-category-benchmark"
></span>
</div>
</div>
<div class="main-content">
<div class="header">
<h1
id="sectionTitle"
data-l10n-id="about-inference-header"
class="header-name"
></h1>
<p>
<span data-l10n-id="about-inference-description"></span>
<a
data-l10n-id="about-inference-learn-more"
></a>
</p>
<moz-message-bar
type="warning"
id="warning"
data-l10n-id="about-inference-ml-disabled"
data-l10n-attrs="message"
>
<moz-button
id="warning.enable"
slot="actions"
data-l10n-id="about-inference-ml-disabled-enable"
></moz-button>
</moz-message-bar>
</div>
<div id="content">
<!-- local tab -->
<div id="local-inference" class="tab active">
<div class="subtabs" role="tablist">
<button
role="tab"
id="subtab-inference-pad"
aria-selected="true"
aria-controls="inference-pad"
data-l10n-id="about-inference-tab-inference-pad"
></button>
<button
role="tab"
id="subtab-text-generation"
aria-selected="false"
tabindex="-1"
aria-controls="text-generation"
data-l10n-id="about-inference-tab-text-generation"
></button>
<button
role="tab"
id="subtab-devices"
aria-selected="false"
tabindex="-1"
aria-controls="devices"
data-l10n-id="about-inference-tab-devices"
></button>
</div>
<div
id="devices"
role="tabpanel"
aria-labelledby="subtab-devices"
hidden="true"
>
<div class="fieldset-container">
<fieldset>
<legend data-l10n-id="about-inference-devices"></legend>
<button
id="devices.refresh"
data-l10n-id="about-inference-devices-refresh"
></button>
<div id="devices.table"></div>
</fieldset>
</div>
</div>
<div
id="text-generation"
role="tabpanel"
aria-labelledby="subtab-text-generation"
hidden="true"
>
<div class="fieldset-container">
<fieldset id="textGeneration">
<legend data-l10n-id="about-inference-text-generation"></legend>
<div class="form-container">
<div>
<label
for="tg.hub"
data-l10n-id="about-inference-text-generation-hub"
></label>
<select id="tg.hub">
<option
value=""
data-l10n-id="about-inference-text-generation-hub-default"
></option>
<option value="mozilla" selected>Mozilla</option>
<option value="huggingface">Hugging Face</option>
</select>
</div>
<div>
<label
for="tg.model"
data-l10n-id="about-inference-text-generation-model"
></label>
<input
type="text"
id="tg.model"
value="HuggingFaceTB/SmolLM2-360M-Instruct-GGUF/smollm2-360m-instruct-q8_0.gguf"
/>
</div>
<div>
<label
for="tg.revision"
data-l10n-id="about-inference-text-generation-revision"
></label>
<input type="text" id="tg.revision" value="main" />
</div>
<div>
<label
for="tg.device"
data-l10n-id="about-inference-text-generation-device"
></label>
<select id="tg.device"></select>
</div>
<div>
<label
for="tg.threads"
data-l10n-id="about-inference-text-generation-threads"
></label>
<select id="tg.threads"></select>
</div>
<div>
<label
for="tg.flashAttn"
data-l10n-id="about-inference-text-generation-flash-attn"
></label>
<input id="tg.flashAttn" type="checkbox" />
</div>
<div>
<label
for="tg.kvCacheDtype"
data-l10n-id="about-inference-text-generation-kv-cache-dtype"
></label>
<select id="tg.kvCacheDtype"></select>
</div>
<div>
<label
for="tg.engines"
data-l10n-id="about-inference-text-generation-engines"
></label>
<input id="tg.engines" type="number" min="1" value="1" />
</div>
<div>
<label
for="tg.runs"
data-l10n-id="about-inference-text-generation-runs"
></label>
<input id="tg.runs" type="number" min="1" value="1" />
</div>
<div>
<label
for="tg.maxTokens"
data-l10n-id="about-inference-text-generation-max-tokens"
></label>
<input
id="tg.maxTokens"
type="number"
min="1"
value="100"
/>
</div>
<div>
<label
for="tg.prompt"
data-l10n-id="about-inference-text-generation-prompt"
></label>
<textarea id="tg.prompt"></textarea>
</div>
<div>
<button
id="tg.run"
data-l10n-id="about-inference-text-generation-run"
></button>
</div>
</div>
<h3 data-l10n-id="about-inference-text-generation-output"></h3>
<textarea readonly id="tg.output"></textarea>
<div id="tg.results"></div>
<div id="tg.summary"></div>
</fieldset>
</div>
</div>
<div
id="inference-pad"
role="tabpanel"
aria-labelledby="subtab-inference-pad"
>
<div class="fieldset-container">
<fieldset>
<legend>Inference Pad</legend>
Predefined example:
<select id="predefined"></select>
<hr />
<div class="form-container">
<div>
Pick a Model Hub to use:
<span class="tooltip"
>ℹ️
<span class="tooltiptext">
If you want to use Hugging Face, start Firefox with
MOZ_ALLOW_EXTERNAL_ML_HUB=1
</span>
</span>
<select id="modelHub">
<option value="mozilla">Mozilla</option>
<option value="huggingface">Hugging Face</option>
</select>
</div>
<div>
<label for="taskName">Task:</label>
<select id="taskName"></select>
</div>
<div>
<label for="modelId">Model id:</label>
<span class="tooltip"
>ℹ️
<span class="tooltiptext">
The model needs to be compatible with Transformers.js
</span>
</span>
<input
type="text"
id="modelId"
value="mozilla/text_summarization"
/>
</div>
<div>
<label for="modelRevision">Model Revision:</label>
<span class="tooltip"
>ℹ️
<span class="tooltiptext">
This is typically the branch of the model repository.
</span>
</span>
<input type="text" id="modelRevision" value="main" />
</div>
<div>
<label for="quantization">Quantization:</label>
<select id="dtype"></select>
</div>
<div>
<label for="numRuns">Number of runs:</label>
<span class="tooltip"
>ℹ️
<span class="tooltiptext">Number of times to run</span>
</span>
<input id="numRuns" type="number" min="1" value="1" />
</div>
<div>
<label for="numThreads">Number of threads:</label>
<span class="tooltip"
>ℹ️
<span class="tooltiptext"
>1 means no multi-threading</span
>
</span>
<select id="numThreads"></select>
</div>
<div>
<label for="backend">Backend:</label>
<select id="backend"></select>
</div>
<div>
<label for="timeout">Timeout:</label>
<input id="timeout" type="number" min="30" value="30" />
</div>
<div>
<label for="inferencePad">Input data:</label>
<span class="tooltip"
>ℹ️
<span class="tooltiptext">
Keep the JSON valid, with the provided keys.
</span>
</span>
<textarea id="inferencePad"></textarea>
</div>
<div>
<input
type="button"
id="inferenceButton"
value="Run Inference"
/>
</div>
</div>
</fieldset>
</div>
<div class="fieldset-container">
<fieldset>
<legend data-l10n-id="about-inference-processes-title"></legend>
<div id="statusTableContainer"></div>
<hr />
<div id="procInfoTableContainer"></div>
<h3>Downloads</h3>
<div id="downloads"></div>
<h3>Console</h3>
<textarea readonly id="console"></textarea>
</fieldset>
</div>
</div>
</div>
<!-- model tab -->
<div id="models-storage" class="tab" hidden="true">
<model-files-view></model-files-view>
</div>
<!-- benchmark -->
<div id="benchmark" class="tab" hidden="true">
<div class="fieldset-container">
<fieldset class="large">
<legend data-l10n-id="about-inference-benchmark-title"></legend>
<p data-l10n-id="about-inference-benchmark-description"></p>
<div id="benchmark">
<input
id="benchmark.button"
type="button"
data-l10n-id="about-inference-benchmark-button"
value="Run Benchmark"
/>
<label for="benchmark.backend">Backend:</label>
<select id="benchmark.backend"></select>
<textarea id="benchmark.output" readonly></textarea>
</div>
</fieldset>
</div>
</div>
</div>
</div>
<!-- end of content -->
</body>
</html>