본문 바로가기

분류 전체보기

[Flask] 유클리드 거리를 이용한 영양제 추천 서버 안녕하세요! 졸업 작품 Nutriguide가 어느덧 마무리 단계를 거쳐 전시회를 준비하고 있습니다. 페이지의 프론트엔드 코드를 리뷰하기전에 서버 코드를 리뷰해보도록 하겠습니다.     저는 저희가 구사하고자 하는 추천 알고리즘과 가장 비슷한 PillGood 이라는 프로젝트의 오픈 소스를 깃허브에서 얻어서 모델을 조금 변형했습니다.  기존 PillGood은 설문 조사를 통해 사용자의 부족한 영양소를 구해서 부족한 영양소와 영양제 성분과의 유클리드 거리를 구해서 거리가 가장 가까운 영양제를 추천해주는 방식입니다. 저희는 식단을 입력받아서 식단에 부족한 영양소를 구하고, 결과를 기반으로 영양소 추천을 진행하고 싶었기에 인풋값만 식단으로 변경했습니다. # 데이터 로드pill_data = pd.read_csv('.. 더보기
[TypeScript] 타입스크립트 기초 오늘은 타입스크립트란 친구를 배워보려고 합니다. 코딩애플님의 강의를 참고했습니다. Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함) - 코딩애플 온라인 강좌 (codingapple.com) Typescript 필수문법 10분 정리와 설치 셋팅 (Vue, React 포함) - 코딩애플 온라인 강좌타입스크립트 쓰는 이유 웹개발자 채용공고보면 타입스크립트가 항상 보입니다. 규모가 좀 있는 곳들은 거의 타입스크립트를 요구스펙에서 빼놓지 않고 기입하는데 모른다고 그리 걱정할건 아codingapple.com  타입스크립트는 자바스크립트 문법에 타입을 더해서 사용을 용이하게 해주는 용도로 쓰입니다. 자바스크립트는 Dynamic Typing을 지원하는 언어인데 여기서 Dynamic Ty.. 더보기
[Flask] Nutritiguide 백엔드 서버 코드 리뷰 안녕하세요 오늘은 졸업작품 중 파이썬으로 작성한 Flask 서버 코드를 리뷰해보려고 합니다. from flask import Flask, request, jsonifyimport openaiimport pandas as pdimport numpy as npfrom flask_cors import CORSimport mathapp = Flask(__name__)CORS(app)openai.api_key = "비밀키" 먼저 상단의 기본 코드입니다.  from flask import Flask, request, jsonify: Flask 프레임워크에서 웹 애플리케이션을 구축하는 데 필요한 클래스와 함수를 가져옵니다. import openai  OpenAI Python SDK를 가져옵니다. OpenAI는 자연어.. 더보기
[React] 이가 없으면 잇몸으로 안녕하세요! 날씨가 엄청 덥고 습하네요. 캡스톤은 지금 마무리 단계에 들어가고 있는데 한 번에 모든 코드를 리뷰하기는 힘들 것 같아서 하루에 한 단계 씩 리뷰해보려고 합니다.     최근에는 서버 구체화 단계를 하면서 큰 위기에 봉착했는데요.  데이터 파일들을 보시면 영양제 데이터와 식단 데이터가 있습니다.      1. 영양제의 영양성분을 인덱스 별로 표시해 놓은 영양 성분 데이터 셋이 있고 2. 각 인덱스별 영양제의 정보를 모아 놓은 영양제 정보 데이터셋이 있습니다.  영양소 함량 데이터셋에는 총 26개의 영양 성분이 있습니다. 하지만 찾아 놓은 식단 데이터에는 영양소 성분 데이터가 부족했습니다.  급하게 최대한 비슷한 영양소 정보를 포함한 데이터셋을 찾아 봤지만  모든 데이터를 전처리하고 추천 로직.. 더보기
[React] 캡스톤 디자인 진행과정 안녕하세요 오랜만에 돌아왔네요. 1학기 동안 캡스톤 디자인을 진행했습니다.  저는 인공지능 서버와 프론트엔드 페이지 설계를 도맡아 진행했습니다. 서버는 Flask라는 파이썬을 이용했고, 프론트엔드는 리액트와 AntiDesign 툴을 주로 활용했습니다. 오늘은 페이지의 UI를 보여드리고 개발이 완료되면 코드 리뷰를 하도록 하겠습니다.   먼저 메인페이지입니다. 페이지에 대해 간단히 설명하고  영양성분 설명 버튼을 누르면 성분 설명 페이지로 이동합니다.  성분 설명 페이지입니다. 네모 박스를 누르면 해당 영양소에 대한 설명을 보여줍니다.  다음은 AI 질문 페이지입니다. 질문을 하면 ChatGPT API를 기반으로 답변을 생성해 줍니다.   Navbar에서 추천 받기 버튼을 누르면 위 페이지로 이동하고 추천.. 더보기
[Flask] Flask 리액트 연동 안녕하세요! 저번 시간에는 인공지능 모델을 만들어 봤는데요. 이번 시간에는 모델을 통해 얻은 데이터를 리액트와 연동시켜보는 시간을 가져보겠습니다. 먼저 Flask는 Python으로 웹 애플리케이션을 개발하기 위한 경량 프레임워크입니다. NodeJS와 같은 서버 역할을 하게 됩니다. 설치를 하기 위해서 VScode에서 서버 디렉토리에서 터미널을 엽니다. pip install Flask 를 입력해서 설치해줍니다. 다음은 중요한 포인트인 CORS설정입니다. 포트가 다를 때 포트 접근을 허용해주는 정책입니다. from flask_cors import CORS from flask import Flask, request, jsonify app = Flask(__name__) CORS(app) 이렇게 코드를 추가하면.. 더보기
[Python] 인공지능 모델 만들기 안녕하세요! 졸업 작품 진행중이라 오랜만에 왔네요 캡스톤 디자인에서 제가 지금 맡고 있는 부분은 인공지능 모델을 적용시키는 작업입니다. 참고로 저희는 인공지능을 이용하여 영양제 사이트를 개발중에 있습니다. 인공지능은 대부분 django를 이용한 Python 코드로 되어있기 때문에 Python 사용이 불가피합니다. 1학년 때 배웠던 기억을 떠올리며 인공지능 모델을 임의로 만들어 봤습니다! import pandas as pd import numpy as np import json import sys pill_data = pd.read_csv('Final_Pill_Standardization_Content_Dataset.csv', header=0, encoding='cp949') pill_test_data =.. 더보기
[React] Nutriguide 프로젝트 코드 리뷰 이어서 InputMenuPage입니다. 식단 입력 페이지인데 이 부분은 어느정도 chatGPT의 도움을 받았기 때문에 리뷰를 해보려고 합니다. U.I는 antd라는 프레임워크를 사용했습니다. import React, { useState } from 'react';import { Typography, Input, Form, Button, Select, message, Modal } from 'antd';import styles from '../css/Button.css';import '../css/InputPage.css';function InputMenuPage({  }) {  const { Option } = Select;  // 각 요일에 해당하는 식단과 선택된 요일을 관리하는 state  const.. 더보기

티스토리툴바