Spaces:
Runtime error
Runtime error
File size: 3,628 Bytes
32c2587 ddd101e f039650 e8a8241 ddd101e e8a8241 ddd101e e8a8241 ddd101e e8a8241 ddd101e e8a8241 ddd101e e8a8241 ddd101e e8a8241 bcd0e3c ddd101e e8a8241 766b697 e8a8241 ddd101e e8a8241 ddd101e e8a8241 ddd101e bcd0e3c ddd101e f8842a2 bcd0e3c e8a8241 d7ed39d e8a8241 a2875f8 e8a8241 f8842a2 ddd101e 61186ad ddd101e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 |
import gradio as gr
import os
# Create a route to serve a simple test page
app = gr.routes.App()
@app.get("/d3-test")
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) |