00023. [APP-00003] AI 음식 영양 분석 앱 개발기 #4 – Clarifai API를 이용한 음식 인식

이번 편에서는 선택한 음식 사진을 AI에 전달해 음식 이름을 예측하는 기능을 구현해볼 거야. Clarifai는 이미지 분류 기반으로 음식 인식이 가능한 API를 제공해.

---

🔍 Clarifai API 소개

• 이미지에서 음식 종류를 예측하는 AI 플랫폼
• REST API 기반
• Base64 인코딩된 이미지를 POST 요청으로 전달

👉 Clarifai 계정 만들기 및 API Key 발급: https://clarifai.com

---

📦 1단계: HTTP 통신과 인코딩을 위한 패키지 준비

pubspec.yaml에 다음이 포함되어 있어야 해:

dependencies:
  http: ^0.13.5

그리고 flutter pub get 실행!

---

🧩 2단계: 이미지 Base64 인코딩 함수 작성

lib/services/image_encoder.dart

import 'dart:convert';
import 'dart:io';

Future<String> encodeImageToBase64(File imageFile) async {
  final bytes = await imageFile.readAsBytes();
  return base64Encode(bytes);
}

---

🌐 3단계: Clarifai API 호출 함수 작성

lib/services/clarifai_service.dart

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

Future<string?> identifyFood(String base64Image) async {
  const url = 'https://api.clarifai.com/v2/models/food-item-recognition/outputs';

  final headers = {
    'Authorization': 'Key $clarifaiApiKey',
    'Content-Type': 'application/json',
  };

  final body = jsonEncode({
    "inputs": [
      {
        "data": {
          "image": { "base64": base64Image }
        }
      }
    ]
  });

  final response = await http.post(Uri.parse(url), headers: headers, body: body);
  if (response.statusCode == 200) {
    final json = jsonDecode(response.body);
    final concepts = json['outputs'][0]['data']['concepts'] as List?;
    return concepts?.isNotEmpty == true ? concepts![0]['name'] : null;
  } else {
    throw Exception('Clarifai API 오류: ${response.statusCode}');
  }
}</string?>

secrets.dart에 clarifaiApiKey 변수를 정의해두자:

const String clarifaiApiKey = 'YOUR_API_KEY';

---

📱 4단계: 홈 화면에서 API 호출 연동

home_screen.dart 내부에 아래 함수 추가:

import '../services/image_encoder.dart';
import '../services/clarifai_service.dart';

String? _foodName;

Future<void> _identifyFood() async {
  if (_image == null) return;
  final base64 = await encodeImageToBase64(_image!);
  final name = await identifyFood(base64);
  setState(() {
    _foodName = name ?? '인식 실패';
  });
}

버튼 추가:

ElevatedButton(
  onPressed: _identifyFood,
  child: const Text('음식 인식하기'),
),

결과 표시:

if (_foodName != null)
  Text('예측 음식: $_foodName', style: const TextStyle(fontSize: 16)),

---

✅ 결과 요약

• Clarifai API 연동 성공
• 이미지 → 음식 이름 예측 흐름 완성
• 앱 내 AI 인식 기반 기능 첫 구현 완료 🎉

---

다음 에피소드 예고

00024. [APP-00003] AI 음식 영양 분석 앱 개발기 #5 – 예측된 음식에 대한 영양정보 받아오기

• Nutritionix API 연동
• 음식 이름 기반 영양 성분 정보 표시
• 탄수화물/단백질/지방/칼로리 시각화