Spaces:

eaglelandsonce
/

CodestralHackathonLabab

Sleeping

App Files Files Community

eaglelandsonce commited on Jul 17

Commit

48c1006

•

1 Parent(s): e03a28f

Rename pages/Base6Example.py to pages/5_Base6Example.py

Browse files

Files changed (2) hide show

pages/5_Base6Example.py +107 -0
pages/Base6Example.py +0 -59

pages/5_Base6Example.py ADDED Viewed

	@@ -0,0 +1,107 @@

+import streamlit as st
+import streamlit.components.v1 as components
+# 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>2D Canvas Base 6 with Hidden State in Red</title>
+    <style>
+        body { font-family: Arial, sans-serif; }
+        #coordinate-display {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background-color: rgba(255, 255, 255, 0.7);
+            padding: 5px;
+            border-radius: 5px;
+        }
+    </style>
+</head>
+<body>
+    <h1>2D Interactive Graph Base 6 With Hidden State in Red</h1>
+    <div style="position: relative;">
+        <canvas id="graphCanvas" width="500" height="400" style="border: 1px solid #000;"></canvas>
+        <div id="coordinate-display"></div>
+    </div>
+    <script>
+        const canvas = document.getElementById('graphCanvas');
+        const ctx = canvas.getContext('2d');
+        const coordinateDisplay = document.getElementById('coordinate-display');
+        function shouldHighlightCoordinate(num) {
+            return ['6', '7', '8', '9'].some(digit => num.toString().includes(digit));
+        }
+        function drawGraph() {
+            // Clear canvas
+            ctx.fillStyle = '#f0f0f0';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+            // Draw grid
+            ctx.strokeStyle = '#999';
+            ctx.lineWidth = 0.5;
+            for (let i = 0; i <= 55; i += 5) {
+                let x = i / 55 * canvas.width;
+                let y = canvas.height - (i / 55 * canvas.height);
+                ctx.beginPath();
+                ctx.moveTo(x, 0);
+                ctx.lineTo(x, canvas.height);
+                ctx.stroke();
+                ctx.beginPath();
+                ctx.moveTo(0, y);
+                ctx.lineTo(canvas.width, y);
+                ctx.stroke();
+                // Draw labels
+                ctx.fillStyle = 'black';
+                ctx.font = '12px Arial';
+                ctx.fillText(i.toString(), x, canvas.height - 5);
+                ctx.fillText(i.toString(), 5, y);
+            }
+            // Draw highlighted areas
+            ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
+            for (let i = 0; i <= 55; i++) {
+                if (shouldHighlightCoordinate(i)) {
+                    ctx.fillRect(i / 55 * canvas.width, 0, canvas.width / 55, canvas.height);
+                    ctx.fillRect(0, canvas.height - ((i + 1) / 55 * canvas.height), canvas.width, canvas.height / 55);
+                }
+            }
+        }
+        function updateCoordinateDisplay(event) {
+            const rect = canvas.getBoundingClientRect();
+            const x = Math.min(55, Math.round((event.clientX - rect.left) / canvas.width * 55));
+            const y = Math.round((1 - (event.clientY - rect.top) / canvas.height) * 55);
+            const combined = x * 100 + y;
+            coordinateDisplay.textContent = `Coordinate: ${combined}`;
+            coordinateDisplay.style.color = shouldHighlightCoordinate(combined) ? 'red' : 'black';
+        }
+        canvas.addEventListener('mousemove', updateCoordinateDisplay);
+        drawGraph();
+    </script>
+</body>
+</html>
+"""
+# Streamlit app
+def main():
+    st.set_page_config(page_title="Interactive 2D Graph", layout="wide")
+    st.title("2D Interactive Graph Base 6 With Hidden State in Red")
+    # Embed the HTML content
+    components.html(html_content, height=600)
+if __name__ == "__main__":
+    main()

pages/Base6Example.py DELETED Viewed

@@ -1,59 +0,0 @@
-import streamlit as st
-import pandas as pd
-import plotly.graph_objects as go
-def should_highlight_coordinate(num):
-    return any(digit in str(num) for digit in ['6', '7', '8', '9'])
-def create_interactive_graph():
-    # Create a DataFrame for the grid
-    df = pd.DataFrame([(x, y) for x in range(56) for y in range(56)], columns=['x', 'y'])
-    df['combined'] = df['x'] * 100 + df['y']
-    df['highlight'] = df['combined'].apply(should_highlight_coordinate)
-    # Create the Plotly figure
-    fig = go.Figure()
-    # Add highlighted areas
-    highlighted_points = df[df['highlight']]
-    fig.add_trace(go.Scatter(
-        x=highlighted_points['x'],
-        y=highlighted_points['y'],
-        mode='markers',
-        marker=dict(color='rgba(0, 0, 0, 0.2)', size=5),
-        showlegend=False
-    ))
-    # Add grid lines
-    for i in range(0, 56, 5):
-        fig.add_shape(type="line", x0=i, y0=0, x1=i, y1=55, line=dict(color="gray", width=0.5))
-        fig.add_shape(type="line", x0=0, y0=i, x1=55, y1=i, line=dict(color="gray", width=0.5))
-    # Customize the layout
-    fig.update_layout(
-        xaxis=dict(range=[0, 55], dtick=5, title="X"),
-        yaxis=dict(range=[0, 55], dtick=5, title="Y"),
-        width=700,
-        height=600,
-        title="2D Interactive Graph Base 6 With Hidden State in Red"
-    )
-    return fig
-def main():
-    st.set_page_config(page_title="Interactive 2D Graph", layout="wide")
-    st.title("2D Interactive Graph Base 6 With Hidden State in Red")
-    fig = create_interactive_graph()
-    # Display the graph
-    st.plotly_chart(fig, use_container_width=True)
-    # Display coordinate information
-    st.markdown("### Coordinate Information")
-    st.markdown("Hover over the graph to see coordinate information.")
-    st.markdown("Coordinates containing 6, 7, 8, or 9 are highlighted.")
-if __name__ == "__main__":
-    main()