import gradio as gr
from flask import Flask, send_from_directory
import threading
import os

# Create a Flask app to serve static files
flask_app = Flask(__name__)

# Serve the index.html file
@flask_app.route("/")
def serve_index():
    return send_from_directory(".", "index.html")

# Serve static files (CSS, JS)
@flask_app.route("/<path:path>")
def serve_static(path):
    return send_from_directory(".", path)

# Run Flask in a separate thread
def run_flask():
    flask_app.run(port=5000)

flask_thread = threading.Thread(target=run_flask)
flask_thread.daemon = True
flask_thread.start()

# Gradio interface to embed the game
def serve_game():
    game_url = "http://localhost:5000"  # Flask serves the game on port 5000
    return f'<iframe src="{game_url}" width="800" height="600"></iframe>'

iface = gr.Interface(
    fn=serve_game,
    inputs=None,
    outputs=gr.HTML(),
    live=True,
    title="Space Invaders Game",
    description="Play Space Invaders in your browser!"
)

iface.launch(server_name="0.0.0.0", server_port=7860)