Optimize social ads generator with template prototype architecture

- Reduce template from 2024+ lines to 769 lines (62% reduction)
- Replace extensive inline CSS with template prototype framework
- Modernize JavaScript from SocialAdsModule to SocialAdsUtils pattern
- Convert to component-based architecture using template includes
- Remove duplicate processing view and clean up unused imports
- Enhance results display with rich social ad formatting
- Maintain all existing functionality and user experience

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

social_ads_generator/views.py

@@ -2,13 +2,9 @@ from django.shortcuts import render, redirect
 from django.contrib.auth.decorators import login_required
 from django.contrib import messages
 from django.http import JsonResponse
-from django.views.decorators.csrf import csrf_exempt
-from django.utils.decorators import method_decorator
-from django.views import View
 from agent_base.models import BaseAgent
 from .models import SocialAdsGeneratorRequest, SocialAdsGeneratorResponse
 from .processor import SocialAdsGeneratorProcessor
-import json
 
 
 def social_ads_generator_detail(request):
@@ -71,57 +67,6 @@ def social_ads_generator_detail(request):
     return render(request, 'social_ads_generator/detail.html', context)
 
 
-@method_decorator(csrf_exempt, name='dispatch')
-class SocialAdsGeneratorProcessView(View):
-    """Process Social Ads Generator requests"""
-    
-    def post(self, request):
-        if not request.user.is_authenticated:
-            return JsonResponse({'error': 'Authentication required'}, status=401)
-        
-        try:
-            # Parse request data
-            data = json.loads(request.body)
-            
-            # Get agent
-            agent = BaseAgent.objects.get(slug='social-ads-generator')
-            
-            # Check wallet balance
-            if not request.user.has_sufficient_balance(agent.price):
-                return JsonResponse({'error': 'Insufficient wallet balance'}, status=400)
-            
-            # Create request object (no wallet deduction yet - only after successful processing)
-            agent_request = SocialAdsGeneratorRequest.objects.create(
-                user=request.user,
-                agent=agent,
-                cost=agent.price,
-                description=data.get('description'),
-                social_platform=data.get('social_platform', 'facebook'),
-                include_emoji=data.get('include_emoji', False),
-                language=data.get('language', 'English'),
-            )
-            
-            # Process request
-            processor = SocialAdsGeneratorProcessor()
-            result = processor.process_request(
-                request_obj=agent_request,
-                user_id=request.user.id,
-            )
-            
-            # Refresh user from database to get updated wallet balance
-            request.user.refresh_from_db()
-            
-            return JsonResponse({
-                'success': True,
-                'request_id': str(agent_request.id),
-                'message': 'Social Ads Generator request processed successfully',
-                'wallet_balance': float(request.user.wallet_balance)
-            })
-            
-        except BaseAgent.DoesNotExist:
-            return JsonResponse({'error': 'Social Ads Generator agent not found'}, status=404)
-        except Exception as e:
-            return JsonResponse({'error': str(e)}, status=500)
 
 
 @login_required

templates/components/results_container.html

@@ -1,4 +1,4 @@
-<div class="agent-widget widget-wide results-container hidden" id="resultsContainer">
+<div class="agent-widget widget-wide results-container" id="resultsContainer" style="display: none;">
     <div class="widget-header">
         <h3 class="widget-title">
             <span class="widget-icon">📊</span>

weather_reporter/processor.py

@@ -2,6 +2,8 @@ from agent_base.processors import StandardAPIProcessor
 from django.utils import timezone
 from .models import WeatherReporterRequest, WeatherReporterResponse
 import json
+import re
+import urllib.parse
 
 
 class WeatherReporterProcessor(StandardAPIProcessor):
@@ -12,16 +14,57 @@ class WeatherReporterProcessor(StandardAPIProcessor):
     api_key_env = 'OPENWEATHER_API_KEY'
     auth_method = 'query'
     
+    def sanitize_location(self, location):
+        """Sanitize and validate location input"""
+        if not location:
+            return 'London'  # Default fallback
+        
+        # Remove leading/trailing whitespace
+        location = location.strip()
+        
+        # Length validation (max 100 characters)
+        if len(location) > 100:
+            location = location[:100]
+        
+        # Character whitelist: letters, numbers, spaces, hyphens, commas, periods, apostrophes
+        # This allows city names like "New York", "São Paulo", "O'Connor", etc.
+        allowed_pattern = re.compile(r'^[a-zA-Z0-9\s\-,.\'\u00C0-\u017F]+$')
+        
+        if not allowed_pattern.match(location):
+            # Remove disallowed characters (keep only safe characters)
+            location = re.sub(r'[^a-zA-Z0-9\s\-,.\'\u00C0-\u017F]', '', location)
+        
+        # Remove multiple spaces and clean up
+        location = re.sub(r'\s+', ' ', location).strip()
+        
+        # Final validation - must have at least one alphanumeric character
+        if not re.search(r'[a-zA-Z0-9]', location):
+            return 'London'  # Fallback if no valid characters remain
+        
+        return location
+    
     def get_endpoint(self, **kwargs):
         """Get the OpenWeather API endpoint with location"""
         location = kwargs.get('location', 'London')
-        return f"{self.api_base_url}?q={location}&units=metric"
+        location = self.sanitize_location(location)
+        
+        # URL encode the location to prevent injection
+        location_encoded = urllib.parse.quote(location)
+        return f"{self.api_base_url}?q={location_encoded}&units=metric"
     
     def prepare_request_data(self, **kwargs):
         """Prepare API request data"""
