Flutter, Fast API 에서 LLM API 를 활용하기-3 (Bard-API vs OpenAI-API vs kakaoTrans)

마법거북이 23.07.05

2,662 6 0

facebook twitter kakao link

6 0

facebook twitter kakao link

1편, 2편에 이어 말씀드릴 내용입니다.

3편 : Flutter 프론트엔드 구현 및 결과 보기

메뉴리스트 만들기 (app bar 및 drawer 만들기 )
gptApiScreen 만들기
GptController 만들기
총평

샘플 코드에서 Flutter 는 간편하게 구성해 보았습니다.

입력과 출력을 한 화면에 구성하고 controller를 통해 Fast-API 를 호출합니다.

Fast-API가 처리하는 동안 화면에서는 Indicator가 동작합니다.

처리가 완료되면 결과를 화면에 출력합니다.

샘플 코드라서 간편하게 구성을 하였지만, 실제 개발시에는 가장 많은 고민과 시간을 투입이 필요한 곳 입니다.

메뉴리스트 만들기

git에서 받은 버전은 예전에 EmailScreen 화면만 구현을 해 두었기에 이번에 새로 만들 화면 GptApiScreen 간의 이동이 되어야 합니다.
그래서 AppBar를 만들고 Drawer를 활용하여 메뉴 리스트를 만들어 보도록 하겠습니다.

메뉴 선택시 화면 전환을 위해 routeName 을 static 으로 생성해 줍니다. 그리고 앱바를 Scaffold 에서 추가를 합니다.

// lib > screens > email_screen.dart 파일 수정

import 'package:devcoean_flutter/controller/email_controller.dart';
...

class EmailScreen extends StatefulWidget {
  // 메뉴를 이동하기 위해서 routeName 변수 설정 정의 
  static const routeName = '/email-screen';
...
}

class _EmailScreenState extends State<EmailScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
	 // 앱바를 추가한다
      appBar: AppBar(
        title: Text("Devocean"),
      ),
      body: SingleChildScrollView(
       ... 
      ),
    );
  }
}

Drawer를 만듭니다.

// lib > screens > email_screen.dart 파일 수정

import 'package:devcoean_flutter/controller/email_controller.dart';
...
class _EmailScreenState extends State<EmailScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Devocean"),
      ),
		// 아래 Drawer 메뉴 추가 
       drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                '화면리스트',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              title: Text('Email전송메뉴'),
              onTap: () {
                Navigator.of(context).pushReplacementNamed("/email-screen");
              },
            ),
            ListTile(
              title: Text('Gpt테스트메뉴'),
              onTap: () {
                Navigator.of(context).pushReplacementNamed("/gpt-screen");
              },
            ),
          ],
        ),
      ),
      body: SingleChildScrollView(
       ... 
      ),
    );
  }
}

Appbar 와 Drawer는 대부분의 화면에 공통으로 사용되기 때문에 Appbar Widget으로 만드는게 좋습니다. 지금은 우선 pass 하겠습니다.

gptApiScreen 만들기

화면의 레이아웃 입니다. 입력을 받고 버튼을 누르면 Indicator가 동작합니다.
api에서 response를 받으면 Indicator를 종료하고 화면에 결과를 출력하는 코드 입니다.


import 'package:devcoean_flutter/constants/constants.dart';
import 'package:devcoean_flutter/controller/gpt_controller.dart';
import 'package:flutter/material.dart';
import 'package:devcoean_flutter/widgets/dev_textfield_widget.dart';

// 전송을 누르면 로딩이 되었다가, api응답이 오면 다시 화면을 렌더링 해야하기 때문에
// Stateful 위젯으로 생성합니다. 
// email_screen.dart 파일과 매우 유사 합니다. 
class GptApiScreen extends StatefulWidget {

	// 메뉴를 이동하기 위해서 routeName 변수 설정 정의 
  static const routeName = '/gpt-screen';
  const GptApiScreen({Key? key}) : super(key: key);

  @override
  State<GptApiScreen> createState() => _GptApiScreenState();
}

class _GptApiScreenState extends State<GptApiScreen> {
  final TextEditingController _titleTextCtrl = TextEditingController();
  String? bardResult; // bard API 결과를 저장할 변수
  String? openAIResult;  // openAI API 결과를 저장할 변수
  String? kakaoResult; // kakao API 결과를 저장할 변수 
  var myFormState; // 상태를 관리할 enum 변수 Ready, Running, Done

