mirror of
https://github.com/Mintplex-Labs/transformersjs-electron.git
synced 2026-07-21 00:15:23 -04:00
Add generation parameters
This commit is contained in:
Joshua Lochner
+139
-21
@@ -31,10 +31,6 @@
|
||||
<!-- Code highlighting JS -->
|
||||
<script src="./assets/js/prism.js" defer></script>
|
||||
|
||||
<!-- Transformers.js -->
|
||||
<!-- TODO use dist -->
|
||||
<script type="module" src="./src/transformers.js" defer></script>
|
||||
|
||||
<!-- Page JS-->
|
||||
<script src="./assets/js/scripts.js" defer></script>
|
||||
|
||||
@@ -123,30 +119,122 @@
|
||||
<h2 class="fw-bolder">Demo</h2>
|
||||
<p class="lead mb-0">TODO</p>
|
||||
</div>
|
||||
<div class="row gx-5">
|
||||
<div class="col-12">
|
||||
<label>Task: </label>
|
||||
<select class="form-select mt-1">
|
||||
<option value="t5-small" selected>Translation (t5-small)</option>
|
||||
<!-- <option value="bert-base-uncased">bert-base-uncased</option>
|
||||
<option value="distilbert-base-uncased">distilbert-base-uncased</option> -->
|
||||
<div class="row justify-content-center">
|
||||
<label>Task: </label>
|
||||
<div class="col-12 mt-1">
|
||||
<select id="task" class="form-select">
|
||||
<option value="translation" model="t5-small" selected>Translation (t5-small)</option>
|
||||
<option value="text-generation" model="gpt2">Text generation (gpt2)</option>
|
||||
<!-- <option value="summarization" model="...">Summarization (t5-small)</option> -->
|
||||
<!-- <option value="none" model="bert-base-uncased">bert-base-uncased</option> -->
|
||||
<!-- <option value="none" model="distilbert-base-uncased">distilbert-base-uncased</option> -->
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label class="mt-2">Subtask: </label>
|
||||
<select class="form-select mt-1">
|
||||
<option value="t5-small" selected>English to French</option>
|
||||
<!-- <option value="bert-base-uncased">bert-base-uncased</option>
|
||||
<option value="distilbert-base-uncased">distilbert-base-uncased</option> -->
|
||||
</select>
|
||||
<div id="languages" task="translation" class="task-settings">
|
||||
<label class="mt-2">Languages: </label>
|
||||
<div class="d-flex">
|
||||
<div style="width: calc(50% - 20px);">
|
||||
<select id="language-from" class="form-select mt-1 col-3">
|
||||
<option value="English" selected>English</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style="width: 40px;" class="d-flex justify-content-center align-items-center">to</div>
|
||||
<div style="width: calc(50% - 20px);">
|
||||
<select id="language-to" class="form-select mt-1 col-3">
|
||||
<option value="German" selected>German</option>
|
||||
<option value="French">French</option>
|
||||
<option value="Romanian">Romanian</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-3">
|
||||
<textarea class="form-control" rows="5"></textarea>
|
||||
<div>
|
||||
<label class="mt-2">Parameters: </label>
|
||||
<div class="row">
|
||||
<div class="col-xl-2 col-md-4 col-sm-6">
|
||||
<div class="input-group mb-2">
|
||||
<span class="input-group-text">Max length</span>
|
||||
<input param-name="max_length" type="number" min="1" class="form-control generation-option" value=20>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-md-4 col-sm-6">
|
||||
<div class="input-group mb-2" title="Number of beams">
|
||||
<span class="input-group-text">No. beams</span>
|
||||
<input param-name="num_beams" type="number" min="1" max="50" class="form-control generation-option" value=1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-md-4 col-sm-6">
|
||||
<div class="input-group mb-2" title="Temperature (between 0 and 1)">
|
||||
<span class="input-group-text">Temp.</span>
|
||||
<input param-name="temperature" type="number" min="0" max="1" step="0.1" class="form-control generation-option" value=1>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-md-4 col-sm-6">
|
||||
<div class="input-group mb-2">
|
||||
<span class="input-group-text">Top K</span>
|
||||
<input param-name="top_k" type="number" min="0" class="form-control generation-option" value=0>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-md-4 col-sm-6">
|
||||
<div class="input-group mb-2" title="Perform multinomial sampling">
|
||||
<label class="input-group-text" for="sample-select">Sample</label>
|
||||
<select param-name="do_sample" type="bool" class="form-select generation-option" id="sample-select">
|
||||
<option value="true">Yes</option>
|
||||
<option value="false" selected>No</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xl-2 col-md-4 col-sm-6">
|
||||
<div class="input-group mb-2" title="Discount factor (between 0 and 1)">
|
||||
<span class="input-group-text">Discount</span>
|
||||
<input param-name="do_sample" type="number" min="0" max="1" step="0.1" class="form-control generation-option" value=0>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 mt-2 mt-lg-3">
|
||||
<textarea class="form-control" rows="5"></textarea>
|
||||
|
||||
<div task="translation" class="task-settings">
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<textarea id="input-textbox" class="mt-3 form-control"
|
||||
rows="5">Hello, how are you?</textarea>
|
||||
</div>
|
||||
<div class="col-lg-6">
|
||||
<textarea id="output-textbox" class="mt-3 form-control" rows="5"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div task="text-generation" class="task-settings" style="display: none;">
|
||||
<div class="row">
|
||||
<div class="col-lg-12 mt-3">
|
||||
<textarea id="text-generation-textbox" class="form-control"
|
||||
rows="10">once upon a time,</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-12 mt-2 d-flex justify-content-center">
|
||||
<button id="generate" type="button" class="btn btn-primary">Generate</button>
|
||||
|
||||
<!-- <button class="btn btn-primary" type="button">
|
||||
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Loading...</span>
|
||||
</button> -->
|
||||
</div>
|
||||
|
||||
<div id="progress" class="col-12 mt-4" style="display: none;">
|
||||
<div class="d-flex align-items-center position-relative py-2">
|
||||
<strong>Loading model files...</strong>
|
||||
<div class="spinner-border position-absolute" role="status" aria-hidden="true" style="right: 0">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="progress-bars" class="d-flex justify-content-center flex-column gap-2 py-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Usage section-->
|
||||
@@ -168,6 +256,36 @@
|
||||
<div class="container px-5 my-4">
|
||||
<div class="mb-4">
|
||||
<h2 class="fw-bolder">Examples</h2>
|
||||
<div>
|
||||
<div class="row gx-5">
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<p class="lead mb-0">Python code</p>
|
||||
|
||||
<pre><code class="language-python">path = './models/onnx/t5-small';
|
||||
tokenizer = AutoTokenizer.from_pretrained(path)
|
||||
model = AutoModelForSeq2SeqLM.from_pretrained(path)
|
||||
|
||||
text = 'translate English to French: Hello, how are you?.'
|
||||
input_ids = tokenizer(text).input_ids
|
||||
|
||||
outputTokenIds = model.generate(input_ids);
|
||||
outputText = tokenizer.decode(outputTokenIds, skip_special_tokens=True);</code></pre>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 mb-4 mb-lg-0">
|
||||
<p class="lead mb-0">Corresponding JavaScript Code</p>
|
||||
<pre><code class="language-js">let path = './models/onnx/t5-small';
|
||||
let tokenizer = await AutoTokenizer.from_pretrained(path)
|
||||
let model = await AutoModelForSeq2SeqLM.from_pretrained(path)
|
||||
|
||||
let text = 'translate English to French: Hello, how are you?.'
|
||||
let input_ids = tokenizer(text).input_ids
|
||||
|
||||
let outputTokenIds = await model.generate(input_ids);
|
||||
let outputText = tokenizer.decode(outputTokenIds, skip_special_tokens=true);</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row gx-5">
|
||||
<div class="col-lg-12 mb-3">TODO</div>
|
||||
|
||||
Reference in New Issue
Block a user