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:; object-src 'none'"
/>
<meta name="color-scheme" content="light dark" />
<title data-l10n-id="about-inference-title"></title>
<link rel="stylesheet" href="chrome://global/skin/in-content/common.css" />
<link rel="localization" href="preview/aboutInference.ftl" />
<script src="chrome://global/content/aboutInference.js"></script>
<link rel="stylesheet" href="chrome://global/content/aboutInference.css" />
</head>
<body>
<h1 data-l10n-id="about-inference-header"></h1>
<p>
<span data-l10n-id="about-inference-description"></span>
<a
data-l10n-id="about-inference-learn-more"
></a>
</p>
<div id="warning">
browser.ml.enable is set to False ! Toggle it to activate local inference.
</div>
<div id="content">
<div class="fieldset-container">
<fieldset>
<legend>Inference Pad</legend>
Predefined example:
<select id="predefined">
<option value="summary">Summary</option>
<option value="image-to-text">Image To Text</option>
<option value="zero">Zero Shot Classification</option>
<option value="ner">NER</option>
</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="hf">Hugging Face</option>
</select>
</div>
<div>
<label for="taskName">Task:</label>
<select id="taskName">
<option value="summarization">Summarization</option>
<option value="image-to-text">Image to text</option>
<option value="token-classification">
NER (Token Classification)
</option>
<option value="zero-shot-classification">
Zero Shot Classification
</option>
</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="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>
<fieldset>
<legend data-l10n-id="about-inference-processes-title"></legend>
<div id="runningInference"></div>
<h3>Downloads</h3>
<div id="downloads"></div>
<h3>Console</h3>
<textarea readonly id="console"></textarea>
</fieldset>
</div>
<fieldset class="large">
<legend data-l10n-id="about-inference-models-title"></legend>
<p data-l10n-id="about-inference-downloads-description"></p>
<div id="modelFiles"></div>
</fieldset>
</div>
<div class="fieldset-container">
<fieldset>
<legend>HTTP Inference Pad</legend>
<div class="form-container">
<div>
<label for="http.endpoint">HTTP endpoint:</label>
<input
id="http.endpoint"
type="text"
/>
</div>
<div>
<label for="http.model">Model:</label>
<span class="tooltip">
ℹ️
<span class="tooltiptext"
>Some endpoints require a specific model.</span
>
</span>
<input id="http.model" type="text" />
</div>
<div>
<label for="http.bearer">Bearer token:</label>
<span class="tooltip">
ℹ️
<span class="tooltiptext"
>Some endpoints require a token for access.</span
>
</span>
<input id="http.bearer" type="text" />
</div>
<div>
<label for="http.prompt">Prompt:</label>
<textarea id="http.prompt">
Suggest a story from %stories% to read after "%tabTitle%"</textarea
>
</div>
<div>
<input id="http.button" type="button" value="Run HTTP Inference" />
</div>
</div>
</fieldset>
<fieldset>
<legend>HTTP Inference Data</legend>
<h3>
Context
<input id="http.limit" max="120" min="1" type="range" value="10" />
</h3>
<div id="http.context"></div>
<h3>Output</h3>
<textarea id="http.output" readonly></textarea>
</fieldset>
</div>
</body>
</html>