[AI딥페이크] 6. 딥페이크 탐지 프로젝트(2) - Inference API + Frontend + Backend → Docker 애플리케이션 통합

npm install @nestjs/axios axios form-data @types/multer

import { Module } from '@nestjs/common'; import { DetectionService } from './detection.service'; import { DetectionController } from './detection.controller'; // 1. TypeOrmModule, Detection 임포트 import { Detection } from './entities/detection.entity'; import { TypeOrmModule } from '@nestjs/typeorm'; // 3. HttpModule 임포트 import { HttpModule } from '@nestjs/axios'; @Module({ imports: [ // 2. forFeature()로 이 모듈에서 사용할 Entity를 등록 TypeOrmModule.forFeature([Detection]), // 4. HttpModule 등록 HttpModule, ], controllers: [DetectionController], providers: [DetectionService], }) export class DetectionModule {}

export class DetectionResponseDto { id: number; filename: string; filetype: string; isDeepfake: boolean; confidence: number; createdAt: Date; }

export class InferenceResponseDto { filename: string; is_deepfake: boolean; confidence: string; message: string; }

import { Controller, Get, Post, Body, Patch, Param, Delete, UseInterceptors, UploadedFile, BadRequestException } from '@nestjs/common'; import { FileInterceptor } from '@nestjs/platform-express'; import { DetectionService } from './detection.service'; import { UpdateDetectionDto } from './dto/update-detection.dto'; import { DetectionResponseDto } from './dto/detection-response.dto'; @Controller('detection') export class DetectionController { constructor(private readonly detectionService: DetectionService) {} @Post() @UseInterceptors(FileInterceptor('file')) async create(@UploadedFile() file: Express.Multer.File): Promise<DetectionResponseDto> { if (!file) { throw new BadRequestException('파일이 업로드되지 않았습니다.'); } return this.detectionService.detectAndSave(file); } @Get() findAll(): Promise<DetectionResponseDto[]> { return this.detectionService.findAll(); } @Get(':id') findOne(@Param('id') id: string) { return this.detectionService.findOne(+id); } @Patch(':id') update(@Param('id') id: string, @Body() updateDetectionDto: UpdateDetectionDto) { return this.detectionService.update(+id, updateDetectionDto); } @Delete(':id') remove(@Param('id') id: string) { return this.detectionService.remove(+id); } }

