Upload 9 files

static/autosize.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e||self).autosize=t()}(this,function(){var e,t,n="function"==typeof Map?new Map:(e=[],t=[],{has:function(t){return e.indexOf(t)>-1},get:function(n){return t[e.indexOf(n)]},set:function(n,o){-1===e.indexOf(n)&&(e.push(n),t.push(o))},delete:function(n){var o=e.indexOf(n);o>-1&&(e.splice(o,1),t.splice(o,1))}}),o=function(e){return new Event(e,{bubbles:!0})};try{new Event("test")}catch(e){o=function(e){var t=document.createEvent("Event");return t.initEvent(e,!0,!1),t}}function r(e){var t=n.get(e);t&&t.destroy()}function i(e){var t=n.get(e);t&&t.update()}var l=null;return"undefined"==typeof window||"function"!=typeof window.getComputedStyle?((l=function(e){return e}).destroy=function(e){return e},l.update=function(e){return e}):((l=function(e,t){return e&&Array.prototype.forEach.call(e.length?e:[e],function(e){return function(e){if(e&&e.nodeName&&"TEXTAREA"===e.nodeName&&!n.has(e)){var t,r=null,i=null,l=null,a=function(){e.clientWidth!==i&&f()},d=function(t){window.removeEventListener("resize",a,!1),e.removeEventListener("input",f,!1),e.removeEventListener("keyup",f,!1),e.removeEventListener("autosize:destroy",d,!1),e.removeEventListener("autosize:update",f,!1),Object.keys(t).forEach(function(n){e.style[n]=t[n]}),n.delete(e)}.bind(e,{height:e.style.height,resize:e.style.resize,overflowY:e.style.overflowY,overflowX:e.style.overflowX,wordWrap:e.style.wordWrap});e.addEventListener("autosize:destroy",d,!1),"onpropertychange"in e&&"oninput"in e&&e.addEventListener("keyup",f,!1),window.addEventListener("resize",a,!1),e.addEventListener("input",f,!1),e.addEventListener("autosize:update",f,!1),e.style.overflowX="hidden",e.style.wordWrap="break-word",n.set(e,{destroy:d,update:f}),"vertical"===(t=window.getComputedStyle(e,null)).resize?e.style.resize="none":"both"===t.resize&&(e.style.resize="horizontal"),r="content-box"===t.boxSizing?-(parseFloat(t.paddingTop)+parseFloat(t.paddingBottom)):parseFloat(t.borderTopWidth)+parseFloat(t.borderBottomWidth),isNaN(r)&&(r=0),f()}function s(t){var n=e.style.width;e.style.width="0px",e.style.width=n,e.style.overflowY=t}function u(){if(0!==e.scrollHeight){var t=function(e){for(var t=[];e&&e.parentNode&&e.parentNode instanceof Element;)e.parentNode.scrollTop&&(e.parentNode.style.scrollBehavior="auto",t.push([e.parentNode,e.parentNode.scrollTop])),e=e.parentNode;return function(){return t.forEach(function(e){var t=e[0];t.scrollTop=e[1],t.style.scrollBehavior=null})}}(e);e.style.height="",e.style.height=e.scrollHeight+r+"px",i=e.clientWidth,t()}}function f(){u();var t=Math.round(parseFloat(e.style.height)),n=window.getComputedStyle(e,null),r="content-box"===n.boxSizing?Math.round(parseFloat(n.height)):e.offsetHeight;if(r<t?"hidden"===n.overflowY&&(s("scroll"),u(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight):"hidden"!==n.overflowY&&(s("hidden"),u(),r="content-box"===n.boxSizing?Math.round(parseFloat(window.getComputedStyle(e,null).height)):e.offsetHeight),l!==r){l=r;var i=o("autosize:resized");try{e.dispatchEvent(i)}catch(e){}}}}(e)}),e}).destroy=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],r),e},l.update=function(e){return e&&Array.prototype.forEach.call(e.length?e:[e],i),e}),l});

static/chat.js

