app.py

import streamlit as st
import streamlit.components.v1 as components
import os

# 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')

# HTML 및 JavaScript 코드를 통해 Vapi.ai Voice Widget 삽입
html_code = f"""
<script>
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),
      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");
</script>
"""

# 버튼 클릭으로 Vapi Voice Widget 실행/중지 안내
st.markdown("Note: 버튼을 클릭하여 Vapi Voice Widget을 실행/중지하세요.")

# Streamlit 컴포넌트를 통해 HTML & JavaScript 코드 삽입
components.html(html_code, height=0)