Flutter 에서 ChatGPT-API　http 사용

플러터 에서 OpenAI-API를 사용하기 위해서 http 를 사용한 순서입니다。
(2023 / 11 / 29 작성)
OpenAI-APIキー의 취득방법은 여기서는 생략합니다 。
단 신용카드 를 등록하지 않느면 사용할수 없습니다

VS CODE로 프로젝트 작성

$ flutter create –org com.mogusatech flutter_http_openai_api
$ flutter pub add http

2. main.dart 의 코드를 삭제하고 아래를 복사합니다

아래에서 　// Input API Key　　부분에 자신의 Api Key 를 넣어주십시요。

import 'package:flutter/material.dart';
import 'dart:convert';
import 'package:http/http.dart' as http;

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: 'Flutter Demo',
      theme: ThemeData(
        
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title}); 

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  int _counter = 0;
  void _incrementCounter() {
    setState(() {      
      _counter++;
    });
  }

//  https://platform.openai.com/docs/api-reference/making-requests
////////////////     Making requests
  Future<void> generateChatCompletion() async {

    setState(() {      
      _counter++;
    });

    //  Input API Key
    String apiKey = "sk-1OU6xxxxxxxxxxxxxxxxxxxxxxxxxxxxxNkvJu";
    String model = "gpt-3.5-turbo";

    var response = await http.post(
      Uri.parse('https://api.openai.com/v1/chat/completions'),
      headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer $apiKey',
      },
      body: jsonEncode({
        "model": "gpt-3.5-turbo",
        "messages": [{"role": "user", "content": "Say this is a test!"}],
        "temperature": 0.7
      }),
    );

    if (response.statusCode == 200) {
      final Map<String, dynamic> data = jsonDecode(response.body);

      print('===========================');
      print(data);
      print('===========================');

    } else {
      print("Error: ${response.reasonPhrase}");
    }
  }

  @override
  Widget build(BuildContext context) {
   
    return Scaffold(
      appBar: AppBar(
       
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        
        title: Text(widget.title),
      ),
      body: Center(
        
        child: Column(
          
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        // onPressed: _incrementCounter,
        onPressed: generateChatCompletion,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

3. 실행하여 아래메세지가 나오면 성공입니다。

flutter: ===========================
flutter: {id: chatcmpl-8QDxFhnXpXSk3XA9JjvIEKzuk90WK, object: chat.completion, created: 1701260861, model: gpt-3.5-turbo-0613, choices: [{index: 0, message: {role: assistant, content: This is a test!}, finish_reason: stop}], usage: {prompt_tokens: 13, completion_tokens: 5, total_tokens: 18}}
flutter: ===========================

4. 여기서는、ios、android、macOS、Web에서 실행하였습니다。

5. macOS에서 에러발생시。

_ClientSocketException (ClientException with SocketException: Connection failed (OS Error: Operation not permitted, errno = 1), address = api.openai.com, port = 443, uri=https://api.openai.com/v1/completions)

아래 화일에

macos/Runner/DebugProfile.entitlements

아래 내용을 추가 합니다。

<key>com.apple.security.network.client</key>
<true/>

프로젝트전체코드

다운로드, 해동후 자신으 Apikey 를 사용해주십시요。
$ flutter pub get

플러터에서 안화앱만들기

참고싸이트