@@ -0,0 +1,338 @@
+const models = {
+  "meta-llama/Llama-2-70b-chat-hf": {
+    modelCard: "https://huggingface.co/meta-llama/Llama-2-70b-chat-hf",
+    license: "https://bit.ly/llama2-license",
+    maxSessionLength: 8192,
+    sepToken: "###",
+    stopToken: "###",
+    extraStopSequences: ["</s>"],
+  },
+  "meta-llama/Llama-2-70b-hf": {
+    modelCard: "https://huggingface.co/meta-llama/Llama-2-70b-hf",
+    license: "https://bit.ly/llama2-license",
+    maxSessionLength: 8192,
+    sepToken: "###",
+    stopToken: "###",
+    extraStopSequences: ["</s>"],
+  },
+  "timdettmers/guanaco-65b": {
+    modelCard: "https://huggingface.co/timdettmers/guanaco-65b",
+    license: "https://huggingface.co/timdettmers/guanaco-65b",
+    maxSessionLength: 2048,
+    sepToken: "###",
+    stopToken: "###",
+    extraStopSequences: ["</s>"],
+  },
+  "enoch/llama-65b-hf": {
+    modelCard: "https://github.com/facebookresearch/llama/blob/llama_v1/MODEL_CARD.md",
+    license: "https://bit.ly/llama-license",
+    maxSessionLength: 2048,
+    sepToken: "###",
+    stopToken: "###",
+    extraStopSequences: ["</s>"],
+  },
+  "bigscience/bloom": {
+    modelCard: "https://huggingface.co/bigscience/bloom",
+    license: "https://bit.ly/bloom-license",
+    maxSessionLength: 2048,
+    sepToken: "\n\n",
+    stopToken: "\n\n",
+    extraStopSequences: null,
+  },
+  "bigscience/bloomz": {
+    modelCard: "https://huggingface.co/bigscience/bloomz",
+    license: "https://bit.ly/bloom-license",
+    maxSessionLength: 2048,
+    sepToken: "\n\n",
+    stopToken: "</s>",
+    extraStopSequences: ["\n\nHuman"],
+  },
+};
+var curModel = "meta-llama/Llama-2-70b-chat-hf";
+
+const generationParams = {
+  do_sample: 1,
+  temperature: 0.9,
+  top_p: 0.6,
+};
+
+var ws = null;
+var position = 0;
+const initialSessionLength = 512;
+var sessionLength = initialSessionLength;
+var connFailureBefore = false;
+
+var totalElapsed, nRequests;
+
+const Regime = {
+  CHATBOT: 1,
+  FEW_SHOT: 2,
+};
+let curRegime = Regime.CHATBOT;
+let stop = false;
+
+function openSession() {
+  let protocol = location.protocol == "https:" ? "wss:" : "ws:";
+  ws = new WebSocket(`${protocol}//${location.host}/api/v2/generate`);
+  ws.onopen = () => {
+    ws.send(JSON.stringify({type: "open_inference_session", model: curModel, max_length: sessionLength}));
+    ws.onmessage = event => {
+      const response = JSON.parse(event.data);
+      if (!response.ok) {
+        handleFailure(response.traceback);
+        return;
+      }
+
+      sendReplica();
+    };
+  };
+
+  ws.onerror = _event => handleFailure(`Connection failed`);
+  ws.onclose = _event => {
+    if ($(".error-box").is(":hidden")) {
+      handleFailure(`Connection was closed`, true);
+    }
+  };
+}
+
+function resetSession() {
+  if (ws !== null && ws.readyState <= 1) {  // If readyState is "connecting" or "opened"
+    ws.close();
+  }
+  ws = null;
+  position = 0;
+}
+
+function isWaitingForInputs() {
+  return $('.human-replica textarea').length >= 1;
+}
+
+function sendReplica() {
+  if (isWaitingForInputs()) {
+    const aiPrompt = (curRegime === Regime.CHATBOT) ? 'Assistant:' : '';
+    $('.human-replica:last').text($('.human-replica:last textarea').val());
+    $('.dialogue').append($(
+      '<p class="ai-replica">' +
+        `<span class="text">${aiPrompt}</span>` +
+        '<span class="loading-animation"></span>' +
+        '<span class="speed" style="display: none;"></span>' +
+        '<span class="generation-controls"><a class="stop-generation" href=#>stop generation</a></span>' +
+        '<span class="suggest-join" style="display: none;">' +
+          '<b>Too slow?</b> ' +
+          '<a target="_blank" href="https://github.com/bigscience-workshop/petals#connect-your-gpu-and-increase-petals-capacity">Connect your GPU</a> ' +
+          'and increase Petals capacity!' +
+        '</span>' +
+      '</p>'));
+    animateLoading();
+    $('.stop-generation').click(e => {
+      e.preventDefault();
+      console.log("Stop generation");
+      stop = true;
+    });
+  } else {
+    $('.loading-animation').show();
+  }
+
+  if (ws === null) {
+    openSession();
+    return;
+  }
+
+  const replicaDivs = $('.human-replica, .ai-replica .text');
+  var replicas = [];
+  for (var i = position; i < replicaDivs.length; i++) {
+    const el = $(replicaDivs[i]);
+    var phrase = el.text();
+    if (el.is(".human-replica")) {
+      phrase += models[curModel].sepToken;
+    } else
+    if (i < replicaDivs.length - 1) {
+      phrase += models[curModel].stopToken;
+    }
+    replicas.push(phrase);
+  }
+  const inputs = replicas.join("");
+  position = replicaDivs.length;
+
+  totalElapsed = 0;
+  nRequests = 0;
+  receiveReplica(inputs);
+}
+
+function receiveReplica(inputs) {
+  ws.send(JSON.stringify({
+    type: "generate",
+    inputs: inputs,
+    max_new_tokens: 1,
+    stop_sequence: models[curModel].stopToken,
+    extra_stop_sequences: models[curModel].extraStopSequences,
+    ...generationParams
+  }));
+
+  var lastMessageTime = null;
+  ws.onmessage = event => {
+    connFailureBefore = false;  // We've managed to connect after a possible failure
+
+    const response = JSON.parse(event.data);
+    if (!response.ok) {
+      handleFailure(response.traceback);
+      return;
+    }
+
+    if (lastMessageTime != null) {
+      totalElapsed += performance.now() - lastMessageTime;
+      nRequests++;
+    }
+    lastMessageTime = performance.now();
+
+    const lastReplica = $('.ai-replica .text').last();
+    var newText = lastReplica.text() + response.outputs;
+    newText = newText.replace(models[curModel].stopToken, "");
+    if (models[curModel].extraStopSequences !== null) {
+      for (const seq of models[curModel].extraStopSequences) {
+        newText = newText.replace(seq, "");
+      }
+    }
+    lastReplica.text(newText);
+
+    if (!response.stop && !stop) {
+      if (nRequests >= 1) {
+        const speed = nRequests / (totalElapsed / 1000);
+        $('.speed')
+          .text(`Speed: ${speed.toFixed(1)} tokens/sec`)
+          .show();
+        if (speed < 0.5) {
+          $('.suggest-join').show();
+        }
+      }
+    } else {
+      $('.loading-animation, .speed, .suggest-join, .generation-controls').remove();
+      resetSession();
+      appendTextArea();
+      stop = false;
+    }
+  };
+}
+
+function handleFailure(message, autoRetry = false) {
+  resetSession();
+  if (!isWaitingForInputs()) {
+    // Show the error and the retry button only if a user is waiting for the generation results
+
+    if (message === "Connection failed" && !connFailureBefore) {
+      autoRetry = true;
+      connFailureBefore = true;
+    }
+    if (/Session .+ expired/.test(message)) {
+      autoRetry = true;
+    }
+    if (/Maximum length exceeded/.test(message) && sessionLength < models[curModel].maxSessionLength) {
+      // We gradually increase sessionLength to save server resources. Default: 512 -> 2048 -> 8192 (if supported)
+      sessionLength = Math.min(sessionLength * 4, models[curModel].maxSessionLength);
+      autoRetry = true;
+    }
+
+    if (autoRetry) {
+      retry();
+    } else {
+      $('.loading-animation').hide();
+      if (/attention cache is full/.test(message)) {
+        $('.error-message').hide();
+        $('.out-of-capacity').show();
+      } else {
+        $('.out-of-capacity').hide();
+        $('.error-message').text(message).show();
+      }
+      $('.error-box').show();
+    }
+  }
+}
+
+function retry() {
+  $('.error-box').hide();
+  sendReplica();
+}
+
+function appendTextArea() {
+  const humanPrompt = (curRegime === Regime.CHATBOT) ? "Human: " : "";
+  $('.dialogue').append($(
+    `<p class="human-replica"><textarea class="form-control" id="exampleTextarea" rows="2">${humanPrompt}</textarea></p>`
+  ));
+  upgradeTextArea();
+}
+
+function upgradeTextArea() {
+  const textarea = $('.human-replica textarea');
+  autosize(textarea);
+  textarea[0].selectionStart = textarea[0].value.length;
+  textarea.focus();
+
+  textarea.on('keypress', e => {
+    if (e.which == 13 && !e.shiftKey) {
+      e.preventDefault();
+      sendReplica();
+    }
+  });
+}
+
+const animFrames = ["⌛", "🧠"];
+var curFrame = 0;
+
+function animateLoading() {
+  $('.loading-animation').html(' &nbsp;' + animFrames[curFrame]);
+  curFrame = (curFrame + 1) % animFrames.length;
+}
+
+$(() => {
+  upgradeTextArea();
+
+  $('.family-selector label').click(function (e) {
+    if (!isWaitingForInputs()) {
+      alert("Can't switch the model while the AI is writing a response. Please refresh the page");
+      e.preventDefault();
+      return;
+    }
+
+    const radio = $(`#${$(this).attr("for")}`);
+    if (radio.is(":checked")) {
+      setTimeout(() => $('.human-replica textarea').focus(), 10);
+      return;
+    }
+
+    const curFamily = radio.attr("value");
+    $('.model-selector').hide();
+    const firstLabel = $(`.model-selector[data-family=${curFamily}]`).show().children('label:first');
+    firstLabel.click();
+    firstLabel.trigger('click');
+  });
+  $('.model-selector label').click(function (e) {
+    if (!isWaitingForInputs()) {
+      alert("Can't switch the model while the AI is writing a response. Please refresh the page");
+      e.preventDefault();
+      return;
+    }
+
+    curModel = $(`#${$(this).attr("for")}`).attr("value");
+    if (curRegime === Regime.CHATBOT) {
+      $('.dialogue p').slice(2).remove();
+    } else {
+      $('.dialogue').empty();
+    }
+
+    sessionLength = initialSessionLength;
+    resetSession();
+    appendTextArea();
+
+    $('.model-name')
+      .text($(this).text())
+      .attr('href', models[curModel].modelCard);
+    $('.license-link').attr('href', models[curModel].license);
+    setTimeout(() => $('.human-replica textarea').focus(), 10);
+  });
+  $('.retry-link').click(e => {
+    e.preventDefault();
+    retry();
+  });
+
+  setInterval(animateLoading, 2000);
+});

