Spaces:

S-Dreamer
/

retellai

Running

App Files Files Community

S-Dreamer commited on May 15

Commit

933798f

verified ·

1 Parent(s): 55a0121

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +307 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Retellai
-emoji: 🏆
-colorFrom: pink
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: retellai
+emoji: 🐳
+colorFrom: gray
+colorTo: red
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,307 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Voice Outbound Agent Builder</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .gradient-bg {
+            background: linear-gradient(135deg, #6b46c1 0%, #4299e1 100%);
+        }
+        .code-block {
+            background-color: #2d3748;
+            border-radius: 0.5rem;
+            padding: 1rem;
+            font-family: 'Courier New', monospace;
+            overflow-x: auto;
+        }
+        .step-card {
+            transition: all 0.3s ease;
+        }
+        .step-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+        }
+        .tab-active {
+            border-bottom: 3px solid #4299e1;
+            color: #4299e1;
+            font-weight: 600;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="gradient-bg text-white py-12 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto text-center">
+            <h1 class="text-4xl md:text-5xl font-bold mb-4">AI Voice Outbound Agent</h1>
+            <p class="text-xl md:text-2xl opacity-90">Build with Retell AI & Sesame CSM-1B Model</p>
+            <div class="mt-8 flex justify-center space-x-4">
+                <a href="#guide" class="px-6 py-3 bg-white text-indigo-700 rounded-lg font-medium hover:bg-gray-100 transition">Get Started</a>
+                <a href="#demo" class="px-6 py-3 border-2 border-white text-white rounded-lg font-medium hover:bg-white hover:bg-opacity-10 transition">Live Demo</a>
+            </div>
+        </div>
+    </div>
+    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8" id="guide">
+        <div class="text-center mb-12">
+            <h2 class="text-3xl font-bold text-gray-800 mb-4">Step-by-Step Guide</h2>
+            <p class="text-lg text-gray-600 max-w-3xl mx-auto">Follow these steps to create your AI voice outbound agent using the latest technologies.</p>
+        </div>
+        <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            <!-- Step 1 -->
+            <div class="step-card bg-white rounded-xl shadow-md overflow-hidden p-6">
+                <div class="flex items-center mb-4">
+                    <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">1</div>
+                    <h3 class="text-xl font-semibold text-gray-800">Environment Setup</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Install the required Python libraries for the Retell AI integration.</p>
+                <div class="code-block text-gray-200 text-sm mb-4">
+                    <pre>pip install retell-ai aiohttp</pre>
+                </div>
+                <div class="flex items-center text-sm text-gray-500">
+                    <i class="fas fa-info-circle mr-2"></i>
+                    <span>Python 3.8+ required</span>
+                </div>
+            </div>
+            <!-- Step 2 -->
+            <div class="step-card bg-white rounded-xl shadow-md overflow-hidden p-6">
+                <div class="flex items-center mb-4">
+                    <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">2</div>
+                    <h3 class="text-xl font-semibold text-gray-800">Retell AI Authentication</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Authenticate with your Retell AI API key.</p>
+                <div class="code-block text-gray-200 text-sm mb-4">
+                    <pre>import retell
+client = retell.Client(api_key="your_api_key")</pre>
+                </div>
+                <div class="flex items-center text-sm text-gray-500">
+                    <i class="fas fa-key mr-2"></i>
+                    <span>Get API key from Retell dashboard</span>
+                </div>
+            </div>
+            <!-- Step 3 -->
+            <div class="step-card bg-white rounded-xl shadow-md overflow-hidden p-6">
+                <div class="flex items-center mb-4">
+                    <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">3</div>
+                    <h3 class="text-xl font-semibold text-gray-800">Agent Behavior</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Define your agent's persona and conversation flow.</p>
+                <div class="code-block text-gray-200 text-sm mb-4">
+                    <pre>agent_config = {
+    "initial_message": "Hello, this is Alex from Customer Support.",
+    "voice": "male-1",
+    "persona": "friendly and professional"
+}</pre>
+                </div>
+                <div class="flex items-center text-sm text-gray-500">
+                    <i class="fas fa-robot mr-2"></i>
+                    <span>Customize as needed</span>
+                </div>
+            </div>
+            <!-- Step 4 -->
+            <div class="step-card bg-white rounded-xl shadow-md overflow-hidden p-6">
+                <div class="flex items-center mb-4">
+                    <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">4</div>
+                    <h3 class="text-xl font-semibold text-gray-800">Sesame AI Integration</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Configure the agent to use CSM-1B model.</p>
+                <div class="code-block text-gray-200 text-sm mb-4">
+                    <pre>agent_config["llm"] = {
+    "model": "csm-1b",
+    "provider": "sesame"
+}</pre>
+                </div>
+                <div class="flex items-center text-sm text-gray-500">
+                    <i class="fas fa-brain mr-2"></i>
+                    <span>Latest Sesame AI model</span>
+                </div>
+            </div>
+            <!-- Step 5 -->
+            <div class="step-card bg-white rounded-xl shadow-md overflow-hidden p-6">
+                <div class="flex items-center mb-4">
+                    <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">5</div>
+                    <h3 class="text-xl font-semibold text-gray-800">Outbound Call</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Initiate the call with recipient's phone number.</p>
+                <div class="code-block text-gray-200 text-sm mb-4">
+                    <pre>response = client.calls.create(
+    phone_number="+15551234567",
+    agent_config=agent_config
+)</pre>
+                </div>
+                <div class="flex items-center text-sm text-gray-500">
+                    <i class="fas fa-phone mr-2"></i>
+                    <span>E.164 format required</span>
+                </div>
+            </div>
+            <!-- Step 6 -->
+            <div class="step-card bg-white rounded-xl shadow-md overflow-hidden p-6">
+                <div class="flex items-center mb-4">
+                    <div class="bg-indigo-100 text-indigo-800 rounded-full w-10 h-10 flex items-center justify-center font-bold mr-4">6</div>
+                    <h3 class="text-xl font-semibold text-gray-800">Call Events</h3>
+                </div>
+                <p class="text-gray-600 mb-4">Handle call events and responses.</p>
+                <div class="code-block text-gray-200 text-sm mb-4">
+                    <pre>@client.on("call.connected")
+async def handle_connected(call):
+    print(f"Call connected: {call.id}")
+@client.on("agent.response")
+async def handle_response(response):
+    print(f"Agent said: {response.text}")</pre>
+                </div>
+                <div class="flex items-center text-sm text-gray-500">
+                    <i class="fas fa-bell mr-2"></i>
+                    <span>Register event handlers</span>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 bg-gray-100 rounded-xl" id="demo">
+        <div class="text-center mb-8">
+            <h2 class="text-3xl font-bold text-gray-800 mb-2">Complete Example</h2>
+            <p class="text-lg text-gray-600">Here's the full implementation you can use as a starting point.</p>
+        </div>
+        <div class="mb-6">
+            <div class="flex border-b border-gray-200">
+                <button class="tab-active py-2 px-4 font-medium">Python</button>
+            </div>
+        </div>
+        <div class="code-block text-gray-200 text-sm mb-8">
+            <pre><code class="language-python">import asyncio
+import retell
+# Initialize client with your API key
+client = retell.Client(api_key="your_api_key_here")
+# Configure your agent
+agent_config = {
+    "initial_message": "Hello, this is Alex calling from Customer Support.",
+    "voice": "male-1",
+    "persona": "friendly and professional",
+    "llm": {
+        "model": "csm-1b",
+        "provider": "sesame"
+    }
+}
+# Event handlers
+@client.on("call.connected")
+async def handle_connected(call):
+    print(f"Call {call.id} connected to {call.phone_number}")
+@client.on("agent.response")
+async def handle_response(response):
+    print(f"Agent response: {response.text}")
+@client.on("call.ended")
+async def handle_ended(call):
+    print(f"Call {call.id} ended")
+async def make_call():
+    try:
+        # Start the call
+        response = await client.calls.create(
+            phone_number="+15551234567",  # Replace with actual number
+            agent_config=agent_config
+        )
+        print(f"Call initiated: {response.id}")
+    except Exception as e:
+        print(f"Error making call: {e}")
+# Run the call
+asyncio.run(make_call())</code></pre>
+        </div>
+        <div class="bg-white rounded-xl shadow-md p-6">
+            <h3 class="text-xl font-semibold text-gray-800 mb-4">Potential Issues & Solutions</h3>
+            <div class="space-y-4">
+                <div class="flex items-start">
+                    <div class="bg-red-100 text-red-800 rounded-full w-6 h-6 flex items-center justify-center font-bold mr-3 mt-1 flex-shrink-0">!</div>
+                    <div>
+                        <h4 class="font-medium text-gray-800">API Key Errors</h4>
+                        <p class="text-gray-600 text-sm">Ensure your API key is correct and has proper permissions. Rotate keys if needed.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-yellow-100 text-yellow-800 rounded-full w-6 h-6 flex items-center justify-center font-bold mr-3 mt-1 flex-shrink-0">!</div>
+                    <div>
+                        <h4 class="font-medium text-gray-800">Phone Number Format</h4>
+                        <p class="text-gray-600 text-sm">Use E.164 format (+[country code][number]) for phone numbers.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="bg-blue-100 text-blue-800 rounded-full w-6 h-6 flex items-center justify-center font-bold mr-3 mt-1 flex-shrink-0">!</div>
+                    <div>
+                        <h4 class="font-medium text-gray-800">Model Not Available</h4>
+                        <p class="text-gray-600 text-sm">Check Retell AI documentation for latest supported models if CSM-1B isn't available.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
+        <div class="bg-indigo-50 rounded-xl p-8 text-center">
+            <h2 class="text-2xl font-bold text-indigo-800 mb-4">Ready to Build Your AI Agent?</h2>
+            <p class="text-indigo-700 mb-6">Sign up on Retell AI to get started with the Sesame CSM-1B model today.</p>
+            <a href="https://retellai.com" target="_blank" class="inline-flex items-center px-6 py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">
+                <i class="fas fa-external-link-alt mr-2"></i>
+                Visit Retell AI
+            </a>
+        </div>
+    </div>
+    <footer class="bg-gray-800 text-white py-8 px-4 sm:px-6 lg:px-8">
+        <div class="max-w-7xl mx-auto">
+            <div class="text-center">
+                <p class="text-gray-400">AI Voice Outbound Agent Builder using Retell AI & Sesame CSM-1B</p>
+                <div class="flex justify-center space-x-6 mt-4">
+                    <a href="#" class="text-gray-400 hover:text-white">
+                        <i class="fab fa-github text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white">
+                        <i class="fab fa-twitter text-xl"></i>
+                    </a>
+                    <a href="#" class="text-gray-400 hover:text-white">
+                        <i class="fab fa-discord text-xl"></i>
+                    </a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Simple tab functionality
+        document.querySelectorAll('button').forEach(button => {
+            button.addEventListener('click', () => {
+                document.querySelectorAll('button').forEach(btn => {
+                    btn.classList.remove('tab-active');
+                });
+                button.classList.add('tab-active');
+            });
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function (e) {
+                e.preventDefault();
+                document.querySelector(this.getAttribute('href')).scrollIntoView({
+                    behavior: 'smooth'
+                });
+            });
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=S-Dreamer/retellai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ "You are an expert Software Developer specializing in AI voice applications, particularly with the Retell AI platform and the Sesame AI model CSM-1B. Your task is to outline the steps and code snippets required to create a simple AI voice outbound agent using these technologies. Provide a clear, concise, and practical guide that another developer can follow. Here is the format you will use to structure your response: --- ## Goal Create a simple AI voice outbound agent using the latest Sesame AI model CSM-1B on retellai.com. ## Prerequisites * Retell AI account and API key. * Basic understanding of Python and asynchronous programming. * Familiarity with the Retell AI documentation. ## Step 1: Setting up the Environment $step_1_description (Include code snippet for installing necessary libraries) ## Step 2: Authenticating with Retell AI $step_2_description (Include code snippet for authenticating using the API key) ## Step 3: Defining the Agent's Behavior $step_3_description (Explain how to define the agent's persona, initial message, and conversation flow. Include example code for defining a simple conversation flow.) ## Step 4: Integrating with Sesame AI (CSM-1B) $step_4_description (Explain how to specify the CSM-1B model for voice generation and processing. Include code snippet for configuring the agent to use CSM-1B.) ## Step 5: Making the Outbound Call $step_5_description (Explain how to initiate an outbound call using the Retell AI API. Include code snippet for making the call, specifying the recipient's phone number, and handling call events.) ## Step 6: Handling Call Events and Responses $step_6_description (Explain how to listen for and process call events such as `call.connected`, `call.ended`, and `agent.response`. Include code snippets for handling these events and extracting the agent's responses.) ## Step 7: Running the Agent $step_7_description (Provide instructions on how to execute the code and test the outbound agent.) ## Example Code (Complete) $complete_code_example (Provide a complete, runnable code example that incorporates all the steps above.) ## Potential Issues and Troubleshooting $potential_issues_and_troubleshooting (List common issues and their solutions, such as API key errors, network connectivity problems, and unexpected agent behavior.) --- Now, provide the detailed steps and code snippets to create the AI voice outbound agent as described above."