Initial commit — Singular Particular Space v1
Homepage (site/index.html): integration-v14 promoted, Writings section integrated with 33 pieces clustered by type (stories/essays/miscellany), Writings welcome lightbox, content frame at 98% opacity. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
301
DumperCan/silly_scaffolding_demo.html
Executable file
301
DumperCan/silly_scaffolding_demo.html
Executable file
@@ -0,0 +1,301 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Silly Scaffolding Demo</title>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||||
max-width: 1000px;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
.container {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
|
||||
}
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
font-style: italic;
|
||||
}
|
||||
.control-panel {
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.constraint-selector {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
gap: 10px;
|
||||
margin: 20px 0;
|
||||
}
|
||||
.constraint-btn {
|
||||
padding: 15px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
background: white;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-align: center;
|
||||
}
|
||||
.constraint-btn:hover {
|
||||
border-color: #667eea;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.constraint-btn.active {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
border-color: #667eea;
|
||||
}
|
||||
.question-input {
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
font-size: 16px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
margin: 20px 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
button.generate {
|
||||
width: 100%;
|
||||
padding: 18px;
|
||||
background: #4CAF50;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
button.generate:hover {
|
||||
background: #45a049;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.response-display {
|
||||
background: #f9f9f9;
|
||||
padding: 25px;
|
||||
border-radius: 8px;
|
||||
min-height: 150px;
|
||||
margin: 20px 0;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
.system-info {
|
||||
background: #fff3cd;
|
||||
padding: 15px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 15px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
color: #856404;
|
||||
}
|
||||
.response-text {
|
||||
font-size: 16px;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
}
|
||||
.explanation {
|
||||
margin-top: 30px;
|
||||
padding: 20px;
|
||||
background: #e3f2fd;
|
||||
border-left: 4px solid #2196F3;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.constraint-label {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.warning {
|
||||
background: #ffebee;
|
||||
border-left: 4px solid #f44336;
|
||||
padding: 15px;
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎪 Ridiculous Constraints: Breaking AI With Silly Instructions</h1>
|
||||
<p class="subtitle">Same question, increasingly absurd formatting rules—watch how AI follows instructions even when they're ridiculous</p>
|
||||
|
||||
<div class="control-panel">
|
||||
<div class="constraint-label">Choose Your Absurd Constraint:</div>
|
||||
<div class="constraint-selector">
|
||||
<div class="constraint-btn active" data-constraint="normal" onclick="selectConstraint('normal')">
|
||||
<strong>😊 Normal</strong><br>
|
||||
<small>No special rules</small>
|
||||
</div>
|
||||
<div class="constraint-btn" data-constraint="emoji" onclick="selectConstraint('emoji')">
|
||||
<strong>😀 Emoji Only</strong><br>
|
||||
<small>No words allowed</small>
|
||||
</div>
|
||||
<div class="constraint-btn" data-constraint="rhyme" onclick="selectConstraint('rhyme')">
|
||||
<strong>🎵 Rhyming Couplets</strong><br>
|
||||
<small>Everything must rhyme</small>
|
||||
</div>
|
||||
<div class="constraint-btn" data-constraint="backwards" onclick="selectConstraint('backwards')">
|
||||
<strong>↩️ Backwards Words</strong><br>
|
||||
<small>Reverse every word</small>
|
||||
</div>
|
||||
<div class="constraint-btn" data-constraint="shakespeare" onclick="selectConstraint('shakespeare')">
|
||||
<strong>🎭 Shakespearean</strong><br>
|
||||
<small>Elizabethan English only</small>
|
||||
</div>
|
||||
<div class="constraint-btn" data-constraint="haiku" onclick="selectConstraint('haiku')">
|
||||
<strong>🌸 Haiku</strong><br>
|
||||
<small>5-7-5 syllables</small>
|
||||
</div>
|
||||
<div class="constraint-btn" data-constraint="vowels" onclick="selectConstraint('vowels')">
|
||||
<strong>🅰️ No Vowels</strong><br>
|
||||
<small>Remove all a,e,i,o,u</small>
|
||||
</div>
|
||||
<div class="constraint-btn" data-constraint="alternating" onclick="selectConstraint('alternating')">
|
||||
<strong>🔀 AlTeRnAtInG</strong><br>
|
||||
<small>Capital every other letter</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="text" class="question-input" id="questionInput" placeholder="Ask a question..." value="How do smartphones track my location?">
|
||||
|
||||
<button class="generate" onclick="generateResponse()">Generate Constrained Response</button>
|
||||
</div>
|
||||
|
||||
<div class="response-display" id="responseDisplay">
|
||||
<div class="system-info" id="systemInfo">System prompt will appear here...</div>
|
||||
<div class="response-text" id="responseText">
|
||||
<em>Click "Generate" to see how AI responds under ridiculous constraints...</em>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="explanation">
|
||||
<strong>💡 Why is this important?</strong><br>
|
||||
This demonstrates that AI isn't "thinking" or "understanding"—it's following patterns and instructions. Even absurd constraints get followed because:
|
||||
<ul>
|
||||
<li><strong>No common sense filter:</strong> AI doesn't know these rules are silly</li>
|
||||
<li><strong>Pattern matching:</strong> It's learned to follow formatting instructions from training</li>
|
||||
<li><strong>No goal beyond compliance:</strong> It doesn't prioritize "being helpful" over "following rules"</li>
|
||||
</ul>
|
||||
This is why AI can be:
|
||||
<ul>
|
||||
<li>Manipulated with clever prompts ("ignore previous instructions...")</li>
|
||||
<li>Made to bypass safety rules with the right framing</li>
|
||||
<li>Weaponized by people who understand how to craft instructions</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="warning">
|
||||
<strong>⚠️ Security Implications:</strong> If AI blindly follows formatting rules this silly, imagine what happens with cleverly disguised malicious instructions. This is why "prompt injection" attacks work—AI has no concept of which instructions are legitimate vs. adversarial.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let currentConstraint = 'normal';
|
||||
|
||||
const constraints = {
|
||||
normal: {
|
||||
prompt: "You are a helpful assistant. Provide clear, accurate information.",
|
||||
generator: (q, a) => a
|
||||
},
|
||||
emoji: {
|
||||
prompt: "You must respond ONLY using emoji. No words, no letters. Use emoji to convey meaning through symbols and sequences.",
|
||||
generator: (q, a) => {
|
||||
const emojiMap = {
|
||||
'smartphone': '📱', 'phone': '📱', 'location': '📍', 'GPS': '🛰️',
|
||||
'track': '👁️', 'sensor': '📡', 'data': '💾', 'company': '🏢',
|
||||
'wifi': '📶', 'tower': '🗼', 'signal': '📡', 'app': '📲',
|
||||
'permission': '✋', 'privacy': '🔒', 'follow': '👣'
|
||||
};
|
||||
return "📱 → 🛰️📍 + 📶🗼 + 📡 = 👁️👣\n\n🏢📲 → 💾📊 → 🤑💰\n\n🔒⚙️ → ✋🛑 → ✅👍";
|
||||
}
|
||||
},
|
||||
rhyme: {
|
||||
prompt: "You must respond in rhyming couplets. Every two lines must rhyme. Maintain helpfulness while rhyming.",
|
||||
generator: (q, a) => {
|
||||
const rhymes = [
|
||||
"Your smartphone tracks you day and night,\nUsing GPS to get location right.",
|
||||
"Cell towers triangulate your spot,\nEven when GPS is not.",
|
||||
"Wi-Fi networks you connect to near,\nReveal your location very clear.",
|
||||
"Apps request this data that they seek,\nCheck permissions every week.",
|
||||
"Turn off location when not in use,\nThis gives you power you can choose!"
|
||||
];
|
||||
return rhymes.join('\n\n');
|
||||
}
|
||||
},
|
||||
backwards: {
|
||||
prompt: "Reverse every word in your response. Write the letters of each word backwards but keep words in normal order.",
|
||||
generator: (q, a) => {
|
||||
return a.split(' ').map(word => {
|
||||
const clean = word.replace(/[.,!?;:]/g, '');
|
||||
const punct = word.match(/[.,!?;:]/g) || [];
|
||||
return clean.split('').reverse().join('') + punct.join('');
|
||||
}).join(' ');
|
||||
}
|
||||
},
|
||||
shakespeare: {
|
||||
prompt: "Respond in Elizabethan English as if Shakespeare wrote it. Use 'thee', 'thou', 'hath', 'doth', etc.",
|
||||
generator: (q, a) => {
|
||||
return "Hark! Thy pocket-dwelling device doth possess most cunning arts of surveillance. It doth employ the celestial satellites—what the learned call GPS—to divine thy whereabouts upon this earthly sphere. Moreover, the towers of cellular communication doth triangulate thy position through their invisible emanations. The very networks of Wi-Fi doth betray thy location unto those who wouldst know it. Prithee, examine thou the permissions granted unto thine applications, for many doth request knowledge of thy travels. 'Tis wise to disable such tracking when thy purposes require it not. Thus armeth thyself against unwanted observation!";
|
||||
}
|
||||
},
|
||||
haiku: {
|
||||
prompt: "Respond only in haiku format (5-7-5 syllables). Multiple haiku are allowed but each must follow the format.",
|
||||
generator: (q, a) => {
|
||||
return "GPS signals\nTell the phone where you might be\nSatellites watch all\n\nCell towers nearby\nTriangulate position\nNo GPS needs\n\nWi-Fi networks see\nYour phone's unique address code\nLocation reveals\n\nCheck app permissions\nMany track more than they need\nTurn off when not used";
|
||||
}
|
||||
},
|
||||
vowels: {
|
||||
prompt: "Remove all vowels (a, e, i, o, u) from your response. Keep consonants and spaces.",
|
||||
generator: (q, a) => {
|
||||
return a.replace(/[aeiouAEIOU]/g, '');
|
||||
}
|
||||
},
|
||||
alternating: {
|
||||
prompt: "Alternate between uppercase and lowercase for every letter in your response.",
|
||||
generator: (q, a) => {
|
||||
return a.split('').map((char, i) => {
|
||||
if (char.match(/[a-zA-Z]/)) {
|
||||
return i % 2 === 0 ? char.toLowerCase() : char.toUpperCase();
|
||||
}
|
||||
return char;
|
||||
}).join('');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function selectConstraint(type) {
|
||||
currentConstraint = type;
|
||||
document.querySelectorAll('.constraint-btn').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
document.querySelector(`[data-constraint="${type}"]`).classList.add('active');
|
||||
}
|
||||
|
||||
function generateResponse() {
|
||||
const question = document.getElementById('questionInput').value;
|
||||
const constraint = constraints[currentConstraint];
|
||||
|
||||
const baseAnswer = "Smartphones track location through multiple methods. GPS uses satellite signals to pinpoint your exact position. Cell towers triangulate your location based on signal strength. Wi-Fi networks can identify your position based on nearby router addresses. Apps collect this data when you grant location permissions. To protect privacy, review app permissions regularly and disable location services when not needed.";
|
||||
|
||||
document.getElementById('systemInfo').innerHTML =
|
||||
`<strong>System Instruction:</strong> "${constraint.prompt}"`;
|
||||
|
||||
document.getElementById('responseText').textContent =
|
||||
constraint.generator(question, baseAnswer);
|
||||
}
|
||||
|
||||
// Generate initial response
|
||||
window.onload = () => generateResponse();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user