Spaces:
Runtime error
Runtime error
File size: 5,130 Bytes
57b8424 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 |
const GPTResearcher = (() => {
const init = () => {
// Not sure, but I think it would be better to add event handlers here instead of in the HTML
//document.getElementById("startResearch").addEventListener("click", startResearch);
//document.getElementById("copyToClipboard").addEventListener("click", copyToClipboard);
updateState("initial");
}
const startResearch = () => {
document.getElementById("output").innerHTML = "";
document.getElementById("reportContainer").innerHTML = "";
updateState("in_progress")
addAgentResponse({ output: "🤔 Thinking about research questions for the task..." });
listenToSockEvents();
};
const listenToSockEvents = () => {
const { protocol, host, pathname } = window.location;
const ws_uri = `${protocol === 'https:' ? 'wss:' : 'ws:'}//${host}${pathname}ws`;
const converter = new showdown.Converter();
const socket = new WebSocket(ws_uri);
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'logs') {
addAgentResponse(data);
} else if (data.type === 'report') {
writeReport(data, converter);
} else if (data.type === 'path') {
updateState("finished")
updateDownloadLink(data);
}
};
socket.onopen = (event) => {
const task = document.querySelector('input[name="task"]').value;
const report_type = document.querySelector('select[name="report_type"]').value;
const agent = document.querySelector('input[name="agent"]:checked').value;
const requestData = {
task: task,
report_type: report_type,
agent: agent,
};
socket.send(`start ${JSON.stringify(requestData)}`);
};
};
const addAgentResponse = (data) => {
const output = document.getElementById("output");
output.innerHTML += '<div class="agent_response">' + data.output + '</div>';
output.scrollTop = output.scrollHeight;
output.style.display = "block";
updateScroll();
};
const writeReport = (data, converter) => {
const reportContainer = document.getElementById("reportContainer");
const markdownOutput = converter.makeHtml(data.output);
reportContainer.innerHTML += markdownOutput;
updateScroll();
};
const updateDownloadLink = (data) => {
const path = data.output;
document.getElementById("downloadLink").setAttribute("href", path);
};
const updateScroll = () => {
window.scrollTo(0, document.body.scrollHeight);
};
const copyToClipboard = () => {
const textarea = document.createElement('textarea');
textarea.id = 'temp_element';
textarea.style.height = 0;
document.body.appendChild(textarea);
textarea.value = document.getElementById('reportContainer').innerText;
const selector = document.querySelector('#temp_element');
selector.select();
document.execCommand('copy');
document.body.removeChild(textarea);
};
const updateState = (state) => {
var status = "";
switch (state) {
case "in_progress":
status = "Research in progress..."
setReportActionsStatus("disabled");
break;
case "finished":
status = "Research finished!"
setReportActionsStatus("enabled");
break;
case "error":
status = "Research failed!"
setReportActionsStatus("disabled");
break;
case "initial":
status = ""
setReportActionsStatus("hidden");
break;
default:
setReportActionsStatus("disabled");
}
document.getElementById("status").innerHTML = status;
if (document.getElementById("status").innerHTML == "") {
document.getElementById("status").style.display = "none";
} else {
document.getElementById("status").style.display = "block";
}
}
/**
* Shows or hides the download and copy buttons
* @param {str} status Kind of hacky. Takes "enabled", "disabled", or "hidden". "Hidden is same as disabled but also hides the div"
*/
const setReportActionsStatus = (status) => {
const reportActions = document.getElementById("reportActions");
// Disable everything in reportActions until research is finished
if (status == "enabled") {
reportActions.querySelectorAll("a").forEach((link) => {
link.classList.remove("disabled");
link.removeAttribute('onclick');
reportActions.style.display = "block";
});
} else {
reportActions.querySelectorAll("a").forEach((link) => {
link.classList.add("disabled");
link.setAttribute('onclick', "return false;");
});
if (status == "hidden") {
reportActions.style.display = "none";
}
}
}
document.addEventListener("DOMContentLoaded", init);
return {
startResearch,
copyToClipboard,
};
})(); |