Chat GPT OpenAI using Flutter

Riyas Pullur — Sat, 28 Jan 2023 08:52:28 +0000

How integrate chatGPT openAI in flutter

What is chatGPT?

ChatGPT is a chatbot launched by OpenAI in November 2022. It is built on top of OpenAI’s GPT-3 family of large language models, and is fine-tuned with both supervised and reinforcement learning techniques.

in pubspec.yaml

chat_gpt_sdk: ^1.0.2+1
velocity_x: ^3.6.0

main.dart

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Chat GPT',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
         useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      home: ChatScreen(),
    );
  }
}

chatscreen.dart

import 'dart:async';

import 'package:chat_gpt_sdk/chat_gpt_sdk.dart';
import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';

import 'chat_message.dart';

class ChatScreen extends StatefulWidget {
  const ChatScreen({Key? key}) : super(key: key);

  @override
  State<ChatScreen> createState() => _ChatScreenState();
}

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _textEditingController = TextEditingController();
  final List<ChatMessage> _messages = [];
  ChatGPT? chatGPT;
  StreamSubscription? _subscription;

  @override
  void initState() {
    chatGPT = ChatGPT.instance;
    super.initState();
  }

  @override
  void dispose() {
    _subscription?.cancel();
    super.dispose();
  }

  void sendMessage() {
    /*   final String text = _textEditingController.text;
    if (text.isNotEmpty) {
      _textEditingController.clear();
      final ChatMessage message = ChatMessage(text: text, sender: "Me");
    }*/

    ChatMessage _message =
        ChatMessage(text: _textEditingController.text, sender: "User");
    setState(() {
      _messages.insert(0, _message);
    });

    _textEditingController.clear();

    final request = CompleteReq(
        prompt: _message.text, model: kTranslateModelV3, max_tokens: 200);

    _subscription = chatGPT!
        .builder("Your-api-Key")
        .onCompleteStream(request: request)
        .listen((response) {
      Vx.log(response!.choices[0].text);
      ChatMessage botMessage =
          ChatMessage(text: response.choices[0].text, sender: "bot");

      setState(() {
        _messages.insert(0, botMessage);
      });
    });
  }

  Widget _buildTextComposer() {
    return Row(
      children: [
        Expanded(
            child: TextField(
          onSubmitted: (value) => sendMessage(),
          controller: _textEditingController,
          decoration:
              const InputDecoration.collapsed(hintText: "Send a message"),
        )),
        IconButton(onPressed: () => sendMessage(), icon: const Icon(Icons.send))
      ],
    ).px12();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: Text(
          "Chat GPT OpenAI",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: SafeArea(
        child: Container(
          padding: EdgeInsets.only(left: 10, right: 10, bottom: 5),
          child: Column(
            children: [
              Flexible(
                  child: /*Container(
                height: context.screenHeight,
              )*/

                      ListView.builder(
                          reverse: true,
                          padding: Vx.m8,
                          itemCount: _messages.length,
                          itemBuilder: (cnx, index) {
                            return /*Container(
                              height: 100,
                              color: Colors.red,
                            ).p(5)*/
                                _messages[index];
                          })),
              Container(
                decoration: BoxDecoration(color: context.cardColor),
                child: _buildTextComposer(),
              )
            ],
          ),
        ),
      ),
    );
  }
}

API generation below link

https://beta.openai.com/account/api-keys

chat_message.dart

import 'package:flutter/material.dart';
import 'package:velocity_x/velocity_x.dart';

class ChatMessage extends StatelessWidget {
  ChatMessage({Key? key, required this.text, required this.sender})
      : super(key: key);

  final String text;
  final String sender;

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Container(
          margin: EdgeInsets.only(right: 16),
          child: CircleAvatar(
            backgroundColor: Colors.white,
            child: Text(
              sender[0],
              style: TextStyle(color: Colors.black),
            ),
          ),
        ),
        Expanded(
            child: Column(
          children: [
            Text(
              sender,
              /* style: Theme.of(context).textTheme.subtitle1,*/
              style: TextStyle(color: Colors.white),
            )
                .text
                .subtitle1(context)
                .make()
                .box
                .alignCenter
                .white
                .alignCenterLeft
                .p3
                .makeCentered(),
            Container(
              margin: EdgeInsets.only(top: 5.0),
              child: Text(
                text.trim(),
                style: TextStyle(color: Colors.white),
              ),
            )
          ],
        ))
      ],
    );
  }
}

Github Repository link
https://github.com/riyaspullurofficial/chatGPTapp-flutter

Conclusion

Request any answer by any question clear and exact matched answer provide openAI.

DEV Community: Riyas Pullur

Chat GPT OpenAI using Flutter