|
|
<!DOCTYPE html> |
|
|
<html lang="es"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>🦇 Bat_IA Súper Multimodal + Código</title> |
|
|
<link rel="stylesheet" href="assets/css/styles.css"> |
|
|
<link rel="preconnect" href="https://fonts.googleapis.com"> |
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
</head> |
|
|
<body> |
|
|
<header class="header"> |
|
|
<div class="container"> |
|
|
<h1 class="title">🦇 Bat_IA Súper Multimodal + Código</h1> |
|
|
<p class="subtitle">Inteligencia Artificial Multimodal Avanzada</p> |
|
|
<a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">Built with anycoder</a> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
<main class="main"> |
|
|
<div class="container"> |
|
|
<div class="interface-grid"> |
|
|
|
|
|
<div class="control-panel"> |
|
|
<div class="form-group"> |
|
|
<label for="taskSelect">Selecciona tarea</label> |
|
|
<select id="taskSelect" class="form-control"> |
|
|
<option value="chat">Chat</option> |
|
|
<option value="imagen">Imagen</option> |
|
|
<option value="codigo">Código</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group" id="chatModelGroup"> |
|
|
<label for="chatModelSelect">Modelo de Chat</label> |
|
|
<select id="chatModelSelect" class="form-control"> |
|
|
<option value="meta-llama/Llama-3.1-8B-Instruct">Llama-3.1-8B-Instruct</option> |
|
|
<option value="deepseek-ai/DeepSeek-V3-0324">DeepSeek-V3-0324</option> |
|
|
<option value="Qwen/Qwen3-0.6B">Qwen3-0.6B</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group" id="codeModelGroup" style="display: none;"> |
|
|
<label for="codeModelSelect">Modelo de Código</label> |
|
|
<select id="codeModelSelect" class="form-control"> |
|
|
<option value="deepseek-ai/DeepSeek-Coder-V2-Lite-Instruct">DeepSeek-Coder-V2-Lite-Instruct</option> |
|
|
<option value="TheBloke/Mistral-7B-Instruct-v0.2-code-ft-AWQ">Mistral-7B-Instruct-v0.2-code-ft-AWQ</option> |
|
|
<option value="ajibawa-2023/Code-Mistral-7B">Code-Mistral-7B</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="inputText">Escribe tu mensaje o prompt</label> |
|
|
<textarea id="inputText" class="form-control" rows="6" placeholder="Escribe aquí tu mensaje..."></textarea> |
|
|
</div> |
|
|
|
|
|
<button id="sendButton" class="btn-primary"> |
|
|
<span class="btn-text">Enviar</span> |
|
|
<span class="btn-loader" style="display: none;">Procesando...</span> |
|
|
</button> |
|
|
|
|
|
<div class="status-indicator" id="statusIndicator"> |
|
|
<span class="status-dot"></span> |
|
|
<span class="status-text">Listo</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="output-panel"> |
|
|
<div class="output-section"> |
|
|
<h3 class="output-title">Respuesta</h3> |
|
|
<div class="output-container"> |
|
|
<div id="textOutput" class="text-output"> |
|
|
<div class="placeholder">La respuesta aparecerá aquí...</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="output-section" id="imageSection" style="display: none;"> |
|
|
<h3 class="output-title">Imagen Generada</h3> |
|
|
<div class="image-container"> |
|
|
<img id="imageOutput" class="image-output" alt="Imagen generada"> |
|
|
<div class="image-placeholder" id="imagePlaceholder"> |
|
|
<div class="placeholder-icon">🖼️</div> |
|
|
<p>La imagen generada aparecerá aquí</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="info-panel"> |
|
|
<div class="info-card"> |
|
|
<h3>🔥 Dispositivo Activo</h3> |
|
|
<p id="deviceInfo">Detectando...</p> |
|
|
</div> |
|
|
<div class="info-card"> |
|
|
<h3>📊 Estadísticas</h3> |
|
|
<div class="stats"> |
|
|
<div class="stat-item"> |
|
|
<span class="stat-label">Peticiones:</span> |
|
|
<span class="stat-value" id="requestCount">0</span> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<span class="stat-label">Éxitos:</span> |
|
|
<span class="stat-value" id="successCount">0</span> |
|
|
</div> |
|
|
<div class="stat-item"> |
|
|
<span class="stat-label">Errores:</span> |
|
|
<span class="stat-value" id="errorCount">0</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
<footer class="footer"> |
|
|
<div class="container"> |
|
|
<p>© 2024 Bat_IA Súper Multimodal + Código. Todos los derechos reservados.</p> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script src="assets/js/main.js"></script> |
|
|
</body> |
|
|
</html> |
