Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Backend Connector</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary-color: #4285f4; | |
| --primary-hover: #3367d6; | |
| --secondary-color: #34a853; | |
| --accent-color: #ea4335; | |
| --warning-color: #fbbc05; | |
| --text-color: #202124; | |
| --text-secondary: #5f6368; | |
| --light-gray: #f8f9fa; | |
| --medium-gray: #e8eaed; | |
| --dark-gray: #dadce0; | |
| --border-radius: 12px; | |
| --box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |
| --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); | |
| color: var(--text-color); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| padding: 2rem; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 0 1rem; | |
| } | |
| header { | |
| background: white; | |
| padding: 1.5rem 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| margin-bottom: 2rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 1rem; | |
| } | |
| .header-content { | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--primary-color); | |
| } | |
| .logo-icon { | |
| font-size: 2rem; | |
| color: var(--primary-color); | |
| } | |
| .anycoder-link { | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .anycoder-link a { | |
| color: var(--primary-color); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| } | |
| .anycoder-link a:hover { | |
| text-decoration: underline; | |
| color: var(--primary-hover); | |
| } | |
| .header-actions { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .main-content { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); | |
| gap: 2rem; | |
| margin-bottom: 2rem; | |
| } | |
| .section { | |
| background: white; | |
| padding: 2rem; | |
| border-radius: var(--border-radius); | |
| box-shadow: var(--box-shadow); | |
| transition: var(--transition); | |
| } | |
| .section:hover { | |
| box-shadow: 0 4px 12px rgba(0,0,0,0.1); | |
| } | |
| h2 { | |
| color: var(--primary-color); | |
| margin-bottom: 1.5rem; | |
| padding-bottom: 0.75rem; | |
| border-bottom: 2px solid var(--medium-gray); | |
| font-size: 1.5rem; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| } | |
| .form-group { | |
| margin-bottom: 1.5rem; | |
| position: relative; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 0.5rem; | |
| font-weight: 500; | |
| color: var(--text-secondary); | |
| font-size: 0.9rem; | |
| } | |
| .input-wrapper { | |
| position: relative; | |
| } | |
| input, | |
| textarea, | |
| select { | |
| width: 100%; | |
| padding: 1rem; | |
| border: 1px solid var(--dark-gray); | |
| border-radius: 8px; | |
| font-size: 1rem; | |
| transition: var(--transition); | |
| background-color: var(--light-gray); | |
| font-family: inherit; | |
| } | |
| input:focus, | |
| textarea:focus, | |
| select:focus { | |
| outline: none; | |
| border-color: var(--primary-color); | |
| background-color: white; | |
| box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2); | |
| } | |
| textarea { | |
| resize: vertical; | |
| min-height: 120px; | |
| } | |
| .status-container { | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.75rem; | |
| border-radius: 8px; | |
| background-color: rgba(66, 133, 244, 0.1); | |
| } | |
| .status-indicator { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| animation: pulse 2s infinite; | |
| } | |
| .status-connected { | |
| background-color: var(--secondary-color); | |
| } | |
| .status-disconnected { | |
| background-color: var(--accent-color); | |
| animation: none; | |
| } | |
| .status-connecting { | |
| background-color: var(--warning-color); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .button-group { | |
| display: flex; | |
| gap: 1rem; | |
| flex-wrap: wrap; | |
| margin-bottom: 1rem; | |
| } | |
| button { | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| transition: var(--transition); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary-color); | |
| color: white; | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background-color: var(--primary-hover); | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| background-color: var(--light-gray); | |
| color: var(--text-color); | |
| border: 1px solid var(--dark-gray); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background-color: var(--medium-gray); | |
| } | |
| .btn-danger { | |
| background-color: var(--accent-color); | |
| color: white; | |
| } | |
| .btn-danger:hover:not(:disabled) { | |
| background-color: #d32f2f; | |
| } | |
| button:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| .message { | |
| padding: 1rem; | |
| border-radius: 8px; | |
| margin-top: 1rem; | |
| font-size: 0.9rem; | |
| display: none; | |
| } | |
| .error-message { | |
| background-color: rgba(234, 67, 53, 0.1); | |
| color: var(--accent-color); | |
| border-left: 4px solid var(--accent-color); | |
| } | |
| .success-message { | |
| background-color: rgba(52, 168, 83, 0.1); | |
| color: var(--secondary-color); | |
| border-left: 4px solid var(--secondary-color); | |
| } | |
| .cookie-settings { | |
| background-color: rgba(66, 133, 244, 0.05); | |
| padding: 1.25rem; | |
| border-radius: 8px; | |
| margin-bottom: 1.5rem; | |
| border: 1px solid rgba(66, 133, 244, 0.2); | |
| } | |
| .cookie-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 1rem; | |
| } | |
| .cookie-list { | |
| margin-bottom: 1.5rem; | |
| } | |
| .cookie-item { | |
| background: white; | |
| padding: 1rem; | |
| border-radius: 8px; | |
| margin-bottom: 0.75rem; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| box-shadow: 0 1px 2px rgba(0,0,0,0.1); | |
| transition: var(--transition); | |
| } | |
| .cookie-item:hover { | |
| box-shadow: 0 2px 4px rgba(0,0,0,0.1); | |
| } | |
| .cookie-info { | |
| flex: 1; | |
| } | |
| .cookie-name { | |
| font-weight: 600; | |
| color: var(--text-color); | |
| margin-bottom: 0.25rem; | |
| } | |
| .cookie-value { | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| word-break: break-all; | |
| } | |
| .cookie-actions { | |
| display: flex; | |
| gap: 0.5rem; | |
| margin-left: 1rem; | |
| } | |
| .cookie-actions button { | |
| padding: 0.5rem; | |
| font-size: 0.85rem; | |
| } | |
| .progress-container { | |
| height: 6px; | |
| background-color: var(--medium-gray); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| margin: 1.5rem 0; | |
| box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); | |
| } | |
| .progress-bar { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--primary-color), #5c86f4); | |
| width: 0%; | |
| transition: width 0.3s ease; | |
| } | |
| .response-area { | |
| min-height: 200px; | |
| border: 1px solid var(--dark-gray); | |
| padding: 1.25rem; | |
| border-radius: 8px; | |
| background-color: var(--light-gray); | |
| white-space: pre-wrap; | |
| font-family: 'Roboto Mono', monospace; | |
| overflow-y: auto; | |
| max-height: 400px; | |
| position: relative; | |
| font-size: 0.9rem; | |
| line-height: 1.5; | |
| } | |
| .response-header { | |
| position: sticky; | |
| top: 0; | |
| background: var(--light-gray); | |
| padding-bottom: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| border-bottom: 1px solid var(--medium-gray); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .copy-btn { | |
| background: none; | |
| border: none; | |
| color: var(--text-secondary); | |
| cursor: pointer; | |
| padding: 0.25rem; | |
| border-radius: 4px; | |
| transition: var(--transition); | |
| } | |
| .copy-btn:hover { | |
| background-color: rgba(0,0,0,0.05); | |
| color: var(--text-color); | |
| } | |
| .model-selector { | |
| position: relative; | |
| } | |
| .model-info { | |
| margin-top: 0.5rem; | |
| padding: 0.75rem; | |
| background-color: rgba(66, 133, 244, 0.05); | |
| border-radius: 8px; | |
| border-left: 3px solid var(--primary-color); | |
| display: none; | |
| } | |
| .model-info.show { | |
| display: block; | |
| } | |
| .model-meta { | |
| display: flex; | |
| gap: 1rem; | |
| font-size: 0.85rem; | |
| color: var(--text-secondary); | |
| } | |
| .model-tag { | |
| display: inline-block; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 4px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| background-color: rgba(66, 133, 244, 0.1); | |
| color: var(--primary-color); | |
| } | |
| @media (max-width: 768px) { | |
| body { | |
| padding: 1rem; | |
| } | |
| .main-content { | |
| grid-template-columns: 1fr; | |
| } | |
| header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .header-actions { | |
| width: 100%; | |
| justify-content: flex-end; | |
| } | |
| .button-group { | |
| flex-direction: column; | |
| } | |
| button { | |
| width: 100%; | |
| } | |
| } | |
| /* Dark mode support */ | |
| @media (prefers-color-scheme: dark) { | |
| :root { | |
| --primary-color: #8ab4f8; | |
| --primary-hover: #7baaf7; | |
| --text-color: #e8eaed; | |
| --text-secondary: #bdc1c6; | |
| --light-gray: #202124; | |
| --medium-gray: #3c4043; | |
| --dark-gray: #5f6368; | |
| --box-shadow: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4); | |
| } | |
| body { | |
| background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); | |
| } | |
| .section { | |
| background: #202124; | |
| } | |
| input, textarea, select { | |
| background-color: #303134; | |
| border-color: #5f6368; | |
| color: #e8eaed; | |
| } | |
| .cookie-settings { | |
| background-color: rgba(66, 133, 244, 0.1); | |
| border-color: rgba(66, 133, 244, 0.3); | |
| } | |
| .cookie-item { | |
| background: #2d2d2d; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <header> | |
| <div class="header-content"> | |
| <div class="logo"> | |
| <i class="fas fa-robot logo-icon"></i> | |
| <span>AI Backend Connector</span> | |
| </div> | |
| <div class="anycoder-link"> | |
| <i class="fas fa-code"></i> | |
| Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a> | |
| </div> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="btn-secondary" id="toggle-theme"> | |
| <i class="fas fa-moon"></i> | |
| <span id="theme-text">Dark Mode</span> | |
| </button> | |
| </div> | |
| </header> | |
| <div class="main-content"> | |
| <div class="section"> | |
| <h2> | |
| <i class="fas fa-plug"></i> | |
| Conexão com Backend | |
| </h2> | |
| <div class="form-group"> | |
| <label for="backend-url">URL do Backend</label> | |
| <div class="input-wrapper"> | |
| <input type="url" id="backend-url" placeholder="https://api.example.com/endpoint"> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label for="api-key">Chave de API</label> | |
| <div class="input-wrapper"> | |
| <input type="password" id="api-key" placeholder="Sua chave de API"> | |
| <i class="fas fa-eye-slash toggle-password" id="toggle-api-key"></i> | |
| </div> | |
| </div> | |
| <div class="form-group model-selector"> | |
| <label for="model-select">Modelo de IA</label> | |
| <select id="model-select"> | |
| <option value="distilbert-base-uncased-finetuned-sst-2-english" data-info="Lightweight model for sentiment analysis with high accuracy."> | |
| DistilBERT (Sentiment Analysis) | |
| </option> | |
| <option value="bert-base-multilingual-uncased-sentiment" data-info="Multilingual BERT model supporting 100+ languages for sentiment analysis."> | |
| BERT Multilingual | |
| </option> | |
| <option value="facebook/bart-large-cnn" data-info="State-of-the-art model for text summarization with abstractive capabilities."> | |
| BART (Summarization) | |
| </option> | |
| <option value="t5-small" data-info="Text-to-text transfer transformer for various NLP tasks including generation."> | |
| T5 (Text Generation) | |
| </option> | |
| </select> | |
| <div class="model-info" id="model-info"> | |
| <div class="model-meta"> | |
| <span class="model-tag">HuggingFace</span> | |
| <span id="model-description"></span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Status da Conexão</label> | |
| <div class="status-container" id="status-container"> | |
| <span class="status-indicator" id="connection-status"></span> | |
| <span id="connection-text">Desconectado</span> | |
| </div> | |
| </div> | |
| <div class="button-group"> | |
| <button class="btn-primary" id="connect-btn"> | |
| <i class="fas fa-link"></i> | |
| Conectar ao Backend | |
| </button> | |
| <button class="btn-secondary" id="disconnect-btn" disabled> | |
| <i class="fas fa-unlink"></i> | |
| Desconectar | |
| </button> | |
| </div> | |
| <div id="connection-error" class="message error-message"></div> | |
| <div id="connection-success" class="message success-message"></div> | |
| </div> | |
| <div class="section"> | |
| <h2> | |
| <i class="fas fa-cookie-bite"></i> | |
| Gerenciamento de Cookies | |
| </h2> | |
| <div class="cookie-settings"> | |
| <div class="cookie-header"> | |
| <h3>Cookies de Conexão</h3> | |
| <span id="cookie-count" class="model-tag">0</span> | |
| </div> | |
| <div class="cookie-list" id="cookie-list"> | |
| <!-- Cookies serão listados aqui --> | |
| </div> | |
| <div class="form-group"> | |
| <label for="new-cookie-name">Nome do Cookie</label> | |
| <input type="text" id="new-cookie-name" placeholder="session_id"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="new-cookie-value">Valor do Cookie</label> | |
| <input type="text" id="new-cookie-value" placeholder="valor_do_cookie"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="new-cookie-expiry">Expiração (dias)</label> | |
| <input type="number" id="new-cookie-expiry" value="7" min="1"> | |
| </div> | |
| <button class="btn-secondary" id="add-cookie-btn"> | |
| <i class="fas fa-plus"></i> | |
| Adicionar Cookie | |
| </button> | |
| </div> | |
| <div class="form-group"> | |
| <button class="btn-danger" id="clear-cookies-btn"> | |
| <i class="fas fa-trash"></i> | |
| Limpar Todos os Cookies | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h2> | |
| <i class="fas fa-paper-plane"></i> | |
| Envio de Dados para IA | |
| </h2> | |
| <div class="form-group"> | |
| <label for="input-text">Texto de Entrada</label> | |
| <textarea id="input-text" rows="6" placeholder="Digite o texto para enviar à IA..."></textarea> | |
| </div> | |
| <div class="form-group"> | |
| <label for="task-type">Tipo de Tarefa</label> | |
| <select id="task-type"> | |
| <option value="text-classification">Classificação de Texto</option> | |
| <option value="summarization">Sumarização</option> | |
| <option value="question-answering">Resposta a Perguntas</option> | |
| <option value="text-generation">Geração de Texto</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label for="max-length">Tamanho Máximo da Resposta</label> | |
| <input type="range" id="max-length" value="100" min="10" max="500"> | |
| <div style="display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--text-secondary);"> | |
| <span>10</span> | |
| <span id="max-length-value">100</span> | |
| <span>500</span> | |
| </div> | |
| </div> | |
| <div class="button-group"> | |
| <button class="btn-primary" id="send-btn" disabled> | |
| <i class="fas fa-paper-plane"></i> | |
| Enviar para IA | |
| </button> | |
| <button class="btn-secondary" id="clear-btn"> | |
| <i class="fas fa-eraser"></i> | |
| Limpar | |
| </button> | |
| </div> | |
| <div class="progress-container"> | |
| <div class="progress-bar" id="progress-bar"></div> | |
| </div> | |
| <div class="form-group"> | |
| <label>Resposta da IA</label> | |
| <div class="response-area" id="response-area"> | |
| <div class="response-header"> | |
| <span>A resposta da IA aparecerá aqui...</span> | |
| <button class="copy-btn" id="copy-response" title="Copiar resposta"> | |
| <i class="far fa-copy"></i> | |
| </button> | |
| </div> | |
| <div id="response-content"></div> | |
| </div> | |
| </div> | |
| <div id="ai-error" class="message error-message"></div> | |
| </div> | |
| </div> | |
| <script> | |
| // DOM Elements | |
| const connectBtn = document.getElementById('connect-btn'); | |
| const disconnectBtn = document.getElementById('disconnect-btn'); | |
| const backendUrlInput = document.getElementById('backend-url'); | |
| const apiKeyInput = document.getElementById('api-key'); | |
| const modelSelect = document.getElementById('model-select'); | |
| const modelInfo = document.getElementById('model-info'); | |
| const modelDescription = document.getElementById('model-description'); | |
| const connectionStatus = document.getElementById('connection-status'); | |
| const connectionText = document.getElementById('connection-text'); | |
| const statusContainer = document.getElementById('status-container'); | |
| const connectionError = document.getElementById('connection-error'); | |
| const connectionSuccess = document.getElementById('connection-success'); | |
| const cookieList = document.getElementById('cookie-list'); | |
| const newCookieName = document.getElementById('new-cookie-name'); | |
| const newCookieValue = document.getElementById('new-cookie-value'); | |
| const newCookieExpiry = document.getElementById('new-cookie-expiry'); | |
| const addCookieBtn = document.getElementById('add-cookie-btn'); | |
| const clearCookiesBtn = document.getElementById('clear-cookies-btn'); | |
| const cookieCount = document.getElementById('cookie-count'); | |
| const inputText = document.getElementById('input-text'); | |
| const taskType = document.getElementById('task-type'); | |
| const maxLength = document.getElementById('max-length'); | |
| const maxLengthValue = document.getElementById('max-length-value'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const clearBtn = document.getElementById('clear-btn'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const responseArea = document.getElementById('response-area'); | |
| const responseContent = document.getElementById('response-content'); | |
| const copyResponseBtn = document.getElementById('copy-response'); | |
| const aiError = document.getElementById('ai-error'); | |
| const toggleApiKey = document.getElementById('toggle-api-key'); | |
| const toggleTheme = document.getElementById('toggle-theme'); | |
| const themeText = document.getElementById('theme-text'); | |
| // State | |
| let isConnected = false; | |
| let cookies = []; | |
| let currentTheme = 'light'; | |
| // Initialize | |
| document.addEventListener('DOMContentLoaded', () => { | |
| // Load saved cookies | |
| loadCookies(); | |
| // Set up event listeners | |
| connectBtn.addEventListener('click', connectToBackend); | |
| disconnectBtn.addEventListener('click', disconnectFromBackend); | |
| addCookieBtn.addEventListener('click', addCookie); | |
| clearCookiesBtn.addEventListener('click', clearCookies); | |
| sendBtn.addEventListener('click', sendToAI); | |
| clearBtn.addEventListener('click', clearInput); | |
| copyResponseBtn.addEventListener('click', copyResponse); | |
| toggleApiKey.addEventListener('click', togglePasswordVisibility); | |
| toggleTheme.addEventListener('click', toggleThemeMode); | |
| modelSelect.addEventListener('change', updateModelInfo); | |
| maxLength.addEventListener('input', updateMaxLengthValue); | |
| // Initialize model info | |
| updateModelInfo(); | |
| // Check for saved theme preference | |
| const savedTheme = localStorage.getItem('theme'); | |
| if (savedTheme) { | |
| currentTheme = savedTheme; | |
| updateThemeUI(); | |
| } | |
| }); | |
| // Functions | |
| function connectToBackend() { | |
| const url = backendUrlInput.value.trim(); | |
| const apiKey = apiKeyInput.value.trim(); | |
| if (!url) { | |
| showError(connectionError, 'Por favor, insira a URL do backend'); | |
| return; | |
| } | |
| if (!apiKey) { | |
| showError(connectionError, 'Por favor, insira a chave de API'); | |
| return; | |
| } | |
| // Simulate connection | |
| updateConnectionStatus('connecting'); | |
| showMessage(connectionSuccess, 'Conectando ao backend...'); | |
| // Simulate API call | |
| setTimeout(() => { | |
| isConnected = true; | |
| updateConnectionStatus('connected'); | |
| showMessage(connectionSuccess, 'Conexão estabelecida com sucesso!'); | |
| // Enable send button | |
| sendBtn.disabled = false; | |
| connectBtn.disabled = true; | |
| disconnectBtn.disabled = false; | |
| }, 1500); | |
| } | |
| function disconnectFromBackend() { | |
| if (!isConnected) return; | |
| updateConnectionStatus('disconnected'); | |
| isConnected = false; | |
| // Disable send button | |
| sendBtn.disabled = true; | |
| connectBtn.disabled = false; | |
| disconnectBtn.disabled = true; | |
| showMessage(connectionError, 'Conexão encerrada'); | |
| } | |
| function updateConnectionStatus(status) { | |
| connectionStatus.className = 'status-indicator'; | |
| connectionStatus.classList.add(`status-${status}`); | |
| switch(status) { | |
| case 'connected': | |
| connectionText.textContent = 'Conectado'; | |
| statusContainer.style.backgroundColor = 'rgba(52, 168, 83, 0.1)'; | |
| break; | |
| case 'disconnected': | |
| connectionText.textContent = 'Desconectado'; | |
| statusContainer.style.backgroundColor = 'rgba(234, 67, 53, 0.1)'; | |
| break; | |
| case 'connecting': | |
| connectionText.textContent = 'Conectando...'; | |
| statusContainer.style.backgroundColor = 'rgba(251, 188, 5, 0.1)'; | |
| break; | |
| } | |
| } | |
| function addCookie() { | |
| const name = newCookieName.value.trim(); | |
| const value = newCookieValue.value.trim(); | |
| const expiry = parseInt(newCookieExpiry.value); | |
| if (!name || !value) { | |
| alert('Por favor, preencha o nome e o valor do cookie'); | |
| return; | |
| } | |
| const cookie = { | |
| id: Date.now(), | |
| name, | |
| value, | |
| expiryDays: expiry, | |
| expiryDate: new Date(Date.now() + expiry * 24 * 60 * 60 * 1000).toISOString() | |
| }; | |
| cookies.push(cookie); | |
| saveCookies(); | |
| renderCookies(); | |
| // Clear inputs | |
| newCookieName.value = ''; | |
| newCookieValue.value = ''; | |
| newCookieExpiry.value = '7'; | |
| showMessage(connectionSuccess, 'Cookie adicionado com sucesso!'); | |
| } | |
| function clearCookies() { | |
| if (confirm('Tem certeza que deseja limpar todos os cookies?')) { | |
| cookies = []; | |
| saveCookies(); | |
| renderCookies(); | |
| showMessage(connectionSuccess, 'Todos os cookies foram removidos'); | |
| } | |
| } | |
| function renderCookies() { | |
| cookieList.innerHTML = ''; | |
| if (cookies.length === 0) { | |
| cookieList.innerHTML = '<p style="text-align: center; color: var(--text-secondary);">Nenhum cookie adicionado</p>'; | |
| } else { | |
| cookies.forEach(cookie => { | |
| const cookieElement = document.createElement('div'); | |
| cookieElement.className = 'cookie-item'; | |
| cookieElement.innerHTML = ` | |
| <div class="cookie-info"> | |
| <div class="cookie-name">${cookie.name}</div> | |
| <div class="cookie-value">${cookie.value}</div> | |
| <div style="font-size: 0.75rem; color: var(--text-secondary); margin-top: 0.25rem;"> | |
| Expires: ${new Date(cookie.expiryDate).toLocaleDateString()} | |
| </div> | |
| </div> | |
| <div class="cookie-actions"> | |
| <button class="btn-secondary" title="Editar" onclick="editCookie(${cookie.id})"> | |
| <i class="fas fa-edit"></i> | |
| </button> | |
| <button class="btn-danger" title="Remover" onclick="removeCookie(${cookie.id})"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| `; | |
| cookieList.appendChild(cookieElement); | |
| }); | |
| } | |
| cookieCount.textContent = cookies.length; | |
| } | |
| function saveCookies() { | |
| localStorage.setItem('aiBackendCookies', JSON.stringify(cookies)); | |
| } | |
| function loadCookies() { | |
| const savedCookies = localStorage.getItem('aiBackendCookies'); | |
| if (savedCookies) { | |
| cookies = JSON.parse(savedCookies); | |
| renderCookies(); | |
| } | |
| } | |
| function removeCookie(id) { | |
| cookies = cookies.filter(cookie => cookie.id !== id); | |
| saveCookies(); | |
| renderCookies(); | |
| showMessage(connectionSuccess, 'Cookie removido'); | |
| } | |
| function editCookie(id) { | |
| const cookie = cookies.find(c => c.id === id); | |
| if (cookie) { | |
| newCookieName.value = cookie.name; | |
| newCookieValue.value = cookie.value; | |
| newCookieExpiry.value = cookie.expiryDays; | |
| // Remove the cookie | |
| removeCookie(id); | |
| } | |
| } | |
| function sendToAI() { | |
| const text = inputText.value.trim(); | |
| const task = taskType.value; | |
| const length = maxLength.value; | |
| if (!text) { | |
| showError(aiError, 'Por favor, insira algum texto'); | |
| return; | |
| } | |
| // Disable buttons and show progress | |
| sendBtn.disabled = true; | |
| clearBtn.disabled = true; | |
| progressBar.style.width = '0%'; | |
| responseContent.textContent = 'Processando sua solicitação...'; | |
| // Simulate API call with progress | |
| let progress = 0; | |
| const interval = setInterval(() => { | |
| progress += 5; | |
| progressBar.style.width = `${progress}%`; | |
| if (progress >= 100) { | |
| clearInterval(interval); | |
| simulateAIResponse(text, task, length); | |
| } | |
| }, 300); | |
| } | |
| function simulateAIResponse(text, task, length) { | |
| // Simulate different responses based on task type | |
| let response = ''; | |
| switch(task) { | |
| case 'text-classification': | |
| response = `Análise de Sentimento: | |
| - Polaridade: ${Math.random() > 0.5 ? 'Positivo' : 'Negativo'} | |
| - Confiança: ${(Math.random() * 0.5 + 0.5).toFixed(2)} | |
| - Emoções detectadas: ${['felicidade', 'tristeza', 'raiva', 'surpresa'][Math.floor(Math.random() * 4)]}`; | |
| break; | |
| case 'summarization': | |
| response = `Resumo (${length} caracteres): | |
| ${text.substring(0, parseInt(length))}...`; | |
| break; | |
| case 'question-answering': | |
| response = `Pergunta detectada: "${text.split('?')[0]}?" | |
| Resposta gerada: | |
| ${text.split(' ').slice(0, 10).join(' ')}...`; | |
| break; | |
| case 'text-generation': | |
| response = `Texto gerado (${length} tokens): | |
| ${text} ${Array(10).fill('lorem ipsum ').join('')}...`; | |
| break; | |
| } | |
| // Update UI | |
| responseContent.innerHTML = `<pre>${response}</pre>`; | |
| sendBtn.disabled = false; | |
| clearBtn.disabled = false; | |
| progressBar.style.width = '100%'; | |
| setTimeout(() => { | |
| progressBar.style.width = '0%'; | |
| }, 1000); | |
| } | |
| function clearInput() { | |
| inputText.value = ''; | |
| responseContent.textContent = 'A resposta da IA aparecerá aqui...'; | |
| aiError.style.display = 'none'; | |
| } | |
| function copyResponse() { | |
| const text = responseContent.textContent; | |
| if (!text || text.includes('aparecerá aqui')) { | |
| showError(aiError, 'Nada para copiar'); | |
| return; | |
| } | |
| navigator.clipboard.writeText(text).then(() => { | |
| // Show temporary checkmark | |
| const originalHTML = copyResponseBtn.innerHTML; | |
| copyResponseBtn.innerHTML = '<i class="fas fa-check"></i>'; | |
| copyResponseBtn.style.color = 'var(--secondary-color)'; | |
| setTimeout(() => { | |
| copyResponseBtn.innerHTML = originalHTML; | |
| copyResponseBtn.style.color = ''; | |
| }, 2000); | |
| showMessage(connectionSuccess, 'Resposta copiada para a área de transferência!'); | |
| }).catch(err => { | |
| showError(aiError, 'Falha ao copiar: ' + err); | |
| }); | |
| } | |
| function togglePasswordVisibility() { | |
| const type = apiKeyInput.getAttribute('type') === 'password' ? 'text' : 'password'; | |
| apiKeyInput.setAttribute('type', type); | |
| toggleApiKey.classList.toggle('fa-eye'); | |
| toggleApiKey.classList.toggle('fa-eye-slash'); | |
| } | |
| function toggleThemeMode() { | |
| currentTheme = currentTheme === 'light' ? 'dark' : 'light'; | |
| updateThemeUI(); | |
| localStorage.setItem('theme', currentTheme); | |
| } | |
| function updateThemeUI() { | |
| if (currentTheme === 'dark') { | |
| document.documentElement.style.setProperty('--primary-color', '#8ab4f8'); | |
| document.documentElement.style.setProperty('--primary-hover', '#7baaf7'); | |
| themeText.textContent = 'Light Mode'; | |
| toggleTheme.innerHTML = '<i class="fas fa-sun"></i><span id="theme-text">Light Mode</span>'; | |
| } else { | |
| document.documentElement.style.setProperty('--primary-color', '#4285f4'); | |
| document.documentElement.style.setProperty('--primary-hover', '#3367d6'); | |
| themeText.textContent = 'Dark Mode'; | |
| toggleTheme.innerHTML = '<i class="fas fa-moon"></i><span id="theme-text">Dark Mode</span>'; | |
| } | |
| } | |
| function updateModelInfo() { | |
| const selectedOption = modelSelect.options[modelSelect.selectedIndex]; | |
| const info = selectedOption.getAttribute('data-info'); | |
| if (info) { | |
| modelDescription.textContent = info; | |
| modelInfo.classList.add('show'); | |
| } else { | |
| modelInfo.classList.remove('show'); | |
| } | |
| } | |
| function updateMaxLengthValue() { | |
| maxLengthValue.textContent = maxLength.value; | |
| } | |
| function showError(element, message) { | |
| element.textContent = message; | |
| element.style.display = 'block'; | |
| // Hide after 5 seconds | |
| setTimeout(() => { | |
| element.style.display = 'none'; | |
| }, 5000); | |
| } | |
| function showMessage(element, message) { | |
| element.textContent = message; | |
| element.style.display = 'block'; | |
| // Hide after 3 seconds | |
| setTimeout(() => { | |
| element.style.display = 'none'; | |
| }, 3000); | |
| } | |
| // Expose functions to global scope for button handlers | |
| window.removeCookie = removeCookie; | |
| window.editCookie = editCookie; | |
| </script> | |
| </body> | |
| </html> |