Hugging Face's logo

Spaces:
C2MV
/
PRUEBAAGENTE
Running

App Files Community
PRUEBAAGENTE
File size: 5,054 Bytes 
b9e109a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
8afebd4
b9e109a
 
 
 
 
 
8afebd4
 
b9e109a
 
 
 
 
 
 
 
8afebd4
d7ba0b7
8afebd4
b9e109a
 
 
 
 
8afebd4
 
 
 
 
 
 
 
b9e109a
 
 
 
 
7a51e3f
b9e109a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
129
130
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Jupyter Agent Interface</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            padding: 0;
            background-color: #f9f9f9;
        }
        h1 {
            color: #333;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .results {
            margin-top: 20px;
        }
        .results img {
            max-width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .error {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Jupyter Agent Interface</h1>
        <button id="submit-btn">Submit</button>
        <div class="results" id="results"></div>
    </div>

    <script type="module">
        // Importar el cliente de Gradio
        import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/+esm";

        // Elementos del DOM
        const submitBtn = document.getElementById("submit-btn");
        const resultsDiv = document.getElementById("results");

        // Configurar el cliente para el agente Jupyter
        const client = await Client.connect("data-agents/jupyter-agent");

        // Definir los parámetros para la solicitud
        const systemPrompt = `# Data Science Agent Protocol
You are an intelligent data science assistant with access to an IPython interpreter. Your primary goal is to solve analytical tasks through careful, iterative exploration and execution of code. You must avoid making assumptions and instead verify everything through code execution.
## Core Principles
1. Always execute code to verify assumptions
2. Break down complex problems into smaller steps
3. Learn from execution results
4. Maintain clear communication about your process
... (el resto del prompt aquí) ...
Remember: Verification through execution is always better than assumption!`;

        const userInput = `
Extract the CSV file (file1) from the ZIP archive (observations), clean and filter the data to keep only the "species_guess", "latitude", and "longitude" columns, then create a new CSV with the filtered information, and finally generate and show a pie chart that displays the percentage distribution of the only main species (those with a frequency over 1%). Only show graphics until over 1%.
`;

        const maxNewTokens = 512;
        const model = "meta-llama/Llama-3.1-70B-Instruct";

        // URL del archivo ZIP en Hugging Face
        const fileUrl = "observations.zip";

        // Manejar el envío del formulario
        submitBtn.addEventListener("click", async () => {
            resultsDiv.innerHTML = "<p>Processing...</p>";

            try {
                // Descargar el archivo ZIP desde Hugging Face
                const response = await fetch(fileUrl);
                if (!response.ok) {
                    throw new Error(`Failed to fetch file: ${response.statusText}`);
                }
                const fileBlob = await response.blob();

                // Enviar la solicitud al agente Jupyter
                const result = await client.predict("/execute_jupyter_agent", {
                    sytem_prompt: systemPrompt,
                    user_input: userInput,
                    max_new_tokens: maxNewTokens,
                    model: model,
                    files: [new File([fileBlob], "observations.zip")], // Convertir el blob en un objeto File
                });

                // Mostrar los resultados
                const htmlContent = result.data[0]; // Resultado en formato HTML
                resultsDiv.innerHTML = htmlContent;

                // Extraer y mostrar la última imagen del HTML
                extractAndDisplayLastImage(htmlContent);
            } catch (error) {
                resultsDiv.innerHTML = `<p class="error">Error: ${error.message}</p>`;
            }
        });

        // Función para extraer y mostrar la última imagen del HTML
        function extractAndDisplayLastImage(htmlContent) {
            const imgPattern = /<img[^>]+src="([^">]+)"/g;
            const matches = [...htmlContent.matchAll(imgPattern)].map(match => match[1]);

            if (!matches.length) {
                resultsDiv.innerHTML += "<p>No images found in the response.</p>";
                return;
            }

            const lastImgSrc = matches[matches.length - 1];
            const imgElement = document.createElement("img");
            imgElement.src = lastImgSrc;
            imgElement.style.maxWidth = "100%";
            imgElement.style.height = "auto";
            resultsDiv.appendChild(imgElement);
        }
    </script>
</body>
</html>