0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
会员中心
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

把ChatGPT加入Flutter开发,会有怎样的体验?

OSC开源社区 来源:OSCHINA 社区 2023-03-06 09:43 次阅读

前言

ChatGPT 最近一直都处于技术圈的讨论焦点。它除了可作为普通用户的日常 AI 助手,还可以帮助开发者加速开发进度。声网社区的一位开发者 "小猿" 就基于 ChatGPT 做了一场实验。仅 40 分钟就实现了一个互动直播 Demo。他是怎么做的呢?他将整个过程记录了下来。 (文章转载自开发者的个人博客,以下为正文) “遇事不决,AI 力学” ~ ChatGPT 可以说是 2023 开年最热门的话题, 它不仅在极短时间内风靡了整个技术圈,更是病毒式地席卷了圈外的各个行业,并对各大企业都起到了实质性影响:

谷歌紧急推出 “Bard” 对抗 ChatGPT

微软发布新 Bing 集成 ChatGPT

复旦发布首个类 ChatGPT 模型 MOSS

国内阿里、百度、昆仑万维、网易、京东都开始新一轮 AI 军备

那 ChatGPT 究竟有什么魔力能让 “群雄折腰”?这和 ChatGPT 的实现有很大关系:

与以往的统计模型不行,ChatGPT 不是那种「一切都从语料统计里学习」的 AI,相反 ChatGPT 具备有临场学习的能力,业内称之为 in-context learning ,这也是为什么 ChatGPT 可以在上下文中学习的原因。

ChatGPT 属于 AI 领域在商用技术上的重大突破,当然,本篇我们不是要讨论 ChatGPT 的实现逻辑,而是 ChatGPT 会怎么样加速我们的开发?

PS:在此之前有人通过指示在 ChatGPT 界面下实现了一个虚拟机,虽然这是一个极端的例子,但是可以很直观地感受到:「ChatGPT 对我们开发的影响是肉眼可见」。

那 ChatGPT 在实际工作中是如何影响我们的开发?为了更直观,下面我们用一个开发场景来模拟这个流程。

基于 ChatGPT 开发

01 开发之前

假设我们现在有一个开发「直播」的需求,那我们可以直接求助 ChatGPT:

「开发一个直播 app,是使用第三方 SDK 好还是自己从 0 开发好」?

如下图所示,从回答上可以看到,AI 建议我们根据团队实际情况去选择,而在知晓「我的团队只有 5 个人」的情况后,它建议我选择采用 “接入第三方 SDK” 的方式更合理。

8888c4dc-bb89-11ed-bfe3-dac502259ad0.png

89236384-bb89-11ed-bfe3-dac502259ad0.png

那么选择 “接入第三方 SDK” ,接下来的问题就是:「选择做直播,在中国推荐使用哪些厂家的 SDK」? 如下图所示,这个问题 ChatGPT 同样提供了多个选项,从选项里看 *声网、腾讯云和阿里云 * 好像都符合我们要求,而在接着的「优势问题」对比上看,这三个选项都 “不相伯仲”,那我们就在再细化问题。

896312fe-bb89-11ed-bfe3-dac502259ad0.png

8a3759ba-bb89-11ed-bfe3-dac502259ad0.png

假设我们希望直播可以有更多 “互动能力”,那么把问题修改为「做互动直播,更推荐使用哪一个厂家的 SDK」,截图如下图所示,这次我们得到了更明确的答复,看来声网的 SDK 会更贴合我们的需求。

8ae095fc-bb89-11ed-bfe3-dac502259ad0.png

为了更放心这个选择,我们通过「声网 SDK的优势」和「什么产品使用了声网 SDK」两个问题进行提问,如下图所示,从回复上看声网作为一个全球化的厂家,在音视频领域还是值得相信。同时,还有包括小米、陌陌等产品都使用了声网的服务。那么就按照 AI 的建议选择声网 SDK 吧。

8b633598-bb89-11ed-bfe3-dac502259ad0.png

8bfff414-bb89-11ed-bfe3-dac502259ad0.png

有没有发现,在获取资料的检索方式上,ChatGPT 确实比搜索引擎更直观且高效。

那么敲定完 SDK ,接下来我们需要选择应用的开发框架,我们把需求限定在 AndroidiOS,更好是能兼容 Web,覆盖整个移动端 ,因为团队人数不多,所以我们希望采用跨平台开发来节约成本,那么问题就是:

