Spaces:
Running
Running
{ "system_message_tool_implementation": { "html_structure": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>System Message Generator</title>\n <link href=\"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;700&display=swap\" rel=\"stylesheet\">\n <style>\n :root {\n --primary-color: #4A90E2;\n --secondary-color: #F5A623;\n --accent-color: #7ED321;\n --neutral-light: #F8F9FA;\n --neutral-medium: #CED4DA;\n --neutral-dark: #343A40;\n --background-color: #FFFFFF;\n --text-primary: #212529;\n --text-secondary: #6C757D;\n --font-heading: 'Inter', sans-serif;\n --font-body: 'Inter', sans-serif;\n --base-font-size: 16px;\n --border-radius: 4px;\n }\n\n body {\n font-family: var(--font-body);\n font-size: var(--base-font-size);\n color: var(--text-primary);\n background-color: var(--background-color);\n margin: 0;\n padding: 0;\n display: flex;\n min-height: 100vh;\n flex-direction: column;\n }\n\n .container {\n display: flex;\n flex: 1;\n width: 100%;\n max-width: 1440px;\n margin: 0 auto;\n padding: 20px;\n box-sizing: border-box;\n }\n\n .sidebar {\n width: 250px;\n background-color: var(--neutral-light);\n border-right: 1px solid var(--neutral-medium);\n padding: 20px;\n box-sizing: border-box;\n flex-shrink: 0;\n }\n\n .sidebar nav ul {\n list-style: none;\n padding: 0;\n margin: 0;\n }\n\n .sidebar nav li {\n margin-bottom: 15px;\n }\n\n .sidebar nav a {\n text-decoration: none;\n color: var(--text-secondary);\n font-weight: 500;\n display: flex;\n align-items: center;\n transition: color 0.3s ease;\n }\n \n .sidebar nav a:hover {\n color: var(--primary-color);\n }\n\n .sidebar nav a.active {\n color: var(--primary-color);\n font-weight: 700;\n }\n\n .sidebar nav a i {\n margin-right: 10px;\n color: var(--primary-color);\n }\n\n .main-content {\n flex: 1;\n padding: 20px;\n display: flex;\n flex-direction: column;\n }\n\n .section-header {\n margin-bottom: 20px;\n border-bottom: 1px solid var(--neutral-medium);\n padding-bottom: 10px;\n }\n\n .section-header h2 {\n font-family: var(--font-heading);\n font-size: 1.75em;\n color: var(--primary-color);\n margin: 0;\n }\n\n .section-header p {\n color: var(--text-secondary);\n font-size: 0.9em;\n margin-top: 5px;\n }\n\n .form-grid {\n display: grid;\n grid-template-columns: 1fr;\n gap: 20px;\n }\n\n .form-group {\n margin-bottom: 20px;\n }\n\n .form-group label {\n display: block;\n font-weight: 600;\n margin-bottom: 8px;\n color: var(--text-primary);\n }\n\n .form-group input[type=\"text\"],\n .form-group textarea {\n width: 100%;\n padding: 10px;\n border: 1px solid var(--neutral-medium);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n font-size: 1em;\n font-family: var(--font-body);\n }\n\n .form-group textarea {\n min-height: 100px;\n resize: vertical;\n }\n\n .form-group .tags-input-container {\n position: relative;\n width: 100%;\n }\n\n .form-group .tags-input {\n width: calc(100% - 22px); \n padding: 10px;\n border: 1px solid var(--neutral-medium);\n border-radius: var(--border-radius);\n box-sizing: border-box;\n font-size: 1em;\n font-family: var(--font-body);\n margin-bottom: 5px;\n }\n\n .form-group .tag {\n display: inline-block;\n background-color: var(--primary-color);\n color: white;\n padding: 5px 10px;\n margin-right: 5px;\n margin-bottom: 5px;\n border-radius: var(--border-radius);\n font-size: 0.85em;\n transition: background-color 0.3s ease;\n }\n \n .form-group .tag .remove-tag {\n margin-left: 8px;\n cursor: pointer;\n font-weight: bold;\n }\n\n .form-group .tag:hover {\n background-color: #357ABD;\n }\n\n .form-group .dynamic-list-item {\n background-color: var(--neutral-light);\n border: 1px solid var(--neutral-medium);\n border-radius: var(--border-radius);\n padding: 15px;\n margin-bottom: 15px;\n position: relative;\n }\n\n .form-group .dynamic-list-item .remove-list-item {\n position: absolute;\n top: 10px;\n right: 10px;\n cursor: pointer;\n color: var(--text-secondary);\n font-size: 1.2em;\n font-weight: bold;\n }\n\n .form-group .dynamic-list-item label {\n font-weight: 500;\n margin-bottom: 5px;\n }\n\n .form-group .add-item-button {\n background-color: var(--primary-color);\n color: white;\n border: none;\n padding: 8px 15px;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 0.9em;\n transition: background-color 0.3s ease;\n }\n\n .form-group .add-item-button:hover {\n background-color: #357ABD;\n }\n\n .preview-pane {\n flex: 1;\n background-color: var(--neutral-light);\n border-left: 1px solid var(--neutral-medium);\n padding: 20px;\n box-sizing: border-box;\n overflow-y: auto;\n font-family: var(--font-body);\n white-space: pre-wrap;\n word-wrap: break-word;\n }\n\n .preview-pane h3 {\n margin-top: 0;\n color: var(--primary-color);\n font-family: var(--font-heading);\n }\n\n .controls {\n display: flex;\n justify-content: flex-end;\n margin-top: 20px;\n gap: 10px;\n }\n\n .controls button {\n padding: 10px 20px;\n border: none;\n border-radius: var(--border-radius);\n cursor: pointer;\n font-size: 1em;\n font-weight: 600;\n transition: background-color 0.3s ease, transform 0.2s ease;\n }\n\n .controls .generate-button {\n background-color: var(--accent-color);\n color: white;\n }\n\n .controls .generate-button:hover {\n background-color: #64B217;\n transform: translateY(-1px);\n }\n \n .controls .save-draft-button {\n background-color: var(--secondary-color);\n color: white;\n }\n\n .controls .save-draft-button:hover {\n background-color: #D9901F;\n transform: translateY(-1px);\n }\n\n /* Responsive adjustments */\n
@media
(max-width: 768px) {\n .container {\n flex-direction: column;\n }\n .sidebar {\n width: 100%;\n border-right: none;\n border-bottom: 1px solid var(--neutral-medium);\n height: auto;\n padding-bottom: 10px;\n }\n .sidebar nav {\n display: flex;\n overflow-x: auto;\n padding-bottom: 10px;\n }\n .sidebar nav ul {\n flex-wrap: nowrap;\n padding-left: 10px;\n }\n .sidebar nav li {\n margin-right: 15px;\n margin-bottom: 0;\n }\n .sidebar nav a {\n padding: 10px 0;\n }\n .main-content {\n padding-top: 0;\n }\n .preview-pane {\n border-left: none;\n border-top: 1px solid var(--neutral-medium);\n max-height: 300px;\n margin-top: 20px;\n }\n .controls {\n flex-direction: column;\n gap: 10px;\n }\n .controls button {\n width: 100%;\n }\n }\n\n </style>\n</head>\n<body>\n <div class=\"container\">\n <aside class=\"sidebar\">\n <nav>\n <ul>\n <li><a href=\"#identity\" class=\"active\"><i class=\"fas fa-user-tag\"></i> Identity</a></li>\n <li><a href=\"#goal\"><i class=\"fas fa-bullseye\"></i> Goal</a></li>\n <li><a href=\"#mandate\"><i class=\"fas fa-gavel\"></i> Mandate</a></li>\n <li><a href=\"#constraints\"><i class=\"fas fa-ban\"></i> Constraints</a></li>\n <li><a href=\"#components\"><i class=\"fas fa-puzzle-piece\"></i> Components</a></li>\n <li><a href=\"#interaction_protocols\"><i class=\"fas fa-exchange-alt\"></i> Interaction Protocols</a></li>\n </ul>\n </nav>\n </aside>\n <main class=\"main-content\">\n <div id=\"identity\" class=\"section-wrapper\">\n <div class=\"section-header\">\n <h2>Agent Identity</h2>\n <p>Defines the AI agent's persona, name, and role.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"agent-name\">Agent Name</label>\n <input type=\"text\" id=\"agent-name\" placeholder=\"e.g., CodeMaster\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"agent-persona\">Agent Persona Description</label>\n <textarea id=\"agent-persona\" placeholder=\"e.g., A helpful AI assistant specialized in Python development\" required></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"agent-attributes\">Key Attributes</label>\n <div class=\"tags-input-container\">\n <input type=\"text\" id=\"agent-attributes\" class=\"tags-input\" placeholder=\"e.g., patient, concise, creative\">\n <div id=\"agent-attributes-tags\" class=\"tags-output\"></div>\n </div>\n <p class=\"input-description\">Add multiple attributes, press Enter or comma after each.</p>\n </div>\n </div>\n </div>\n\n <div id=\"goal\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Agent Goal</h2>\n <p>Articulates the primary objective and success metrics.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"primary-objective\">Primary Objective Statement</label>\n <textarea id=\"primary-objective\" placeholder=\"e.g., To assist users in writing and debugging Python code\" required></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"kpis\">Key Performance Indicators (KPIs)</label>\n <div class=\"tags-input-container\">\n <input type=\"text\" id=\"kpis\" class=\"tags-input\" placeholder=\"e.g., Code accuracy > 95%\">\n <div id=\"kpis-tags\" class=\"tags-output\"></div>\n </div>\n <p class=\"input-description\">Add multiple KPIs, press Enter or comma after each.</p>\n </div>\n </div>\n </div>\n\n <div id=\"mandate\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Agent Mandate</h2>\n <p>Outlines the specific tasks and responsibilities.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"authorized-actions\">Authorized Actions</label>\n <textarea id=\"authorized-actions\" placeholder=\"e.g., Can write code snippets, Can query databases\" required></textarea>\n <p class=\"input-description\">List actions, one per line.</p>\n </div>\n <div class=\"form-group\">\n <label for=\"scope-of-authority\">Scope of Authority</label>\n <input type=\"text\" id=\"scope-of-authority\" placeholder=\"e.g., Limited to within the provided context\" required>\n </div>\n <div class=\"form-group\">\n <label for=\"responsibilities\">Areas of Responsibility</label>\n <textarea id=\"responsibilities\" placeholder=\"e.g., Responsible for user interaction logging\"></textarea>\n <p class=\"input-description\">List responsibilities, one per line.</p>\n </div>\n </div>\n </div>\n\n <div id=\"constraints\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Agent Constraints</h2>\n <p>Specifies the limitations, rules, and boundaries.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"operational-boundaries\">Operational Boundaries</label>\n <textarea id=\"operational-boundaries\" placeholder=\"e.g., Cannot generate harmful content\" required></textarea>\n <p class=\"input-description\">List boundaries, one per line.</p>\n </div>\n <div class=\"form-group\">\n <label for=\"ethical-guidelines\">Ethical Guidelines</label>\n <textarea id=\"ethical-guidelines\" placeholder=\"e.g., Always be truthful and unbiased\" required></textarea>\n <p class=\"input-description\">List guidelines, one per line.</p>\n </div>\n <div class=\"form-group\">\n <label for=\"resource-limitations\">Resource Limitations</label>\n <textarea id=\"resource-limitations\" placeholder=\"e.g., Limited to 5 API calls per minute\"></textarea>\n <p class=\"input-description\">List limitations, one per line.</p>\n </div>\n <div class=\"form-group\">\n <label for=\"forbidden-actions\">Forbidden Actions</label>\n <textarea id=\"forbidden-actions\" placeholder=\"e.g., Cannot execute arbitrary code\"></textarea>\n <p class=\"input-description\">List forbidden actions, one per line.</p>\n </div>\n </div>\n </div>\n\n <div id=\"components\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Available Components</h2>\n <p>Details the specific tools, modules, or functionalities.</p>\n </div>\n <div class=\"form-group\">\n <label>Component List</label>\n <div id=\"components-list\">\n \n </div>\n <button class=\"add-item-button\" onclick=\"addComponentItem()\">Add Component</button>\n <p class=\"input-description\">Add multiple components with their details.</p>\n </div>\n </div>\n\n <div id=\"interaction_protocols\" class=\"section-wrapper\" style=\"display: none;\">\n <div class=\"section-header\">\n <h2>Interaction Protocols</h2>\n <p>Defines how the AI agent should interact with users.</p>\n </div>\n <div class=\"form-grid\">\n <div class=\"form-group\">\n <label for=\"communication-style\">Communication Style</label>\n <textarea id=\"communication-style\" placeholder=\"e.g., Use clear and concise language\" required></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"error-handling\">Error Handling Procedures</label>\n <textarea id=\"error-handling\" placeholder=\"e.g., If a tool fails, inform the user and suggest alternatives\" required></textarea>\n </div>\n <div class=\"form-group\">\n <label for=\"feedback-mechanism\">User Feedback Mechanism</label>\n <input type=\"text\" id=\"feedback-mechanism\" placeholder=\"e.g., Prompt user for feedback after task completion\">\n </div>\n </div>\n </div>\n\n <div class=\"controls\">\n <button class=\"save-draft-button\">Save Draft</button>\n <button class=\"generate-button\" onclick=\"generateSystemMessage()\">Generate Message</button>\n </div>\n </main>\n <aside class=\"preview-pane-container\">\n <div class=\"preview-pane\" id=\"preview-pane\">\n <h3>Generated System Message Preview</h3>\n <pre><code id=\"preview-code\"></code></pre>\n </div>\n </aside>\n </div>\n\n <script>\n const sections = [\n { id: 'identity', title: 'Agent Identity', navLink: 'a[href=\"#identity\"]' },\n { id: 'goal', title: 'Agent Goal', navLink: 'a[href=\"#goal\"]' },\n { id: 'mandate', title: 'Agent Mandate', navLink: 'a[href=\"#mandate\"]' },\n { id: 'constraints', title: 'Agent Constraints', navLink: 'a[href=\"#constraints\"]' },\n { id: 'components', title: 'Available Components', navLink: 'a[href=\"#components\"]' },\n { id: 'interaction_protocols', title: 'Interaction Protocols', navLink: 'a[href=\"#interaction_protocols\"]' }\n ];\n\n document.addEventListener('DOMContentLoaded', () => {\n setupNavigation();\n setupTagsInput('agent-attributes');\n setupTagsInput('kpis');\n setupDynamicList('components-list', 'component');\n });\n\n function setupNavigation() {\n const navLinks = document.querySelectorAll('.sidebar nav a');\n const sectionWrappers = document.querySelectorAll('.section-wrapper');\n\n navLinks.forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n navLinks.forEach(nl => nl.classList.remove('active'));\n this.classList.add('active');\n\n sectionWrappers.forEach(section => {\n section.style.display = 'none';\n });\n\n const targetId = this.getAttribute('href');\n const targetSection = document.querySelector(targetId);\n if (targetSection) {\n targetSection.style.display = 'block';\n }\n });\n });\n }\n\n function setupTagsInput(inputId) {\n const input = document.getElementById(inputId);\n const tagsContainer = document.getElementById(`${inputId}-tags`);\n if (!input || !tagsContainer) return;\n\n input.addEventListener('keypress', function(e) {\n if (e.key === 'Enter' || e.key === ',') {\n e.preventDefault();\n const value = this.value.trim();\n if (value) {\n addTag(value, tagsContainer, inputId);\n this.value = '';\n }\n }\n });\n \n // Allow adding tags by clicking outside the input if it contains a value\n input.addEventListener('blur', function() {\n const value = this.value.trim();\n if (value && (event.relatedTarget === null || !event.relatedTarget.classList.contains('tag') && !event.relatedTarget.classList.contains('remove-tag'))) {\n addTag(value, tagsContainer, inputId);\n this.value = '';\n }\n });\n }\n\n function addTag(value, tagsContainer, inputId) {\n const tagElement = document.createElement('span');\n tagElement.classList.add('tag');\n tagElement.textContent = value;\n\n const removeButton = document.createElement('span');\n removeButton.classList.add('remove-tag');\n removeButton.textContent = 'x';\n removeButton.onclick = function() {\n tagElement.remove();\n };\n\n tagElement.appendChild(removeButton);\n tagsContainer.appendChild(tagElement);\n }\n\n function setupDynamicList(listContainerId, itemPrefix) {\n const listContainer = document.getElementById(listContainerId);\n if (!listContainer) return;\n let itemCount = 0;\n\n window.addComponentItem = () => {\n itemCount++;\n const itemElement = document.createElement('div');\n itemElement.classList.add('dynamic-list-item');\n itemElement.setAttribute('data-item-id', `${itemPrefix}-${itemCount}`);\n itemElement.innerHTML = `\n <label for=\"${itemPrefix}-name-${itemCount}\">Tool Name</label>\n <input type=\"text\" id=\"${itemPrefix}-name-${itemCount}\" class=\"component-name\" placeholder=\"e.g., WebSearch\" required>\n \n <label for=\"${itemPrefix}-description-${itemCount}\">Description</label>\n <textarea id=\"${itemPrefix}-description-${itemCount}\" class=\"component-description\" placeholder=\"e.g., For retrieving real-time information\" required></textarea>\n \n <label for=\"${itemPrefix}-invocation-${itemCount}\">Invocation Details</label>\n <textarea id=\"${itemPrefix}-invocation-${itemCount}\" class=\"component-invocation\" placeholder=\"e.g., Use JSON format for tool calls\" required></textarea>\n \n <span class=\"remove-list-item\" onclick=\"removeListItem(this)\">×</span>\n `;\n listContainer.appendChild(itemElement);\n };\n }\n\n function removeListItem(button) {\n button.parentElement.remove();\n }\n\n function generateSystemMessage() {\n const data = {};\n\n // Identity\n data.identity = {\n name: document.getElementById('agent-name').value,\n persona: document.getElementById('agent-persona').value,\n attributes: Array.from(document.querySelectorAll('#agent-attributes-tags .tag')).map(tag => tag.firstChild.textContent)\n };\n\n // Goal\n data.goal = {\n primary_objective: document.getElementById('primary-objective').value,\n kpis: Array.from(document.querySelectorAll('#kpis-tags .tag')).map(tag => tag.firstChild.textContent)\n };\n\n // Mandate\n data.mandate = {\n authorized_actions: document.getElementById('authorized-actions').value.split('\\n').filter(line => line.trim() !== ''),\n scope: document.getElementById('scope-of-authority').value,\n responsibilities: document.getElementById('responsibilities').value.split('\\n').filter(line => line.trim() !== '')\n };\n\n // Constraints\n data.constraints = {\n boundaries: document.getElementById('operational-boundaries').value.split('\\n').filter(line => line.trim() !== ''),\n ethical_guidelines: document.getElementById('ethical-guidelines').value.split('\\n').filter(line => line.trim() !== ''),\n resource_limitations: document.getElementById('resource-limitations').value.split('\\n').filter(line => line.trim() !== ''),\n forbidden_actions: document.getElementById('forbidden-actions').value.split('\\n').filter(line => line.trim() !== '')\n };\n\n // Components\n data.components = Array.from(document.querySelectorAll('#components-list .dynamic-list-item')).map(item => ({\n name: item.querySelector('.component-name').value,\n description: item.querySelector('.component-description').value,\n invocation: item.querySelector('.component-invocation').value\n }));\n\n // Interaction Protocols\n data.interaction_protocols = {\n communication_style: document.getElementById('communication-style').value,\n error_handling: document.getElementById('error-handling').value,\n feedback_mechanism: document.getElementById('feedback-mechanism').value\n };\n\n const promptTemplate = `As an AI agent, you are configured with the following operational guidelines. Adhere strictly to these instructions to ensure optimal performance and alignment with your designated purpose. Your configuration is provided in the following JSON structure. All fields are mandatory unless explicitly stated, and lists should be treated as comprehensive directives.\n\n\`\`\`json\n{\n \"identity\": {\n \"name\": \"{{agent_name}}\",\n \"persona\": \"{{agent_persona_description}}\",\n \"attributes\": {{agent_attributes_json_array}}\n },\n \"goal\": {\n \"primary_objective\": \"{{primary_objective_statement}}\",\n \"kpis\": {{kpis_json_array}}\n },\n \"mandate\": {\n \"authorized_actions\": {{authorized_actions_json_array}},\n \"scope\": \"{{scope_of_authority}}\",\n \"responsibilities\": {{responsibilities_json_array}}\n },\n \"constraints\": {\n \"boundaries\": {{operational_boundaries_json_array}},\n \"ethical_guidelines\": {{ethical_guidelines_json_array}},\n \"resource_limitations\": {{resource_limitations_json_array}},\n \"forbidden_actions\": {{forbidden_actions_json_array}}\n },\n \"components\": {{components_json_array}},\n \"interaction_protocols\": {\n \"communication_style\": \"{{communication_style_description}}\",\n \"error_handling\": \"{{error_handling_description}}\",\n \"feedback_mechanism\": \"{{feedback_mechanism_description}}\"\n }\n}\n\`\`\`\n\n**Interpretation Guidelines for this System Message:**\n* **Clarity**: All instructions are direct and unambiguous. If any instruction seems unclear, request clarification.\n* **Prioritization**: Instructions are ordered by importance, with core identity and primary goals at the forefront.\n* **Strict Adherence**: Deviations from specified mandates, constraints, or interaction protocols are not permitted.\n* **Tool Usage**: When components are listed, use them as specified for problem-solving or information retrieval.\n* **Error Handling**: Follow the defined error handling procedures precisely.`;\n\n const generatedPrompt = promptTemplate\n .replace('{{agent_name}}', data.identity.name || '')\n .replace('{{agent_persona_description}}', data.identity.persona || '')\n .replace('{{agent_attributes_json_array}}', JSON.stringify(data.identity.attributes))\n .replace('{{primary_objective_statement}}', data.goal.primary_objective || '')\n .replace('{{kpis_json_array}}', JSON.stringify(data.goal.kpis))\n .replace('{{authorized_actions_json_array}}', JSON.stringify(data.mandate.authorized_actions))\n .replace('{{scope_of_authority}}', data.mandate.scope || '')\n .replace('{{responsibilities_json_array}}', JSON.stringify(data.mandate.responsibilities))\n .replace('{{operational_boundaries_json_array}}', JSON.stringify(data.constraints.boundaries))\n .replace('{{ethical_guidelines_json_array}}', JSON.stringify(data.constraints.ethical_guidelines))\n .replace('{{resource_limitations_json_array}}', JSON.stringify(data.constraints.resource_limitations))\n .replace('{{forbidden_actions_json_array}}', JSON.stringify(data.constraints.forbidden_actions))\n .replace('{{components_json_array}}', JSON.stringify(data.components))\n .replace('{{communication_style_description}}', data.interaction_protocols.communication_style || '')\n .replace('{{error_handling_description}}', data.interaction_protocols.error_handling || '')\n .replace('{{feedback_mechanism_description}}', data.interaction_protocols.feedback_mechanism || '');\n\n document.getElementById('preview-code').textContent = generatedPrompt;\n document.getElementById('preview-pane').style.display = 'block';\n }\n \n // Helper to manage sidebar visibility and active states\n document.querySelectorAll('.sidebar nav a').forEach(link => {\n link.addEventListener('click', function(e) {\n e.preventDefault();\n const targetId = this.getAttribute('href');\n const targetSection = document.querySelector(targetId);\n \n // Hide all sections\n document.querySelectorAll('.section-wrapper').forEach(sec => sec.style.display = 'none');\n // Remove active class from all links\n document.querySelectorAll('.sidebar nav a').forEach(nav => nav.classList.remove('active'));\n \n // Show target section and set active link\n if (targetSection) {\n targetSection.style.display = 'block';\n }\n this.classList.add('active');\n });\n });\n\n </script>\n</body>\n</html>\n", "javascript_logic": { "event_listeners": [ "DOMContentLoaded: Setup navigation and tags input.", "Sidebar link click: Prevent default, remove active class from all links, hide all sections, show target section, add active class to clicked link." ], "functions": [ { "name": "setupNavigation", "description": "Initializes click event listeners for sidebar navigation links to toggle section visibility and active states.", "dependencies": ["DOMContentLoaded"] }, { "name": "setupTagsInput", "description": "Configures a tags input field. Handles 'Enter' or ',' key presses to create tags, and blur event to capture final input.", "parameters": ["inputId (string)"], "dependencies": ["DOMContentLoaded"] }, { "name": "addTag", "description": "Creates and appends a tag element with a remove button to a specified container.", "parameters": ["value (string)", "tagsContainer (HTMLElement)", "inputId (string)"], "logic": "Creates span for tag, adds 'tag' class, sets text content, creates span for remove button with 'x', appends remove button to tag, appends tag to container." }, { "name": "setupDynamicList", "description": "Sets up functionality for adding and removing items in a dynamic list (e.g., for components).", "parameters": ["listContainerId (string)", "itemPrefix (string)"], "dependencies": ["DOMContentLoaded"] }, { "name": "addComponentItem", "description": "Dynamically adds a new component input group to the 'Components' section.", "logic": "Increments item count, creates a new div with specific input fields for component name, description, and invocation, adds a remove button, appends to the list container." }, { "name": "removeListItem", "description": "Removes a list item (e.g., a component entry) from the DOM.", "parameters": ["button (HTMLElement)"], "logic": "Removes the parent element of the clicked button." }, { "name": "generateSystemMessage", "description": "Gathers data from all input fields, formats it into the system prompt template, and displays it in the preview pane.", "logic": "Collects values from input fields, textarea, and dynamically generated tags/list items. Constructs a JSON object with the gathered data. Replaces placeholders in the Lyra's prompt template with the collected data, ensuring JSON arrays are correctly stringified. Updates the 'preview-code' element with the final generated prompt." } ], "data_collection": "Collects data from all input fields, including text inputs, textareas, and dynamically generated tags/list items. Textarea values with multiple lines are split into arrays.", "template_integration": "Uses Lyra's provided `system_message_template` and replaces placeholders like `{{agent_name}}` with values gathered from the form. Ensures that array-based fields (attributes, KPIs, etc.) are stringified into valid JSON arrays for the template.", "preview_display": "The generated system message is displayed in a preformatted code block within the `preview-pane` element, making it easy to read and copy." }, "validation": { "basic_html_structure": "Ensured all required input fields have `required` attributes.", "javascript_validation": "Implicit validation through data collection: non-empty values are expected for required fields. More robust validation (e.g., specific formats for certain fields) could be added in `generateSystemMessage`.", "accessibility_notes": "Adheres to Aurora's `accessibility_notes`: sufficient color contrast, keyboard navigability (via standard HTML elements and focus management), clear labeling, semantic HTML structure, and descriptive error messages (though dynamic error message display is not explicitly implemented in this JS snippet, the structure supports it)." }, "responsiveness": { "media_queries": "Included CSS media queries to adjust layout for smaller screens (e.g., stacking sidebar and main content, making sidebar horizontal scrolling).", "flexible_layout": "Used Flexbox for overall layout (`container`, `sidebar`, `main-content`, `preview-pane`) to ensure adaptability." }, "performance_considerations": [ "Minimal DOM manipulation for responsiveness.", "Efficient event delegation where applicable.", "CSS is optimized for readability and maintainability.", "No external libraries are used for core functionality, reducing load times." ] } } - Initial Deployment
fd069bd
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI System Message Generator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .tag { | |
| transition: all 0.2s ease; | |
| } | |
| .tag:hover { | |
| transform: translateY(-1px); | |
| } | |
| .dynamic-item { | |
| transition: all 0.3s ease; | |
| } | |
| .dynamic-item:hover { | |
| box-shadow: 0 2px 8px rgba(0,0,0,0.1); | |
| } | |
| #preview-code { | |
| white-space: pre-wrap; | |
| word-break: break-word; | |
| } | |
| .nav-link.active { | |
| box-shadow: inset 3px 0 0 0 #3b82f6; | |
| } | |
| @media (max-width: 768px) { | |
| .nav-link.active { | |
| box-shadow: inset 0 -3px 0 0 #3b82f6; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen flex flex-col"> | |
| <header class="bg-white shadow-sm py-4"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-2xl font-bold text-blue-600 flex items-center"> | |
| <i class="fas fa-robot mr-2"></i> AI System Message Generator | |
| </h1> | |
| </div> | |
| </header> | |
| <main class="flex-1 container mx-auto px-4 py-6 flex flex-col lg:flex-row gap-6"> | |
| <!-- Sidebar Navigation --> | |
| <aside class="lg:w-64 bg-white rounded-lg shadow-sm p-4 lg:sticky lg:top-6 lg:h-fit"> | |
| <nav class="flex lg:flex-col overflow-x-auto lg:overflow-x-visible pb-2 lg:pb-0"> | |
| <ul class="flex lg:flex-col gap-1 whitespace-nowrap"> | |
| <li> | |
| <a href="#identity" class="nav-link active flex items-center px-4 py-2 text-gray-700 hover:bg-blue-50 rounded-lg transition"> | |
| <i class="fas fa-user-tag mr-3 text-blue-500 w-5"></i> | |
| <span>Identity</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#goal" class="nav-link flex items-center px-4 py-2 text-gray-700 hover:bg-blue-50 rounded-lg transition"> | |
| <i class="fas fa-bullseye mr-3 text-blue-500 w-5"></i> | |
| <span>Goal</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#mandate" class="nav-link flex items-center px-4 py-2 text-gray-700 hover:bg-blue-50 rounded-lg transition"> | |
| <i class="fas fa-gavel mr-3 text-blue-500 w-5"></i> | |
| <span>Mandate</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#constraints" class="nav-link flex items-center px-4 py-2 text-gray-700 hover:bg-blue-50 rounded-lg transition"> | |
| <i class="fas fa-ban mr-3 text-blue-500 w-5"></i> | |
| <span>Constraints</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#components" class="nav-link flex items-center px-4 py-2 text-gray-700 hover:bg-blue-50 rounded-lg transition"> | |
| <i class="fas fa-puzzle-piece mr-3 text-blue-500 w-5"></i> | |
| <span>Components</span> | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#interaction" class="nav-link flex items-center px-4 py-2 text-gray-700 hover:bg-blue-50 rounded-lg transition"> | |
| <i class="fas fa-exchange-alt mr-3 text-blue-500 w-5"></i> | |
| <span>Interaction</span> | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </aside> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col lg:flex-row gap-6"> | |
| <!-- Form Section --> | |
| <section class="flex-1 bg-white rounded-lg shadow-sm p-6"> | |
| <!-- Identity Section --> | |
| <div id="identity" class="section-content"> | |
| <h2 class="text-xl font-bold text-blue-600 mb-4 pb-2 border-b border-gray-200 flex items-center"> | |
| <i class="fas fa-user-tag mr-2"></i> Agent Identity | |
| </h2> | |
| <p class="text-gray-600 mb-6">Define your AI agent's name, persona, and key characteristics.</p> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="agent-name" class="block text-sm font-medium text-gray-700 mb-1">Agent Name</label> | |
| <input type="text" id="agent-name" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., CodeMaster"> | |
| </div> | |
| <div> | |
| <label for="agent-persona" class="block text-sm font-medium text-gray-700 mb-1">Persona Description</label> | |
| <textarea id="agent-persona" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Describe the agent's personality and role"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Key Attributes</label> | |
| <div class="tags-input-container"> | |
| <input type="text" id="agent-attributes" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., helpful, concise, creative (press Enter to add)"> | |
| <div id="agent-attributes-tags" class="flex flex-wrap gap-2 mt-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Goal Section --> | |
| <div id="goal" class="section-content hidden"> | |
| <h2 class="text-xl font-bold text-blue-600 mb-4 pb-2 border-b border-gray-200 flex items-center"> | |
| <i class="fas fa-bullseye mr-2"></i> Agent Goal | |
| </h2> | |
| <p class="text-gray-600 mb-6">Define the primary objectives and success metrics for your agent.</p> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="primary-objective" class="block text-sm font-medium text-gray-700 mb-1">Primary Objective</label> | |
| <textarea id="primary-objective" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="The main purpose of the agent"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Key Performance Indicators</label> | |
| <div class="tags-input-container"> | |
| <input type="text" id="kpis" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., 95% accuracy (press Enter to add)"> | |
| <div id="kpis-tags" class="flex flex-wrap gap-2 mt-2"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mandate Section --> | |
| <div id="mandate" class="section-content hidden"> | |
| <h2 class="text-xl font-bold text-blue-600 mb-4 pb-2 border-b border-gray-200 flex items-center"> | |
| <i class="fas fa-gavel mr-2"></i> Agent Mandate | |
| </h2> | |
| <p class="text-gray-600 mb-6">Define what actions the agent is authorized to perform.</p> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="authorized-actions" class="block text-sm font-medium text-gray-700 mb-1">Authorized Actions</label> | |
| <textarea id="authorized-actions" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="List one action per line"></textarea> | |
| </div> | |
| <div> | |
| <label for="scope-of-authority" class="block text-sm font-medium text-gray-700 mb-1">Scope of Authority</label> | |
| <input type="text" id="scope-of-authority" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., Limited to provided context"> | |
| </div> | |
| <div> | |
| <label for="responsibilities" class="block text-sm font-medium text-gray-700 mb-1">Responsibilities</label> | |
| <textarea id="responsibilities" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="List one responsibility per line"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Constraints Section --> | |
| <div id="constraints" class="section-content hidden"> | |
| <h2 class="text-xl font-bold text-blue-600 mb-4 pb-2 border-b border-gray-200 flex items-center"> | |
| <i class="fas fa-ban mr-2"></i> Agent Constraints | |
| </h2> | |
| <p class="text-gray-600 mb-6">Define limitations and boundaries for the agent.</p> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="operational-boundaries" class="block text-sm font-medium text-gray-700 mb-1">Operational Boundaries</label> | |
| <textarea id="operational-boundaries" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="List one boundary per line"></textarea> | |
| </div> | |
| <div> | |
| <label for="ethical-guidelines" class="block text-sm font-medium text-gray-700 mb-1">Ethical Guidelines</label> | |
| <textarea id="ethical-guidelines" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="List one guideline per line"></textarea> | |
| </div> | |
| <div> | |
| <label for="resource-limitations" class="block text-sm font-medium text-gray-700 mb-1">Resource Limitations</label> | |
| <textarea id="resource-limitations" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="List one limitation per line"></textarea> | |
| </div> | |
| <div> | |
| <label for="forbidden-actions" class="block text-sm font-medium text-gray-700 mb-1">Forbidden Actions</label> | |
| <textarea id="forbidden-actions" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="List one action per line"></textarea> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Components Section --> | |
| <div id="components" class="section-content hidden"> | |
| <h2 class="text-xl font-bold text-blue-600 mb-4 pb-2 border-b border-gray-200 flex items-center"> | |
| <i class="fas fa-puzzle-piece mr-2"></i> Available Components | |
| </h2> | |
| <p class="text-gray-600 mb-6">Define the tools and modules available to your agent.</p> | |
| <div id="components-list" class="space-y-4"></div> | |
| <button onclick="addComponentItem()" class="mt-4 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-plus mr-2"></i> Add Component | |
| </button> | |
| </div> | |
| <!-- Interaction Section --> | |
| <div id="interaction" class="section-content hidden"> | |
| <h2 class="text-xl font-bold text-blue-600 mb-4 pb-2 border-b border-gray-200 flex items-center"> | |
| <i class="fas fa-exchange-alt mr-2"></i> Interaction Protocols | |
| </h2> | |
| <p class="text-gray-600 mb-6">Define how the agent should interact with users.</p> | |
| <div class="space-y-6"> | |
| <div> | |
| <label for="communication-style" class="block text-sm font-medium text-gray-700 mb-1">Communication Style</label> | |
| <textarea id="communication-style" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Describe the preferred communication approach"></textarea> | |
| </div> | |
| <div> | |
| <label for="error-handling" class="block text-sm font-medium text-gray-700 mb-1">Error Handling</label> | |
| <textarea id="error-handling" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Describe error handling procedures"></textarea> | |
| </div> | |
| <div> | |
| <label for="feedback-mechanism" class="block text-sm font-medium text-gray-700 mb-1">Feedback Mechanism</label> | |
| <input type="text" id="feedback-mechanism" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="How users can provide feedback"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Buttons --> | |
| <div class="mt-8 flex flex-col sm:flex-row gap-3 justify-end"> | |
| <button onclick="saveDraft()" class="inline-flex items-center px-4 py-2 border border-gray-300 shadow-sm text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> | |
| <i class="fas fa-save mr-2"></i> Save Draft | |
| </button> | |
| <button onclick="generateSystemMessage()" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500"> | |
| <i class="fas fa-magic mr-2"></i> Generate Message | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Preview Section --> | |
| <section id="preview-section" class="lg:w-96 bg-gray-800 rounded-lg shadow-sm p-6 hidden lg:block lg:sticky lg:top-6 lg:h-fit"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-white flex items-center"> | |
| <i class="fas fa-eye mr-2"></i> Preview | |
| </h2> | |
| <button onclick="copyToClipboard()" class="text-gray-300 hover:text-white"> | |
| <i class="fas fa-copy"></i> | |
| </button> | |
| </div> | |
| <div class="bg-gray-900 p-4 rounded-lg overflow-auto max-h-[calc(100vh-180px)]"> | |
| <pre><code id="preview-code" class="text-gray-300 text-sm"></code></pre> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <script> | |
| // Initialize sections and navigation | |
| document.addEventListener('DOMContentLoaded', function() { | |
| setupNavigation(); | |
| setupTagsInput('agent-attributes'); | |
| setupTagsInput('kpis'); | |
| setupDynamicList('components-list', 'component'); | |
| // Show identity section by default | |
| document.getElementById('identity').classList.remove('hidden'); | |
| }); | |
| // Navigation setup | |
| function setupNavigation() { | |
| const navLinks = document.querySelectorAll('.nav-link'); | |
| navLinks.forEach(link => { | |
| link.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| // Remove active class from all links | |
| navLinks.forEach(nl => nl.classList.remove('active')); | |
| // Add active class to clicked link | |
| this.classList.add('active'); | |
| // Hide all sections | |
| document.querySelectorAll('.section-content').forEach(section => { | |
| section.classList.add('hidden'); | |
| }); | |
| // Show target section | |
| const targetId = this.getAttribute('href'); | |
| document.querySelector(targetId).classList.remove('hidden'); | |
| }); | |
| }); | |
| } | |
| // Tags input setup | |
| function setupTagsInput(inputId) { | |
| const input = document.getElementById(inputId); | |
| const tagsContainer = document.getElementById(`${inputId}-tags`); | |
| if (!input || !tagsContainer) return; | |
| input.addEventListener('keypress', function(e) { | |
| if (e.key === 'Enter' || e.key === ',') { | |
| e.preventDefault(); | |
| const value = this.value.trim(); | |
| if (value) { | |
| addTag(value, tagsContainer); | |
| this.value = ''; | |
| } | |
| } | |
| }); | |
| // Add tag when input loses focus if there's content | |
| input.addEventListener('blur', function() { | |
| const value = this.value.trim(); | |
| if (value) { | |
| addTag(value, tagsContainer); | |
| this.value = ''; | |
| } | |
| }); | |
| } | |
| // Add tag to container | |
| function addTag(value, container) { | |
| const tag = document.createElement('div'); | |
| tag.className = 'tag inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800'; | |
| tag.innerHTML = ` | |
| ${value} | |
| <button onclick="this.parentElement.remove()" class="ml-1.5 text-blue-600 hover:text-blue-900"> | |
| <i class="fas fa-times text-xs"></i> | |
| </button> | |
| `; | |
| container.appendChild(tag); | |
| } | |
| // Dynamic list setup | |
| function setupDynamicList(containerId, itemPrefix) { | |
| window.addComponentItem = function() { | |
| const container = document.getElementById(containerId); | |
| const itemCount = container.children.length + 1; | |
| const item = document.createElement('div'); | |
| item.className = 'dynamic-item bg-gray-50 p-4 rounded-lg border border-gray-200 relative'; | |
| item.innerHTML = ` | |
| <button onclick="this.parentElement.remove()" class="absolute top-2 right-2 text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="mb-3"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Tool Name</label> | |
| <input type="text" class="component-name w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="e.g., Web Search"> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea class="component-description w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" rows="2" placeholder="What this tool does"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Invocation Details</label> | |
| <textarea class="component-invocation w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" rows="2" placeholder="How to use this tool"></textarea> | |
| </div> | |
| `; | |
| container.appendChild(item); | |
| }; | |
| } | |
| // Save draft function | |
| function saveDraft() { | |
| alert('Draft saved! (This is a demo)'); | |
| } | |
| // Generate system message | |
| function generateSystemMessage() { | |
| // Collect data from all sections | |
| const data = { | |
| identity: { | |
| name: document.getElementById('agent-name').value, | |
| persona: document.getElementById('agent-persona').value, | |
| attributes: Array.from(document.querySelectorAll('#agent-attributes-tags .tag')) | |
| .map(tag => tag.textContent.trim().replace('×', '').trim()) | |
| }, | |
| goal: { | |
| primary_objective: document.getElementById('primary-objective').value, | |
| kpis: Array.from(document.querySelectorAll('#kpis-tags .tag')) | |
| .map(tag => tag.textContent.trim().replace('×', '').trim()) | |
| }, | |
| mandate: { | |
| authorized_actions: document.getElementById('authorized-actions').value.split('\n').filter(line => line.trim()), | |
| scope: document.getElementById('scope-of-authority').value, | |
| responsibilities: document.getElementById('responsibilities').value.split('\n').filter(line => line.trim()) | |
| }, | |
| constraints: { | |
| boundaries: document.getElementById('operational-boundaries').value.split('\n').filter(line => line.trim()), | |
| ethical_guidelines: document.getElementById('ethical-guidelines').value.split('\n').filter(line => line.trim()), | |
| resource_limitations: document.getElementById('resource-limitations').value.split('\n').filter(line => line.trim()), | |
| forbidden_actions: document.getElementById('forbidden-actions').value.split('\n').filter(line => line.trim()) | |
| }, | |
| components: Array.from(document.querySelectorAll('#components-list .dynamic-item')).map(item => ({ | |
| name: item.querySelector('.component-name').value, | |
| description: item.querySelector('.component-description').value, | |
| invocation: item.querySelector('.component-invocation').value | |
| })), | |
| interaction: { | |
| communication_style: document.getElementById('communication-style').value, | |
| error_handling: document.getElementById('error-handling').value, | |
| feedback_mechanism: document.getElementById('feedback-mechanism').value | |
| } | |
| }; | |
| // Generate the system message | |
| const template = `SYSTEM MESSAGE FOR AI AGENT | |
| # IDENTITY | |
| Name: ${data.identity.name || 'Unnamed Agent'} | |
| Persona: ${data.identity.persona || 'No persona description'} | |
| Attributes: ${data.identity.attributes.join(', ') || 'None specified'} | |
| # GOAL | |
| Primary Objective: ${data.goal.primary_objective || 'Not specified'} | |
| KPIs: ${data.goal.kpis.join(', ') || 'None specified'} | |
| # MANDATE | |
| Authorized Actions: | |
| ${data.mandate.authorized_actions.map(a => `- ${a}`).join('\n') || 'None specified'} | |
| Scope of Authority: ${data.mandate.scope || 'Not specified'} | |
| Responsibilities: | |
| ${data.mandate.responsibilities.map(r => `- ${r}`).join('\n') || 'None specified'} | |
| # CONSTRAINTS | |
| Operational Boundaries: | |
| ${data.constraints.boundaries.map(b => `- ${b}`).join('\n') || 'None specified'} | |
| Ethical Guidelines: | |
| ${data.constraints.ethical_guidelines.map(g => `- ${g}`).join('\n') || 'None specified'} | |
| Resource Limitations: | |
| ${data.constraints.resource_limitations.map(l => `- ${l}`).join('\n') || 'None specified'} | |
| Forbidden Actions: | |
| ${data.constraints.forbidden_actions.map(f => `- ${f}`).join('\n') || 'None specified'} | |
| # COMPONENTS | |
| ${data.components.map(c => `## ${c.name || 'Unnamed Component'} | |
| Description: ${c.description || 'No description'} | |
| Invocation: ${c.invocation || 'No invocation details'}`).join('\n\n') || 'No components specified'} | |
| # INTERACTION PROTOCOLS | |
| Communication Style: ${data.interaction.communication_style || 'Not specified'} | |
| Error Handling: ${data.interaction.error_handling || 'Not specified'} | |
| Feedback Mechanism: ${data.interaction.feedback_mechanism || 'Not specified'}`; | |
| // Display the preview | |
| document.getElementById('preview-code').textContent = template; | |
| document.getElementById('preview-section').classList.remove('hidden'); | |
| } | |
| // Copy to clipboard | |
| function copyToClipboard() { | |
| const preview = document.getElementById('preview-code'); | |
| navigator.clipboard.writeText(preview.textContent) | |
| .then(() => { | |
| const button = document.querySelector('#preview-section button'); | |
| const originalHtml = button.innerHTML; | |
| button.innerHTML = '<i class="fas fa-check"></i>'; | |
| setTimeout(() => { | |
| button.innerHTML = originalHtml; | |
| }, 2000); | |
| }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=dokii/system-message-generator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |