Hello everyone, Freemen programmer job application app is meeting you again, today also to cheer duck!
ChatGPT has been at the forefront of discussion in tech circles lately. In addition to serving as a daily AI assistant for ordinary users, it can also help developers accelerate their development progress. The developer "Little Ape" did an experiment based on ChatGPT. An interactive live demo was realized in just 40 minutes. How did he do it? Here's how he recorded.
"In case of indecision, AI mechanics" ~ ChatGPT can be said to be the hottest topic at the beginning of 2023, it not only swept the entire technology circle in a very short period of time, but also vicially swept various industries outside the circle, and had a substantial impact on major enterprises:
- Google urgently launched "Bard" against ChatGPT
- Microsoft releases new Bing integration with ChatGPT
- Fudan released the first ChatGPT-like model, MOSS
- Domestic Ali, Baidu, Kunlun Wanwei, Netease, and JD.com have all started a new round of AI armaments
So what is the magic of ChatGPT that can make the "crowd bend over"? This has a lot to do with the implementation of ChatGPT:
Unlike previous statistical models, ChatGPT is not the kind of AI that "everything learns from corpus statistics", on the contrary, ChatGPT has the ability to learn on the spot, which is called in-context learning in the industry, which is why ChatGPT can learn in context.
ChatGPT is a major breakthrough in commercial technology in the field of AI, of course, we are not going to discuss the implementation logic of ChatGPT, but how will ChatGPT accelerate our development?
PS: Before that, someone implemented a virtual machine under the ChatGPT interface by instructing, although this is an extreme example, but it can be intuitively felt: "The impact of ChatGPT on our development is visible to the naked eye".
How does ChatGPT affect our development in practice? To make it more intuitive, let's simulate this process with a development scenario.
directory
- Before development
- Start development
- Advanced development
- conclusion
Developed based on ChatGPT
01 Before development
Assuming we now have a need to develop "live streaming", we can go directly to ChatGPT:
"To develop a live streaming app, is it better to use a third-party SDK or develop it yourself from 0"?
As shown in the figure below, as can be seen from the answer, AI suggests that we choose according to the actual situation of the team, and after knowing the situation of "my team only has 5 people", it suggests that it is more reasonable for me to choose the method of "accessing third-party SDKs".
So select "Access to third-party SDKs", and the next question is: "Choose to do live broadcasting, which manufacturers' SDKs are recommended to use in China"?
As shown in the figure below, this problem ChatGPT also provides multiple options, from the options * Agora , Tencent Cloud and Alibaba Cloud * seem to meet our requirements, and in the subsequent "advantage problem" comparison, these three options are "not comparable", then we are refining the problem.
Assuming that we want the live broadcast to have more "interactive capabilities", then modify the question to "do interactive live broadcast, which manufacturer's SDK is more recommended", the screenshot is shown in the figure below, this time we got a clearer answer, it seems that Agora SDK will be more suitable for our needs.
In order to be more assured of this choice, we asked questions through the two questions of "the advantages of Agora SDK" and "What products use Agora SDK", as shown in the figure below, from the reply, Agora as a global manufacturer, in the field of audio and video is still worth trusting. At the same time, there are products including Xiaomi, Momo and other products that use Agora services. Then follow the recommendations of AI to choose the Agora SDK.
Have you found that ChatGPT is indeed more intuitive and efficient than search engines in the way of retrieving data?
So after finalizing the SDK, next we need to choose the application development framework, we limit the requirements to Android and iOS, better is to be compatible with the Web, covering the entire mobile terminal, because the team is not large, so we hope to use cross-platform development to save costs, then the problem is:
"Which cross-platform framework is more suitable for live streaming on mobile"?
As shown in the figure below, the answers are React Native and Flutter, and it just so happens that the existence of Agora SDK can be seen in the Flutter reply, so we can finalize the app development framework and choose Flutter.
Finally, before development, we need to continue to ask "how to get the Agora SDK" and "what do I need to do to use the Agora SDK", so that we can prepare what we need in advance before starting development.
Steps such as registering to obtain an App ID are omitted here, after all, this part of ChatGPT is currently powerless.
02 Start development
So here we assume that you have prepared a development environment, and then you can directly develop.
We continue to develop for ChatGPT, first of all, our question is: "Write a video call page with Agora Flutter SDK agora_rtc_engine 6.1.0 and give me the dart code", the result is shown in the following GIF, you can see that ChatGPT starts to output wildly:
Why is the keyword "video call"? Because it is more accurate and simple than the live broadcast scenario, the generated code is more reliable (after the question test), and based on the video call part, we can quickly expand to the interactive live broadcast scene later; The version is specified to prevent AI from using older versions of the API.
From the door-to-door code generation, you can see that the code produced by ChatGPT comes with Chinese comments, and more intimately, as shown in the figure below, at the end of the generated code, the implementation logic of this code is explained to you, just like a "confidant big sister".
It can also be felt from here that ChatGPT is not a simple AI that will only be integrated based on corpus replies.
Of course, after directly copying the generated code, you will find that this code will report an error, which is related to the current model data version of ChatGPT, so we need to make some manual adjustments to the generated code, such as:
- Create and initialize RtcEngine with createAgoraRtcEngine and initialize
- Modify setEventHandler to the latest registerEventHandler
- Modify the AgoraRenderWidget to AgoraVideoView
Finally, modify the code as follows, where more than 80% of the logic comes from the automatic generation of ChatGPT, although there is no way to do "straight out", which undoubtedly greatly improves the productivity of development.
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<VideoCallPage> {
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<void> 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),
),
),
);
}
}
Next, as shown in the figure below, after running the project to the mobile phone and PC, you can see that we completed the simplest live video scene, and based on the idea of our intention to do live broadcast, only 40 minutes have passed, which also includes the process of registering an Agora account and applying for an App ID, we completed a demo of live broadcast requirements through simple questions, copying, pasting, and modifying.
The red square is the code added later~
So here, although the demo project is not an interactive live broadcast so far, it will not be too difficult to implement an interactive live broadcast scenario based on this demo, because you have run through the link process of the entire SDK.
03 Advanced development
Assuming that we need to continue to develop in the direction of interactive live broadcasting, then we will definitely encounter the demand for "interaction", such as "receiving a piece of content sent by the user and popping up an animation on the screen".
So first we need to know how the Agora SDK listens to the content sent by users, so let's continue to ask: "How to use Agora agora_rtc_engine 6.1.0 to listen to text messages sent by others"?
Why is it still mandatory to write agora_rtc_engine 6.1.0 here? Because if you don't write, you may output the old API version 4.x by default.
Although the answer is not Dart code but OC, but the keywords registerEventHandler and Message we captured, a simple comparison, is the registerEventHandler object in the Flutter SDK, you can find that the flat interface is the onStreamMessage callback.
So then there is what pops up, because we don't have material, assuming there is no designer yet, then it is better to let ChatGPT help us draw a rabbit, but the test results are not good, as shown in the figure below, from the output result, this is not what we want.
Here is my own pink color, otherwise it will be white and paste, I have to say that ChatGPT is "very abstract" in terms of drawing ability.
So ChatGPT is sometimes not very intelligent, maybe it is not so mature in painting understanding at present, but no problem, ChatGPT can be learned through context to "tweak", such as we feel that the shape of rabbits' ears is too outrageous, then we can let ChatGPT adjust for us.
As shown below, although it is still wrong after the adjustment, is it much better than at the beginning?
This is how ChatGPT learns in the context of each session.
Then we let ChatGPT complete the rabbit head on the basis of the rabbit ears, although the final effect is still not ideal, but it has improved a lot compared to the beginning.
At the same time, we also let ChatGPT draw us a "star", and then combined the two Canvas materials, we set in the code to receive the "rabbit" and star text, a zoomed-in animation effect will pop up.
The final run effect is shown in the following GIF, which looks very rudimentary, but you know, we just completed this effect after a simple copy/paste, isn't this a great improvement in development efficiency?
The source code is behind.
Rabbit head code from 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;
}
}
Star code from 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;
}
}
Self-supplemented code for listening text, sending text, and animation effects:
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<void> _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<AnimaWidget> createState() => _AnimaWidgetState();
}
class _AnimaWidgetState extends State<AnimaWidget> {
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));
}
}
I believe that everyone should be able to feel the charm of ChatGPT to improve development efficiency, and even you can integrate ChatGPT into your live broadcast scene, through the chatgpt_api_client plug-in on Flutter, you can directly ask ChatGPT questions in the App, such as through OpenAI's API to achieve an interactive virtual host.
How do I know about this plugin? It must also be asking ChatGPT~
04 Finally
At this point, I believe you should be able to feel that after using ChatGPT, the entire development efficiency can be greatly improved, especially the efficiency and accuracy of content retrieval is more reliable than that of search engines, and it can also help us complete some "manual work" form of code.
Of course, we also see that ChatGPT cannot completely replace manual labor, because the content it generates is not perfect in many aspects, especially a lot of code still needs to be adjusted manually, but this does not affect the value of ChatGPT.
Finally, to quote some reviews I've seen about ChatGPT:
"When you complain about ChatGPT running a train, it's a bit like seeing a monkey writing 1+1=3 in a stone on the beach. It does miscalculate, but that's not the point. It will be right one day."
I believe that AI is not a way to directly replace humans, because its squeeze on society is not crushed from the level, but bad money drives out good money, for example, a big guy said: "Party B hates Party A the most for not understanding anything and bb, but Party B's bargaining power comes from Party A not understanding anything and bb", and now ChatGPT is slowly consuming the entire bargaining power.
In general, "ChatGPT is just a product, it does not represent the "upper limit" of the entire technology, it represents the critical point where the technology has reached commercial use".
Now, it is slowly becoming a habit in development circles, just like Copilot once was, while its ability in other areas such as text arrangement and so on, even far exceeds its value in the development field.
Article source: personal blog Author: Little Ape
Freemen also has IT positions such as Java development and chip design waiting for you to deliver ~ today
Recommended Today:
Android Development Engineer
Job requirements
1. Full-time undergraduate degree, about 3 years work experience;
2. Proficient in the use of Android advanced features and SDKs, proficient in the difference between branded mobile phones and Android versions;
3. Proficient in various Android tuning tools, can accurately locate bugs, proficient in IO, memory and CPU optimization;
4. Master Android power and traffic optimization skills;
5. Master the drawing mechanism in Android;
6. Have JNI programming priority consideration.
Salary: 20K-30K
Work place: Hangzhou