前言

ChatGPT 最近一直都處于技術(shù)圈的討論焦點(diǎn)。它除了可作為普通用戶的日常 AI 助手，還可以幫助開(kāi)發(fā)者加速開(kāi)發(fā)進(jìn)度。聲網(wǎng)社區(qū)的一位開(kāi)發(fā)者 "小猿" 就基于 ChatGPT 做了一場(chǎng)實(shí)驗(yàn)。僅 40 分鐘就實(shí)現(xiàn)了一個(gè)互動(dòng)直播 Demo。他是怎么做的呢？他將整個(gè)過(guò)程記錄了下來(lái)。 （文章轉(zhuǎn)載自開(kāi)發(fā)者的個(gè)人博客，以下為正文） “遇事不決，AI 力學(xué)” ～ ChatGPT 可以說(shuō)是 2023 開(kāi)年最熱門的話題， 它不僅在極短時(shí)間內(nèi)風(fēng)靡了整個(gè)技術(shù)圈，更是病毒式地席卷了圈外的各個(gè)行業(yè)，并對(duì)各大企業(yè)都起到了實(shí)質(zhì)性影響：

谷歌緊急推出 “Bard” 對(duì)抗 ChatGPT

微軟發(fā)布新 Bing 集成 ChatGPT

復(fù)旦發(fā)布首個(gè)類 ChatGPT 模型 MOSS

國(guó)內(nèi)阿里、百度、昆侖萬(wàn)維、網(wǎng)易、京東都開(kāi)始新一輪 AI 軍備

那 ChatGPT 究竟有什么魔力能讓 “群雄折腰”？這和 ChatGPT 的實(shí)現(xiàn)有很大關(guān)系：

與以往的統(tǒng)計(jì)模型不行，ChatGPT 不是那種「一切都從語(yǔ)料統(tǒng)計(jì)里學(xué)習(xí)」的 AI，相反 ChatGPT 具備有臨場(chǎng)學(xué)習(xí)的能力，業(yè)內(nèi)稱之為 in-context learning ，這也是為什么 ChatGPT 可以在上下文中學(xué)習(xí)的原因。

ChatGPT 屬于 AI 領(lǐng)域在商用技術(shù)上的重大突破，當(dāng)然，本篇我們不是要討論 ChatGPT 的實(shí)現(xiàn)邏輯，而是 ChatGPT 會(huì)怎么樣加速我們的開(kāi)發(fā)？

PS：在此之前有人通過(guò)指示在 ChatGPT 界面下實(shí)現(xiàn)了一個(gè)虛擬機(jī)，雖然這是一個(gè)極端的例子，但是可以很直觀地感受到：「ChatGPT 對(duì)我們開(kāi)發(fā)的影響是肉眼可見(jiàn)」。

那 ChatGPT 在實(shí)際工作中是如何影響我們的開(kāi)發(fā)？為了更直觀，下面我們用一個(gè)開(kāi)發(fā)場(chǎng)景來(lái)模擬這個(gè)流程。

基于 ChatGPT 開(kāi)發(fā)

01 開(kāi)發(fā)之前

假設(shè)我們現(xiàn)在有一個(gè)開(kāi)發(fā)「直播」的需求，那我們可以直接求助 ChatGPT：

「開(kāi)發(fā)一個(gè)直播 app，是使用第三方 SDK 好還是自己從 0 開(kāi)發(fā)好」？

如下圖所示，從回答上可以看到，AI 建議我們根據(jù)團(tuán)隊(duì)實(shí)際情況去選擇，而在知曉「我的團(tuán)隊(duì)只有 5 個(gè)人」的情況后，它建議我選擇采用 “接入第三方 SDK” 的方式更合理。

那么選擇 “接入第三方 SDK” ，接下來(lái)的問(wèn)題就是：「選擇做直播，在中國(guó)推薦使用哪些廠家的 SDK」? 如下圖所示，這個(gè)問(wèn)題 ChatGPT 同樣提供了多個(gè)選項(xiàng)，從選項(xiàng)里看 *聲網(wǎng)、騰訊云和阿里云 * 好像都符合我們要求，而在接著的「優(yōu)勢(shì)問(wèn)題」對(duì)比上看，這三個(gè)選項(xiàng)都 “不相伯仲”，那我們就在再細(xì)化問(wèn)題。

假設(shè)我們希望直播可以有更多 “互動(dòng)能力”，那么把問(wèn)題修改為「做互動(dòng)直播，更推薦使用哪一個(gè)廠家的 SDK」，截圖如下圖所示，這次我們得到了更明確的答復(fù)，看來(lái)聲網(wǎng)的 SDK 會(huì)更貼合我們的需求。

