Update app.py

app.py

@@ -285,7 +285,7 @@
 
 # if __name__ == "__main__":
 #     iface.launch()
-import gradio as gr
+from flask import Flask, request, jsonify, render_template_string
 import os
 from mistralai.client import MistralClient
 from mistralai.models.chat_completion import ChatMessage
@@ -298,6 +298,8 @@ if not api_key:
 model = "mistral-tiny"
 client = MistralClient(api_key=api_key)
 
+app = Flask(__name__)
+
 def generate_goals(input_var):
     messages = [
         ChatMessage(role="user", content=f"Generate 5 specific, industry relevant goals for {input_var} using Python and Pandas in exam data analysis. Each goal should include a brief name and a one-sentence description of the task or skill.")
@@ -328,11 +330,9 @@ html_content = """
     <h1>Exam Data Analysis Goals Generator</h1>
     <div id="visualization"></div>
     <div id="generatedGoals"></div>
-
     <script>
-    const width = 1200;
-    const height = 800;
-    const goals = [
+     // Define the goals and connections data
+        const goals = [
             { id: 1, x: 100, y: 400, name: "Automate Data Import", description: "Develop scripts to automate exam data extraction from various sources (CSV, Excel, databases) using Pandas read_* functions." },
             { id: 2, x: 200, y: 300, name: "Data Cleaning", description: "Implement robust data cleaning processes to handle missing values, outliers, and inconsistencies in exam data using Pandas methods like dropna(), fillna(), and apply()." },
             { id: 3, x: 300, y: 200, name: "Data Transformation", description: "Utilize Pandas for complex data transformations such as pivoting exam results, melting question-wise scores, and creating derived features for analysis." },
@@ -407,102 +407,119 @@ html_content = """
             { source: 24, target: 17 },
             { source: 26, target: 29 }
         ];
+        // 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");
+        });
 
 
-    const svg = d3.select("#visualization")
-        .append("svg")
-        .attr("width", width)
-        .attr("height", height);
-
-    const simulation = d3.forceSimulation(goals)
-        .force("link", d3.forceLink(connections).id(d => d.id))
-        .force("charge", d3.forceManyBody().strength(-400))
-        .force("center", d3.forceCenter(width / 2, height / 2));
-
-    const link = svg.append("g")
-        .selectAll("line")
-        .data(connections)
-        .enter().append("line")
-        .attr("stroke", "#999")
-        .attr("stroke-opacity", 0.6);
-
-    const node = svg.append("g")
-        .selectAll("circle")
-        .data(goals)
-        .enter().append("circle")
-        .attr("r", 10)
-        .attr("fill", d => d.color)
-        .call(d3.drag()
-            .on("start", dragstarted)
-            .on("drag", dragged)
-            .on("end", dragended));
-
-    const text = svg.append("g")
-        .selectAll("text")
-        .data(goals)
-        .enter().append("text")
-        .text(d => d.name)
-        .attr("font-size", "12px")
-        .attr("dx", 12)
-        .attr("dy", 4);
-
     node.on("click", async function(event, d) {
-        const response = await fetch('generate_goals', {
+        const response = await fetch('/generate_goals', {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify({ input_var: d.name })
         });
         const data = await response.json();
-        document.getElementById("generatedGoals").innerHTML = `<h2>Generated Goals for ${d.name}</h2><pre>${data}</pre>`;
+        document.getElementById("generatedGoals").innerHTML = `<h2>Generated Goals for ${d.name}</h2><pre>${data.goals}</pre>`;
     });
 
-    simulation.on("tick", () => {
-        link
-            .attr("x1", d => d.source.x)
-            .attr("y1", d => d.source.y)
-            .attr("x2", d => d.target.x)
-            .attr("y2", d => d.target.y);
-
-        node
-            .attr("cx", d => d.x)
-            .attr("cy", d => d.y);
-
-        text
-            .attr("x", d => d.x)
-            .attr("y", d => d.y);
-    });
-
-    function dragstarted(event) {
-        if (!event.active) simulation.alphaTarget(0.3).restart();
-        event.subject.fx = event.subject.x;
-        event.subject.fy = event.subject.y;
-    }
-
-    function dragged(event) {
-        event.subject.fx = event.x;
-        event.subject.fy = event.y;
-    }
+    // 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}`);
+        }
 
-    function dragended(event) {
-        if (!event.active) simulation.alphaTarget(0);
-        event.subject.fx = null;
-        event.subject.fy = null;
-    }
     </script>
 </body>
 </html>
 """
 
-# Gradio interface
-iface = gr.Interface(
-    fn=generate_goals,
-    inputs=gr.Textbox(visible=False),
-    outputs=gr.Textbox(visible=False),
-    title="Exam Data Analysis Goals Generator",
-    description="Click on a goal in the visualization to generate related goals.",
-    allow_flagging="never",
-    css=html_content
-)
+@app.route('/')
+def index():
+    return render_template_string(html_content)
+
+@app.route('/generate_goals', methods=['POST'])
+def generate_goals_api():
+    input_var = request.json['input_var']
+    goals = generate_goals(input_var)
+    return jsonify({'goals': goals})
 
 if __name__ == "__main__":
-    iface.launch()
+    app.run(debug=True)