diff --git a/.gitignore b/.gitignore index ecfc043..509f2a1 100644 --- a/.gitignore +++ b/.gitignore @@ -4,6 +4,9 @@ mounts/ # Ignore fonts directory fonts/ +# Ignore reference repos +reference/ + # Node modules node_modules/ diff --git a/example.html b/example.html index cc731dc..625d706 100644 --- a/example.html +++ b/example.html @@ -16,8 +16,8 @@
- - + +
diff --git a/image_html.php b/image_html.php new file mode 100644 index 0000000..267315c --- /dev/null +++ b/image_html.php @@ -0,0 +1,114 @@ + [ + 'background' => '#c8dcff', + 'border' => '#96aade', + 'text' => '#000000', + ], + 'modern' => [ + 'background' => '#646464', + 'border' => '#464646', + 'text' => '#ffffff', + ], + 'retro' => [ + 'background' => '#fff0c8', + 'border' => '#dcb48c', + 'text' => '#64321e', + ], + 'minimal' => [ + 'background' => '#f5f5f5', + 'border' => '#c8c8c8', + 'text' => '#323232', + ] +]; + +// Use default style if specified style doesn't exist +if (!isset($styles[$style])) { + $style = 'default'; +} + +// CSS for different shapes +$shapeCSS = [ + 'default' => 'border-radius: 10px;', + 'modern' => 'border-radius: 10px;', + 'retro' => 'border-radius: 0;', + 'minimal' => 'border-radius: 0;', +]; + +// Output HTML/CSS +header('Content-Type: text/html'); +?> + + + + + + Chat Bubble + + + +
+
+ +
+
+ + \ No newline at end of file diff --git a/index.js b/index.js index 78880bc..c46eba5 100644 --- a/index.js +++ b/index.js @@ -8,10 +8,10 @@ const extensionFolderPath = `scripts/extensions/third-party/${extensionName}`; // Default settings const defaultSettings = { - image_service_url: "image.php", + image_service_url: "https://calista.the.sexiest.cat/image.php", // Use fully qualified URL by default default_style: "default", enabled: true, - render_in_collapse: true // New setting to enable/disable rendering in collapsed tool calls + render_in_collapse: true // Setting to enable/disable rendering in collapsed tool calls }; // Make sure settings exist @@ -24,6 +24,14 @@ if (Object.keys(extension_settings[extensionName]).length === 0) { Object.assign(extension_settings[extensionName], defaultSettings); } +// Validate settings - ensure image URL is absolute +if (extension_settings[extensionName].image_service_url && + !extension_settings[extensionName].image_service_url.startsWith('http://') && + !extension_settings[extensionName].image_service_url.startsWith('https://')) { + console.warn(`[${extensionName}] Saved image URL is not absolute, updating to use https://`); + extension_settings[extensionName].image_service_url = `https://${extension_settings[extensionName].image_service_url}`; +} + // Function for AI to call - generates markdown image with URL-encoded text function generateChatBubbleImage(text, style) { if (!extension_settings[extensionName].enabled) { @@ -36,14 +44,23 @@ function generateChatBubbleImage(text, style) { // URL encode the text parameter const encodedText = encodeURIComponent(text); + // Ensure the URL is absolute (starts with http:// or https://) + let serviceUrl = extension_settings[extensionName].image_service_url; + if (!serviceUrl.startsWith('http://') && !serviceUrl.startsWith('https://')) { + console.warn(`[${extensionName}] Image service URL is not absolute: ${serviceUrl}`); + serviceUrl = `https://${serviceUrl}`; + } + // Construct the URL with the encoded text - const imageUrl = `${extension_settings[extensionName].image_service_url}?q=${encodedText}`; + const imageUrl = `${serviceUrl}?q=${encodedText}`; // Add style parameter if specified const fullUrl = bubbleStyle !== "default" ? `${imageUrl}&style=${bubbleStyle}` : imageUrl; + console.log(`[${extensionName}] Generated image URL: ${fullUrl}`); + // Return markdown image format return `![](${fullUrl})`; } @@ -66,7 +83,15 @@ function onEnabledInput(event) { // Handle image service URL changes function onImageUrlInput(event) { - const value = $(event.target).val(); + let value = $(event.target).val().trim(); + + // Ensure URL is absolute + if (value && !value.startsWith('http://') && !value.startsWith('https://')) { + console.warn(`[${extensionName}] Entered URL is not absolute, updating: ${value}`); + value = `https://${value}`; + $(event.target).val(value); + } + extension_settings[extensionName].image_service_url = value; saveSettingsDebounced(); } @@ -201,7 +226,14 @@ function processToolCallMessages() { const markdownImgRegex = /!\[\]\(([^)]+)\)/; const match = tool.result.match(markdownImgRegex); if (match && match[1]) { - renderContainer.html(`Chat Bubble`); + // Ensure the image URL is absolute + let imgUrl = match[1]; + if (!imgUrl.startsWith('http://') && !imgUrl.startsWith('https://')) { + console.warn(`[${extensionName}] Image URL is not absolute: ${imgUrl}`); + imgUrl = `https://${imgUrl}`; + } + console.log(`[${extensionName}] Rendering image from URL: ${imgUrl}`); + renderContainer.html(`Chat Bubble`); } else { renderContainer.html(tool.result); } diff --git a/test.html b/test.html new file mode 100644 index 0000000..0ccbb7d --- /dev/null +++ b/test.html @@ -0,0 +1,157 @@ + + + + + + SillyBubble Image Generator Test + + + +

SillyBubble Image Generator Test

+ +
+

Generate Your Own Chat Bubble

+
+ + +
+
+ + +
+ +
+
+ +
+
+

Default Style

+ Default Style Chat Bubble +
+ +
+

Modern Style

+ Modern Style Chat Bubble +
+ +
+

Retro Style

+ Retro Style Chat Bubble +
+ +
+

Minimal Style

+ Minimal Style Chat Bubble +
+
+ +
+

How to Use in SillyBubble Extension

+

The SillyBubble extension uses this image generator to create chat bubbles on the fly. The extension passes text to this script and gets back an image.

+ +

URL Format:

+
image.php?q=[URL-ENCODED-TEXT]&style=[STYLE-NAME]
+ +

Available Styles:

+ +
+ + + + \ No newline at end of file