Implement SillyBubble extension for dynamic chat bubble images
- Create extension for generating dynamic chat bubble images via markdown - Add function that AI models can call to generate properly formatted markdown links - Implement URL encoding for text parameters - Add configurable settings for image service URL and bubble styles - Include test functionality to preview generated bubble markdown 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Sven Olderaan
parent
36b800f6bc
commit
c4a1e493c9
37
CLAUDE.md
Normal file
37
CLAUDE.md
Normal file
@ -0,0 +1,37 @@
|
||||
# SillyBubble - Dynamic Chat Bubble Extension
|
||||
|
||||
## Extension Purpose
|
||||
- Creates dynamic chat bubble images from AI-provided text
|
||||
- Uses a tool function called by the AI to generate markdown image links
|
||||
- Properly URL-encodes the text parameter in the image URL
|
||||
|
||||
## Build & Test Commands
|
||||
- Extension Installation: Place in `extensions/` directory of SillyTavern
|
||||
- No build process needed - extension is JavaScript-based
|
||||
- Test in SillyTavern by verifying:
|
||||
- Tool registration with the AI
|
||||
- Proper URL encoding of parameters
|
||||
- Markdown image rendering in chat
|
||||
|
||||
## Code Style Guidelines
|
||||
|
||||
### Structure
|
||||
- Extension name: "SillyBubble"
|
||||
- Key files: `index.js` (tool registration), `manifest.json`, `style.css`
|
||||
|
||||
### Tool Implementation
|
||||
- Register tool function `generateChatBubbleImage` for AI function calling
|
||||
- Function should accept text input and return formatted markdown
|
||||
- Use `encodeURIComponent()` for proper URL parameter encoding
|
||||
- Return format: ``
|
||||
|
||||
### JavaScript Patterns
|
||||
- Use async/await for asynchronous operations
|
||||
- Rely on jQuery for DOM manipulation
|
||||
- Import required functions from SillyTavern's extensions.js
|
||||
- Register event handlers in jQuery ready function
|
||||
|
||||
### Extension Settings
|
||||
- Store settings in `extension_settings[extensionName]`
|
||||
- Allow configuration of image service URL
|
||||
- Support style parameters (e.g., bubble style, colors)
|
||||
52
Concept.md
Normal file
52
Concept.md
Normal file
@ -0,0 +1,52 @@
|
||||
# SillyTavern Extension: Dynamic Chat Bubble Image Generation
|
||||
|
||||
## **Objective**
|
||||
The goal of this extension is to dynamically generate chat bubble images containing text provided by the AI in SillyTavern. The AI will generate markdown image links that point to an API, which will return a styled chat bubble containing the text. This enables a more immersive and visually enhanced roleplay experience.
|
||||
|
||||
## **Functional Description**
|
||||
1. **AI Markdown Output**
|
||||
- The AI will include markdown-formatted image links in its responses.
|
||||
- Example output from AI:
|
||||
```markdown
|
||||
|
||||
```
|
||||
- The `q` parameter in the URL will be dynamically filled with text.
|
||||
|
||||
2. **Dynamic Image Generation**
|
||||
- The provided URL (`image.php`) will be queried whenever a markdown image is rendered.
|
||||
- This PHP script will generate an image on the fly, styling the text as a chat bubble.
|
||||
- Additional parameters (e.g., `style=modern`) could be used to define different visual styles.
|
||||
|
||||
3. **Extension-Based Implementation**
|
||||
- The solution should be built as a **SillyTavern extension** rather than modifying the core.
|
||||
- This extension will:
|
||||
- Provide a function that AI can call via tool/function calling.
|
||||
- Process the AI's request and return a correctly formatted markdown image link.
|
||||
- Handle URL encoding of the text.
|
||||
|
||||
## **Implementation Strategy**
|
||||
1. **Create a new SillyTavern extension**
|
||||
- Place extension files in the `extensions/` directory.
|
||||
- Define an `index.js` file that registers a tool function.
|
||||
- Include a `manifest.json` to declare the extension.
|
||||
|
||||
2. **Register a Tool for AI Function Calling**
|
||||
- Define a function (e.g., `generateChatBubbleImage`) that constructs the correct markdown format.
|
||||
- Ensure that the function properly encodes the text input.
|
||||
- Return a formatted markdown string (``).
|
||||
|
||||
3. **Ensure AI Utilization**
|
||||
- Modify the system prompt (if necessary) to encourage the AI to call the function.
|
||||
- Validate that the AI correctly generates responses containing image links.
|
||||
|
||||
## **Expected Outcome**
|
||||
Once implemented, SillyTavern will be able to dynamically generate chat bubble images within the AI conversation. The extension will work independently of the core system, making it easy to maintain and update.
|
||||
|
||||
## **Next Steps**
|
||||
- Develop the `index.js` script to register the tool.
|
||||
- Ensure the extension follows SillyTavern’s extension framework.
|
||||
- Test AI interactions to confirm correct markdown output.
|
||||
- Refine the PHP image generator if necessary.
|
||||
|
||||
This document serves as the foundational plan for implementing the extension.
|
||||
|
||||
33
README.md
33
README.md
@ -1,33 +1,42 @@
|
||||
# SillyTavern Extension Example
|
||||
# SillyBubble - Dynamic Chat Bubble Extension for SillyTavern
|
||||
|
||||
*Provide a brief description of how your extension works, what problem it aims to solve.*
|
||||
SillyBubble is a SillyTavern extension that enables AI models to generate dynamic chat bubble images with text. The extension provides a function that AI models can call to create properly formatted markdown image links with URL-encoded text parameters.
|
||||
|
||||
## Features
|
||||
|
||||
*Describe some of the main selling points of your extension.*
|
||||
- Provides a function for AI to generate markdown image links
|
||||
- Properly URL-encodes text parameters for image generation
|
||||
- Supports different bubble styles through style parameters
|
||||
- Configurable image service URL
|
||||
- Simple testing interface to preview bubble generation
|
||||
|
||||
## Installation and Usage
|
||||
|
||||
### Installation
|
||||
|
||||
*In most cases, this should just be using ST's inbuilt extension installer.*
|
||||
1. Install the extension using SillyTavern's built-in extension installer
|
||||
2. Configure the image service URL in the extension settings
|
||||
|
||||
### Usage
|
||||
|
||||
*Explain how to use this extension.*
|
||||
1. The extension registers a custom function `generateChatBubbleImage` that AI models can call
|
||||
2. When called, it returns a properly formatted markdown image link:
|
||||
```markdown
|
||||
|
||||
```
|
||||
3. The function accepts two parameters:
|
||||
- `text`: The text to display in the bubble (required)
|
||||
- `style`: The visual style of the bubble (optional)
|
||||
|
||||
## Prerequisites
|
||||
|
||||
*Specify the version of ST necessary here.*
|
||||
- SillyTavern with custom function support
|
||||
- A properly configured image generation service that accepts text parameters
|
||||
|
||||
## Support and Contributions
|
||||
|
||||
*Where should someone ask for support?*
|
||||
|
||||
*Consider including your own contact info for help/questions.*
|
||||
|
||||
*How can people help add to this extension?*
|
||||
For support or to contribute to this project, please visit the [GitHub repository](https://github.com/crystal/SillyBubble) or open an issue.
|
||||
|
||||
## License
|
||||
|
||||
*Be cool, use an open source license.*
|
||||
MIT License
|
||||
|
||||
41
example.html
41
example.html
@ -1,19 +1,42 @@
|
||||
<!-- You might want to add additional HTML elements to ST.
|
||||
It's good practice to separate it out from your code -->
|
||||
<div class="example-extension-settings">
|
||||
<div class="sillybubble-settings">
|
||||
<div class="inline-drawer">
|
||||
<div class="inline-drawer-toggle inline-drawer-header">
|
||||
<b>Extension Example</b>
|
||||
<b>SillyBubble - Chat Bubbles</b>
|
||||
<div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
|
||||
</div>
|
||||
<div class="inline-drawer-content">
|
||||
<div class="example-extension_block flex-container">
|
||||
<input id="my_button" class="menu_button" type="submit" value="Example Button" />
|
||||
<div class="sillybubble_block flex-container">
|
||||
<input id="sillybubble_enabled" type="checkbox" />
|
||||
<label for="sillybubble_enabled">Enable SillyBubble</label>
|
||||
</div>
|
||||
|
||||
<div class="example-extension_block flex-container">
|
||||
<input id="example_setting" type="checkbox" />
|
||||
<label for="example_setting">This is an example</label>
|
||||
<div class="sillybubble_block flex-container">
|
||||
<label for="sillybubble_image_url">Image Service URL:</label>
|
||||
<input id="sillybubble_image_url" type="text" class="text_pole" />
|
||||
</div>
|
||||
|
||||
<div class="sillybubble_block flex-container">
|
||||
<label for="sillybubble_default_style">Default Bubble Style:</label>
|
||||
<select id="sillybubble_default_style" class="text_pole">
|
||||
<option value="default">Default</option>
|
||||
<option value="modern">Modern</option>
|
||||
<option value="retro">Retro</option>
|
||||
<option value="minimal">Minimal</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="sillybubble_block flex-container">
|
||||
<input id="sillybubble_test_button" class="menu_button" type="submit" value="Test Chat Bubble" />
|
||||
</div>
|
||||
|
||||
<div class="sillybubble_info">
|
||||
<p>This extension provides a function for AI models to generate chat bubbles.</p>
|
||||
<p>Function name: <code>generateChatBubbleImage</code></p>
|
||||
<p>Parameters:</p>
|
||||
<ul>
|
||||
<li><code>text</code>: The text to display in the bubble</li>
|
||||
<li><code>style</code>: (Optional) Bubble style</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<hr class="sysHR" />
|
||||
|
||||
146
index.js
146
index.js
@ -1,63 +1,129 @@
|
||||
// The main script for the extension
|
||||
// The following are examples of some basic extension functionality
|
||||
// SillyBubble - Dynamic Chat Bubble Image Generation Extension
|
||||
import { extension_settings, getContext, loadExtensionSettings, registerCustomFunction } from "../../../extensions.js";
|
||||
import { saveSettingsDebounced, callPopup, substituteParams } from "../../../../script.js";
|
||||
|
||||
//You'll likely need to import extension_settings, getContext, and loadExtensionSettings from extensions.js
|
||||
import { extension_settings, getContext, loadExtensionSettings } from "../../../extensions.js";
|
||||
|
||||
//You'll likely need to import some other functions from the main script
|
||||
import { saveSettingsDebounced } from "../../../../script.js";
|
||||
|
||||
// Keep track of where your extension is located, name should match repo name
|
||||
const extensionName = "st-extension-example";
|
||||
// Extension configuration
|
||||
const extensionName = "SillyBubble";
|
||||
const extensionFolderPath = `scripts/extensions/third-party/${extensionName}`;
|
||||
const extensionSettings = extension_settings[extensionName];
|
||||
const defaultSettings = {};
|
||||
const defaultSettings = {
|
||||
image_service_url: "image.php",
|
||||
default_style: "default",
|
||||
enabled: true
|
||||
};
|
||||
|
||||
// Function for AI to call - generates markdown image with URL-encoded text
|
||||
function generateChatBubbleImage(text, style) {
|
||||
if (!extensionSettings.enabled) {
|
||||
return text;
|
||||
}
|
||||
|
||||
|
||||
// Loads the extension settings if they exist, otherwise initializes them to the defaults.
|
||||
// Use default style if not specified
|
||||
const bubbleStyle = style || extensionSettings.default_style;
|
||||
|
||||
// URL encode the text parameter
|
||||
const encodedText = encodeURIComponent(text);
|
||||
|
||||
// Construct the URL with the encoded text
|
||||
const imageUrl = `${extensionSettings.image_service_url}?q=${encodedText}`;
|
||||
|
||||
// Add style parameter if specified
|
||||
const fullUrl = bubbleStyle !== "default"
|
||||
? `${imageUrl}&style=${bubbleStyle}`
|
||||
: imageUrl;
|
||||
|
||||
// Return markdown image format
|
||||
return ``;
|
||||
}
|
||||
|
||||
// Load extension settings
|
||||
async function loadSettings() {
|
||||
//Create the settings if they don't exist
|
||||
extension_settings[extensionName] = extension_settings[extensionName] || {};
|
||||
if (Object.keys(extension_settings[extensionName]).length === 0) {
|
||||
Object.assign(extension_settings[extensionName], defaultSettings);
|
||||
}
|
||||
|
||||
// Updating settings in the UI
|
||||
$("#example_setting").prop("checked", extension_settings[extensionName].example_setting).trigger("input");
|
||||
// Update UI with current settings
|
||||
$("#sillybubble_enabled").prop("checked", extensionSettings.enabled).trigger("input");
|
||||
$("#sillybubble_image_url").val(extensionSettings.image_service_url).trigger("input");
|
||||
$("#sillybubble_default_style").val(extensionSettings.default_style).trigger("input");
|
||||
}
|
||||
|
||||
// This function is called when the extension settings are changed in the UI
|
||||
function onExampleInput(event) {
|
||||
// Handle enable/disable toggle
|
||||
function onEnabledInput(event) {
|
||||
const value = Boolean($(event.target).prop("checked"));
|
||||
extension_settings[extensionName].example_setting = value;
|
||||
extensionSettings.enabled = value;
|
||||
saveSettingsDebounced();
|
||||
}
|
||||
|
||||
// This function is called when the button is clicked
|
||||
function onButtonClick() {
|
||||
// You can do whatever you want here
|
||||
// Let's make a popup appear with the checked setting
|
||||
toastr.info(
|
||||
`The checkbox is ${extension_settings[extensionName].example_setting ? "checked" : "not checked"}`,
|
||||
"A popup appeared because you clicked the button!"
|
||||
);
|
||||
// Handle image service URL changes
|
||||
function onImageUrlInput(event) {
|
||||
const value = $(event.target).val();
|
||||
extensionSettings.image_service_url = value;
|
||||
saveSettingsDebounced();
|
||||
}
|
||||
|
||||
// This function is called when the extension is loaded
|
||||
// Handle default style changes
|
||||
function onDefaultStyleInput(event) {
|
||||
const value = $(event.target).val();
|
||||
extensionSettings.default_style = value;
|
||||
saveSettingsDebounced();
|
||||
}
|
||||
|
||||
// Test function to visualize a bubble
|
||||
function onTestButtonClick() {
|
||||
const testText = "This is a test chat bubble generated by SillyBubble!";
|
||||
const markdown = generateChatBubbleImage(testText);
|
||||
const testPopup = `
|
||||
<div class="sillybubble-test">
|
||||
<p>Generated Markdown:</p>
|
||||
<pre>${markdown.replace(/</g, '<').replace(/>/g, '>')}</pre>
|
||||
<p>Preview (if connected to image service):</p>
|
||||
<div>${markdown}</div>
|
||||
</div>
|
||||
`;
|
||||
callPopup(testPopup, 'text');
|
||||
}
|
||||
|
||||
// Initialize extension
|
||||
jQuery(async () => {
|
||||
// This is an example of loading HTML from a file
|
||||
// Load settings HTML
|
||||
const settingsHtml = await $.get(`${extensionFolderPath}/example.html`);
|
||||
|
||||
// Append settingsHtml to extensions_settings
|
||||
// extension_settings and extensions_settings2 are the left and right columns of the settings menu
|
||||
// Left should be extensions that deal with system functions and right should be visual/UI related
|
||||
$("#extensions_settings").append(settingsHtml);
|
||||
|
||||
// These are examples of listening for events
|
||||
$("#my_button").on("click", onButtonClick);
|
||||
$("#example_setting").on("input", onExampleInput);
|
||||
|
||||
// Load settings when starting things up (if you have any)
|
||||
// Visual extensions go in the right column (extensions_settings2)
|
||||
$("#extensions_settings2").append(settingsHtml);
|
||||
|
||||
// Register event listeners
|
||||
$("#sillybubble_enabled").on("input", onEnabledInput);
|
||||
$("#sillybubble_image_url").on("input", onImageUrlInput);
|
||||
$("#sillybubble_default_style").on("input", onDefaultStyleInput);
|
||||
$("#sillybubble_test_button").on("click", onTestButtonClick);
|
||||
|
||||
// Register the custom function for AI to call
|
||||
registerCustomFunction({
|
||||
name: 'generateChatBubbleImage',
|
||||
displayName: 'Generate Chat Bubble Image',
|
||||
description: 'Creates a markdown image link with URL-encoded text parameter for dynamic chat bubbles',
|
||||
parameters: [
|
||||
{
|
||||
name: 'text',
|
||||
displayName: 'Text',
|
||||
description: 'The text to display in the chat bubble',
|
||||
type: 'string',
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: 'style',
|
||||
displayName: 'Style',
|
||||
description: 'The visual style of the chat bubble (optional)',
|
||||
type: 'string',
|
||||
required: false,
|
||||
}
|
||||
],
|
||||
run: async function(text, style) {
|
||||
return generateChatBubbleImage(text, style);
|
||||
}
|
||||
});
|
||||
|
||||
// Load settings
|
||||
loadSettings();
|
||||
});
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
{
|
||||
"display_name": "Name Displayed in SillyTavern",
|
||||
"display_name": "SillyBubble",
|
||||
"loading_order": 9,
|
||||
"requires": [],
|
||||
"optional": [],
|
||||
"js": "index.js",
|
||||
"css": "style.css",
|
||||
"author": "yourNameHere",
|
||||
"author": "Crystal",
|
||||
"version": "1.0.0",
|
||||
"homePage": "yourUrlHere"
|
||||
"homePage": "https://github.com/crystal/SillyBubble"
|
||||
}
|
||||
|
||||
45
style.css
45
style.css
@ -1 +1,44 @@
|
||||
/* All style elements for your extension go here */
|
||||
/* SillyBubble Extension Styles */
|
||||
|
||||
.sillybubble-settings {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sillybubble_block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.sillybubble_block label {
|
||||
margin-right: 10px;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.sillybubble_block input[type="text"],
|
||||
.sillybubble_block select {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.sillybubble_info {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin: 10px 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.sillybubble_info code {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
padding: 2px 4px;
|
||||
border-radius: 3px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.sillybubble-test pre {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
overflow-x: auto;
|
||||
margin: 10px 0;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user