「移动端哪个跨平台框架更适合做直播」?

如下图所示,得到的答案有 React Native 和 Flutter ,而恰好在 Flutter 回复里可以看到声网 SDK 的存在,所以我们可以敲定 App 开发框架就选 Flutter 了。

8c563d6a-bb89-11ed-bfe3-dac502259ad0.png

最后,在开发之前,我们还需要继续提问「如何获取声网 SDK」和「使用声网 SDK 需要做什么」,这样我们就可以在开始开发之前提前准备好需要的东西。

8d3ec792-bb89-11ed-bfe3-dac502259ad0.png

8db7471c-bb89-11ed-bfe3-dac502259ad0.png

关于注册获取 App ID 等步骤这里就省略了,毕竟目前这部分 ChatGPT 也无能为力。

02 开始开发

那么到这里我们就假定大家已经准备好了开发环境,接下来可以直接进行开发。 我们还是继续面向 ChatGPT 开发,首先我们的提问是:「用声网的 Flutter SDK agora_rtc_engine 6.1.0写一个视频通话页面,给我 dart 代码」,结果如下 GIF 所示,可以看到 ChatGPT 开始了疯狂的输出:

为什么关键词是「视频通话」?因为它比直播场景更精准简单,生成的代码更靠谱(经过提问测试),而基于视频通话部分,后面我们可以快速拓展为互动直播场景;而指定版本是为了避免 AI 使用旧版本 API

8e585008-bb89-11ed-bfe3-dac502259ad0.gif

从上门的代码生成可以看到,ChatGPT 生产的代码是自带中文注释,更贴心的是,如下图所示,在生成的代码末尾还给你解释了这段代码的实现逻辑,就像一个 “知心大姐姐”。

8f2354e2-bb89-11ed-bfe3-dac502259ad0.png

从这里也可以感觉到 ,ChatGPT 不是一个单纯的完全只会基于语料答复整合的 AI 。

当然,直接复制生成的代码后会发现这段代码会报错,这和 ChatGPT 目前的模型数据版本有一定关系,所以针对生成的代码我们需要做一定手动调整,比如:

采用createAgoraRtcEngine和initialize创建和初始化RtcEngine

将setEventHandler修改为最新的registerEventHandler

将AgoraRenderWidget修改为AgoraVideoView

最后修改代码如下,其中 80% 以上的逻辑都来自 ChatGPT 的自动生成,虽然没办法做到 “直出”,这无疑大大提高了开发的生产力。

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),
        ),
      ),
    );
  }
}
接下来,如下图所示,在将项目运行到手机和 PC 端之后,可以看到我们就完成了最简单的直播视频场景,而基于我们打算做直播的念头仅仅过去了 40 分钟,这其中还包含了注册声网账号和申请 App ID 的过程,我们通过简单的提问、复制、粘贴、修改,就完成了一个直播需求的 demo。

8f896db8-bb89-11ed-bfe3-dac502259ad0.png

红色方块是后期加上的打码~

那么到这里,虽然目前为止 demo 项目还不是互动直播,但是基于这个 demo 实现互动直播场景不会太难,因为你已经跑通了整个 SDK 的链路流程了。

03 进阶开发

那假设我们需要继续往互动直播的方向开发,那么我们肯定会遇到 “互动” 这个需求,比如「收到用户发送的一段内容后画面弹出一个动画」 这样的需求。 那么首先我们要知道声网 SDK 如何监听用户发送的内容,所以接下来我们继续提问:「如何使用声网的 agora_rtc_engine 6.1.0 监听别人发送的文本消息」 ?

这里为什么还强制写 agora_rtc_engine 6.1.0 ?因为如果不写,默认可能会输出 4.x 版本的老 API。

尽管得到的答案并不是 Dart 代码而是 OC ,但是关键词registerEventHandler和Message我们捕抓到了,简单对比一下,就是Flutter SDK里的registerEventHandler对象,可以发现平替的接口就是onStreamMessage回调。

90080a56-bb89-11ed-bfe3-dac502259ad0.png

那么接着就是弹出什么内容,因为我们没有素材,假设还没有设计师,那不如就让 ChatGPT 帮我们画一只兔子吧,不过测试结果并不好,如下图所示,从输出结果上看 ,这并不是我们想要的。

这里是我自己加的粉色,不然都是白色会糊成一坨,不得不说 ChatGPT 在绘制能力上 “很抽象”。

90ad3990-bb89-11ed-bfe3-dac502259ad0.png

