Spaces:
Running
Running
File size: 5,840 Bytes
9fd0d3c 3e2c114 a2201d6 3e2c114 53124ea a2201d6 0dea17b 3e2c114 9a770de 3e2c114 a2201d6 3e2c114 24013de 21446ed 3e2c114 33b52f1 a2201d6 3e2c114 a2201d6 3e2c114 a2201d6 6b720b0 3e2c114 21446ed 3e2c114 21446ed 24013de 3ab14b8 3e2c114 3ab14b8 3e2c114 |
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 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 |
import gradio as gr
def update_ui(code):
try:
# Directly return the code wrapped in a div for styling
return f"""
<div style="border: 1px solid #ccc; padding: 10px; height: 400px; width: 100%; overflow: auto;">
{code}
</div>
""", None
except Exception as e:
return "", str(e)
def interface():
with gr.Blocks() as demo:
gr.Markdown("# Learn Frontend UI")
with gr.Row():
code_input = gr.Code(label="Write your HTML/CSS/JS here", language="html")
with gr.Column():
ui_preview = gr.HTML(label="UI Preview")
error_output = gr.Textbox(label="Error", interactive=False)
# Instead of using _js, we'll directly handle the JavaScript with Python
code_input.change(
fn=update_ui,
inputs=code_input,
outputs=[ui_preview, error_output],
js="""
function(code) {
// Create a temporary div to parse the HTML/CSS/JS
const tempDiv = document.createElement('div');
tempDiv.innerHTML = code;
// Handle JavaScript by creating new script elements
const scripts = tempDiv.querySelectorAll('scriptDebug');
scripts.forEach(script => {
const newScript = document.createElement('script');
newScript.textContent = script.textContent;
document.body.appendChild(newScript);
script.remove(); // Remove original script to avoid double execution
});
// Wrap the content in a styled div for better presentation
return `
<div style="border: 1px solid #ccc; padding: 10px; height: 400px; overflow: auto;">
${tempDiv.innerHTML}
</div>
`;
}
"""
)
# Add example section
with gr.Accordion("HTML/CSS/JS Code Examples", open=False):
with gr.Column():
example_buttons = []
example_codes = [
('<h1>Hello World</h1>', "Basic Heading"),
('<p style="color: red;">This is a paragraph.</p>', "Styled Paragraph"),
('<button onclick="alert(\'Button clicked!\')">Click me</button>', "Interactive Button"),
("""
<style>
.box {
width: 100px;
height: 100px;
background-color: blue;
}
</style>
<div class="box"></div>
""", "CSS Box"),
("""
<style>
.container {
display: flex;
justify-content: space-between;
}
</style>
<div class="container">
<div style="background-color: red; width: 50px; height: 50px;"></div>
<div style="background-color: green; width: 50px; height: 50px;"></div>
</div>
""", "Flexbox Layout"),
("""
<style>
body { margin: 0; padding: 0; }
#gameCanvas { border: 1px solid black; }
</style>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script>
let canvas = document.getElementById('gameCanvas');
let ctx = canvas.getContext('2d');
let snake = [{x: 10, y: 10}];
let food = {x: 15, y: 15};
let gameLoop;
function init() {
gameLoop = setInterval(game, 100);
}
function game() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
snake.unshift({x: snake[0].x, y: snake[0].y});
snake[0].x += 1; // Simple movement for demonstration
if(snake[0].x > 39) snake[0].x = 0; // Wrap around
ctx.fillStyle = "green";
snake.forEach(part => {
ctx.fillRect(part.x * 10, part.y * 10, 10, 10);
});
ctx.fillStyle = "red";
ctx.fillRect(food.x * 10, food.y * 10, 10, 10);
if(snake[0].x == food.x && snake[0].y == food.y) {
food.x = Math.floor(Math.random() * 40);
food.y = Math.floor(Math.random() * 40);
} else {
snake.pop();
}
}
// Start the game
init();
</script>
""", "Snake Game"),
]
for code, label in example_codes:
button = gr.Button(label)
example_buttons.append(button)
button.click(fn=lambda x=code: x, outputs=code_input)
#button.click(fn=update_ui, inputs=code, outputs=code_input)
return demo
if __name__ == "__main__":
demo = interface()
demo.launch() |