Spaces:
Running
Running
| <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> |