為了更放心這個(gè)選擇，我們通過(guò)「聲網(wǎng) SDK的優(yōu)勢(shì)」和「什么產(chǎn)品使用了聲網(wǎng) SDK」兩個(gè)問(wèn)題進(jìn)行提問(wèn)，如下圖所示，從回復(fù)上看聲網(wǎng)作為一個(gè)全球化的廠家，在音視頻領(lǐng)域還是值得相信。同時(shí)，還有包括小米、陌陌等產(chǎn)品都使用了聲網(wǎng)的服務(wù)。那么就按照 AI 的建議選擇聲網(wǎng) SDK 吧。

有沒(méi)有發(fā)現(xiàn)，在獲取資料的檢索方式上，ChatGPT 確實(shí)比搜索引擎更直觀且高效。

那么敲定完 SDK ，接下來(lái)我們需要選擇應(yīng)用的開(kāi)發(fā)框架，我們把需求限定在 Android 和 iOS，更好是能兼容 Web，覆蓋整個(gè)移動(dòng)端 ，因?yàn)閳F(tuán)隊(duì)人數(shù)不多，所以我們希望采用跨平臺(tái)開(kāi)發(fā)來(lái)節(jié)約成本，那么問(wèn)題就是：

「移動(dòng)端哪個(gè)跨平臺(tái)框架更適合做直播」？

如下圖所示，得到的答案有 React Native 和 Flutter ，而恰好在 Flutter 回復(fù)里可以看到聲網(wǎng) SDK 的存在，所以我們可以敲定 App 開(kāi)發(fā)框架就選 Flutter 了。

最后，在開(kāi)發(fā)之前，我們還需要繼續(xù)提問(wèn)「如何獲取聲網(wǎng) SDK」和「使用聲網(wǎng) SDK 需要做什么」，這樣我們就可以在開(kāi)始開(kāi)發(fā)之前提前準(zhǔn)備好需要的東西。

關(guān)于注冊(cè)獲取 App ID 等步驟這里就省略了，畢竟目前這部分 ChatGPT 也無(wú)能為力。

02 開(kāi)始開(kāi)發(fā)

那么到這里我們就假定大家已經(jīng)準(zhǔn)備好了開(kāi)發(fā)環(huán)境，接下來(lái)可以直接進(jìn)行開(kāi)發(fā)。 我們還是繼續(xù)面向 ChatGPT 開(kāi)發(fā)，首先我們的提問(wèn)是：「用聲網(wǎng)的 Flutter SDK agora_rtc_engine 6.1.0寫(xiě)一個(gè)視頻通話頁(yè)面，給我 dart 代碼」，結(jié)果如下 GIF 所示，可以看到 ChatGPT 開(kāi)始了瘋狂的輸出：

為什么關(guān)鍵詞是「視頻通話」？因?yàn)樗戎辈?chǎng)景更精準(zhǔn)簡(jiǎn)單，生成的代碼更靠譜（經(jīng)過(guò)提問(wèn)測(cè)試），而基于視頻通話部分，后面我們可以快速拓展為互動(dòng)直播場(chǎng)景；而指定版本是為了避免 AI 使用舊版本 API。

從上門的代碼生成可以看到，ChatGPT 生產(chǎn)的代碼是自帶中文注釋，更貼心的是，如下圖所示，在生成的代碼末尾還給你解釋了這段代碼的實(shí)現(xiàn)邏輯，就像一個(gè) “知心大姐姐”。

從這里也可以感覺(jué)到 ，ChatGPT 不是一個(gè)單純的完全只會(huì)基于語(yǔ)料答復(fù)整合的 AI 。

當(dāng)然，直接復(fù)制生成的代碼后會(huì)發(fā)現(xiàn)這段代碼會(huì)報(bào)錯(cuò)，這和 ChatGPT 目前的模型數(shù)據(jù)版本有一定關(guān)系，所以針對(duì)生成的代碼我們需要做一定手動(dòng)調(diào)整，比如：

采用createAgoraRtcEngine和initialize創(chuàng)建和初始化RtcEngine

將setEventHandler修改為最新的registerEventHandler

將AgoraRenderWidget修改為AgoraVideoView

最后修改代碼如下，其中 80% 以上的邏輯都來(lái)自 ChatGPT 的自動(dòng)生成，雖然沒(méi)辦法做到 “直出”，這無(wú)疑大大提高了開(kāi)發(fā)的生產(chǎn)力。

