Spaces:

harris1
/

Codestralhack

Paused

App Files Files Community

harris1 commited on Jul 17, 2024

Commit

408ec72

verified ·

1 Parent(s): e4daf67

Update app.py

Browse files

Files changed (1) hide show

app.py +76 -106

app.py CHANGED Viewed

@@ -285,11 +285,13 @@
 # if __name__ == "__main__":
 #     iface.launch()
-import gradio as gr
 import os
 from mistralai.client import MistralClient
 from mistralai.models.chat_completion import ChatMessage
 # Mistral AI setup
 api_key = os.getenv("MISTRAL_API_KEY")
 if not api_key:
@@ -308,8 +310,6 @@ def generate_goals(input_var):
     except Exception as e:
         return f"An error occurred: {str(e)}"
-# HTML content with interactive visualization
 html_content = """
 <!DOCTYPE html>
 <html lang="en">
@@ -328,8 +328,9 @@ html_content = """
     <div id="visualization"></div>
     <div id="generatedGoals"></div>
     <script>
-     // 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." },
@@ -404,61 +405,38 @@ 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");
-        });
     node.on("click", async function(event, d) {
         const response = await fetch('/generate_goals', {
             method: 'POST',
@@ -468,55 +446,47 @@ html_content = """
         const data = await response.json();
         document.getElementById("generatedGoals").innerHTML = `<h2>Generated Goals for ${d.name}</h2><pre>${data.goals}</pre>`;
     });
-    // 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="text",
-    outputs="text",
-    title="Exam Data Analysis Goals Generator",
-    description="Click on a goal in the visualization to generate related goals.",
-    article=html_content
-)
-# Launch the Gradio app
-iface.launch()

 # if __name__ == "__main__":
 #     iface.launch()
+from flask import Flask, request, jsonify, render_template_string
 import os
 from mistralai.client import MistralClient
 from mistralai.models.chat_completion import ChatMessage
+app = Flask(__name__)
 # Mistral AI setup
 api_key = os.getenv("MISTRAL_API_KEY")
 if not api_key:
     except Exception as e:
         return f"An error occurred: {str(e)}"
 html_content = """
 <!DOCTYPE html>
 <html lang="en">
     <div id="visualization"></div>
     <div id="generatedGoals"></div>
     <script>
+    const width = 1200;
+    const height = 800;
+    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." },
             { source: 24, target: 17 },
             { source: 26, target: 29 }
         ];
+    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', {
             method: 'POST',
         const data = await response.json();
         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 dragended(event) {
+        if (!event.active) simulation.alphaTarget(0);
+        event.subject.fx = null;
+        event.subject.fy = null;
+    }
     </script>
 </body>
 </html>
 """
+@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__":
+    app.run(host='0.0.0.0', port=7860)