···
-
<p class="prompt">C:\PLASTIC> DIR</p>
-
<div class="file-listing">
-
<div class="file-line">
-
Volume in drive C is PLASTIC-SYS
-
<div class="file-line">Directory of C:\PLASTIC</div>
-
<div class="file-line"></div>
-
<div class="file-line">
-
<span class="dir">SYSTEM <DIR></span> 12-15-95
-
<div class="file-line">
-
<span class="exe">PLASTIC EXE</span> 24,576 12-15-95
-
<div class="file-line">
-
<span class="txt">README TXT</span> 1,024 12-15-95 3:42p
-
<div class="file-line">
-
<span class="txt">CONFIG SYS</span> 512 12-15-95 3:42p
-
<div class="file-line">4 File(s) 26,112 bytes</div>
-
<div class="file-line">524,288 bytes free</div>
<p class="prompt">C:\PLASTIC> PLASTIC.EXE</p>
···
<li>Supports EGA/VGA graphics modes</li>
-
<h2>System Commands:</h2>
-
<span class="command">HELP</span>
-
<span class="command">DIR</span>
-
<span class="command">EDIT</span>
-
<span class="command">RUN</span>
-
<span class="command">EXIT</span>
════════════════════════════════════════════════════════════
-
<p>Runtime: 00:13:37 | Memory: 589K free | CPU: 80486DX-33</p>
-
WARNING: Unauthorized modification may corrupt system files
-
<p class="prompt">C:\PLASTIC> <span class="cursor">_</span></p>
<span>F1=Help F2=Save F3=Load F10=Menu</span>
// Tool call system for AI to interact with the page
-
replaceElement: function(selector, newHTML) {
const element = document.querySelector(selector);
element.outerHTML = newHTML;
-
return { success: true, message: `Replaced element: ${selector}` };
-
return { success: false, message: `Element not found: ${selector}` };
-
updateElement: function(selector, newContent) {
const element = document.querySelector(selector);
element.innerHTML = newContent;
-
return { success: true, message: `Updated element: ${selector}` };
-
return { success: false, message: `Element not found: ${selector}` };
-
addElement: function(parentSelector, newHTML, position = 'beforeend') {
const parent = document.querySelector(parentSelector);
parent.insertAdjacentHTML(position, newHTML);
-
return { success: true, message: `Added element to: ${parentSelector}` };
-
return { success: false, message: `Parent not found: ${parentSelector}` };
-
removeElement: function(selector) {
const element = document.querySelector(selector);
-
return { success: true, message: `Removed element: ${selector}` };
-
return { success: false, message: `Element not found: ${selector}` };
-
updateStyle: function(selector, styleObj) {
const element = document.querySelector(selector);
Object.assign(element.style, styleObj);
-
return { success: true, message: `Updated styles for: ${selector}` };
-
return { success: false, message: `Element not found: ${selector}` };
-
executeJS: function(code) {
const result = eval(code);
-
return { success: true, message: 'JavaScript executed', result: result };
-
return { success: false, message: `JS Error: ${error.message}` };
function executeToolCall(toolCall) {
const { function: func, arguments: args } = toolCall;
-
console.log('Executing tool call:', func, args);
if (window.toolCallbacks[func]) {
// Handle different function signatures
-
if (func === 'removeElement') {
// removeElement expects just a selector
-
const selector = args.selector || Object.keys(args)[0] || Object.values(args)[0];
return window.toolCallbacks[func](selector);
-
} else if (func === 'updateStyle' && args.styleObj) {
-
return window.toolCallbacks[func](args.selector, args.styleObj);
-
} else if (func === 'executeJS') {
return window.toolCallbacks[func](args.code);
-
} else if (func === 'updateElement') {
-
return window.toolCallbacks[func](args.selector, args.newContent);
-
} else if (func === 'replaceElement') {
-
return window.toolCallbacks[func](args.selector, args.newHTML);
-
} else if (func === 'addElement') {
-
return window.toolCallbacks[func](args.parentSelector, args.newHTML, args.position);
// Fallback: use all argument values in order
-
return window.toolCallbacks[func](...Object.values(args));
-
return { success: false, message: `Error executing ${func}: ${error.message}` };
return { success: false, message: `Unknown tool: ${func}` };
···
// Clean up response and extract JSON if present
let cleanResponse = generatedContent.trim();
// Remove markdown formatting
cleanResponse = cleanResponse
.replace(/```json\n?/g, "")
// Try to extract JSON from mixed content
-
const jsonMatch = cleanResponse.match(/\{[\s\S]*"tool_calls"[\s\S]*\}/);
cleanResponse = jsonMatch[0];
-
console.log('Cleaned response:', cleanResponse);
// Check if response contains tool calls
const toolResponse = JSON.parse(cleanResponse);
-
if (toolResponse.tool_calls && Array.isArray(toolResponse.tool_calls)) {
for (const toolCall of toolResponse.tool_calls) {
const result = executeToolCall(toolCall);
-
console.log('Tool call result:', result);
statusDiv.textContent = `EXECUTED ${results.length} COMMANDS`;
// Send feedback to AI about tool results
-
setTimeout(() => sendToolFeedback(userPrompt, results), 100);
throw new Error("Invalid tool call format");
-
console.log('JSON parse error:', jsonError);
-
console.log('Raw response:', generatedContent);
-
console.log('Attempting to parse as HTML...');
// Not JSON, treat as HTML code
let cleanCode = generatedContent
.replace(/```html\n?/g, "")
statusDiv.textContent = "INJECTING CODE...";
-
document.querySelector(".content").innerHTML += cleanCode;
statusDiv.textContent = "CODE EXECUTION SUCCESSFUL";
···
async function sendToolFeedback(originalPrompt, toolResults) {
const statusDiv = document.getElementById("statusDisplay");
statusDiv.textContent = "SENDING FEEDBACK TO AI...";
const currentPageHTML = document.documentElement.outerHTML;
-
const resultsText = toolResults.map(r =>
-
`${r.success ? '✓' : '✗'} ${r.message}${r.result ? ` (result: ${r.result})` : ''}`
const response = await fetch(
"https://ai.hackclub.com/chat/completions",
···
-
throw new Error(`HTTP ${response.status}: ${response.statusText}`);
const data = await response.json();
-
if (data.choices && data.choices[0] && data.choices[0].message) {
followUpContent = data.choices[0].message.content;
} else if (data.content) {
followUpContent = data.content;
···
followUpContent = followUpContent.trim();
-
console.log('Follow-up response:', followUpContent);
if (followUpContent === "COMPLETE") {
statusDiv.textContent = "AI SATISFIED - TASK COMPLETE";
-
setTimeout(() => statusDiv.textContent = "", 3000);
// Process follow-up commands
statusDiv.textContent = "AI MAKING ADJUSTMENTS...";
// Try to parse as tool calls
-
const jsonMatch = followUpContent.match(/\{[\s\S]*"tool_calls"[\s\S]*\}/);
const toolResponse = JSON.parse(jsonMatch[0]);
-
if (toolResponse.tool_calls && Array.isArray(toolResponse.tool_calls)) {
const followUpResults = [];
for (const toolCall of toolResponse.tool_calls) {
const result = executeToolCall(toolCall);
followUpResults.push(result);
-
console.log('Follow-up tool result:', result);
statusDiv.textContent = `AI EXECUTED ${followUpResults.length} ADJUSTMENTS`;
···
let cleanCode = followUpContent
.replace(/```html\n?/g, "")
-
document.querySelector(".content").innerHTML += cleanCode;
-
statusDiv.textContent = "AI ADDED FOLLOW-UP CONTENT";
-
console.log('Follow-up parsing error:', error);
statusDiv.textContent = "AI FEEDBACK ERROR";
-
setTimeout(() => statusDiv.textContent = "", 4000);
statusDiv.textContent = `FEEDBACK ERROR: ${error.message}`;
-
console.error('Feedback error:', error);
-
setTimeout(() => statusDiv.textContent = "", 3000);
···
const timeStr = now.toLocaleTimeString([], {
const statusBarTime = document.querySelector(
".status-bar span:last-child",
statusBarTime.textContent = timeStr;