Flutter Chat GPT연동

1. GPT결제수단 등록

등록페이지 -> https://platform.openai.com/settings/organization/billing/overview

 

2. 프로젝트 생성

좌측 메뉴바의 "+Create Project"를 눌러 프로젝트 생성

 

3. Secret Key생성

 

4. GPT와 통신할 함수 작성

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:firebase_database/firebase_database.dart';

class ChatServices {
  static const String _baseUrl = 'https://api.openai.com/v1/chat/completions';
  final String apiKey;

  ChatServices({required this.apiKey});

  Future<String> getResponse(List<Map<String, String>> messages) async {
    final response = await http.post(
      Uri.parse(_baseUrl),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        'model': 'gpt-3.5-turbo', // 사용할 모델 ID
        'messages': messages,
        'max_tokens': 150, // 선택적 매개변수
        'temperature': 0.7, // 선택적 매개변수
      }),
    );

    print('response ${response.body}');
    if (response.statusCode == 200) {
      final data = jsonDecode(utf8.decode(response.bodyBytes));  // 한국어가 깨지지않도록 디코딩
      return data['choices'][0]['message']['content'].trim();  // 응답 메세지만 추출
    } else {
      throw Exception('Failed to load response');
    }
  }
}

5. 기본적인 UI작성

import 'package:devjang_cs/services/chat_services.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  final List<Map<String, String>> _messages = [];
  /// 지금은 하드코딩되어있지만 보안을 위해 따로 보관 필요
  final ChatServices _apiService = ChatServices(apiKey: 'your api key');

  void _sendMessage() async {
    if (_controller.text.isEmpty) return;

    setState(() {
      _messages.add({
        'role': 'user',
        'content': _controller.text,
      });
    });

    final response = await _apiService.getResponse(_messages);
    setState(() {
      _messages.add({
        'role': 'assistant',
        'content': response,
      });
    });

    _controller.clear();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: ListView.builder(
            itemCount: _messages.length,
            itemBuilder: (context, index) {
              final message = _messages[index];
              return ListTile(
                title: Text(message['content']!),
                subtitle: Text(message['role']!),
              );
            },
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Row(
            children: [
              Expanded(
                child: TextField(
                  controller: _controller,
                  decoration: InputDecoration(
                    hintText: '메세지를 작성해주세요',
                  ),
                ),
              ),
              IconButton(
                icon: Icon(Icons.send),
                onPressed: _sendMessage,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

 

6. 간단한 작동 예시 사진