import { Injectable, NotFoundException, InternalServerErrorException } from '@nestjs/common'; import { InjectRepository } from '@nestjs/typeorm'; import { Repository } from 'typeorm'; import { Detection } from './entities/detection.entity'; import { HttpService } from '@nestjs/axios'; import { lastValueFrom } from 'rxjs'; import FormData from 'form-data'; import { UpdateDetectionDto } from './dto/update-detection.dto'; import { DetectionResponseDto } from './dto/detection-response.dto'; import { InferenceResponseDto } from './dto/inference-response.dto'; @Injectable() export class DetectionService { constructor( @InjectRepository(Detection) private detectionRepository: Repository<Detection>, private readonly httpService: HttpService, ) {} // 탐지(파일 업로드 -> FastAPI 추론 -> 결과 DB 저장) async detectAndSave(file: Express.Multer.File): Promise<DetectionResponseDto> { let inferenceServerApiUrl = ''; const mimeType = file.mimetype; // 1. 파일 타입에 따라 FastAPI 엔드포인트 결정 if (mimeType.startsWith('image/')) { inferenceServerApiUrl = 'http://localhost:8000/predict/image'; } else if (mimeType.startsWith('audio/') || mimeType === 'application/octet-stream') { inferenceServerApiUrl = 'http://localhost:8000/predict/audio'; } else { throw new Error('지원하지 않는 파일 형식입니다. (이미지 또는 오디오만 가능)'); } // 2. FastAPI로 보낼 FormData 생성 let apiResult: InferenceResponseDto | null = null; const formData = new FormData(); formData.append('file', file.buffer, file.originalname); try { // 3. Inference API 서버 호출(Axios 사용) const response = await lastValueFrom( this.httpService.post<InferenceResponseDto>( inferenceServerApiUrl, formData, { headers: formData.getHeaders(), } ), ); apiResult = response.data; } catch (error) { console.error('FastAPI Connection Error:', error.message); throw new InternalServerErrorException('AI 서버와 통신 중 오류가 발생했습니다.'); } // 4. DB에 저장할 엔티티 생성(DTO-Entity 매핑) const newDetection = this.detectionRepository.create({ filename: file.originalname, filetype: file.mimetype, isDeepfake: apiResult.is_deepfake ?? false, confidence: Number(apiResult?.confidence ?? 0.0) }); // 5. DB 저장 및 결과 DTO 반환 const savedEntity = await this.detectionRepository.save(newDetection); const detectionResponseDto = Object.assign(new DetectionResponseDto(), savedEntity); return detectionResponseDto; } async findAll(): Promise<DetectionResponseDto[]> { const detectionResponseDtos = await this.detectionRepository.find({ order: { createdAt: 'DESC' } }); return detectionResponseDtos.map(detection => Object.assign(new DetectionResponseDto(), detection)); } async findOne(id: number): Promise<Detection> { const detection = await this.detectionRepository.findOneBy({ id }); if (!detection) { throw new NotFoundException(`ID #${id} Not Found`); } return detection; } // Update async update(id: number, updateDetectionDto: UpdateDetectionDto) { // 1. 'id'로 찾아서, 'updateDetectionDto'의 내용으로 DB를 업데이트 (UPDATE 쿼리) // (참고: 'update'는 결과로 업데이트된 Entity를 반환하지 않고, 영향 받은 행 수(Affected Rows) 등을 반환합니다.) const updateResult = await this.detectionRepository.update(id, updateDetectionDto); // 2. (에러 핸들링) 만약 업데이트된 행(affected)이 0개라면, 해당 ID가 없다는 뜻. if (updateResult.affected === 0) { throw new NotFoundException(`ID #${id}에 해당하는 탐지 내역을 찾을 수 없습니다.`); } // 3. 업데이트된 내용을 다시 조회하여 반환 return this.findOne(id); } // Delete async remove(id: number) { // 1. 'id'로 찾아서 DB에서 삭제 (DELETE 쿼리) const deleteResult = await this.detectionRepository.delete(id); // 2. (에러 핸들링) 만약 삭제된 행(affected)이 0개라면, 해당 ID가 없다는 뜻. if (deleteResult.affected === 0) { throw new NotFoundException(`ID #${id}에 해당하는 탐지 내역을 찾을 수 없습니다.`); } // 3. 성공 메시지 반환 (또는 삭제된 객체를 반환해도 됨) return { deleted: true, message: `ID #${id} 탐지 내역이 성공적으로 삭제되었습니다.`, }; } }

import React, { useEffect, useState } from 'react'; // [1] 부모에게서 받을 함수 타입 정의 interface Props { onFileSelect: (file: File | null) => void; } function ImageUpload({ onFileSelect }: Props) { // 2. 선택된 파일 이름을 표시하기 위한 State const [fileName, setFileName] = useState<string | null>(null); // 3. 파일이 변경되었을 때 실행될 핸들러 const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { if (event.target.files && event.target.files.length > 0) { const file = event.target.files[0]; setFileName(file.name); onFileSelect(file); } else { setFileName(null); onFileSelect(null); } }; useEffect(() => { // 5. 마운트(처음 뜰 때) 시점에는 fileName이 null이므로 실행하지 않음 if (fileName) { console.log(`[useEffect] 파일이 변경되었습니다: ${fileName}`); // (추후 4일차) // 이곳에서 '파일이 선택되었으니 API 호출을 준비하라' // 같은 부가 작업을 수행할 수 있습니다. } }, [fileName]); // <-- 6. 의존성 배열에 'fileName'을 지정 return ( <> <p className="text-muted small mb-3"> 탐지할 이미지 파일을 업로드하거나 이미지 URL을 입력하세요. </p> <input type="file" id="imageUploadInput" className="d-none" accept="image/png, image/jpeg, image/gif" onChange={handleFileChange} /> {/* 드래그 앤 드롭 영역 */} <div className="border border-2 border-dashed rounded-3 p-4 text-center bg-light cursor-pointer"> <label htmlFor="imageUploadInput" className="border border-2 border-dashed rounded-3 p-4 text-center bg-light cursor-pointer"> <div className="mx-auto d-flex align-items-center justify-content-center bg-white border rounded-circle text-muted mb-3" style={{ width: '48px', height: '48px', fontSize: '24px' }}> + </div> <p className="text-dark fw-semibold mb-1"> 클릭하여 업로드 또는 드래그 앤 드롭 </p> <p className="text-muted small mt-1 mb-0"> PNG, JPG, GIF (MAX. 10MB) </p> </label> </div> {/* 7. (UX 개선) 선택된 파일 이름 표시 */} {fileName && ( <div className="text-center text-muted small mt-2"> <strong>선택된 파일:</strong> {fileName} </div> )} {/* '또는' 구분선 */} <div className="d-flex align-items-center my-4"> <hr className="flex-grow-1" /> <span className="mx-3 text-muted small">또는</span> <hr className="flex-grow-1" /> </div> {/* 이미지 URL 입력 영역 */} <div> <label htmlFor="imageUrl" className="form-label fw-medium small mb-1"> 이미지 URL </label> <input type="text" id="imageUrl" placeholder="https://example.com/image.jpg" className="form-control" /> </div> </> ); } export default ImageUpload;

import React, { useEffect, useState } from 'react'; // [1] 부모에게서 받을 함수 타입 정의 interface Props { onFileSelect: (file: File | null) => void; } function AudioUpload({ onFileSelect }: Props) { // 2. 선택된 파일 이름을 표시하기 위한 State const [fileName, setFileName] = useState<string | null>(null); // 3. 파일이 변경되었을 때 실행될 핸들러 const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => { if (event.target.files && event.target.files.length > 0) { const file = event.target.files[0]; setFileName(file.name); onFileSelect(file); } else { setFileName(null); onFileSelect(null); } }; useEffect(() => { // 5. 마운트(처음 뜰 때) 시점에는 fileName이 null이므로 실행하지 않음 if (fileName) { console.log(`[useEffect] 파일이 변경되었습니다: ${fileName}`); // (추후 4일차) // 이곳에서 '파일이 선택되었으니 API 호출을 준비하라' // 같은 부가 작업을 수행할 수 있습니다. } }, [fileName]); // <-- 6. 의존성 배열에 'fileName'을 지정 return ( <> <p className="text-muted small mb-3"> 탐지할 음성 파일을 업로드하거나 음성 URL을 입력하세요. </p> <input type="file" id="audioUploadInput" className="d-none" accept="audio/mp3, audio/wav, audio/ogg" onChange={handleFileChange} /> {/* 드래그 앤 드롭 영역 */} <div className="border border-2 border-dashed rounded-3 p-4 text-center bg-light cursor-pointer"> <label htmlFor="audioUploadInput" className="border border-2 border-dashed rounded-3 p-4 text-center bg-light cursor-pointer"> <div className="mx-auto d-flex align-items-center justify-content-center bg-white border rounded-circle text-muted mb-3" style={{ width: '48px', height: '48px', fontSize: '24px' }}> + </div> <p className="text-dark fw-semibold mb-1"> 클릭하여 업로드 또는 드래그 앤 드롭 </p> <p className="text-muted small mt-1 mb-0"> MP3, WAV, OGG (MAX. 10MB) </p> </label> </div> {/* 7. (UX 개선) 선택된 파일 이름 표시 */} {fileName && ( <div className="text-center text-muted small mt-2"> <strong>선택된 파일:</strong> {fileName} </div> )} {/* '또는' 구분선 */} <div className="d-flex align-items-center my-4"> <hr className="flex-grow-1" /> <span className="mx-3 text-muted small">또는</span> <hr className="flex-grow-1" /> </div> {/* 음성 URL 입력 영역 */} <div> <label htmlFor="audioUrl" className="form-label fw-medium small mb-1"> 음성 URL </label> <input type="text" id="audioUrl" placeholder="https://example.com/audio.mp3" className="form-control" /> </div> </> ); } export default AudioUpload;

import { useState } from 'react'; import axios from 'axios'; import ImageUpload from '../components/ImageUpload'; import AudioUpload from '../components/AudioUpload'; type TabName = 'image' | 'audio'; // [2] 서버 응답 데이터 타입 정의 (백엔드 DTO와 일치) interface DetectionResult { filename: string; isDeepfake: boolean; confidence: number; } function DeepfakeDetector() { const [activeTab, setActiveTab] = useState<TabName>('image'); // [3] 상태 관리 (파일, 로딩, 결과) const [selectedFile, setSelectedFile] = useState<File | null>(null); const [isLoading, setIsLoading] = useState(false); const [result, setResult] = useState<DetectionResult | null>(null); const apiServerApiUrl = 'http://localhost:3000/detection'; // 탭 변경 시 상태 초기화 const handleTabChange = (tab: TabName) => { setActiveTab(tab); setSelectedFile(null); setResult(null); }; // [4] 탐지 요청 함수 (핵심 로직) const handleDetect = async () => { if (!selectedFile) { alert('파일을 먼저 업로드해주세요.'); return; } setIsLoading(true); // 로딩 시작 setResult(null); // 이전 결과 초기화 try { // FormData 생성 const formData = new FormData(); formData.append('file', selectedFile); // 백엔드(NestJS)로 요청 전송 const response = await axios.post<DetectionResult>( apiServerApiUrl, formData, { headers: { 'Content-Type': 'multipart/form-data' }, } ); // 결과 저장 setResult(response.data); console.log('탐지 결과:', response.data); } catch (error) { console.error('탐지 에러:', error); alert('탐지 중 오류가 발생했습니다. 백엔드 서버가 켜져있는지 확인하세요.'); } finally { setIsLoading(false); } }; return ( <div className="card shadow-sm" style={{ width: '100%', maxWidth: '500px' }}> <div className="card-body p-4 p-md-5"> <h1 className="text-center h3 fw-bold text-dark">딥페이크 탐지기</h1> {/* 탭 메뉴 */} <ul className="nav nav-tabs nav-fill mb-4"> <li className="nav-item"> <button className={`nav-link ${activeTab === 'image' ? 'active' : ''}`} onClick={() => handleTabChange('image')} > 이미지 탐지 </button> </li> <li className="nav-item"> <button className={`nav-link ${activeTab === 'audio' ? 'active' : ''}`} onClick={() => handleTabChange('audio')} > 음성 탐지 </button> </li> </ul> {/* 업로드 컴포넌트 (파일 선택 시 부모의 state를 업데이트함) */} <div> {activeTab === 'image' && <ImageUpload onFileSelect={setSelectedFile} />} {activeTab === 'audio' && <AudioUpload onFileSelect={setSelectedFile} />} </div> {/* 탐지 버튼 */} <button className="btn btn-primary w-100 py-2 fw-bold mt-5" onClick={handleDetect} disabled={isLoading || !selectedFile} // 로딩 중이거나 파일 없으면 비활성화 > {isLoading ? ( <span> <span className="spinner-border spinner-border-sm me-2" role="status" aria-hidden="true"></span> 분석 중... </span> ) : ( '탐지 시작 (Detect)' )} </button> {/* [5] 결과 표시 영역 */} {result && ( <div className={`alert mt-4 ${result.isDeepfake ? 'alert-danger' : 'alert-success'}`} role="alert"> <h4 className="alert-heading fw-bold"> {result.isDeepfake ? '⚠️ 딥페이크 감지됨!' : '✅ 진짜(Real) 파일입니다'} </h4> <hr /> <p className="mb-0"> <strong>확률(Confidence):</strong> {(result.confidence * 100).toFixed(2)}% </p> <p className="mb-0 small text-muted"> 파일명: {result.filename} </p> </div> )} </div> </div> ); } export default DeepfakeDetector;

# 1. 빌드 단계 (Builder) # 로컬 버전과 맞춰서 20 버전 사용 FROM node:20-alpine as builder WORKDIR /app COPY package.json . # 여기서 설치되는 node_modules는 리눅스용입니다. RUN npm install # .dockerignore가 있다면 로컬의 node_modules는 복사되지 않습니다. COPY . . RUN npm run build # 2. 실행 단계 (Nginx) FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx.conf /etc/nginx/conf.d/default.conf EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]

server { listen 80; location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } }

