AutogenWebDemo 项目教程

AutogenWebDemo 项目教程

1. 项目的目录结构及介绍

autogenwebdemo/
├── backend/
│   ├── src/
│   │   └── groupchatweb.py
│   └── ...
├── react-frontend/
│   └── ...
├── .gitignore
├── LICENSE
├── README.md
└── ...

• backend/: 包含FastAPI后端应用的源代码。
  • src/: 后端的主要代码文件夹。
    • groupchatweb.py: 后端的主要逻辑文件。
• react-frontend/: 包含React前端应用的源代码。
• .gitignore: Git忽略文件配置。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

后端启动文件

backend/src/groupchatweb.py

该文件是FastAPI应用的入口点，包含应用的初始化和主要逻辑。

from fastapi import FastAPI, WebSocket, Request
from fastapi.responses import HTMLResponse
import uuid
from autogen_chat import AutogenChat
import asyncio
import uvicorn
from dotenv import load_dotenv, find_dotenv
import openai
import os

_ = load_dotenv(find_dotenv())  # 读取本地环境文件
openai.api_key = os.environ['OPENAI_API_KEY']

app = FastAPI()
app.autogen_chat = {}

class ConnectionManager:
    def __init__(self):
        self.active_connections: list[AutogenChat] = []

    async def connect(self, autogen_chat: AutogenChat):
        await autogen_chat.websocket.accept()
        self.active_connections.append(autogen_chat)

    def disconnect(self, autogen_chat: AutogenChat):
        self.active_connections.remove(autogen_chat)

    async def send_personal_message(self, message: str, autogen_chat: AutogenChat):
        await autogen_chat.websocket.send_text(message)

    async def broadcast(self, message: str):
        for connection in self.active_connections:
            await connection.websocket.send_text(message)

manager = ConnectionManager()

@app.websocket("/ws/{client_id}")
async def websocket_endpoint(websocket: WebSocket, client_id: str):
    autogen_chat = AutogenChat(websocket)
    await manager.connect(autogen_chat)
    try:
        while True:
            data = await websocket.receive_text()
            await manager.send_personal_message(f"You said: {data}", autogen_chat)
            await manager.broadcast(f"Client #{client_id} says: {data}")
    except WebSocketDisconnect:
        manager.disconnect(autogen_chat)
        await manager.broadcast(f"Client #{client_id} left the chat")

if __name__ == "__main__":
    uvicorn.run(app, host="0.0.0.0", port=8000)

前端启动文件

react-frontend/src/index.js

该文件是React应用的入口点，包含应用的初始化和主要逻辑。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

3. 项目的配置文件介绍

后端配置文件

.env

该文件包含项目的配置信息，如OpenAI API密钥等。

OPENAI_API_KEY=your_openai_api_key

前端配置文件

react-frontend/.env

该文件包含前端应用的配置信息，如API地址等。

REACT_APP_API_URL=http://localhost:8000

以上是AutogenWebDemo项目的详细教程，涵盖了项目的目录