🧠 딥러닝 기반 지식 그래프 생성 시스템

최근 생성형 AI 기술은 텍스트 생성, 문서 요약, 번역 등 다양한 영역에서 활용되며 큰 주목을 받고 있습니다. 그러나 사실과 무관한 내용을 그럴듯하게 만들어내는 한계가 존재합니다. 이는 특히 정보성 자료에서 정보의 신뢰성을 해치는 심각한 요인이 될 수 있습니다. 이러한 문제를 해결하기 위해, 생각잇기 시스템은 생성형 AI의 기반 데이터를 구조화된 지식그래프 형태로 가공하여 AI의 의미 기반 응답 정확도를 높이고자 합니다.

✨ 주요기능

1. 텍스트가 담긴 PDF 파일을 업로드합니다.
2. PDF에서 텍스트를 추출한 뒤, 직접 학습시킨 지식그래프 생성 모델을 통해 주요 개념과 관계를 시각적인 지식그래프로 구성합니다.
3. 그래프의 노드를 더블 클릭하면 해당 문장이 포함된 문맥과 관련 이미지를 확인할 수 있으며, TTS 기술로 음성 출력도 가능합니다.
4. 생성된 그래프를 바탕으로 RAG 기반 챗봇을 통해 정확하고 맥락 있는 질의응답이 가능합니다.
5. 지식그래프 내용을 기반으로 3가지 형태의 퀴즈를 통해 자기 점검이 가능합니다.

🛠️ Frontend 주요 기술

• 개발언어: JavaScript
• 개발환경: React
• 개발도구: Visual Studio Code
• 주요기술:
  • ReactFlow+D3-force : 지식 그래프 시각화

⚙️ 시스템 아키텍쳐

📂 프로젝트 구조

📦src
 ┣ 📂apis
 ┃ ┗ 📜axios.js
 ┣ 📂components
 ┃ ┣ 📂graph
 ┃ ┃ ┣ 📂chatbot
 ┃ ┃ ┃ ┗ 📜Chatbot.jsx
 ┃ ┃ ┣ 📜graphButton.jsx
 ┃ ┃ ┣ 📜graphFlow.jsx
 ┃ ┃ ┣ 📜graphMenu.jsx
 ┃ ┃ ┣ 📜graphNode.jsx
 ┃ ┃ ┣ 📜graphNodeAdd.jsx
 ┃ ┃ ┗ 📜graphNodeEdit.jsx
 ┃ ┣ 📂header
 ┃ ┃ ┣ 📜header.jsx
 ┃ ┃ ┗ 📜toggle.jsx
 ┃ ┣ 📂home
 ┃ ┃ ┣ 📜FeatureCard.jsx
 ┃ ┃ ┣ 📜FeatureItem.jsx
 ┃ ┃ ┗ 📜RoadSection.jsx
 ┃ ┣ 📂list
 ┃ ┃ ┣ 📂modal
 ┃ ┃ ┃ ┣ 📜Loading.jsx
 ┃ ┃ ┃ ┣ 📜deleteModal.jsx
 ┃ ┃ ┃ ┗ 📜modal.jsx
 ┃ ┃ ┣ 📂notList
 ┃ ┃ ┃ ┗ 📜notList.jsx
 ┃ ┃ ┗ 📂yesList
 ┃ ┃ ┃ ┣ 📜item-work.jsx
 ┃ ┃ ┃ ┗ 📜list-work.jsx
 ┃ ┗ 📂quiz
 ┃ ┃ ┣ 📂modal
 ┃ ┃ ┃ ┗ 📜modal.jsx
 ┃ ┃ ┣ 📂qna
 ┃ ┃ ┃ ┣ 📜AnswerOptionList.jsx
 ┃ ┃ ┃ ┣ 📜Connect.jsx
 ┃ ┃ ┃ ┣ 📜ListenUp.jsx
 ┃ ┃ ┃ ┣ 📜Loading.jsx
 ┃ ┃ ┃ ┗ 📜Picture.jsx
 ┃ ┃ ┗ 📂quiz
 ┃ ┃ ┃ ┣ 📜item-quiz.jsx
 ┃ ┃ ┃ ┗ 📜list-quiz.jsx
 ┣ 📂contexts
 ┃ ┣ 📜TTSContext.jsx
 ┃ ┗ 📜editModeContext.jsx
 ┣ 📂hooks
 ┃ ┣ 📜useDelete.jsx
 ┃ ┣ 📜useGet.jsx
 ┃ ┣ 📜usePatch.jsx
 ┃ ┗ 📜usePost.jsx
 ┣ 📂layouts
 ┃ ┗ 📜root-layout.jsx
 ┣ 📂mocks
 ┃ ┣ 📂graph
 ┃ ┃ ┗ 📜graphData.js
 ┃ ┗ 📂quiz
 ┃ ┃ ┣ 📜connectGraphData.js
 ┃ ┃ ┣ 📜loadImages.js
 ┃ ┃ ┗ 📜quizData.js
 ┣ 📂pages
 ┃ ┣ 📂graph
 ┃ ┃ ┗ 📜graph.jsx
 ┃ ┣ 📂home
 ┃ ┃ ┗ 📜home.jsx
 ┃ ┣ 📂list
 ┃ ┃ ┗ 📜list.jsx
 ┃ ┗ 📂quiz
 ┃ ┃ ┣ 📜qna.jsx
 ┃ ┃ ┣ 📜quiz.jsx
 ┃ ┃ ┗ 📜result.jsx
 ┣ 📂routes
 ┃ ┗ 📜router.jsx
 ┣ 📂styles
 ┃ ┣ 📂common
 ┃ ┃ ┣ 📜colors.js
 ┃ ┃ ┣ 📜globalStyles.js
 ┃ ┃ ┗ 📜theme.js
 ┃ ┣ 📂graph
 ┃ ┃ ┗ 📜graph.jsx
 ┃ ┣ 📂header
 ┃ ┃ ┗ 📜header.jsx
 ┃ ┣ 📂home
 ┃ ┃ ┗ 📜home.jsx
 ┃ ┣ 📂list
 ┃ ┃ ┗ 📜list.jsx
 ┃ ┗ 📂quiz
 ┃ ┃ ┗ 📜quiz.jsx
 ┣ 📂utils
 ┃ ┗ 📜tts.jsx
 ┣ 📜App.jsx
 ┗ 📜main.jsx            

👩🏻‍💻 Developers

FE	FE
한성대학교	한성대학교
양인서	정예빈
지식그래프/챗봇 UX/UI 구현 배포 환경 구축	퀴즈/챗봇 UX/UI 개발
@sheepyis	@benniejung

📹 시연

📽️ 시연영상 보러가기