Spaces:

harris1
/

Codestralhack

Paused

App Files Files Community

harris1 commited on Jul 17, 2024

Commit

a8335ab

verified ·

1 Parent(s): 17f5828

Create app.py

Browse files

Files changed (1) hide show

app.py +218 -0

app.py ADDED Viewed

	@@ -0,0 +1,218 @@

+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()