class VideoCallPage extends StatefulWidget {
  final String channelName;

  const VideoCallPage({Key? key, required this.channelName}) : super(key: key);

  @override
  _VideoCallPageState createState() => _VideoCallPageState();
}

class _VideoCallPageState extends State {
  late RtcEngine _engine;
  bool _localUserJoined = false;
  bool _remoteUserJoined = false;
  int? rUid;

  @override
  void initState() {
    super.initState();
    initAgora();
  }

  @override
  void dispose() {
    _engine.leaveChannel();
    super.dispose();
  }

  Future initAgora() async {
    await [Permission.microphone, Permission.camera].request();

    _engine = createAgoraRtcEngine();
    await _engine.initialize(RtcEngineContext(
      appId: config.appId,
      channelProfile: ChannelProfileType.channelProfileLiveBroadcasting,
    ));

  

    _engine.registerEventHandler(RtcEngineEventHandler(
      onJoinChannelSuccess: (RtcConnection connection, int elapsed) {
        setState(() {
          _localUserJoined = true;
        });
      },
      onUserJoined: (connection, remoteUid, elapsed) {
        setState(() {
          _remoteUserJoined = true;
          rUid = remoteUid;
        });
      },
      onUserOffline: (RtcConnection connection, int remoteUid,
          UserOfflineReasonType reason) {
        setState(() {
          _remoteUserJoined = false;
          rUid = null;
        });
      },
    ));

    await _engine.enableVideo();

    await _engine.startPreview();

    await _engine.joinChannel(
      token: config.token,
      channelId: widget.channelName,
      uid: config.uid,
      options: const ChannelMediaOptions(
        channelProfile: ChannelProfileType.channelProfileLiveBroadcasting,
        clientRoleType: ClientRoleType.clientRoleBroadcaster,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("VideoCallPage"),),
      body: Center(
        child: Stack(
          children: [
            _remoteUserJoined ? _remoteVideoView(rUid) : _placeholderView(),
            _localUserJoined ? _localVideoView() : _placeholderView(),
          ],
        ),
      ),
    );
  }

  Widget _placeholderView() {
    return Container(
      color: Colors.black,
    );
  }

  Widget _remoteVideoView(id) {
    return AgoraVideoView(
      controller: VideoViewController.remote(
        rtcEngine: _engine,
        canvas: VideoCanvas(uid: id),
        connection: RtcConnection(channelId: widget.channelName),
      ),
    );
  }

  Widget _localVideoView() {
    return Positioned(
      right: 16,
      bottom: 16,
      width: 100,
      height: 160,
      child: AgoraVideoView(
        controller: VideoViewController(
          rtcEngine: _engine,
          canvas: const VideoCanvas(uid: 0),
        ),
      ),
    );
  }
}

接下來(lái)，如下圖所示，在將項(xiàng)目運(yùn)行到手機(jī)和 PC 端之后，可以看到我們就完成了最簡(jiǎn)單的直播視頻場(chǎng)景，而基于我們打算做直播的念頭僅僅過(guò)去了 40 分鐘，這其中還包含了注冊(cè)聲網(wǎng)賬號(hào)和申請(qǐng) App ID 的過(guò)程，我們通過(guò)簡(jiǎn)單的提問(wèn)、復(fù)制、粘貼、修改，就完成了一個(gè)直播需求的 demo。

紅色方塊是后期加上的打碼～

那么到這里，雖然目前為止 demo 項(xiàng)目還不是互動(dòng)直播，但是基于這個(gè) demo 實(shí)現(xiàn)互動(dòng)直播場(chǎng)景不會(huì)太難，因?yàn)槟阋呀?jīng)跑通了整個(gè) SDK 的鏈路流程了。

03 進(jìn)階開(kāi)發(fā)

那假設(shè)我們需要繼續(xù)往互動(dòng)直播的方向開(kāi)發(fā)，那么我們肯定會(huì)遇到 “互動(dòng)” 這個(gè)需求，比如「收到用戶發(fā)送的一段內(nèi)容后畫(huà)面彈出一個(gè)動(dòng)畫(huà)」 這樣的需求。 那么首先我們要知道聲網(wǎng) SDK 如何監(jiān)聽(tīng)用戶發(fā)送的內(nèi)容，所以接下來(lái)我們繼續(xù)提問(wèn)：「如何使用聲網(wǎng)的 agora_rtc_engine 6.1.0 監(jiān)聽(tīng)別人發(fā)送的文本消息」 ？

這里為什么還強(qiáng)制寫(xiě) agora_rtc_engine 6.1.0 ？因?yàn)槿绻粚?xiě)，默認(rèn)可能會(huì)輸出 4.x 版本的老 API。

