A better API playground look for coders - via Tampermonkey script CSS

The API playground is a tremendous waste of display space. See how it looks if I want to read some code:

So I spent some time going after everything that can be improved with CSS, without actually rewriting the HTML. A monospace font for coders is just the start…

After:

(the dark theme is chosen, just to make sure changes are compatible.

I didn’t particularly validate against the assistants playground (because I don’t care about that), but it has some elements that also get monospace fonts.

Notable is putting the system message at the top - it’s part of the ‘conversation’, after all. The system text window is larger than depicted when you initially start a chat. Also, moving the “submit” button to the top emphasizes that you are sending the whole context every time you scroll past all the text to press it again. (CTRL-ENTER to send without finding it).

Want to try? I’ll let you!

This is enabled within Firefox by using the Tampermonkey extension. Once enabled, you can paste the script below into the “new script” option of the extension’s menu, save with the file menu, and refresh the playground page. The current state of the script is at “throw stuff at it until I’m happy”, but I’ll probably revisit this script with improvements or to address feedback.

(expand) Tampermonkey script for OpenAI playground v0.1
// ==UserScript==
// @name         PlaygroundStyler
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Change the font face and more on OpenAI Playground
// @author       _j
// @match        https://platform.openai.com/playground*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Inject a style tag into the head of the document
    GM_addStyle(`
        .text-input {
            background-color-disabled: #00000007 !important;
            font-size: 13px !important;
            line-height: 18px !important;
            padding: 2px !important;
            resize: none !important;
            transition: padding .2s ease-out !important;
            white-space: break-spaces !important;
            font-family: "Consolas", "Courier New", "Courier", monospace !important;
            border-radius: 0px !important;
            margin: 0px !important;
        }
        .chat-pg-exchange-container .chat-pg-message {
            border-bottom: 0px solid var(--gray-100);
            display: flex;
            flex-direction: column !important;
            padding: 0px 0px !important;
        }
        .chat-pg-message .chat-message-button-container {
            height: 24px ! important;
            align-self: end ! important;
        }
.chat-pg-body {
  display: flex;
  flex-direction: column !important;
}
.chat-pg-message {
  gap: 2px !important;
}
.chat-pg-message .chat-message-button-container .chat-message-remove-button {
  height: 20px;
  margin: 1px 0px !important;
  opacity: .6 ! important;
  transition: opacity .1s ease-out;
  width: 20px;
}
.text-input-with-header .subheading {
  padding: 22px 16px 12px;
  position: absolute;
  display: none !important;
}
.subheading {
  color: #000;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 18px !important;
  text-transform: lowercase !important;
  padding: 2px 2px !important;
  min-width: unset !important;
}
.chat-pg-message .chat-message-role .subheading .chat-message-role-text {
  border-radius: 4px !important;
  border: 1px dashed #bbf;
  padding: 0px !important;
  background-color: #eef;
  min-width: 60px !important;
  display: inline-block;
  text-align: center;
}
.btn-sm {
  font-size: 14px;
  line-height: 20px;
  padding: 2px 12px !important;
  border-radius: 4px !important;
}
.chat-pg-instructions textarea {
  min-height: 80px ! important;
}
.chat-pg-body > div {
  flex-direction: column-reverse !important;
}
.chat-pg-body > div:last-child {
  flex: 3 1;
  margin-left: 4px ! important;
}
.chat-pg-footer-inner {
  align-items: initial;
  display: flex;
  flex-direction: row-reverse !important;
}
.chat-pg-footer {
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse ! important;
}
.pg-editor {
  padding: 0px 0px 10px 4px !important;
}
.pg-right-content {
  padding-top: 2px !important;
  overflow: clip;
}
.css-pcafgv {
  margin-top: 0.1em;
}
.pg-right-content .parameter-panel-grid {
  display: block !important;
}
    `);
})();
(recommend) Tampermonkey script for OpenAI playground v0.2
// ==UserScript==
// @name         PlaygroundStyler
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Change the font face and more on OpenAI Playground
// @author       _j
// @match        https://platform.openai.com/playground*
// @grant        GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Inject a style tag into the head of the document

    GM_addStyle(`
@media (max-width: 999px) {
  .pg-right {
    flex: 0 0 auto !important;
    width: 220px !important;
        bottom: unset !important;
    left: unset !important;
    pointer-events: unset !important;
    position: relative !important;
    padding: 4px !important;
    right: unset !important;
    top: unset !important;
    z-index: 20 !important;
}
  .pg-right-content {
    background: unset !important;
    left: auto !important;
    padding-top: unset !important;
    -webkit-transform: unset !important;
    transform: unset !important;
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s,-webkit-transform .3s;
    width: 220px !important;
    z-index: 21 !important;
  }
 .pg-right-panel-mobile-close {
    display: none !important;
  }
  .pg-right .parameter-panel {
    padding: 4px !important;
  }
  .pg-advanced-toggle { display: none ! important }
}

}
.pg-content-body {
  flex: fit-content !important;
}
.pg-right .parameter-panel {
    padding: 4px !important;
}
.text-input {
    background-color-disabled: #00000007 !important;
    font-size: 13px !important;
    line-height: 18px !important;
    padding: 2px !important;
    resize: none !important;
    transition: padding .2s ease-out;
    white-space: break-spaces;
    font-family: "Consolas", "Courier New", "Courier", monospace !important;
    border-radius: 0px !important;
    margin: 0px !important;
}
.chat-pg-exchange-container .chat-pg-message {
    border-bottom: 0px solid var(--gray-100);
    display: flex;
    xxxflex-direction: column !important;
    padding: 0px 0px !important;
}
.chat-pg-message .chat-message-button-container {
    height: 24px ! important;
    align-self: end ! important;
}
.chat-pg-body {
  display: flex;
  flex-direction: column !important;
}
.chat-pg-body > div:first-child {
  flex: 1 1 !important;
}
.chat-pg-message {
  gap: 2px !important;
}
.chat-pg-message .chat-message-button-container .chat-message-remove-button {
  height: 20px;
  margin: 1px 0px !important;
  opacity: .6 ! important;
  transition: opacity .1s ease-out;
  width: 20px;
}
.text-input-with-header .subheading {
  padding: 22px 16px 12px;
  position: absolute;
  display: none !important;
}
.subheading {
  color: #000;
  font-size: 13px !important;
  font-weight: 400;
  letter-spacing: 0em;
  line-height: 18px !important;
  text-transform: lowercase !important;
  padding: 2px 2px !important;
  min-width: unset !important;
}
.chat-pg-message .chat-message-role .subheading .chat-message-role-text {
  border-radius: 4px !important;
  border: 1px dashed #bbf;
  padding: 0px !important;
  background-color: #eef;
  min-width: 60px !important;
  display: inline-block;
  text-align: center;
}
.btn-sm {
  font-size: 12px !important;
  line-height: 22px !important;
  padding: 2px 12px !important;
  border-radius: 4px !important;
}
.chat-pg-instructions textarea {
  min-height: 80px ! important;
}
.chat-pg-body > div {
  xxxflex-direction: column-reverse !important;
}
.chat-pg-body > div:last-child {
  flex: 3 1;
  margin-left: 4px ! important;
}
.chat-pg-footer-inner {
  align-items: initial;
  display: flex;
  xxxflex-direction: row-reverse !important;
}
.chat-pg-footer {
  display: flex;
  justify-content: space-between;
  xxxflex-direction: row-reverse ! important;
}
.pg-editor {
  padding: 0px 0px 10px 4px !important;
}
.pg-right-content {
  padding-top: unset !important;
  overflow: clip !important;
}
.css-pcafgv {
  margin-top: 0.1em !important;
}
.rc-slider {
  margin-left: 0.5em !important;
}
.pg-header {height: unset !important;
  padding: 5px 24px !important;}
.pg-right-content .parameter-panel-grid {
  display: block;
  grid-gap: 0px !important;
}
    `);
})();
4 Likes

