XciD's picture
XciD HF staff
initial commit
8969f81
<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>
&nbsp; 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 &amp; 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 &amp; 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. 🐍 ⚠️
{{!-- Replace this text and hit tab to trigger generations. Have fun! --}}
</p>
{{else}}
<p>
See how a modern neural network auto-completes your text 🤗
</p>
<p>
{{!-- In February, OpenAI unveiled a language model called GPT-2 – for Generative Pre-Trained Transformer – that generates coherent paragraphs of text one word at a time. --}}
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 &amp; 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>
<label class="radio block"><input type="radio" name="bow_or_discrim" value="toxicity:0"> 👍 non toxic</label>
<label class="radio block"><input type="radio" name="bow_or_discrim" value="toxicity:1"> ⚠️ toxic</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 &amp; 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>