Spaces:

EbeshaAI
/

ai-voice-interview

Running

App Files Files Community

jonathanjordan21 commited on Feb 24

Commit

024f45f

1 Parent(s): 9d134ac

update UI v0.1

Browse files

Files changed (13) hide show

.gitignore +2 -0
chat_history.html +49 -0
finished.html +137 -0
index.html +16 -4
package-lock.json +13 -0
package.json +1 -0
public/chat_history.js +64 -0
public/chat_style.css +111 -0
public/interview_end.css +93 -0
public/interview_end.js +12 -0
src/counter.js +260 -35
src/style.css +164 -113
vite.config.ts +90 -4

.gitignore CHANGED Viewed

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?

 *.njsproj
 *.sln
 *.sw?
+.env

chat_history.html ADDED Viewed

	@@ -0,0 +1,49 @@

+<!-- <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Interview Chat History</title>
+  <link rel="stylesheet" href="./chat_style.css" />
+</head>
+<body>
+  <h2>Riwayat Chat</h2>
+  <div class="chat-container" id="chatContainer"></div>
+  <script src="./chat_history.js"></script>
+</body>
+</html> -->
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8" />
+  <title>Interview History</title>
+  <link rel="stylesheet" href="./chat_style.css" />
+</head>
+<body>
+  <div class="app">
+    <!-- Header -->
+    <div class="header">
+      <div class="header-left">
+        <button id="backBtn" class="back-btn">←</button>
+        <div>
+          <div class="title">AI Interview Summary</div>
+          <div class="subtitle" id="interviewDate"></div>
+        </div>
+      </div>
+    </div>
+    <!-- Chat area -->
+    <div class="chat-container" id="chatContainer"></div>
+    <button id="rawBtn" class="raw-btn">Raw JSON</button>
+  </div>
+  <script src="./chat_history.js"></script>
+</body>
+</html>

finished.html ADDED Viewed

	@@ -0,0 +1,137 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Interview Complete</title>
