تعاملات صوتی در زمان واقعی با آداپتور صوتی WebSocket

نویسندگان: Mark Sze، Tvrtko Sternak، Davor Runje، Davorin Rusevljan

TL;DR:

• اجرای نسخه ی نمایشی: یک وب سایت را با استفاده از سوکت های وب پیاده سازی کنید و با استفاده از صدا با آن ارتباط برقرار کنید RealtimeAgent

• معرفی کردن WebSocketAudioAdapter: پخش مستقیم صدا از مرورگر خود با استفاده از وب سوکت ها.

• توسعه ساده شده: با حداقل تنظیمات، به سرعت و بدون زحمت به عوامل بیدرنگ متصل شوید.

بیدرنگ از طریق WebSockets

در ما پست قبلی وبلاگ، روشی برای تعامل با را معرفی کردیم RealtimeAgent با استفاده از TwilioAudioAdapter. در حالی که این رویکرد موثر بود، نیاز به یک فرآیند فشرده راه‌اندازی داشت تویلیو یکپارچه سازی، پیکربندی حساب، ارسال شماره و سایر پیچیدگی ها. امروز، ما هیجان‌زده هستیم تا آن را معرفی کنیمWebSocketAudioAdapter، یک رویکرد ساده برای پخش صدا در زمان واقعی به طور مستقیم از طریق یک مرورگر وب.

این پست به بررسی ویژگی ها، مزایا و پیاده سازی آن می پردازد WebSocketAudioAdapter، نشان می دهد که چگونه نحوه ارتباط ما با عوامل بلادرنگ را تغییر می دهد.

چالش ها با راه حل های موجود

قبلا معرفی شده است TwilioAudioAdapter یک راه قوی برای اتصال به شما فراهم می کند RealtimeAgent، با چالش هایی همراه است:

• محدودیت های مرورگر: برای تیم‌هایی که برنامه‌های اول وب را ایجاد می‌کنند، ادغام با یک پلت فرم تلفن می‌تواند غیرضروری باشد.

• راه اندازی پیچیده: پیکربندی حساب‌های Twilio، تأیید شماره‌ها و تنظیم بازارسال می‌تواند زمان‌بر باشد.

• وابستگی به پلتفرم: این راه حل به توسعه دهندگان نیاز دارد که به API خارجی تکیه کنند، که تأخیر و هزینه را اضافه می کند.

راه حل ما

را WebSocketAudioAdapter این چالش ها را با اجازه دادن به پخش مستقیم صوتی از بین می برد وب سوکت ها. این یکپارچه با فناوری‌های مدرن وب ادغام می‌شود و تعاملات صوتی بلادرنگ را بدون پلت‌فرم‌های تلفن خارجی ممکن می‌سازد.

چگونه کار می کند

در هسته آن، WebSocketAudioAdapter اهرم ها وب سوکت ها برای مدیریت پخش صدا در زمان واقعی. این بدان معناست که مرورگر شما به پل ارتباطی تبدیل می شود و بسته های صوتی را به سروری می فرستد که در آن a RealtimeAgent عامل آنها را پردازش می کند.

در اینجا یک مرور سریع از اجزای آن و نحوه تطبیق آنها با یکدیگر آورده شده است:

1. اتصال وب سوکت:

