Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import random | |
| import fastapi | |
| from fastapi import FastAPI | |
| # Create a FastAPI app | |
| app = FastAPI() | |
| # Route to serve a simple D3.js test page | |
| async def serve_test_page(): | |
| html_content = """ | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>D3.js Load Test</title> | |
| <script src="https://d3js.org/d3.v7.min.js"></script> | |
| <style> | |
| body { | |
| font-family: sans-serif; | |
| padding: 20px; | |
| background-color: #f5f5f5; | |
| } | |
| #status { | |
| margin-top: 20px; | |
| padding: 15px; | |
| border-radius: 5px; | |
| } | |
| .success { | |
| background-color: #d4edda; | |
| color: #155724; | |
| border: 1px solid #c3e6cb; | |
| } | |
| .error { | |
| background-color: #f8d7da; | |
| color: #721c24; | |
| border: 1px solid #f5c6cb; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>D3.js Load Test</h1> | |
| <div id="status">Checking if D3.js is loaded...</div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const statusDiv = document.getElementById('status'); | |
| try { | |
| // Check if d3 is defined | |
| if (typeof d3 !== 'undefined') { | |
| statusDiv.textContent = 'D3.js successfully loaded! (Version: ' + d3.version + ')'; | |
| statusDiv.className = 'success'; | |
| // Create a simple SVG to verify D3 functions work | |
| const svg = d3.select('body') | |
| .append('svg') | |
| .attr('width', 200) | |
| .attr('height', 100); | |
| svg.append('circle') | |
| .attr('cx', 50) | |
| .attr('cy', 50) | |
| .attr('r', 40) | |
| .style('fill', 'steelblue'); | |
| svg.append('text') | |
| .attr('x', 50) | |
| .attr('y', 50) | |
| .attr('text-anchor', 'middle') | |
| .attr('dominant-baseline', 'middle') | |
| .text('D3') | |
| .style('fill', 'white'); | |
| } else { | |
| statusDiv.textContent = 'Error: D3.js is not loaded'; | |
| statusDiv.className = 'error'; | |
| } | |
| } catch (error) { | |
| statusDiv.textContent = 'Error: ' + error.message; | |
| statusDiv.className = 'error'; | |
| console.error('D3 test error:', error); | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| return fastapi.responses.HTMLResponse(content=html_content) | |
| # Create a simple Gradio interface with an iframe | |
| def create_iframe(): | |
| # Add a random parameter to force reload | |
| random_param = random.randint(1, 10000) | |
| return f'<iframe src="/d3-test?t={random_param}" style="width:100%; height:300px; border:none;"></iframe>' | |
| # Create the Gradio blocks | |
| with gr.Blocks() as demo: | |
| gr.Markdown("# D3.js Load Test") | |
| iframe_output = gr.HTML(create_iframe()) | |
| # Refresh button | |
| def refresh(): | |
| return create_iframe() | |
| gr.Button("Refresh Test").click(fn=refresh, outputs=iframe_output) | |
| # Mount the Gradio app to the FastAPI app | |
| gr.mount_gradio_app(app, demo, path="/") | |
| # Start the server | |
| if __name__ == "__main__": | |
| import uvicorn | |
| uvicorn.run(app, host="0.0.0.0", port=7860) |