CodePen Embed - OpenAI GPT3 Playground using Semantic UI

<div class="ui container">
    <br>
    <div class="ui secondary menu">
      <div class="header item">
        <img src="https://keenml.com/favicon.ico">
      </div>
      <a class="active item">
        Sandbox
      </a>
      <a class="item">
        Documentation
      </a>
      <a class="item">
        Examples
      </a>
      <div class="right menu">
        <div class="item">
          <div class="ui action left icon input">
            <i class="search icon"></i>
            <input type="text" placeholder="Search">
            <button class="ui button">Submit</button>
          </div>
        </div>

        <a class="ui item">
          <img src="https://semantic-ui.com/images/avatar2/large/kristy.png" class="ui avatar image">

        </a>
      </div>
    </div>
    <div class="ui divider"></div>
    <br>
    <div class="ui grid">
      <div class="four wide column">
        <h2 class="ui header">Sandbox&nbsp; <i class="info circle icon"></i></h2>
        <div class="ui vertical menu">

          <div class="header item">Engine</div>
          <div class="ui item">
            <div class="ui fluid selection dropdown" id="engine">
              <div class="text">select</div> <!-- local storage ofzo pulldn -->
              <i class="dropdown icon"></i>
              <div class="menu">
                <div class="header">Base</div>
                <div class="item" data-value="davinci">davinci</div>
                <div class="item" data-value="curie">curie</div>
                <div class="item" data-value="babbage">babbage</div>
                <div class="item" data-value="ada">ada</div>
                <div class="header">Instruct</div>
                <div class="item" data-value="davinci-instruct-beta">davinci-instruct-beta</div>
                <div class="item" data-value="curie-instruct-beta">curie-instruct-beta</div>
              </div>
            </div>
          </div>

          <div class="item">Response Length <div class="ui basic label transparent" data-property="length"></div>
          </div>
          <div class="item">
            <div class="ui range keen" id="range-length"></div>
          </div>

          <a class="item">Temperature <div class="ui basic label transparent" data-property="temperature"></div></a>
          <div class="item">
            <div class="ui range keen" id="range-temperature"></div>
          </div>

          <a class="item">Top P <div class="ui basic label transparent" data-property="top_p"></div></a>
          <div class="item">
            <div class="ui range keen" id="range-top_p"></div>
          </div>

          <a class="item">Frequency Penalty <div class="ui basic label transparent" data-property="frequency_penalty">
            </div></a>
          <div class="item">
            <div class="ui range keen" id="range-frequency_penalty"></div>
          </div>

          <a class="item">Presence Penalty <div class="ui basic label transparent" data-property="presence_penalty">
            </div></a>
          <div class="item">
            <div class="ui range keen" id="range-presence_penalty"></div>
          </div>

          <div class="header item">Stop Sequences</div>
          <div class="ui form">
            <div class="field">
              <input type="text" name="stop-sequences" style="">
            </div>
            <div class="item">
              <div class="field">
                <a class="ui label">↵<i class="delete icon"></i></a>
                <a class="ui label">↵You: <i class="delete icon"></i></a>
                <a class="ui label">↵Me: <i class="delete icon"></i></a>
              </div>
            </div>
          </div>


          <!--<a class="item">Best Of <div class="ui basic label transparent" data-property="temperature"></div></a>
			<div class="item">
				<div class="ui range keen" id="range-temperature"></div>
			</div>-->


        </div>


      </div>
      <div class="twelve wide column">
        <div class="ui form">


          <div class="field">
            <button class="ui icon basic mini button">
              <i class="exclamation triangle icon"></i>
            </button>
            <button class="ui icon basic mini button">
              <i class="save icon"></i>
            </button>
            <button class="ui icon basic mini button">
              <i class="trash icon"></i>
            </button>
            <button class="ui icon basic mini button">
              <i class="upload icon"></i>
            </button>
            <button class="ui icon basic mini button">
              <i class="code icon"></i>
            </button>



            <div class="ui dropdown" id="presets">
              <div class="text">Load a preset</div>
              <i class="dropdown icon"></i>
              <div class="menu">
                <div class="item">New</div>
                <div class="item">
                  <span class="description">ctrl + o</span>
                  Open...
                </div>
                <div class="item">
                  <span class="description">ctrl + s</span>
                  Save as...
                </div>
                <div class="item">
                  <span class="description">ctrl + r</span>
                  Rename
                </div>
                <div class="item">Make a copy</div>
                <div class="item">
                  <i class="folder icon"></i>
                  Move to folder
                </div>
                <div class="item">
                  <i class="trash icon"></i>
                  Move to trash
                </div>
                <div class="divider"></div>
                <div class="item">Download As...</div>
                <div class="item">
                  <i class="dropdown icon"></i>
                  Publish To Web
                  <div class="menu">
                    <div class="item">Google Docs</div>
                    <div class="item">Google Drive</div>
                    <div class="item">Dropbox</div>
                    <div class="item">Adobe Creative Cloud</div>
                    <div class="item">Private FTP</div>
                    <div class="item">Another Service...</div>
                  </div>
                </div>
                <div class="item">E-mail Collaborators</div>
              </div>
            </div>
          </div>
          <div class="field">
            <textarea placeholder="Some example text..." style="height: 100vh !important;"></textarea>
          </div>
        </div>
      </div>
    </div>
  </div>

/*!
 * # Range slider for Semantic UI.
 * 
 */

.ui.range {
	width: 100%;
	height: 20px;
}

.ui.range .inner {
	margin: 0 10px 0 10px;
	height: 20px;
	position: relative;
}

.ui.range .inner:hover {
	cursor: pointer;
}

