| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Sistema de Testes Massivos - AgentGraph</title> |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> |
| <style> |
| |
| :root { |
| --primary-color: #2563eb; |
| --primary-dark: #1d4ed8; |
| --secondary-color: #64748b; |
| --success-color: #059669; |
| --warning-color: #d97706; |
| --danger-color: #dc2626; |
| --info-color: #0891b2; |
| |
| --bg-primary: #f8fafc; |
| --bg-secondary: #f1f5f9; |
| --bg-dark: #0f172a; |
| --bg-card: #ffffff; |
| |
| --text-primary: #1e293b; |
| --text-secondary: #64748b; |
| --text-muted: #94a3b8; |
| |
| --border-color: #e2e8f0; |
| --border-radius: 12px; |
| --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); |
| --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1); |
| --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1); |
| } |
| |
| |
| body { |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; |
| background: var(--bg-primary); |
| color: var(--text-primary); |
| } |
| |
| .container-fluid { |
| padding: 0; |
| } |
| |
| |
| .sidebar { |
| background: linear-gradient(135deg, var(--bg-dark), #1e293b); |
| min-height: 100vh; |
| border-right: 1px solid var(--border-color); |
| box-shadow: var(--shadow-lg); |
| padding: 2rem 1.5rem; |
| } |
| |
| .sidebar h4 { |
| color: white; |
| font-weight: 800; |
| margin-bottom: 2rem; |
| font-size: 1.5rem; |
| } |
| |
| .sidebar h6 { |
| color: #cbd5e1; |
| font-weight: 600; |
| margin-bottom: 1rem; |
| margin-top: 2rem; |
| font-size: 0.875rem; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
| |
| .sidebar .form-control, |
| .sidebar .form-select { |
| background: rgba(255, 255, 255, 0.1); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| color: white; |
| border-radius: 8px; |
| } |
| |
| .sidebar .form-control::placeholder { |
| color: rgba(255, 255, 255, 0.6); |
| } |
| |
| .sidebar .form-control:focus, |
| .sidebar .form-select:focus { |
| background: rgba(255, 255, 255, 0.15); |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2); |
| color: white; |
| } |
| |
| |
| .main-content { |
| background: var(--bg-primary); |
| min-height: 100vh; |
| padding: 2rem; |
| } |
| |
| |
| .dashboard-header { |
| background: var(--bg-card); |
| border-radius: var(--border-radius); |
| padding: 2rem; |
| margin-bottom: 2rem; |
| border: 1px solid var(--border-color); |
| box-shadow: var(--shadow-sm); |
| } |
| |
| .dashboard-header h2 { |
| color: var(--text-primary); |
| font-weight: 800; |
| margin: 0; |
| font-size: 2rem; |
| } |
| |
| |
| .metric-card { |
| background: linear-gradient(135deg, var(--primary-color), var(--info-color)); |
| color: white; |
| border-radius: var(--border-radius); |
| padding: 2rem; |
| margin: 1rem 0; |
| box-shadow: var(--shadow-md); |
| transition: all 0.3s ease; |
| border: none; |
| } |
| |
| .metric-card:hover { |
| transform: translateY(-2px); |
| box-shadow: var(--shadow-lg); |
| } |
| |
| .metric-value { |
| font-size: 3rem; |
| font-weight: 800; |
| line-height: 1; |
| margin-bottom: 0.5rem; |
| } |
| |
| .metric-label { |
| font-size: 0.875rem; |
| font-weight: 600; |
| opacity: 0.9; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
| |
| .test-group-card { |
| background: var(--bg-card); |
| border: 1px solid var(--border-color); |
| border-radius: var(--border-radius); |
| padding: 2rem; |
| margin: 1.5rem 0; |
| box-shadow: var(--shadow-sm); |
| transition: all 0.3s ease; |
| } |
| |
| .test-group-card:hover { |
| box-shadow: var(--shadow-md); |
| border-color: var(--primary-color); |
| transform: translateY(-1px); |
| } |
| |
| |
| .status-badge { |
| padding: 0.75rem 1.5rem; |
| border-radius: 50px; |
| font-weight: 700; |
| font-size: 0.875rem; |
| display: inline-flex; |
| align-items: center; |
| gap: 0.5rem; |
| box-shadow: var(--shadow-sm); |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
| |
| .status-idle { |
| background: var(--secondary-color); |
| color: white; |
| } |
| .status-running { |
| background: var(--success-color); |
| color: white; |
| animation: pulse 2s infinite; |
| } |
| .status-completed { |
| background: var(--primary-color); |
| color: white; |
| } |
| .status-error { |
| background: var(--danger-color); |
| color: white; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.8; } |
| } |
| |
| |
| .progress-container { |
| display: none; |
| margin: 2rem 0; |
| background: var(--bg-card); |
| border-radius: var(--border-radius); |
| padding: 2rem; |
| border: 1px solid var(--border-color); |
| box-shadow: var(--shadow-md); |
| } |
| |
| .results-container { |
| display: none; |
| margin: 2rem 0; |
| } |
| |
| |
| .btn { |
| border-radius: 10px; |
| font-weight: 600; |
| padding: 0.875rem 2rem; |
| border: none; |
| transition: all 0.3s ease; |
| box-shadow: var(--shadow-sm); |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| font-size: 0.875rem; |
| } |
| |
| .btn:hover { |
| transform: translateY(-2px); |
| box-shadow: var(--shadow-md); |
| } |
| |
| .btn-primary { |
| background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)); |
| border: none; |
| } |
| |
| .btn-success { |
| background: linear-gradient(135deg, var(--success-color), #047857); |
| } |
| |
| .btn-warning { |
| background: linear-gradient(135deg, var(--warning-color), #b45309); |
| } |
| |
| .btn-danger { |
| background: linear-gradient(135deg, var(--danger-color), #b91c1c); |
| } |
| |
| |
| .progress { |
| height: 16px; |
| border-radius: 8px; |
| background: var(--bg-secondary); |
| overflow: hidden; |
| box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); |
| } |
| |
| .progress-bar { |
| background: linear-gradient(90deg, var(--primary-color), var(--info-color)); |
| border-radius: 8px; |
| transition: width 0.6s ease; |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .progress-bar::after { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background: linear-gradient(45deg, transparent 35%, rgba(255,255,255,0.2) 50%, transparent 65%); |
| animation: shimmer 2s infinite; |
| } |
| |
| @keyframes shimmer { |
| 0% { transform: translateX(-100%); } |
| 100% { transform: translateX(100%); } |
| } |
| |
| |
| .alert { |
| border-radius: var(--border-radius); |
| border: none; |
| box-shadow: var(--shadow-sm); |
| padding: 1.5rem; |
| } |
| |
| |
| .form-control, .form-select { |
| border-radius: 10px; |
| border: 2px solid var(--border-color); |
| padding: 0.875rem 1rem; |
| transition: all 0.3s ease; |
| font-weight: 500; |
| } |
| |
| .form-control:focus, .form-select:focus { |
| border-color: var(--primary-color); |
| box-shadow: 0 0 0 4px rgb(37 99 235 / 0.1); |
| transform: translateY(-1px); |
| } |
| |
| |
| .badge { |
| font-weight: 700; |
| padding: 0.5rem 1rem; |
| border-radius: 8px; |
| font-size: 0.75rem; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| } |
| |
| |
| .fas, .far { |
| margin-right: 0.5rem; |
| } |
| |
| |
| @media (max-width: 768px) { |
| .main-content { |
| padding: 1rem; |
| } |
| |
| .metric-value { |
| font-size: 2rem; |
| } |
| |
| .sidebar { |
| padding: 1rem; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container-fluid"> |
| <div class="row"> |
| |
| <div class="col-md-3 sidebar"> |
| <h4><i class="fas fa-flask"></i> Sistema de Testes</h4> |
| |
| |
| <div class="mb-4"> |
| <h6><i class="fas fa-question-circle"></i> Pergunta do Teste</h6> |
| <textarea id="testQuestion" class="form-control" rows="3" |
| placeholder="Digite a pergunta que será testada..."></textarea> |
| <button id="createSession" class="btn btn-primary btn-sm mt-2 w-100"> |
| <i class="fas fa-plus"></i> Criar Sessão |
| </button> |
| </div> |
|
|
| |
| <div id="groupConfig" style="display: none;"> |
| <h6><i class="fas fa-cogs"></i> Configurar Grupo</h6> |
| |
| <div class="mb-3"> |
| <label class="form-label">Modelo SQL Agent</label> |
| <select id="sqlModel" class="form-select form-select-sm"> |
| {% for name, value in available_models.items() %} |
| <option value="{{ value }}">{{ name }}</option> |
| {% endfor %} |
| </select> |
| </div> |
|
|
| <div class="mb-3"> |
| <div class="form-check"> |
| <input class="form-check-input" type="checkbox" id="enableProcessing"> |
| <label class="form-check-label" for="enableProcessing"> |
| Ativar Processing Agent |
| </label> |
| </div> |
| </div> |
|
|
| <div id="processingModelDiv" class="mb-3" style="display: none;"> |
| <label class="form-label">Modelo Processing Agent</label> |
| <select id="processingModel" class="form-select form-select-sm"> |
| {% for name, value in available_models.items() %} |
| <option value="{{ value }}">{{ name }}</option> |
| {% endfor %} |
| </select> |
| </div> |
|
|
| <div class="mb-3"> |
| <label class="form-label">Número de Iterações</label> |
| <input type="number" id="iterations" class="form-control form-control-sm" |
| value="5" min="1" max="100"> |
| </div> |
|
|
| <button id="addGroup" class="btn btn-success btn-sm w-100 mb-2"> |
| <i class="fas fa-plus"></i> Adicionar Grupo |
| </button> |
| </div> |
|
|
| |
| <div id="validationConfig" style="display: none;"> |
| <hr> |
| <h6><i class="fas fa-check-circle"></i> Validação</h6> |
| |
| <div class="mb-3"> |
| <label class="form-label">Método</label> |
| <select id="validationMethod" class="form-select form-select-sm"> |
| <option value="llm">LLM (Automático)</option> |
| <option value="keyword">Palavra-chave</option> |
| </select> |
| </div> |
|
|
| <div id="keywordDiv" class="mb-3" style="display: none;"> |
| <label class="form-label">Conteúdo Esperado</label> |
| <input type="text" id="expectedContent" class="form-control form-control-sm" |
| placeholder="Texto que deve aparecer na resposta"> |
| </div> |
|
|
| <button id="runTests" class="btn btn-warning btn-sm w-100"> |
| <i class="fas fa-play"></i> Executar Testes |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="col-md-9 main-content"> |
| <div class="dashboard-header"> |
| <div class="d-flex justify-content-between align-items-center"> |
| <h2><i class="fas fa-chart-line"></i> Dashboard de Testes</h2> |
| <div id="sessionStatus" class="status-badge status-idle"> |
| <i class="fas fa-circle"></i> Aguardando |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="sessionInfo" class="alert alert-info" style="display: none;"> |
| <h6><i class="fas fa-info-circle"></i> Informações da Sessão</h6> |
| <div id="sessionDetails"></div> |
| </div> |
|
|
| |
| <div id="testGroups"> |
| <h5><i class="fas fa-layer-group"></i> Grupos de Teste</h5> |
| <div id="groupsList"> |
| <p class="text-muted">Nenhum grupo configurado ainda.</p> |
| </div> |
| </div> |
|
|
| |
| <div id="progressContainer" class="progress-container"> |
| <h5><i class="fas fa-tasks"></i> Progresso dos Testes</h5> |
| <div class="progress mb-3"> |
| <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" |
| role="progressbar" style="width: 0%"></div> |
| </div> |
| <div id="progressDetails" class="row"> |
| <div class="col-md-3"> |
| <div class="metric-card"> |
| <div class="metric-value" id="completedTests">0</div> |
| <div class="metric-label">Testes Concluídos</div> |
| </div> |
| </div> |
| <div class="col-md-3"> |
| <div class="metric-card"> |
| <div class="metric-value" id="totalTests">0</div> |
| <div class="metric-label">Total de Testes</div> |
| </div> |
| </div> |
| <div class="col-md-3"> |
| <div class="metric-card"> |
| <div class="metric-value" id="currentGroup">-</div> |
| <div class="metric-label">Grupo Atual</div> |
| </div> |
| </div> |
| <div class="col-md-3"> |
| <div class="metric-card"> |
| <div class="metric-value" id="estimatedTime">-</div> |
| <div class="metric-label">Tempo Restante</div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="card mt-3"> |
| <div class="card-header"> |
| <h6><i class="fas fa-stop-circle"></i> Controles de Teste</h6> |
| </div> |
| <div class="card-body"> |
| <div class="row"> |
| <div class="col-md-6"> |
| <div id="currentTestInfo" class="mb-3"> |
| <strong>Teste Atual:</strong> |
| <div id="currentTestDetails" class="text-muted">Nenhum teste em execução</div> |
| </div> |
| <div id="runningTestsInfo" class="mb-3"> |
| <strong>Testes em Execução:</strong> |
| <span id="runningTestsCount" class="badge bg-primary">0</span> |
| </div> |
| </div> |
| <div class="col-md-6"> |
| <div class="d-grid gap-2"> |
| <button id="cancelCurrentBtn" class="btn btn-warning btn-sm" onclick="cancelCurrentTest()"> |
| <i class="fas fa-stop"></i> Cancelar Teste Atual |
| </button> |
| <button id="skipStuckBtn" class="btn btn-danger btn-sm" onclick="skipStuckTests()"> |
| <i class="fas fa-forward"></i> Pular Testes Travados (>2min) |
| </button> |
| <button id="cancelAllBtn" class="btn btn-dark btn-sm" onclick="cancelAllTests()"> |
| <i class="fas fa-ban"></i> Cancelar Todos os Testes |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="runningTestsList" class="mt-3" style="display: none;"> |
| <h6>Testes em Execução:</h6> |
| <div id="runningTestsContainer" class="list-group"> |
| |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="resultsContainer" class="results-container"> |
| <div class="d-flex justify-content-between align-items-center mb-3"> |
| <h5><i class="fas fa-chart-bar"></i> Resultados</h5> |
| <button id="downloadCsv" class="btn btn-outline-primary btn-sm"> |
| <i class="fas fa-download"></i> Baixar CSV |
| </button> |
| </div> |
| |
| |
| <ul class="nav nav-tabs" id="resultsTabs" role="tablist"> |
| <li class="nav-item" role="presentation"> |
| <button class="nav-link active" id="summary-tab" data-bs-toggle="tab" |
| data-bs-target="#summary" type="button" role="tab"> |
| <i class="fas fa-chart-pie"></i> Resumo |
| </button> |
| </li> |
| <li class="nav-item" role="presentation"> |
| <button class="nav-link" id="groups-tab" data-bs-toggle="tab" |
| data-bs-target="#groups" type="button" role="tab"> |
| <i class="fas fa-layer-group"></i> Por Grupo |
| </button> |
| </li> |
| <li class="nav-item" role="presentation"> |
| <button class="nav-link" id="individual-tab" data-bs-toggle="tab" |
| data-bs-target="#individual" type="button" role="tab"> |
| <i class="fas fa-list"></i> Individual |
| </button> |
| </li> |
| </ul> |
| |
| <div class="tab-content" id="resultsTabContent"> |
| <div class="tab-pane fade show active" id="summary" role="tabpanel"> |
| <div id="summaryContent" class="p-3"></div> |
| </div> |
| <div class="tab-pane fade" id="groups" role="tabpanel"> |
| <div id="groupsContent" class="p-3"></div> |
| </div> |
| <div class="tab-pane fade" id="individual" role="tabpanel"> |
| <div id="individualContent" class="p-3"></div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> |
| <script src="{{ url_for('static', filename='js/app.js') }}"></script> |
| </body> |
| </html> |
|
|
