Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import os | |
| # Create a route to serve a simple test page | |
| app = gr.routes.App() | |
| 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 gr.routes.Response(content=html_content, media_type="text/html") | |
| # Create a simple Gradio interface | |
| with gr.Blocks() as demo: | |
| gr.Markdown("# D3.js Load Test") | |
| # Create an iframe to the test page | |
| gr.HTML('<iframe src="/d3-test" style="width:100%; height:300px; border:none;"></iframe>') | |
| # Add a refresh button | |
| def refresh(): | |
| timestamp = os.urandom(4).hex() | |
| return f'<iframe src="/d3-test?t={timestamp}" style="width:100%; height:300px; border:none;"></iframe>' | |
| gr.Button("Refresh Test").click(fn=refresh, outputs=gr.HTML()) | |
| # Launch the app | |
| if __name__ == "__main__": | |
| demo.launch(app=app) |