Skip to content

Instantly share code, notes, and snippets.

@DarrenSem

DarrenSem/OpenAIPlaygroundShowPresets.js

Last active March 17, 2024 16:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save DarrenSem/8a51d21e480cbeb70a9f6a86ddce4236 to your computer and use it in GitHub Desktop.
Save DarrenSem/8a51d21e480cbeb70a9f6a86ddce4236 to your computer and use it in GitHub Desktop.
Download ZIP
OpenAIPlaygroundShowPresets.js -- Bookmarklet to fix March 2024 CSS regressive bug (~"GM_addStyle" but without TamperMonkey or GreaseMonkey)
Raw
OpenAIPlaygroundShowPresets.js
// OpenAIPlaygroundShowPresets.js -- Bookmarklet to fix March 2024 CSS regressive bug (~"GM_addStyle" but without TamperMonkey or GreaseMonkey)
// by Darren Semotiuk, see: https://community.openai.com/t/playground-recent-ui-changes-broke-mobile-experience/687130
// BOOKMARKLET* for those of us not running TamperMonkey or GreaseMonkey
// *Simply add the one-liner below as a Favorite/Bookmark in your browser, no extensions required!
javascript:void function(){globalThis.GM_addStyle=globalThis.GM_addStyle||function(a){let b=document,c=b.head||b.body,d=b.createElement("style");d.type="text/css",d.innerText=a,c&&c.appendChild(d)},GM_addStyle("@media(max-width:500px){.pg-header-actions,.pg-header-section-settings,.pg-preset-select-container{display:block !important}}")}();
// raw source of above Bookmarklet:
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("@media(max-width:500px){.pg-header-actions,.pg-header-section-settings,.pg-preset-select-container{display:block !important}");
// alert(document.styleSheets.length); // for testing to confirm it ran in OpenAI's JavaScript sandbox
@DarrenSem
Copy link
Author

More advanced CSS changes (might not look good in mobile though): "A better API playground look for coders - via Tampermonkey script CSS" -- by Jay F (_j) @ https://community.openai.com/t/a-better-api-playground-look-for-coders-via-tampermonkey-script-css/680264

// standalone Bookmarklet version of his TM script:

javascript:void function(){globalThis.GM_addStyle=globalThis.GM_addStyle||function(a){let b=document,c=b.head||b.body,d=b.createElement("style");d.type="text/css",d.innerText=a,c&&c.appendChild(d)},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%20!important;%20%20%20%20font-size:%2013px%20!important;%20%20%20%20line-height:%2018px%20!important;%20%20%20%20padding:%202px%20!important;%20%20%20%20resize:%20none%20!important;%20%20%20%20transition:%20padding%20.2s%20ease-out;%20%20%20%20white-space:%20break-spaces;%20%20%20%20font-family:%20%22Consolas%22,%20%22Courier%20New%22,%20%22Courier%22,%20monospace%20!important;%20%20%20%20border-radius:%200px%20!important;%20%20%20%20margin:%200px%20!important;}.chat-pg-exchange-container%20.chat-pg-message%20{%20%20%20%20border-bottom:%200px%20solid%20var(--gray-100);%20%20%20%20display:%20flex;%20%20%20%20xxxflex-direction:%20column%20!important;%20%20%20%20padding:%200px%200px%20!important;}.chat-pg-message%20.chat-message-button-container%20{%20%20%20%20height:%2024px%20!%20important;%20%20%20%20align-self:%20end%20!%20important;}.chat-pg-body%20{%20%20display:%20flex;%20%20flex-direction:%20column%20!important;}.chat-pg-body%20%3E%20div:first-child%20{%20%20flex:%201%201%20!important;}.chat-pg-message%20{%20%20gap:%202px%20!important;}.chat-pg-message%20.chat-message-button-container%20.chat-message-remove-button%20{%20%20height:%2020px;%20%20margin:%201px%200px%20!important;%20%20opacity:%20.6%20!%20important;%20%20transition:%20opacity%20.1s%20ease-out;%20%20width:%2020px;}.text-input-with-header%20.subheading%20{%20%20padding:%2022px%2016px%2012px;%20%20position:%20absolute;%20%20display:%20none%20!important;}.subheading%20{%20%20color:%20#000;%20%20font-size:%2013px%20!important;%20%20font-weight:%20400;%20%20letter-spacing:%200em;%20%20line-height:%2018px%20!important;%20%20text-transform:%20lowercase%20!important;%20%20padding:%202px%202px%20!important;%20%20min-width:%20unset%20!important;}.chat-pg-message%20.chat-message-role%20.subheading%20.chat-message-role-text%20{%20%20border-radius:%204px%20!important;%20%20border:%201px%20dashed%20#bbf;%20%20padding:%200px%20!important;%20%20background-color:%20#eef;%20%20min-width:%2060px%20!important;%20%20display:%20inline-block;%20%20text-align:%20center;}.btn-sm%20{%20%20font-size:%2012px%20!important;%20%20line-height:%2022px%20!important;%20%20padding:%202px%2012px%20!important;%20%20border-radius:%204px%20!important;}.chat-pg-instructions%20textarea%20{%20%20min-height:%2080px%20!%20important;}.chat-pg-body%20%3E%20div%20{%20%20xxxflex-direction:%20column-reverse%20!important;}.chat-pg-body%20%3E%20div:last-child%20{%20%20flex:%203%201;%20%20margin-left:%204px%20!%20important;}.chat-pg-footer-inner%20{%20%20align-items:%20initial;%20%20display:%20flex;%20%20xxxflex-direction:%20row-reverse%20!important;}.chat-pg-footer%20{%20%20display:%20flex;%20%20justify-content:%20space-between;%20%20xxxflex-direction:%20row-reverse%20!%20important;}.pg-editor%20{%20%20padding:%200px%200px%2010px%204px%20!important;}.pg-right-content%20{%20%20padding-top:%20unset%20!important;%20%20overflow:%20clip%20!important;}.css-pcafgv%20{%20%20margin-top:%200.1em%20!important;}.rc-slider%20{%20%20margin-left:%200.5em%20!important;}.pg-header%20{height:%20unset%20!important;%20%20padding:%205px%2024px%20!important;}.pg-right-content%20.parameter-panel-grid%20{%20%20display:%20block;%20%20grid-gap:%200px%20!important;}%20%20%20%20%60)}();



// raw source of above Bookmarklet:

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

} );

// @name         PlaygroundStyler
// @version      0.2
// @description  Change the font face and more on OpenAI Playground
// @author       _j

    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;
}
    `);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment