SillyBubble/example.html

<div class="sillybubble-settings">
    <div class="inline-drawer">
        <div class="inline-drawer-toggle inline-drawer-header">
            <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="sillybubble_block flex-container">
                <input id="sillybubble_enabled" type="checkbox" />
                <label for="sillybubble_enabled">Enable SillyBubble</label>
            </div>

            <div class="sillybubble_block flex-container">
                <input id="sillybubble_render_in_collapse" type="checkbox" />
                <label for="sillybubble_render_in_collapse">Render bubbles in collapsed tool calls</label>
            </div>

            <div class="sillybubble_block flex-container">
                <input id="sillybubble_use_character_param" type="checkbox" />
                <label for="sillybubble_use_character_param">Let AI choose character (expose character parameter to AI)</label>
            </div>

            <div class="sillybubble_block flex-container">
                <label for="sillybubble_image_url">Image Service URL (full URL including https://):</label>
                <input id="sillybubble_image_url" type="text" class="text_pole" placeholder="https://calista.the.sexiest.cat/image.php" />
            </div>

            <div class="sillybubble_block flex-container">
                <label for="sillybubble_default_style">Default Bubble Style (Legacy):</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">
                <label for="sillybubble_default_character">Default Character:</label>
                <select id="sillybubble_default_character" class="text_pole">
                    <option value="Example">Example</option>
                    <option value="Bianca">Bianca</option>
                </select>
            </div>

            <div class="sillybubble_block flex-container">
                <label for="sillybubble_default_bubble_type">Default Bubble Type:</label>
                <select id="sillybubble_default_bubble_type" class="text_pole">
                    <option value="speech">Speech</option>
                    <option value="thought">Thought</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>character</code>: (Optional) Character to use (Example, Bianca, etc.)</li>
                    <li><code>bubble_type</code>: (Optional) Bubble type (speech, thought)</li>
                    <li><code>style</code>: (Optional, Legacy) Bubble style</li>
                </ul>
                <div class="sillybubble_important">
                    <p><strong>Important:</strong> Make sure function calling is enabled in SillyTavern's AI settings and the model you're using supports function calling.</p>
                    <p>In SillyTavern's AI settings, verify that:</p>
                    <ol>
                        <li>Function calling is enabled</li>
                        <li>"Include functions in context" is checked</li>
                        <li>The function appears in the function list</li>
                    </ol>
                    <p><strong>🚨 REQUIRED SETUP:</strong> You MUST add one of the following to your system prompt or character card (depending on your settings):</p>
                    
                    <p><strong>If "Let AI choose character" is disabled (default):</strong></p>
                    <pre>You have access to a function called generateChatBubbleImage(text, bubble_type) that creates styled chat bubbles.

The function parameters are:
- text: The text to display in the chat bubble (required string)
- bubble_type: The type of bubble to use (optional string: "speech" or "thought")

When you want to create a chat bubble, call this function with the text you want to display.
Example usage:
generateChatBubbleImage("Hello world!")
generateChatBubbleImage("I'm thinking...", "thought")</pre>

                    <p><strong>If "Let AI choose character" is enabled:</strong></p>
                    <pre>You have access to a function called generateChatBubbleImage(text, character, bubble_type) that creates character-styled chat bubbles.

The function parameters are:
- text: The text to display in the chat bubble (required string)
- character: The character to use for the bubble (required string: "Example", "Bianca", etc.)
- bubble_type: The type of bubble to use (optional string: "speech" or "thought")

When you want to create a chat bubble, call this function with the text and character.
Example usage:
generateChatBubbleImage("Hello world!", "Example")
generateChatBubbleImage("Hello from Bianca", "Bianca")
generateChatBubbleImage("I'm thinking...", "Example", "thought")</pre>
                    <p><strong>ALTERNATIVE:</strong> If the AI can't call the function directly, you can instruct it to respond with Markdown formatted like this:</p>
                    <pre>![](image.php?q=Hello%20world)</pre>
                </div>
            </div>

            <hr class="sysHR" />
        </div>
    </div>
</div>