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); | |
| } | |
| .file-input { | |
| margin-bottom: 20px; | |
| } | |
| .file-input input { | |
| margin-right: 10px; | |
| } | |
| .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> | |
| <div class="file-input"> | |
| <label for="file-upload">Upload ZIP File:</label> | |
| <input type="file" id="file-upload" accept=".zip" /> | |
| </div> | |
| <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 fileInput = document.getElementById("file-upload"); | |
| 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"; | |
| // Manejar el envío del formulario | |
| submitBtn.addEventListener("click", async () => { | |
| if (!fileInput.files.length) { | |
| resultsDiv.innerHTML = `<p class="error">Please upload a ZIP file.</p>`; | |
| return; | |
| } | |
| // Limpiar resultados anteriores | |
| resultsDiv.innerHTML = "<p>Processing...</p>"; | |
| try { | |
| // Leer el archivo seleccionado | |
| const file = fileInput.files[0]; | |
| const result = await client.predict("/execute_jupyter_agent", { | |
| sytem_prompt: systemPrompt, | |
| user_input: userInput, | |
| max_new_tokens: maxNewTokens, | |
| model: model, | |
| files: [file], // Enviar el archivo como parte de la solicitud | |
| }); | |
| // 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> |