static/index.html

@@ -0,0 +1,108 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-LENBCEYH86"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-LENBCEYH86');
+    </script>
+
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" class="js-site-favicon" type="image/png" href="./static/logo.svg">
+    <title>Petals &ndash; Decentralized platform for running large language models</title>
+    <link href="./static/bootstrap.min.css" rel="stylesheet">
+    <link href="./static/style.css" rel="stylesheet">
+  </head>
+  <body>
+
+<main>
+  <div class="position-relative overflow-hidden px-5 pt-1 m-md-4 text-center">
+    <div class="col-lg-6 col-md-8 p-md-3 mx-auto my-3" style="max-width: 700px;">
+      <div class="mb-4">
+        <div class="d-md-inline-block pe-md-4">
+          <a target="_blank" href="https://petals.dev"><img src="./static/logo.svg" height="100" class="rot-image"></a>
+        </div>
+        <h1 class="display-4 fw-bold d-md-inline-block justify-content-center" style="font-size: 40pt; vertical-align: middle;">
+          Petals
+          <span style="font-size: 25pt; color: #aaa;">Chat</span>
+        </h1>
+      </div>
+      <div class="welcome mb-4">
+        <div>
+          <b>Welcome!</b> This is a demo app running
+          <a target="_blank" class="model-name" href="https://huggingface.co/meta-llama/Llama-2-70b-chat-hf">LLaMA 2 (70B-chat)</a>
+          over the <a target="_blank" href="https://petals.dev">Petals</a> network.
+          Please follow the model's
+          <a target="_blank" class="license-link" href="https://bit.ly/llama2-license">terms of use</a>
+          and do not enter sensitive data.
+          The chat history is recorded.
+        </div>
+        <form id="settings">
+          <div class="mt-2">
+            <label class="group-label">Family:</label>
+            <div class="btn-group family-selector" role="group">
+              <input type="radio" class="btn-check" name="family" value="llama-2" id="family-llama-2" checked>
+              <label class="btn btn-outline-primary" for="family-llama-2">LLaMA 2</label>
+              <input type="radio" class="btn-check" name="family" value="llama" id="family-llama">
+              <label class="btn btn-outline-primary" for="family-llama">LLaMA</label>
+              <input type="radio" class="btn-check" name="family" value="bloom" id="family-bloom">
+              <label class="btn btn-outline-primary" for="family-bloom">BLOOM</label>
+            </div>
+          </div>
+          <div class="mt-2">
+            <label class="group-label">Model:</label>
+            <div class="model-selector btn-group" role="group" data-family="llama-2">
+              <input type="radio" class="btn-check" name="model" value="meta-llama/Llama-2-70b-chat-hf" id="meta-llama-2-70b-chat-hf" checked>
+              <label class="btn btn-outline-primary" for="meta-llama-2-70b-chat-hf">LLaMA 2 (70B-chat)</label>
+              <input type="radio" class="btn-check" name="model" value="meta-llama/Llama-2-70b-hf" id="meta-llama-2-70b-hf">
+              <label class="btn btn-outline-primary" for="meta-llama-2-70b-hf">LLaMA 2 (70B)</label>
+            </div>
+            <div class="model-selector btn-group" role="group" data-family="llama" style="display: none;">
+              <input type="radio" class="btn-check" name="model" value="timdettmers/guanaco-65b" id="model-guanaco-65b">
+              <label class="btn btn-outline-primary" for="model-guanaco-65b">Guanaco-65B</label>
+              <input type="radio" class="btn-check" name="model" value="enoch/llama-65b-hf" id="model-llama-65b-hf">
+              <label class="btn btn-outline-primary" for="model-llama-65b-hf">LLaMA-65B</label>
+            </div>
+            <div class="model-selector btn-group" role="group" data-family="bloom" style="display: none;">
+              <!-- <input type="radio" class="btn-check" name="model" value="bigscience/bloom" id="model-bloom">
+              <label class="btn btn-outline-primary" for="model-bloomz">BLOOM-176B</label> -->
+              <input type="radio" class="btn-check" name="model" value="bigscience/bloomz" id="model-bloomz">
+              <label class="btn btn-outline-primary" for="model-bloomz">BLOOMZ-176B</label>
+            </div>
+          </div>
+        </form>
+      </div>
+      <div class="dialogue">
+        <p class="human-replica">A chat between a curious human and an artificial intelligence assistant. The assistant gives helpful, detailed, and polite answers to the user's questions.</p>
+        <p class="ai-replica"><span class="text">Assistant: Hi! How can I help you?</span></p>
+        <p class="human-replica"><textarea class="form-control" id="exampleTextarea" rows="2">Human: </textarea></p>
+      </div>
+      <p class="error-box" style="display: none;">
+        Request failed. <a class="retry-link" href="#">Retry</a><br>
+        <span class="error-message"></span>
+        <span class="out-of-capacity"><br>
+          <b>We're out of capacity</b> &mdash; attention caches of existing servers are full.
+          Please come back later, or
+          <a target="_blank" href="https://github.com/bigscience-workshop/petals#connect-your-gpu-and-increase-petals-capacity">connect your GPU</a>
+          to increase Petals capacity now!
+        </span>
+      </p>
+
+      <p class="acknowledgements mt-5 pt-3">
+        <!-- <a class="show-few-shot" href="#">Few-shot mode</a><br> -->
+        <b>Shift+Enter</b> inserts newlines.<br>
+        See source code and API docs on <a target="_blank" href="https://github.com/petals-infra/chat.petals.dev">GitHub</a>.
+      </p>
+    </div>
+  </div>
+</main>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
+    <script src="./static/autosize.min.js"></script>
+    <script src="./static/chat.js"></script>
+  </body>
+</html>

