Flutter ChatGPT Part 2 สอน

Table Of Conten
แปลอังกฤษเป็นไทยด้วย ChatGPT
Generate Image with Prompt

Flutter ChatGPT PART 1
Flutter ChatGPT PART 2
Flutter ChatGPT PART 3

แปลอังกฤษเป็นไทยด้วย ChatGPT

ใน Part ที่หนึ่งเราได้พูดถึงการใช้งาน chat_gpt_sdk แบบพื้นฐานไปแล้ว ต่อมาเรามาลองให้เจ้า chatGPT แปลภาษาอังกฤษให้เป็นไทยกันดูดีกว่า

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

  @override
  State<ExampleTranslate> createState() => _ExampleTranslateState();
}

class _ExampleTranslateState extends State<ExampleTranslate> {
  ///[translateResult]
  ///ประกาศตัวแปร เพิ่มเก็บผลละพธ์ของการแปร
  String? translateResult;

  ///ประกาศตัวแปร [openAI]
  late OpenAI openAI;

  @override
  void initState() {
    ///new instance ให้กับตัวแปร [openAI]
    ///[isLog] = true ให้เปิด log ตอนยิง api
    openAI = OpenAI.instance.build(
        token: 'your-access-token',
        baseOption: HttpSetup(receiveTimeout: const Duration(seconds: 18)),
        isLog: true);
    super.initState();
  }

  void onTranslate() async {
    ///บทความภาษาอังกฤษ
    const words = '';

    ///setup request
    final request = ChatCompleteText(messages: [
      Map.of({"role": "user", "content": translateEngToThai(word: words)})
    ], maxToken: 200, model: ChatModel.gpt_4);

    final response = await openAI.onChatCompletion(request: request);
    setState(() {
      ///ให้ตัวแปร [translateResult] มีค่าเท่า content ที่ ChatGPT
      ///สร้างออกมา
      translateResult = response?.choices.last.message?.content;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: [
            Text(translateResult ?? "...."),
            ElevatedButton(
                onPressed: onTranslate,
                style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12.0)
                  )
                ),
                child: const Text("Translate"))
          ],
        ),
      ),
    );
  }
}

Generate Image with Prompt

อีกหัวข้อที่กำลังเป็นที่นิยมอย่างมากก็คือการให้ AI สร้างรูปภาพให้ โดยที่เราจะเขียนคำอธิบายรูปภาพและ AI จะสร้างให้ ซึ่งเจ้า chat_gpt_sdk ก็มี function นี้มาให้ด้วย

AI Generate.

class _ExampleGenerateImageState extends State<ExampleGenerateImage> {
  ///ประกาศตัวแปร [openAI]
  late OpenAI openAI;

  @override
  void initState() {
    ///new instance ให้กับตัวแปร [openAI]
    ///[isLog] = true ให้เปิด log ตอนยิง api
    openAI = OpenAI.instance.build(
        token: token,
        baseOption: HttpSetup(receiveTimeout: const Duration(seconds: 18)),
        isLog: true);
    super.initState();
  }

  void onGenerateImage() async {
    ///setup request
    final request = GenerateImage("snake eat cat.", 1);

    ///call api gen image
    final response = await openAI.generateImage(request);

    ///ผลลัพธ์จะอยู่ที่ตัวแปล [url]
    ///เราสามารถเอารูปไปแสดงได้เลย
    debugPrint('${response?.data?.last?.url}');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
          child: ElevatedButton(
              onPressed: onGenerateImage,
              style: ElevatedButton.styleFrom(
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12.0))),
              child: const Text("Translate"))),
    );
  }
}

สำหรับ part นี้ก็มีตัวอย่างเท่ารอติดตาม ตัวอย่างใหม่ ๆ ที่ part หน้าได้เลยครับ