Update app.py

app.py

@@ -4,18 +4,19 @@ import gradio as gr
 def process_data(name, age):
     return f"Hello {name}! You are {age} years old."
 
-# Frontend script for JavaScript interaction
+# Custom JavaScript for the frontend
 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  // Must match the backend function index
+            fn_index: 0
         })
     })
     .then(response => response.json())
@@ -30,10 +31,10 @@ function submitForm() {
 </script>
 """
 
-# HTML form for the frontend
+# HTML Form for Frontend
 custom_html = """
 <div>
-    <h2>Simple Form</h2>
+    <h2>Interactive Form</h2>
     <label for="name-field">Name:</label>
     <input type="text" id="name-field" placeholder="Enter your name" />
     <br /><br />
@@ -45,7 +46,7 @@ custom_html = """
 </div>
 """
 
-# Gradio interface
+# Gradio Interface
 with gr.Blocks() as app:
     with gr.Row():
         gr.HTML("<h1>Interactive Form Example</h1>")
@@ -54,12 +55,13 @@ with gr.Blocks() as app:
     with gr.Row():
         gr.HTML(custom_script)
 
-    # Gradio Interface for the backend function
-    interface = gr.Interface(
-        fn=process_data,
-        inputs=["text", "number"],
-        outputs="text"
-    )
+# Separate backend interface to map the function
+interface = gr.Interface(
+    fn=process_data,
+    inputs=["text", "number"],
+    outputs="text"
+)
 
-# Launch the app
-interface.launch()
+# Launch the backend and frontend together
+app.queue()
+app.launch()