Translated file for you.
Closed this issue · 1 comments
webmaster-exit-1 commented
Translated by Webmaster-exit-1 a.k.a. MrGFY
// ==UserScript==
// @name PreChatGPT
// @description Automated batch submission of questions from ChatGPT
// @version 2.2
// @author zizhanovo
// @namespace https://github.com/zizhanovo/Pre-ChatGPT
// @supportURL https://github.com/zizhanovo/Pre-ChatGPT
// @license GPL-2.0-only
// @match https://chat.openai.com/*
// @grant GM_addStyle
// ==/UserScript==
(function () {
'use strict';
// Add CSS style
GM_addStyle(`
#sidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 270px;
padding: 20px;
background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
overflow: hidden;
}
#toggleSidebar {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 30px;
height: 30px;
background: #fafafa;
border: 1px solid #ccc;
border-radius: 50%;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: left 0.3s, border 0.3s, background 0.3s;
display: flex;
align-items: center;
justify-content: center;
}
#sidebar.collapsed #sidebarContent {
display: none;
}
#sidebar.collapsed #toggleSidebar {
left: 15px;
}
#sidebarWrapper {
position: relative; /* New wrapper */
}
#toggleSidebar:hover {
border-color: #007BFF; /* Change border color on hover */
background: #e6e6e6; /* Change background color on hover */
}
#toggleSidebar svg {
height: 15px;
width: 15px;
transition: all 0.3s ease-in-out;
}
#sidebar.collapsed {
width: 60px;
}
#sidebar.collapsed #toggleSidebar {
left: 15px; /* Position it to the right when sidebar is collapsed */
}
#sidebar h2 {
text-align: center;
color: #333;
font-size: 1.4em;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
#sidebar textarea {
width: 100%;
height: 100px;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
transition: border-color 0.3s;
resize: none;
}
#sidebar textarea:focus {
border-color: #007BFF;
outline: none;
}
#sidebar button {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
color: white;
cursor: pointer;
transition: background-color 0.3s;
}
#submitQuestion, #start {
padding: 10px 20px;
border: none;
border-radius: 5px;
color: white;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}
#submitQuestion {
background-color: #4CAF50;
}
#submitQuestion:active {
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
transform: translateY(3px);
}
#submitQuestion:hover {
background-color: #45a049;
}
#start {
background-color: #008CBA;
margin-bottom: 20px;
}
#start:active {
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
transform: translateY(3px);
}
#start:hover {
background-color: #007B99;
}
#questionList {
max-height: 200px;
overflow-y: auto;
}
.questionContainer {
display: flex;
align-items: center;
}
.question {
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.question:hover {
background-color: #f0f0f0;
}
.question:before {
content: '❓';
margin-right: 4px;
}
.question.answered {
color: #aaa;
}
.question.answered:before {
content: '✅';
}
.question button {
margin-left: 0px;
background: none;
border: 1px solid #000; /* Added this trip */
box-sizing: border-box; /* Added this trip */
cursor: pointer;
transition: color 0.3s;
display: flex;
justify-content: center;
align-items: center;
}
.question button:hover {
color: #007BFF;
}
.question .button-container {
margin-left: auto;
display: flex;
gap: 0px;
}
.button-container button {
width: 24px; /* Increase the size of the button */
height: 24px; /* Increase the size of the button */
padding: 0;
border: 2px solid red; /* Use a more visible border */
}
.question button svg {
width: 18px;
height: 18px;
margin: auto;
pointer-events: none; /* Let click events pass through the SVG to the button */
}
.button-group {
display: flex;
justify-content: space-between;
}
.question-text {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border: none;
outline: none;
}
#questionSummary {
display: flex;
justify-content: space-between;
margin-top: 20px;
padding: 10px;
background-color: #f5f5f5;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.08);
transition: all 0.3s ease-in-out;
height: 90px; /* Add this line and set a suitable height */
}
.summary-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
width: 45%;
padding: 10px;
background-color: #ffffff;
border: 1px solid #e8e8e8;
border-radius: 10px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.05);
transition: all 0.3s ease-in-out;
}
.summary-item:hover {
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
transform: scale(1.02);
}
.icon-count-container {
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
width: 50%;
}
.summary-icon {
font-size: 18px;
margin-right: 10px;
color: #333333;
}
.summary-count {
font-size: 18px;
margin-right: 10px;
color: #333333;
}
.button-container {
display: flex;
justify-content: center;
align-items: center;
width: 50%;
padding: 3px;
height: 100%; /* Add this line */
}
.summary-action {
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
border: 1px solid #e8e8e8; /* Border */
color: black; /* Change button text color */
background-color: transparent; /* Remove the background color */
padding: 5px 8px;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease-in-out;
width: 100%;
height: 100%;
}
.summary-action:hover {
background-color: #f0f0f0; /* Modify the background color in the hover state */
}
.vertical-text {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: 20px;
margin: 0 auto;
}
#settingSidebar {
position: fixed;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 270px;
padding: 20px;
background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease-in-out;
overflow: hidden;
}
#settingSidebar h2 {
text-align: center;
color: #333;
font-size: 1.4em;
padding-bottom: 10px;
border-bottom: 1px solid #ccc;
margin-bottom: 10px;
}
.input-row {
margin-bottom: 10px;
}
.input-row label {
display: block;
margin-bottom: 5px;
color: #333;
font-weight: bold;
}
.input-row input[type="text"],
.input-row input[type="number"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
transition: border-color 0.3s;
font-size: 14px;
font-family: Arial, sans-serif;
}
.input-row input[type="text"]:focus,
.input-row input[type="number"]:focus {
border-color: #007BFF;
outline: none;
}
#runMode {
display: flex;
justify-content: space-between;
gap: 10px;
}
#runMode input[type="radio"] {
margin-right: 10px;
}
#delayTime {
width: 80px;
margin-left: 10px;
padding: 5px;
border: 1px solid #ccc;
border-radius: 5px;
transition: border-color 0.3s;width: 70px; / * adjust the width to the appropriate size * /
text-align: right; / * Align the text right * /
}
#delayTime:disabled {
background-color: #f0f0f0;
}
.mode-option {
display: flex;
align-items: center;
background-color: #f0f0f0;
padding: 10px;
border-radius: 5px;
}
.mode-option input[type="number"] {
margin-left: 10px;
}
.clear-cache-btn {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #88c0d0;
color: white;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}
.clear-cache-btn:active {
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
transform: translateY(3px);
}
.clear-cache-btn:hover {
background-color: #81a1c1;
}
.button-container1 {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
}
#openSetting{font-size: 24px; / * adjust the font size * /
color: #4A4A4A; / * Change the font color * /
transition: all 0.3s ease; /* Transition animation */
cursor: pointer; /* Change the mouse landscape style */
}
#openSetting:hover {
color: #3b3b3b; /* The color of the mouse hovering */
text-shadow: 2px 2px 4px #888; /* The shadow color of the mouse hovering */
}
#openSetting:active {
transform: scale(0.97); /* Reduce the ratio when clicking */
}
#backToMainSidebar{
font-size: 24px; /* Adjust the font size */
color: #4a4a4a; /* Change the font color */
transition: all 0.3s ease; /* Transition animation */
cursor: pointer; /* Change the mouse landscape style */
}
#backToMainSidebar:hover {
color: #3b3b3b; /* The color of the mouse hovering */
text-shadow: 2px 2px 4px #888; /* The shadow color of the mouse hovering */
}
#backToMainSidebar:active {
transform: scale(0.97); /* Reduce the ratio when clicking */
}
.styled-select {
display: block;
font-size: 1em;
width: 100%;
max-width: 600px;
box-sizing: border-box;
margin: 0;
}
.dropdown {
display: block;
width: 100%;
box-sizing: border-box;
border: 1px solid #aaa;
border-radius: 4px;
box-shadow: 0 1px 0 1px rgba(0,0,0,.04);
background-color: #fff;
color: #444;
padding: .5em .75em;
}
.input-flex {
display: flex;
align-items: center;
}
.input-flex label {
margin-right: 10px;
}
.input-row {
background-color: rgba(255, 255, 255, 0.8);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
border-radius: 5px;
padding: 10px;
margin-bottom: 10px;
}
/* Adjust the border and spacing */
.input-row label {
margin-bottom: 5px;
color: #333;
font-weight: bold;
}
/* Adjust the font color and size */
.input-row input[type="text"],
.input-row input[type="number"],
.input-row select {
color: #333;
font-size: 14px;
}
.input-row select {
padding: 8px;
}
/* Adjust button style */
.button-container1 button {
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #88c0d0;
color: white;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
box-shadow: 0px 5px 10px rgba(0,0,0,0.2);
}
.button-container1 button:active {
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
transform: translateY(3px);
}
.button-container1 button:hover {
background-color: #81a1c1;
}
.dragging {
opacity: 0.5;
}
.my-app-night-mode #sidebar,
.my-app-night-mode #settingSidebar {
background-color: #1f1f1f;
border: 1px solid #444;
}
.my-app-night-mode #sidebar textarea {
background-color: #1f1f1f;
color: #fff;
}
.my-app-night-mode #toggleSidebar {
background: #d3d3d3; /* light grey */
border: 1px solid #444;
color: #ccc;
}
.my-app-night-mode #toggleSidebar:hover {
border-color: #7eb8ff;
background: #bdbdbd; /* light grey */
color: #ccc;
}
.my-app-night-mode #submitQuestion,
.my-app-night-mode #start {
background-color: #8CAF85;
color: #fff;
}
.my-app-night-mode #submitQuestion:hover,
.my-app-night-mode #start:hover {
background-color: #7ba079;
}
.my-app-night-mode .question {
background-color: #3f3f3f;
color: #fff;
}
.my-app-night-mode .question:hover {
background-color: #2f2f2f;
}
.my-app-night-mode .question.answered {
color: #aaa;
}
.my-app-night-mode .button-container button {
border: 2px solid #ff4444;
color: #fff;
}
.my-app-night-mode #questionSummary {
background-color: #3f3f3f;
color: #fff;
}
.my-app-night-mode .summary-count {
color: #aaa;
}
.my-app-night-mode .summary-item {
background-color: #3f3f3f;
border: 1px solid #444;
color: #fff;
}
.my-app-night-mode .summary-action {
color: #888;
}
.my-app-night-mode .summary-action svg {
fill: #bbb;
}
.my-app-night-mode .summary-action:hover {
background-color: #2f2f2f;
}
.my-app-night-mode #delayTime {
background-color: #333; /* Change the background color of the delay time input box to dark gray */
color: #ccc; /* Change the text color of the delay time input box to light gray */
transition: background-color 0.3s, color 0.3s;
}
.my-app-night-mode .clear-cache-btn {
background-color: #68a0b0;
color: #fff;
}
.my-app-night-mode .clear-cache-btn:hover {
background-color: #6189a1;
}
.my-app-night-mode #openSetting,
.my-app-night-mode #backToMainSidebar {
color: #ccc; /* Use light gray as text color */
}
.my-app-night-mode #openSetting:hover,
.my-app-night-mode #backToMainSidebar:hover {
color: #ddd; /* Use light gray as text color */
}
.my-app-night-mode .dropdown {
border: 1px solid #555;
}
.my-app-night-mode input[type="text"],
.my-app-night-mode input[type="number"],
.my-app-night-mode select {
background-color: #1f1f1f;
border: 1px solid #555;
color: #fff;
}
.my-app-night-mode .input-row label,
.my-app-night-mode .input-row input[type="text"],
.my-app-night-mode .input-row input[type="number"],
.my-app-night-mode .input-row select {
color: #f5f5f5; /* Set text color to light white */
}
.my-app-night-mode input[type="text"]:focus,
.my-app-night-mode input[type="number"]:focus,
.my-app-night-mode select:focus {
border-color: #7eb8ff;
outline: none;
}
.my-app-night-mode .input-row {
color: gray;
background-color: black;
}
.my-app-night-mode .button-container1 button {
background-color: #88c0d0;
color: #fff;
}
.my-app-night-mode .button-container1 button:active {
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
transform: translateY(3px);
}
.my-app-night-mode .button-container1 button:hover {
background-color: #81a1c1;
}
.my-app-night-mode .mode-option {
background-color: #1f1f1f;
}
.my-app-night-mode .vertical-text {
color: #fff;
}
.my-app-night-mode pre {
background-color: #1f1f1f;
color: #ddd;
padding: 10px;
border-radius: 5px;
overflow-x: auto;
}
.my-app-night-mode #deleteCompleted,
.my-app-night-mode #deletePending {
background-color: lightgray;
}
.my-app-night-mode #runMode label {
color: lightgray;
}
#delayTime:after {
content: "Second";
margin-left: 5px;
}
.button-group {
display: flex;
flex-direction: row;
gap: 5px; /* Add interval between the buttons */
}
#start {
display: block;
margin-top: 5px; /* Move the running button to the next line */
}
#stepRun {
background-color: #007BFF;
color: #fff;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.3s; /* Add transitions */
}
#stepRun:hover {
background-color: #0056b3; /* Change background color on hover */
}
#stepRun:active {
background-color: #00408c; /* Change background color when clicked */
transform: translateY(2px); /* Add a slight vertical shift when clicked */
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2); /* Add a shadow effect */
}
`);
// Create the main sidebar
function createMainSidebar() {
const sidebar = document.createElement('div');
sidebar.id = 'sidebar';
sidebar.innerHTML = `
<div id="toggleSidebar">
<svg viewBox="0 0 24 24" id="icon-expand">
<path d="M10 18h4v-2h-4v2zM3 13h18v-2H3v2zm0 7h12v-2H3v2zm0-14v2h18V6H3z"/>
</svg>
<svg viewBox="0 0 24 24" id="icon-collapse" style="display: none;">
<path d="M10 20h4V4h-4v16zm0-18H6v20h4V2zm8 0h-4v20h4V2z"/>
</svg>
</div>
<section id="sidebarContent">
<h2 ID = "OpenSetting" style = "cursor: pointer;"> Prechat settings </h2>
<textarea ID = "QuestionInput" Placeholder = "Please enter your prompt, you can enter batch input, default + split"> </textarea>
<div class = "Button-Group">
<button id = "submitquestion"> Submit </Button>
<button id = "stePrun"> single step operation </Button>
</div>
<div class = "Button-Group">
<button id = "start"> automatic operation </Button>
</div>
<ul id="questionList"></ul>
<div id="questionSummary" class="question-summary">
<div class="summary-item">
<div class="icon-count-container">
<div class="icon-container">
<span class="summary-icon">✅</span>
</div>
<div class="count-container">
<span class="summary-count" id="completedCount">0</span>
</div>
</div>
<div class="button-container">
<a href="#" class="summary-action" id="deleteCompleted">
<svg t="1685867554988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2373" width="200" height="200">
<path d="M832 1024H192V288h64v672h512V288h64v736zM128 160h768v64H128z" fill="#2A2A3B" p-id="2374"></path>
<path d="M672 224H352V0h320z m-256-64h192V64h-192zM384 384h64v448h-64zM576 384h64v448h-64z" fill="#2A2A3B" p-id="2375"></path>
</svg>
</a>
</div>
</div>
<div class="summary-item">
<div class="icon-count-container">
<div class="icon-container">
<span class="summary-icon">❓</span>
</div>
<div class="count-container">
<span class="summary-count" id="pendingCount">0</span>
</div>
</div>
<div class="button-container">
<a href="#" class="summary-action" id="deletePending">
<svg t="1685867554988" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2373" width="200" height="200">
<path d="M832 1024H192V288h64v672h512V288h64v736zM128 160h768v64H128z" fill="#2A2A3B" p-id="2374"></path>
<path d="M672 224H352V0h320z m-256-64h192V64h-192zM384 384h64v448h-64zM576 384h64v448h-64z" fill="#2A2A3B" p-id="2375"></path>
</svg>
</a>
</div>
</div>
</div>
</section>
`;
document.body.appendChild(sidebar);
// Apply night mode class if the selected theme is "Night mode "
const savedTheme = localStorage.getItem('selectedTheme') || 'light'; // Default to light mode
if (savedTheme === 'dark') {
document.documentElement.classList.add('my-app-night-mode');
}
}
// Create setting sidebar
function createSettingSidebar() {
const settingSidebar = document.createElement('div');
settingSidebar.id = 'settingSidebar';
settingSidebar.style.display = 'none'; // Initially hide the sidebar of the sidebar
settingSidebar.innerHTML = `
<section id="sidebarContent">
<h2 id="backToMainSidebar" style="cursor: pointer;">PreChat Save </h2>
<div class="input-row">
<Label for = "themeselect"> Topic selection: </label>
<select id="themeSelect" class="styled-select dropdown">
<option value="Light "> Daily Model </Option>
<option value = "dark"> Night mode </option>
</select>
</div>
<div class="input-row"><Label for = "splitcharinput"> split symbol: </label>
<input type = "text" id = "splitcharinput" placeholder = "Leave a short default +" />
</div>
<div class="input-row"><Label for = "additionalinput"> Output enhancement: </label>
<div class="styled-select">
<div class="input-flex">
<laabel for = "depthSelect"> Deep: </label>
<select id = "depthSelect" class = "dropdown" onchange = "Savedropdownsettings ()">>
<option value = "None"> None </option>
<option value = "Primary School (Grade 1-6)"> Primary School (Grade 1) </option>
<option value = "junior high school (grade 7-9)"> junior high school (grade 7-9) </option>
<option value = "High School (Grade 10-12)"> High School (Grade 10-12) </option>
<option value = "University Foundation"> University Preparatory </Option>
<option value = "Undergraduate"> Undergraduate </option>
<option value = "Graduate"> Graduate </option>
<option value = "Master's"> Master's degree </option>
<option value = "doctoral candidate"> Doctor candidate </option>
<option value = "post -doctoral"> post -doctoral </option>
<option value = "Dr. .d"> Dr. .d </option>
</select>
</div>
<div class="input-flex">
<label for="inferenceSelect">reasoning:</label>
<select id="inferenceSelect" class="dropdown" onchange="saveDropdownSettings()">
<option value="None "> None</option>
<option value="Expiring Method "> Expiring Method: Conclusion</option>
<option value="Inductive law "> induction method: Example push law</option>
<option value="Tracing of the Law "> Tracing and Law: Track on the cause of things</option>
<option value="Actival method "> analog method: Similar push new situation</option>
<option value="Random method "> Random method: No rules play</option>
</select>
</div>
<div class="input-flex">
<label for="styleSelect">style：</label>
<select id="styleSelect" class="dropdown" onchange="saveDropdownSettings()">
<option value="none">none</option>
<option value="debate">debate</option>
<option value="encourage">encourage</option>
<option value="neutral">neutral</option>
<option value="Information">Information</option>
<option value="friendly">friendly</option>
</select>
</div>
<input type="text" id="additionalInput" placeholder="For example, zero sample prompts (please think step by step), less sample prompts (provided output cases), thinking chain (providing thinking process), etc." />
</div>
</div>
<div class="input-row">
<label for="runMode">Run mode:</label>
<div id="runMode">
<div class="mode-option">
<input type="radio" id="instant" name="mode" value="instant" checked>
<label for="instant">immediate</label>
</div>
<div class="mode-option">
<input type="radio" id="delayed" name="mode" value="delayed">
<label for="delayed">Delay</label>
<input type="number" id="delayTime" placeholder="432" disabled>
</div>
</div>
</div>
<div class="button-container1" style="display: inline-block;">
<button class="clear-cache-btn">Empty the cache</button>
</div>
<div class="button-container1" style="display: inline-block;">
<button class="clear-cache-btn">
<a href="https://fkaygdsx06.feishu.cn/docx/XcKHdDHNfoqNruxSzlIcSLUWnFd" target="_blank">Use documentation</a>
</button>
</div>
</section>
`;
document.body.appendChild(settingSidebar); // Add the sidebar to the sidebar to DOM 中
// Add the following code after creating the code setting the sidebar
document.getElementById('depthSelect').addEventListener('change', saveDropdownSettings);
document.getElementById('inferenceSelect').addEventListener('change', saveDropdownSettings);
document.getElementById('styleSelect').addEventListener('change', saveDropdownSettings);
const clearCacheBtn = document.querySelector('.clear-cache-btn');
clearCacheBtn.addEventListener('click', clearCache);
}
// Creating code of the main side border and setting sidebar
createMainSidebar();
createSettingSidebar();
function loadDropdownSettings() {
const depthSelect = document.getElementById('depthSelect');
const inferenceSelect = document.getElementById('inferenceSelect');
const styleSelect = document.getElementById('styleSelect');
const savedTheme = localStorage.getItem('selectedTheme') || "light";
const savedDepth = localStorage.getItem('selectedDepth') || "Undergraduate"; // Choose undergraduate by default
const savedInference = localStorage.getItem('selectedInference') || "deduction"; // Select the deduction method by default
const savedStyle = localStorage.getItem('selectedStyle') || "Information"; // The default selection information is rich
const themeSelect = document.getElementById('themeSelect');
themeSelect.addEventListener('change', changeTheme);
themeSelect.value = savedTheme;
depthSelect.value = savedDepth;
inferenceSelect.value = savedInference;
styleSelect.value = savedStyle;
// Apply the selected theme and night mode class
applyTheme(savedTheme);
}
function applyTheme(theme) {
if (theme === 'dark') {
document.documentElement.classList.add('my-app-night-mode');
} else {
document.documentElement.classList.remove('my-app-night-mode');
}
}
function changeTheme() {
const themeSelect = document.getElementById('themeSelect');
const selectedTheme = themeSelect.value;
applyTheme(selectedTheme);
// Save the selected theme to local storage
localStorage.setItem('selectedTheme', selectedTheme);
}
function saveDropdownSettings() {
const themeSelect = document.getElementById('themeSelect');
const depthSelect = document.getElementById('depthSelect');
const inferenceSelect = document.getElementById('inferenceSelect');
const styleSelect = document.getElementById('styleSelect');
const selectedTheme = themeSelect.value;
const selectedDepth = depthSelect.value;
const selectedInference = inferenceSelect.value;
const selectedStyle = styleSelect.value;
localStorage.setItem('selectedTheme', selectedTheme);
localStorage.setItem('selectedDepth', selectedDepth);
localStorage.setItem('selectedInference', selectedInference);
localStorage.setItem('selectedStyle', selectedStyle);
}
document.getElementById('openSetting').addEventListener('click', function () {
// Hide the main sidebar
document.getElementById('sidebar').style.display = 'none';
// Display setting sidebar
document.getElementById('settingSidebar').style.display = '';
// Load the drop -down box settings
loadDropdownSettings();
// Local storage loading settings
const splitChar = localStorage.getItem('splitChar');
const additional = localStorage.getItem('additional');
const runMode = localStorage.getItem('runMode');
const delayTime = localStorage.getItem('delayTime');
// Update setting the field in the sidebar
document.getElementById('splitCharInput').value = splitChar || '';
document.getElementById('additionalInput').value = additional || '';
document.getElementById('delayTime').value = delayTime || '';
if (runMode === 'instant') {
document.getElementById('instant').checked = true;
} else if (runMode === 'delayed') {
document.getElementById('delayed').checked = true;
}
});
document.getElementById('backToMainSidebar').addEventListener('click', function () {
// Get the field value in setting the sidebar
const selectedTheme = document.getElementById('themeSelect').value;
const splitChar = document.getElementById('splitCharInput').value;
const additional = document.getElementById('additionalInput').value;
const runMode = document.querySelector('input[name="mode"]:checked').value;
const delayTime = document.getElementById('delayTime').value;
// Save settings to local storage
localStorage.setItem('selectedTheme', selectedTheme);
localStorage.setItem('splitChar', splitChar);
localStorage.setItem('additional', additional);
localStorage.setItem('runMode', runMode);
localStorage.setItem('delayTime', delayTime);
// Hide setting the sidebar
document.getElementById('settingSidebar').style.display = 'none';
// Show the main sidebar
document.getElementById('sidebar').style.display = '';
});
// Event listener for run mode radio button inputs
const delayedRadio = document.getElementById('delayed');
const delayTimeInput = document.getElementById('delayTime');
delayedRadio.addEventListener('change', function () {
delayTimeInput.disabled = false;
});
const instantRadio = document.getElementById('instant');
instantRadio.addEventListener('change', function () {
delayTimeInput.disabled = true;
});
function clearCache() {
var btn = document.querySelector('.clear-cache-btn');
if (typeof (Storage) !== "undefined") {
if (confirm("Are you sure you want to clear all the cache data?？")) {
try {
localStorage.clear();
console.log("The cache has been empty!");
btn.innerText = "The cache has been empty";
setTimeout(function () {
btn.innerText = "Empty the cache";
}, 3000); // Restore the original after 3 seconds
} catch (e) {
console.log("Cleaning the cache failed, error information: ", e);
}
}
} else {
alert("Sorry, your browser does not support Web Storage...");
}
}
// Toggle logic
document.getElementById('toggleSidebar').addEventListener('click', function () {
var sidebar = document.getElementById('sidebar');
var iconExpand = document.getElementById('icon-expand');
var iconCollapse = document.getElementById('icon-collapse');
sidebar.classList.toggle('collapsed');
if (sidebar.classList.contains('collapsed')) {
iconCollapse.style.display = 'none';
iconExpand.style.display = '';
} else {
iconExpand.style.display = 'none';
iconCollapse.style.display = '';
}
});
(function () {
const questionList = document.getElementById('questionList');
const submitQuestionButton = document.getElementById('submitQuestion');
const questionInput = document.getElementById('questionInput');
const startButton = document.getElementById('start');
// Event listeners
submitQuestionButton.addEventListener('click', handleQuestionSubmission);
questionList.addEventListener('click', handleQuestionClick);
window.addEventListener('load', loadQuestionsFromLocalStorage);
startButton.addEventListener('click', startAskingQuestions);
// Added one -step execution button event processing function
document.getElementById('stepRun').addEventListener('click', function () {
startAskingQuestions(true); // Run the function in a single step mode
});
let isAutoRunMode = true; // Logic variables, indicating that the current is automatic operation mode
// Event listeners
startButton.addEventListener('click', function () {
isAutoRunMode = true; // Set to automatic running mode
startAskingQuestions();
});
document.getElementById('stepRun').addEventListener('click', function () {
isAutoRunMode = false; // Set as a single -step running mode
startAskingQuestions();
});
function generateUUID() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
function handleQuestionSubmission() {
const questions = getQuestionsFromInput();
if (questions.some(question => question.trim() === "")) {
return; // If any question is empty, return without executing further steps
}
for (let question of questions) {
const uuid = generateUUID(); // Generate a unique ID for the question
addQuestionToList(question, false, uuid); // Pass the answered state to addQuestionToList
addQuestionToLocalStorage(question, uuid); // Pass the UUID to addQuestionToLocalStorage
}
clearInput();
makeQuestionListSortable();
updateQuestionCounts();
}
function addQuestionToLocalStorage(question, uuid) {
try {
// Get the current list of questions from local storage
let storedQuestions = getQuestionsFromLocalStorage();
// Check if getQuestionsFromLocalStorage returned a valid array
if (!Array.isArray(storedQuestions)) {
console.error('Failed to retrieve questions from local storage.');
return;
}
// Add the new question to the list
storedQuestions.push({ id: uuid, text: question, answered: false });
// Store the updated list back to local storage
localStorage.setItem('questions', JSON.stringify(storedQuestions));
// Update question counts
updateQuestionCounts();
console.log(`Question "${question}" with ID "${uuid}" added to local storage.`);
} catch (err) {
console.error(`Error adding question to local storage: ${err}`);
}
}
function handleQuestionClick(event) {
if (event.target.classList.contains('question-text')) {
toggleQuestionTextWhiteSpace(event.target);
}
}
// Helper functions
function getQuestionsFromInput() {
// Obtain the split symbol from local storage, if there is no settings, use the default symbol
const splitChar = localStorage.getItem('splitChar') || '+';
return questionInput.value.split(splitChar);
}
function addQuestionToList(question, answered, uuid) {
if (question.trim() === "") {
return null; // Return null if question is empty
}
const questionDiv = createQuestionDiv(question, answered);
questionDiv.dataset.id = uuid; // Store the UUID in the DOM element
questionList.appendChild(questionDiv);
if (answered) {
questionDiv.classList.add('answered');
}
updateQuestionCounts();
return questionDiv;
}
function createQuestionDiv(question, answered) {
const div = document.createElement('div');
div.className = 'question';
div.draggable = true;
const questionContainer = document.createElement('div');
questionContainer.style.display = "flex";
questionContainer.style.justifyContent = "center"; // Add this line to center the content vertically
const questionText = document.createElement('textarea');
questionText.className = 'question-text';
questionText.value = question;
questionText.readOnly = true;
questionText.style.border = 'none';
questionText.style.height = '42px';
questionText.style.resize = 'none';
questionText.style.margin = 'auto'; // Add this line to center the textarea vertically
questionContainer.appendChild(questionText);
div.appendChild(questionContainer);
const buttonContainer = document.createElement('div');
buttonContainer.className = 'button-container';
// const editButton = createButton('edit', handleEditButtonClick);
// buttonContainer.appendChild(editButton);
const deleteButton = createButton('delete', handleDeleteButtonClick);
buttonContainer.appendChild(deleteButton);
const sortButton = createButton('sort');
buttonContainer.appendChild(sortButton);
div.appendChild(buttonContainer);
// Add 'answered' class if the question is answered
if (answered) {
div.classList.add('answered');
}
div.addEventListener('dragstart', function (e) {
e.dataTransfer.setData('text/plain', this.outerHTML); // Set the HTML of the element to the dragged data
this.classList.add('dragging'); // Add a class to make the element look different when dragging
});
div.addEventListener('dragend', function () {
this.classList.remove('dragging'); // Remove the class when the drag is over
});
return div;
}
// Suppose the ID of your question list is'questionList'
const questionListDiv = document.getElementById('questionList');
questionListDiv.addEventListener('dragover', function (e) {
e.preventDefault(); // Allow elements are placed
const dragging = document.querySelector('.dragging');
const afterElement = getDragAfterElement(questionListDiv, e.clientY); // Get the element below the mouse
if (afterElement == null) {
questionListDiv.appendChild(dragging); // If there is no element below the mouse, place it at the end of the list
} else {
questionListDiv.insertBefore(dragging, afterElement); // Otherwise, put it in front of this element
}
});
function getDragAfterElement(container, y) {
const draggableElements = [...container.querySelectorAll('.question:not(.dragging)')]; // Getting all the elements that can be dragged, except the one that is being dragged
// Traversing elements and finding the elements below the mouse
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
function createButton(type, clickHandler) {
const button = document.createElement('button');
button.className = `${type}-button`;
switch (type) {
// case 'edit':
// button.innerHTML = `<svg t="1684557647867" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3766" width="20" height="20"><path d="M862.709333 116.042667a32 32 0 1 1 45.248 45.248L455.445333 613.813333a32 32 0 1 1-45.258666-45.258666L862.709333 116.053333zM853.333333 448a32 32 0 0 1 64 0v352c0 64.8-52.533333 117.333333-117.333333 117.333333H224c-64.8 0-117.333333-52.533333-117.333333-117.333333V224c0-64.8 52.533333-117.333333 117.333333-117.333333h341.333333a32 32 0 0 1 0 64H224a53.333333 53.333333 0 0 0-53.333333 53.333333v576a53.333333 53.333333 0 0 0 53.333333 53.333333h576a53.333333 53.333333 0 0 0 53.333333-53.333333V448z" fill="#000000" p-id="3767"></path></svg>`; // SVG for edit button
// break;
case 'delete':
button.innerHTML = `<svg t="1684556652392" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2423" width="20" height="20"><path d="M202.666667 256h-42.666667a32 32 0 0 1 0-64h704a32 32 0 0 1 0 64H266.666667v565.333333a53.333333 53.333333 0 0 0 53.333333 53.333334h384a53.333333 53.333333 0 0 0 53.333333-53.333334V352a32 32 0 0 1 64 0v469.333333c0 64.8-52.533333 117.333333-117.333333 117.333334H320c-64.8 0-117.333333-52.533333-117.333333-117.333334V256z m224-106.666667a32 32 0 0 1 0-64h170.666666a32 32 0 0 1 0 64H426.666667z m-32 288a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z m170.666666 0a32 32 0 0 1 64 0v256a32 32 0 0 1-64 0V437.333333z" fill="#000000" p-id="2424"></path></svg>`; // SVG for delete button
break;
case 'sort':
button.innerHTML = `<svg t="1684417162772" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6670" width="24" height="24"><path d="M368 706.72l-64 64V576h-64v194.72l-64-64L130.72 752 272 893.28 413.28 752 368 706.72zM272 130.72L130.72 272 176 317.28l64-64V448h64V253.28l64 64L413.28 272 272 130.72zM480 192h416v64H480zM480 384h416v64H480zM480 576h416v64H480zM480 768h416v64H480z" fill="#333333" p-id="6671"></path></svg>`; // SVG for sort button
break;
}
if (clickHandler) {
button.addEventListener('click', clickHandler);
}
return button;
}
// function handleEditButtonClick(event) {
// const questionText = event.target.parentElement.previousElementSibling;
// const isEditing = questionText.getAttribute('data-isEditing') === 'true';
// if (!isEditing) { // If it's not in editing state
// questionText.setAttribute('contentEditable', 'true');
// questionText.style.border = '1px solid';
// questionText.style.backgroundColor = '#fff';
// questionText.focus();
// questionText.setAttribute('data-isEditing', 'true');
// } else { // If it's in editing state
// questionText.setAttribute('contentEditable', 'false');
// questionText.style.border = 'none';
// questionText.style.backgroundColor = 'transparent';
// questionText.removeAttribute('data-isEditing'); // Remove the attribute
// // Update the corresponding question in localStorage
// const storedQuestions = JSON.parse(localStorage.getItem('questions') || '[]');
// const questionToUpdate = storedQuestions.find(q => q.text === questionText.textContent);
// if (questionToUpdate) {
// questionToUpdate.text = questionText.textContent;
// localStorage.setItem('questions', JSON.stringify(storedQuestions));
// }
// }
// }
function handleDeleteButtonClick(event) {
// Use the closest method to get the question div
const questionDiv = event.target.closest('.question');
const questionText = questionDiv.querySelector('input.question-text');
const questionUuid = questionDiv.dataset.id; // Get the UUID from the DOM element
// Remove the question from the DOM
questionDiv.remove();
updateQuestionCounts();
// Remove the question from localStorage
let storedQuestions = getQuestionsFromLocalStorage(); // We can use this helper function here
storedQuestions = storedQuestions.filter(q => q.id !== questionUuid); // Use the UUID to filter the question
localStorage.setItem('questions', JSON.stringify(storedQuestions));
updateQuestionCounts();
}
function clearInput() {
questionInput.value = '';
}
function makeQuestionListSortable() {
new Sortable(questionList, {
handle: '.sort-button',
animation: 150
});
}
function toggleQuestionTextWhiteSpace(questionText) {
questionText.style.whiteSpace = questionText.style.whiteSpace === 'nowrap' ? 'normal' : 'nowrap';
}
function loadQuestionsFromLocalStorage() {
try {
const storedQuestions = getQuestionsFromLocalStorage();
for (let question of storedQuestions) {
let questionDiv = addQuestionToList(question.text, question.answered, question.id);
if (question.answered) {
questionDiv.classList.add('answered');
}
}
updateQuestionCounts();
console.log(`Loaded ${storedQuestions.length} questions from local storage.`);
} catch (err) {
console.error(`Error loading questions from local storage: ${err}`);
}
}
function getQuestionsFromLocalStorage() {
try {
let storedQuestions = localStorage.getItem('questions');
storedQuestions = storedQuestions ? JSON.parse(storedQuestions) : [];
// Map raw objects from local storage to question objects with custom methods
storedQuestions = storedQuestions.map((rawQuestion) => ({
id: rawQuestion.id,
text: rawQuestion.text,
answered: rawQuestion.answered
}));
console.log(`Retrieved ${storedQuestions.length} questions from local storage.`);
return storedQuestions;
} catch (err) {
console.error(`Error retrieving questions from local storage: ${err}`);
return []; // Return an empty array if there was an error
}
}
function updateQuestionCounts() {
const counts = getQuestionCounts();
document.getElementById('completedCount').textContent = counts.answeredCount;
document.getElementById('pendingCount').textContent = counts.unansweredCount;
}
async function startAskingQuestions() {
try {
const questions = Array.from(document.getElementsByClassName('question'));
const runMode = localStorage.getItem('runMode');
const delayTime = parseInt(localStorage.getItem('delayTime') || '300');
for (let i = 0; i < questions.length; i++) {
const questionDiv = questions[i];
// Check whether the question has been answered
if (questionDiv.classList.contains('answered')) {
continue; // If you have answered, skip this question
}
const questionInput = questionDiv.querySelector('textarea.question-text');
const questionUUID = questionDiv.dataset.id;
if (!questionDiv.classList.contains('answered')) {
let questionText = questionInput.value; // Save question text
// Get the value of the drop -down box
const depthSelect = document.getElementById('depthSelect');
const inferenceSelect = document.getElementById('inferenceSelect');
const styleSelect = document.getElementById('styleSelect');
const selectedDepth = depthSelect.value; // Get the selected value
const selectedInference = inferenceSelect.value; // Get the selected value
const selectedStyle = styleSelect.value; // Get the selected value
const selectedValues = [];
// Check if the selected values are not "none", and add them to the selectedValues array
if (selectedDepth !== "none") {
selectedValues.push(`Answer depth: ${selectedDepth}`);
}
if (selectedInference !== "none") {
selectedValues.push(`Reasoning framework: ${selectedInference}`);
}
if (selectedStyle !== "none") {
selectedValues.push(`Answer style: ${selectedStyle}`);
}
// Join the selectedValues array with a space as a separator
const selectedText = selectedValues.join(' ');
// Append the selectedText to the questionText if it is not empty
if (selectedText) {
questionText += ` ${selectedText}`;
}
if (runMode === 'instant') {
console.log(`Asking question instantly: ${questionText}`);
await askQuestionInstant(questionText);
} else if (runMode === 'delayed') {
console.log(`Delaying for ${delayTime}ms before asking question: ${questionText}`);
await delay(delayTime);
await askQuestionDelayed(questionText);
}
questionDiv.classList.add('answered');
updateQuestionInLocalStorage(questionUUID, true); // Update the question status is to answer
console.log(`Question asked and marked as answered: ${questionText}`);
await new Promise(resolve => setTimeout(resolve, 500));
}
// If you are in a single -step running mode, exit the cycle after dealing with a problem
if (!isAutoRunMode) {
break;
}
}
await updateQuestionCounts();
} catch (err) {
console.error(`Error occurred while asking questions: ${err}`);
}
}
async function askQuestionInstant(question) {
return new Promise((resolve, reject) => {
try {
const additional = localStorage.getItem('additional') || '';
const questionToSend = `${question} ${additional}`.trim();
const inputBox = document.querySelector('textarea');
if (!inputBox) {
reject('Could not find textarea for input.');
}
inputBox.value = questionToSend;
const event = new Event('input', { bubbles: true });
inputBox.dispatchEvent(event);
const interval = setInterval(() => {
const sendButton = inputBox.nextElementSibling;
if (sendButton && !sendButton.disabled) {
sendButton.click();
} else {
clearInterval(interval);
resolve();
}
}, 1000); // Check whether the sending button can be clicked once per second
} catch (err) {
console.error(`Error occurred while asking question: ${err}`);
reject(err);
}
});
}
function askQuestionDelayed(question) {
return new Promise((resolve, reject) => {
try {
if (!question) {
console.error("No question provided");
reject('No question provided');
return;
}
const additional = localStorage.getItem('additional') || '';
const questionToSend = `${question} ${additional}`.trim();
const inputBox = document.querySelector('textarea');
if (!inputBox) {
console.error("Input box not found");
reject('Input box not found');
return;
}
inputBox.value = questionToSend;
const event = new Event('input', { bubbles: true });
inputBox.dispatchEvent(event);
const sendButton = inputBox.nextElementSibling;
if (!sendButton) {
console.error("Send button not found");
reject('Send button not found');
return;
}
const delayTime = parseInt(localStorage.getItem('delayTime'), 10);
if (isNaN(delayTime)) {
console.error("Invalid delayTime");
reject('Invalid delayTime');
return;
}
// Delay for delayTime (ms) then click the button and resolve
setTimeout(() => {
console.log(`Question sent after delay of ${delayTime} ms`);
sendButton.click();
resolve();
}, delayTime * 1000);
} catch (error) {
console.error(`Error in askQuestionDelayed: ${error}`);
reject(error);
}
});
}
function updateQuestionInLocalStorage(questionUUID, answered) {
try {
let storedQuestions = getQuestionsFromLocalStorage();
let questionToUpdate = storedQuestions.find(q => q.id === questionUUID);
// Check if questionToUpdate is found
if (!questionToUpdate) {
console.error(`Question with UUID ${questionUUID} not found in local storage.`);
return false;
}
console.log('Updating question:', questionToUpdate);
// Update the answered status of the question
questionToUpdate.answered = answered;
// Update the question list in local storage
localStorage.setItem('questions', JSON.stringify(storedQuestions));
console.log(`Question with UUID ${questionUUID} updated successfully.`);
// Return true on successful update
return true;
} catch (error) {
console.error(`Error in updateQuestionInLocalStorage: ${error}`);
return false;
}
}
function delay(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms);
});
}
function getQuestionCounts() {
let storedQuestions = getQuestionsFromLocalStorage();
let answeredCount = 0;
let unansweredCount = 0;
for (let question of storedQuestions) {
if (question.answered) {
answeredCount++;
} else {
unansweredCount++;
}
}
return {
answeredCount,
unansweredCount
};
}
async function deleteCompletedQuestions() {
let questions = document.querySelectorAll('.question.answered');
for (let question of questions) {
let questionUUID = question.dataset.id;
question.remove();
await removeFromLocalStorage(questionUUID)
.then(questionUUID => console.log(`Question with UUID ${questionUUID} removed from local storage.`))
.catch(error => console.error(`Error removing question from local storage: ${error}`));
}
updateQuestionCounts();
}
async function deletePendingQuestions() {
let confirmation = confirm('Are you sure you want to delete all the unfinished problems?');
if (confirmation) {
let questions = document.querySelectorAll('.question:not(.answered)');
for (let question of questions) {
let questionUUID = question.dataset.id;
question.remove();
await removeFromLocalStorage(questionUUID)
.then(questionUUID => console.log(`Question with UUID ${questionUUID} removed from local storage.`))
.catch(error => console.error(`Error removing question from local storage: ${error}`));
}
}
updateQuestionCounts();
}
async function removeFromLocalStorage(questionUUID) {
return new Promise((resolve, reject) => {
let storedQuestions = localStorage.getItem('questions');
storedQuestions = storedQuestions ? JSON.parse(storedQuestions) : [];
storedQuestions = storedQuestions.filter(q => q.id !== questionUUID);
localStorage.setItem('questions', JSON.stringify(storedQuestions));
resolve(questionUUID); // Modify here to pass Questionuuid to Resolve
});
}
document.getElementById('deleteCompleted').addEventListener('click', deleteCompletedQuestions);
document.getElementById('deletePending').addEventListener('click', deletePendingQuestions);
})();
})();
function toggleInput(radio) {
var delayTimeInput = document.getElementById("delayTime");
delayTimeInput.disabled = !radio.checked;
if (radio.checked) {
delayTimeInput.focus();
delayTimeInput.select();
}
}
webmaster-exit-1 commented
i just checked, no.