910aa54e-bb89-11ed-bfe3-dac502259ad0.png

所以 ChatGPT 有时候也不是很智能,可能目前在绘画理解上它还没那么成熟, 但是没问题, ChatGPT 是可以通过上下文学习 “调教” 的,比如我们觉得兔子的耳朵形状太离谱,那么我们可以让 ChatGPT 给我们调整。 如下所示,虽然调整之后依然不对,但是比起一开始是不是好很多了?

91268e94-bb89-11ed-bfe3-dac502259ad0.png

91701b18-bb89-11ed-bfe3-dac502259ad0.png

这就是 ChatGPT 在每次会话上下文里学习的表现。

然后我们在兔子耳朵的基础上再让 ChatGPT 补全兔子头,虽然最终的效果依然不理想,但是比起一开始已经进步了很多。

917f25ea-bb89-11ed-bfe3-dac502259ad0.png

同时我们还让 ChatGPT 给我们画了一个 “星星”,然后结合这两个 Canvas 绘制的素材,我们在代码里设置接收到 "兔子" 和 星星 文本的时候,就弹出一个放大动画效果。 最终运行后效果如下 GIF 所示,看起来很简陋,但是要知道,我们只是经过了简单的复制 / 粘贴就完成了这样的效果,这难道不是开发效率的极大提高?

源码在后面。

91ab15ba-bb89-11ed-bfe3-dac502259ad0.gif

来自 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;
  }
}
来自 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;
  }
}
自己补充的监听文本、发送文本和动画效果代码:
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));
  }
}
相信到这里大家应该可以感受到 ChatGPT 提高开发效率的魅力,甚至你还可以把 ChatGPT 集成到你的直播场景里,通过 Flutter 上的chatgpt_api_client插件,你可以在 App 里直接向 ChatGPT 提问,比如通过 OpenAI 的 API 实现一个可以互动的虚拟主播。

我怎么知道这个插件?肯定也是问 ChatGPT 的啊~

935ce46a-bb89-11ed-bfe3-dac502259ad0.png

93a6573a-bb89-11ed-bfe3-dac502259ad0.png

04 最后

到这里,相信大家应该能感受到,在使用 ChatGPT 之后,** 整个开发效率能够得到很大的提升,特别是内容检索的高效和准确上比搜索引擎更加靠谱,** 另外也能帮我们完成一些 “体力活” 形式的代码。 当然我们也看到了目前 ChatGPT 并不能完全替代人工,因为它在很多方面生成的内容并不完美,特别是很多代码还是需要我们人工调整,但是这并不影响 ChatGPT 的价值。 最后引用我曾经看到过的关于 ChatGPT 的一些评价:

「当你抱怨 ChatGPT 鬼话连篇满嘴跑火车的时候,这可能有点像你看到一只猴子在沙滩上用石头写下 1+1=3。它确实算错了,但这不是重点。它有一天会算对的。」

我相信 AI 并不是直接取代人类的方式,因为它对社会的挤压不是从水平上碾压,而是劣币驱逐良币,比如有位大佬就说过:「乙方最讨厌甲方什么都不懂还 bb,但乙方的议价权恰恰来源于甲方什么都不懂还 bb」 ,而现在 ChatGPT 在慢慢消磨掉整个议价权。 总的来说「ChatGPT 只是一个产品,它不代表的整个技术的 “上限” ,它代表的是技术已经到达商用的临界点」。 现在,它在慢慢成为开发圈子里的习惯,和曾经的 Copilot 一样,而同时它在其他领域如文字编排等的能力,甚至远超它在开发领域的价值。


审核编辑 :李倩

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • AI
    AI
    +关注

    关注

    87

    文章

    29611

    浏览量

    267905
  • SDK
    SDK
    +关注

    关注

    3

    文章

    1017

    浏览量

    45658
  • ChatGPT
    +关注

    关注

    29

    文章

    1540

    浏览量

    7316

原文标题:把ChatGPT加入Flutter开发,会有怎样的体验?

