.

Dockerfile

@@ -15,6 +15,6 @@ RUN pip3 install -r requirements.txt
 
 EXPOSE 8501
 
-HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
+HEALTHCHECK CMD curl --fail http://localhost:8501/health
 
-ENTRYPOINT ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]
+ENTRYPOINT ["python", "src/app.py"]

README.md

@@ -1,19 +1,27 @@
----
-title: Docker
-emoji: 🚀
-colorFrom: red
-colorTo: red
-sdk: docker
-app_port: 8501
-tags:
-- streamlit
-pinned: false
-short_description: Streamlit template space
----
-
-# Welcome to Streamlit!
-
-Edit `/src/streamlit_app.py` to customize this app to your heart's desire. :heart:
-
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
+# Flask Spiral Visualization
+
+This is a Flask application that visualizes spiral patterns using Altair charts.
+
+## Features
+
+- Interactive sliders to control the number of points and turns in the spiral
+- Real-time visualization updates
+- Responsive web design
+
+## Usage
+
+1. Adjust the sliders to change the spiral parameters
+2. Click "Update Chart" to regenerate the visualization
+
+## Endpoints
+
+- `/` - Main application page
+- `/generate_chart` - API endpoint for generating charts
+- `/health` - Health check endpoint
+
+## Dependencies
+
+- Flask
+- Altair
+- Pandas
+- Vega-Lite (frontend)

requirements.txt

@@ -1,3 +1,3 @@
 altair
 pandas
-streamlit
+flask

src/app.py

@@ -0,0 +1,52 @@
+from flask import Flask, render_template, request, jsonify
+import altair as alt
+import numpy as np
+import pandas as pd
+import json
+
+app = Flask(__name__)
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/health')
+def health():
+    return {'status': 'healthy'}
+
+@app.route('/generate_chart', methods=['POST'])
+def generate_chart():
+    data = request.get_json()
+    num_points = data.get('num_points', 1100)
+    num_turns = data.get('num_turns', 31)
+    
+    # Generate spiral data
+    indices = np.linspace(0, 1, num_points)
+    theta = 2 * np.pi * num_turns * indices
+    radius = indices
+
+    x = radius * np.cos(theta)
+    y = radius * np.sin(theta)
+
+    df = pd.DataFrame({
+        "x": x,
+        "y": y,
+        "idx": indices,
+        "rand": np.random.randn(num_points),
+    })
+
+    # Create Altair chart
+    chart = alt.Chart(df, height=700, width=700).mark_point(filled=True).encode(
+        x=alt.X("x", axis=None),
+        y=alt.Y("y", axis=None),
+        color=alt.Color("idx", legend=None, scale=alt.Scale()),
+        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
+    )
+    
+    # Convert chart to JSON
+    chart_json = chart.to_json()
+    
+    return jsonify({'chart': chart_json})
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=8501, debug=True)

src/streamlit_app.py

@@ -1,40 +0,0 @@
-import altair as alt
-import numpy as np
-import pandas as pd
-import streamlit as st
-
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))

src/templates/index.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Spiral Visualization with Flask</title>
+    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+        }
+        h1 {
+            color: #333;
+            text-align: center;
+        }
+        .controls {
+            margin: 20px 0;
+            padding: 20px;
+            background-color: #f8f9fa;
+            border-radius: 5px;
+        }
+        .slider-container {
+            margin: 15px 0;
+        }
+        label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        input[type="range"] {
+            width: 100%;
+        }
+        .value-display {
+            display: inline-block;
+            width: 50px;
+            text-align: right;
+        }
+        #vis {
+            width: 700px;
+            height: 700px;
+            margin: 20px auto;
+        }
+        button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+        button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome to Flask Spiral Visualization!</h1>
+        
+        <div class="controls">
+            <div class="slider-container">
+                <label for="points">Number of points in spiral: <span id="points-value" class="value-display">1100</span></label>
+                <input type="range" id="points" name="points" min="1" max="10000" value="1100">
+            </div>
+            
+            <div class="slider-container">
+                <label for="turns">Number of turns in spiral: <span id="turns-value" class="value-display">31</span></label>
+                <input type="range" id="turns" name="turns" min="1" max="300" value="31">
+            </div>
+            
+            <button onclick="updateChart()">Update Chart</button>
+        </div>
+        
+        <div id="vis"></div>
+    </div>
+
+    <script>
+        // Initialize slider value displays
+        document.getElementById('points').addEventListener('input', function() {
+            document.getElementById('points-value').textContent = this.value;
+        });
+        
+        document.getElementById('turns').addEventListener('input', function() {
+            document.getElementById('turns-value').textContent = this.value;
+        });
+        
+        // Function to update the chart
+        function updateChart() {
+            const numPoints = document.getElementById('points').value;
+            const numTurns = document.getElementById('turns').value;
+            
+            fetch('/generate_chart', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    num_points: parseInt(numPoints),
+                    num_turns: parseInt(numTurns)
+                })
+            })
+            .then(response => response.json())
+            .then(data => {
+                vegaEmbed('#vis', JSON.parse(data.chart));
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+        }
+        
+        // Load initial chart
+        document.addEventListener('DOMContentLoaded', function() {
+            updateChart();
+        });
+    </script>
+</body>
+</html>