front/views/index.hbs

<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>