文章出处:【微信号:OSC开源社区,微信公众号:OSC开源社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    鸿蒙Flutter实战:11-使用 Flutter SDK 3.22.0

    # 使用 Flutter SDK 3.22.0 ## SDK 安装 参考[鸿蒙Flutter实战:01-搭建开发环境]文章的说明,首先安装 Flutter SDK 3.22.0。
    发表于 11-01 15:03

    怎样搭建基于 ChatGPT 的聊天系统

    理解ChatGPT和API ChatGPT是由OpenAI开发的一种先进的自然语言处理模型,它能够理解和生成自然语言文本。要使用ChatGPT,你需要访问其API。OpenAI提供了
    的头像 发表于 10-25 16:23 338次阅读

    鸿蒙Flutter实战:10-常见问题集合

    # 鸿蒙Flutter实战:10-常见问题集合 ## 1. 学习路径应该是怎样的,需要掌握哪些技术才具备鸿蒙 Flutter 开发能力 1.1 学习和掌握
    发表于 10-23 17:05

    鸿蒙Flutter实战:09-现有Flutter项目支持鸿蒙

    # 鸿蒙Flutter实战:现有Flutter项目支持鸿蒙 ## 背景 原来使用Flutter开发的项目,需要适配鸿蒙。 ## 环境搭建 见文章[鸿蒙
    发表于 10-23 16:36

    鸿蒙Flutter实战:08-如何调试代码

    # 鸿蒙Flutter实战:如何调试代码 ## 1.环境搭建 参考文章[鸿蒙Flutter实战:01-搭建开发环境](https://gitee.com/zacks
    发表于 10-23 16:29

    鸿蒙Flutter实战:07混合开发

    # 鸿蒙Flutter实战:混合开发 鸿蒙Flutter混合开发主要有两种形式。 ## 1.基于har 将flutter module
    发表于 10-23 16:00

    鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件

    # 使用 ArkTs 开发 Flutter 鸿蒙平台插件 本文讲述如何开发一个 Flutter 鸿蒙插件,如何实现 Flutter 与鸿蒙
    发表于 10-22 21:56

    鸿蒙Flutter实战:05-使用第三方插件

    # 鸿蒙Flutter 实战:使用第三方插件 在鸿蒙Flutter开发中,如果涉及到使用原生功能,就要使用插件。使用插件有两种方式,一种是自己编写原生ArkTS代码,在Dart侧调用。另外一种
    发表于 10-22 21:54

    鸿蒙Flutter实战:01-搭建开发环境

    Studio\\\\tools\\\\node 管理多个 Flutter 版本 如果在项目开发中,需要使用多个 Flutter 版本,可以考虑使用 fvm 安装 FVM 使用 fvm 官方
    发表于 10-21 19:35

    用launch pad烧录chatgpt_demo项目会有api key报错的原因?

    我用launch pad烧录chatgpt_demo项目问题会有api key报错;请问用launch pad要如何设置api key和调试?还是只能通过idf?
    发表于 06-27 07:59

    Flutter首次亮相Google Cloud Next大会

    Flutter 团队在近期首次参加了 Google Cloud Next 大会,这意味着 Flutter开发社区中的影响力正在日益增长。
    的头像 发表于 05-09 10:15 430次阅读

    在FPGA设计中是否可以应用ChatGPT生成想要的程序呢

    当下AI人工智能崛起,很多开发领域都可看到ChatGPT的身影,FPGA设计中,是否也可以用ChatGPT辅助设计呢?
    发表于 03-28 23:41

    【国产FPGA+OMAPL138开发板体验】(原创)6.FPGA连接ChatGPT 4

    OMAP-L138(定点/浮点DSP C674x+ARM9)+ FPGA处理器的开发板。 编写一个用于FPGA访问ChatGPT 4的程序代码是一个相当复杂的任务,涉及到硬件设计、网络通信、数据处理等多个
    发表于 02-14 21:58

    浅谈兼容 OpenHarmony 的 Flutter

    OpenHarmony SIG 组织在 Gitee 开源了兼容 OpenHarmony 的 Flutter。该组织主要用于孵化 OpenHarmony 相关的开源生态项目。     ▲ 仓库地址
    的头像 发表于 02-02 15:22 546次阅读
    浅谈兼容 OpenHarmony 的 <b class='flag-5'>Flutter</b>

    如何在Torizon平台使用Flutter开发用户界面

    Google 面向 Android, iOS 推出的跨平台移动应⽤开发框架 Flutter 可以构建高质量的原⽣⽤户界⾯,并可以扩展支持 Web 和桌面应用。Flutter 尚未官方支持嵌入式系统,但目前 Sony 和 Ubun
    发表于 12-07 10:39 582次阅读
    如何在Torizon平台使用<b class='flag-5'>Flutter</b>来<b class='flag-5'>开发</b>用户界面