diff --git a/data_analyzer/templates/data_analyzer/detail.html b/data_analyzer/templates/data_analyzer/detail.html index ab09ddd..eb093da 100644 --- a/data_analyzer/templates/data_analyzer/detail.html +++ b/data_analyzer/templates/data_analyzer/detail.html @@ -13,484 +13,369 @@ - - + + + {% endblock %} {% block content %}
+ + {% if messages %} + {% for message in messages %} +
+ {{ message }} +
+ {% endfor %} + {% endif %} +
-
- {% csrf_token %} - - -
-

📁 Upload Your Data File

+ + {% csrf_token %} -
-
📊
-
- Choose or drag your data file here -
-
- Supports PDF, CSV, Excel files (up to 10MB) -
-
- - - - -
- - -
-

🔍 Analysis Type

- -
- + +
+

📁 Upload Your Data File

-
+ +
{% endblock %} diff --git a/data_analyzer/templates/data_analyzer/detail_old.html b/data_analyzer/templates/data_analyzer/detail_old.html new file mode 100644 index 0000000..10e85f5 --- /dev/null +++ b/data_analyzer/templates/data_analyzer/detail_old.html @@ -0,0 +1,952 @@ +{% extends 'base.html' %} +{% load static %} + +{% block title %}Data Analyzer Agent - NetCop AI Hub{% endblock %} + +{% block extra_css %} + + + + + + + + + + + +{% endblock %} + +{% block content %} + .main-container { + max-width: none; + padding: 0; + margin-top: 0; + } + + /* Page background */ + .data-analyzer-page { + background: var(--gradient-hero); + min-height: calc(100vh - 80px); + padding: clamp(20px, 5vw, 40px); + width: 100vw; + margin-left: calc(-50vw + 50%); + } + + .container { + max-width: 1280px; + margin: 0 auto; + padding: 0 clamp(16px, 4vw, 24px); + } + + /* Main grid layout */ + .main-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(350px, 100%), 1fr)); + gap: clamp(16px, 4vw, 24px); + align-items: start; + } + + /* Card styles with glassmorphism */ + .card { + background: rgba(255, 255, 255, 0.9); + border-radius: clamp(12px, 3vw, 16px); + padding: clamp(16px, 4vw, 24px); + border: 1px solid rgba(255, 255, 255, 0.3); + backdrop-filter: blur(20px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); + margin-bottom: clamp(16px, 4vw, 24px); + } + + .section-title { + font-size: clamp(16px, 4vw, 18px); + font-weight: 600; + color: var(--text-primary); + margin-bottom: clamp(12px, 3vw, 16px); + } + + /* Form inputs */ + .form-input { + width: 100%; + padding: clamp(12px, 3vw, 16px) clamp(16px, 4vw, 20px); + border: 2px solid var(--border-medium); + border-radius: clamp(8px, 2vw, 12px); + font-size: clamp(14px, 3.5vw, 16px); + transition: border-color 0.2s ease; + min-height: 48px; + margin-bottom: clamp(12px, 3vw, 16px); + } + + .form-input:focus { + outline: none; + border-color: var(--success-green); + } + + .help-text { + font-size: clamp(12px, 3vw, 14px); + color: var(--text-secondary); + } + + /* File upload zone */ + .file-upload-zone { + border: 2px dashed var(--border-medium); + border-radius: clamp(12px, 3vw, 16px); + padding: clamp(24px, 6vw, 40px); + text-align: center; + transition: all 0.3s ease; + background: var(--background-light); + cursor: pointer; + margin-bottom: clamp(12px, 3vw, 16px); + } + + .file-upload-zone.dragover { + border-color: var(--success-green); + background: rgba(16, 185, 129, 0.1); + } + + .file-upload-zone:hover { + border-color: var(--success-green); + background: rgba(16, 185, 129, 0.1); + } + + .file-preview { + background: rgba(16, 185, 129, 0.1); + border: 1px solid rgba(16, 185, 129, 0.5); + border-radius: 8px; + padding: 12px; + margin-top: 12px; + display: flex; + align-items: center; + gap: 12px; + } + + /* Radio button grids */ + .radio-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); + gap: clamp(8px, 2vw, 12px); + } + + .radio-option { + display: flex; + align-items: center; + gap: clamp(8px, 2vw, 12px); + padding: clamp(12px, 3vw, 16px); + border: 2px solid var(--border-light); + border-radius: clamp(8px, 2vw, 12px); + cursor: pointer; + background: white; + transition: all 0.2s ease; + min-height: 44px; + } + + .radio-option.selected { + border-color: var(--success-green); + background: rgba(16, 185, 129, 0.1); + } + + .radio-option input[type="radio"] { + margin: 0; + } + + /* Processing status */ + .processing-status { + padding: clamp(16px, 4vw, 20px); + background: rgba(16, 185, 129, 0.1); + border: 1px solid var(--success-green); + border-radius: clamp(8px, 2vw, 12px); + color: var(--success-dark); + font-weight: 600; + text-align: center; + margin-bottom: clamp(16px, 4vw, 24px); + } + + /* Results card */ + .results-card { + background: rgba(255, 255, 255, 0.9); + border-radius: 16px; + padding: 24px; + border: 1px solid rgba(255, 255, 255, 0.3); + backdrop-filter: blur(20px); + box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); + margin-top: 24px; + } + + .results-header { + display: flex; + align-items: center; + gap: 12px; + margin-bottom: 20px; + } + + .results-content { + background: var(--background-page); + border: 1px solid var(--border-light); + border-radius: 12px; + padding: 24px; + margin-bottom: 20px; + white-space: pre-line; + line-height: 1.7; + color: var(--text-primary); + font-size: 15px; + } + + .action-buttons { + display: flex; + gap: 12px; + margin-top: 20px; + flex-wrap: wrap; + } + + /* Button styles */ + .btn { + padding: clamp(12px, 3vw, 16px) clamp(20px, 5vw, 32px); + border: none; + border-radius: clamp(8px, 2vw, 12px); + font-weight: 600; + cursor: pointer; + font-size: clamp(14px, 3.5vw, 16px); + min-height: 48px; + display: flex; + align-items: center; + justify-content: center; + gap: 8px; + transition: transform 0.1s ease; + text-decoration: none; + } + + .btn-primary { + background: var(--gradient-success); + color: white; + flex: 1; + min-width: 120px; + } + + .btn-secondary { + background: var(--background-subtle); + color: var(--text-primary); + border: 2px solid var(--border-medium); + flex: 1; + min-width: 120px; + } + + .btn:hover { + transform: translateY(-1px); + } + + .btn:disabled { + background: var(--border-strong); + color: white; + cursor: not-allowed; + transform: none; + opacity: 0.6; + } + + /* Wallet sidebar */ + .wallet-section { + position: sticky; + top: 20px; + } + + .wallet-balance { + font-size: clamp(24px, 6vw, 28px); + font-weight: 700; + color: var(--text-primary); + margin-bottom: 8px; + } + + .balance-label { + font-size: clamp(14px, 3.5vw, 16px); + color: var(--text-secondary); + margin-bottom: clamp(16px, 4vw, 20px); + } + + .process-btn { + width: 100%; + margin-bottom: 12px; + } + + .usage-info { + padding: 16px; + background: rgba(16, 185, 129, 0.1); + border-radius: 12px; + border: 1px solid rgba(16, 185, 129, 0.2); + } + + .usage-info h4 { + margin: 0 0 8px 0; + font-size: 14px; + font-weight: 600; + color: var(--success-dark); + } + + .usage-info ul { + margin: 0; + font-size: 12px; + color: var(--text-primary); + line-height: 1.4; + list-style: none; + padding-left: 0; + } + + .usage-info li { + margin: 4px 0; + padding-left: 16px; + position: relative; + } + + .usage-info li::before { + content: "•"; + position: absolute; + left: 0; + color: var(--success-green); + } + + /* Responsive */ + @media (max-width: 768px) { + .main-grid { + grid-template-columns: 1fr; + } + + .radio-grid { + grid-template-columns: 1fr; + } + + .action-buttons { + flex-direction: column; + } + } + +{% endblock %} + +{% block content %} +
+
+ +
+
+ {% csrf_token %} + + +
+

