RNN기반 수어 번역 시스템 - Flask Server 구축

HTTP 통신

• 클라이언트-서버 모델을 기반으로 클라이언트가 서버에 메소드를 사용해 요청을 보내면 서버는 요청에 맞는 응답을 보내줍니다.

Flask Server에서 POST 메소드가 들어오면 데이터를 저장하는 receive_data라는 url을 구현해 주었습니다.

app = Flask(__name__)

@app.route('/receive_data', methods=['POST'])
def receive_data():
    global response_data
    try:
        data = request.json  # POST 요청에서 JSON 데이터 가져오기
        save_data = data['text']  # JSON 데이터에서 'text' 필드 추출
        # 여기서 필요한 처리 수행
        # ...
        response_data = {"message": f"Received: {save_data}"}
        
        return jsonify(response_data)
    except Exception as e:
        return jsonify({"error": str(e)})

if __name__ == '__main__':
    app.run(app ,port=5001, debug=True)

 

수어 번역 프로그램에서 번역된 데이터를 Flask Server로 보내는 기능을 구현해 주었다.

server_address= 'http://127.0.0.1:5001/receive_data'
def send_data(send_string):

    # Flask 서버의 엔드포인트 URL
    # JSON 형태로 데이터 준비
    data = {"text": send_string}
    try:
        # POST 요청 보내기
        response = requests.post(server_address, json=data)

        if response.status_code == 200:
            # 서버 응답 성공
            print("서버 응답 성공")
            print("응답 데이터:", response.json())
        else:
            # 서버 응답 실패
            print("서버 응답 실패. 상태 코드:", response.status_code)
    except Exception as e:
        print("데이터 전송 실패:", str(e))

 

이후 Flask 서버에 저장된 데이터를 Application에서 HTTP 통신으로 받아오기 위한 기능을 구현해 주었습니다.

데이터를 받는 작업이기 때문에 GET 메소드로 HTTP 통신을 구현해 주었습니다.

@app.route('/send_data', methods=['GET'])
def send_data():
    return jsonify(response_data)

 

Application에서 HTTP 통신 기능 구현

class _FlaskServerState extends State<FlaskServer> {
  String serverResponse = '';

  Future<void> fetchData() async {
    final response =
        await http.get(Uri.parse('http://10.27.25.86:5001/send_data'));

    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      setState(() {
        serverResponse = data['message'];
      });
    } else {
      throw Exception('Failed to load data from the server');
    }
  }

 

Socket.IO 통신

• 기본적으로 웹 소켓을 사용하여 통신하고, 클라이언트와 서버 간에 양방향 통신이 가능하며, 실시간 통신이 필요한 응용프로그램에서 사용합니다.

Flask Server 구축

socketio = SocketIO(app)
@socketio.on('message', namespace='/net')
def handle_message(message):
    print('message:', message)
    socketio.emit('res_message', message, namespace='/net')
    
if __name__ == '__main__':
    socketio.run(app,host='0.0.0.0',port=5001, debug=True)

 

Flask Server와 수어 번역 프로그램 통신

sio = socketio.Client()
sio.connect('http://127.0.0.1:5001', namespaces='/net')

@sio.on('res_message')
def handle_response(data):
     print('app_message:', data)
    # 여기서 데이터를 처리하면 됩니다.


def socket_net(send_string):
    sio.emit('message', send_string,namespace='/net')
    print('socket_연결')

 

Application에서 Socket.IO 통신 기능 구현하기

class _ChatScreenState extends State<ChatScreen> {
  final TextEditingController _controller = TextEditingController();
  final List<String> _messages = [];
  final io.Socket socket =
      io.io('http://10.27.24.152:5001/net', <String, dynamic>{
    'transports': ['websocket'],
  });

  @override
  void initState() {
    super.initState();
    socket.on('res_message', (data) {
      setState(() {
        // _messages.add(data);
        _receiveMessage(data);
      });
    });
  }

  void _receiveMessage(String data) {
    setState(() {
      _messages.add('PY: $data');
    });
  }

  void _sendMessage() {
    final message = _controller.text;
    socket.emit('message', message);
    setState(() {
      _messages.add('WJ: $message');
    });
    _controller.clear();
  }