| const coordSet = []; |
| coordSet["Chief Executive Officer"] = { |
| "character": "Chief Executive Officer", |
| "imgid": "right", |
| "top": "-315px", |
| "left": "280px" |
| }; |
| coordSet["Chief Product Officer"] = { |
| "character": "Chief Product Officer", |
| "imgid": "left", |
| "top": "-165px", |
| "left": "110px" |
| }; |
| coordSet["Chief Human Resource Officer"] = { |
| "character": "Chief Human Resource Officer", |
| "imgid": "left", |
| "top": "-305px", |
| "left": "55px" |
| }; |
| coordSet["Code Reviewer"] = { |
| "character": "Code Reviewer", |
| "imgid": "left", |
| "top": "-185px", |
| "left": "500px" |
| }; |
| coordSet["Programmer"] = { |
| "character": "Programmer", |
| "imgid": "right", |
| "top": "-80px", |
| "left": "300px" |
| }; |
| coordSet["Chief Technology Officer"] = { |
| "character": "Chief Technology Officer", |
| "imgid": "right", |
| "top": "-130px", |
| "left": "340px" |
| }; |
| coordSet["Chief Creative Officer"] = { |
| "character": "Chief Creative Officer", |
| "imgid": "right", |
| "top": "-95px", |
| "left": "205px" |
| } |
| coordSet["Software Test Engineer"] = { |
| "character": "Software Test Engineer", |
| "imgid": "right", |
| "top": "-90px", |
| "left": "470px" |
|
|
| } |
| coordSet["User"] = { |
| "character": "User", |
| "imgid": "left", |
| "top": "-465px", |
| "left": "125px" |
| } |
| coordSet["Counselor"] = { |
| "character": "Counselor", |
| "imgid": "right", |
| "top": "-360px", |
| "left": "420px" |
| } |
| coordSet["Prompt Engineer"] = { |
| "character": "Prompt Engineer", |
| "imgid": "right", |
| "top": "-320px", |
| "left": "20px" |
| } |
| const Softwareinfo = { |
| "duration": "-1", |
| "cost": "-1", |
| "version_updates": "-1", |
| "num_code_files": "-1", |
| "num_png_files": "-1", |
| "num_doc_files": "-1", |
| "code_lines": "-1", |
| "env_lines": "-1", |
| "manual_lines": "-1", |
| "num_utterances": "-1", |
| "num_self_reflections": "-1", |
| "num_prompt_tokens": "-1", |
| "num_completion_tokens": "-1", |
| "num_total_tokens": "-1", |
| }; |
|
|
| |
| var timeinterval = 5; |
| var charinterval = 1; |
| var scrollinterval = 40; |
|
|
| var contents; |
| var filename; |
| var curdialog = ''; |
| var total_height = 0; |
|
|
| var cur_para = ''; |
| var cur_command = ''; |
| var idx = 0; |
| var dialog; |
|
|
| var replaying = 0; |
| var if_stop = 0; |
| let isPaused = false; |
| let pauseIntervalId; |
| var if_move = true; |
| var md = window.markdownit(); |
|
|
| |
| const button = document.getElementById('replay'); |
| button.addEventListener('click', () => { |
| replayDialog(idx); |
| }); |
| $(document).ready(function() { |
| $('#filebutton').click(function() { |
| $('#fileInput').click(); |
| }); |
|
|
| }); |
|
|
| const dialogbody = document.getElementById("dialogBody"); |
| dialogbody.addEventListener("mousewheel", handleMouseWheel, false); |
|
|
| function handleMouseWheel(event) { |
| if (event.wheelDelta > 0) { |
| if_move = false; |
| } else if (event.wheelDelta < 0) { |
| if (dialogbody.scrollTop + dialogbody.clientHeight == dialogbody.scrollHeight) { |
| if_move = true; |
| } |
| } |
| } |
|
|
| function getinterval(speed) { |
|
|
| if (speed < 80 && speed > 40) { |
| timeinterval = 250 / speed; |
| charinterval = 2; |
| scrollinterval = 80; |
| } else if (speed <= 40 && speed > 0) { |
| timeinterval = 150 / speed; |
| charinterval = 1; |
| scrollinterval = 80; |
| } else if (speed >= 80 && speed < 90) { |
| timeinterval = 100 / speed; |
| charinterval = 1; |
| scrollinterval = 100; |
| } else if (speed >= 90 && speed <= 100) { |
| timeinterval = 5 / speed; |
| charinterval = 1; |
| scrollinterval = 400; |
| } |
| } |
| |
| function speedchange() { |
| var speedbar = document.getElementById("speed"); |
| var speed = speedbar.value; |
| if (speed == 0) { |
| if (!isPaused) { |
| isPaused = true; |
| clearInterval(pauseIntervalId); |
| updateCompanyWorking("end"); |
| } |
| } else if (speed != 0 && isPaused == true) { |
| getinterval(speed); |
| isPaused = false; |
| idx += 1; |
| replayDialog(idx); |
| } else if (speed != 0) { |
| isPaused = false; |
| getinterval(speed); |
| } |
| } |
| |
| async function replayDialog(idx) { |
| if (replaying == 1 && idx == 0) { |
| return; |
| } |
| if (idx == 0) { |
| replaying = 1; |
| dialog = extraction(contents); |
| var filelable = document.getElementById("successupload"); |
| filelable.style.display = "block"; |
| var info = "Replaying `" + filename + "` ......"; |
| filelable.innerHTML = md.render(info); |
| } |
| for (let i = idx; i < dialog.length; ++i) { |
| await createPara(dialog[i], i); |
| } |
| } |
|
|
| |
| function watchfileInput(files) { |
| if (files.length) { |
| const file = files[0]; |
| if (file) { |
| const reader = new FileReader(); |
| reader.onload = function() { |
| contents = this.result; |
| }; |
| reader.readAsText(file); |
| var filelable = document.getElementById("successupload"); |
| filelable.style.display = "block"; |
| var info = "File uploaded (`" + file.name + "`). Please click **\"Replay\"** to show ChatDev's development process"; |
| filename = file.name; |
| filelable.innerHTML = md.render(info); |
| } |
| } |
| } |
|
|
| |
| function extraction(contents) { |
| const regex = /\[(\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2} \w+)\] ([.\s\S\n\r\d\D\t]*?)(?=\n\[\d|$)/g; |
|
|
| var matches = []; |
|
|
| let match; |
| var itemp = 0; |
| while ((match = regex.exec(contents))) { |
| console.log(itemp); |
| itemp++; |
| const timestamp = match[1]; |
| const text = match[2]; |
| matches.push({ |
| timestamp, |
| text |
| }); |
| } |
| const regex_assistant = /(.*):([.\r\n\s\S\t\d\D]*)<->([.\r\n\s\S\t\d\D]*?)\]([.\r\n\s\S\t\d\D]*)/g; |
| const regex_user = /(.*):(.*)(\[Start Chat\])([.\r\n\s\S\t\d\D]*?)\]([.\r\n\s\S\t\d\D]*)/g; |
| const regex_prompt = /(Prompt Engineer): "([.\s\S\d\D]*)"/g |
|
|
| const regex_end = /(AgentTech Ends|ChatDev Ends)/g; |
| const regex_start = /(ChatDev Starts)([\D\s])*(\d*)/g; |
|
|
| const regex_task = /(task_prompt)(.*):(.*)/g; |
| const regex_info = /Software Info([\r\n\s\S\t\d\D]*)/g; |
|
|
| const regex_system = /System/g; |
| const regex_debug = /DEBUG/g; |
|
|
| var dialog = []; |
| var count = 0; |
|
|
| for (let i = 0; i < matches.length; ++i) { |
| var if_break = false; |
| console.log(i); |
| if (i == 159 || i == 198 || i == 223 || i == 260 || i == 416 || i == 537) { |
| |
| } |
| while ((match = regex_debug.exec(matches[i].timestamp)) !== null) { |
| if_break = true; |
| } |
| while ((match = regex_system.exec(matches[i].text)) !== null) { |
| if_break = true; |
| } |
| while (((match = regex_prompt.exec(matches[i].text)) !== null)) { |
| const type = "assitant"; |
| const character = match[1]; |
| const command = match[2]; |
| const len = match[2].length; |
| count += 1; |
| dialog.push({ |
| type, |
| character, |
| command, |
| len, |
| count |
| }); |
| if_break = true; |
| } |
| if (if_break) { |
| continue; |
| } |
|
|
| while ((match = regex_assistant.exec(matches[i].text)) !== null) { |
| const type = "assitant"; |
| const character = match[1]; |
| const command = match[4]; |
| const len = match[4].length; |
| count += 1; |
| dialog.push({ |
| type, |
| character, |
| command, |
| len, |
| count |
| }); |
|
|
| } |
| while ((match = regex_user.exec(matches[i].text)) !== null) { |
| const type = "user"; |
| const character = match[1]; |
| const command = match[5]; |
| const len = match[5].length; |
| count += 1; |
| dialog.push({ |
| type, |
| character, |
| command, |
| len, |
| count |
| }); |
| } |
| while ((match = regex_start.exec(matches[i].text)) !== null) { |
| const start = match[1]; |
| const len = match[1].length; |
| dialog.push({ |
| start, |
| len, |
| }); |
|
|
| } |
| while ((match = regex_end.exec(matches[i].text)) !== null) { |
| const end = match[1]; |
| const len = match[1].length; |
| dialog.push({ |
| end, |
| len, |
| }); |
|
|
| } |
| while ((match = regex_task.exec(matches[i].text)) !== null) { |
| const task = match[3]; |
| dialog.push({ |
| task |
| }); |
|
|
| } |
| while ((match = regex_info.exec(matches[i].text)) !== null) { |
| const info = match[1]; |
| if ((/code_lines(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.code_lines = (/code_lines(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/num_code_files(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.num_code_files = (/num_code_files(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/num_png_files(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.num_png_files = (/num_png_files(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/num_doc_files(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.num_doc_files = (/num_doc_files(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/env_lines(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.env_lines = (/env_lines(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/manual_lines(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.manual_lines = (/manual_lines(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/duration(?:[\t\n\r\s\D]*?)=(-?(\d*)(.(\d)*)?s)/g).exec(info) != null) { |
| Softwareinfo.duration = (/duration(?:[\t\n\r\s\D]*?)=(-?(\d*)(.(\d)*)?s)/g).exec(info)[1]; |
| } |
| if ((/num_utterances(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.num_utterances = (/num_utterances(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/num_self_reflections(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.num_self_reflections = (/num_self_reflections(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/num_prompt_tokens(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.num_prompt_tokens = (/num_prompt_tokens(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/num_completion_tokens(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.num_completion_tokens = (/num_completion_tokens(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/num_total_tokens(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info) != null) { |
| Softwareinfo.num_total_tokens = (/num_total_tokens(?:[\t\n\r\s\D]*?)=(-?(\d*))/g).exec(info)[1]; |
| } |
| if ((/cost(?:[\t\n\r\s\D]*?)=(.((\d)*\.(\d)*))/g).exec(info) != null) { |
| Softwareinfo.cost = (/cost(?:[\t\n\r\s\D]*?)=(.((\d)*\.(\d)*))/g).exec(info)[1]; |
| } |
| if ((/version_updates(?:[\t\n\r\s\D]*?)=(-?\d*)/g).exec(info) != null) { |
| Softwareinfo.version_updates = (/version_updates(?:[\t\n\r\s\D]*?)=(-?\d*)/g).exec(info)[1]; |
| } |
|
|
| dialog.push({ |
| info, |
| Softwareinfo |
| }); |
|
|
| } |
| } |
| return dialog; |
| } |
|
|
| |
| function createPara(d, i) { |
| const singleDialog = document.createElement("div"); |
| singleDialog.style.position = "relative"; |
| curdialog = singleDialog; |
| singleDialog.style.display = "flex"; |
| singleDialog.style.flexDirection = "column"; |
| singleDialog.style.width = "773px"; |
| dialogbody.appendChild(singleDialog); |
| var paralen; |
| if (d.type && d.character) { |
| updateCompanyWorking(d.character); |
| var renderedHtml = md.render(d.character); |
| const character = document.createElement("div"); |
| character.style.display = "flex"; |
|
|
| character.style.backgroundColor = "lightblue"; |
| character.style.width = "fit-content"; |
| character.style.fontSize = "13px "; |
| character.style.border = "1px solid rgba(11, 20, 150, .3)"; |
| character.style.borderRadius = "10px"; |
| character.style.boxShadow = "2px 2px 2px black"; |
| character.style.fontFamily = "'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;"; |
|
|
| if (d.type == "user") { |
| character.style.position = "relative"; |
| character.style.marginLeft = "auto"; |
| } |
| character.innerHTML = renderedHtml; |
| singleDialog.appendChild(character); |
|
|
| const characterimg = document.createElement("img"); |
| console.log(d.character); |
| if (d.character == "Programmer") { |
| characterimg.src = "figures/programmer.png"; |
| } else if (d.character == "Code Reviewer") { |
| characterimg.src = "figures/reviewer.png"; |
| } else if (d.character == "Chief Human Resource Officer") { |
| characterimg.src = "figures/hr.png"; |
| } else if (d.character == "Chief Executive Officer") { |
| characterimg.src = "figures/ceo.png"; |
| } else if (d.character == "Chief Product Officer") { |
| characterimg.src = "figures/cpo.png"; |
| } else if (d.character == "Chief Technology Officer") { |
| characterimg.src = "figures/cto.png"; |
| } else if (d.character == "Chief Creative Officer") { |
| characterimg.src = "figures/designer.png"; |
| } else if (d.character == "Software Test Engineer") { |
| characterimg.src = "figures/tester.png"; |
| } else if (d.character == "User") { |
| characterimg.src = "figures/user.png"; |
| } else if (d.character == "Counselor") { |
| characterimg.src = "figures/counselor.png"; |
| } else if (d.character == "Prompt Engineer") { |
| characterimg.src = "figures/pe.png"; |
| } |
|
|
| characterimg.style.height = "40px"; |
| characterimg.style.width = "30px"; |
| characterimg.style.position = "relative"; |
| character.appendChild(characterimg); |
| character.style.width = "fit-content"; |
|
|
|
|
| var renderedHtml = md.render(d.command); |
| const paragraph = document.createElement("div"); |
| paragraph.className = "markdown-body"; |
| |
| paragraph.style.padding = "10px"; |
| paragraph.style.border = "3px solid #a08D8D"; |
| paragraph.style.width = "750px"; |
| paragraph.style.border = "1px solid rgba(11, 20, 150, .3)"; |
| paragraph.style.borderRadius = "10px"; |
| paragraph.style.boxShadow = "2px 2px 2px black"; |
|
|
| singleDialog.appendChild(paragraph); |
|
|
| const emptyparagraph = document.createElement("div"); |
| emptyparagraph.style.height = "10px"; |
| singleDialog.appendChild(emptyparagraph); |
|
|
| if (d.type == "user") { |
| paragraph.style.backgroundColor = "#4b751a"; |
| } else { |
| paragraph.style.backgroundColor = "#133153"; |
| } |
| cur_command = d.command; |
| cur_para = paragraph; |
| idx = i; |
| return Promise.resolve(printCommand(paragraph, d.command)); |
|
|
| } else if (d.start) { |
| paralen = 0; |
| var renderedHtml = md.render("----------" + d.start + "----------"); |
| const starttext = document.createElement("div"); |
| starttext.innerHTML = renderedHtml; |
| singleDialog.appendChild(starttext); |
|
|
| } else if (d.end) { |
| paralen = 0; |
| updateCompanyWorking("end"); |
| var renderedHtml = md.render("----------" + d.end + "----------"); |
| const endtext = document.createElement("div"); |
| endtext.innerHTML = renderedHtml; |
| singleDialog.appendChild(endtext); |
| var filelable = document.getElementById("successupload"); |
| filelable.style.display = "block"; |
| var info = "Replayed"; |
| filelable.innerHTML = md.render(info); |
| } else if (d.task) { |
| var renderedHtml = md.render("Task: " + d.task); |
| const tasktext = document.getElementById("Requesttext"); |
| tasktext.innerHTML = renderedHtml; |
| } else if (d.info) { |
| var renderedHtml = md.render(d.info); |
| const infotext = document.getElementById("dialogStatistic"); |
| var temp_label = ""; |
| for (var c in Softwareinfo) { |
| temp_label = document.getElementById(c); |
| if (Softwareinfo[c] != "-1" && Softwareinfo[c] != "-1s") { |
| temp_label.innerHTML = Softwareinfo[c]; |
| } |
| } |
| } |
| } |
|
|
| |
| function updateCompanyWorking(character) { |
| if (character == "end") { |
| var img1 = document.getElementById("right"); |
| img1.style.display = "none"; |
| var img2 = document.getElementById("left"); |
| img2.style.display = "none"; |
| return; |
| } |
| var imgid = coordSet[character].imgid; |
| var left_bias = coordSet[character].left; |
| var top_bias = coordSet[character].top; |
| var img = document.getElementById(imgid); |
|
|
| img.style.display = "block"; |
| img.style.left = left_bias; |
| img.style.top = top_bias; |
|
|
| if (imgid == "left") { |
| var another_img = document.getElementById("right"); |
| another_img.style.display = "none"; |
| } else { |
| var another_img = document.getElementById("left"); |
| another_img.style.display = "none"; |
| } |
| } |
|
|
| async function updateParashow(container, command, index, len) { |
| var cur_content; |
| if (index == len - 1) { |
| cur_content = command.slice(0, index); |
| } |
| if (index < len) { |
| cur_content = command.slice(0, index); |
| if (cur_content != null && cur_content != undefined) { |
| container.innerHTML = md.render(cur_content); |
| }; |
| } |
| if (index % (scrollinterval) == 0 && if_move == true) { |
| if (curdialog != null && curdialog != '') { |
| const newBoxRect = curdialog.getBoundingClientRect(); |
| total_height += newBoxRect.height; |
| dialogbody.scrollTo({ top: total_height, behavior: 'smooth' }); |
| } |
| } |
| } |
|
|
| async function printCommand(paragraph, command) { |
| var paralen = command.length; |
| const tasks = []; |
|
|
| for (let j = 0; j < paralen; j = j + charinterval) { |
| tasks.push(new Promise(resolve => { |
| pauseIntervalId = setTimeout(() => { |
| updateParashow(paragraph, command, j, paralen); |
| resolve(); |
| }, timeinterval * j); |
| })); |
|
|
| if (isPaused) { |
| await Promise.all(tasks); |
| } |
| } |
| await Promise.all(tasks); |
| return 1; |
| } |