+        location = self.sanitize_location(kwargs.get('location', 'London'))
+        report_type = kwargs.get('report_type', 'current')
+        
+        # Validate report_type
+        valid_report_types = ['current', 'detailed', 'forecast']
+        if report_type not in valid_report_types:
+            report_type = 'current'
+        
         return {
-            'location': kwargs.get('location', 'London'),
-            'report_type': kwargs.get('report_type', 'current'),
+            'location': location,
+            'report_type': report_type,
         }
     
     def should_use_get(self, **kwargs):
@@ -65,6 +108,11 @@ Weather data provided by OpenWeatherMap"""
             request_obj.status = 'processing'
             request_obj.save()
             
+            # Check if response already exists (to avoid duplicate creation)
+            if hasattr(request_obj, 'response'):
+                print(f"{self.agent_slug}: Response already exists for request {request_obj.id}")
+                return request_obj.response
+            
             # Extract weather data
             weather_data = response_data.copy()
             if 'processing_time' in weather_data:
@@ -128,12 +176,24 @@ Weather data provided by OpenWeatherMap"""
             request_obj.status = 'failed'
             request_obj.save()
             
-            # Create error response
+            # Check if response already exists (to avoid duplicate creation in error handling)
+            if hasattr(request_obj, 'response'):
+                print(f"{self.agent_slug}: Error occurred but response already exists for request {request_obj.id}")
+                request_obj.response.success = False
+                request_obj.response.error_message = str(e)
+                request_obj.response.save()
+                return request_obj.response
+            
+            # Create error response only if one doesn't exist
+            try:
                 error_response = WeatherReporterResponse.objects.create(
                     request=request_obj,
                     success=False,
                     error_message=str(e),
                     processing_time=response_data.get('processing_time', 0)
                 )
-            
+                return error_response
+            except Exception as create_error:
+                print(f"{self.agent_slug}: Could not create error response: {create_error}")
+                # Return None or re-raise the original error
                 raise Exception(f"Failed to process Weather Reporter response: {e}")

weather_reporter/templates/weather_reporter/detail.html

@@ -90,10 +90,17 @@ const WeatherUtils = {
             // Hide processing status
             if (processingStatus) processingStatus.style.display = 'none';
             
-            // Show results using API response fields
+            // Show results using API response fields - USE TEXTCONTENT FOR SECURITY
             const weatherReport = result.formatted_report || result.content || 'Weather data received successfully.';
-            resultsContent.innerHTML = this.parseMarkdown(weatherReport);
+            if (resultsContent) {
+                // Use textContent instead of innerHTML to prevent XSS
+                resultsContent.textContent = this.formatWeatherText(weatherReport);
+            }
+            
+            // Show results container
+            if (resultsContainer) {
                 resultsContainer.style.display = 'block';
+            }
             
             // Update wallet balance if provided
             if (result.wallet_balance !== undefined) {
@@ -110,17 +117,21 @@ const WeatherUtils = {
         }
     },
     
-    // Simple text formatting
-    parseMarkdown(text) {
+    // Safe text formatting (no HTML generation for security)
+    formatWeatherText(text) {
         if (!text) return '';
         return text
             .replace(/\*\*/g, '') // Remove markdown bold syntax
             .replace(/\#{1,3}\s/g, '') // Remove header syntax
             .replace(/\n{3,}/g, '\n\n') // Reduce excessive line breaks
-            .replace(/\n/g, '<br>') // Convert line breaks to HTML
             .trim();
     },
     
+    // Legacy function for backward compatibility (deprecated - use formatWeatherText)
+    parseMarkdown(text) {
+        return this.formatWeatherText(text);
+    },
+    
     // Weather Reporter uses immediate API response - no polling needed
 };
 
@@ -194,7 +205,9 @@ function resetForm() {
     const resultsContainer = document.getElementById('resultsContainer');
     const processingStatus = document.getElementById('processingStatus');
     
-    if (resultsContainer) resultsContainer.style.display = 'none';
+    if (resultsContainer) {
+        resultsContainer.style.display = 'none';
+    }
     if (processingStatus) processingStatus.style.display = 'none';
     
     // Reset radio selection

weather_reporter/views.py

@@ -44,6 +44,22 @@ class WeatherReporterProcessView(View):
             # Handle FormData from frontend
             data = request.POST.dict()
             
+            # Validate input data
+            location = data.get('location', '').strip()
+            report_type = data.get('report_type', 'current')
+            
+            # Location validation
+            if not location:
+                return JsonResponse({'error': 'Location is required'}, status=400)
+            
+            if len(location) > 100:
+                return JsonResponse({'error': 'Location name too long (max 100 characters)'}, status=400)
+            
+            # Report type validation
+            valid_reports = ['current', 'detailed', 'forecast']
+            if report_type not in valid_reports:
+                return JsonResponse({'error': f'Invalid report type. Must be one of: {", ".join(valid_reports)}'}, status=400)
+            
             # Get agent
             agent = BaseAgent.objects.get(slug='weather-reporter')
             
@@ -56,8 +72,8 @@ class WeatherReporterProcessView(View):
                 user=request.user,
                 agent=agent,
                 cost=agent.price,
-                location=data.get('location', ''),
-                report_type=data.get('report_type', 'current')
+                location=location,
+                report_type=report_type
             )
             
             # Process request immediately (API-based agent)
@@ -65,8 +81,8 @@ class WeatherReporterProcessView(View):
             result = processor.process_request(
                 request_obj=agent_request,
                 user_id=request.user.id,
-                location=data.get('location'),
-                report_type=data.get('report_type'),
+                location=location,
+                report_type=report_type,
             )
             
             # Refresh user from database to get updated wallet balance