Spaces:
Build error
Build error
File size: 1,945 Bytes
a122c2e 56a8c4f 8758268 56a8c4f a122c2e 8758268 56a8c4f a122c2e 56a8c4f 1f59e3b 56a8c4f a122c2e 56a8c4f 8758268 a122c2e 8758268 a122c2e 56a8c4f 8758268 a122c2e 8758268 a122c2e 8758268 c8164d8 a122c2e 8758268 | 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 | import gradio as gr
# Backend function
def process_data(name, age):
if not name or not age:
return "Please provide both name and age."
return f"Hello {name}! You are {age} years old."
# HTML for the form
custom_html = """
<div>
<h2>Simple Form</h2>
<label for="name-field">Name:</label>
<input type="text" id="name-field" placeholder="Enter your name" />
<br /><br />
<label for="age-field">Age:</label>
<input type="number" id="age-field" placeholder="Enter your age" />
<br /><br />
<button onclick="submitForm()">Submit</button>
<p id="result" style="margin-top: 20px; font-size: 1.2em; color: green;"></p>
</div>
"""
# JavaScript for handling submission
custom_script = """
<script>
function submitForm() {
const name = document.getElementById('name-field').value;
const age = document.getElementById('age-field').value;
fetch('/api/predict', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
data: [name, age],
fn_index: 0 // Matches the backend function index
})
})
.then(response => response.json())
.then(data => {
document.getElementById('result').innerText = data.data[0]; // Show result
})
.catch(error => {
console.error('Error:', error);
document.getElementById('result').innerText = 'Failed to process the data.';
});
}
</script>
"""
# Gradio Interface for the backend
backend_interface = gr.Interface(
fn=process_data,
inputs=["text", "text"],
outputs="text"
)
# Main Gradio app
with gr.Blocks() as app:
with gr.Row():
gr.HTML("<h1>Interactive Form Example</h1>")
with gr.Row():
gr.HTML(custom_html)
with gr.Row():
gr.HTML(custom_script)
# Launching app and backend interface
app.queue() # Allow async queue
backend_interface.launch() # Ensure backend is running
|