.ui.range .inner .track {
	position: absolute;
	width: 100%;
	height: 4px;
	border-radius: 4px;
	top: 9px;
	left: 0;
	background-color: rgba(0,0,0,.05);
}

.ui.inverted.range .inner .track {
	background-color: rgba(255,255,255,.08);
}

.ui.range .inner .track-fill {
	position: absolute;
	width: 0;
	height: 4px;
	border-radius: 4px;
	top: 9px;
	left: 0;
	background-color: #1b1c1d;
}

.ui.inverted.range .inner .track-fill {
	background-color: #545454;
}

.ui.range .inner .thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	
	background: #fff linear-gradient(transparent, rgba(0, 0, 0, 0.05));
	background: #fff -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
	background: #fff -o-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
	background: #fff -moz-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
	border-radius: 100%;
	box-shadow: 0 1px 2px 0 rgba(34,36,38,.15),0 0 0 1px rgba(34,36,38,.15) inset;
}


/* Keen color a885e1 */
.ui.keen.range .inner .track-fill {
	background-color: #a885e1;
}
.ui.keen.inverted.range .inner .track-fill {
	background-color: #FF695E;
}

/*--------------
     Colors
---------------*/

/* Red */
.ui.red.range .inner .track-fill {
	background-color: #DB2828;
}
.ui.red.inverted.range .inner .track-fill {
	background-color: #FF695E;
}

/* Orange */
.ui.orange.range .inner .track-fill {
	background-color: #F2711C;
}
.ui.orange.inverted.range .inner .track-fill {
	background-color: #FF851B;
}

/* Yellow */
.ui.yellow.range .inner .track-fill {
	background-color: #FBBD08;
}
.ui.yellow.inverted.range .inner .track-fill {
	background-color: #FFE21F;
}

/* Olive */
.ui.olive.range .inner .track-fill {
	background-color: #B5CC18;
}
.ui.olive.inverted.range .inner .track-fill {
	background-color: #D9E778;
}

/* Green */
.ui.green.range .inner .track-fill {
	background-color: #21BA45;
}
.ui.green.inverted.range .inner .track-fill {
	background-color: #2ECC40;
}

/* Teal */
.ui.teal.range .inner .track-fill {
	background-color: #00B5AD;
}
.ui.teal.inverted.range .inner .track-fill {
	background-color: #6DFFFF;
}

/* Blue */
.ui.blue.range .inner .track-fill {
	background-color: #2185D0;
}
.ui.blue.inverted.range .inner .track-fill {
	background-color: #54C8FF;
}

/* Violet */
.ui.violet.range .inner .track-fill {
	background-color: #6435C9;
}
.ui.violet.inverted.range .inner .track-fill {
	background-color: #A291FB;
}

/* Purple */
.ui.purple.range .inner .track-fill {
	background-color: #A333C8;
}
.ui.purple.inverted.range .inner .track-fill {
	background-color: #DC73FF;
}

/* Pink */
.ui.pink.range .inner .track-fill {
	background-color: #E03997;
}
.ui.pink.inverted.range .inner .track-fill {
	background-color: #FF8EDF;
}

/* Brown */
.ui.brown.range .inner .track-fill {
	background-color: #A5673F;
}
.ui.brown.inverted.range .inner .track-fill {
	background-color: #D67C1C;
}

/* Grey */
.ui.grey.range .inner .track-fill {
	background-color: #767676;
}
.ui.grey.inverted.range .inner .track-fill {
	background-color: #DCDDDE;
}

/* Black */
.ui.black.range .inner .track-fill {
	background-color: #1b1c1d;
}
.ui.black.inverted.range .inner .track-fill {
	background-color: #545454;
}

/*--------------
    Disabled
---------------*/
.ui.range.disabled {
	opacity: .5;
}

.ui.range.disabled .inner:hover {
	cursor: auto;
}

.ui.range.disabled .inner .track-fill {
	background: #ccc;
}

/* for transparent label */
.transparent {
  background: transparent !important;
  color: rgba(0, 0, 0, .87) !important;
}

$(document).ready(function () {
      $('#engine')
        .dropdown({
          clearable: false,
          action: function (text, value) {
            // nothing built in occurs
            console.info({
              text,
              value
            })
            $('#engine').dropdown('set selected', value)
              .dropdown('hide')
          }
        });

      $('#presets')
        .dropdown({
          clearable: false,
          action: function (text, value) {
            // nothing built in occurs
            console.info({
              text,
              value
            })
            $('#engine').dropdown('set selected', value)
              .dropdown('hide')
          }
        });

      $('#range-temperature').range({
        min: 0,
        max: 1,
        step: 0.01,
        start: 0,
        onChange: function (value) {
          $('*[data-property="temperature"]').html(value)
        }
      })

      $('#range-length').range({
        min: 0,
        max: 2048,
        step: 1,
        start: 0,
        onChange: function (value) {
          $('*[data-property="length"]').html(value)
        }
      })

      $('#range-top_p').range({
        min: 0,
        max: 1,
        step: 0.01,
        start: 0,
        onChange: function (value) {
          $('*[data-property="top_p"]').html(value)
        }
      })

      $('#range-frequency_penalty').range({
        min: 0,
        max: 1,
        step: 0.01,
        start: 0,
        onChange: function (value) {
          $('*[data-property="frequency_penalty"]').html(value)
        }
      })

      $('#range-presence_penalty').range({
        min: 0,
        max: 1,
        step: 0.01,
        start: 0,
        onChange: function (value) {
          $('*[data-property="presence_penalty"]').html(value)
        }
      })
    })

Run Pen

This Pen is owned by Jochem Stoel on CodePen.

See more by @jochemstoel on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.