盡管得到的答案并不是 Dart 代碼而是 OC ，但是關(guān)鍵詞registerEventHandler和Message我們捕抓到了，簡(jiǎn)單對(duì)比一下，就是Flutter SDK里的registerEventHandler對(duì)象，可以發(fā)現(xiàn)平替的接口就是onStreamMessage回調(diào)。

那么接著就是彈出什么內(nèi)容，因?yàn)槲覀儧](méi)有素材，假設(shè)還沒(méi)有設(shè)計(jì)師，那不如就讓 ChatGPT 幫我們畫(huà)一只兔子吧，不過(guò)測(cè)試結(jié)果并不好，如下圖所示，從輸出結(jié)果上看 ，這并不是我們想要的。

這里是我自己加的粉色，不然都是白色會(huì)糊成一坨，不得不說(shuō) ChatGPT 在繪制能力上 “很抽象”。

所以 ChatGPT 有時(shí)候也不是很智能，可能目前在繪畫(huà)理解上它還沒(méi)那么成熟， 但是沒(méi)問(wèn)題， ChatGPT 是可以通過(guò)上下文學(xué)習(xí) “調(diào)教” 的，比如我們覺(jué)得兔子的耳朵形狀太離譜，那么我們可以讓 ChatGPT 給我們調(diào)整。 如下所示，雖然調(diào)整之后依然不對(duì)，但是比起一開(kāi)始是不是好很多了？

這就是 ChatGPT 在每次會(huì)話上下文里學(xué)習(xí)的表現(xiàn)。

然后我們?cè)谕米佣涞幕A(chǔ)上再讓 ChatGPT 補(bǔ)全兔子頭，雖然最終的效果依然不理想，但是比起一開(kāi)始已經(jīng)進(jìn)步了很多。

同時(shí)我們還讓 ChatGPT 給我們畫(huà)了一個(gè) “星星”，然后結(jié)合這兩個(gè) Canvas 繪制的素材，我們?cè)诖a里設(shè)置接收到 "兔子" 和 星星 文本的時(shí)候，就彈出一個(gè)放大動(dòng)畫(huà)效果。 最終運(yùn)行后效果如下 GIF 所示，看起來(lái)很簡(jiǎn)陋，但是要知道，我們只是經(jīng)過(guò)了簡(jiǎn)單的復(fù)制 / 粘貼就完成了這樣的效果，這難道不是開(kāi)發(fā)效率的極大提高？

源碼在后面。

來(lái)自 ChatGPT 的兔子頭代碼：

class StarPaint extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: HeartPainter(),
      size: Size(50, 50),
    );
  }
}

class StarPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;
    final path = Path();
    final halfWidth = size.width / 2;
    final halfHeight = size.height / 2;
    final radius = halfWidth;

    path.moveTo(halfWidth, halfHeight + radius);
    path.arcToPoint(
      Offset(halfWidth + radius, halfHeight),
      radius: Radius.circular(radius),
      clockwise: true,
    );
    path.arcToPoint(
      Offset(halfWidth, halfHeight - radius),
      radius: Radius.circular(radius),
      clockwise: true,
    );
    path.arcToPoint(
      Offset(halfWidth - radius, halfHeight),
      radius: Radius.circular(radius),
      clockwise: true,
    );
    path.arcToPoint(
      Offset(halfWidth, halfHeight + radius),
      radius: Radius.circular(radius),
      clockwise: true,
    );
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant StarPaint oldDelegate) {
    return false;
  }
}

來(lái)自 ChatGPT 的星星代碼：

class StarPaint extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: HeartPainter(),
      size: Size(50, 50),
    );
  }
}

class StarPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = Colors.red
      ..style = PaintingStyle.fill;
    final path = Path();
    final halfWidth = size.width / 2;
    final halfHeight = size.height / 2;
    final radius = halfWidth;

    path.moveTo(halfWidth, halfHeight + radius);
    path.arcToPoint(
      Offset(halfWidth + radius, halfHeight),
      radius: Radius.circular(radius),
      clockwise: true,
    );
    path.arcToPoint(
      Offset(halfWidth, halfHeight - radius),
      radius: Radius.circular(radius),
      clockwise: true,
    );
    path.arcToPoint(
      Offset(halfWidth - radius, halfHeight),
      radius: Radius.circular(radius),
      clockwise: true,
    );
    path.arcToPoint(
      Offset(halfWidth, halfHeight + radius),
      radius: Radius.circular(radius),
      clockwise: true,
    );
    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant StarPaint oldDelegate) {
    return false;
  }
}