* The adapter establishes a [**WebSockets**](https://fastapi.tiangolo.com/advanced/websockets/) connection between the client (browser) and the server.

* Audio packets are streamed in real time through this connection.

1. ادغام با FastAPI:

* Using Python’s [**FastAPI**](https://fastapi.tiangolo.com/) framework, developers can easily set up endpoints for handling [**WebSockets**](https://fastapi.tiangolo.com/advanced/websockets/) traffic.

1. پشتیبانی شده توسط Realtime Agents:

* The audio adapter integrates with an AI-powered [`RealtimeAgent`](https://docs.ag2.ai/docs/reference/agentchat/realtime_agent/realtime_agent), allowing the agent to process audio inputs and respond intelligently.

ویژگی های کلیدی

1. راه اندازی ساده شده

بر خلاف TwilioAudioAdapter، WebSocketAudioAdapter به شماره تلفن، پیکربندی تلفن و هیچ حساب خارجی نیاز ندارد. این یک راه حل plug-and-play است.

2. عملکرد زمان واقعی

با پخش جریانی صدا وب سوکت ها، آداپتور تاخیر کم را تضمین می کند و باعث می شود مکالمات طبیعی و بدون درز باشد.

3. مبتنی بر مرورگر

همه چیز در مرورگر کاربر اتفاق می افتد، به این معنی که نیازی به نرم افزار اضافی نیست. این آن را برای برنامه های تحت وب ایده آل می کند.

4. ادغام انعطاف پذیر

چه در حال ساخت یک ربات چت، یک دستیار صوتی یا یک برنامه تعاملی باشید، آداپتور می تواند به راحتی با چارچوب های موجود و سیستم های هوش مصنوعی ادغام شود.

مثال: یک ربات هواشناسی با قابلیت صدا بسازید

بیایید از طریق یک مثال عملی که در آن از آن استفاده می کنیم WebSocketAudioAdapter برای ایجاد یک ربات هواشناسی با قابلیت صوتی. می توانید نمونه کامل را پیدا کنید اینجا.

برای اجرای نمونه دمو، مراحل زیر را دنبال کنید:

1. Repository را شبیه سازی کنید

git clone https://github.com/ag2ai/realtime-agent-over-websockets.git
cd realtime-agent-over-websockets

2. تنظیم متغیرهای محیطی

ایجاد یک OAI_CONFIG_LIST فایل بر اساس ارائه شده OAI_CONFIG_LIST_sample:

cp OAI_CONFIG_LIST_sample OAI_CONFIG_LIST

در فایل OAI_CONFIG_LIST، به روز رسانی کنید api_key به کلید OpenAI API شما.

(اختیاری) یک محیط مجازی ایجاد و استفاده کنید

برای کاهش شلوغی محیط جهانی پایتون در دستگاه خود، می توانید یک محیط مجازی ایجاد کنید. در خط فرمان خود وارد کنید:

python3 -m venv env
source env/bin/activate

3. Dependencies را نصب کنید

با استفاده از بسته های پایتون مورد نیاز را نصب کنید pip:

pip install -r requirements.txt

4. سرور را راه اندازی کنید

برنامه را با Uvicorn اجرا کنید:

uvicorn realtime_over_websockets.main:app --port 5050

پس از راه اندازی سرور، باید برنامه خود را در حال اجرا در گزارش ها مشاهده کنید:

INFO:     Started server process [64425]
INFO:     Waiting for application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://0.0.0.0:5050 (Press CTRL+C to quit)

برای چت آماده هستید؟ 🚀

اکنون می توانید به سادگی باز کنید localhost:5050/ start-chat در مرورگر خود، و وارد یک مکالمه تعاملی با آن شوید RealtimeAgent! 🎤✨

برای شروع، به سادگی با میکروفون خود صحبت کنید و یک سوال بپرسید. برای مثال می توانید بگویید:

“آب و هوا در سیاتل چگونه است؟”

این سوال اولیه عامل را فعال می‌کند، و پاسخ می‌دهد و توانایی خود را در درک و تعامل با شما در زمان واقعی نشان می‌دهد.

بررسی کد

بیایید به بررسی نحوه عملکرد این مثال بپردازیم – از راه‌اندازی سرور تا مدیریت پخش جریانی صدا در زمان واقعی با وب سوکت ها.

برنامه FastAPI را راه اندازی کنید

استفاده می کنیم FastAPI برای ارائه رابط چت و مدیریت اتصالات WebSocket. یک بخش کلیدی، پیکربندی سرور برای بارگیری و ارائه الگوهای HTML به صورت پویا برای رابط کاربری است.

• در حال بارگذاری الگو: استفاده کنید Jinja2Templates برای بارگیری chat.html از templates دایرکتوری الگو به صورت پویا با متغیرهایی مانند سرور ارائه می شود port.

• فایل های استاتیک: دارایی ها (به عنوان مثال، جاوا اسکریپت، CSS) را از static دایرکتوری

app = FastAPI()


@app.get("/", response_class=JSONResponse)
async def index_page() -> dict[str, str]:
    return {"message": "WebSocket Audio Stream Server is running!"}


website_files_path = Path(__file__).parent / "website_files"

app.mount(
    "/static", StaticFiles(directory=website_files_path / "static"), name="static"
)

templates = Jinja2Templates(directory=website_files_path / "templates")


@app.get("/start-chat/", response_class=HTMLResponse)
async def start_chat(request: Request) -> HTMLResponse:
    """Endpoint to return the HTML page for audio chat."""
    port = request.url.port
    return templates.TemplateResponse("chat.html", {"request": request, "port": port})

تعریف نقطه پایانی WebSocket

را /media-stream مسیر WebSocket جایی است که تعامل صوتی بی‌درنگ پردازش و به دستیار هوش مصنوعی پخش می‌شود. بیایید گام به گام آن را تجزیه کنیم:

1. اتصال WebSocket را بپذیرید اتصال WebSocket زمانی برقرار می شود که یک کلاینت به آن متصل می شود /media-stream. با استفاده از await websocket.accept()، اطمینان حاصل می کنیم که اتصال زنده و آماده برای ارتباط است.

@app.websocket("/media-stream")
async def handle_media_stream(websocket: WebSocket) -> None:
    """Handle WebSocket connections providing audio stream and OpenAI."""
    await websocket.accept()

2. ورود به سیستم اولیه یک نمونه لاگر (getLogger("uvicorn.error")) برای نظارت و اشکال زدایی فعالیت های سرور تنظیم شده است و به ردیابی رویدادها در طول فرآیند اتصال و تعامل کمک می کند.

    logger = getLogger("uvicorn.error")

3. را تنظیم کنید WebSocketAudioAdapter را WebSocketAudioAdapter جریان صوتی مشتری را با RealtimeAgent. داده های صوتی را به صورت جریانی پخش می کند وب سوکت ها در زمان واقعی، اطمینان از ارتباط یکپارچه بین مرورگر و عامل.

    audio_adapter = WebSocketAudioAdapter(websocket, logger=logger)

4. عامل Realtime را پیکربندی کنید را RealtimeAgent دستیار هوش مصنوعی است که تعامل را هدایت می کند. پارامترهای کلیدی عبارتند از:

* **Name**: The agent identity, here called `"Weather Bot"`.

* **System Message**: System message for the agent.

* **Language Model Configuration**: Defined by `realtime_llm_config` for LLM settings.

* **Audio Adapter**: Connects the [`WebSocketAudioAdapter`](https://docs.ag2.ai/docs/reference/agentchat/realtime_agent/websocket_audio_adapter#websocketaudioadapter) for handling audio.

* **Logger**: Logs the agent’s activities for better observability.

    realtime_agent = RealtimeAgent(
        name="Weather Bot",
        system_message="Hello there! I am an AI voice assistant powered by Autogen and the OpenAI Realtime API. You can ask me about weather, jokes, or anything you can imagine. Start by saying 'How can I help you'?",
        llm_config=realtime_llm_config,
        audio_adapter=audio_adapter,
        logger=logger,
    )

5. یک تابع بیدرنگ سفارشی را تعریف کنید را get_weather تابع به عنوان یک تابع قابل فراخوانی بلادرنگ ثبت می شود. هنگامی که کاربر در مورد آب و هوا می پرسد، عامل می تواند عملکرد را برای دریافت گزارش آب و هوای دقیق فراخوانی کند و بر اساس اطلاعات ارائه شده پاسخ دهد:

* Returns `"The weather is cloudy."` for `"Seattle"`.

* Returns `"The weather is sunny."` for other locations.

    @realtime_agent.register_realtime_function(  # type: ignore [misc]
        name="get_weather", description="Get the current weather"
    )
    def get_weather(location: Annotated[str, "city"]) -> str:
        return (
            "The weather is cloudy."
            if location == "Seattle"
            else "The weather is sunny."
        )

6. Realtime Agent را اجرا کنید را await realtime_agent.run() متد عامل را راه‌اندازی می‌کند، جریان‌های صوتی دریافتی را مدیریت می‌کند، درخواست‌های کاربر را پردازش می‌کند و در زمان واقعی پاسخ می‌دهد.

در اینجا کد کامل برای /media-stream نقطه پایانی:

@app.websocket("/media-stream")
async def handle_media_stream(websocket: WebSocket) -> None:
    """Handle WebSocket connections providing audio stream and OpenAI."""
    await websocket.accept()

    logger = getLogger("uvicorn.error")

    audio_adapter = WebSocketAudioAdapter(websocket, logger=logger)

    realtime_agent = RealtimeAgent(
        name="Weather Bot",
        system_message="Hello there! I am an AI voice assistant powered by Autogen and the OpenAI Realtime API. You can ask me about weather, jokes, or anything you can imagine. Start by saying 'How can I help you'?",
        llm_config=realtime_llm_config,
        audio_adapter=audio_adapter,
        logger=logger,
    )

    @realtime_agent.register_realtime_function(  # type: ignore [misc]
        name="get_weather", description="Get the current weather"
    )
    def get_weather(location: Annotated[str, "city"]) -> str:
        return (
            "The weather is cloudy."
            if location == "Seattle"
            else "The weather is sunny."
        )

    await realtime_agent.run()

مزایا در عمل

• نمونه سازی سریع: یک برنامه صوتی بلادرنگ را در چند دقیقه بچرخانید.

• کارایی هزینه: حذف هزینه های تلفن شخص ثالث.

• کاربر پسند: در مرورگر اجرا می شود و برای هر کسی که میکروفون دارد قابل دسترسی است.

نتیجه گیری

را WebSocketAudioAdapter نشان دهنده تغییر به سمت راه حل های صوتی ساده تر و در دسترس تر است. توسعه دهندگان را قادر می سازد تا برنامه های صوتی را سریعتر و کارآمدتر بسازند و به کار گیرند. چه در حال ایجاد یک دستیار هوش مصنوعی، یک برنامه با قابلیت صوتی یا یک پروژه آزمایشی باشید، این آداپتور ابزاری است که برای پخش صدای بلادرنگ استفاده می کنید.

آن را امتحان کنید و ایده های صوتی خود را زنده کنید!

پیدا کردن این مفید است؟

را تیم AG2 به سختی برای ایجاد محتوایی مانند این کار می کند، به غیر از ایجاد یک پلتفرم قدرتمند، منبع باز و سرتاسر برای اتوماسیون چند عاملی.

ساده ترین راه برای نشان دادن حمایت خود، ستاره کردن است مخزن AG2، بلکه برای مشارکت یا صرفاً برای امتحان کردن به آن نگاهی بیندازید.

همچنین، اگر موارد استفاده جالبی برای RealtimeAgent دارید، به ما اطلاع دهید؟ یا شاید دوست دارید ویژگی ها یا پیشرفت های بیشتری ببینید؟ به ما بپیوندید اختلاف سرور برای بحث