	// 초기화 
  @override
  void initState() {
    bardResult = "";
    openAIResult = "";
    kakaoResult = "";
    myFormState = processState.Ready;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
			// 앱바와 Drawer는 코드는 동일
      appBar: AppBar(
        title: Text("Devocean"),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: [
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                '화면리스트',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              title: Text('Email전송메뉴'),
              onTap: () {
                Navigator.of(context).pushReplacementNamed("/email-screen");
              },
            ),
            ListTile(
              title: Text('Gpt테스트메뉴'),
              onTap: () {
                Navigator.of(context).pushReplacementNamed("/gpt-screen");
              },
            ),
          ],
        ),
      ),
      // 자식 위젯들이 화면에서 넘어가는 경우 Scroll 이 될 수 있도록 SingleChildScrollView 적용  
      body: SingleChildScrollView(
		    // 전체 출력은 화면의 90%만 사용
        child: Container(
          height: MediaQuery.of(context).size.height * 0.9,
          padding: const EdgeInsets.all(8),
          // 컬럼 위젯은 중앙에서 시작하고 가로는 순서대로 꽉차게 (stretch) 
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // 텍스트 필드 위젯     
              DevTextFieldWidget(
                TextCtrl: _titleTextCtrl,
                hint: "title",
              ),
              // 간격 
              const SizedBox(height: 20),
              // API를 호출할 버튼 , 버튼을 누르면 Running 상태로 상태를 변화 시키고 
              // GptController의 gptTranslate 함수 호출
              // 결과가 완료되면 Done 상태로 만들고, 각각의 변수에 결과를 할당  
              ElevatedButton(
                onPressed: () async {
                  if (mounted) {
                    setState(() {
                      myFormState = processState.IsRunning;
                    });
                    await GptController()
                        .gptTranslate(_titleTextCtrl.text)
                        .then((result) {
                      setState(() {
                        myFormState = processState.Done;
                        bardResult = result["bard_msg_ctt"];
                        openAIResult = result["openai_msg_ctt"];
                        kakaoResult = result["kakao_msg_ctt"];
                      });
                    });
                  }
                },
                child: const Text("GPT 테스트"),
              ),
              const SizedBox(height: 50),
              // Running 상태인경우, 버튼을 누른경우 에는
              // 버튼의 하단 중간 영역에서 처리 중임을 표시 
              if (myFormState == processState.IsRunning)
                const Center(
                  child: CircularProgressIndicator(),
                )
              // API에서 결과를 받았다면 결과를 화면에 출력 
              else if (myFormState == processState.Done)
                Container(
                  height: MediaQuery.of(context).size.height * 0.5,
                  child: ListView.builder(
                      shrinkWrap: true,
                      itemCount: 3,
                      itemBuilder: (BuildContext content, int index) {
                        if (index == 0) {
                          return ListTile(
                            leading: Text("bard result : "),
                            title: Text(bardResult!),
                          );
                        }
                        if (index == 1) {
                          return ListTile(
                            leading: Text("openai result :"),
                            title: Text(openAIResult!),
                          );
                        }
                        if (index == 2) {
                          return ListTile(
                            leading: Text("kakao result :"),
                            title: Text(kakaoResult!),
                          );
                        }
                      }),
                )
              // 준비 상태 에서는 아무것도 보여주지 음
              else
                SizedBox(),
            ],
          ),
        ),
      ),
    );
  }
}

GptController 만들기

Fast-API 서버에 request 하고 reponse를 받아오는 역할의 Controller
싱글톤 형식으로 만든다

import 'dart:convert';

import 'package:devcoean_flutter/models/email_model.dart';
import 'package:http/http.dart' as http;
import '../constants/constants.dart';

class GptController {
  // 싱글턴 형식으로 사용한다
  static final GptController _instance = GptController._internal();

  factory GptController() {
    return _instance;
  }

  GptController._internal() {}

  // titleNm 을 body에 넣어 request 하고 그 결과를 받아서 리턴한다 
  Future<dynamic> gptTranslate(String titleNm) async {
    try {
      var fastApiUrl;
      fastApiUrl = Uri.parse(baseUrl + '/gpt/translate/by/gpt');
      http.Response response = await http.post(
        fastApiUrl,
        body: jsonEncode(
          {"title_nm": titleNm},
        ),
        headers: {
          'accept': 'application/json',
          'Content-Type': 'application/json'
        },
      );

      final responseData = json.decode(utf8.decode(response.bodyBytes));
      print(responseData);

      if (response.statusCode != 200) {
        final errorMessage = responseData['detail'];
        print("error : $errorMessage");
        // throw Exception(errorMessage);
      }

      return responseData;
    } catch (error) {
      throw error;
    }
  }
}

route를 위해서 main.dart 파일 수정

import 'screens/email_screen.dart';
import 'screens/gpt_api_screen.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // GptApiScreen 을 홈으로 설저
      home: GptApiScreen(),
      // 여기에 routes 를 정의를 해줘야 routeName 으로 화면 전환이 가능합니다.      
      routes: {
        GptApiScreen.routeName: (context) => GptApiScreen(),
        EmailScreen.routeName: (context) => EmailScreen(),
      },
    );
  }
}