自己補(bǔ)充的監(jiān)聽(tīng)文本、發(fā)送文本和動(dòng)畫(huà)效果代碼：

onStreamMessage: (RtcConnection connection, int remoteUid, int streamId,
    Uint8List data, int length, int sentTs) {
  var message = utf8.decode(data);
  if (message == "兔子") {
    showDialog(
        context: context,
        builder: (context) {
          return AnimaWidget(Rabbit());
        });
  } else if (message == "星星") {
    showDialog(
        context: context,
        builder: (context) {
          return Center(
            child: AnimaWidget(StarPaint()),
          );
        });
  }
  Future.delayed(Duration(seconds: 3), () {
    Navigator.pop(context);
  });
},

Future _onPressSend() async {
  try {
    final streamId = await _engine.createDataStream(
        const DataStreamConfig(syncWithAudio: false, ordered: false));
    var txt = (Random().nextInt(10) % 2 == 0) ? "星星" : "兔子";
    final data = Uint8List.fromList(utf8.encode(txt));
    await _engine.sendStreamMessage(
        streamId: streamId, data: data, length: data.length);
  } catch (e) {
    print(e);
  }
}

class AnimaWidget extends StatefulWidget {
  final Widget child;

  const AnimaWidget(this.child);

  @override
  State createState() => _AnimaWidgetState();
}

class _AnimaWidgetState extends State {
  double animaScale = 1;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 1), () {
      animaScale = 5;
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    return AnimatedScale(
        scale: animaScale,
        duration: Duration(seconds: 1),
        curve: Curves.bounceIn,
        child: Container(child: widget.child));
  }
}

相信到這里大家應(yīng)該可以感受到 ChatGPT 提高開(kāi)發(fā)效率的魅力，甚至你還可以把 ChatGPT 集成到你的直播場(chǎng)景里，通過(guò) Flutter 上的chatgpt_api_client插件，你可以在 App 里直接向 ChatGPT 提問(wèn)，比如通過(guò) OpenAI 的 API 實(shí)現(xiàn)一個(gè)可以互動(dòng)的虛擬主播。

我怎么知道這個(gè)插件？肯定也是問(wèn) ChatGPT 的啊～

04 最后

到這里，相信大家應(yīng)該能感受到，在使用 ChatGPT 之后，** 整個(gè)開(kāi)發(fā)效率能夠得到很大的提升，特別是內(nèi)容檢索的高效和準(zhǔn)確上比搜索引擎更加靠譜，** 另外也能幫我們完成一些 “體力活” 形式的代碼。 當(dāng)然我們也看到了目前 ChatGPT 并不能完全替代人工，因?yàn)樗诤芏喾矫嫔傻膬?nèi)容并不完美，特別是很多代碼還是需要我們?nèi)斯ふ{(diào)整，但是這并不影響 ChatGPT 的價(jià)值。 最后引用我曾經(jīng)看到過(guò)的關(guān)于 ChatGPT 的一些評(píng)價(jià)：

「當(dāng)你抱怨 ChatGPT 鬼話連篇滿嘴跑火車的時(shí)候，這可能有點(diǎn)像你看到一只猴子在沙灘上用石頭寫(xiě)下 1+1=3。它確實(shí)算錯(cuò)了，但這不是重點(diǎn)。它有一天會(huì)算對(duì)的?！?/p>

我相信 AI 并不是直接取代人類的方式，因?yàn)樗鼘?duì)社會(huì)的擠壓不是從水平上碾壓，而是劣幣驅(qū)逐良幣，比如有位大佬就說(shuō)過(guò)：「乙方最討厭甲方什么都不懂還 bb，但乙方的議價(jià)權(quán)恰恰來(lái)源于甲方什么都不懂還 bb」 ，而現(xiàn)在 ChatGPT 在慢慢消磨掉整個(gè)議價(jià)權(quán)。 總的來(lái)說(shuō)「ChatGPT 只是一個(gè)產(chǎn)品，它不代表的整個(gè)技術(shù)的 “上限” ，它代表的是技術(shù)已經(jīng)到達(dá)商用的臨界點(diǎn)」。 現(xiàn)在，它在慢慢成為開(kāi)發(fā)圈子里的習(xí)慣，和曾經(jīng)的 Copilot 一樣，而同時(shí)它在其他領(lǐng)域如文字編排等的能力，甚至遠(yuǎn)超它在開(kāi)發(fā)領(lǐng)域的價(jià)值。

審核編輯 ：李倩