{% extends 'base.html' %}
{% load static %}
{#
AGENT TEMPLATE STARTER - Enhanced Version with Modern UX Patterns
Copy this file and customize for new agents
REQUIRED CUSTOMIZATIONS:
1. File names: "agent-template-starter" -> "your-agent-slug"
2. Agent info: "Agent Template Starter" -> Your agent name
3. Form fields: Replace example fields with your agent's specific inputs
4. JavaScript: Update agent-template-starter.js with your agent logic
5. Agent config: Add your agent to workflows/config/agents.py
TEMPLATE FEATURES INCLUDED:
✅ Enhanced file upload with preview, progress, and validation
✅ Real-time form validation with detailed error messages
✅ Drag-and-drop file support with visual feedback
✅ Class-based JavaScript architecture following data-analyzer pattern
✅ Comprehensive CSS framework with all modern patterns
✅ Mobile-responsive design with proper accessibility
✅ Integration with workflows-core.js and existing components
KEEP THE FOLLOWING UNCHANGED:
- All {% include %} statements for shared components
- Template structure (agent-container, agent-grid, etc.)
- Processing and results components
- Authentication and wallet balance checks
- CSS variable system and design tokens
OPTIONAL CUSTOMIZATIONS:
- How it works steps (change steps parameter)
- Custom CSS in the designated section
- Additional form sections or validation rules
- Custom result formatting in JavaScript
#}
{% block title %}Agent Template Starter - Quantum Tasks AI{% endblock %}
{% block extra_css %}
{% endblock %}
{% block content %}
{% include "workflows/components/agent_header.html" with agent_title=agent_config.name agent_subtitle=agent_config.description %}
{% include "workflows/components/quick_agents_panel.html" %}
{{ agent_config.icon }}
{# CUSTOMIZE: Change "Details" to something specific like "Configuration", "Input", etc. #}
{{ agent_config.name }} Details
{# CUSTOMIZE: Change "generic" to your agent-specific steps or keep as is #}
{% include "workflows/components/how_it_works_widget.html" with steps="generic" %}
{# CUSTOMIZE: Change status messages to match your agent's processing #}
{% include "workflows/components/processing_status.html" with status_title="Processing your request..." status_text="Please wait while we generate your content." %}
{# CUSTOMIZE: Change results_title to match your agent's output #}
{% include "workflows/components/results_container.html" with results_title="Generated Results" %}
{% endblock %}
{% block extra_js %}
{# CUSTOMIZE: Replace 'agent-template-starter' with your agent slug #}
{% endblock %}
{#
===============================================================================
SETUP INSTRUCTIONS FOR NEW AGENTS
===============================================================================
1. COPY FILES:
- Copy this template: agent-template-starter.html -> your-agent-name.html
- Copy JavaScript: agent-template-starter.js -> your-agent-name.js
- Place in: workflows/templates/workflows/ and static/js/ respectively
2. UPDATE AGENT CONFIG:
- Add your agent to workflows/config/agents.py
- Set name, description, price, icon, and webhook_url
- Example:
'your-agent-slug': {
'name': 'Your Agent Name',
'description': 'Description of what your agent does',
'price': 10.0,
'icon': '🤖',
'webhook_url': 'your-n8n-webhook-url',
}
3. CUSTOMIZE TEMPLATE:
- Update page title and meta information
- Replace example form fields with your agent's inputs
- Modify section titles and descriptions
- Update How It Works steps if needed
- Remove file upload section if not needed
4. CUSTOMIZE JAVASCRIPT:
- Change class name: AgentTemplateProcessor -> YourAgentProcessor
- Update agent slug and webhook URL
- Modify form validation rules for your fields
- Customize result formatting for your agent's output
- Update file validation if using file upload
5. ADD URL ROUTE:
- Add URL pattern in workflows/urls.py
- Point to your agent's view function
- Example: path('your-agent-slug/', views.your_agent_view, name='your_agent')
6. CREATE VIEW:
- Add view function in workflows/views.py
- Handle form processing and N8N integration
- Return appropriate JSON responses
- Follow existing agent patterns
7. TESTING:
- Test form validation and submission
- Verify file upload functionality (if used)
- Check responsive design on mobile
- Test authentication and wallet balance flows
- Verify N8N webhook integration
8. PRODUCTION:
- Update N8N webhook URLs to production
- Test with real user accounts
- Monitor error logs and performance
- Update documentation if needed
===============================================================================
AVAILABLE WORKFLOWSCORE FUNCTIONS (from workflows-core.js)
===============================================================================
Authentication & Balance:
- WorkflowsCore.checkAuthentication()
- WorkflowsCore.checkBalance(price)
- WorkflowsCore.updateWalletBalance(balance)
UI Feedback:
- WorkflowsCore.showToast(message, type)
- WorkflowsCore.showProcessing(title)
- WorkflowsCore.hideProcessing()
- WorkflowsCore.showResults(content, title)
Form Validation:
- WorkflowsCore.showFieldError(fieldName, message)
- WorkflowsCore.clearFieldError(fieldName)
- WorkflowsCore.clearAllFieldErrors()
Utilities:
- WorkflowsCore.copyToClipboard(text, message)
- WorkflowsCore.downloadAsFile(content, filename, message)
- WorkflowsCore.generateSessionId()
- WorkflowsCore.formatFileSize(bytes)
Processing:
- WorkflowsCore.startPolling(requestId)
- WorkflowsCore.stopPolling()
- WorkflowsCore.pollForResults(requestId, callback)
===============================================================================
#}