📁 Upload Your Data File

+ +
+
📊
+
+ Choose or drag your data file here +
+
+ Supports PDF, CSV, Excel files (up to 10MB) +
+
+ + + + +
+ + +
+

🔍 Analysis Type

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

💳 Your Wallet

+ +
{{ user.wallet_balance|floatformat:2 }} AED
+
Available Balance
+ + +
+ +
+

💡 How it works

+
    +
  • Upload PDF, CSV, or Excel files
    • +
  • Choose your analysis depth
    • +
  • Get AI-powered insights
    • +
  • Download comprehensive reports
    • +
+
+
+
+
+{% endblock %} + +{% block extra_js %} + +{% endblock %} \ No newline at end of file diff --git a/docs/CLAUDE.md b/docs/CLAUDE.md index 74eb48a..29d59d2 100644 --- a/docs/CLAUDE.md +++ b/docs/CLAUDE.md @@ -190,6 +190,8 @@ The system uses Django templates in `agent_base/templates/agent_generator/` to g #### Example Agents (Production Ready) +All agents now feature consistent architecture with standardized themes, unified CSS, and isolated JavaScript utilities for container-like functionality. + **Data Analysis Agent** (Price: 5.00 AED): - **N8N Integration**: PDF analysis webhook processor - **File Upload**: PDF, CSV, Excel files with drag-and-drop interface @@ -198,6 +200,8 @@ The system uses Django templates in `agent_base/templates/agent_generator/` to g - **Form Submission Pattern**: Uses unified form submission (not button click) - **Unified CSS**: Uses agent-base.css with professional theme - **Text Display**: Simple text formatting (no complex markdown parsing) +- **Architecture**: Standard agent-container grid layout (1fr 350px) with proper wallet positioning +- **JavaScript Isolation**: DataAnalyzerUtils with agent-specific functionality **Weather Reporter Agent** (Price: 2.00 AED): - **API Integration**: OpenWeatherMap API with direct calls @@ -205,7 +209,9 @@ The system uses Django templates in `agent_base/templates/agent_generator/` to g - **Formatted Reports**: Both current and detailed weather reports - **Real-time Results**: Dynamic display below form - **Error Handling**: API failures and invalid locations -- **Unified CSS**: Uses agent-base.css with minimal theme +- **Unified CSS**: Uses agent-base.css with professional theme +- **Architecture**: Standard agent-container grid layout with proper structure +- **JavaScript Isolation**: WeatherUtils with agent-specific functionality **Social Ads Generator Agent** (Price: 7.00 AED): - **N8N Integration**: Social media ad generation via webhook @@ -213,6 +219,8 @@ The system uses Django templates in `agent_base/templates/agent_generator/` to g - **Multi-language**: English, Arabic, Spanish, French, German, Chinese - **Real-time Results**: Dynamic content generation and display - **Unified CSS**: Uses agent-base.css with creative theme (glassmorphism) +- **Architecture**: Standard agent-container grid layout with glassmorphism styling +- **JavaScript Isolation**: SocialAdsUtils with agent-specific functionality **Job Posting Generator Agent** (Price: 4.00 AED): - **N8N Integration**: Professional job posting creation @@ -220,6 +228,17 @@ The system uses Django templates in `agent_base/templates/agent_generator/` to g - **Multi-language Support**: Multiple output languages - **Enhanced UX**: Progressive form validation and real-time feedback - **Unified CSS**: Uses agent-base.css with professional theme +- **Architecture**: Standard agent-container grid layout with professional styling +- **JavaScript Isolation**: JobPostingUtils with agent-specific functionality + +**Five Whys Analysis Agent** (Price: 3.00 AED): +- **N8N Integration**: Problem analysis using Five Whys methodology +- **Comprehensive UX**: Enhanced UI with styled cards and professional layout +- **Multi-language Support**: Multiple output languages +- **Real-time Results**: Dynamic analysis generation and display +- **Unified CSS**: Uses agent-base.css with professional theme +- **Architecture**: Standard agent-container grid layout with consistent styling +- **JavaScript Isolation**: FiveWhysUtils with agent-specific functionality ### Management Commands @@ -537,7 +556,32 @@ All agents now use a unified CSS system for consistent user experience and maint #### Core Files - **`/static/css/agent-base.css`**: Unified component library for all agents - **`/static/css/themes.css`**: Global color variables and themes -- **`/static/js/agent-utils.js`**: Shared JavaScript utilities for all agents +- **Agent-specific JavaScript utilities**: Each agent has isolated JavaScript functions for container-like functionality + +### Agent Isolation Architecture + +#### Container-like Functionality +All agents now implement true isolation to prevent cross-agent interference: + +**JavaScript Isolation Pattern:** +```javascript +// Each agent has its own utility namespace +const DataAnalyzerUtils = { /* agent-specific functions */ }; +const WeatherUtils = { /* agent-specific functions */ }; +const SocialAdsUtils = { /* agent-specific functions */ }; +const JobPostingUtils = { /* agent-specific functions */ }; +const FiveWhysUtils = { /* agent-specific functions */ }; + +// For backward compatibility, each agent creates AgentUtils alias +const AgentUtils = DataAnalyzerUtils; // or appropriate agent utils +``` + +**Benefits of Isolation:** +- No shared dependencies between agents +- Changes to one agent don't affect others +- Agent-specific functionality can be customized +- Easier debugging and maintenance +- Container-like isolation without containerization complexity #### Theme System The unified CSS supports multiple themes via CSS custom properties: @@ -562,19 +606,59 @@ The unified CSS supports multiple themes via CSS custom properties:
- +

