53db325bb2
- Create image.php script for generating bubble images - Add example usage HTML page for testing - Update README with documentation - Support multiple bubble styles - Gracefully handle missing fonts 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
152 lines
5.5 KiB
HTML
152 lines
5.5 KiB
HTML
<!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> |