Local Web Demo

FPGA와 W5500으로 구현한 MNIST CNN Web Demo

이번 프로젝트는 Digilent Cmod A7-35T FPGA 보드에서 CNN 가속기를 구동하고, WIZnet W5500 Ethernet 모듈을 통해 PC의 웹 애플리케이션과 UDP 통신을 수행하는 MNIST 숫자 인식 시스템입니다.

사용자가 브라우저 캔버스에 숫자를 그리면, Flask 서버가 이를 14×14 grayscale 이미지로 변환해 FPGA로 전송합니다. FPGA 내부의 CNN Accelerator는 이미지를 분류하고, 예측 결과를 UDP로 웹 서버에 반환합니다.

단순한 AI 모델 실행 예제가 아니라, TensorFlow/Keras 기반 모델 학습부터 HLS 기반 하드웨어 구현, 실시간 UDP 통신, 브라우저 데모까지 포함한 End-to-End FPGA AI 데모입니다

왜 만들었나요?

AI 추론을 클라우드에 맡기면 지연이 생기고, 비용이 들고, 데이터가 외부로 나갑니다. 이 문제를 현장에서 직접 해결하는 구조, 즉 Edge AI가 실제로 어떻게 작동하는지 직접 구현해보고 싶어서 시작했습니다.

FPGA는 GPU 대비 전력 효율이 좋고, ASIC 대비 유연성이 높아 Edge AI 가속기로 주목받고 있습니다. 이 프로젝트는 그 구조를 모델 학습부터 하드웨어 추론, 네트워크 통신, 웹 UI까지 하나로 연결해 실제로 동작하는 형태로 만들어본 시도입니다.

프로젝트 개요

이 프로젝트는 크게 네 부분으로 구성됩니다.

1. CNN Model Training

MNIST 손글씨 숫자 데이터를 TensorFlow/Keras로 학습합니다. 입력 이미지는 FPGA 리소스를 고려해 28×28이 아닌 14×14 grayscale로 축소하고, 학습된 weight는 C header 형태로 FPGA에서 직접 사용합니다.

2. Vitis HLS 기반 CNN Accelerator

이 프로젝트에서는 CNN 숫자 인식 연산을 FPGA에서 빠르게 처리하기 위해, Vitis HLS를 사용해 CNN Accelerator를 구현했습니다.

Vitis HLS는 C/C++ 코드를 FPGA 하드웨어(IP)로 변환해주는 개발 도구입니다.

프로젝트의 CNN 관련 소스는 hls/ 폴더에 포함되어 있으며, 주요 파일은 다음과 같습니다

cnn_accel.cpp
cnn_accel.h
tb_cnn_accel.cpp
weights_fpga.h

Top function은 cnn_accel이며, 대상 FPGA는 Cmod A7-35T의 Artix-7 디바이스입니다.

3. MicroBlaze + Shared BRAM 구조

Vivado Block Design에는 MicroBlaze, AXI Quad SPI, AXI BRAM Controller, HLS CNN Accelerator IP 등이 포함됩니다. MicroBlaze가 W5500으로 수신한 이미지를 Shared BRAM에 저장하면, CNN Accelerator가 같은 BRAM 데이터를 읽어 추론을 수행하는 구조입니다.

4. W5500 Ethernet UDP Web Demo

Cmod A7-35T에는 Ethernet 포트가 내장되어 있지 않아, WIZnet W5500 모듈을 SPI로 연결했습니다. W5500은 AXI Quad SPI를 통해 제어되며, UDP 기반으로 Flask 서버와 데이터를 주고받습니다. 단순한 통신 모듈을 넘어, 웹 UI와 FPGA 가속기를 실시간으로 이어주는 핵심 연결고리 역할을 합니다.

W5500 Ethernet의 역할

이 프로젝트에서 W5500은 FPGA와 PC 사이의 Ethernet 통신을 담당합니다.

특히 FPGA 보드에 Ethernet PHY나 RJ45 포트가 없는 경우에도, W5500을 SPI로 연결하면 비교적 간단하게 유선 네트워크 기능을 추가할 수 있습니다.

W5500을 사용함으로써:

FPGA에 Ethernet 기능 추가
UDP 기반 이미지 전송
Web App과 FPGA 간 실시간 통신
MicroBlaze 기반 네트워크 제어

가 가능해집니다.

FPGA AI Demo에서 W5500이 단순 통신 모듈을 넘어, 실제 사용자 인터페이스와 FPGA 가속기를 연결하는 핵심 bridge 역할을 한다는 점이 인상적입니다.

로컬 웹 데모

이 프로젝트에는 로컬 브라우저 기반 데모도 포함되어 있습니다. 사용자는 HTML 캔버스에 손으로 쓴 숫자를 그릴 수 있습니다. 로컬 Flask 백엔드는 사용자가 그린 그림을 14x14 크기의 MNIST 데이터셋과 유사한 회색조 프레임으로 변환하여 UDP를 통해 FPGA로 전송하고, FPGA의 응답을 기다린 후 예측된 숫자를 웹 페이지에 직접 표시합니다.

위 스크린샷은 FPGA CNN 가속기를 통해 전체 엔드투엔드 흐름을 거쳐 손으로 쓴 숫자를 분류한 결과를 보여줍니다.

시장성과 활용 가능성

AI 추론을 클라우드가 아닌 Edge Device에서 처리하려는 수요가 빠르게 늘고 있습니다. 실시간 응답, 네트워크 지연 감소, 개인정보 보호, 서버 비용 절감이 주된 이유입니다.

그 이유는:

실시간 응답 필요
네트워크 지연 감소
개인정보 보호
서버 비용 절감
저전력 운영

등 때문입니다.

특히 FPGA 기반 Edge AI는:

산업 자동화
스마트팩토리
머신비전
자율주행
의료영상
로봇 시스템

분야에서 계속 활용 범위가 확대되고 있습니다.

FPGA는 ASIC 대비 개발 유연성이 높고, GPU 대비 전력 효율이 좋아 Embedded AI 분야에서 연구와 상용화가 꾸준히 진행 중입니다. 이 프로젝트는 그 산업 구조를 실제로 동작하는 형태로 구현한 데모입니다.

교육 및 연구 관점의 장점

이 프로젝트는 FPGA 입문자와 Embedded AI 학습자에게도 매우 좋은 예제입니다.

특히 아래 내용을 한 번에 경험할 수 있습니다.

CNN 구조 이해
Quantization
FPGA Hardware Accelerator
Vitis HLS 설계
AXI 기반 시스템 구성
Ethernet UDP Protocol
Embedded Firmware
Web UI 연동

즉 단순 FPGA RTL 예제가 아니라, 실제 제품 구조와 유사한 시스템 레벨 설계를 경험할 수 있다는 점에서 교육적 가치도 높습니다.