Hey _j, do you have discord or another offsite account I can contact you at? Have seen you a lot around this forum and you seem to have the best grasp of what’s going on. Banging my head against the wall on building a more complex agent right now

You can pose a new forum topic question and get a village to help you out, with benefit to all.

3 Likes

Good work! Thanks for sharing :heart:

This might be what finally convinces me to download tamper monkey. I think it would be absolutely amazing if someone from OpenAI could take the hint here :sweat_smile:

1 Like

I’ve gone at the playground “chat” in a different way - instead of significantly changing the UI, I’ve simply made it work right. Regardless of the size. Tampermonkey script v0.2 above.

Good for screenshots at any size, and the parameter controls never disappear:

And of course great for reading code.

For most us who don’t use TamperMonkey or GreaseMonkey, you can create a Bookmarklet that adds the excellent styleSheet listed above.
( See this Gist for an example usage: OpenAIPlaygroundShowPresets.js -- Bookmarklet to fix March 2024 CSS regressive bug (~"GM_addStyle" but without TamperMonkey or GreaseMonkey) · GitHub )


globalThis.GM_addStyle = globalThis.GM_addStyle || ( function(innerText) {
  let doc = document;
  let head = doc.head || doc.body;
  let style=doc.createElement("style");
  style.type="text/css";
  style.innerText=innerText;
  
  if(head) head.appendChild(style);

} );

GM_addStyle(`--the CSS
will go here--`);

1 Like