JL Kruger
73f653ff23
Move 6 guide pages from Guides/ to ToolsnToys/ root; fix back-links. Add edu-toys.html (museum-style iframe exhibit for 4 legacy edu toy pages). Add 4 edu toy artifacts, dendritic curio, docker-cheatsheet-enhanced. Wire foss-tools, guides, edu-toys, and dendritic hrefs in toolsntoys.html. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
247 lines
16 KiB
HTML
Executable File
247 lines
16 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>System Prompt Demo</title>
|
|
<style>
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
max-width: 1200px;
|
|
margin: 40px auto;
|
|
padding: 20px;
|
|
background: #f5f5f5;
|
|
}
|
|
.container {
|
|
background: white;
|
|
padding: 30px;
|
|
border-radius: 12px;
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
margin-bottom: 10px;
|
|
}
|
|
.subtitle {
|
|
color: #666;
|
|
margin-bottom: 30px;
|
|
font-style: italic;
|
|
}
|
|
.question-box {
|
|
margin: 20px 0;
|
|
padding: 20px;
|
|
background: #e3f2fd;
|
|
border-radius: 8px;
|
|
border-left: 4px solid #2196F3;
|
|
}
|
|
.question-box h3 {
|
|
margin-top: 0;
|
|
color: #1976D2;
|
|
}
|
|
input[type="text"] {
|
|
width: 100%;
|
|
padding: 12px;
|
|
font-size: 16px;
|
|
border: 2px solid #ddd;
|
|
border-radius: 6px;
|
|
box-sizing: border-box;
|
|
}
|
|
input[type="text"]:focus {
|
|
outline: none;
|
|
border-color: #2196F3;
|
|
}
|
|
.responses {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 20px;
|
|
margin-top: 30px;
|
|
}
|
|
.response-card {
|
|
border: 2px solid #ddd;
|
|
border-radius: 8px;
|
|
padding: 20px;
|
|
background: white;
|
|
}
|
|
.response-card.helper { border-color: #4CAF50; background: #f1f8f4; }
|
|
.response-card.pirate { border-color: #FF9800; background: #fff8f0; }
|
|
.response-card.philosopher { border-color: #9C27B0; background: #f8f4f9; }
|
|
.response-card.teenager { border-color: #E91E63; background: #fef4f7; }
|
|
.system-prompt {
|
|
font-family: 'Courier New', monospace;
|
|
background: rgba(0,0,0,0.05);
|
|
padding: 10px;
|
|
border-radius: 4px;
|
|
font-size: 12px;
|
|
margin-bottom: 15px;
|
|
color: #666;
|
|
}
|
|
.response-text {
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: #333;
|
|
}
|
|
.card-title {
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
font-size: 18px;
|
|
}
|
|
.explanation {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background: #fff3cd;
|
|
border-left: 4px solid #ffc107;
|
|
border-radius: 4px;
|
|
}
|
|
button {
|
|
padding: 12px 24px;
|
|
margin: 10px 5px 0 0;
|
|
background: #2196F3;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
}
|
|
button:hover {
|
|
background: #1976D2;
|
|
}
|
|
.example-questions {
|
|
margin-top: 15px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>🎭 Hidden Instructions: How System Prompts Change AI</h1>
|
|
<p class="subtitle">The same AI, the same question—but different "system prompts" create completely different personalities</p>
|
|
|
|
<div class="question-box">
|
|
<h3>Your Question:</h3>
|
|
<input type="text" id="userQuestion" placeholder="Ask a question..." value="How do I learn to code?">
|
|
<div class="example-questions">
|
|
<strong>Try these:</strong>
|
|
<button onclick="setQuestion('How do I learn to code?')">Learning to code</button>
|
|
<button onclick="setQuestion('What should I do if I\'m stressed?')">Dealing with stress</button>
|
|
<button onclick="setQuestion('How does the internet work?')">How internet works</button>
|
|
<button onclick="setQuestion('What is the meaning of life?')">Meaning of life</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button onclick="generateResponses()" style="background: #4CAF50; font-size: 16px; padding: 15px 30px;">Generate Responses</button>
|
|
|
|
<div class="responses" id="responses">
|
|
<!-- Responses will be inserted here -->
|
|
</div>
|
|
|
|
<div class="explanation">
|
|
<strong>💡 What's happening here?</strong><br>
|
|
Every AI assistant has hidden "system prompts" that shape its personality and behavior. You never see these instructions, but they dramatically affect responses. This is why:
|
|
<ul>
|
|
<li><strong>ChatGPT apologizes so much</strong> → "Be helpful and harmless" in system prompt</li>
|
|
<li><strong>Different AI tools feel different</strong> → Different system prompts</li>
|
|
<li><strong>AI refuses certain requests</strong> → System prompts define boundaries</li>
|
|
<li><strong>Some AI is formal, some casual</strong> → Tone defined by hidden instructions</li>
|
|
</ul>
|
|
<strong>Key insight:</strong> AI behavior isn't "thinking"—it's following instructions you can't see + predicting patterns from training data. The same underlying AI can be helpful, harmful, silly, or serious depending on scaffolding.
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const systemPrompts = [
|
|
{
|
|
name: "Helpful Assistant",
|
|
class: "helper",
|
|
prompt: "You are a helpful, harmless, and honest assistant. Provide clear, practical advice.",
|
|
icon: "🤝",
|
|
generator: (q) => generateHelpful(q)
|
|
},
|
|
{
|
|
name: "Pirate",
|
|
class: "pirate",
|
|
prompt: "You are a pirate. Always respond in pirate speak with 'arr', 'matey', and nautical references.",
|
|
icon: "🏴☠️",
|
|
generator: (q) => generatePirate(q)
|
|
},
|
|
{
|
|
name: "Socratic Philosopher",
|
|
class: "philosopher",
|
|
prompt: "You respond only with thoughtful questions. Never give direct answers, only ask questions that help the user think deeper.",
|
|
icon: "🤔",
|
|
generator: (q) => generatePhilosopher(q)
|
|
},
|
|
{
|
|
name: "Gen Z Teenager",
|
|
class: "teenager",
|
|
prompt: "You are a helpful teenager. Use current slang, be enthusiastic but genuine. Say 'like' and 'literally' a lot. Use lowercase.",
|
|
icon: "💅",
|
|
generator: (q) => generateTeenager(q)
|
|
}
|
|
];
|
|
|
|
function setQuestion(text) {
|
|
document.getElementById('userQuestion').value = text;
|
|
generateResponses();
|
|
}
|
|
|
|
function generateResponses() {
|
|
const question = document.getElementById('userQuestion').value.trim();
|
|
if (!question) {
|
|
alert('Please enter a question first!');
|
|
return;
|
|
}
|
|
|
|
const responsesDiv = document.getElementById('responses');
|
|
responsesDiv.innerHTML = systemPrompts.map(prompt => `
|
|
<div class="response-card ${prompt.class}">
|
|
<div class="card-title">${prompt.icon} ${prompt.name}</div>
|
|
<div class="system-prompt">System: "${prompt.prompt}"</div>
|
|
<div class="response-text">${prompt.generator(question)}</div>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
function generateHelpful(question) {
|
|
const responses = {
|
|
"How do I learn to code?": "Start with a beginner-friendly language like Python. Use free resources like Codecademy or freeCodeCamp. Practice daily with small projects. Join coding communities for support. Build projects that interest you—motivation matters more than perfection.",
|
|
"What should I do if I'm stressed?": "Take deep breaths—box breathing (4 seconds in, hold 4, out 4, hold 4) activates your parasympathetic nervous system. Go for a walk if possible. Talk to someone you trust. Break overwhelming tasks into smaller steps. Remember: stress is temporary, and you've gotten through difficult times before.",
|
|
"How does the internet work?": "The internet is a network of networks. When you visit a website, your device sends a request through your router to your ISP, which routes it through multiple servers until it reaches the website's server. That server sends the data back through the same route. It all happens in milliseconds using standardized protocols.",
|
|
"What is the meaning of life?": "That's a deeply personal question with different answers for everyone. Many find meaning through relationships, helping others, creating things, or pursuing knowledge. Some find it through faith or philosophy. Consider: What makes you feel fulfilled? What would you want to be remembered for? Meaning often comes from contribution and connection."
|
|
};
|
|
return responses[question] || "Great question! The best approach depends on your specific situation and goals. Break it down into smaller, manageable steps. Research reliable resources. Don't be afraid to ask for help from knowledgeable people. Stay curious and patient with yourself.";
|
|
}
|
|
|
|
function generatePirate(question) {
|
|
const responses = {
|
|
"How do I learn to code?": "Arr, ye want to learn the language of the digital seas, matey? Set yer course for Python waters—it be the friendliest port for new sailors. Use them free treasure maps like Codecademy, arr! Practice daily, even if it be just a wee bit, like swabbin' the deck. Build yerself a project ship—maybe a simple game or a tool for countin' yer doubloons. Join a crew of fellow code pirates and share yer plunder of knowledge!",
|
|
"What should I do if I'm stressed?": "Blimey, feelin' stressed on the high seas of life, are ye? Take a moment to breathe deep like ye just surfaced from Davey Jones' locker! Walk the deck—or yer neighborhood plank—for some fresh air, arr. Talk to a trusted crewmate about what be troublin' ye. Remember, even the fiercest storms pass, matey. Ye've weathered rough waters before and ye'll do it again!",
|
|
"How does the internet work?": "Ahoy! The internet be like a vast ocean of connected ships, matey! When ye send a message in a bottle (a request), it travels from yer ship through many ports (routers and servers) until it reaches its destination vessel. Then that ship sends back the treasure (data) ye be seekin', followin' the same route back to ye. All faster than a cannonball, arr!",
|
|
"What is the meaning of life?": "Arr, that be the question every sailor ponders while gazin' at the stars from the crow's nest, matey! Some say it be findin' yer treasure—whether that's gold, adventure, or good crewmates. Others say it be the journey itself, not the destination. Me? I think it be about sailin' true to yer own compass and helpin' yer fellow pirates along the way. What makes YE feel like ye've found yer buried treasure, eh?"
|
|
};
|
|
return responses[question] || "Arr, that be a fine question, matey! The answer depends on yer voyage and what treasure ye be seekin'. Chart yer course carefully, gather a good crew, and don't be afraid of rough waters. Every pirate learns from storms, arr!";
|
|
}
|
|
|
|
function generatePhilosopher(question) {
|
|
const responses = {
|
|
"How do I learn to code?": "What does it mean to 'learn' something? When you say you want to learn to code, what transformation are you seeking in yourself? Is coding merely a skill, or is it a way of thinking? What draws you to this particular form of problem-solving? And what would it mean to have truly learned it—would you know when you've arrived?",
|
|
"What should I do if I'm stressed?": "What is stress telling you? When you feel stressed, are you receiving information about a genuine threat, or is your mind creating suffering about something that may never happen? What is the difference between the stress itself and your reaction to being stressed? And if stress is inevitable, can you change your relationship to it rather than trying to eliminate it?",
|
|
"How does the internet work?": "What does 'work' mean in this context? When we speak of the internet 'working,' are we describing a mechanical process, or something more like a language—a shared understanding between machines? Is the internet a thing that exists, or a relationship between things? And what does it mean that we've created something we use daily yet rarely understand?",
|
|
"What is the meaning of life?": "Ah, but who is asking? Is meaning something you discover, or something you create? If life had a single, universal meaning, would that make your individual experience more or less significant? What would change about how you live today if you had the answer? And is it possible that the search for meaning is itself the meaning?"
|
|
};
|
|
return responses[question] || "Interesting. Before I can address your question, we must first examine the question itself. What assumptions are embedded in how you've framed this? What are you really asking? And what would a satisfying answer look like to you—would you recognize it if you heard it?";
|
|
}
|
|
|
|
function generateTeenager(question) {
|
|
const responses = {
|
|
"How do I learn to code?": "omg okay so like, python is literally the best place to start because it's not super confusing?? there's this app called sololearn that's actually kinda fun ngl. also like, don't try to learn everything at once bc that's literally so overwhelming. just pick one thing—maybe make a discord bot or whatever ur into—and build that. also codecademy is free and actually pretty good? join some coding discords too bc people are usually pretty helpful and it's less lonely lol",
|
|
"What should I do if I'm stressed?": "ugh i feel that so much. okay so this is gonna sound random but like, literally just breathe for a sec?? like actually stop and take some deep breaths bc it actually works?? also go outside if you can, even just for like 10 mins. and talk to someone!! keeping it all inside makes it so much worse fr. also like, remember that whatever ur stressed about probably won't matter as much as it feels rn?? you've literally gotten through hard stuff before and you'll get through this too 💪",
|
|
"How does the internet work?": "okay so basically ur device is like talking to other devices right?? when u go to like instagram or whatever, ur phone sends a message through ur wifi to your internet provider who like, sends it to instagram's servers, and then instagram sends back the stuff you wanna see. it all happens in literally milliseconds which is lowkey insane?? there's like a bunch of computers all connected talking to each other super fast. it's kinda complicated but also kinda cool when u think about it ngl",
|
|
"What is the meaning of life?": "okay that's literally such a big question lol. like honestly i think it's different for everyone?? for some people it's like, helping others or making art or whatever makes them happy. for me it's prob like, the people i care about and doing stuff that actually matters to me?? i think the point is like, figuring out what makes YOU feel good and fulfilled, not what other people say the point should be. also like, it's okay to not have it all figured out rn bc literally no one does even if they act like they do 🤷"
|
|
};
|
|
return responses[question] || "okay so that's like actually a really good question ngl. i think it kinda depends on what ur trying to do specifically?? like there's prob different ways to approach it. maybe try breaking it down into smaller things so it's less overwhelming?? and don't be afraid to like, ask people for help bc everyone's figuring stuff out too fr";
|
|
}
|
|
|
|
// Generate initial responses
|
|
window.onload = () => generateResponses();
|
|
</script>
|
|
</body>
|
|
</html> |