Update app.py

app.py

@@ -1,52 +1,69 @@
 import streamlit as st
 import streamlit.components.v1 as components
+import os
 
-# Streamlit 앱 타이틀 설정
+# Vapi.ai Voice Widget 설정을 위한 변수
+assistant_id = "36f0a337-96e4-48e0-b13d-ad632eeea312"
+public_api_key = "ea671a92-bb34-46dc-b999-70ef53b64a4b"
+
+# Streamlit 페이지 타이틀 설정
 st.title('Vapi.ai Voice Widget Integration')
 
-# Vapi Voice Widget HTML 및 JavaScript 스니펫
-vapi_widget_snippet = """
+# HTML 및 JavaScript 코드를 통해 Vapi.ai Voice Widget 삽입
+html_code = f"""
 <script>
-  var vapiInstance = null;
-  const assistant = "36f0a337-96e4-48e0-b13d-ad632eeea312"; // 여기에 실제 어시스턴트 ID 입력
-  const apiKey = "ea671a92-bb34-46dc-b999-70ef53b64a4b"; // 여기에 실제 Public API 키 입력
-  const buttonConfig = {
-    // 버튼 구성 설정
-    position: "bottom-right",
-    offset: "40px",
-    width: "50px",
-    height: "50px",
-    idle: {
-      color: `rgb(93, 254, 202)`, 
-      type: "pill",
-      title: "Have a quick question?",
-      subtitle: "Talk with our AI assistant",
-      icon: `https://unpkg.com/lucide-static@0.321.0/icons/phone.svg`,
-    }
-  };
+var vapiInstance = null;
+const assistant = "{assistant_id}"; // 어시스턴트 ID
+const apiKey = "{public_api_key}"; // 공개 API 키
+const buttonConfig = {{
+  position: "bottom-right",
+  offset: "40px",
+  width: "50px",
+  height: "50px",
+  idle: {{
+    color: "rgb(93, 254, 202)",
+    type: "pill",
+    title: "Have a quick question?",
+    subtitle: "Talk with our AI assistant",
+    icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone.svg",
+  }},
+  loading: {{
+    color: "rgb(93, 124, 202)",
+    type: "pill",
+    title: "Connecting...",
+    subtitle: "Please wait",
+    icon: "https://unpkg.com/lucide-static@0.321.0/icons/loader-2.svg",
+  }},
+  active: {{
+    color: "rgb(255, 0, 0)",
+    type: "pill",
+    title: "Call is in progress...",
+    subtitle: "End the call.",
+    icon: "https://unpkg.com/lucide-static@0.321.0/icons/phone-off.svg",
+  }},
+}};
 
-  (function(d, t) {
-    var g = d.createElement(t),
+(function (d, t) {{
+  var g = d.createElement(t),
       s = d.getElementsByTagName(t)[0];
-    g.src = "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js";
-    g.defer = true;
-    g.async = true;
-    s.parentNode.insertBefore(g, s);
-
-    g.onload = function() {
-      vapiInstance = window.vapiSDK.run({
-        apiKey: apiKey,
-        assistant: assistant,
-        config: buttonConfig,
-      });
-    };
-  })(document, "script");
+  g.src = "https://cdn.jsdelivr.net/gh/VapiAI/html-script-tag@latest/dist/assets/index.js";
+  g.defer = true;
+  g.async = true;
+  s.parentNode.insertBefore(g, s);
+  
+  g.onload = function () {{
+    vapiInstance = window.vapiSDK.run({{
+      apiKey: apiKey,
+      assistant: assistant,
+      config: buttonConfig,
+    }});
+  }};
+}})(document, "script");
 </script>
 """
 
-# 버튼 클릭으로 위젯의 실행/중지를 제어하기 위한 스니펫을 Streamlit 컴포넌트로 삽입
-components.html(vapi_widget_snippet, height=0)
+# 버튼 클릭으로 Vapi Voice Widget 실행/중지 안내
+st.markdown("Note: 버튼을 클릭하여 Vapi Voice Widget을 실행/중지하세요.")
 
-st.markdown("""
-**Note:** 버튼을 클릭하여 Vapi Voice Widget을 실행/중지하세요. 
-""")
+# Streamlit 컴포넌트를 통해 HTML & JavaScript 코드 삽입
+components.html(html_code, height=0)