Uploaded

app.py

@@ -4,7 +4,7 @@ import gspread
 import google.generativeai as genai
 from flask import Flask, request, jsonify, render_template_string
 from oauth2client.service_account import ServiceAccountCredentials
-from vapi_python import Vapi
+from vapi import Vapi
 from datetime import datetime
 
 # --- App Initialization ---
@@ -12,7 +12,6 @@ app = Flask(__name__)
 
 # --- Configuration Loading ---
 def load_config():
-    """Loads configuration from a single Hugging Face secret (JSON)."""
     config_json_str = os.getenv("APP_CONFIG_JSON")
     if not config_json_str:
         raise ValueError("FATAL: The 'APP_CONFIG_JSON' secret is not set in your Space settings!")
@@ -30,159 +29,59 @@ HTML_TEMPLATE = """
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
-        body {
-            font-family: 'Inter', sans-serif;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-            margin: 0;
-            background-color: #f3f4f6;
-            color: #1f2937;
-        }
-        .container {
-            width: 100%;
-            max-width: 450px;
-            padding: 2rem;
-            background-color: white;
-            border-radius: 12px;
-            box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
-        }
-        .header {
-            text-align: center;
-            margin-bottom: 2rem;
-        }
-        .header h1 {
-            font-size: 2rem;
-            font-weight: 700;
-            margin: 0;
-        }
-        .header p {
-            margin-top: 0.5rem;
-            color: #6b7280;
-        }
-        .form-group {
-            margin-bottom: 1.5rem;
-        }
-        .form-group label {
-            display: block;
-            margin-bottom: 0.5rem;
-            font-weight: 500;
-        }
-        .form-group input, .form-group textarea {
-            width: 100%;
-            padding: 0.75rem;
-            border: 1px solid #d1d5db;
-            border-radius: 8px;
-            box-sizing: border-box;
-            font-size: 1rem;
-            transition: border-color 0.2s, box-shadow 0.2s;
-        }
-        .form-group input:focus, .form-group textarea:focus {
-            outline: none;
-            border-color: #3b82f6;
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
-        }
-        .deploy-button {
-            width: 100%;
-            padding: 0.8rem;
-            border: none;
-            border-radius: 8px;
-            background-color: #ef4444;
-            color: white;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: background-color 0.2s;
-        }
-        .deploy-button:hover {
-            background-color: #dc2626;
-        }
-        .deploy-button:disabled {
-            background-color: #fca5a5;
-            cursor: not-allowed;
-        }
-        .status {
-            margin-top: 1.5rem;
-            padding: 0.75rem;
-            border-radius: 8px;
-            text-align: center;
-            font-weight: 500;
-            display: none; /* Hidden by default */
-        }
-        .status.success {
-            background-color: #d1fae5;
-            color: #065f46;
-            display: block;
-        }
-        .status.error {
-            background-color: #fee2e2;
-            color: #991b1b;
-            display: block;
-        }
-        .status.loading {
-            background-color: #e0e7ff;
-            color: #3730a3;
-            display: block;
-        }
+        body { font-family: 'Inter', sans-serif; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f3f4f6; color: #1f2937; }
+        .container { width: 100%; max-width: 450px; padding: 2rem; background-color: white; border-radius: 12px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05); }
+        .header { text-align: center; margin-bottom: 2rem; }
+        .header h1 { font-size: 2rem; font-weight: 700; margin: 0; }
+        .header p { margin-top: 0.5rem; color: #6b7280; }
+        .form-group { margin-bottom: 1.5rem; }
+        .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
+        .form-group input, .form-group textarea { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; box-sizing: border-box; font-size: 1rem; transition: border-color 0.2s, box-shadow 0.2s; }
+        .form-group input:focus, .form-group textarea:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); }
+        .deploy-button { width: 100%; padding: 0.8rem; border: none; border-radius: 8px; background-color: #ef4444; color: white; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s; }
+        .deploy-button:hover { background-color: #dc2626; }
+        .deploy-button:disabled { background-color: #fca5a5; cursor: not-allowed; }
+        .status { margin-top: 1.5rem; padding: 0.75rem; border-radius: 8px; text-align: center; font-weight: 500; display: none; }
+        .status.success { background-color: #d1fae5; color: #065f46; display: block; }
+        .status.error { background-color: #fee2e2; color: #991b1b; display: block; }
+        .status.loading { background-color: #e0e7ff; color: #3730a3; display: block; }
     </style>
 </head>
 <body>
     <div class="container">
-        <div class="header">
-            <h1>🚀 Voice AI Coordinator</h1>
-            <p>Deploy a voice agent to make calls on your behalf.</p>
-        </div>
+        <div class="header"><h1>🚀 Voice AI Coordinator</h1><p>Deploy a voice agent to make calls on your behalf.</p></div>
         <form id="call-form">
-            <div class="form-group">
-                <label for="target-name">Whom to call (Name)</label>
-                <input type="text" id="target-name" placeholder="e.g., Jane Doe (Optional)">
-            </div>
-            <div class="form-group">
-                <label for="phone-number">Phone Number</label>
-                <input type="tel" id="phone-number" placeholder="+911234567890" required>
-            </div>
-            <div class="form-group">
-                <label for="raw-intent">Reason for Calling</label>
-                <textarea id="raw-intent" rows="3" placeholder="e.g., Ask if they would prefer tea or coffee" required></textarea>
-            </div>
+            <div class="form-group"><label for="target-name">Whom to call (Name)</label><input type="text" id="target-name" placeholder="e.g., Jane Doe (Optional)"></div>
+            <div class="form-group"><label for="phone-number">Phone Number</label><input type="tel" id="phone-number" placeholder="+911234567890" required></div>
+            <div class="form-group"><label for="raw-intent">Reason for Calling</label><textarea id="raw-intent" rows="3" placeholder="e.g., Ask if they would prefer tea or coffee" required></textarea></div>
             <button type="submit" id="deploy-button" class="deploy-button">Deploy Call</button>
         </form>
         <div id="status-message" class="status"></div>
     </div>
-
     <script>
         const form = document.getElementById('call-form');
         const button = document.getElementById('deploy-button');
         const statusDiv = document.getElementById('status-message');
-
         form.addEventListener('submit', async (event) => {
             event.preventDefault();
-            
             const name = document.getElementById('target-name').value;
             const number = document.getElementById('phone-number').value;
             const reason = document.getElementById('raw-intent').value;
-
             button.disabled = true;
             button.textContent = 'Deploying...';
             statusDiv.className = 'status loading';
             statusDiv.textContent = 'Processing intent and placing call...';
-
             try {
                 const response = await fetch('/place-call', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ name, number, reason })
                 });
-
                 const result = await response.json();
-
                 if (response.ok) {
                     statusDiv.className = 'status success';
                     statusDiv.textContent = `✅ Success! Call deployed with ID: ${result.call_id}`;
-                } else {
-                    throw new Error(result.error || 'An unknown error occurred.');
-                }
+                } else { throw new Error(result.error || 'An unknown error occurred.'); }
             } catch (error) {
                 statusDiv.className = 'status error';
                 statusDiv.textContent = `❌ Error: ${error.message}`;
@@ -199,12 +98,10 @@ HTML_TEMPLATE = """
 # --- Routes ---
 @app.route('/', methods=['GET'])
 def index():
