|
<header> |
|
<div class="header"> |
|
{{#if doc.hasCustomLogo}} |
|
{{#eq doc.model "ctrl"}} |
|
<a class="cross-collab" href="/model/ctrl"> |
|
<img class="logo-collab logo-hf" src="/front/assets/huggingface_logo.svg"> |
|
<img class="cross" src="/front/assets/cross-collab.svg"> |
|
<img class="logo-collab logo-salesforce" src="/front/assets/Salesforce_logo.svg"> |
|
</a> |
|
{{/eq}} |
|
{{#eq doc.model "pplm"}} |
|
<a class="cross-collab" href="/model/pplm"> |
|
<img class="logo-collab logo-hf" src="/front/assets/huggingface_logo.svg"> |
|
<img class="cross" src="/front/assets/cross-collab.svg"> |
|
<img class="logo-collab logo-uber" src="/front/assets/Uber_logo.svg"> |
|
</a> |
|
{{/eq}} |
|
{{else}} |
|
<a href="/"> |
|
<img class="logo" src="/front/assets/unicorn-tweaked.svg"> |
|
</a> |
|
{{/if}} |
|
<div class="header-inner" data-page-editable="{{editable}}"> |
|
<div class="title"> |
|
{{#if doc.title}} |
|
{{doc.title}} |
|
{{else}} |
|
Write With Transformer |
|
{{/if}} |
|
{{#if doc.modelFamily}} |
|
<code> |
|
{{#if doc.title}} |
|
written with {{doc.modelFamily}} |
|
{{else}} |
|
{{doc.modelFamily}} |
|
{{/if}} |
|
</code> |
|
{{/if}} |
|
<a target="_blank" href="{{doc.modelInfoLink}}"> |
|
<img class="info" src="/front/assets/Icon-info.svg"> |
|
</a> |
|
</div> |
|
{{#if editable}} |
|
<div class="toolbar"> |
|
<div class="toolbar-el"> |
|
<a href="#" class="js-shuffle"><img src="/front/assets/iconmonstr-media-control-55.svg"> Shuffle initial text</a> |
|
</div> |
|
<div class="toolbar-el"> |
|
<a href="#" class="js-trigger"><img src="/front/assets/iconmonstr-download-14.svg"> Trigger autocomplete</a> |
|
or <kbd>tab</kbd> |
|
</div> |
|
<div class="toolbar-el"> |
|
Select suggestion <kbd>↑</kbd> <kbd>↓</kbd> and <kbd>enter</kbd> |
|
</div> |
|
<div class="toolbar-el"> |
|
Cancel suggestion <kbd>esc</kbd> |
|
</div> |
|
</div> |
|
{{/if}} |
|
</div> |
|
<div class="rightbar"> |
|
{{#if legacy}} |
|
<a href="#" class="js-share">Share <img src="/front/assets/iconmonstr-share-11.svg"></a> |
|
{{else}} |
|
{{#if editable}} |
|
<a href="#" class="js-save">Save & Publish <img src="/front/assets/icon-publish.svg"></a> |
|
{{else}} |
|
<span class="doc-status">Read-only document</span> |
|
<a class="btn btn-primary js-duplicate" href="#">Duplicate & edit</a> |
|
{{/if}} |
|
{{/if}} |
|
</div> |
|
</div> |
|
<div class="ruler"></div> |
|
</header> |
|
|
|
<div class="page-wrapper"> |
|
<div class="page-container"> |
|
<img class="js-loader hide" src="/front/assets/tail-spin.svg"> |
|
<a href="#" class="js-share share-screenshot fadeout hide" data-html2canvas-ignore> |
|
Share screenshot <img src="/front/assets/iconmonstr-share-11-purple.svg"> |
|
</a> |
|
<div class="page-inner"> |
|
<div class="editor"> |
|
{{#if doc.getHTML}} |
|
{{{ doc.getHTML }}} |
|
{{else}} |
|
{{#eq doc.model "pplm"}} |
|
<p> |
|
PPLM builds on top of other large transformer-based generative models (like GPT-2), where it enables |
|
finer-grained control of attributes of the generated language (e.g. gradually switching topic 🐱 or sentiment 😃). |
|
</p> |
|
<p> |
|
⚠️ 🐍 We had to turn off the PPLM machine as it was costly to host – try it locally using |
|
<a target="_blank" href="https://github.com/huggingface/transformers">transformers</a>, |
|
or contact us if you really need it as a hosted service. 🐍 ⚠️ |
|
|
|
</p> |
|
{{else}} |
|
<p> |
|
See how a modern neural network auto-completes your text 🤗 |
|
</p> |
|
<p> |
|
|
|
This site, built by the <a target="_blank" href="https://huggingface.co">Hugging Face</a> team, lets you write a whole document directly from your browser, |
|
and you can trigger the Transformer anywhere using the Tab key. It's like having a smart machine that completes your thoughts 😀 |
|
</p> |
|
<p> |
|
Get started by typing a custom snippet, |
|
<a target="_blank" href="https://github.com/huggingface/transformers">check out the repository</a>, |
|
or <a href="#js-shuffle">try one of the examples</a>. Have fun! |
|
</p> |
|
{{/eq}} |
|
{{/if}} |
|
</div> |
|
<div class="watermark"> |
|
<strong>Written by Transformer</strong> <span class="sep">·</span> <span class="website">transformer.huggingface.co 🦄</span> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
{{#if editable}} |
|
<div class="decoder-settings"> |
|
<div class="title"> |
|
Model & decoder settings |
|
<a target="_blank" href="{{doc.modelInfoLink}}"> |
|
<img src="/front/assets/Icon-info.svg"> |
|
</a> |
|
</div> |
|
{{#eq doc.model "pplm"}} |
|
<div class="setting bow_or_discrim"> |
|
<div class="desc"> |
|
<span>Bag-of-words</span> |
|
</div> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="legal" checked> 👩💼 legal</label> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="military"> 🎖 military</label> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="monsters"> 🕷 monsters</label> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="politics"> 🤴 politics</label> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="religion"> 🔯 religion</label> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="science"> 🧪 science</label> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="space"> 🚀 space</label> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="technology"> ⌨️ technology</label> |
|
|
|
<div class="desc"> |
|
<span>Discriminators</span> |
|
</div> |
|
<div> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="clickbait:0"> 🐭 clickbait</label> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="clickbait:1"> 🙏 non clickbait</label> |
|
</div> |
|
<div> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="sentiment:2"> 🙂 positive sentiment</label> |
|
<label class="radio block"><input type="radio" name="bow_or_discrim" value="sentiment:3"> 🙁 neg sentiment</label> |
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
{{/eq}} |
|
|
|
<div class="setting model_size"> |
|
{{#not doc.model "pplm"}} |
|
<div class="desc"> |
|
<span>Model size</span><span class="js-val"></span> |
|
</div> |
|
{{/not}} |
|
{{#eq doc.model "pplm"}} |
|
<span class="hide js-val">pplm</span> |
|
{{/eq}} |
|
|
|
{{#eq doc.model "distil-gpt2"}} |
|
<input |
|
class="slider" type="range" step="1" |
|
min="0" max="3" |
|
value="0" |
|
data-value-0="distilgpt2/small" data-value-1="gpt2/small" data-value-2="gpt2/medium" |
|
data-value-3="gpt2/large" |
|
> |
|
{{/eq}} |
|
{{#eq doc.model "arxiv-nlp"}} |
|
<input |
|
class="slider" type="range" step="1" |
|
min="0" max="4" |
|
value="4" |
|
data-value-0="distilgpt2/small" data-value-1="gpt2/small" data-value-2="gpt2/medium" |
|
data-value-3="gpt2/large" data-value-4="gpt2/arxiv-nlp" |
|
> |
|
{{/eq}} |
|
{{#eq doc.model "gpt2-large"}} |
|
<input |
|
class="slider" type="range" step="1" |
|
min="0" max="3" |
|
value="3" |
|
data-value-0="distilgpt2/small" data-value-1="gpt2/small" data-value-2="gpt2/medium" |
|
data-value-3="gpt2/large" |
|
> |
|
{{/eq}} |
|
{{#eq doc.model "xlnet"}} |
|
<input |
|
class="slider" type="range" step="1" |
|
min="0" max="0" |
|
value="0" |
|
data-value-0="xlnet" |
|
> |
|
{{/eq}} |
|
{{#eq doc.model "gpt"}} |
|
<input |
|
class="slider" type="range" step="1" |
|
min="0" max="0" |
|
value="0" |
|
data-value-0="gpt" |
|
> |
|
{{/eq}} |
|
</div> |
|
{{#not doc.model "pplm"}} |
|
<div class="setting top_p"> |
|
<div class="desc"> |
|
<span>Top-p</span><span class="js-val"></span> |
|
</div> |
|
<input |
|
class="slider js-inverted" type="range" step="any" |
|
min="0" max="1" |
|
value="0.9" |
|
> |
|
</div> |
|
<div class="setting temperature"> |
|
<div class="desc"> |
|
<span>Temperature</span><span class="js-val"></span> |
|
</div> |
|
<input |
|
class="slider" type="range" step="any" |
|
min="0" max="3" |
|
value="1" |
|
> |
|
</div> |
|
{{/not}} |
|
{{#eq doc.model "pplm"}} |
|
<div class="setting step_size"> |
|
<div class="desc"> |
|
<span>Step size</span><span class="js-val"></span> |
|
</div> |
|
<input |
|
class="slider" type="range" step="0.01" |
|
min="0.01" max="0.1" |
|
value="0.05" |
|
> |
|
</div> |
|
<div class="setting kl_scale"> |
|
<div class="desc"> |
|
<span>KL-scale</span><span class="js-val"></span> |
|
</div> |
|
<input |
|
class="slider" type="range" step="0.01" |
|
min="0" max="1" |
|
value="0.01" |
|
> |
|
</div> |
|
<div class="setting gm_scale"> |
|
<div class="desc"> |
|
<span>GM-scale</span><span class="js-val"></span> |
|
</div> |
|
<input |
|
class="slider" type="range" step="0.01" |
|
min="0" max="1" |
|
value="0.95" |
|
> |
|
</div> |
|
<div class="setting num_iterations"> |
|
<div class="desc"> |
|
<span>Num iterations (impacts gen. time)</span><span class="js-val"></span> |
|
</div> |
|
<input |
|
class="slider" type="range" step="1" |
|
min="1" max="30" |
|
value="3" |
|
> |
|
</div> |
|
<div class="setting gen_length"> |
|
<div class="desc"> |
|
<span>Gen. length (impacts gen. time)</span><span class="js-val"></span> |
|
</div> |
|
<input |
|
class="slider" type="range" step="1" |
|
min="5" max="80" |
|
value="30" |
|
> |
|
</div> |
|
<div class="setting use_sampling"> |
|
<div class="desc"> |
|
<span>Use sampling</span> |
|
</div> |
|
<input type="checkbox" name="use_sampling" checked> |
|
</div> |
|
{{/eq}} |
|
|
|
{{#not doc.model "pplm"}} |
|
<div class="setting max_time"> |
|
<div class="desc"> |
|
<span>Max time</span><span class="js-val"></span> |
|
</div> |
|
<input |
|
class="slider" type="range" step="0.1" |
|
min="1" max="5" |
|
value="1" |
|
> |
|
</div> |
|
{{/not}} |
|
</div> |
|
{{/if}} |
|
|
|
<div class="modal hide share-screenshot"> |
|
<div class="modal-inner"> |
|
<div class="modal-content"> |
|
<p>From desktop:</p> |
|
<ol> |
|
<li>Right-click on your completion below and select "<strong>Copy Image</strong>".</li> |
|
<li>To share on Twitter, start a tweet and paste the image.</li> |
|
</ol> |
|
<p>From mobile:</p> |
|
<ol> |
|
<li>Press and hold (long press) your completion below and either "<strong>Share</strong>" directly or "<strong>Copy Image</strong>".</li> |
|
<li>If you copied the image, you can long press in Twitter to paste it into a new tweet.</li> |
|
</ol> |
|
</div> |
|
<img class="js-loader big" src="/front/assets/oval.svg"> |
|
<img class="js-result"> |
|
<div class="buttons"> |
|
<a href="#" class="js-close">Done</a> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
{{#if editable}} |
|
<div class="modal hide save-publish"> |
|
<div class="modal-inner"> |
|
<div class="modal-content"> |
|
<div class="modal-title">Save & Publish</div> |
|
<div>Your document will be shared at this url:</div> |
|
<input |
|
readonly type="text" class="doc-url" |
|
value="{{doc.shareUrl}}" |
|
> |
|
<div>To be able to edit this document in the future, keep this url:</div> |
|
<input |
|
readonly type="text" class="doc-url doc-edit-url" |
|
value="{{doc.editUrl}}" |
|
> |
|
<div class="descr-doc-title">Title</div> |
|
<form> |
|
<input |
|
required type="text" class="doc-title" |
|
placeholder="Enter your document’s title..." |
|
value="{{ doc.title }}" |
|
> |
|
</form> |
|
</div> |
|
<img class="js-loader hide" src="/front/assets/oval.svg"> |
|
<div class="buttons"> |
|
<a href="#" class="js-save">Save</a> |
|
</div> |
|
</div> |
|
</div> |
|
{{/if}} |
|
|
|
<script> |
|
window.doc = { |
|
shortId: "{{doc.shortId}}", |
|
longId: "{{doc.longId}}", |
|
model: "{{doc.model}}", |
|
}; |
|
{{#if doc.contents}} |
|
window.QUILL_C = {{{ doc.contentsJson }}}; |
|
{{/if}} |
|
</script> |
|
|