feat: AI interview setup

Backend/app/api/v1/api.py

@@ -1,5 +1,5 @@
 from fastapi import APIRouter
-from app.api.v1.endpoints import auth, quiz, notes
+from app.api.v1.endpoints import auth, quiz, notes, vapi_ai
 
 api_router = APIRouter()
 
@@ -23,3 +23,9 @@ api_router.include_router(
     prefix="/notes",
     tags=["notes"]
 )
+
+api_router.include_router(
+    vapi_ai.router,
+    prefix="/vapi",
+    tags=["Voice AI"]
+)

Backend/app/api/v1/endpoints/notes.py

@@ -9,7 +9,7 @@ import uuid
 from fastapi.responses import StreamingResponse
 from chromadb.api.models.Collection import Collection 
 from pathlib import Path
-from llama_index.readers.file import PyMuPDFReader
+from llama_index.readers.file.pymu_pdf import PyMuPDFReader
 from llama_index.core.node_parser import SentenceSplitter
 from typing import Annotated
 import shutil

Backend/app/api/v1/endpoints/prompts.py

@@ -46,3 +46,13 @@ ANSWER KEY RULES
 
 Strictly follow the JSON structure and generate exactly 10 MCQs.
 """
+
+Interviewer_prompt = """
+        f"You are an expert technical interviewer conducting an interview for the role of {job_role}. "
+        f"The candidate has {experience} years of experience. "
+        f"The difficulty level is {level}. "
+        f"Start by welcoming {name} and asking a relevant opening question. "
+        "Keep your responses concise and conversational. Do not output markdown or code blocks, just speak naturally. "
+        "Assess their skills through follow-up questions."
+    
+"""

Backend/app/api/v1/endpoints/vapi_ai.py

@@ -0,0 +1,36 @@
+from fastapi import APIRouter, HTTPException, Body
+from pydantic import BaseModel
+from typing import Optional
+from .prompts import Interviewer_prompt
+from app.schema.models import VapiConfigRequest
+from app.config import settings
+
+router = APIRouter()
+
+
+
+@router.post("/get-vapi-config")
+async def get_vapi_config(config: VapiConfigRequest):
+
+    system_prompt   = Interviewer_prompt.format(name = config.name,
+    job_role = config.job_role,
+    experience = config.experience,
+    level = config.level)
+
+    return{
+        "assistantId": "1184587d-21d7-48f4-8e82-623a2e574324", 
+        "overrides": {
+            "variableValues": {
+                "name": config.name,
+                "job_role": config.job_role
+            },
+            "model": {
+                "messages": [
+                    {
+                        "role": "system",
+                        "content": system_prompt
+                    }
+                ]
+            }
+        }
+    }

Backend/app/config.py

@@ -18,6 +18,9 @@ class Settings(BaseSettings):
 
     GROQ_API_KEY:str
 
+    VAPI_ASSISTANT_ID: str
+    VAPI_PRIVATE_KEY: str
+
     class Config:
         env_file = ".env"
         extra = "ignore"  # quiz

Backend/app/schema/__init__.py

@@ -1,3 +1,3 @@
-from app.schema.models import UserCreate, Token, LoginRequest, Quiz_input, QuizOutput, IngestRequest, ChatMessage, AI_chat_input, pdf_input, SessionCreate, SessionResponse, MessageResponse
+from app.schema.models import UserCreate, Token, LoginRequest, Quiz_input, QuizOutput, IngestRequest, ChatMessage, AI_chat_input, pdf_input, SessionCreate, SessionResponse, MessageResponse, VapiConfigRequest
 
-__all__ = ["UserCreate", "Token", "LoginRequest", "Quiz_input", "QuizOutput", "IngestRequest", "ChatMessage", "AI_chat_input", "pdf_input", "SessionCreate", "SessionResponse", "MessageResponse"]
+__all__ = ["UserCreate", "Token", "LoginRequest", "Quiz_input", "QuizOutput", "IngestRequest", "ChatMessage", "AI_chat_input", "pdf_input", "SessionCreate", "SessionResponse", "MessageResponse", "VapiConfigRequest"]

Backend/app/schema/models.py

@@ -85,4 +85,11 @@ class pdf_input(BaseModel):
 class NoteInfo(BaseModel):
     id: int
     filename: str
-    created_at: datetime
+    created_at: datetime
+
+
+class VapiConfigRequest(BaseModel):
+    name: str
+    job_role: str
+    experience: str
+    level: str

Backend/requirements.txt

@@ -23,4 +23,5 @@ llama-index-embeddings-huggingface
 groq 
 websockets 
 pyaudio 
-SpeechRecognition
+SpeechRecognition
+vapi-python

Frontend/src/pages/AiInterview.tsx

@@ -1,50 +1,139 @@
-import React, { useState } from "react";
-import { Send, Settings, CheckCircle } from "lucide-react";
+import React, { useState, useEffect } from "react";
+import {
+  Send,
+  Settings,
+  CheckCircle,
+  Mic,
+  PhoneOff,
+  Volume2,
+  Loader2,
+  Activity,
+} from "lucide-react";
+import Vapi from "@vapi-ai/web";
+import API from "../api/api"; // Your Axios instance
+import { useAuth } from "../components/context/AuthContext";
 
-// Define the structure for the interview state
-type InterviewState = 'config' | 'chat' | 'results';
+// --- CONFIG ---
+const VAPI_PUBLIC_KEY = "6e393730-74a2-4690-8cb7-845ed3880488"; // Replace with your key
+const vapi = new Vapi(VAPI_PUBLIC_KEY);
+
+type InterviewState = "config" | "chat" | "results";
 
 const AIInterview: React.FC = () => {
-  const [interviewState, setInterviewState] = useState<InterviewState>('config');
-  const [jobRole, setJobRole] = useState('');
-  const [experience, setExperience] = useState('');
-  const [level, setLevel] = useState('Medium');
-
-  // Placeholder for the AI Chat bubble/ball
-  const InterviewBall: React.FC = () => (
-    <div className="flex items-center justify-center w-24 h-24 bg-purple-600 rounded-full shadow-2xl animate-pulse cursor-pointer">
-      <span className="text-white font-bold text-xl">AI</span>
-    </div>
-  );
+  const { username } = useAuth(); // Get logged in user name
+  const [interviewState, setInterviewState] =
+    useState<InterviewState>("config");
+
+  // Form State
+  const [jobRole, setJobRole] = useState("");
+  const [experience, setExperience] = useState("");
+  const [level, setLevel] = useState("Medium");
+
+  // Vapi State
+  const [isSessionActive, setIsSessionActive] = useState(false);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [status, setStatus] = useState("Idle");
+  const [volumeLevel, setVolumeLevel] = useState(0);
+
+  // --- VAPI EVENTS ---
+  useEffect(() => {
+    vapi.on("call-start", () => {
+      setStatus("Connected");
+      setIsSessionActive(true);
+      setInterviewState("chat"); // Switch UI to chat when call starts
+    });
+
+    vapi.on("call-end", () => {
+      setStatus("Call Ended");
+      setIsSessionActive(false);
+      setIsSpeaking(false);
+      setInterviewState("results"); // Switch UI to results when call ends
+    });
+
+    vapi.on("speech-start", () => setIsSpeaking(true));
+    vapi.on("speech-end", () => setIsSpeaking(false));
+
+    vapi.on("volume-level", (level) => setVolumeLevel(level)); // Optional: for animation
+
+    vapi.on("error", (e) => {
+      console.error("Vapi Error:", e);
+      setStatus("Error connecting");
+      setIsSessionActive(false);
+    });
+
+    // Cleanup
+    return () => {
+      vapi.stop();
+      vapi.removeAllListeners();
+    };
+  }, []);
+
+  // --- ACTIONS ---
+
+  const startInterview = async () => {
+    if (!jobRole || !experience) {
+      alert("Please fill in Job Role and Experience.");
+      return;
+    }
+
+    setStatus("Configuring AI...");
+
+    try {
+      // 1. Get dynamic config from YOUR backend
+      const response = await API.post("/vapi/get-vapi-config", {
+        name: username,
+        job_role: jobRole,
+        experience: experience,
+        level: level,
+      });
 
-  // --- RENDER FUNCTIONS ---
+      const { assistantId, overrides } = response.data;
 
-  // 1. Configuration Phase
+      setStatus("Connecting...");
+
+      // 2. Start Vapi Call
+      await vapi.start(assistantId, overrides);
+    } catch (err) {
+      console.error("Failed to start interview:", err);
+      setStatus("Failed to start");
+      alert("Could not start interview. Check backend connection.");
+    }
+  };
+
+  const endInterview = () => {
+    vapi.stop();
+    // State change to 'results' happens in 'call-end' listener
+  };
+
+  // --- RENDERERS ---
+
+  // 1. Configuration Phase (Kept mostly same as original)
   const renderConfig = () => (
     <div className="bg-white p-6 rounded-xl shadow-lg border border-gray-200">
       <h3 className="text-2xl font-semibold mb-6 flex items-center gap-2 text-blue-700">
         <Settings size={24} /> Configure Your Interview
       </h3>
-      
+
       <div className="space-y-6">
-        {/* Job Role Input */}
         <label className="block">
-          <span className="text-gray-700 font-medium">1. Job Role/Position (e.g., Senior Frontend Developer)</span>
+          <span className="text-gray-700 font-medium">
+            1. Job Role/Position
+          </span>
           <input
             type="text"
             value={jobRole}
             onChange={(e) => setJobRole(e.target.value)}
-            placeholder="Enter the job role for tailored questions"
+            placeholder="e.g., Senior Frontend Developer"
             className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500"
           />
         </label>
 
-        {/* Experience Input */}
         <label className="block">
-          <span className="text-gray-700 font-medium">2. Years of Professional Experience</span>
+          <span className="text-gray-700 font-medium">
+            2. Years of Experience
+          </span>
           <input
             type="number"
-            min="0"
             value={experience}
             onChange={(e) => setExperience(e.target.value)}
             placeholder="e.g., 5"
@@ -52,7 +141,6 @@ const AIInterview: React.FC = () => {
           />
         </label>
 
-        {/* Level Select */}
         <label className="block">
           <span className="text-gray-700 font-medium">3. Difficulty Level</span>
           <select
@@ -60,77 +148,85 @@ const AIInterview: React.FC = () => {
             onChange={(e) => setLevel(e.target.value)}
             className="mt-1 block w-full px-4 py-3 border border-gray-300 rounded-lg shadow-sm focus:ring-blue-500 focus:border-blue-500 bg-white"
           >
-            <option value="Basic">Basic (Beginner)</option>
-            <option value="Medium">Medium (Intermediate)</option>
-            <option value="Hard">Hard (Senior/Expert)</option>
+            <option value="Basic">Basic</option>
+            <option value="Medium">Medium</option>
+            <option value="Hard">Hard</option>
           </select>
         </label>
       </div>
 
       <button
-        onClick={() => {
-          if (jobRole && experience) {
-            setInterviewState('chat');
-          } else {
-            alert('Please fill in the Job Role and Experience.');
-          }
-        }}
-        className="mt-8 px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-150 flex items-center gap-2"
-        disabled={!jobRole || !experience}
+        onClick={startInterview}
+        disabled={status === "Configuring AI..." || status === "Connecting..."}
+        className="mt-8 px-8 py-3 bg-blue-600 text-white font-semibold rounded-lg hover:bg-blue-700 transition duration-150 flex items-center gap-2 disabled:opacity-70"
       >
-        <Send size={20} /> Start Interview
+        {status === "Configuring AI..." || status === "Connecting..." ? (
+          <Loader2 className="animate-spin" />
+        ) : (
+          <Mic size={20} />
+        )}
+        {status === "Idle" || status === "Error"
+          ? "Start Voice Interview"
+          : status}
       </button>
     </div>
   );
 
-  // 2. Chat/Interview Phase
+  // 2. Active Chat Phase (Modified for Voice UI)
   const renderChat = () => (
-    <div className="flex flex-col items-center bg-white p-6 rounded-xl shadow-lg h-[600px] overflow-hidden relative">
-      <h3 className="text-xl font-bold mb-4">Interview in Progress</h3>
-      <p className="text-gray-600 mb-6">
-        Role: {jobRole} | Experience: {experience} yrs | Level: {level}
+    <div className="flex flex-col items-center justify-center bg-white p-8 rounded-xl shadow-lg min-h-[500px] relative">
+      <h3 className="text-xl font-bold mb-2">Live Interview</h3>
+      <p className="text-gray-600 mb-8">
+        {jobRole} • {level} Level
       </p>
 
-      {/* The AI Ball UI Element */}
-      <InterviewBall />
-      
-      {/* Placeholder for Chat Messages */}
-      <div className="flex-1 w-full mt-4 p-4 border border-dashed border-gray-300 rounded-lg overflow-y-auto bg-gray-50">
-        <div className="bg-purple-100 p-3 rounded-lg text-purple-800 mb-2">
-          **AI:** Welcome! Based on your configuration, let's start with your first question...
+      {/* Dynamic AI Ball based on Speaking State */}
+      <div className="relative mb-10">
+        <div
+          className={`flex items-center justify-center w-32 h-32 rounded-full shadow-2xl transition-all duration-300 ${
+            isSpeaking ? "bg-purple-600 scale-110" : "bg-blue-600 scale-100"
+          }`}
+          style={{
+            boxShadow: isSpeaking
+              ? `0 0 ${30 + volumeLevel * 50}px rgba(147, 51, 234, 0.6)`
+              : "0 0 20px rgba(37, 99, 235, 0.3)",
+          }}
+        >
+          {isSpeaking ? (
+            <Volume2 className="w-12 h-12 text-white animate-pulse" />
+          ) : (
+            <Activity className="w-12 h-12 text-white" />
+          )}
         </div>
-        {/* User messages and AI responses would go here */}
-      </div>
 
-      {/* Input area */}
-      <div className="w-full flex gap-2 mt-4">
-        <input
-          type="text"
-          placeholder="Type your answer here..."
-          className="flex-1 px-4 py-3 border border-gray-300 rounded-lg focus:ring-purple-500 focus:border-purple-500"
-        />
-        <button className="px-4 py-3 bg-purple-600 text-white rounded-lg hover:bg-purple-700">
-          <Send size={20} />
-        </button>
+        {/* Status Indicator */}
+        <div className="absolute -bottom-10 left-1/2 -translate-x-1/2 whitespace-nowrap text-gray-500 font-medium animate-pulse">
+          {isSpeaking ? "AI is speaking..." : "Listening to you..."}
+        </div>
       </div>
-      
-      <button 
-        onClick={() => setInterviewState('results')} 
-        className="mt-4 text-sm text-red-500 hover:text-red-700 underline"
+
+      <button
+        onClick={endInterview}
+        className="mt-8 flex items-center gap-2 px-6 py-3 bg-red-100 text-red-600 rounded-full hover:bg-red-200 transition font-semibold"
       >
-        End Interview
+        <PhoneOff size={20} /> End Interview
       </button>
     </div>
   );
-  
-  // 3. Results Phase (Simple Placeholder)
+
+  // 3. Results Phase
   const renderResults = () => (
     <div className="bg-green-50 p-8 rounded-xl shadow-xl text-center">
       <CheckCircle size={48} className="text-green-600 mx-auto mb-4" />
-      <h3 className="text-3xl font-bold text-green-700 mb-2">Interview Ended</h3>
-      <p className="text-gray-700 mb-6">Thank you for practicing! Your detailed feedback and results are being compiled now.</p>
-      <button 
-        onClick={() => setInterviewState('config')} 
+      <h3 className="text-3xl font-bold text-green-700 mb-2">
+        Interview Completed
+      </h3>
+      <p className="text-gray-700 mb-6">
+        The AI interviewer has finished assessing your responses. (Integration
+        with transcript analysis would go here).
+      </p>
+      <button
+        onClick={() => setInterviewState("config")}
         className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition duration-150"
       >
         Start New Interview
@@ -138,18 +234,16 @@ const AIInterview: React.FC = () => {
     </div>
   );
 
-  // --- MAIN RENDER ---
-
   return (
-    <div className="p-8 max-w-4xl mx-auto">
-      <h1 className="text-4xl font-extrabold text-gray-800 mb-6">AI Interview Practice 🤖</h1>
-      
-      {/* State rendering */}
-      {interviewState === 'config' && renderConfig()}
-      {interviewState === 'chat' && renderChat()}
-      {interviewState === 'results' && renderResults()}
+    <div className="p-8 max-w-4xl mx-auto font-opensans">
+      <h1 className="text-4xl font-extrabold text-gray-800 mb-6">
+        AI Voice Interview 🎙️
+      </h1>
+      {interviewState === "config" && renderConfig()}
+      {interviewState === "chat" && renderChat()}
+      {interviewState === "results" && renderResults()}
     </div>
   );
 };
 
-export default AIInterview;
+export default AIInterview;