static/style.css

@@ -0,0 +1,257 @@
+.container {
+  max-width: 960px;
+}
+
+/*
+ * Custom translucent site header
+ */
+
+.site-header {
+  background-color: rgba(0, 0, 0, .85);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  backdrop-filter: saturate(180%) blur(20px);
+}
+.site-header a {
+  color: #8e8e8e;
+  transition: color .15s ease-in-out;
+}
+.site-header a:hover {
+  color: #fff;
+  text-decoration: none;
+}
+
+/*
+ * Dummy devices (replace them with your own or something else entirely!)
+ */
+
+.product-device {
+  position: absolute;
+  right: 10%;
+  bottom: -30%;
+  width: 300px;
+  height: 540px;
+  background-color: #333;
+  border-radius: 21px;
+  transform: rotate(30deg);
+}
+
+.product-device::before {
+  position: absolute;
+  top: 10%;
+  right: 10px;
+  bottom: 10%;
+  left: 10px;
+  content: "";
+  background-color: rgba(255, 255, 255, .1);
+  border-radius: 5px;
+}
+
+.product-device-2 {
+  top: -25%;
+  right: auto;
+  bottom: 0;
+  left: 5%;
+  background-color: #e5e5e5;
+}
+
+
+/*
+ * Extra utilities
+ */
+
+.flex-equal > * {
+  flex: 1;
+}
+@media (min-width: 768px) {
+  .flex-md-equal > * {
+    flex: 1;
+  }
+}
+
+
+.form-control:focus {
+  /* From Bootswatch Flatly theme */
+  border-color: #969fa8;
+  box-shadow: 0 0 0 0.25rem rgb(44 62 80 / 25%);
+}
+
+
+.rot-image {
+  -webkit-animation:spin 4s linear infinite;
+  -moz-animation:spin 4s linear infinite;
+  animation:spin 60s linear infinite;
+}
+@-moz-keyframes spin {
+  100% { -moz-transform: rotate(360deg); }
+}
+@-webkit-keyframes spin {
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes spin {
+  100% {
+      -webkit-transform: rotate(360deg);
+      transform:rotate(360deg);
+  }
+}
+
+.lead {
+  font-size: 13pt;
+}
+
+main p {
+  font-size: 10pt;
+}
+
+.acknowledgements {
+  font-size: 9pt;
+}
+
+.feature-list {
+  padding-left: 0;
+}
+
+.feature-list li {
+  position: relative;
+  font-size: 10.5pt;
+  margin: 0;
+  padding-left: 50px;
+  list-style: none;
+  text-align: left;
+}
+
+.feature-list li:before {
+  content: " ";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 35px;
+  height: 100%;
+  box-sizing: border-box;
+  background-image: url("leaf.svg");
+  background-repeat: no-repeat;
+  background-position: left center;
+  background-size: 35px;
+}
+
+.human-replica, .ai-replica, .welcome, .error-box {
+  border: 1px solid #777;
+  border-radius: 10px;
+  padding: 10px 15px;
+  width: 90%;
+  max-width: 360px;
+  text-align: left;
+  word-wrap: break-word;
+}
+
+.human-replica, .ai-replica, .error-message {
+  white-space: pre-wrap;
+}
+
+.human-replica {
+  background-color: #f7f7ff;
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.human-replica:focus-within {
+  border: 2px solid black;
+  padding: 9px 14px;
+}
+
+.human-replica textarea {
+  background-color: #f7f7ff !important;
+  border: none;
+  resize: none;
+  padding: 0;
+  font-size: 10pt;
+}
+
+.human-replica textarea.form-control:focus {
+  border: none;
+  box-shadow: none;
+}
+
+.ai-replica {
+  background-color: #fff7f7;
+}
+
+.speed, .generation-controls, .suggest-join {
+  display: block;
+  color: #999;
+  font-size: 9pt;
+  line-height: 1.25;
+  margin-top: 7px;
+}
+
+.generation-controls a {
+  color: #999;
+}
+
+.welcome {
+  background-color: #fff7f7;
+  margin-left: auto;
+  margin-right: 0;
+  max-width: 400px;
+}
+
+@media (max-width: 767px) {
+  .welcome {
+    width: 100%;
+  }
+}
+
+.welcome div, .welcome label, .welcome .dropdown button {
+  font-size: 9pt;
+}
+
+.welcome .group-label {
+  padding-left: 0;
+  padding-right: 5px;
+}
+
+.welcome label {
+  padding: 1px 7px;
+}
+
+.welcome label, .welcome input {
+  box-shadow: none !important;
+}
+
+.welcome .btn-outline-primary, .welcome .btn-outline-primary:hover {
+  color: #333;
+  border-color: black;
+}
+
+.welcome .btn-check:active+.btn-outline-primary, .welcome .btn-check:checked+.btn-outline-primary {
+  color: #fff;
+  background-color: #333;
+  border-color: black;
+}
+
+.welcome .btn-outline-primary:hover {
+  color: black;
+  background-color: #ccc;
+  border-color: black;
+}
+
+.error-box {
+  font-size: 10pt;
+  background-color: #fcc;
+  margin-left: auto;
+  margin-right: 0;
+  max-width: 100%;
+  word-wrap: break-word;
+}
+
+.error-message {
+  font-family: monospace;
+  font-size: 8pt;
+}
+
+.out-of-capacity {
+  font-size: 9pt;
+}
+
+.reset-btn {
+  font-size: 9pt;
+}