Spaces:
Building
Building
| import gradio as gr | |
| import os | |
| from mistralai.client import MistralClient | |
| from mistralai.models.chat_completion import ChatMessage | |
| # Ensure the environment variable for the API key is set | |
| api_key = os.getenv("MISTRAL_API_KEY") | |
| if not api_key: | |
| raise ValueError("MISTRAL_API_KEY environment variable not set") | |
| model = "mistral-tiny" | |
| client = MistralClient(api_key=api_key) | |
| def generate_goals(input_var): | |
| messages = [ | |
| ChatMessage(role="user", content=f"Generate 10 specific, industry relevant goals for {input_var} using Python and Pandas. Each goal should include a brief name and a one-sentence description of the task or skill. Focus on practical applications in educational assessment, covering areas such as data processing, statistical analysis, visualization, and advanced techniques") | |
| ] | |
| try: | |
| response = client.chat(model=model, messages=messages) | |
| content = response.choices[0].message.content | |
| return content | |
| except Exception as e: | |
| return f"An error occurred: {str(e)}" | |
| # HTML content | |
| html_content = """ | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Comprehensive Exam Data Analysis with Pandas - 30 Industry Goals with Connections</title> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"></script> | |
| <style> | |
| body { font-family: Arial, sans-serif; margin: 20px; } | |
| #goalSpace { border: 1px solid #ccc; margin-bottom: 20px; } | |
| .goal { cursor: pointer; } | |
| #info { margin-top: 20px; font-weight: bold; } | |
| #selectedGoal { margin-top: 10px; padding: 10px; border: 1px solid #ccc; background-color: #f0f0f0; } | |
| #hoverInfo { | |
| position: absolute; | |
| padding: 10px; | |
| background-color: rgba(255, 255, 255, 0.9); | |
| border: 1px solid #ccc; | |
| border-radius: 5px; | |
| font-size: 14px; | |
| max-width: 300px; | |
| display: none; | |
| } | |
| #responseBox { | |
| margin-top: 20px; | |
| padding: 10px; | |
| border: 1px solid #ccc; | |
| background-color: #e0f7fa; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>Comprehensive Exam Data Analysis with Pandas - 30 Industry Goals with Connections</h1> | |
| <div id="goalSpace"></div> | |
| <div id="info"></div> | |
| <div id="selectedGoal"></div> | |
| <div id="hoverInfo"></div> | |
| <div id="responseBox"></div> | |
| <script> | |
| const width = 1200; | |
| const height = 800; | |
| // Define the goals and connections data | |
| const goals = [ | |
| // ... (your goals data here) | |
| ]; | |
| const connections = [ | |
| // ... (your connections data here) | |
| ]; | |
| // Create the SVG container for the goals and connections | |
| const svg = d3.select("#goalSpace") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // Draw connections between goals | |
| const links = svg.selectAll("line") | |
| .data(connections) | |
| .enter() | |
| .append("line") | |
| .attr("x1", d => goals.find(g => g.id === d.source).x) | |
| .attr("y1", d => goals.find(g => g.id === d.source).y) | |
| .attr("x2", d => goals.find(g => g.id === d.target).x) | |
| .attr("y2", d => goals.find(g => g.id === d.target).y) | |
| .attr("stroke", "#999") | |
| .attr("stroke-width", 1) | |
| .attr("stroke-opacity", 0.6); | |
| // Draw goal nodes | |
| const goalNodes = svg.selectAll("circle") | |
| .data(goals) | |
| .enter() | |
| .append("circle") | |
| .attr("cx", d => d.x) | |
| .attr("cy", d => d.y) | |
| .attr("r", 10) | |
| .attr("fill", d => { | |
| if (d.id <= 10) return "blue"; | |
| if (d.id <= 20) return "green"; | |
| return "orange"; | |
| }) | |
| .attr("class", "goal"); | |
| // Add labels to the goals | |
| const goalLabels = svg.selectAll("text") | |
| .data(goals) | |
| .enter() | |
| .append("text") | |
| .attr("x", d => d.x + 15) | |
| .attr("y", d => d.y) | |
| .text(d => d.name) | |
| .attr("font-size", "12px"); | |
| // Hover info box | |
| const hoverInfo = d3.select("#hoverInfo"); | |
| // Add hover effects on goal nodes | |
| goalNodes.on("mouseover", function(event, d) { | |
| d3.select(this).attr("r", 15); | |
| hoverInfo.style("display", "block") | |
| .style("left", (event.pageX + 10) + "px") | |
| .style("top", (event.pageY - 10) + "px") | |
| .html(`<strong>${d.name}</strong><br>${d.description}`); | |
| }).on("mouseout", function() { | |
| d3.select(this).attr("r", 10); | |
| hoverInfo.style("display", "none"); | |
| }); | |
| // Handle click event on goal nodes | |
| goalNodes.on("click", async function(event, d) { | |
| updateSelectedGoalInfo(d); | |
| try { | |
| const response = await fetch('generate_goals', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ input_var: d.name }) | |
| }); | |
| if (!response.ok) { | |
| throw new Error(`HTTP error! status: ${response.status}`); | |
| } | |
| const data = await response.json(); | |
| displayResponse(data.content); | |
| } catch (error) { | |
| console.error("There was an error fetching the response:", error); | |
| displayResponse("An error occurred while generating the response."); | |
| } | |
| }); | |
| // Function to update selected goal information | |
| function updateSelectedGoalInfo(goal) { | |
| const selectedGoalDiv = d3.select("#selectedGoal"); | |
| selectedGoalDiv.html(` | |
| <h3>${goal.name}</h3> | |
| <p>${goal.description}</p> | |
| `); | |
| } | |
| // Function to display the response from the server | |
| function displayResponse(content) { | |
| const responseBox = d3.select("#responseBox"); | |
| responseBox.html(` | |
| <h2>Response</h2> | |
| <p>${content}</p> | |
| `); | |
| } | |
| // Handle mouse move event to highlight the closest goal | |
| svg.on("mousemove", function(event) { | |
| const [x, y] = d3.pointer(event); | |
| const closest = findClosestGoal(x, y); | |
| highlightClosestGoal(closest); | |
| }); | |
| // Function to find the closest goal to the mouse pointer | |
| function findClosestGoal(x, y) { | |
| return goals.reduce((closest, goal) => { | |
| const distance = Math.sqrt(Math.pow(goal.x - x, 2) + Math.pow(goal.y - y, 2)); | |
| return distance < closest.distance ? { goal, distance } : closest; | |
| }, { goal: null, distance: Infinity }).goal; | |
| } | |
| // Function to highlight the closest goal | |
| function highlightClosestGoal(goal) { | |
| d3.select("#info").html(`Closest goal: ${goal.name}`); | |
| } | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| # Gradio interface | |
| iface = gr.Interface( | |
| fn=generate_goals, | |
| inputs=gr.Textbox(label="Goal Name"), | |
| outputs=gr.Textbox(label="Generated Goals"), | |
| title="Exam Data Analysis Goals Generator", | |
| description="Click on a goal in the visualization to generate related goals.", | |
| allow_flagging="never", | |
| layout="vertical", | |
| theme="default", | |
| css=html_content | |
| ) | |
| if __name__ == "__main__": | |
| iface.launch() |