Copy data as JSON from OpenAI ChatGPT 3.5 Turbo playground bookmarklet

extract_copy_parameters.js

javascript: (function () { const messagesArray = []; messagesArray.push({ role: "system", message: document.querySelector(".chat-pg-instructions textarea").value }); const chatExchange = document.querySelector('.chat-pg-exchange'); const chatMessages = chatExchange.querySelectorAll('.chat-pg-message'); chatMessages.forEach(message => { const el = message.querySelector('.chat-message-role-text'); if (!el) { return; } const role = el.textContent; const messageTextarea = message.querySelector('.text-input'); if (!messageTextarea) { return; } const messageValue = messageTextarea.value; const messageObject = { role: role, message: messageValue }; messagesArray.push(messageObject); }); const messagesJSON = JSON.stringify(messagesArray); console.log(messagesJSON); const params = {}; const parameterPanelGrid = document.querySelector('.parameter-panel-grid'); const textContents = ['Temperature', 'Top P', 'Frequency penalty', 'Presence penalty']; const elements = parameterPanelGrid.querySelectorAll('*'); for (let i = 0; i < elements.length; i++) { const element = elements[i]; const textContent = element.textContent.trim(); if (textContents.includes(textContent)) { const input = element.nextElementSibling; if (input && input.tagName === 'INPUT') { params[textContent] = input.value; } } } console.log(params); const paramsJSON = JSON.stringify({ messages: messagesArray, params: params }); navigator.clipboard.writeText(paramsJSON) .then(() => { alert('Input values copied to clipboard.'); }) .catch((error) => { alert(`Failed to copy input values to clipboard: ${error}`); }); })();

Create a bookmarklet and press the button when you want to copy to clipboard the current state of your chat playground.

It extracts as JSON:

1. System message
2. Role messages
3. Parameters

{ 
  messages: [],
  params: {}
}

(mostly written by ChatGPT)

@acip Thanks, this was really helpful.

However, I made a few updates with fixes and enhancements:

(function () {
    console.log('OpenAI extract playground chat script loaded');

    // Function to export chat when button is clicked
    function exportChat() {
        // Array to store messages
        const messagesArray = [];

        // Push system message to the array
        messagesArray.push({
            role: "system",
            message: document.querySelector("[placeholder='You are a helpful assistant.']").value
        });

        // Select the chat exchange element and its messages
        const chatExchange = document.querySelector('.chat-pg-exchange');
        const chatMessages = chatExchange.querySelectorAll('.chat-pg-message');

        // Iterate through each message
        chatMessages.forEach(message => {
            const el = message.querySelector('.chat-message-role-text');
            if (!el) {
                return;
            }
            // Get role and message content
            const role = el.textContent;
            const messageTextarea = message.querySelector('.text-input');
            if (!messageTextarea) {
                return;
            }
            const messageValue = messageTextarea.value;
            const messageObject = {
                role: role,
                message: messageValue
            };
            // Push message object to messagesArray
            messagesArray.push(messageObject);
        });

        // Convert messagesArray to JSON
        const messagesJSON = JSON.stringify(messagesArray);
        console.log(messagesJSON);

        // Object to store parameters
        const params = {};

        // Select parameter panel grid and relevant text contents
        const parameterPanelGrid = document.querySelector('.parameter-panel-grid');
        const textContents = ['Temperature', 'Top P', 'Frequency penalty', 'Presence penalty'];

        // Iterate through elements in panel grid
        const elements = parameterPanelGrid.querySelectorAll('*');
        for (let i = 0; i < elements.length; i++) {
            const element = elements[i];
            const textContent = element.textContent.trim();
            if (textContents.includes(textContent)) {
                // If text content matches, get input value and store in params
                const input = element.nextElementSibling;
                if (input && input.tagName === 'INPUT') {
                    params[textContent] = input.value;
                }
            }
        }

        // Convert params to JSON
        console.log(params);
        const paramsJSON = JSON.stringify({ messages: messagesArray, params: params });

        // Copy paramsJSON to clipboard
        navigator.clipboard.writeText(paramsJSON)
            .then(() => {
                alert('Input values copied to clipboard.');
            })
            .catch((error) => {
                alert(`Failed to copy input values to clipboard: ${error}`);
            });
    }

    // Create and style "export chat" button
    const exportButton = document.createElement('button');
    exportButton.textContent = 'Export Chat';
    exportButton.style.position = 'fixed';
    exportButton.style.top = '10px';
    exportButton.style.left = '10px';
    exportButton.style.zIndex = '9999';
    exportButton.style.padding = '10px';
    exportButton.style.background = '#007bff';
    exportButton.style.color = '#fff';
    exportButton.style.border = 'none';
    exportButton.style.cursor = 'pointer';
    exportButton.style.borderRadius = '5px';

    // Attach exportChat function to button click event
    exportButton.addEventListener('click', exportChat);

    // Append button to body
    document.body.appendChild(exportButton);

})();

I unobfustucated the code because I Edge did not support bookmarklet, so instead, I used this CSS and JS injector to inject the js to the page
.