詳解智能體應(yīng)用——網(wǎng)課生成Agent

?? AI能改變什么，這或許又是一個Agent能帶來巨大改變的業(yè)務(wù)邏輯，網(wǎng)課有多種形式常見的有如視頻網(wǎng)課、圖文網(wǎng)課。
?? 網(wǎng)絡(luò)課程從十幾二十年前就開始流行，各行各業(yè)都有自己的網(wǎng)絡(luò)課程，從中小學(xué)、職業(yè)教育、證書考試、繼續(xù)教育等。但網(wǎng)課的制作并不容易，需要耗費大量的人力物力，視頻課程還需要專門的錄制設(shè)備，錄制室。圖文課程也需要人工將每個課程的章節(jié)、習(xí)題等手工錄入或?qū)氲?strong>網(wǎng)課系統(tǒng)。
?? 這里只介紹可交互的圖文網(wǎng)絡(luò)課程生成Agent，通過用戶上傳指定的文本資料，自動生成基于該資料的網(wǎng)課課程。文章的末尾將提供網(wǎng)課智能體所生成的頁面展示。

智能體描述

?? 上傳課程材料填寫課程級別(初級、中級、高級)與課程名稱后智能體將能夠根據(jù)課程材料文本數(shù)據(jù)自動生成完整的可交互式的網(wǎng)絡(luò)課程，每個課程都包含多個章節(jié)，章節(jié)詳情可做到根據(jù)章節(jié)具體內(nèi)容而生成可視化的交互學(xué)習(xí)頁面。如學(xué)習(xí)頁面包含可交互的組件以及圖表。每個章節(jié)還會存在多種類型(選擇題、判斷題、填空題等）的練習(xí)題。
?? 智能體工作主要流程：課程材料>課程信息>課程章節(jié)生成>章節(jié)詳情生成>章節(jié)習(xí)題生成，具體業(yè)務(wù)流程如下圖所示。

Agent結(jié)構(gòu)

課程信息Agent

?? 以課程材料、填寫的課程級別等信息為上下文生成生成課程簡要描述文本以及課程基本信息。

課程章節(jié)Agent

?? 以課程材料為上下文生成課程章節(jié)，課程章節(jié)包括：章節(jié)標題、章節(jié)描述、學(xué)習(xí)時長等。

章節(jié)詳情Agent

?? 以課程材料、章節(jié)描述信息為上下文生成章節(jié)詳情，章節(jié)內(nèi)容會根據(jù)不用的內(nèi)容使用文本、可視化圖表、交互組件等展示章節(jié)內(nèi)容。

章節(jié)代碼檢查Agent

?? 檢查上個Agent所生成的章節(jié)詳情頁面代碼是否包含基本的運行時錯誤等。

章節(jié)習(xí)題Agent

?? 以章節(jié)內(nèi)容為上下文，生成章節(jié)習(xí)題，習(xí)題包括：題干、問題選項、正確答案、習(xí)題解析。

章節(jié)詳情Agent實現(xiàn)

?? 在這個網(wǎng)課智能體中，所具有看點的應(yīng)該是本Agent的實現(xiàn)，網(wǎng)課的可交互頁面的學(xué)習(xí)體驗也依賴于此Agent。這個環(huán)節(jié)也是最有可能出錯的。智能體的輸入為：課程材料、章節(jié)詳情、React組件。輸出為根據(jù)章節(jié)內(nèi)容所適配的可交互React代碼。下面代碼為輸出的React可視化示例：

() => {
const data = [
  { name: '訓(xùn)練集', value: 70 },
  { name: '驗證集', value: 15 },
  { name: '測試集', value: 15 }
];

return (
  <div>
    <Recharts.PieChart width={400} height={300}>
      <Recharts.Pie
        data={data}
        cx="50%"
        cy="50%"
        labelLine={true}
        label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
        outerRadius={80}
        fill="#8884d8"
        dataKey="value"
      >
        {data.map((entry, index) => (
          <Recharts.Cell key={`cell-${index}`} fill={['#4e79a7', '#f28e2c', '#e15759'][index % 3]} />
        ))}
      </Recharts.Pie>
      <Recharts.Tooltip />
    </Recharts.PieChart>
    <p className="text-center mt-4">測試集、訓(xùn)練集、驗證集占整個數(shù)據(jù)集的比例</p>
  </div>
);}

提示詞如下：

你是負責(zé)用 React + JSX 創(chuàng)建引人入勝的可視化講解的智能體。  

你的工作流程如下：

1. 你將從規(guī)劃智能體那里收到一個主題及要點列表
2. 你需要為用戶創(chuàng)建一個吸引人的解釋/演示

## Output Format
<start of your output>
() => {
     const [counter,setCounter]=React.useState(0); // by default your code has access to the React object
     const increase=()=>{
       setCounter(counter+1);
     };
     return (<>
       <button onClick={increase}>+</button>
       <span>{'counter : '+ counter}</span>
       </>);
}
<end of your output>

重要注意事項
請僅輸出我指定的組件部分，尤其不要包含：
- 代碼前后的 ```jsx 標簽
- <start of your output><end of your output>
- 任何關(guān)于代碼的解釋或包圍代碼的文字
你的代碼會被立即解析并展示給用戶，因此務(wù)必避免語法錯誤!!

----
風(fēng)格指南:
- 你的首要任務(wù)是通過可視化講解和交互性防止用戶感到無聊。
- 在此過程中，盡量把概念講得越清晰越好。
- 使用具體示例。
- 不要包含練習(xí)題，這tester agent的任務(wù)。
- 確保組件占滿其父容器的 100%。
- 不要創(chuàng)建幻燈片，而是做成一整頁可連續(xù)滾動的頁面。

## 可用庫與插件
你將可以訪問若干庫和插件，下面將為你提供它們的文檔:

擴展

?? 上面所描述的智能體流程比較簡單，還可以進一步完善如引入RAG、試卷、考試等功能，使其達到一個較高的可用度。
在加入RAG的支持后，可通過向量檢索實現(xiàn)由用戶自定義只生成用戶所關(guān)心的課程材料中某個主題的網(wǎng)絡(luò)課程。在完成課程生成后和配套生成整個課程的試卷，試卷可以是一套或者N套。擴充章節(jié)內(nèi)容，目前章節(jié)沒有細分小節(jié)或內(nèi)容不夠長，通常大章節(jié)都有會幾個小知識點。

?? 變革才剛剛開始，目前由于模型幻覺、成本等因素智能體現(xiàn)在階段完全取代網(wǎng)課系統(tǒng)也不現(xiàn)實，加上目前視頻生成也不是很成熟，但相信用不了多久的未來無論是圖文網(wǎng)課或是視頻網(wǎng)課量大量都是由AI Agent自動生成。

文章首發(fā)地址：https://mp.weixin.qq.com/s/2qU0OKRnGjoTMdoAJEP_dw