Align Gradio client predictor parameters and connection imports with official docs

app.py

@@ -12,7 +12,7 @@ app = Server()
 # Create static directory if it doesn't exist
 os.makedirs("static", exist_ok=True)
 
-@app.api()
+@app.api(name="chat_with_step")
 def chat_with_step(
     messages_json: str,
     api_key: str,

static/app.js

@@ -1,5 +1,4 @@
-// Import Hugging Face's Gradio Client
-import { Client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
+import { client } from "https://cdn.jsdelivr.net/npm/@gradio/client/dist/index.min.js";
 
 // Global Application State Management
 const STATE = {
@@ -78,9 +77,9 @@ async function initializeApp() {
     }
 
     // 2. Connect Gradio Client in background (Non-blocking)
-    Client.connect(window.location.origin)
-        .then(client => {
-            STATE.gradioClient = client;
+    client(window.location.origin)
+        .then(app => {
+            STATE.gradioClient = app;
             console.log("Successfully connected to Gradio.Server backend.");
         })
         .catch(e => {
@@ -417,17 +416,18 @@ async function triggerPromptSubmission(inputElement) {
         const responseId = appendAssistantPlaceholderBubble();
         const startTime = Date.now();
 
-        // Call our gradio.Server api endpoint
-        const result = await STATE.gradioClient.predict("/chat_with_step", [
-            JSON.stringify(STATE.conversationHistory),
-            STATE.apiKey,
-            STATE.reasoningEffort,
-            STATE.maxTokens,
-            STATE.temperature
-        ]);
+        // Call our gradio.Server api endpoint using named object parameters matching Python arguments
+        const result = await STATE.gradioClient.predict("/chat_with_step", {
+            messages_json: JSON.stringify(STATE.conversationHistory),
+            api_key: STATE.apiKey,
+            reasoning_effort: STATE.reasoningEffort,
+            max_tokens: STATE.maxTokens,
+            temperature: STATE.temperature
+        });
 
         const duration = ((Date.now() - startTime) / 1000).toFixed(1);
-        const data = JSON.parse(result.data[0]);
+        const rawData = Array.isArray(result.data) ? result.data[0] : result.data;
+        const data = JSON.parse(rawData);
 
         if (data.status === "error") {
             updateAssistantBubble(responseId, `⚠️ **API Error:** ${data.message}`, "", duration);