<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SillyBubble Example</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
.example {
border: 1px solid #ddd;
padding: 20px;
margin-bottom: 20px;
border-radius: 5px;
}
.example h2 {
margin-top: 0;
}
.example-images {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 20px;
}
.example-images img {
max-width: 100%;
height: auto;
border: 1px solid #eee;
}
code {
background-color: #f5f5f5;
padding: 2px 4px;
border-radius: 3px;
font-family: monospace;
}
.style-selector {
margin-bottom: 20px;
}
label {
margin-right: 10px;
}
#message {
width: 100%;
padding: 10px;
margin-bottom: 10px;
box-sizing: border-box;
}
#preview-image {
margin-top: 20px;
max-width: 100%;
}
</style>
</head>
<body>
<h1>SillyBubble Image Generator Examples</h1>
<div class="example">
<h2>Try It Yourself</h2>
<div>
<textarea id="message" rows="4" placeholder="Enter your message here...">Hello, I am a chat bubble! Try me with different styles!</textarea>
<div class="style-selector">
<label>
<input type="radio" name="style" value="default" checked> Default
</label>
<label>
<input type="radio" name="style" value="modern"> Modern
</label>
<label>
<input type="radio" name="style" value="retro"> Retro
</label>
<label>
<input type="radio" name="style" value="minimal"> Minimal
</label>
</div>
<button id="generate-btn">Generate Bubble</button>
<div>
<img id="preview-image" src="" alt="Preview will appear here">
</div>
<div id="markdown-output" style="margin-top: 20px;">
<strong>Markdown for this image:</strong>
<pre><code id="markdown-code"></code></pre>
</div>
</div>
</div>
<div class="example">
<h2>Examples of Different Styles</h2>
<div class="example-images">
<div>
<p><strong>Default:</strong></p>
<img src="image.php?q=This%20is%20the%20default%20style%20for%20chat%20bubbles.%20It%20has%20a%20light%20gray%20background%20with%20rounded%20corners." alt="Default style">
</div>
<div>
<p><strong>Modern:</strong></p>
<img src="image.php?q=This%20is%20the%20modern%20style.%20It%20features%20a%20blue%20background%20with%20white%20text%20for%20a%20contemporary%20look.&style=modern" alt="Modern style">
</div>
<div>
<p><strong>Retro:</strong></p>
<img src="image.php?q=This%20is%20the%20retro%20style%20with%20a%20yellow%20background.%20It%20has%20slightly%20less%20rounded%20corners%20for%20that%20old-school%20feel.&style=retro" alt="Retro style">
</div>
<div>
<p><strong>Minimal:</strong></p>
<img src="image.php?q=This%20is%20the%20minimal%20style.%20It%20has%20a%20white%20background%20with%20no%20rounded%20corners%20for%20a%20clean,%20simple%20look.&style=minimal" alt="Minimal style">
</div>
</div>
</div>
<div class="example">
<h2>Usage in SillyBubble Extension</h2>
<p>To use this image generator with the SillyBubble extension, make sure your extension settings point to this script:</p>
<pre><code>// In SillyBubble settings
"image_service_url": "image.php"</code></pre>
<p>The extension will automatically generate URLs like:</p>
<pre><code></code></pre>
<p>When the AI uses the function, it will create these markdown images that browsers will render as chat bubbles.</p>
</div>
<script>
document.getElementById('generate-btn').addEventListener('click', function() {
const message = document.getElementById('message').value;
const style = document.querySelector('input[name="style"]:checked').value;
const encodedMessage = encodeURIComponent(message);
const imageUrl = `image.php?q=${encodedMessage}${style !== 'default' ? '&style=' + style : ''}`;
document.getElementById('preview-image').src = imageUrl;
// Update markdown
const markdown = ``;
document.getElementById('markdown-code').textContent = markdown;
});
// Initialize with default text
document.getElementById('generate-btn').click();
</script>
</body>
</html>