app.py

import gradio as gr

# HTML 위젯 코드. 실제 `<assistant_id>`와 `<your_public_api_key>`는 적절한 값으로 대체해야 합니다.
widget_html = """
<div id="vapi-widget-container"></div>
<script>
  var vapiInstance = null;
  const assistant = "d7aa8e1f-e2c6-4c97-a7d7-b32101eb1e0a"; // Assistant ID로 대체
  const apiKey = "ea671a92-bb34-46dc-b999-70ef53b64a4b"; // Public key로 대체
  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,
        containerId: 'vapi-widget-container',  // Vapi 위젯을 포함할 컨테이너 ID
      });
    };
  })(document, "script");
</script>
"""

def show_widget():
    # Gradio HTML 컴포넌트에 위젯 코드를 전달합니다.
    return widget_html


css = """
.gradio button.gr-button:enabled {
    display: none;
}
"""

iface = gr.Interface(
    fn=show_widget,
    inputs=[],
    outputs=gr.HTML(label="Vapi Voice Widget"),
    title="Vapi Voice Widget Integration Example",
    description="This is an example of integrating the Vapi Voice Widget into a Gradio web app.",
    live=True,  # live 모드 활성화
    css=css  # CSS를 추가하여 "Generate" 버튼을 숨깁니다.
)

# 인터페이스 실행
iface.launch()