Create app.py

app.py

@@ -0,0 +1,70 @@
+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/[email protected]/icons/phone.svg`,
+    },
+    loading: {
+      color: `rgb(93, 124, 202)`,
+      type: "pill",
+      title: "Connecting...",
+      subtitle: "Please wait",
+      icon: `https://unpkg.com/[email protected]/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/[email protected]/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
+
+# Gradio 인터페이스 생성
+iface = gr.Interface(
+    fn=show_widget,
+    inputs=[],  # 입력 없음
+    outputs=gr.outputs.HTML(label="Vapi Voice Widget"),  # HTML 출력
+    title="Vapi Voice Widget Integration Example",
+    description="This is an example of integrating the Vapi Voice Widget into a Gradio web app."
+)
+
+# 인터페이스 실행
+iface.launch()