public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600|Roboto Mono' rel='stylesheet' type='text/css' />
    <link href='//fonts.googleapis.com/css?family=Dosis:500&text=LabelStudio' rel='stylesheet' type='text/css' />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="stylesheet" href="%PUBLIC_URL%/styles/main.css">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
      -->
    <title>Label Studio</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>

    <div id="header">
      <a id="logo" href="/">
        <img src="./images/ls_logo.png" alt="label studio logo">
        <span style="font-size: 1.2em;">Label Studio</span>
      </a>
      <ul id="nav">
        <li><a style="margin-right: 1em; text-decoration: underline;" href="https://labelstud.io/guide">Guide</a></li>
        <li><a class="github-button" href="https://github.com/heartexlabs/label-studio"
           data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star heartexlabs/label-studio on GitHub"><img src="./images/GitHub-Mark-64px.png" height="25" /></a></li>
      </ul>
    </div>

    <div id="ls-container">
      <div id="label-studio"></div>
    </div>
    <footer class="footer">Made by <a target="_blank" href="https://heartex.net">Heartex</a> in San Francisco
      <br/><br/>
      <img src="./images/3nowhite.svg" height="80" />
    </footer>

    <script>
      (function (d, o) {
          d.domReady = function (n, a) {
              o.addEventListener && o.addEventListener("DOMContentLoaded", function e(t) {
                  o.removeEventListener("DOMContentLoaded", e), n.call(a || d, t)
              }) || o.attachEvent && o.attachEvent("onreadystatechange", function e(t) {
                  "complete" === o.readyState && (o.detachEvent("onreadystatechange", e), n.call(a || d, t))
              })
          }
      })(window, document);
    </script>
    <script>
      domReady(function () {
        var ls = new LabelStudio("label-studio", {

          description: "Description",

          interfaces: [
            "controls",
            "completions:menu",
            "completions:add-new",            
            "completions:delete",              
            "predictions:menu",
            "panel",
            "side-column",
            "update",
          ],
          
          task: {
            completions: [],
            predictions: [],
            id: 1,
            data: {
              image: "https://htx-misc.s3.amazonaws.com/opensource/label-studio/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg"
            }
          }
        });

      });
    </script>
  </body>
</html>