node_modules dist .git .env.local

docker build -t detect-frontend ./

# 1. 빌드 단계 (Builder) # 로컬 버전과 맞춰서 20 버전 사용 FROM node:20-alpine as builder WORKDIR /app # 패키지 파일만 먼저 복사 (캐시 효율을 위해) COPY package*.json ./ # 의존성 설치 RUN npm install # 소스 코드 전체 복사 COPY . . # 빌드 RUN npm run build # 포트 개방 EXPOSE 3000 # 실행 CMD ["node", "dist/main"]

node_modules dist .git .env.local

docker build -t detect-backend ./

FROM python:3.10-slim WORKDIR /app # 1. 의존성 설치 # (headless 버전을 쓰므로 시스템 라이브러리 설치 단계 삭제됨) COPY requirements.txt . RUN pip install --no-cache-dir -r requirements.txt # 2. 소스 코드 복사 COPY . . # 3. 호환성 환경변수 ENV TF_USE_LEGACY_KERAS=1 EXPOSE 8000 CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

venv __pycache__ .git .idea

docker build --no-cache -t detect-inference ./

version: '3.8' services: # 1. 데이터베이스 (MySQL) db: image: mysql:8.0 container_name: deepfake-db restart: always environment: MYSQL_ROOT_PASSWORD: 1234 MYSQL_DATABASE: deepfake_db ports: - "3306:3306" volumes: - db_data:/var/lib/mysql healthcheck: test: ["CMD", "mysqladmin" ,"ping", "-h", "localhost"] timeout: 20s retries: 10 # 2. AI 서버 (FastAPI) ai-server: build: ./detect-inference container_name: deepfake-ai ports: - "8000:8000" environment: - TF_USE_LEGACY_KERAS=1 # 3. 백엔드 (NestJS) backend: build: ./detect-backend container_name: deepfake-backend ports: - "3000:3000" environment: # 도커 내부 통신용 주소 (localhost 대신 서비스명 사용) DB_HOST: db DB_PORT: 3306 DB_USERNAME: root DB_PASSWORD: 1234 DB_DATABASE: deepfake_db # AI 서버 주소도 서비스명으로 변경 AI_API_URL: http://ai-server:8000 depends_on: db: condition: service_healthy ai-server: condition: service_started # 4. 프론트엔드 (React + Nginx) frontend: build: ./detect-frontend container_name: deepfake-frontend ports: - "80:80" depends_on: - backend volumes: db_data:

docker-compose up --build