6/10 Version
<html>
<head>
<title>My Text File as HTML</title>
<style id="userStyles">
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #333;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #000;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox,
.assistantOutput {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.assistantMessage {
color: #006400;
}
.systemMessage {
color: #8b0000;
}
.userMessage {
color: #0000ff;
}
.messageBox pre {
white-space: pre-wrap;
}
</style>
</head>
<body>
<p>User Input: <span id="userInputPreview" class="userInput messageBox escapeKey" contenteditable="true"></span></p>
<p>Selected Assistant Messages: <span id="selectedAssistantMessages" class="assistantOutput" contenteditable="true"></span></p>
<p>System Input: <span id="systemInputPreview" class="systemInput messageBox escapeKey" contenteditable="true"></span></p>
<div>
<label for="modelSelect">Select Model:</label>
<select id="modelSelect">
<option value=modelSelect>gpt-3.5-turbo</option>
<option value=modelSelect>gpt-4</option>
<option value=modelSelect>gpt-4-0314</option>
<option value=modelSelect>gpt-4-32k</option>
<option value=modelSelect>gpt-4-32k-0314</option>
<option value=modelSelect>gpt-3.5-turbo-0301</option>
</select>
</div>
<p>This correctly displays and spans accordingly to theme.</p>
<input type="text" id="userInput" placeholder="Enter your question">
<input type="text" id="systemInput" placeholder="Enter system role content">
<button onclick="sendUserInput()">Submit</button>
<div id="output"></div>
<input type="file" id="completionsFile" accept=".json, .txt" />
<button onclick="loadCompletionsFromFile()">Load Completions</button>
<button onclick="saveConversations()">Save Conversations</button>
<div id="abstractionsSection">
<h2>Abstractions</h2>
</div>
<div>
<label for="abstractionName">Abstraction Name:</label>
<input type="text" id="abstractionName" placeholder="Enter Abstraction Name">
</div>
<div>
<label for="abstractionContent">Abstraction Content:</label>
<textarea id="abstractionContent" placeholder="Enter Abstraction Content"></textarea>
</div>
<button id="saveAbstraction" onclick="saveAbstraction()">Save Abstraction</button>
<button id="deleteAbstraction" onclick="deleteAbstraction()">Delete Abstraction</button>
<div>
<h2>Enter your CSS:</h2>
<textarea id="cssInput" style="width: 100%; height: 200px;"></textarea>
<button id="applyButton">Apply CSS</button>
<button id="defaultThemeButton">Load Default Theme</button>
<button id="darkThemeButton">Load Dark Theme</button>
<button id="loadCustomThemeButton">Load Custom Theme</button>
<button id="saveCustomThemeButton">Save Custom Theme</button>
</div>
<script>
const apiKey = "sk-Redacted";
const abstractions = {};
function callOpenAI(input, model) {
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: model,
messages: input
})
};
fetch('https://api.openai.com/v1/chat/completions', requestOptions)
.then(response => response.json())
.then(data => {
const response = data.choices[0];
saveCompletion(input, response);
})
.catch(error => {
console.error('Error:', error);
});
}
function sendUserInput(event) {
const userInput = document.getElementById('userInputPreview');
const systemInput = document.getElementById('systemInputPreview');
const selectedOutputs = appendOutputsToPrompt();
const modelSelect = document.getElementById('modelSelect');
const selectedModel = modelSelect.value;
const customThemeCss = cssInput.value;
// Check if the spacebar key is pressed
if (event && event.keyCode === 32) {
const userInputContent = userInput.textContent;
const lastWord = userInputContent.trim().split(' ').pop();
// Check if the last word matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, content]) => {
if (lastWord === content) {
userInput.innerHTML = userInputContent.slice(0, -lastWord.length) + `<div class="abstractionBox" onclick="editAbstraction('${name}', '${content}')">${name}</div> `;
}
});
}
// Append the selected outputs to the conversation
const conversation = [
{ role: 'system', content: systemInput.textContent },
...selectedOutputs,
{ role: 'user', content: userInput.textContent }
];
// Include the customThemeCss in the user input if it is not empty
if (customThemeCss.trim() !== '') {
conversation.push({ role: 'user', content: customThemeCss });
}
document.getElementById('userInput').value = userInput.textContent;
document.getElementById('systemInput').value = systemInput.textContent;
callOpenAI(conversation, selectedModel);
}
function saveCompletion(input, response) {
const customThemeCss = input.find(item => item.role === 'user' && item.content !== undefined)?.content;
const completion = {
input: input,
response: response,
customThemeCss: customThemeCss
};
const previousCompletions = getCompletionsFromStorage();
const updatedCompletions = [...previousCompletions, completion];
setCompletionsToStorage(updatedCompletions);
displayCompletions(updatedCompletions);
}
function getCompletionsFromStorage() {
const completionsString = sessionStorage.getItem('completions');
return completionsString ? JSON.parse(completionsString) : [];
}
function setCompletionsToStorage(completions) {
sessionStorage.setItem('completions', JSON.stringify(completions));
}
function loadCompletionsFromFile() {
const fileInput = document.getElementById('completionsFile');
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const contents = e.target.result;
const completionsData = JSON.parse(contents);
if (Array.isArray(completionsData)) {
// File without custom themes
setCompletionsToStorage(completionsData);
displayCompletions(completionsData);
} else {
// File with custom themes
const completions = completionsData.conversations;
setCompletionsToStorage(completions);
displayCompletions(completions);
// Load the custom theme if present in the data
const customThemeCss = completionsData.customThemeCss;
if (customThemeCss) {
cssInput.value = customThemeCss;
userStyles.textContent = customThemeCss;
localStorage.setItem('customThemeCss', customThemeCss); // Store the custom theme in localStorage
alert('Custom theme loaded successfully!');
} else {
cssInput.value = ''; // Clear the CSS input field
userStyles.textContent = ''; // Clear the userStyles element
}
}
};
reader.readAsText(file);
}
function displayAbstractions() {
const abstractionsSection = document.getElementById('abstractionsSection');
const abstractionsList = Object.entries(abstractions).map(([name, content]) => {
return `<div class="abstractionBox" onclick="editAbstraction('${name}', '${content}')">${name}</div>`;
});
abstractionsSection.innerHTML = `<h2>Abstractions</h2>${abstractionsList.join('')}`;
document.getElementById('userInputPreview').innerHTML = `<span>${document.getElementById('userInput').value}</span>`;
document.getElementById('selectedAssistantMessages').innerHTML = `<span>${document.getElementById('selectedAssistantMessages').textContent}</span>`;
document.getElementById('systemInputPreview').innerHTML = `<span>${document.getElementById('systemInput').value}</span>`;
}
function editAbstraction(name, content) {
document.getElementById('abstractionName').value = name;
document.getElementById('abstractionContent').value = content;
}
function saveAbstraction() {
const name = document.getElementById('abstractionName').value;
const content = document.getElementById('abstractionContent').value;
if (name && content) {
abstractions[name] = content;
displayAbstractions();
clearAbstractionInputs();
}
}
function deleteAbstraction() {
const name = document.getElementById('abstractionName').value;
if (name && abstractions.hasOwnProperty(name)) {
delete abstractions[name];
displayAbstractions();
clearAbstractionInputs();
}
}
function clearAbstractionInputs() {
document.getElementById('abstractionName').value = '';
document.getElementById('abstractionContent').value = '';
}
function displayCompletions(conversations) {
const outputElement = document.getElementById('output');
outputElement.innerHTML = '';
conversations.forEach((conversation, index) => {
const input = conversation.input || [];
const response = conversation.response || '';
const assistantMessage = response.message?.content || '';
let formattedCompletion = `<input type="checkbox" id="output${index}" onchange="updatePreview(event, ${index})">`;
input.forEach((item) => {
let content = item.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
if (item.role === 'user') {
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="userMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
} else if (item.role === 'assistant') {
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="assistantMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
} else {
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="systemMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
}
});
let assistantContent = assistantMessage.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
// Check if the assistant content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
assistantContent = assistantContent.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
formattedCompletion += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantContent}</pre></div><br>`;
outputElement.innerHTML += formattedCompletion;
});
}
function appendOutputsToPrompt() {
const completionArray = getCompletionsFromStorage();
let appendedOutputs = [];
let selectedAssistantMessages = '';
completionArray.forEach((completion, index) => {
if (document.getElementById(`output${index}`).checked) {
const user = completion.input.find(item => item.role === 'user')?.content || '';
const assistant = completion.input.find(item => item.role === 'assistant')?.content || '';
const system = completion.input.find(item => item.role === 'system')?.content || '';
if (user) {
appendedOutputs.push({ role: 'user', content: user });
}
if (assistant) {
appendedOutputs.push({ role: 'assistant', content: assistant });
}
if (system) {
appendedOutputs.push({ role: 'system', content: system });
}
// Update the selected Assistant Messages
selectedAssistantMessages += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: <span>${assistant}</span></pre></div><br>`;
}
});
// Update the selected Assistant Messages box content
document.getElementById('selectedAssistantMessages').innerHTML = selectedAssistantMessages;
return appendedOutputs;
}
function updatePreview(event, index) {
const checked = event.target.checked;
const userInput = document.getElementById('userInputPreview');
const systemInput = document.getElementById('systemInputPreview');
const selectedAssistantMessages = document.getElementById('selectedAssistantMessages');
if (checked) {
const completion = getCompletionsFromStorage()[index];
const assistantMessage = completion.response.message?.content || '';
// Append user input to the user input preview
const user = completion.input.find(item => item.role === 'user');
if (user) {
let content = user.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
userInput.innerHTML += `<div class="${user.role} messageBox assistantOutput"><pre class="userMessage">${user.role.charAt(0).toUpperCase() + user.role.slice(1)}: ${content}</pre></div>`;
}
// Append system input to the system input preview
const system = completion.input.find(item => item.role === 'system');
if (system) {
let content = system.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
systemInput.innerHTML += `<div class="${system.role} messageBox assistantOutput"><pre class="systemMessage">${system.role.charAt(0).toUpperCase() + system.role.slice(1)}: ${content}</pre></div>`;
}
// Append assistant message to the selected assistant messages
selectedAssistantMessages.innerHTML += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantMessage}</pre></div><br>`;
} else {
// Clear the selected Assistant Messages and reset the user/system input previews
selectedAssistantMessages.innerHTML = '';
userInput.textContent = '';
systemInput.textContent = '';
}
}
function saveConversations() {
const completions = getCompletionsFromStorage();
const data = {
conversations: completions
};
const customThemeCss = localStorage.getItem('customThemeCss');
if (customThemeCss) {
data.customThemeCss = customThemeCss;
}
const fileData = JSON.stringify(data, null, 2);
const fileName = 'completions.json';
const blob = new Blob([fileData], { type: 'application/json' });
if (navigator.msSaveBlob) {
// IE 10+
navigator.msSaveBlob(blob, fileName);
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', fileName);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
defaultThemeButton.addEventListener('click', function () {
var defaultThemeCss = `
body {
background-color: #ffff;
color: #000;
}
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #333;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #000;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox,
.assistantOutput {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.assistantMessage {
color: #006400;
}
.systemMessage {
color: #8b0000;
}
.userMessage {
color: #0000ff;
}
.messageBox pre {
white-space: pre-wrap;
}
`;
cssInput.value = defaultThemeCss;
try {
userStyles.textContent = defaultThemeCss;
document.body.classList.remove('darkTheme');
alert('Default theme applied successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
});
darkThemeButton.addEventListener('click', function () {
var darkThemeCss = `
body {
background-color: #222;
color: #fff;
}
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #555;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #555;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox,
.assistantOutput {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #555;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.assistantMessage {
color: #fff;
}
.systemMessage {
color: #fff;
}
.userMessage {
color: #fff;
}
.messageBox pre {
white-space: pre-wrap;
}
`;
cssInput.value = darkThemeCss;
userStyles.textContent = darkThemeCss;
document.body.classList.add('darkTheme');
});
loadCustomThemeButton.addEventListener('click', function () {
var customThemeCss = localStorage.getItem('customThemeCss');
if (customThemeCss) {
cssInput.value = customThemeCss;
try {
userStyles.textContent = customThemeCss;
alert('Custom theme loaded successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
} else {
alert('No custom theme found. Please save a custom theme first.');
}
});
saveCustomThemeButton.addEventListener('click', function () {
var customThemeCss = cssInput.value;
localStorage.setItem('customThemeCss', customThemeCss);
alert('Custom theme saved successfully!');
});
const userInputPreview = document.getElementById('userInputPreview');
userInputPreview.addEventListener('keydown', sendUserInput);
// Display the stored completions on page load
const storedCompletions = getCompletionsFromStorage();
displayCompletions(storedCompletions);
// Display the stored abstractions on page load
displayAbstractions();
</script>
</body>
</html>
6/7 Version
<head>
<title>My Text File as HTML</title>
<style id="userStyles">
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #333;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #000;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox,
.assistantOutput {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.assistantMessage {
color: #006400;
}
.systemMessage {
color: #8b0000;
}
.userMessage {
color: #0000ff;
}
.messageBox pre {
white-space: pre-wrap;
}
</style>
</head>
<body>
<p>User Input: <span id="userInputPreview" class="userInput messageBox escapeKey" contenteditable="true"></span></p>
<p>Selected Assistant Messages: <span id="selectedAssistantMessages" class="assistantOutput" contenteditable="true"></span></p>
<p>System Input: <span id="systemInputPreview" class="systemInput messageBox escapeKey" contenteditable="true"></span></p>
<div>
<label for="modelSelect">Select Model:</label>
<select id="modelSelect">
<option value=modelSelect>gpt-3.5-turbo</option>
<option value=modelSelect>gpt-4</option>
<option value=modelSelect>gpt-4-0314</option>
<option value=modelSelect>gpt-4-32k</option>
<option value=modelSelect>gpt-4-32k-0314</option>
<option value=modelSelect>gpt-3.5-turbo-0301</option>
</select>
</div>
<p>This correctly displays and spans accordingly to theme.</p>
<input type="text" id="userInput" placeholder="Enter your question">
<input type="text" id="systemInput" placeholder="Enter system role content">
<button onclick="sendUserInput()">Submit</button>
<div id="output"></div>
<input type="file" id="completionsFile" accept=".json, .txt" />
<button onclick="loadCompletionsFromFile()">Load Completions</button>
<button onclick="saveConversations()">Save Conversations</button>
<div>
<h2>Enter your CSS:</h2>
<textarea id="cssInput" style="width: 100%; height: 200px;"></textarea>
<button id="applyButton">Apply CSS</button>
<button id="defaultThemeButton">Load Default Theme</button>
<button id="darkThemeButton">Load Dark Theme</button>
<button id="loadCustomThemeButton">Load Custom Theme</button>
<button id="saveCustomThemeButton">Save Custom Theme</button>
</div>
<script>
const apiKey = "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";
function callOpenAI(input, model) {
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: model,
messages: input
})
};
fetch('https://api.openai.com/v1/chat/completions', requestOptions)
.then(response => response.json())
.then(data => {
const response = data.choices[0];
saveCompletion(input, response);
})
.catch(error => {
console.error('Error:', error);
});
}
function sendUserInput() {
const userInput = document.getElementById('userInputPreview').textContent;
const systemInput = document.getElementById('systemInputPreview').textContent;
const selectedOutputs = appendOutputsToPrompt();
const modelSelect = document.getElementById('modelSelect');
const selectedModel = modelSelect.value;
const customThemeCss = cssInput.value; // Get the current customThemeCss value
// Append the selected outputs to the conversation
const conversation = [
{ role: 'system', content: systemInput },
...selectedOutputs,
{ role: 'user', content: userInput }
];
// Include the customThemeCss in the user input if it is not empty
if (customThemeCss.trim() !== '') {
conversation.push({ role: 'user', content: customThemeCss });
}
document.getElementById('userInput').value = userInput;
document.getElementById('systemInput').value = systemInput;
callOpenAI(conversation, selectedModel);
}
function saveCompletion(input, response) {
const customThemeCss = input.find(item => item.role === 'user' && item.content !== undefined)?.content;
const completion = {
input: input,
response: response,
customThemeCss: customThemeCss
};
const previousCompletions = getCompletionsFromStorage();
const updatedCompletions = [...previousCompletions, completion];
setCompletionsToStorage(updatedCompletions);
displayCompletions(updatedCompletions);
}
function getCompletionsFromStorage() {
const completionsString = sessionStorage.getItem('completions');
return completionsString ? JSON.parse(completionsString) : [];
}
function setCompletionsToStorage(completions) {
sessionStorage.setItem('completions', JSON.stringify(completions));
}
function loadCompletionsFromFile() {
const fileInput = document.getElementById('completionsFile');
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const contents = e.target.result;
const completionsData = JSON.parse(contents);
if (Array.isArray(completionsData)) {
// File without custom themes
setCompletionsToStorage(completionsData);
displayCompletions(completionsData);
} else {
// File with custom themes
const completions = completionsData.conversations;
setCompletionsToStorage(completions);
displayCompletions(completions);
// Load the custom theme if present in the data
const customThemeCss = completionsData.customThemeCss;
if (customThemeCss) {
cssInput.value = customThemeCss;
userStyles.textContent = customThemeCss;
localStorage.setItem('customThemeCss', customThemeCss); // Store the custom theme in localStorage
alert('Custom theme loaded successfully!');
} else {
cssInput.value = ''; // Clear the CSS input field
userStyles.textContent = ''; // Clear the userStyles element
}
}
};
reader.readAsText(file);
}
function displayCompletions(conversations) {
const outputElement = document.getElementById('output');
outputElement.innerHTML = '';
conversations.forEach((conversation, index) => {
const input = conversation.input || [];
const response = conversation.response || '';
const assistantMessage = response.message?.content || '';
let formattedCompletion = `<input type="checkbox" id="output${index}" onchange="updatePreview(event, ${index})">`;
input.forEach((item) => {
let content = item.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
if (item.role === 'user') {
formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="userMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
} else if (item.role === 'assistant') {
formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="assistantMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
} else {
formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="systemMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
}
});
let assistantContent = assistantMessage.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
formattedCompletion += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantContent}</pre></div><br>`;
outputElement.innerHTML += formattedCompletion;
});
}
function appendOutputsToPrompt() {
const completionArray = getCompletionsFromStorage();
let appendedOutputs = [];
let selectedAssistantMessages = '';
completionArray.forEach((completion, index) => {
if (document.getElementById(`output${index}`).checked) {
const user = completion.input.find(item => item.role === 'user')?.content || '';
const assistant = completion.response.message?.content || '';
appendedOutputs.push({ role: 'user', content: user });
appendedOutputs.push({ role: 'assistant', content: assistant });
// Update the selected Assistant Messages
selectedAssistantMessages += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: <span>${assistant}</span></pre></div><br>`;
}
});
// Update the selected Assistant Messages box content
document.getElementById('selectedAssistantMessages').innerHTML = selectedAssistantMessages;
return appendedOutputs;
}
function updatePreview(event, index) {
const checked = event.target.checked;
const userInput = document.getElementById('userInputPreview');
const systemInput = document.getElementById('systemInputPreview');
const selectedAssistantMessages = document.getElementById('selectedAssistantMessages');
if (checked) {
const completion = getCompletionsFromStorage()[index];
const assistantMessage = completion.response.message?.content || '';
// Append user input to the user input preview
const user = completion.input.find(item => item.role === 'user');
if (user) {
userInput.innerHTML += `<div class="${user.role} messageBox assistantOutput"><pre class="userMessage">${user.role.charAt(0).toUpperCase() + user.role.slice(1)}: ${user.content}</pre></div>`;
}
// Append system input to the system input preview
const system = completion.input.find(item => item.role === 'system');
if (system) {
systemInput.innerHTML += `<div class="${system.role} messageBox assistantOutput"><pre class="systemMessage">${system.role.charAt(0).toUpperCase() + system.role.slice(1)}: ${system.content}</pre></div>`;
}
// Append assistant message to the selected assistant messages preview
selectedAssistantMessages.innerHTML += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantMessage}</pre></div><br>`;
} else {
// Remove the corresponding elements from the previews
const completion = getCompletionsFromStorage()[index];
const assistantMessage = completion.response.message?.content || '';
// Remove user input from the user input preview
const user = completion.input.find(item => item.role === 'user');
if (user) {
userInput.innerHTML = userInput.innerHTML.replace(`<div class="${user.role} messageBox assistantOutput"><pre class="userMessage">${user.role.charAt(0).toUpperCase() + user.role.slice(1)}: ${user.content}</pre></div>`, '');
}
// Remove system input from the system input preview
const system = completion.input.find(item => item.role === 'system');
if (system) {
systemInput.innerHTML = systemInput.innerHTML.replace(`<div class="${system.role} messageBox assistantOutput"><pre class="systemMessage">${system.role.charAt(0).toUpperCase() + system.role.slice(1)}: ${system.content}</pre></div>`, '');
}
// Remove assistant message from the selected assistant messages preview
selectedAssistantMessages.innerHTML = selectedAssistantMessages.innerHTML.replace(`<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantMessage}</pre></div><br>`, '');
}
}
function saveConversations() {
const completions = getCompletionsFromStorage();
const customThemeCss = document.getElementById('cssInput').value;
const conversationsData = {
customThemeCss: customThemeCss,
conversations: completions
};
const element = document.createElement('a');
const fileContent = JSON.stringify(conversationsData, null, 2);
const file = new Blob([fileContent], { type: 'application/json' });
element.href = URL.createObjectURL(file);
element.download = 'conversations.json';
element.click();
}
var cssInput = document.getElementById('cssInput');
var userStyles = document.getElementById('userStyles');
var applyButton = document.getElementById('applyButton');
var defaultThemeButton = document.getElementById('defaultThemeButton');
var darkThemeButton = document.getElementById('darkThemeButton');
var loadCustomThemeButton = document.getElementById('loadCustomThemeButton');
var saveCustomThemeButton = document.getElementById('saveCustomThemeButton');
applyButton.addEventListener('click', function() {
var css = cssInput.value;
try {
userStyles.textContent = css;
alert('CSS applied successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
});
defaultThemeButton.addEventListener('click', function() {
var defaultThemeCss = `
body {
background-color: #ffff;
color: #000;
}
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #333;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #000;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox,
.assistantOutput {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.assistantMessage {
color: #006400;
}
.systemMessage {
color: #8b0000;
}
.userMessage {
color: #0000ff;
}
.messageBox pre {
white-space: pre-wrap;
}
`;
cssInput.value = defaultThemeCss;
try {
userStyles.textContent = defaultThemeCss;
document.body.classList.remove('darkTheme');
alert('Default theme applied successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
});
darkThemeButton.addEventListener('click', function() {
var darkThemeCss = `
body {
background-color: #222;
color: #fff;
}
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #555;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #555;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox,
.assistantOutput {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #555;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.assistantMessage {
color: #fff;
}
.systemMessage {
color: #fff;
}
.userMessage {
color: #fff;
}
.messageBox pre {
white-space: pre-wrap;
}
`;
cssInput.value = darkThemeCss;
userStyles.textContent = darkThemeCss;
document.body.classList.add('darkTheme');
loadCustomThemeButton.addEventListener('click', function() {
var customThemeCss = localStorage.getItem('customThemeCss');
if (customThemeCss) {
cssInput.value = customThemeCss;
try {
userStyles.textContent = customThemeCss;
alert('Custom theme loaded successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
} else {
alert('No custom theme found. Please save a custom theme first.');
}
});
saveCustomThemeButton.addEventListener('click', function() {
var customThemeCss = cssInput.value;
localStorage.setItem('customThemeCss', customThemeCss);
alert('Custom theme saved successfully!');
});
});
</script>
</body>
</html>
6/5 Version
<!DOCTYPE html>
<html>
<head>
<title>My Text File as HTML</title>
<style id="userStyles">
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #333;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #000;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>User Input: <span id="userInputPreview" class="userInput messageBox escapeKey" contenteditable="true"></span></p>
<p>Selected Assistant Messages: <span id="selectedAssistantMessages" class="assistantOutput" contenteditable="true"></span></p>
<p>System Input: <span id="systemInputPreview" class="systemInput messageBox escapeKey" contenteditable="true"></span></p>
<p>This correctly displays and spans accordingly to theme.</p>
<input type="text" id="userInput" placeholder="Enter your question">
<input type="text" id="systemInput" placeholder="Enter system role content">
<button onclick="sendUserInput()">Submit</button>
<div id="output"></div>
<input type="file" id="completionsFile" accept=".json" />
<button onclick="loadCompletionsFromFile()">Load Completions</button>
<button onclick="saveConversations()">Save Conversations</button>
<div>
<h2>Enter your CSS:</h2>
<textarea id="cssInput" style="width: 100%; height: 200px;"></textarea>
<button id="applyButton">Apply CSS</button>
<button id="defaultThemeButton">Load Default Theme</button>
<button id="darkThemeButton">Load Dark Theme</button>
<button id="lightThemeButton">Load Light Theme</button>
<button id="solarizedDarkButton">Load Solarized Dark</button>
<button id="solarizedLightButton">Load Solarized Light</button>
</div>
<script>
const apiKey = "sk-REDACTED";
function callOpenAI(input) {
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: 'gpt-3.5-turbo',
messages: input
})
};
fetch('https://api.openai.com/v1/chat/completions', requestOptions)
.then(response => response.json())
.then(data => {
const response = data.choices[0];
saveCompletion(input, response);
})
.catch(error => {
console.error('Error:', error);
});
}
function sendUserInput() {
const userInput = document.getElementById('userInputPreview').textContent;
const systemInput = document.getElementById('systemInputPreview').textContent;
const selectedOutputs = appendOutputsToPrompt();
// Append the selected outputs to the conversation
const conversation = [
{ role: 'system', content: systemInput },
...selectedOutputs,
{ role: 'user', content: userInput }
];
document.getElementById('userInput').value = userInput;
document.getElementById('systemInput').value = systemInput;
callOpenAI(conversation);
}
function saveCompletion(input, response) {
const completion = {
input: input,
response: response
};
const previousCompletions = getCompletionsFromStorage();
const updatedCompletions = [...previousCompletions, completion];
setCompletionsToStorage(updatedCompletions);
displayCompletions(updatedCompletions);
}
function getCompletionsFromStorage() {
const completionsString = sessionStorage.getItem('completions');
return completionsString ? JSON.parse(completionsString) : [];
}
function setCompletionsToStorage(completions) {
sessionStorage.setItem('completions', JSON.stringify(completions));
}
function loadCompletionsFromFile() {
const fileInput = document.getElementById('completionsFile');
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const contents = e.target.result;
const completions = JSON.parse(contents);
setCompletionsToStorage(completions);
displayCompletions(completions);
};
reader.readAsText(file);
}
function displayCompletions(conversations) {
const outputElement = document.getElementById('output');
outputElement.innerHTML = '';
conversations.forEach((conversation, index) => {
const input = conversation.input || [];
const response = conversation.response || '';
const assistantMessage = response.message?.content || '';
let formattedCompletion = `<input type="checkbox" id="output${index}" onchange="updatePreview(event, ${index})">`;
input.forEach((item) => {
let content = item.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
formattedCompletion += `<div class="${item.role} messageBox"><pre>${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
});
let assistantContent = assistantMessage.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
formattedCompletion += `<div class="messageBox assistantOutput"><pre>Assistant: ${assistantContent}</pre></div><br>`;
outputElement.innerHTML += formattedCompletion;
});
}
function appendOutputsToPrompt() {
const completionArray = getCompletionsFromStorage();
let appendedOutputs = [];
let selectedAssistantMessages = '';
completionArray.forEach((completion, index) => {
if (document.getElementById(`output${index}`).checked) {
const user = completion.input.find(item => item.role === 'user')?.content || '';
const assistant = completion.response.message?.content || '';
appendedOutputs.push({ role: 'user', content: user });
appendedOutputs.push({ role: 'assistant', content: assistant });
// Update the selected Assistant Messages
selectedAssistantMessages += `<div class="assistantOutput messageBox"><pre>Assistant: ${assistant}</pre></div><br>`;
}
});
// Update the selected Assistant Messages box content
document.getElementById('selectedAssistantMessages').innerHTML = selectedAssistantMessages;
return appendedOutputs;
}
function updatePreview(event, index) {
const checked = event.target.checked;
const userInput = document.getElementById('userInputPreview');
const systemInput = document.getElementById('systemInputPreview');
if (checked) {
const completion = getCompletionsFromStorage()[index];
const input = completion.input || [];
const user = input.find(item => item.role === 'user');
const assistant = input.find(item => item.role === 'assistant');
if (user) {
userInput.textContent += ` User: ${user.content} |`;
}
if (assistant) {
systemInput.textContent += ` Assistant: ${assistant.content} |`;
}
} else {
const completion = getCompletionsFromStorage()[index];
const input = completion.input || [];
const user = input.find(item => item.role === 'user');
const assistant = input.find(item => item.role === 'assistant');
if (user) {
userInput.textContent = userInput.textContent.replace(` User: ${user.content} |`, '');
}
if (assistant) {
systemInput.textContent = systemInput.textContent.replace(` Assistant: ${assistant.content} |`, '');
}
}
}
function saveConversations() {
const completions = getCompletionsFromStorage();
const element = document.createElement('a');
const fileContent = JSON.stringify(completions, null, 2);
const file = new Blob([fileContent], {
type: 'application/json'});
element.href = URL.createObjectURL(file);
element.download = 'conversations.json';
element.click();
}
const previousCompletions = getCompletionsFromStorage();
displayCompletions(previousCompletions);
document.getElementById('userInput').addEventListener('input', function() {
const userInput = this.value;
document.getElementById('userInputPreview').textContent = userInput;
});
document.getElementById('systemInput').addEventListener('input', function() {
const systemInput = this.value;
document.getElementById('systemInputPreview').textContent = systemInput;
});
var cssInput = document.getElementById('cssInput');
var userStyles = document.getElementById('userStyles');
var applyButton = document.getElementById('applyButton');
var defaultThemeButton = document.getElementById('defaultThemeButton');
var darkThemeButton = document.getElementById('darkThemeButton');
var lightThemeButton = document.getElementById('lightThemeButton');
var solarizedDarkButton = document.getElementById('solarizedDarkButton');
var solarizedLightButton = document.getElementById('solarizedLightButton');
applyButton.addEventListener('click', function() {
var css = cssInput.value;
try {
userStyles.textContent = css;
alert('CSS applied successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
});
defaultThemeButton.addEventListener('click', function() {
var defaultThemeCss = `
body {
background-color: #ffff;
color: #000;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
}
.messageBox {
white-space: pre-wrap;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
`;
cssInput.value = defaultThemeCss;
try {
userStyles.textContent = defaultThemeCss;
document.body.classList.remove('darkTheme', 'lightTheme', 'solarizedDark', 'solarizedLight');
alert('Default theme applied successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
});
darkThemeButton.addEventListener('click', function() {
var darkThemeCss = `
body {
font-family: Arial, sans-serif;
background-color: #222;
color: #fff;
}
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #333;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #444;
background-color: #333;
color: #fff;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox {
white-space: pre-wrap;
word-wrap: break-word;
background-color: #444;
border:
1px solid #555;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
}
`;
cssInput.value = darkThemeCss;
userStyles.textContent = darkThemeCss;
});
lightThemeButton.addEventListener('click', function() {
var lightThemeCss = `
body {
background-color: #fff;
color: #000;
font-family: Arial, sans-serif;
}
.lightTheme .userInput,
.lightTheme .assistantOutput,
.lightTheme .systemInput {
background-color: #ddd;
color: #000;
}
`;
cssInput.value = lightThemeCss;
try {
userStyles.textContent = lightThemeCss;
document.body.classList.add('lightTheme');
alert('Light theme applied successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
});
solarizedDarkButton.addEventListener('click', function() {
var solarizedDarkCss = `
body {
background-color: #002b36;
color: #839496;
font-family: Arial, sans-serif;
}
.solarizedDark .userInput,
.solarizedDark .assistantOutput,
.solarizedDark .systemInput {
background-color: #073642;
color: #839496;
}
`;
cssInput.value = solarizedDarkCss;
try {
userStyles.textContent = solarizedDarkCss;
document.body.classList.add('solarizedDark');
alert('Solarized Dark theme applied successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
});
solarizedLightButton.addEventListener('click', function() {
var solarizedLightCss = `
body {
background-color: #fdf6e3;
color: #657b83;
font-family: Arial, sans-serif;
}
.solarizedLight .userInput,
.solarizedLight .assistantOutput,
.solarizedLight .systemInput {
background-color: #eee8d5;
color: #657b83;
}
`;
cssInput.value = solarizedLightCss;
try {
userStyles.textContent = solarizedLightCss;
document.body.classList.add('solarizedLight');
alert('Solarized Light theme applied successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
});
</script>
</body>
</html>
6/2 Version
<!DOCTYPE html>
<html>
<head>
<title>My Text File as HTML</title>
</head>
<body>
<p>User Input: <span id="userInputPreview"></span></p>
<p>System Input: <span id="systemInputPreview"></span></p>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
fetch('https://34.94.226.228:3000/constant')
.then(response => response.json())
.then(data => {
const constantValueElement = document.getElementById('constantValue');
constantValueElement.textContent = data.constant;
})
.catch(error => {
console.error('Error:', error);
});
});
</script>
<p>This is the content of my text file as a snapshot from 6/2.</p>
<input type="text" id="userInput" placeholder="Enter your question">
<input type="text" id="systemInput" placeholder="Enter system role content">
<button onclick="sendUserInput()">Submit</button>
<div id="output"></div>
<input type="file" id="completionsFile" accept=".txt" />
<button onclick="loadCompletionsFromFile()">Load Completions</button>
<button onclick="saveConversations()">Save Conversations</button>
<script>
const apiKey = "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";
function callOpenAI(input, systemInput) {
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: 'gpt-3.5-turbo',
messages: [
{ role: 'system', content: systemInput },
{ role: 'user', content: input }
]
})
};
fetch('https://api.openai.com/v1/chat/completions', requestOptions)
.then(response => response.json())
.then(data => {
const response = data.choices[0];
saveCompletion(input, systemInput, response);
})
.catch(error => {
console.error('Error:', error);
});
}
function sendUserInput() {
const userInput = document.getElementById('userInput').value;
const systemInput = document.getElementById('systemInput').value;
callOpenAI(userInput, systemInput);
}
function saveCompletion(input, systemInput, response) {
const completion = {
userInput: input,
systemInput: systemInput,
response: response
};
const previousCompletions = getCompletionsFromStorage();
const updatedCompletions = [...previousCompletions, completion];
setCompletionsToStorage(updatedCompletions);
displayCompletions(updatedCompletions);
}
function getCompletionsFromStorage() {
const completionsString = sessionStorage.getItem('completions');
return completionsString ? JSON.parse(completionsString) : [];
}
function setCompletionsToStorage(completions) {
sessionStorage.setItem('completions', JSON.stringify(completions));
}
function loadCompletionsFromFile() {
const fileInput = document.getElementById('completionsFile');
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const contents = e.target.result;
const completions = JSON.parse(contents);
setCompletionsToStorage(completions);
displayCompletions(completions);
};
reader.readAsText(file);
}
function displayCompletions(conversations) {
const outputElement = document.getElementById('output');
outputElement.innerHTML = '';
conversations.forEach((conversation, index) => {
const userInput = conversation.userInput || '';
const systemInput = conversation.systemInput || '';
const response = conversation.response || '';
const assistantMessage = response.message?.content || '';
const formattedCompletion = `<input type="checkbox" id="output${index}" onchange="updatePreview(event, ${index})"><pre>User Input: ${userInput}</pre><pre>System Input: ${systemInput}</pre><pre>Assistant Response: ${assistantMessage}</pre><br>`;
outputElement.innerHTML += formattedCompletion;
});
}
function appendOutputsToPrompt() {
const completionArray = getCompletionsFromStorage();
let appendedOutputs = "";
completionArray.forEach((completion, index) => {
if (document.getElementById(`output${index}`).checked) {
const userInput = completion.userInput || '';
const systemInput = completion.systemInput || '';
const assistantResponse = completion.response.message?.content || '';
appendedOutputs += `User: ${userInput}\nAssistant: ${assistantResponse}\n`;
}
});
return appendedOutputs;
}
function sendUserInput() {
const userInput = document.getElementById('userInput').value;
const systemInput = document.getElementById('systemInput').value;
document.getElementById('userInputPreview').textContent = userInput;
document.getElementById('systemInputPreview').textContent = systemInput;
callOpenAI(userInput, systemInput);
}
function saveConversations() {
const completions = getCompletionsFromStorage();
const element = document.createElement('a');
const fileContent = JSON.stringify(completions, null, 2);
const file = new Blob([fileContent], {type: 'application/json'});
element.href = URL.createObjectURL(file);
element.download = 'conversations.json';
element.click();
}
const previousCompletions = getCompletionsFromStorage();
displayCompletions(previousCompletions);
document.getElementById('userInput').addEventListener('input', function() {
const userInput = this.value;
document.getElementById('userInputPreview').textContent = userInput;
});
document.getElementById('systemInput').addEventListener('input', function() {
const systemInput = this.value;
document.getElementById('systemInputPreview').textContent = systemInput;
});
function updatePreview(event, index) {
const checked = event.target.checked;
const userInput = document.getElementById(`userInputPreview`);
const systemInput = document.getElementById(`systemInputPreview`);
if (checked) {
const completion = getCompletionsFromStorage()[index];
const user = completion.userInput || '';
const assistant = completion.response.message?.content || '';
userInput.textContent += ` User: ${user} |`;
systemInput.textContent += ` Assistant: ${assistant} |`;
} else {
const completion = getCompletionsFromStorage()[index];
userInput.textContent = userInput.textContent.replace(` User: ${completion.userInput} |`, '');
systemInput.textContent = systemInput.textContent.replace(` Assistant: ${completion.response.message?.content} |`, '');
}
}
</script>
</body>
</html>
<html>
<head>
<title>My Text File as HTML</title>
<style id="userStyles">
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #333;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #000;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox,
.assistantOutput {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.assistantMessage {
color: #006400;
}
.systemMessage {
color: #8b0000;
}
.userMessage {
color: #0000ff;
}
.messageBox pre {
white-space: pre-wrap;
}
</style>
</head>
<body>
<p>User Input: <span id="userInputPreview" class="userInput messageBox escapeKey" contenteditable="true"></span></p>
<p>Selected Assistant Messages: <span id="selectedAssistantMessages" class="assistantOutput" contenteditable="true"></span></p>
<p>System Input: <span id="systemInputPreview" class="systemInput messageBox escapeKey" contenteditable="true"></span></p>
<div>
<label for="modelSelect">Select Model:</label>
<select id="modelSelect">
<option value=modelSelect>gpt-3.5-turbo</option>
<option value=modelSelect>gpt-4</option>
<option value=modelSelect>gpt-4-0314</option>
<option value=modelSelect>gpt-4-32k</option>
<option value=modelSelect>gpt-4-32k-0314</option>
<option value=modelSelect>gpt-3.5-turbo-0301</option>
</select>
</div>
<p>This correctly displays and spans accordingly to theme.</p>
<input type="text" id="userInput" placeholder="Enter your question">
<input type="text" id="systemInput" placeholder="Enter system role content">
<button onclick="sendUserInput()">Submit</button>
<div id="output"></div>
<input type="file" id="completionsFile" accept=".json, .txt" />
<button onclick="loadCompletionsFromFile()">Load Completions</button>
<button onclick="saveConversations()">Save Conversations</button>
<div id="abstractionsSection">
<h2>Abstractions</h2>
</div>
<div>
<label for="abstractionName">Abstraction Name:</label>
<input type="text" id="abstractionName" placeholder="Enter Abstraction Name">
</div>
<div>
<label for="abstractionContent">Abstraction Content:</label>
<textarea id="abstractionContent" placeholder="Enter Abstraction Content"></textarea>
</div>
<button id="saveAbstraction" onclick="saveAbstraction()">Save Abstraction</button>
<button id="deleteAbstraction" onclick="deleteAbstraction()">Delete Abstraction</button>
<div>
<h2>Enter your CSS:</h2>
<textarea id="cssInput" style="width: 100%; height: 200px;"></textarea>
<button id="applyButton">Apply CSS</button>
<button id="defaultThemeButton">Load Default Theme</button>
<button id="darkThemeButton">Load Dark Theme</button>
<button id="loadCustomThemeButton">Load Custom Theme</button>
<button id="saveCustomThemeButton">Save Custom Theme</button>
</div>
<script>
const apiKey = "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";
const abstractions = {};
function callOpenAI(input) {
const modelSelect = document.getElementById('modelSelect');
const selectedModel = modelSelect.value;
const requestOptions = {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${apiKey}`
},
body: JSON.stringify({
model: modelSelect,
messages: input
})
};
fetch('https://api.openai.com/v1/chat/completions', requestOptions)
.then(response => response.json())
.then(data => {
const response = data.choices[0];
saveCompletion(input, response);
})
.catch(error => {
console.error('Error:', error);
});
}
function sendUserInput() {
const userInputPreview = document.getElementById('userInputPreview');
const systemInputPreview = document.getElementById('systemInputPreview');
const userInput = userInputPreview.textContent.trim();
const systemInput = systemInputPreview.textContent.trim();
const selectedOutputs = appendOutputsToPrompt();
const conversation = [
{ role: 'system', content: systemInput },
...selectedOutputs,
{ role: 'user', content: userInput }
];
callOpenAI(conversation);
}
function saveCompletion(input, response) {
const customThemeCss = input.find(item => item.role === 'user' && item.content !== undefined)?.content;
const completion = {
input: input,
response: response,
customThemeCss: customThemeCss
};
const previousCompletions = getCompletionsFromStorage();
const updatedCompletions = [...previousCompletions, completion];
setCompletionsToStorage(updatedCompletions);
displayCompletions(updatedCompletions);
}
function getCompletionsFromStorage() {
const completionsString = sessionStorage.getItem('completions');
return completionsString ? JSON.parse(completionsString) : [];
}
function setCompletionsToStorage(completions) {
sessionStorage.setItem('completions', JSON.stringify(completions));
}
function loadCompletionsFromFile() {
const fileInput = document.getElementById('completionsFile');
const file = fileInput.files[0];
const reader = new FileReader();
reader.onload = function (e) {
const contents = e.target.result;
const completionsData = JSON.parse(contents);
if (Array.isArray(completionsData)) {
// File without custom themes
setCompletionsToStorage(completionsData);
displayCompletions(completionsData);
} else {
// File with custom themes
const completions = completionsData.conversations;
setCompletionsToStorage(completions);
displayCompletions(completions);
// Load the custom theme if present in the data
const customThemeCss = completionsData.customThemeCss;
if (customThemeCss) {
cssInput.value = customThemeCss;
userStyles.textContent = customThemeCss;
localStorage.setItem('customThemeCss', customThemeCss); // Store the custom theme in localStorage
alert('Custom theme loaded successfully!');
} else {
cssInput.value = ''; // Clear the CSS input field
userStyles.textContent = ''; // Clear the userStyles element
}
}
};
reader.readAsText(file);
}
function displayAbstractions() {
const abstractionsSection = document.getElementById('abstractionsSection');
const abstractionsList = Object.entries(abstractions).map(([name, content]) => {
return `<div class="abstractionBox" onclick="editAbstraction('${name}', '${content}')">${name}</div>`;
});
abstractionsSection.innerHTML = `<h2>Abstractions</h2>${abstractionsList.join('')}`;
document.getElementById('userInputPreview').innerHTML = `<span>${document.getElementById('userInput').value}</span>`;
document.getElementById('selectedAssistantMessages').innerHTML = `<span>${document.getElementById('selectedAssistantMessages').textContent}</span>`;
document.getElementById('systemInputPreview').innerHTML = `<span>${document.getElementById('systemInput').value}</span>`;
}
function editAbstraction(name, content) {
document.getElementById('abstractionName').value = name;
document.getElementById('abstractionContent').value = content;
}
function saveAbstraction() {
const name = document.getElementById('abstractionName').value;
const content = document.getElementById('abstractionContent').value;
if (name && content) {
abstractions[name] = content;
displayAbstractions();
clearAbstractionInputs();
}
}
function deleteAbstraction() {
const name = document.getElementById('abstractionName').value;
if (name && abstractions.hasOwnProperty(name)) {
delete abstractions[name];
displayAbstractions();
clearAbstractionInputs();
}
}
function clearAbstractionInputs() {
document.getElementById('abstractionName').value = '';
document.getElementById('abstractionContent').value = '';
}
function displayCompletions(conversations) {
const outputElement = document.getElementById('output');
outputElement.innerHTML = '';
conversations.forEach((conversation, index) => {
const input = conversation.input || [];
const response = conversation.response || '';
const assistantMessage = response.message?.content || '';
let formattedCompletion = `<input type="checkbox" id="output${index}" onchange="updatePreview(event, ${index})">`;
input.forEach((item) => {
let content = item.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
if (item.role === 'user') {
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="userMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
} else if (item.role === 'assistant') {
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="assistantMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
} else {
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
formattedCompletion += `<div class="${item.role} messageBox assistantOutput"><pre class="systemMessage">${item.role.charAt(0).toUpperCase() + item.role.slice(1)}: ${content}</pre></div>`;
}
});
let assistantContent = assistantMessage.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
// Check if the assistant content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
assistantContent = assistantContent.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
formattedCompletion += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantContent}</pre></div><br>`;
outputElement.innerHTML += formattedCompletion;
});
}
function appendOutputsToPrompt() {
const completionArray = getCompletionsFromStorage();
const appendedOutputs = [];
completionArray.forEach((completion, index) => {
if (document.getElementById(`output${index}`).checked) {
const input = completion.input || [];
const output = completion.response || '';
input.forEach((item) => {
let content = item.content.replace(/<div class="escapeKey">([\s\S]*?)<\/div>/g, '$1'); // Remove escape key elements
if (item.role === 'user' || item.role === 'assistant') {
const abstractionRegex = /<div class="abstractionBox" onclick="editAbstraction\('(.*?)', '(.*?)'\)">(.*?)<\/div>/g;
content = content.replace(abstractionRegex, '$2'); // Replace abstractions with their content
}
appendedOutputs.push({ role: item.role, content: content });
});
let assistantContent = output.message?.content || '';
assistantContent = assistantContent.replace(/<div class="escapeKey">([\s\S]*?)<\/div>/g, '$1'); // Remove escape key elements
appendedOutputs.push({ role: 'assistant', content: assistantContent });
}
});
return appendedOutputs;
}
function updatePreview(event, index) {
const checked = event.target.checked;
const userInput = document.getElementById('userInputPreview');
const systemInput = document.getElementById('systemInputPreview');
const selectedAssistantMessages = document.getElementById('selectedAssistantMessages');
if (checked) {
const completion = getCompletionsFromStorage()[index];
const assistantMessage = completion.response.message?.content || '';
// Append user input to the user input preview
const user = completion.input.find(item => item.role === 'user');
if (user) {
let content = user.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
userInput.innerHTML += `<div class="${user.role} messageBox assistantOutput"><pre class="userMessage">${user.role.charAt(0).toUpperCase() + user.role.slice(1)}: ${content}</pre></div>`;
}
// Append system input to the system input preview
const system = completion.input.find(item => item.role === 'system');
if (system) {
let content = system.content.replace(/(```|'''|' ' '|` ` `)([\s\S]*?)(```|'''|' ' '|` ` `)/g, '<div class="escapeKey"><div class="embeddedBox">$2</div></div>');
// Check if the content matches any abstraction and replace it with a box
Object.entries(abstractions).forEach(([name, abstractionContent]) => {
const regex = new RegExp(`\\b${abstractionContent}\\b`, 'gi');
content = content.replace(regex, `<div class="abstractionBox" onclick="editAbstraction('${name}', '${abstractionContent}')">${name}</div>`);
});
systemInput.innerHTML += `<div class="${system.role} messageBox assistantOutput"><pre class="systemMessage">${system.role.charAt(0).toUpperCase() + system.role.slice(1)}: ${content}</pre></div>`;
}
// Append assistant message to the selected assistant messages
selectedAssistantMessages.innerHTML += `<div class="assistantOutput messageBox"><pre class="assistantMessage">Assistant: ${assistantMessage}</pre></div><br>`;
} else {
// Clear the selected Assistant Messages and reset the user/system input previews
selectedAssistantMessages.innerHTML = '';
userInput.textContent = '';
systemInput.textContent = '';
}
}
function saveConversations() {
const completions = getCompletionsFromStorage();
const catShemPresets = {
customCssThemes: [],
abstractions: []
};
const data = {
catShemPresets,
conversations: completions,
};
const customThemeCss = localStorage.getItem('customThemeCss');
if (customThemeCss) {
data.catShemPresets.customCssThemes.push(customThemeCss);
}
const abstractionsData = JSON.parse(localStorage.getItem('abstractionsData'));
if (abstractionsData) {
data.catShemPresets.abstractions.push(abstractionsData);
}
const fileData = JSON.stringify(data, null, 2);
const fileName = 'completions.json';
const blob = new Blob([fileData], { type: 'application/json' });
if (navigator.msSaveBlob) {
// IE 10+
navigator.msSaveBlob(blob, fileName);
} else {
const link = document.createElement('a');
if (link.download !== undefined) {
// Browsers that support HTML5 download attribute
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', fileName);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
defaultThemeButton.addEventListener('click', function () {
var defaultThemeCss = `
body {
background-color: #ffff;
color: #000;
}
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #333;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #000;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox,
.assistantOutput {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #f5f5f5;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.assistantMessage {
color: #006400;
}
.systemMessage {
color: #8b0000;
}
.userMessage {
color: #0000ff;
}
.messageBox pre {
white-space: pre-wrap;
}
`;
cssInput.value = defaultThemeCss;
try {
userStyles.textContent = defaultThemeCss;
document.body.classList.remove('darkTheme');
alert('Default theme applied successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
});
darkThemeButton.addEventListener('click', function () {
var darkThemeCss = `
body {
background-color: #222;
color: #fff;
}
.escapeKey {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #555;
border-radius: 5px;
margin-bottom: 10px;
}
.userInput,
.assistantOutput,
.systemInput {
display: inline-block;
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
color: #fff;
border: 1px solid #ddd;
background-color: #555;
border-radius: 5px;
margin-bottom: 10px;
}
.messageBox,
.assistantOutput {
white-space: pre-wrap;
word-wrap: break-word;
padding: 10px;
border: 1px solid #ddd;
background-color: #555;
border-radius: 5px;
margin-bottom: 10px;
width: 100%;
box-sizing: border-box;
}
.assistantMessage {
color: #fff;
}
.systemMessage {
color: #fff;
}
.userMessage {
color: #fff;
}
.messageBox pre {
white-space: pre-wrap;
}
`;
cssInput.value = darkThemeCss;
userStyles.textContent = darkThemeCss;
document.body.classList.add('darkTheme');
});
loadCustomThemeButton.addEventListener('click', function () {
var customThemeCss = localStorage.getItem('customThemeCss');
if (customThemeCss) {
cssInput.value = customThemeCss;
try {
userStyles.textContent = customThemeCss;
alert('Custom theme loaded successfully!');
} catch (e) {
alert('Invalid CSS. Please check your input.');
}
} else {
alert('No custom theme found. Please save a custom theme first.');
}
});
saveCustomThemeButton.addEventListener('click', function () {
var customThemeCss = cssInput.value;
localStorage.setItem('customThemeCss', customThemeCss);
alert('Custom theme saved successfully!');
});
const userInputPreview = document.getElementById('userInputPreview');
userInputPreview.addEventListener('keydown', sendUserInput);
// Display the stored completions on page load
const storedCompletions = getCompletionsFromStorage();
displayCompletions(storedCompletions);
// Display the stored abstractions on page load
displayAbstractions();
</script>
</body>
</html>