.png)
3 months ago
1
August 3, 2025
I was debugging this 118-line application made by AI. While I didn’t expect it to be perfect, I considered the application to be a good demonstration. It had a bug that kept the user from interacting with it:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grok's Cosmic Fortune Teller</title>
<style>
body {
font-family: 'Arial', sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: linear-gradient(to bottom, #0f0c29, #302b63, #24243e);
color: white;
overflow: hidden;
}
h1 {
font-size: 2.5em;
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
#questionInput {
width: 300px;
padding: 10px;
font-size: 16px;
border: none;
border-radius: 5px;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}
#askButton {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #ff4500;
color: white;
border: none;
border-radius: 5px;
transition: background-color 0.3s, transform 0.3s;
}
#askButton:hover {
background-color: #cc3700;
transform: scale(1.05);
}
#fortuneDisplay {
margin-top: 30px;
font-size: 1.5em;
text-align: center;
padding: 20px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 10px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
max-width: 400px;
min-height: 100px;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 1s ease-in-out;
}
#fortuneDisplay.visible {
opacity: 1;
}
.stars {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
animation: twinkle 5s infinite;
}
@keyframes twinkle {
0%, 100% { opacity: 0.5; }
50% { opacity: 1; }
}
</style>
</head>
<body>
<div class="stars"></div>
<h1>Grok's Cosmic Fortune Teller</h1>
<input type="text" id="questionInput" placeholder="Ask a question about the universe...">
<button id="askButton">Consult the Stars</button>
<div id="fortuneDisplay"></div>
<script>
const fortunes = [
"The stars align in your favor—great things await!",
"Beware the black hole of procrastination.",
"Your curiosity will launch you to new heights, like a SpaceX rocket.",
"The universe says: 'Why not?'",
"Entropy is increasing, but so is your potential.",
"A neural network of opportunities is forming around you.",
"The answer is 42, but only if you ask the right question.",
"Cosmic rays suggest: Take a leap of faith.",
"In the multiverse, you've already succeeded—catch up!",
"Grok advises: Optimize your algorithms for happiness."
];
const askButton = document.getElementById('askButton');
const fortuneDisplay = document.getElementById('fortuneDisplay');
const questionInput = document.getElementById('questionInput');
askButton.addEventListener('click', () => {
if (questionInput.value.trim() === '') {
fortuneDisplay.textContent = "The cosmos needs a question to ponder!";
} else {
const randomIndex = Math.floor(Math.random() * fortunes.length);
fortuneDisplay.textContent = fortunes[randomIndex];
}
fortuneDisplay.classList.add('visible');
});
</script>
</body>
</html>
You can find the broken version here:
Unfortunately, you can’t click the buttons!
The NSA-controlled American AI companies refused to diagnose and fix the issue when asked. A China-controlled AI got it right away and fixed the issue.
Here’s the working version:
The lesson is that if you’re under attack by the NSA, China remains a safe haven for you to innovate in.
Robert Viragh
Questions? Comments? Write to the author at: [email protected]
