vehicle_customization_ui.py :"from flask import Flask, jsonify
import streamlit as st
st.set_page_config(layout="wide")
import streamlit.components.v1 as components
import os
import threading
from http.server import SimpleHTTPRequestHandler, HTTPServer
import requests
import time
import asyncio
import sys

sys.path.append(os.path.dirname(os.path.dirname(os.path.abspath(__file__))))

# Path to the frontend folder
frontend_path = os.path.join(os.path.dirname(__file__), 'frontend')
test_folder = os.path.join(os.path.dirname(os.path.dirname(os.path.abspath(__file__))), 'tests')


from core.vehicle_customization import AutoFlowGenerator  # Import the AutoFlowGenerator class


def read_html_file():
    html_file_path = os.path.join(frontend_path, 'index.html')
    with open(html_file_path, 'r') as html_file:
        return html_file.read()

class StaticServerHandler(SimpleHTTPRequestHandler):
    def translate_path(self, path):
        # Serve files from the frontend directory
        return os.path.join(frontend_path, path.lstrip('/'))

def start_static_server():
    server = HTTPServer(('localhost', 8502), StaticServerHandler)
    server.serve_forever()

def initialize_servers():
    global selectedIDs
    selectedIDs = []

    # Start the static file server in a separate thread
    static_thread = threading.Thread(target=start_static_server)
    static_thread.daemon = True
    static_thread.start()

def generate_flow(roadnet_file, starting_point, traffic_level):
    # Save the uploaded roadnet file
    roadnet_path = os.path.join(test_folder, 'roadnet.json')
    with open(roadnet_path, 'wb') as f:
        f.write(roadnet_file.getbuffer())

    # Initialize the AutoFlowGenerator
    auto_generator = AutoFlowGenerator(
        roadnet_path=roadnet_path,
        traffic_level=traffic_level,
        starting_point=starting_point,
        vehicle_distribution={'car': 1, 'truck': 0},
        interval=5  # Example interval
    )

    # Generate and save the flow file
    output_flow_path = os.path.join(test_folder, 'flow.json')
    auto_generator.generate_flow_file(output_flow_path)
    st.success(f"Flow file generated at: {output_flow_path}")

def main():

    st.title("CityFlow Vehicle Customization")

    # File uploader for roadnet.json
    roadnet_file = st.file_uploader("Upload Roadnet File", type=["json"])

    # Read the HTML file
    html_content = read_html_file()

    # Modify the HTML content to reference the static files correctly
    html_content = html_content.replace('href="style.css"', 'href="http://localhost:8502/style.css"')
    html_content = html_content.replace('href="spinner.css"', 'href="http://localhost:8502/spinner.css"')
    html_content = html_content.replace('src="Point.js"', 'src="http://localhost:8502/Point.js"')
    html_content = html_content.replace('src="script.js"', 'src="http://localhost:8502/script.js"')

    # Initialize servers
    initialize_servers()

    # Wait for the Flask server to start
    #time.sleep(2)

    # Embed the HTML content in the Streamlit app
    components.html(html_content, height=800-300, width=1280)

    # Input for starting point
    starting_point = st.text_input("Starting Point")

    # Select box for traffic intensity level
    traffic_level = st.selectbox("Traffic Intensity Level", ["small", "medium", "high"])

    if st.button("Generate Flow"):
        if roadnet_file is not None and starting_point and traffic_level:
            generate_flow(roadnet_file, starting_point, traffic_level)
        else:
            st.error("Please provide all inputs.")

    # Run the asynchronous function
    #asyncio.run(fetch_selected_ids())

if __name__ == "__main__":
    main()"


folder directory: >ui > py file + frontend(folder); in the folder are the html and css and js component. I cant interact with anything or it is not displaying the visual or not updating it correctly but its just stuck and i can interact with the element its just not interacting back to me or it is but the pages are not changing