Hugging Face's logo

Spaces:
ivanoctaviogaitansantos
/
mini-space-652
Running

App Files Community
mini-space-652
File size: 6,151 Bytes 
5015740
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
 
<!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">
                <!-- Panel de Control -->
                <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>

                <!-- Panel de Salida -->
                <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>

            <!-- Panel de Información -->
            <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>&copy; 2024 Bat_IA Súper Multimodal + Código. Todos los derechos reservados.</p>
        </div>
    </footer>

    <script src="assets/js/main.js"></script>
</body>
</html>