+  <!-- Google Font -->
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./interview_end.css" />
+  <style>
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+      font-family: 'Poppins', sans-serif;
+    }
+    body {
+      height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(135deg, #3B82F6, #6366F1);
+    }
+    .app {
+      background: #ffffff;
+      padding: 55px 45px;
+      border-radius: 20px;
+      text-align: center;
+      max-width: 520px;
+      width: 90%;
+      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
+      animation: fadeIn 0.6s ease-in-out;
+      position: relative;
+    }
+    /* Subtle top accent bar */
+    .app::before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      height: 6px;
+      border-radius: 20px 20px 0 0;
+      background: linear-gradient(90deg, #F97316, #3B82F6);
+    }
+    h1 {
+      font-size: 30px;
+      font-weight: 600;
+      color: #1f2937;
+      margin-bottom: 22px;
+    }
+    p {
+      font-size: 16px;
+      color: #4b5563;
+      margin-bottom: 15px;
+      line-height: 1.7;
+    }
+    .note {
+      font-size: 14px;
+      color: #6b7280;
+      margin-top: 20px;
+    }
+    .highlight {
+      color: #F97316;
+      font-weight: 600;
+    }
+    .btn-home {
+      display: inline-block;
+      margin-top: 28px;
+      padding: 13px 28px;
+      border-radius: 10px;
+      text-decoration: none;
+      font-weight: 600;
+      background: linear-gradient(135deg, #F97316, #FB923C);
+      color: #fff;
+      transition: all 0.3s ease;
+    }
+    .btn-home:hover {
+      transform: translateY(-3px);
+      box-shadow: 0 10px 25px rgba(249, 115, 22, 0.4);
+    }
+    @keyframes fadeIn {
+      from {
+        opacity: 0;
+        transform: translateY(25px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
+    }
+    @media (max-width: 480px) {
+      .app {
+        padding: 35px 25px;
+      }
+      h1 {
+        font-size: 24px;
+      }
+      p {
+        font-size: 14px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="app">
+    <h1>🎉 Interview Complete</h1>
+    <p>Thank you for participating in our interview process.</p>
+    <p>
+      Please wait for further confirmation. You will hear from us within
+      <span class="highlight">2 weeks</span>.
+    </p>
+    <p class="note">We truly appreciate your time and effort. Good luck!</p>
+    <!-- Optional Button -->
+    <!-- <a href="/" class="btn-home">Return to Home</a> -->
+  </div>
+</body>
+</html>

index.html CHANGED Viewed

@@ -24,7 +24,19 @@
     <div id="app">
       <!-- Header -->
       <header class="top-bar">
-        <span class="meeting-title">AI Interview Session</span>
         <span class="meeting-time">00:00</span>
       </header>
@@ -49,12 +61,12 @@
       <main class="meeting-area">
         <div class="video-tile ai">
           <canvas id="ai-bg"></canvas>
-          <span class="label">🤖 AI Interviewer</span>
         </div>
         <div class="video-tile user">
           <video id="userVideo" autoplay playsinline muted></video>
-          <span class="label">👤 You</span>
         </div>
       </main>
@@ -62,7 +74,7 @@
         <input
           id="apiKeyInput"
           type="password"
-          placeholder="Enter API Key"
           autocomplete="off"
           class="api-key-input"
         />

     <div id="app">
       <!-- Header -->
       <header class="top-bar">
+        <!-- <span class="meeting-title">AI Interview Session</span> -->
+        <div class="status-container">
+          <img src="https://static.wixstatic.com/media/b1fac1_9c0ef77531834b2f9be1ea02ff6c47a9~mv2.png"
+              alt="LMD Logo"
+              class="status-logo"
+          >
+          <h1 class="meeting-title">JOSS AI Interview</h1>
+          <!-- <p class="meeting-title">
+            JOSS AI Interview
+          </p> -->
+        </div>
         <span class="meeting-time">00:00</span>
       </header>
       <main class="meeting-area">
         <div class="video-tile ai">
           <canvas id="ai-bg"></canvas>
+          <span class="label">AI Interviewer</span>
         </div>
         <div class="video-tile user">
           <video id="userVideo" autoplay playsinline muted></video>
+          <span class="label">You</span>
         </div>
       </main>
         <input
           id="apiKeyInput"
           type="password"
+          placeholder="Enter Token"
           autocomplete="off"
           class="api-key-input"
         />

package-lock.json CHANGED Viewed

@@ -9,6 +9,7 @@
       "version": "0.0.0",
       "dependencies": {
         "@openai/agents": "^0.4.4",
         "zod": "^4.3.6"
       },
       "devDependencies": {
@@ -1171,6 +1172,18 @@
         "node": ">= 0.8"
       }
     },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",

       "version": "0.0.0",
       "dependencies": {
         "@openai/agents": "^0.4.4",
+        "dotenv": "^17.3.1",
         "zod": "^4.3.6"
       },
       "devDependencies": {
         "node": ">= 0.8"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.3.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.3.1.tgz",
+      "integrity": "sha512-IO8C/dzEb6O3F9/twg6ZLXz164a2fhTnEWb95H23Dm4OuN+92NmEAlTrupP9VW6Jm3sO26tQlqyvyi4CsnY9GA==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",

package.json CHANGED Viewed

@@ -14,6 +14,7 @@
   },
   "dependencies": {
     "@openai/agents": "^0.4.4",
     "zod": "^4.3.6"
   }
 }

   },
   "dependencies": {
     "@openai/agents": "^0.4.4",
+    "dotenv": "^17.3.1",
     "zod": "^4.3.6"
   }
 }

public/chat_history.js ADDED Viewed

	@@ -0,0 +1,64 @@

+// const chatContainer = document.getElementById("chatContainer")
+// const data = sessionStorage.getItem("interviewTranscript")
+// if (!data) {
+//   chatContainer.innerHTML = "<p style='color:white'>No transcript found.</p>"
+// } else {
+//   const transcript = JSON.parse(data)
+//   console.log(transcript)
+//   transcript.forEach(msg => {
+//     const div = document.createElement("div")
+//     div.classList.add("message", msg.role)
+//     div.textContent = msg.content[0].transcript
+//     chatContainer.appendChild(div)
+//   })
+// }
+const chatContainer = document.getElementById("chatContainer")
+const interviewDate = document.getElementById("interviewDate")
+const backBtn = document.getElementById("backBtn")
+const rawBtn = document.getElementById("rawBtn")
+// Back button
+backBtn.addEventListener("click", () => {
+  window.location.href = "index.html"
+})
+rawBtn.addEventListener("click", () => {
+  window.location.href = "raw_history.html"
+})
+// Set date
+interviewDate.textContent = new Date().toLocaleString()
+const data = sessionStorage.getItem("interviewTranscript")
+if (!data) {
+  chatContainer.innerHTML =
+    "<p style='color:#8696a0'>No transcript found.</p>"
+} else {
+  const transcript = JSON.parse(data)
+  transcript.forEach(msg => {
+    const div = document.createElement("div")
+    div.classList.add("message", msg.role)
+    // div.textContent = msg.content[0].transcript
+    div.innerHTML = `
+      ${msg.content[0].transcript}
+      <div class="timestamp">
+        ${new Date().toLocaleTimeString()}
+      </div>
+    `
+    chatContainer.appendChild(div)
+  })
+  chatContainer.scrollTop = chatContainer.scrollHeight
+}

public/chat_style.css ADDED Viewed

	@@ -0,0 +1,111 @@

+body {
+  margin: 0;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont;
+  background: #0b141a;
+  color: white;
+  height: 100vh;
+  display: flex;
+}
+.app {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+/* HEADER */
+.header {
+  background: #202c33;
+  padding: 12px 16px;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #2a3942;
+}
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.back-btn {
+  background: none;
+  border: none;
+  color: #00a884;
+  font-size: 18px;
+  cursor: pointer;
+}
+.title {
+  font-size: 16px;
+  font-weight: 600;
+}
+.subtitle {
+  font-size: 12px;
+  color: #8696a0;
+}
+/* CHAT AREA */
+.chat-container {
+  flex: 1;
+  padding: 20px;
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+/* MESSAGE BUBBLES */
+.message {
+  max-width: 65%;
+  padding: 10px 14px;
+  border-radius: 16px;
+  font-size: 14px;
+  line-height: 1.4;
+  animation: fadeIn 0.2s ease-in-out;
+}
+.user {
+  align-self: flex-end;
+  background: #005c4b;
+  color: white;
+  border-bottom-right-radius: 4px;
+}
+.assistant {
+  align-self: flex-start;
+  background: #202c33;
+  border-bottom-left-radius: 4px;
+}
+.timestamp {
+  font-size: 10px;
+  margin-top: 4px;
+  opacity: 0.6;
+  text-align: right;
+}
+.raw-btn {
+  margin-left: auto;
+  background: #00a884;
+  border: none;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 12px;
+  font-weight: 500;
+  color: white;
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(5px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

public/interview_end.css ADDED Viewed

	@@ -0,0 +1,93 @@

+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: 'Poppins', sans-serif;
+}
+body {
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: linear-gradient(135deg, #667eea, #764ba2);
+}
+.app {
+  background: #ffffff;
+  padding: 50px 40px;
+  border-radius: 16px;
+  text-align: center;
+  max-width: 500px;
+  width: 90%;
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
+  animation: fadeIn 0.6s ease-in-out;
+}
+h1 {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 20px;
+}
+p {
+  font-size: 16px;
+  color: #555;
+  margin-bottom: 15px;
+  line-height: 1.6;
+}
+.note {
+  font-size: 14px;
+  color: #888;
+  margin-top: 20px;
+}
+.highlight {
+  color: #764ba2;
+  font-weight: 600;
+}
+.btn-home {
+  display: inline-block;
+  margin-top: 25px;
+  padding: 12px 25px;
+  border-radius: 8px;
+  text-decoration: none;
+  font-weight: 500;
+  background: #764ba2;
+  color: #fff;
+  transition: all 0.3s ease;
+}
+.btn-home:hover {
+  background: #5a3791;
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+@media (max-width: 480px) {
+  .app {
+    padding: 35px 25px;
+  }
+  h1 {
+    font-size: 22px;
+  }
+  p {
+    font-size: 14px;
+  }
+}

public/interview_end.js ADDED Viewed

	@@ -0,0 +1,12 @@

+// Optional: Automatically redirect to home after X seconds
+const redirectTime = 15; // seconds
+let countdown = redirectTime;
+const btn = document.querySelector('.btn-home');
+const timer = setInterval(() => {
+countdown--;
+btn.textContent = `Return to Home (${countdown}s)`;
+if (countdown <= 0) {
+    clearInterval(timer);
+    window.location.href = '/';
+}}, 1000);

src/counter.js CHANGED Viewed

@@ -1,57 +1,129 @@
 // import { RealtimeAgent, RealtimeSession } from '@openai/agents/realtime';
 import { RealtimeAgent, RealtimeSession } from "https://esm.sh/@openai/agents/realtime"
 export async function setupCounter(button) {
   let started = false
   button.addEventListener('click', async () => {
-    if (started) return
     const apiKeyInput = document.querySelector('#apiKeyInput')
-    if (!apiKeyInput) {
-      throw new Error('apiKeyInput (#apiKeyInput) not found')
-    }
-    // const apiKeyInput = document.querySelector<HTMLInputElement>('#apiKeyInput')!
     const apiKey = apiKeyInput.value.trim()
     if (!apiKey) {
-      alert('Please enter your API key')
       apiKeyInput.focus()
       return
     }
     try {
-      const res = await fetch("https://api.openai.com/v1/realtime/client_secrets", {
         method: "POST",
-        headers: {
-          "Authorization": "Bearer " + apiKey,
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({"session": {
-          "type": "realtime",
-          "model": "gpt-realtime"
-        }}),
-      })
-      if (!res.ok) {
-        throw new Error(`Request failed: ${res.status}`)
       }
-      const data = await res.json()
-      console.log(data)
       started = true
-      button.textContent = 'Interview Live'
       await startUserCamera()
       startAIBackground()
-      startAIVoiceInterview(data.value)
     } catch (err) {
       alert(
@@ -59,25 +131,164 @@ export async function setupCounter(button) {
           ? err.message
           : "Request failed. Please try again."
       )
       return
     }
   })
 }
-async function startAIBackground() {
-  const canvas = document.querySelector('#ai-bg')
   if (!canvas) {
     throw new Error('canvas (#ai-bg) not found')
   }
   // const canvas = document.querySelector<HTMLCanvasElement>('#ai-bg')!
   const ctx = canvas.getContext('2d')
   canvas.width = canvas.offsetWidth
@@ -120,11 +331,13 @@ async function startUserCamera() {
 }
-async function startAIVoiceInterview(key) {
   const agent = new RealtimeAgent({
     name: 'Interviewer',
-    instructions: 'You are AI Agent currently interviewing candidates in Bahasa Indonesia. Ask everything related to their skill',
   });
   const session = new RealtimeSession(agent, {"model":"gpt-realtime"});
   try {
     await session.connect({
@@ -132,7 +345,19 @@ async function startAIVoiceInterview(key) {
       // curl -s -X POST https://api.openai.com/v1/realtime/client_secrets -H "Authorization: Bearer $OPENAI_API_KEY" -H "Content-Type: application/json" -d '{"session": {"type": "realtime", "model": "gpt-realtime"}}' | jq .value
       apiKey: key
     });
-    console.log('You are connected!');
   } catch (e) {
     console.error(e);
   }

 // import { RealtimeAgent, RealtimeSession } from '@openai/agents/realtime';
 import { RealtimeAgent, RealtimeSession } from "https://esm.sh/@openai/agents/realtime"
+// import dotenv from "dotenv";
+// dotenv.config();
+let mediaRecorder = null
+let recordedChunks = []
+let stream = null
+let chat_history = []
+let interviewToken = null;
+const API_BASE_URL = 'https://jonathanjordan21-joss-interview-backend-demo.hf.space'
+const parts = window.location.pathname.split('/').filter(p => p.trim() !== '');
+const interviewId = parts[parts.length - 1];
+function formatTime(totalSeconds) {
+  const mins = Math.floor(totalSeconds / 60);
+  const secs = totalSeconds % 60;
+  return `${String(mins).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
+}
+const timerElement = document.querySelector(".meeting-time");
+let seconds = 0;
+if (parts.length != 2) {
+  console.error('400 Interview not found');
+  const appDiv = document.getElementById('app');
+  if (appDiv) appDiv.textContent = '400 Interview not found';
+} else {
+  async function loadData() {
+    try {
+      const response = await fetch(`${API_BASE_URL}/interview/${interviewId}`, {
+        // headers: {"Authorization": "Bearer " + HF_API_KEY}
+      });
+      if (!response.ok) throw new Error(`${response.status}`);
+      const data = await response.json();
+    } catch (err) {
+      console.error(err);
+      console.error(err.message)
+      const appDiv = document.getElementById('app');
+      if (appDiv) appDiv.textContent = `Error fetching interview: ${err.message}`;
+    }
+  }
+  loadData();
+}
 export async function setupCounter(button) {
   let started = false
   button.addEventListener('click', async () => {
     const apiKeyInput = document.querySelector('#apiKeyInput')
+    if (started) {
+      button.textContent = 'Loading...'
+      await stopInterview()
+      // button.textContent = "Start Interview"
+      // apiKeyInput.style.display = 'block';
+      setTimeout(() => {
+        window.location.href = "/finished.html"
+      }, 1000)
+      return
+    }
     const apiKey = apiKeyInput.value.trim()
     if (!apiKey) {
+      alert('Please input your token')
       apiKeyInput.focus()
       return
     }
+    button.textContent = 'Loading...'
+    interviewToken = apiKey;
     try {
+      console.log("start interviewing....")
+      const resp = await fetch(`${API_BASE_URL}/interview/${interviewId}/start_interview`,{
         method: "POST",
+        headers: {"Authorization": "Bearer " + interviewToken},
+      });
+      if (!resp.ok){
+        button.textContent = 'Start Interview'
+        const detail = (await resp.json())['detail']
+        alert(detail)
+        console.log(detail)
+        return
       }
+      if (resp.status == 202) {
+        console.log("Redirecting now...");
+        setTimeout(() => {
+          window.location.href = "/finished.html"
+        }, 1500)
+        return;
+      }
+      const interviewData = await resp.json()
       started = true
+      button.textContent = 'Stop Interview';
+      apiKeyInput.style.display = 'none';
+      setInterval(() => {
+        seconds++;
+        timerElement.textContent = formatTime(seconds);
+      }, 1000);
       await startUserCamera()
       startAIBackground()
+      startAIVoiceInterview(interviewData.data.ephemeral_key, interviewData.data.prompt)
+      await startInterview()
     } catch (err) {
       alert(
           ? err.message
           : "Request failed. Please try again."
       )
+      console.log(err.message)
       return
     }
   })
 }
+async function startInterview() {
+  const video = document.getElementById('userVideo')
+  stream = await navigator.mediaDevices.getUserMedia({
+    video: true,
+    audio: true
+  })
+  video.srcObject = stream
+  await startRecording(stream)
+}
+async function startRecording(stream) {
+  recordedChunks = []
+  mediaRecorder = new MediaRecorder(stream, {
+    mimeType: 'video/webm'
+  })
+  mediaRecorder.ondataavailable = (event) => {
+    if (event.data.size > 0) {
+      recordedChunks.push(event.data)
+    }
+  }
+  // mediaRecorder.onstop = saveRecording
+  mediaRecorder.start()
+}
+async function stopInterview(session) {
+  if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+    mediaRecorder.stop()
+    console.log(`STOPPING INTERVIEW...`)
+    const blob = new Blob(recordedChunks, { type: "audio/webm" });
+    recordedChunks = [];
+    const formData = new FormData();
+    formData.append("file", blob, "recording.webm");
+    const upload_recording = await fetch(`${API_BASE_URL}/interview/${interviewId}/file`, {
+      method: "POST",
+      headers: {"Authorization": "Bearer " + interviewToken},
+      body: formData
+    })
+    const recording_data = await upload_recording.json()
+    const transcriptData = {
+      transcriptId: recording_data["data"]["datetime"],
+      date: new Date().toISOString(),
+      messages: chat_history
+    }
+    const res = await fetch(`${API_BASE_URL}/interview/${interviewId}`, {
+      method: "PATCH",
+      headers: {
+        "Authorization": "Bearer " + interviewToken,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        transcript:chat_history,
+        recording_url:recording_data["data"]["url"],
+        status:"FINISHED",
+        duration:seconds
+      }),
+    })
+    if (!res.ok) {
+      throw new Error(`Request failed: ${res.status}`)
+    }
+    // const data = await res.json()
+  }
+  if (stream) {
+    stream.getTracks().forEach(track => track.stop())
+  }
+}
+// function saveRecording() {
+  // const timestamp = Date.now()
+  // const blob = new Blob(recordedChunks, {
+  //   type: 'video/webm'
+  // })
+  // const url = URL.createObjectURL(blob)
+  // const a = document.createElement('a')
+  // a.href = url
+  // a.download = `interview_${timestamp}.webm`
+  // a.click()
+  // saveInterviewData()
+  // URL.revokeObjectURL(url)
+  // sessionStorage.setItem(
+  //   "interviewTranscript",
+  //   JSON.stringify(chat_history)
+  // )
+// }
+// function saveInterviewData(timestamp) {
+  // const videoBlob = new Blob(recordedChunks, {
+  //   type: 'video/webm'
+  // })
+  // const videoUrl = URL.createObjectURL(videoBlob)
+  // const videoLink = document.createElement('a')
+  // videoLink.href = videoUrl
+  // videoLink.download = `interview_recording_${timestamp}.webm`
+  // videoLink.click()
+  // URL.revokeObjectURL(videoUrl)
+  // const transcriptData = {
+  //   interviewId: timestamp,
+  //   date: new Date().toISOString(),
+  //   messages: chat_history
+  // }
+  // const jsonBlob = new Blob(
+  //   [JSON.stringify(transcriptData, null, 2)],
+  //   { type: "application/json" }
+  // )
+  // const jsonUrl = URL.createObjectURL(jsonBlob)
+  // const jsonLink = document.createElement('a')
+  // jsonLink.href = jsonUrl
+  // jsonLink.download = `interview_transcript_${timestamp}.json`
+  // jsonLink.click()
+  // URL.revokeObjectURL(jsonUrl)
+  // setTimeout(() => {
+  //   window.location.href = "chat_history.html"
+  // }, 1500)
+// }
+async function startAIBackground() {
+  const canvas = document.querySelector('#ai-bg')
   if (!canvas) {
     throw new Error('canvas (#ai-bg) not found')
   }
   // const canvas = document.querySelector<HTMLCanvasElement>('#ai-bg')!
   const ctx = canvas.getContext('2d')
   canvas.width = canvas.offsetWidth
 }
+async function startAIVoiceInterview(key, prompt) {
   const agent = new RealtimeAgent({
     name: 'Interviewer',
+    instructions: prompt ? prompt
+    : 'You are AI Agent currently interviewing candidates in Bahasa Indonesia. Ask everything related to their skill',
   });
   const session = new RealtimeSession(agent, {"model":"gpt-realtime"});
   try {
     await session.connect({
       // curl -s -X POST https://api.openai.com/v1/realtime/client_secrets -H "Authorization: Bearer $OPENAI_API_KEY" -H "Content-Type: application/json" -d '{"session": {"type": "realtime", "model": "gpt-realtime"}}' | jq .value
       apiKey: key
     });
+    // console.log('You are connected!');
+    session.on('history_updated', (history) => {
+      // returns the full history of the session
+      // console.log(`HISTORY UPDATED`);
+      // console.log(history);
+      chat_history = history
+    });
+    // session.on('history_added', (history) => {
+      // console.log(`HISTORY ADDED`)
+      // console.log(history)
+    // })
   } catch (e) {
     console.error(e);
   }

src/style.css CHANGED Viewed

@@ -1,12 +1,12 @@
 * {
   box-sizing: border-box;
-  font-family: system-ui, sans-serif;
 }
 body {
   margin: 0;
-  background: #202124;
-  color: white;
 }
 #app {
@@ -15,176 +15,227 @@ body {
   flex-direction: column;
 }
 .top-bar {
-  padding: 12px 20px;
-  background: #303134;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }
 .meeting-area {
   flex: 1;
   display: grid;
   grid-template-columns: 2fr 1fr;
-  gap: 12px;
-  padding: 12px;
 }
 .video-tile {
-  background: #3c4043;
-  border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
 }
 .controls {
-  padding: 12px;
-  background: #303134;
   display: flex;
   justify-content: center;
-  gap: 16px;
 }
 .control-btn {
-  background: #3c4043;
   border: none;
   color: white;
   font-size: 1.1rem;
-  padding: 12px 16px;
   border-radius: 50%;
   cursor: pointer;
 }
 .control-btn:hover {
-  background: #5f6368;
 }
 .control-btn.end {
-  border-radius: 24px;
-  padding: 12px 20px;
-  background: #ea4335;
-}
-.video-tile {
-  position: relative;
-  overflow: hidden;
 }
-/* video,
-canvas {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
 }
-.label {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-  background: rgba(0,0,0,0.5);
-  padding: 6px 10px;
-  border-radius: 8px;
-  font-size: 0.9rem;
-} */
-/*
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
 }
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
 }
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
 }
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
 }
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
 }
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
 }
-.card {
-  padding: 2em;
 }
-.read-the-docs {
-  color: #888;
 }
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
   cursor: pointer;
-  transition: border-color 0.25s;
 }
-button:hover {
-  border-color: #646cff;
 }
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
 }
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-} */

 * {
   box-sizing: border-box;
+  font-family: 'Poppins', system-ui, sans-serif;
 }
 body {
   margin: 0;
+  background: linear-gradient(135deg, #3B82F6, #6366F1);
+  color: #ffffff;
 }
 #app {
   flex-direction: column;
 }
+.status-container {
+  display: flex;         /* Makes items sit side-by-side */
+  align-items: center;   /* Aligns them vertically in the middle */
+  gap: 15px;             /* Adds space between the logo and text */
+  padding: 20px;
+  border: 1px solid #eee;
+  border-radius: 8px;
+}
+.status-logo {
+  height: 50px;          /* Adjust size as needed */
+  width: auto;
+}
+/* Top Bar */
 .top-bar {
+  padding: 14px 24px;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(14px);
   display: flex;
   justify-content: space-between;
   align-items: center;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
 }
+/* Meeting Area */
 .meeting-area {
   flex: 1;
   display: grid;
   grid-template-columns: 2fr 1fr;
+  gap: 20px;
+  padding: 24px;
 }
+/* Video Tiles */
 .video-tile {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
+  backdrop-filter: blur(10px);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
+  transition: all 0.3s ease;
+  position: relative;
+  overflow: hidden;
+}
+.meeting-title {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 1.5rem;
+  color: #ffffff;
+  margin: 0;             /* Removes default H1 spacing */
+  letter-spacing: -1px;  /* Modern, tighter look */
+}
+.meeting-time {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 2.5rem;
+  color: #ffffff;
+  margin: 0;             /* Removes default H1 spacing */
+  letter-spacing: -1px;  /* Modern, tighter look */
+  padding-right: 1%;
+}
+.label {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  font-size: 2.5rem;
+  color: #ffffff;
+  margin: 0;             /* Removes default H1 spacing */
+  letter-spacing: -1px;  /* Modern, tighter look */
+}
+/* Subtle brand border */
+.video-tile::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: 20px;
+  padding: 2px;
+  justify-content: center;
+  background: linear-gradient(135deg, #F97316, #3B82F6);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+          mask-composite: exclude;
+}
+.video-tile:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.35);
 }
+/*
+.video-title.user {
+  justify-content: center;
+  align-items: center;
+} */
+/* Controls */
 .controls {
+  padding: 18px;
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(14px);
   display: flex;
   justify-content: center;
+  gap: 22px;
+  border-top: 1px solid rgba(255, 255, 255, 0.15);
 }
+/* Control Buttons */
 .control-btn {
+  background: rgba(255, 255, 255, 0.15);
   border: none;
   color: white;
   font-size: 1.1rem;
+  padding: 15px;
   border-radius: 50%;
   cursor: pointer;
+  transition: all 0.25s ease;
 }
+/* Orange hover accent */
 .control-btn:hover {
+  background: #F97316;
+  transform: scale(1.1);
+  box-shadow: 0 8px 20px rgba(249, 115, 22, 0.5);
 }
+/* End Button */
 .control-btn.end {
+  border-radius: 28px;
+  padding: 14px 28px;
+  background: linear-gradient(135deg, #F97316, #FB923C);
+  font-weight: 600;
+  color: white;
 }
+.control-btn.end:hover {
+  box-shadow: 0 10px 25px rgba(249, 115, 22, 0.6);
+  transform: scale(1.05);
 }
+/* Responsive */
+@media (max-width: 900px) {
+  .meeting-area {
+    grid-template-columns: 1fr;
+  }
 }
+/* * {
+  box-sizing: border-box;
+  font-family: system-ui, sans-serif;
 }
 body {
   margin: 0;
+  background: #202124;
+  color: white;
 }
 #app {
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
 }
+.top-bar {
+  padding: 12px 20px;
+  background: #303134;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
+.meeting-area {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 12px;
+  padding: 12px;
 }
+.video-tile {
+  background: #3c4043;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.2rem;
 }
+.controls {
+  padding: 12px;
+  background: #303134;
+  display: flex;
+  justify-content: center;
+  gap: 16px;
 }
+.control-btn {
+  background: #3c4043;
+  border: none;
+  color: white;
+  font-size: 1.1rem;
+  padding: 12px 16px;
+  border-radius: 50%;
   cursor: pointer;
 }
+.control-btn:hover {
+  background: #5f6368;
 }
+.control-btn.end {
+  border-radius: 24px;
+  padding: 12px 20px;
+  background: #ea4335;
 }
+.video-tile {
+  position: relative;
+  overflow: hidden;
+} */

vite.config.ts CHANGED Viewed

@@ -1,8 +1,94 @@
 import { defineConfig } from 'vite'
 export default defineConfig({
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true
-  }
 })

+// // import { defineConfig } from 'vite'
+// // export default defineConfig({
+// //   build: {
+// //     outDir: 'dist',
+// //     emptyOutDir: true
+// //   }
+// // })
+// import { defineConfig } from 'vite'
+// import fs from 'fs'
+// import path from 'path'
+// export default defineConfig({
+//   plugins: [
+//     {
+//       name: 'custom-router',
+//       configureServer(server) {
+//         server.middlewares.use((req, res, next) => {
+//           // Only allow /interview/*
+//           if (req.url!.startsWith('/interview/')) {
+//             const filePath = path.resolve('index.html')
+//             const html = fs.readFileSync(filePath, 'utf-8')
+//             res.setHeader('Content-Type', 'text/html')
+//             res.statusCode = 200
+//             res.end(html)
+//             return
+//           }
+//           // Everything else → 404
+//           res.statusCode = 404
+//           res.setHeader('Content-Type', 'text/plain')
+//           res.end('404 Not Found')
+//         })
+//       }
+//     }
+//   ]
+// })
 import { defineConfig } from 'vite'
+import fs from 'fs'
+import path from 'path'
 export default defineConfig({
+  server: {
+    proxy: {
+      '/interview': {
+        target: 'http://127.0.0.1:8000',
+        changeOrigin: true,
+        rewrite: (path) => path, // keep the path as-is
+      }
+    }
+  },
+  plugins: [
+    {
+      name: 'custom-router',
+      configureServer(server) {
+        server.middlewares.use((req, res, next) => {
+          const url = req.url || ''
+          // ✅ Allow Vite dev server internal requests
+          if (
+            url.startsWith('/@vite/') ||      // Vite HMR & modules
+            url.startsWith('/src/') ||        // src files
+            url.startsWith('/node_modules/') ||
+            url.startsWith('/public/') ||
+            url.includes('.')                  // any file with extension
+          ) {
+            return next()
+          }
+          // ✅ Serve interview.html only for /interview/*
+          if (url.startsWith('/interview/')) {
+            const filePath = path.resolve('index.html')
+            const html = fs.readFileSync(filePath, 'utf-8')
+            res.statusCode = 200
+            res.setHeader('Content-Type', 'text/html')
+            res.end(html)
+            return
+          }
+          // ❌ Everything else → 404
+          res.statusCode = 404
+          res.setHeader('Content-Type', 'text/plain')
+          res.end('404 Not Found')
+        })
+      }
+    }
+  ]
 })