Spaces:
Runtime error
Runtime error
File size: 3,862 Bytes
32c2587 dcf465d f039650 dcf465d ddd101e dcf465d e8a8241 dcf465d e8a8241 ddd101e e8a8241 ddd101e e8a8241 ddd101e e8a8241 ddd101e e8a8241 ddd101e e8a8241 bcd0e3c ddd101e e8a8241 766b697 e8a8241 dcf465d e8a8241 ddd101e e8a8241 ddd101e e8a8241 dcf465d e8a8241 ddd101e bcd0e3c ddd101e dcf465d f8842a2 dcf465d e8a8241 dcf465d e8a8241 dcf465d e8a8241 dcf465d a2875f8 dcf465d f8842a2 dcf465d 61186ad dcf465d |
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 106 107 108 109 110 111 112 113 114 115 |
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
@app.get("/d3-test")
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) |