Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Data Processing Agent | Automated Data Pipeline</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #4a6bff; | |
| --secondary: #6c5ce7; | |
| --success: #00b894; | |
| --danger: #d63031; | |
| --warning: #fdcb6e; | |
| --dark: #2d3436; | |
| --light: #f5f6fa; | |
| --gray: #636e72; | |
| --white: #ffffff; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f8f9fa; | |
| color: var(--dark); | |
| line-height: 1.6; | |
| } | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| header { | |
| background: linear-gradient(135deg, var(--primary), var(--secondary)); | |
| color: white; | |
| padding: 2rem 0; | |
| text-align: center; | |
| border-radius: 10px; | |
| margin-bottom: 30px; | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| header h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| } | |
| header p { | |
| font-size: 1.2rem; | |
| opacity: 0.9; | |
| } | |
| .agent-icon { | |
| font-size: 4rem; | |
| margin-bottom: 1rem; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.1); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pipeline-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 30px; | |
| } | |
| .pipeline-step { | |
| background-color: var(--white); | |
| border-radius: 10px; | |
| padding: 25px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .pipeline-step:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); | |
| } | |
| .pipeline-step-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| margin-bottom: 20px; | |
| } | |
| .step-number { | |
| background-color: var(--primary); | |
| color: white; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-weight: bold; | |
| flex-shrink: 0; | |
| margin-right: 15px; | |
| } | |
| .step-title { | |
| flex-grow: 1; | |
| } | |
| .step-title h2 { | |
| color: var(--primary); | |
| font-size: 1.5rem; | |
| margin-bottom: 5px; | |
| } | |
| .step-title p { | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| .step-actions { | |
| margin-left: auto; | |
| } | |
| .btn { | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-weight: 600; | |
| transition: all 0.3s; | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: #3a5aed; | |
| transform: translateY(-2px); | |
| } | |
| .btn-outline { | |
| background-color: transparent; | |
| border: 1px solid var(--primary); | |
| color: var(--primary); | |
| } | |
| .btn-outline:hover { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .form-group { | |
| margin-bottom: 20px; | |
| } | |
| .form-group label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: 600; | |
| color: var(--dark); | |
| } | |
| .form-control { | |
| width: 100%; | |
| padding: 12px; | |
| border: 1px solid #ddd; | |
| border-radius: 5px; | |
| font-size: 1rem; | |
| transition: border-color 0.3s; | |
| } | |
| .form-control:focus { | |
| outline: none; | |
| border-color: var(--primary); | |
| } | |
| .checkbox-group { | |
| margin-top: 10px; | |
| } | |
| .checkbox-item { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .checkbox-item input { | |
| margin-right: 10px; | |
| } | |
| .progress-container { | |
| margin-top: 30px; | |
| background-color: #f1f1f1; | |
| border-radius: 5px; | |
| height: 10px; | |
| overflow: hidden; | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| width: 0%; | |
| transition: width 1s ease-in-out; | |
| } | |
| .status-message { | |
| margin-top: 10px; | |
| font-size: 0.9rem; | |
| color: var(--gray); | |
| } | |
| .visualization-area { | |
| margin-top: 20px; | |
| padding: 15px; | |
| border: 1px dashed #ddd; | |
| border-radius: 5px; | |
| min-height: 200px; | |
| background-color: #f9f9f9; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| flex-direction: column; | |
| } | |
| .visualization-placeholder { | |
| text-align: center; | |
| color: var(--gray); | |
| } | |
| .visualization-placeholder i { | |
| font-size: 2rem; | |
| margin-bottom: 10px; | |
| } | |
| .file-upload { | |
| border: 2px dashed #ddd; | |
| border-radius: 5px; | |
| padding: 30px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: all 0.3s; | |
| } | |
| .file-upload:hover { | |
| border-color: var(--primary); | |
| background-color: rgba(74, 107, 255, 0.05); | |
| } | |
| .file-upload i { | |
| font-size: 3rem; | |
| color: var(--primary); | |
| margin-bottom: 15px; | |
| } | |
| .file-upload p { | |
| color: var(--gray); | |
| margin-bottom: 15px; | |
| } | |
| .file-info { | |
| margin-top: 15px; | |
| padding: 10px; | |
| background-color: #f1f1f1; | |
| border-radius: 5px; | |
| display: none; | |
| } | |
| .data-preview { | |
| margin-top: 20px; | |
| overflow-x: auto; | |
| } | |
| table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| th, td { | |
| padding: 12px 15px; | |
| text-align: left; | |
| border-bottom: 1px solid #ddd; | |
| } | |
| th { | |
| background-color: #f8f9fa; | |
| font-weight: 600; | |
| } | |
| tr:hover { | |
| background-color: #f5f5f5; | |
| } | |
| .params-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); | |
| gap: 15px; | |
| margin-top: 15px; | |
| } | |
| .alert { | |
| padding: 15px; | |
| border-radius: 5px; | |
| margin-bottom: 20px; | |
| } | |
| .alert-info { | |
| background-color: #e3f2fd; | |
| color: #1976d2; | |
| } | |
| .alert-success { | |
| background-color: #e8f5e9; | |
| color: #388e3c; | |
| } | |
| .alert-warning { | |
| background-color: #fff8e1; | |
| color: #ffa000; | |
| } | |
| footer { | |
| text-align: center; | |
| margin-top: 50px; | |
| padding: 20px 0; | |
| color: var(--gray); | |
| font-size: 0.9rem; | |
| } | |
| @media (max-width: 768px) { | |
| .pipeline-step-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .step-actions { | |
| margin-top: 15px; | |
| width: 100%; | |
| } | |
| .btn { | |
| width: 100%; | |
| margin-bottom: 10px; | |
| } | |
| .params-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="agent-icon"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h1>Data Processing Agent</h1> | |
| <p>Automated end-to-end data pipeline processing with AI assistance</p> | |
| </header> | |
| <div class="pipeline-container"> | |
| <!-- Data Collection Step --> | |
| <div class="pipeline-step" id="data-collection"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">1</div> | |
| <div class="step-title"> | |
| <h2>Data Collection</h2> | |
| <p>Gather data from various sources</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-primary" onclick="runStep('data-collection')"> | |
| <i class="fas fa-play"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Data Sources</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="source-csv" checked> | |
| <label for="source-csv">CSV Files</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="source-database"> | |
| <label for="source-database">Databases (SQL, NoSQL)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="source-api"> | |
| <label for="source-api">APIs (REST, GraphQL)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="source-web"> | |
| <label for="source-web">Web Scraping</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="file-upload" id="file-upload-area" onclick="document.getElementById('file-input').click()"> | |
| <input type="file" id="file-input" style="display: none;" accept=".csv,.json,.xlsx,.parquet" multiple> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <h3>Upload Dataset Files</h3> | |
| <p>Click to browse or drag and drop your files</p> | |
| <button class="btn btn-outline"> | |
| <i class="fas fa-folder-open"></i> Select Files | |
| </button> | |
| <div class="file-info" id="file-info"> | |
| <i class="fas fa-file-alt"></i> <span id="file-name">0 files selected</span> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="collection-progress" style="display: none;"> | |
| <div class="progress-bar" id="collection-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="collection-status"></div> | |
| </div> | |
| <!-- Data Preparation Step --> | |
| <div class="pipeline-step" id="data-preparation"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">2</div> | |
| <div class="step-title"> | |
| <h2>Data Preparation</h2> | |
| <p>Structure the raw data for processing</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-outline" onclick="autoConfigure('preparation')"> | |
| <i class="fas fa-magic"></i> Auto-Configure | |
| </button> | |
| <button class="btn btn-primary" onclick="runStep('data-preparation')"> | |
| <i class="fas fa-play"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <div class="alert alert-info"> | |
| <i class="fas fa-info-circle"></i> The agent will analyze your data structure and suggest appropriate preparation steps. | |
| </div> | |
| <div class="form-group"> | |
| <label>Data Format</label> | |
| <select class="form-control" id="data-format"> | |
| <option value="tabular">Tabular (CSV, Excel, etc.)</option> | |
| <option value="json">JSON (Nested/Flattened)</option> | |
| <option value="time-series">Time Series</option> | |
| <option value="image">Image (Pixel/Matrix data)</option> | |
| <option value="text">Text/NLP</option> | |
| </select> | |
| </div> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <label>Encoding</label> | |
| <select class="form-control" id="encoding-type"> | |
| <option value="auto">Auto-detect</option> | |
| <option value="utf-8">UTF-8</option> | |
| <option value="latin1">ISO-8859-1 (Latin-1)</option> | |
| <option value="windows-1252">Windows-1252</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Header Row</label> | |
| <select class="form-control" id="has-header"> | |
| <option value="auto">Auto-detect</option> | |
| <option value="yes">Yes</option> | |
| <option value="no">No</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Delimiter</label> | |
| <select class="form-control" id="delimiter"> | |
| <option value="auto">Auto-detect</option> | |
| <option value="comma">Comma (CSV)</option> | |
| <option value="semicolon">Semicolon</option> | |
| <option value="tab">Tab (TSV)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="data-preview" id="preparation-preview" style="display: none;"> | |
| <h3>Data Preview</h3> | |
| <div class="visualization-area"> | |
| <div class="visualization-placeholder"> | |
| <i class="fas fa-table"></i> | |
| <p>Run data preparation to see a preview of your structured data</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="preparation-progress" style="display: none;"> | |
| <div class="progress-bar" id="preparation-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="preparation-status"></div> | |
| </div> | |
| <!-- Data Cleaning Step --> | |
| <div class="pipeline-step" id="data-cleaning"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">3</div> | |
| <div class="step-title"> | |
| <h2>Data Cleaning</h2> | |
| <p>Identify and handle missing, incorrect, or inconsistent data</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-outline" onclick="autoConfigure('cleaning')"> | |
| <i class="fas fa-magic"></i> Auto-Configure | |
| </button> | |
| <button class="btn btn-primary" onclick="runStep('data-cleaning')"> | |
| <i class="fas fa-play"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <div class="alert alert-warning" id="cleaning-alert" style="display: none;"> | |
| <i class="fas fa-exclamation-triangle"></i> <span id="cleaning-issues-count">0</span> potential data quality issues detected | |
| </div> | |
| <div class="form-group"> | |
| <label>Handling Missing Values</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="remove-nulls" checked> | |
| <label for="remove-nulls">Remove rows with missing values</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="impute-mean"> | |
| <label for="impute-mean">Impute with mean (numeric)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="impute-mode"> | |
| <label for="impute-mode">Impute with mode (categorical)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="mark-nulls"> | |
| <label for="mark-nulls">Mark missing values as 'Unknown'</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Handling Outliers</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="remove-outliers"> | |
| <label for="remove-outliers">Remove statistical outliers (z-score > 3)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="winsorize"> | |
| <label for="winsorize">Winsorize (cap extreme values)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="log-transform"> | |
| <label for="log-transform">Apply log transformation</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Text Normalization</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="lowercase" checked> | |
| <label for="lowercase">Convert to lowercase</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="remove-whitespace"> | |
| <label for="remove-whitespace">Trim whitespace</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="remove-special-chars"> | |
| <label for="remove-special-chars">Remove special characters</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="visualization-area" id="cleaning-visualization"> | |
| <div class="visualization-placeholder"> | |
| <i class="fas fa-broom"></i> | |
| <p>Run data cleaning to visualize the cleaning process</p> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="cleaning-progress" style="display: none;"> | |
| <div class="progress-bar" id="cleaning-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="cleaning-status"></div> | |
| </div> | |
| <!-- Continue with other steps in the same pattern --> | |
| <!-- Data Transformation - Step 4 --> | |
| <div class="pipeline-step" id="data-transformation"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">4</div> | |
| <div class="step-title"> | |
| <h2>Data Transformation</h2> | |
| <p>Convert data into appropriate formats and scales</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-outline" onclick="autoConfigure('transformation')"> | |
| <i class="fas fa-magic"></i> Auto-Configure | |
| </button> | |
| <button class="btn btn-primary" onclick="runStep('data-transformation')"> | |
| <i class="fas fa-play"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Feature Scaling</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="scaling" id="standard-scaling" checked> | |
| <label for="standard-scaling">Standard Scaling (Z-score)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="scaling" id="minmax-scaling"> | |
| <label for="minmax-scaling">Min-Max Scaling (0-1)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="scaling" id="robust-scaling"> | |
| <label for="robust-scaling">Robust Scaling (median/IQR)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="scaling" id="no-scaling"> | |
| <label for="no-scaling">No Scaling</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Encoding Categorical Variables</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="encoding" id="onehot-encoding" checked> | |
| <label for="onehot-encoding">One-Hot Encoding</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="encoding" id="label-encoding"> | |
| <label for="label-encoding">Label Encoding</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="encoding" id="target-encoding"> | |
| <label for="target-encoding">Target Encoding</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="encoding" id="frequency-encoding"> | |
| <label for="frequency-encoding">Frequency Encoding</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Date/Time Features</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="extract-year"> | |
| <label for="extract-year">Extract year</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="extract-month"> | |
| <label for="extract-month">Extract month</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="extract-day"> | |
| <label for="extract-day">Extract day</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="extract-dow"> | |
| <label for="extract-dow">Extract day of week</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="extract-hour"> | |
| <label for="extract-hour">Extract hour</label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Visualization for pre-post transformation comparison --> | |
| <div class="visualization-area" id="transformation-visualization"> | |
| <div class="visualization-placeholder"> | |
| <i class="fas fa-exchange-alt"></i> | |
| <p>Run data transformation to see before/after comparison</p> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="transformation-progress" style="display: none;"> | |
| <div class="progress-bar" id="transformation-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="transformation-status"></div> | |
| </div> | |
| <!-- Data Integration - Step 5 --> | |
| <div class="pipeline-step" id="data-integration"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">5</div> | |
| <div class="step-title"> | |
| <h2>Data Integration</h2> | |
| <p>Combine data from multiple sources</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-outline" onclick="autoConfigure('integration')"> | |
| <i class="fas fa-magic"></i> Auto-Configure | |
| </button> | |
| <button class="btn btn-primary" onclick="runStep('data-integration')"> | |
| <i class="fas fa-play"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <div class="alert alert-info"> | |
| <i class="fas fa-info-circle"></i> Upload additional datasets to integrate with your main dataset. | |
| </div> | |
| <div class="file-upload" id="secondary-upload-area" onclick="document.getElementById('secondary-input').click()"> | |
| <input type="file" id="secondary-input" style="display: none;" accept=".csv,.json,.xlsx,.parquet" multiple> | |
| <i class="fas fa-plus-circle"></i> | |
| <h3>Upload Additional Datasets</h3> | |
| <p>Click to browse or drag and drop your files</p> | |
| <button class="btn btn-outline"> | |
| <i class="fas fa-folder-plus"></i> Add Files | |
| </button> | |
| <div class="file-info" id="secondary-file-info"> | |
| <i class="fas fa-file-alt"></i> <span id="secondary-file-name">0 additional files</span> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Integration Method</label> | |
| <select class="form-control" id="integration-method"> | |
| <option value="join">Join (on common columns)</option> | |
| <option value="concat">Concatenate (same structure)</option> | |
| <option value="merge">Merge (complex matching)</option> | |
| </select> | |
| </div> | |
| <div id="join-settings" class="form-group" style="display: block;"> | |
| <label>Join Parameters</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <label>Join Type</label> | |
| <select class="form-control" id="join-type"> | |
| <option value="inner">Inner Join</option> | |
| <option value="left">Left Join</option> | |
| <option value="right">Right Join</option> | |
| <option value="outer">Full Outer Join</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Left Join Key</label> | |
| <select class="form-control" id="left-join-key"> | |
| <option value="">Select column...</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Right Join Key</label> | |
| <select class="form-control" id="right-join-key"> | |
| <option value="">Select column...</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Visualization for integrated data --> | |
| <div class="visualization-area" id="integration-visualization"> | |
| <div class="visualization-placeholder"> | |
| <i class="fas fa-object-group"></i> | |
| <p>Run data integration to see the combined dataset</p> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="integration-progress" style="display: none;"> | |
| <div class="progress-bar" id="integration-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="integration-status"></div> | |
| </div> | |
| <!-- Data Reduction - Step 6 --> | |
| <div class="pipeline-step" id="data-reduction"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">6</div> | |
| <div class="step-title"> | |
| <h2>Data Reduction</h2> | |
| <p>Reduce data size while preserving important information</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-outline" onclick="autoConfigure('reduction')"> | |
| <i class="fas fa-magic"></i> Auto-Configure | |
| </button> | |
| <button class="btn btn-primary" onclick="runStep('data-reduction')"> | |
| <i class="fas fa-play"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Dimensionality Reduction</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="dim-reduction" id="pca-reduction" checked> | |
| <label for="pca-reduction">PCA (Principal Component Analysis)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="dim-reduction" id="tsne-reduction"> | |
| <label for="tsne-reduction">t-SNE (t-Distributed Stochastic Neighbor Embedding)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="dim-reduction" id="umap-reduction"> | |
| <label for="umap-reduction">UMAP (Uniform Manifold Approximation)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="dim-reduction" id="no-dim-reduction"> | |
| <label for="no-dim-reduction">No Dimensionality Reduction</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group" id="pca-settings"> | |
| <label>PCA Settings</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <label>Number of Components</label> | |
| <select class="form-control" id="pca-components"> | |
| <option value="auto">Auto (Keep 95% variance)</option> | |
| <option value="2">2 Components</option> | |
| <option value="3">3 Components</option> | |
| <option value="custom">Custom</option> | |
| </select> | |
| </div> | |
| <div class="form-group" id="custom-components-group" style="display: none;"> | |
| <label>Custom Components</label> | |
| <input type="number" class="form-control" id="custom-components" min="1" max="50" placeholder="Enter number"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Feature Selection</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="remove-low-variance"> | |
| <label for="remove-low-variance">Remove low variance features</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="remove-correlated"> | |
| <label for="remove-correlated">Remove highly correlated features (>0.9)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="select-kbest"> | |
| <label for="select-kbest">Select K best features (statistical tests)</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="kbest-settings" class="form-group" style="display: none;"> | |
| <label>Select K Best Features Settings</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <label>Number of Features (K)</label> | |
| <input type="number" class="form-control" id="kbest-number" min="1" placeholder="e.g., 10"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Scoring Function</label> | |
| <select class="form-control" id="kbest-score"> | |
| <option value="f_classif">ANOVA F-value (classification)</option> | |
| <option value="mutual_info_classif">Mutual info (classification)</option> | |
| <option value="f_regression">F-value (regression)</option> | |
| <option value="mutual_info_regression">Mutual info (regression)</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Visualization for reduced data --> | |
| <div class="visualization-area" id="reduction-visualization"> | |
| <div class="visualization-placeholder"> | |
| <i class="fas fa-compress-alt"></i> | |
| <p>Run data reduction to see the feature importance and components</p> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="reduction-progress" style="display: none;"> | |
| <div class="progress-bar" id="reduction-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="reduction-status"></div> | |
| </div> | |
| <!-- Data Exploration (EDA) - Step 7 --> | |
| <div class="pipeline-step" id="data-exploration"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">7</div> | |
| <div class="step-title"> | |
| <h2>Exploratory Data Analysis</h2> | |
| <p>Understand patterns, relationships, and statistics</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-primary" onclick="runStep('data-exploration')"> | |
| <i class="fas fa-chart-line"></i> Analyze | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Analysis Types</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="summary-stats" checked> | |
| <label for="summary-stats">Summary Statistics</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="distributions" checked> | |
| <label for="distributions">Feature Distributions</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="correlations" checked> | |
| <label for="correlations">Correlation Analysis</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="missing-analysis" checked> | |
| <label for="missing-analysis">Missing Values Analysis</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="outlier-analysis"> | |
| <label for="outlier-analysis">Outlier Analysis</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="time-trends"> | |
| <label for="time-trends">Time Trends (if applicable)</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="exploration-results"> | |
| <div class="visualization-area"> | |
| <div class="visualization-placeholder"> | |
| <i class="fas fa-search"></i> | |
| <p>Run EDA to generate interactive visualizations and insights</p> | |
| </div> | |
| </div> | |
| <div class="data-preview" id="eda-summary" style="display: none; margin-top: 20px;"> | |
| <h3>Summary Statistics</h3> | |
| <div class="visualization-area" id="summary-stats-vis"> | |
| <!-- Will be filled with summary stats table --> | |
| </div> | |
| </div> | |
| <div class="data-preview" id="eda-distributions" style="display: none; margin-top: 20px;"> | |
| <h3>Feature Distributions</h3> | |
| <div class="visualization-area" id="distributions-vis"> | |
| <!-- Will be filled with distribution charts --> | |
| </div> | |
| </div> | |
| <div class="data-preview" id="eda-correlations" style="display: none; margin-top: 20px;"> | |
| <h3>Correlation Analysis</h3> | |
| <div class="visualization-area" id="correlations-vis"> | |
| <!-- Will be filled with correlation matrix --> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="exploration-progress" style="display: none;"> | |
| <div class="progress-bar" id="exploration-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="exploration-status"></div> | |
| </div> | |
| <!-- Feature Engineering - Step 8 --> | |
| <div class="pipeline-step" id="feature-engineering"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">8</div> | |
| <div class="step-title"> | |
| <h2>Feature Engineering</h2> | |
| <p>Create new informative features from existing data</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-outline" onclick="autoConfigure('feature-engineering')"> | |
| <i class="fas fa-magic"></i> Auto-Configure | |
| </button> | |
| <button class="btn btn-primary" onclick="runStep('feature-engineering')"> | |
| <i class="fas fa-play"></i> Run | |
| </button> | |
| </div> | |
| </div> | |
| <div class="alert alert-info"> | |
| <i class="fas fa-lightbulb"></i> Feature engineering suggestions are based on your data characteristics from EDA. | |
| </div> | |
| <div class="form-group"> | |
| <label>Automated Feature Creation</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="polynomial-features"> | |
| <label for="polynomial-features">Polynomial Features (degree 2)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="interaction-features"> | |
| <label for="interaction-features">Interaction Features</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="binning-features"> | |
| <label for="binning-features">Binning/Numeric Discretization</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="datetime-features"> | |
| <label for="datetime-features">Date/Time Features</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="custom-features-section" class="form-group"> | |
| <label>Custom Feature Creation</label> | |
| <div class="visualization-area" style="min-height: 150px;"> | |
| <div id="custom-features-container"> | |
| <div class="form-group" id="feature-template" style="display: none;"> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <input type="text" class="form-control" placeholder="Feature name"> | |
| </div> | |
| <div class="form-group"> | |
| <input type="text" class="form-control" placeholder="Formula (e.g. col1 / col2)"> | |
| </div> | |
| <div class="form-group"> | |
| <button class="btn btn-outline" onclick="removeFeature(this)"><i class="fas fa-trash"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="btn btn-outline" onclick="addFeature()"> | |
| <i class="fas fa-plus"></i> Add Custom Feature | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature importance visualization --> | |
| <div class="visualization-area" id="feature-importance-vis"> | |
| <div class="visualization-placeholder"> | |
| <i class="fas fa-star"></i> | |
| <p>Run feature engineering to see feature importance rankings</p> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="feature-progress" style="display: none;"> | |
| <div class="progress-bar" id="feature-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="feature-status"></div> | |
| </div> | |
| <!-- Data Splitting - Step 9 --> | |
| <div class="pipeline-step" id="data-splitting"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">9</div> | |
| <div class="step-title"> | |
| <h2>Data Splitting</h2> | |
| <p>Divide data into training, validation and test sets</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-primary" onclick="runStep('data-splitting')"> | |
| <i class="fas fa-cut"></i> Split | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Splitting Strategy</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="split-strategy" id="default-split" checked> | |
| <label for="default-split">Default (70% train, 15% validation, 15% test)</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="split-strategy" id="custom-split"> | |
| <label for="custom-split">Custom Ratios</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="split-strategy" id="time-split"> | |
| <label for="time-split">Time-Based Split</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="split-strategy" id="group-split"> | |
| <label for="group-split">Group-Based Split</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="custom-split-settings" class="form-group" style="display: none;"> | |
| <label>Custom Split Ratios</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <label>Training Set (%)</label> | |
| <input type="number" class="form-control" id="train-percent" min="1" max="98" value="70"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Validation Set (%)</label> | |
| <input type="number" class="form-control" id="val-percent" min="1" max="98" value="15"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Test Set (%)</label> | |
| <input type="number" class="form-control" id="test-percent" min="1" max="98" value="15"> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="time-split-settings" class="form-group" style="display: none;"> | |
| <label>Time-Based Split Settings</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <label>Date/Time Column</label> | |
| <select class="form-control" id="time-column"> | |
| <option value="">Select column...</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label>Training Period</label> | |
| <input type="text" class="form-control" id="train-period" placeholder="e.g., first 70%"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Validation Period</label> | |
| <input type="text" class="form-control" id="val-period" placeholder="e.g., next 15%"> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="group-split-settings" class="form-group" style="display: none;"> | |
| <label>Group-Based Split Settings</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <label>Group Column</label> | |
| <select class="form-control" id="group-column"> | |
| <option value="">Select column...</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Stratification</label> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="stratified-split" checked> | |
| <label for="stratified-split">Preserve target variable distribution across splits</label> | |
| </div> | |
| </div> | |
| <div id="target-column-group" class="form-group" style="display: block;"> | |
| <label>Target Column (For Stratification)</label> | |
| <select class="form-control" id="target-column"> | |
| <option value="">Select column...</option> | |
| </select> | |
| </div> | |
| <!-- Split visualization --> | |
| <div class="visualization-area" id="split-visualization"> | |
| <div class="visualization-placeholder"> | |
| <i class="fas fa-chart-pie"></i> | |
| <p>Run data splitting to see the distribution of your datasets</p> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="split-progress" style="display: none;"> | |
| <div class="progress-bar" id="split-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="split-status"></div> | |
| </div> | |
| <!-- Data Modeling - Step 10 --> | |
| <div class="pipeline-step" id="data-modeling"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">10</div> | |
| <div class="step-title"> | |
| <h2>Modeling</h2> | |
| <p>Build and evaluate machine learning models</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-outline" onclick="autoConfigure('modeling')"> | |
| <i class="fas fa-magic"></i> Auto-Configure | |
| </button> | |
| <button class="btn btn-primary" onclick="runStep('data-modeling')"> | |
| <i class="fas fa-rocket"></i> Run Models | |
| </button> | |
| </div> | |
| </div> | |
| <div class="alert alert-info"> | |
| <i class="fas fa-info-circle"></i> The agent will automatically select appropriate models based on your problem type. | |
| </div> | |
| <div class="form-group"> | |
| <label>Problem Type</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="problem-type" id="classification" checked> | |
| <label for="classification">Classification</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="problem-type" id="regression"> | |
| <label for="regression">Regression</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="problem-type" id="clustering"> | |
| <label for="clustering">Clustering</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="radio" name="problem-type" id="anomaly"> | |
| <label for="anomaly">Anomaly Detection</label> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="classification-models" class="form-group" style="display: block;"> | |
| <label>Classification Models (Auto-Selected)</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="model-rf" checked> | |
| <label for="model-rf">Random Forest</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="model-xgboost" checked> | |
| <label for="model-xgboost">XGBoost</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="model-logistic" checked> | |
| <label for="model-logistic">Logistic Regression</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="model-svm"> | |
| <label for="model-svm">SVM</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="regression-models" class="form-group" style="display: none;"> | |
| <label>Regression Models (Auto-Selected)</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="model-rf-reg" checked> | |
| <label for="model-rf-reg">Random Forest Regressor</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="model-xgb-reg" checked> | |
| <label for="model-xgb-reg">XGBoost Regressor</label> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="model-linear" checked> | |
| <label for="model-linear">Linear Regression</label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Cross-Validation</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <select class="form-control" id="cv-type"> | |
| <option value="kfold">K-Fold (K=5)</option> | |
| <option value="stratified">Stratified K-Fold</option> | |
| <option value="timeseries">Time Series Split</option> | |
| <option value="none">No Cross-Validation</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <input type="number" class="form-control" id="cv-folds" min="2" max="20" value="5"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Hyperparameter Tuning</label> | |
| <div class="params-grid"> | |
| <div class="form-group"> | |
| <select class="form-control" id="hpt-method"> | |
| <option value="grid">Grid Search</option> | |
| <option value="random">Random Search</option> | |
| <option value="bayesian">Bayesian Optimization</option> | |
| <option value="none">No Tuning</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Model comparison visualization --> | |
| <div class="visualization-area" id="model-comparison-vis"> | |
| <div class="visualization-placeholder"> | |
| <i class="fas fa-trophy"></i> | |
| <p>Run modeling to see model performance comparison</p> | |
| </div> | |
| </div> | |
| <div class="progress-container" id="model-progress" style="display: none;"> | |
| <div class="progress-bar" id="model-progress-bar"></div> | |
| </div> | |
| <div class="status-message" id="model-status"></div> | |
| </div> | |
| <!-- Final step - Export/Deploy --> | |
| <div class="pipeline-step" id="export-deploy"> | |
| <div class="pipeline-step-header"> | |
| <div style="display: flex; align-items: center;"> | |
| <div class="step-number">11</div> | |
| <div class="step-title"> | |
| <h2>Export & Deployment</h2> | |
| <p>Save your processed data and models</p> | |
| </div> | |
| </div> | |
| <div class="step-actions"> | |
| <button class="btn btn-primary" onclick="exportPipeline()"> | |
| <i class="fas fa-download"></i> Export | |
| </button> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Export Options</label> | |
| <div class="checkbox-group"> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" id="export-processed-data" checked> | |
| <label for="export-processed-data">Processed Dataset</label> | |
| </div> | |
| <div class="checkbox-item"> | |
| <input type="checkbox" | |
| </html> |