autogen ui

Autogen UI

สำคัญ

repo นี้ได้รับการอัปเดตเพื่อใช้อินเตอร์เฟส Autogen AgentChat ตาม Autogen 0.4X AgentChat API ใหม่ นอกจากนี้ API อาจเปลี่ยนแปลงดังนั้นคาดว่าจะมีการเปลี่ยนแปลงบางอย่างในอนาคต

Hello World สำหรับการสร้างอินเทอร์เฟซ UI ด้วย Autogen AgentChat API

ตัวอย่าง UI เพื่อสาธิตวิธีการสร้างอินเตอร์เฟสโดยใช้ Autogen AgentChat API UI ถูกสร้างขึ้นโดยใช้ next.js และเว็บ API ที่สร้างขึ้นโดยใช้ fastapi

แอพทำอะไร?

• autogenui.manager - ให้วิธีการเรียกใช้อย่างง่ายที่ใช้เวลาแจ้งและส่งคืนการตอบสนองจากทีมตัวแทนที่กำหนดไว้ล่วงหน้า ดูไฟล์กำหนดค่าทีมตัวแทน JSON เพื่อดูว่าตัวแทนได้รับการกำหนดค่าอย่างไร มันให้ความคิดทั่วไปเกี่ยวกับประเภทของตัวแทนที่ได้รับการสนับสนุน ฯลฯ ตรวจสอบสมุดบันทึกการสอนสำหรับตัวอย่างเกี่ยวกับวิธีการใช้คลาส PRIST เพื่อโหลดข้อมูลจำเพาะของทีม

• autogenui.web.app.py - แบ็กเอนด์ Fastapi ที่ให้บริการปลายทางที่ง่าย /generate จุดสิ้นสุดที่ใช้เวลาและส่งคืนการตอบสนองจากทีมตัวแทนที่กำหนดไว้ล่วงหน้า

  • สร้างผู้จัดการเพื่อทำงาน
  • สตรีมผลลัพธ์ของงานทำงานไปยัง UI ของไคลเอนต์

• frontend - Next.js Frontend ที่ให้อินเทอร์เฟซแชทง่าย ๆ เพื่อโต้ตอบกับแบ็กเอนด์

ถัดไปคืออะไร?

แอพนี้เป็นเพียงจุดเริ่มต้นอย่างชัดเจน นี่คือแนวคิดบางอย่างเกี่ยวกับวิธีการขยาย:

• ขยายตัวจัดการเพื่อรองรับการกำหนดค่าหลายทีมจาก UI
• การจัดเก็บและโหลดประวัติปฏิสัมพันธ์ในฐานข้อมูล
• ความปลอดภัย - เพิ่มการรับรองความถูกต้องและการอนุญาตให้กับแอป

[! เคล็ดลับ] หมายเหตุ Autogen Studio กำลังถูกเขียนใหม่บน AgentChat API เพื่อระบุจุดส่วนใหญ่ข้างต้น ดูการใช้งานที่นั่นเพื่อเป็นตัวอย่างที่สมบูรณ์ยิ่งขึ้น

เริ่มต้น

โปรดทราบว่าคุณจะต้องตั้งค่า OpenAI_API_KEY ของคุณเพื่อเรียกใช้แอพ

 export OPENAI_API_KEY= < your key >

ติดตั้งการพึ่งพา ต้องใช้ Python 3.9+ คุณสามารถติดตั้งจาก PYPI โดยใช้ PIP

pip install autogenui

หรือติดตั้งจากแหล่งที่มา

git clone [email protected]:victordibia/autogen-ui.git
cd autogenui
pip install -e .

เรียกใช้เซิร์ฟเวอร์ UI

ตั้งค่า env vars OPENAI_API_KEY

 export OPENAI_API_KEY= < your_key > 

autogenui # or with --port 8081

เปิด http: // localhost: 8081 ในเบราว์เซอร์ของคุณ

ในการแก้ไขไฟล์ต้นฉบับให้ทำการเปลี่ยนแปลงในไฟล์ต้นฉบับส่วนหน้าและเรียกใช้การเรียกใช้ npm run build เพื่อสร้างส่วนหน้าใหม่

การพัฒนา

ในการเรียกใช้แอพในโหมดการพัฒนาคุณจะต้องเรียกใช้แบ็กเอนด์และส่วนหน้าแยกต่างหาก

แบ็กเอนด์ - พร้อมการโหลดร้อน

autogenui --reload

[! เคล็ดลับ] ทิป UI ที่โหลดโดย CLI นี้ในเวอร์ชันที่สมบูรณ์แบบโดยใช้คำสั่ง Build Frontend Build แสดง นั่นหมายความว่าหากคุณทำการเปลี่ยนแปลงรหัสส่วนหน้าหรือเปลี่ยนชื่อโฮสต์หรือพอร์ตแบ็กเอนด์จะทำงานบนรหัสส่วนหน้าที่อัปเดตส่วนหน้าจะต้องสร้างใหม่เพื่อให้โหลดผ่านคำสั่งนี้

ส่วนหน้า

 cd frontend

ติดตั้งการพึ่งพา

yarn install

รันในโหมด dev - ด้วย reload ร้อน

ตั้งค่า NEXT_PUBLIC_API_SERVER บนบรรทัดคำสั่ง

 export NEXT_PUBLIC_API_SERVER=http:// < your_backend_hostname > /api

หรือสร้างไฟล์ .env ในโฟลเดอร์ Frontend ด้วยเนื้อหาต่อไปนี้

NEXT_PUBLIC_API_SERVER=http:// < your_backend_hostname > /api

โดยที่ your_backend_hostname - ชื่อโฮสต์ที่ Autogenui ทำงานบน EG localhost:8081

yarn dev

(Re) สร้าง

อย่าลืมติดตั้งการพึ่งพาและตั้งค่า NEXT_PUBLIC_API_SERVER ก่อนสร้าง

yarn build

แผนงาน

มีแผนงานมากนักสำหรับโครงการนี้ มันมีความหมายเป็นตัวอย่างง่ายๆในการเริ่มต้นด้วย Autogen AgentChat API สำหรับตัวอย่างที่สมบูรณ์ยิ่งขึ้นลองดูที่โครงการ Autogen Studio

การอ้างอิง

• Autogen Studio

 @inproceedings{dibia2024autogen,
  title={AutoGen Studio: A No-Code Developer Tool for Building and Debugging Multi-Agent Systems},
  author={Dibia, Victor and Chen, Jingya and Bansal, Gagan and Syed, Suff and Fourney, Adam and Zhu, Erkang and Wang, Chi and Amershi, Saleema},
  journal={EMNLP 2024},
  year={2024}
}

• autogen

 @inproceedings{wu2023autogen,
      title={AutoGen: Enabling Next-Gen LLM Applications via Multi-Agent Conversation Framework},
      author={Qingyun Wu and Gagan Bansal and Jieyu Zhang and Yiran Wu and Shaokun Zhang and Erkang Zhu and Beibin Li and Li Jiang and Xiaoyun Zhang and Chi Wang},
      year={2023},
      eprint={2308.08155},
      archivePrefix={arXiv},
      primaryClass={cs.AI}
}