-    """Serves the main user interface."""
     return render_template_string(HTML_TEMPLATE)
 
 @app.route('/place-call', methods=['POST'])
 def place_call_handler():
-    """Handles the API request from the front-end to place a call."""
     try:
         config = load_config()
         data = request.get_json()
@@ -217,12 +114,13 @@ def place_call_handler():
         response = model.generate_content(gemini_prompt)
         first_message = response.text.strip().replace('"', '')
 
-        vapi = Vapi(api_key=config["VAPI_API_KEY"])
+        # --- FIX 1: Initialize the Vapi client using the `token` keyword argument. ---
+        vapi = Vapi(token=config["VAPI_API_KEY"])
+        
         system_prompt = "You are Alex, a polite AI assistant. Your first sentence has been spoken. Now, listen and respond naturally in English or Hindi."
         
-        # --- THIS IS THE FIX ---
-        # Changed `vapi.calls.create` to `vapi.call.create` (singular)
-        call_response = vapi.call.create(
+        # --- FIX 2: Create the call using the `client.calls.create` attribute (plural). ---
+        call_response = vapi.calls.create(
             assistant_id=config["VAPI_ASSISTANT_ID"], phone_number_id=config["VAPI_PHONE_NUMBER_ID"],
             customer={"number": number},
             assistant={
@@ -243,7 +141,6 @@ def place_call_handler():
 
 @app.route('/webhook', methods=['POST'])
 def webhook_handler():
-    """Handles the webhook callback from Vapi after a call ends."""
     try:
         config = load_config()
         payload = request.json