224 lines
7.6 KiB
HTML
224 lines
7.6 KiB
HTML
<!-- 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
|
||
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
|
||
<!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
|
||
href="https://firefox-source-docs.mozilla.org/toolkit/components/ml"
|
||
data-l10n-id="about-inference-learn-more"
|
||
></a>
|
||
</p>
|
||
<moz-message-bar
|
||
type="warning"
|
||
id="warning"
|
||
message=""
|
||
></moz-message-bar>
|
||
</div>
|
||
<div id="content">
|
||
<!-- local tab -->
|
||
<div id="local-inference" class="tab active">
|
||
<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="device">Device:</label>
|
||
<select id="device">
|
||
<option value="cpu" selected>cpu</option>
|
||
<option value="gpu">gpu</option>
|
||
</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>
|
||
|
||
<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>
|
||
|
||
<!-- 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>
|