Agent Title

+
- + +
+

💳 Your Wallet

+ +
``` +#### Standardized Layout Architecture + +**Grid Layout System:** +- `agent-container`: CSS Grid with `grid-template-columns: 1fr 350px` +- **First column**: Main content, forms, processing status, results +- **Second column**: Wallet sidebar (350px width) +- **Mobile responsive**: Single column on screens < 768px + +**Critical Structure Rules:** +1. **Wallet positioning**: `wallet-section` must be a direct child of `agent-container` (separate grid column) +2. **Content hierarchy**: All agent content stays in first grid column +3. **Processing status**: Displays below form, spans full width of first column +4. **Results display**: Shows below processing status in first column + +**Data Analyzer Wallet Fix Example:** +```html + +
+
+
...
+
...
+
+
+ + +
+
+
...
+ + +
+
...
+
+``` + ### Text Display Standardization #### Simple Text Formatting Approach @@ -675,6 +759,27 @@ The project uses a clean, modular individual agent architecture: - **Data Attributes**: Add `data-wallet-balance` to all balance elements for easy targeting - **Continuous Workflow**: Allow multiple requests without page refresh ("Get Another" functionality) - **Clear User Feedback**: Show "payment processed" vs "no charge applied" messages +- **Standardized Layout**: Use agent-container grid layout (1fr 350px) with proper wallet positioning +- **Theme Consistency**: Apply unified CSS themes across all agents +- **JavaScript Isolation**: Agent-specific utilities for container-like functionality + +#### Recent Standardization Improvements (2024) + +**Agent Architecture Consistency:** +All 5 production agents now follow standardized patterns: +1. **Data Analyzer**: Reduced custom CSS from 400+ lines to ~78 lines, standardized HTML structure +2. **Job Posting Generator**: Enhanced with professional theme and proper grid layout +3. **Five Whys Analyzer**: Applied black and white theme with consistent styling +4. **Social Ads Generator**: Maintained creative theme while standardizing structure +5. **Weather Reporter**: Professional theme with clean weather data presentation + +**Key Improvements Made:** +- **HTML Structure**: All agents use standard `agent-container` grid layout +- **CSS Consolidation**: Removed duplicate styles, standardized on `agent-base.css` +- **Wallet Positioning**: Fixed wallet appearing at bottom vs. right side across all agents +- **JavaScript Isolation**: Each agent has isolated utilities (DataAnalyzerUtils, WeatherUtils, etc.) +- **Theme Application**: Consistent theme implementation across all agents +- **Code Reduction**: Eliminated 400+ lines of redundant CSS code #### Frontend JavaScript Requirements ```javascript diff --git a/five_whys_analyzer/templates/five_whys_analyzer/detail.html b/five_whys_analyzer/templates/five_whys_analyzer/detail.html index e298cd1..314e772 100644 --- a/five_whys_analyzer/templates/five_whys_analyzer/detail.html +++ b/five_whys_analyzer/templates/five_whys_analyzer/detail.html @@ -1,146 +1,240 @@ {% extends "base.html" %} -{% csrf_token %} +{% load static %} {% block title %}5 Whys Analysis Agent - NetCop AI Hub{% endblock %} +{% block extra_css %} + + + + + + + + + + + +{% endblock %} + {% block content %} -
- -
- +
+
+
- -
-

- 🔍 {{ agent.name }} -

-

- {{ agent.description }} -

+
+

🔍 {{ agent.name }}

+

{{ agent.description }}

-
-

💬 Chat with 5 Whys Analyst

- - -
-
5 Whys Analyst
-
- Hello! I'm here to help you with root cause analysis using the 5 Whys methodology. - - You can ask me questions, describe your problem, and I'll guide you through the analysis process. When you're ready, I can generate a comprehensive report for 8.00 AED. - - How can I help you today? +
+
+

💬 Chat with 5 Whys Analyst

+ + +
+
5 Whys Analyst
+
+ Hello! I'm here to help you with root cause analysis using the 5 Whys methodology. + + You can ask me questions, describe your problem, and I'll guide you through the analysis process. When you're ready, I can generate a comprehensive report for {{ agent.price }} AED. + + How can I help you today? +
+ + +
- -
+ +
+ {% csrf_token %} +
+ + +
+
- -
-
- - -
-
- - -
-

📋 Generate Final Report

+ +
+

📋 Generate Final Report

-
+
💬 Ask 2-3 questions about your problem first, then I'll generate a comprehensive report
- -