Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Eternel

25-2 프리캡스톤디자인 | 자연어 질의 기반 데이터 추출 및 시각화 아키텍처

최근 생성형 AI 기술은 다양한 분야에서 활용되고 있지만, 복잡한 패널 데이터를 일반 사용자가 직관적으로 검색하고 분석하는 데는 여전히 어려움이 있습니다.

Eternel은 자연어 질의를 통해 누구나 쉽게 패널 데이터를 검색하고, AI 기반 분석 결과를 시각화하여 데이터 인사이트를 발견할 수 있도록 돕는 플랫폼입니다.

Eternel 메인 화면


주요 기능

1. 자연어 기반 스마트 검색 및 AI 요약 분석

사용자는 "체력 관리", "결혼 상태" 등 일상적인 언어로 질문하면, AI가 관련 패널 데이터를 자동으로 검색하고 요약 분석 결과를 제공합니다.

AI 요약 분석 결과

주요 특징:

  • 자연어 질의: 일상 언어로 데이터 검색 가능
  • AI 요약 분석: 검색 결과에 대한 간결한 인사이트 제공
  • 실시간 검색: 백엔드 API와 연동하여 즉시 결과 반환

2. 다양한 데이터 시각화

검색 결과를 다양한 형태의 차트와 테이블로 시각화하여 직관적인 데이터 분석을 지원합니다.

데이터 시각화

제공하는 차트:

  • 퀵 차트: 주요 통계를 한눈에 확인
  • 나이대별 통계 분포: 막대 차트로 연령대별 응답 현황 표시
  • 지역별 응답 비중: 원형 차트로 지역별 분포 시각화
  • 데이터 테이블: 실제 이용자 데이터를 정렬, 페이지네이션하여 제공
  • 응답 순위 및 성별 응답률: 상세 통계 정보 제공

3. 스마트 필터링

카테고리, 지역, 나이별 동적 필터를 적용하여 원하는 데이터를 정밀하게 추출할 수 있습니다.

4. AI 채팅 인터페이스

검색창 클릭으로 활성화되는 AI 어시스턴트를 통해 데이터에 대한 자유로운 질문이 가능하며, 이전 대화 맥락을 유지하여 연속적인 질의응답을 지원합니다.

AI 챗봇

주요 특징:

  • 데이터 기반 대화형 응답: 패널 데이터를 기반으로 짧고 명확하게 요약하여 대답
  • 후속 질문 지원: 이전 대화 맥락을 유지하여 연속적인 질문 가능
  • 스몰톡 처리: 데이터와 관련 없는 일반 질문은 smalltalk_chat으로 자연스럽게 응대

5. 데이터 내보내기

차트 이미지, PDF, CSV 형식으로 분석 결과를 다운로드할 수 있습니다.


기술 스택

영역스택
Frontend
Backend
Database
Infra
LLM

시스템 아키텍처

사용자 질의 (자연어)
↓
React Frontend (검색 UI)
↓
FastAPI Backend
↓
┌─────────────────────────────────┐
│ 1. LangChain RAG Pipeline │
│ 2. PostgreSQL + pgvector │
│ 3. 임베딩 기반 유사도 검색 │
└─────────────────────────────────┘
↓
LLM (GPT) 응답 생성
↓
데이터 시각화 (Chart.js)
↓
사용자에게 결과 반환

프로젝트 구조

Eternal/
├── src/ # React 프론트엔드 소스
│ ├── components/ # UI 컴포넌트
│ │ ├── AIChatInterface.js
│ │ ├── AdvancedChart.js
│ │ ├── ChatInterface.js
│ │ ├── DataTable.js
│ │ ├── DataVisualization.js
│ │ ├── DeviceMockup.js
│ │ ├── FilterPanel.js
│ │ ├── HeroSection.js
│ │ ├── Logo.js
│ │ ├── SearchBox.js
│ │ ├── SearchResults.js
│ │ ├── SearchTags.js
│ │ └── SmartChart.js
│ ├── App.js # 메인 앱 컴포넌트
│ ├── index.js # 진입점
│ └── index.css # 전역 스타일
│
├── public/ # 정적 파일
│ └── index.html
│
├── build/ # 프로덕션 빌드
│ └── static/
│
├── images/ # 프로젝트 이미지
│ └── 리드미.png
│
├── main.py # FastAPI 백엔드 서버
├── LLMlangchan.py # LLM RAG 파이프라인
├── requirements.txt # Python 의존성
├── package.json # Node.js 의존성
├── tailwind.config.js # Tailwind 설정
└── README.md

팀 역할

이름역할주요 담당
김홍근팀장 / PM일정 관리 · 주간 보고서 취합 · GitHub 관리 · 발표/브리핑 · 팀원 코드 리뷰
최용주프론트엔드React + Tailwind UI 제작 · 시각화 · UX 최적화
서정원데이터 엔지니어데이터 전처리 · 스키마 설계 · 임베딩 · PostgreSQL
김민석LLM 엔지니어LLM API 연동 · 프롬프트 설계 · RAG/Eval 관리
고범창백엔드FastAPI 서버 · DB 연동 · AWS 배포


시연

시연영상 보러가기


About

자연어 질의 기반 패널 데이터 검색 및 AI 시각화 플랫폼 | Natural Language Panel Data Search & AI Visualization Platform with RAG

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Eternel

25-2 프리캡스톤디자인 | 자연어 질의 기반 데이터 추출 및 시각화 아키텍처

최근 생성형 AI 기술은 다양한 분야에서 활용되고 있지만, 복잡한 패널 데이터를 일반 사용자가 직관적으로 검색하고 분석하는 데는 여전히 어려움이 있습니다.

Eternel은 자연어 질의를 통해 누구나 쉽게 패널 데이터를 검색하고, AI 기반 분석 결과를 시각화하여 데이터 인사이트를 발견할 수 있도록 돕는 플랫폼입니다.

Eternel 메인 화면


주요 기능

1. 자연어 기반 스마트 검색 및 AI 요약 분석

사용자는 "체력 관리", "결혼 상태" 등 일상적인 언어로 질문하면, AI가 관련 패널 데이터를 자동으로 검색하고 요약 분석 결과를 제공합니다.

AI 요약 분석 결과

주요 특징:

  • 자연어 질의: 일상 언어로 데이터 검색 가능
  • AI 요약 분석: 검색 결과에 대한 간결한 인사이트 제공
  • 실시간 검색: 백엔드 API와 연동하여 즉시 결과 반환

2. 다양한 데이터 시각화

검색 결과를 다양한 형태의 차트와 테이블로 시각화하여 직관적인 데이터 분석을 지원합니다.

데이터 시각화

제공하는 차트:

  • 퀵 차트: 주요 통계를 한눈에 확인
  • 나이대별 통계 분포: 막대 차트로 연령대별 응답 현황 표시
  • 지역별 응답 비중: 원형 차트로 지역별 분포 시각화
  • 데이터 테이블: 실제 이용자 데이터를 정렬, 페이지네이션하여 제공
  • 응답 순위 및 성별 응답률: 상세 통계 정보 제공

3. 스마트 필터링

카테고리, 지역, 나이별 동적 필터를 적용하여 원하는 데이터를 정밀하게 추출할 수 있습니다.

4. AI 채팅 인터페이스

검색창 클릭으로 활성화되는 AI 어시스턴트를 통해 데이터에 대한 자유로운 질문이 가능하며, 이전 대화 맥락을 유지하여 연속적인 질의응답을 지원합니다.

AI 챗봇

주요 특징:

  • 데이터 기반 대화형 응답: 패널 데이터를 기반으로 짧고 명확하게 요약하여 대답
  • 후속 질문 지원: 이전 대화 맥락을 유지하여 연속적인 질문 가능
  • 스몰톡 처리: 데이터와 관련 없는 일반 질문은 smalltalk_chat으로 자연스럽게 응대

5. 데이터 내보내기

차트 이미지, PDF, CSV 형식으로 분석 결과를 다운로드할 수 있습니다.


기술 스택

영역스택
Frontend
Backend
Database
Infra
LLM

시스템 아키텍처

사용자 질의 (자연어)
↓
React Frontend (검색 UI)
↓
FastAPI Backend
↓
┌─────────────────────────────────┐
│ 1. LangChain RAG Pipeline │
│ 2. PostgreSQL + pgvector │
│ 3. 임베딩 기반 유사도 검색 │
└─────────────────────────────────┘
↓
LLM (GPT) 응답 생성
↓
데이터 시각화 (Chart.js)
↓
사용자에게 결과 반환

프로젝트 구조

Eternal/
├── src/ # React 프론트엔드 소스
│ ├── components/ # UI 컴포넌트
│ │ ├── AIChatInterface.js
│ │ ├── AdvancedChart.js
│ │ ├── ChatInterface.js
│ │ ├── DataTable.js
│ │ ├── DataVisualization.js
│ │ ├── DeviceMockup.js
│ │ ├── FilterPanel.js
│ │ ├── HeroSection.js
│ │ ├── Logo.js
│ │ ├── SearchBox.js
│ │ ├── SearchResults.js
│ │ ├── SearchTags.js
│ │ └── SmartChart.js
│ ├── App.js # 메인 앱 컴포넌트
│ ├── index.js # 진입점
│ └── index.css # 전역 스타일
│
├── public/ # 정적 파일
│ └── index.html
│
├── build/ # 프로덕션 빌드
│ └── static/
│
├── images/ # 프로젝트 이미지
│ └── 리드미.png
│
├── main.py # FastAPI 백엔드 서버
├── LLMlangchan.py # LLM RAG 파이프라인
├── requirements.txt # Python 의존성
├── package.json # Node.js 의존성
├── tailwind.config.js # Tailwind 설정
└── README.md

팀 역할

이름역할주요 담당
김홍근팀장 / PM일정 관리 · 주간 보고서 취합 · GitHub 관리 · 발표/브리핑 · 팀원 코드 리뷰
최용주프론트엔드React + Tailwind UI 제작 · 시각화 · UX 최적화
서정원데이터 엔지니어데이터 전처리 · 스키마 설계 · 임베딩 · PostgreSQL
김민석LLM 엔지니어LLM API 연동 · 프롬프트 설계 · RAG/Eval 관리
고범창백엔드FastAPI 서버 · DB 연동 · AWS 배포


시연

시연영상 보러가기


About

자연어 질의 기반 패널 데이터 검색 및 AI 시각화 플랫폼 | Natural Language Panel Data Search & AI Visualization Platform with RAG

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Eternel

25-2 프리캡스톤디자인 | 자연어 질의 기반 데이터 추출 및 시각화 아키텍처

최근 생성형 AI 기술은 다양한 분야에서 활용되고 있지만, 복잡한 패널 데이터를 일반 사용자가 직관적으로 검색하고 분석하는 데는 여전히 어려움이 있습니다.

Eternel은 자연어 질의를 통해 누구나 쉽게 패널 데이터를 검색하고, AI 기반 분석 결과를 시각화하여 데이터 인사이트를 발견할 수 있도록 돕는 플랫폼입니다.

Eternel 메인 화면


주요 기능

1. 자연어 기반 스마트 검색 및 AI 요약 분석

사용자는 "체력 관리", "결혼 상태" 등 일상적인 언어로 질문하면, AI가 관련 패널 데이터를 자동으로 검색하고 요약 분석 결과를 제공합니다.

AI 요약 분석 결과

주요 특징:

  • 자연어 질의: 일상 언어로 데이터 검색 가능
  • AI 요약 분석: 검색 결과에 대한 간결한 인사이트 제공
  • 실시간 검색: 백엔드 API와 연동하여 즉시 결과 반환

2. 다양한 데이터 시각화

검색 결과를 다양한 형태의 차트와 테이블로 시각화하여 직관적인 데이터 분석을 지원합니다.

데이터 시각화

제공하는 차트:

  • 퀵 차트: 주요 통계를 한눈에 확인
  • 나이대별 통계 분포: 막대 차트로 연령대별 응답 현황 표시
  • 지역별 응답 비중: 원형 차트로 지역별 분포 시각화
  • 데이터 테이블: 실제 이용자 데이터를 정렬, 페이지네이션하여 제공
  • 응답 순위 및 성별 응답률: 상세 통계 정보 제공

3. 스마트 필터링

카테고리, 지역, 나이별 동적 필터를 적용하여 원하는 데이터를 정밀하게 추출할 수 있습니다.

4. AI 채팅 인터페이스

검색창 클릭으로 활성화되는 AI 어시스턴트를 통해 데이터에 대한 자유로운 질문이 가능하며, 이전 대화 맥락을 유지하여 연속적인 질의응답을 지원합니다.

AI 챗봇

주요 특징:

  • 데이터 기반 대화형 응답: 패널 데이터를 기반으로 짧고 명확하게 요약하여 대답
  • 후속 질문 지원: 이전 대화 맥락을 유지하여 연속적인 질문 가능
  • 스몰톡 처리: 데이터와 관련 없는 일반 질문은 smalltalk_chat으로 자연스럽게 응대

5. 데이터 내보내기

차트 이미지, PDF, CSV 형식으로 분석 결과를 다운로드할 수 있습니다.


기술 스택

영역스택
Frontend
Backend
Database
Infra
LLM

시스템 아키텍처

사용자 질의 (자연어)
↓
React Frontend (검색 UI)
↓
FastAPI Backend
↓
┌─────────────────────────────────┐
│ 1. LangChain RAG Pipeline │
│ 2. PostgreSQL + pgvector │
│ 3. 임베딩 기반 유사도 검색 │
└─────────────────────────────────┘
↓
LLM (GPT) 응답 생성
↓
데이터 시각화 (Chart.js)
↓
사용자에게 결과 반환

프로젝트 구조

Eternal/
├── src/ # React 프론트엔드 소스
│ ├── components/ # UI 컴포넌트
│ │ ├── AIChatInterface.js
│ │ ├── AdvancedChart.js
│ │ ├── ChatInterface.js
│ │ ├── DataTable.js
│ │ ├── DataVisualization.js
│ │ ├── DeviceMockup.js
│ │ ├── FilterPanel.js
│ │ ├── HeroSection.js
│ │ ├── Logo.js
│ │ ├── SearchBox.js
│ │ ├── SearchResults.js
│ │ ├── SearchTags.js
│ │ └── SmartChart.js
│ ├── App.js # 메인 앱 컴포넌트
│ ├── index.js # 진입점
│ └── index.css # 전역 스타일
│
├── public/ # 정적 파일
│ └── index.html
│
├── build/ # 프로덕션 빌드
│ └── static/
│
├── images/ # 프로젝트 이미지
│ └── 리드미.png
│
├── main.py # FastAPI 백엔드 서버
├── LLMlangchan.py # LLM RAG 파이프라인
├── requirements.txt # Python 의존성
├── package.json # Node.js 의존성
├── tailwind.config.js # Tailwind 설정
└── README.md

팀 역할

이름역할주요 담당
김홍근팀장 / PM일정 관리 · 주간 보고서 취합 · GitHub 관리 · 발표/브리핑 · 팀원 코드 리뷰
최용주프론트엔드React + Tailwind UI 제작 · 시각화 · UX 최적화
서정원데이터 엔지니어데이터 전처리 · 스키마 설계 · 임베딩 · PostgreSQL
김민석LLM 엔지니어LLM API 연동 · 프롬프트 설계 · RAG/Eval 관리
고범창백엔드FastAPI 서버 · DB 연동 · AWS 배포


시연

시연영상 보러가기


About

자연어 질의 기반 패널 데이터 검색 및 AI 시각화 플랫폼 | Natural Language Panel Data Search & AI Visualization Platform with RAG

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Eternel

25-2 프리캡스톤디자인 | 자연어 질의 기반 데이터 추출 및 시각화 아키텍처

최근 생성형 AI 기술은 다양한 분야에서 활용되고 있지만, 복잡한 패널 데이터를 일반 사용자가 직관적으로 검색하고 분석하는 데는 여전히 어려움이 있습니다.

Eternel은 자연어 질의를 통해 누구나 쉽게 패널 데이터를 검색하고, AI 기반 분석 결과를 시각화하여 데이터 인사이트를 발견할 수 있도록 돕는 플랫폼입니다.

Eternel 메인 화면


주요 기능

1. 자연어 기반 스마트 검색 및 AI 요약 분석

사용자는 "체력 관리", "결혼 상태" 등 일상적인 언어로 질문하면, AI가 관련 패널 데이터를 자동으로 검색하고 요약 분석 결과를 제공합니다.

AI 요약 분석 결과

주요 특징:

  • 자연어 질의: 일상 언어로 데이터 검색 가능
  • AI 요약 분석: 검색 결과에 대한 간결한 인사이트 제공
  • 실시간 검색: 백엔드 API와 연동하여 즉시 결과 반환

2. 다양한 데이터 시각화

검색 결과를 다양한 형태의 차트와 테이블로 시각화하여 직관적인 데이터 분석을 지원합니다.

데이터 시각화

제공하는 차트:

  • 퀵 차트: 주요 통계를 한눈에 확인
  • 나이대별 통계 분포: 막대 차트로 연령대별 응답 현황 표시
  • 지역별 응답 비중: 원형 차트로 지역별 분포 시각화
  • 데이터 테이블: 실제 이용자 데이터를 정렬, 페이지네이션하여 제공
  • 응답 순위 및 성별 응답률: 상세 통계 정보 제공

3. 스마트 필터링

카테고리, 지역, 나이별 동적 필터를 적용하여 원하는 데이터를 정밀하게 추출할 수 있습니다.

4. AI 채팅 인터페이스

검색창 클릭으로 활성화되는 AI 어시스턴트를 통해 데이터에 대한 자유로운 질문이 가능하며, 이전 대화 맥락을 유지하여 연속적인 질의응답을 지원합니다.

AI 챗봇

주요 특징:

  • 데이터 기반 대화형 응답: 패널 데이터를 기반으로 짧고 명확하게 요약하여 대답
  • 후속 질문 지원: 이전 대화 맥락을 유지하여 연속적인 질문 가능
  • 스몰톡 처리: 데이터와 관련 없는 일반 질문은 smalltalk_chat으로 자연스럽게 응대

5. 데이터 내보내기

차트 이미지, PDF, CSV 형식으로 분석 결과를 다운로드할 수 있습니다.


기술 스택

영역스택
Frontend
Backend
Database
Infra
LLM

시스템 아키텍처

사용자 질의 (자연어)
↓
React Frontend (검색 UI)
↓
FastAPI Backend
↓
┌─────────────────────────────────┐
│ 1. LangChain RAG Pipeline │
│ 2. PostgreSQL + pgvector │
│ 3. 임베딩 기반 유사도 검색 │
└─────────────────────────────────┘
↓
LLM (GPT) 응답 생성
↓
데이터 시각화 (Chart.js)
↓
사용자에게 결과 반환

프로젝트 구조

Eternal/
├── src/ # React 프론트엔드 소스
│ ├── components/ # UI 컴포넌트
│ │ ├── AIChatInterface.js
│ │ ├── AdvancedChart.js
│ │ ├── ChatInterface.js
│ │ ├── DataTable.js
│ │ ├── DataVisualization.js
│ │ ├── DeviceMockup.js
│ │ ├── FilterPanel.js
│ │ ├── HeroSection.js
│ │ ├── Logo.js
│ │ ├── SearchBox.js
│ │ ├── SearchResults.js
│ │ ├── SearchTags.js
│ │ └── SmartChart.js
│ ├── App.js # 메인 앱 컴포넌트
│ ├── index.js # 진입점
│ └── index.css # 전역 스타일
│
├── public/ # 정적 파일
│ └── index.html
│
├── build/ # 프로덕션 빌드
│ └── static/
│
├── images/ # 프로젝트 이미지
│ └── 리드미.png
│
├── main.py # FastAPI 백엔드 서버
├── LLMlangchan.py # LLM RAG 파이프라인
├── requirements.txt # Python 의존성
├── package.json # Node.js 의존성
├── tailwind.config.js # Tailwind 설정
└── README.md

팀 역할

이름역할주요 담당
김홍근팀장 / PM일정 관리 · 주간 보고서 취합 · GitHub 관리 · 발표/브리핑 · 팀원 코드 리뷰
최용주프론트엔드React + Tailwind UI 제작 · 시각화 · UX 최적화
서정원데이터 엔지니어데이터 전처리 · 스키마 설계 · 임베딩 · PostgreSQL
김민석LLM 엔지니어LLM API 연동 · 프롬프트 설계 · RAG/Eval 관리
고범창백엔드FastAPI 서버 · DB 연동 · AWS 배포


시연

시연영상 보러가기


About

자연어 질의 기반 패널 데이터 검색 및 AI 시각화 플랫폼 | Natural Language Panel Data Search & AI Visualization Platform with RAG

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Eternel

25-2 프리캡스톤디자인 | 자연어 질의 기반 데이터 추출 및 시각화 아키텍처

최근 생성형 AI 기술은 다양한 분야에서 활용되고 있지만, 복잡한 패널 데이터를 일반 사용자가 직관적으로 검색하고 분석하는 데는 여전히 어려움이 있습니다.

Eternel은 자연어 질의를 통해 누구나 쉽게 패널 데이터를 검색하고, AI 기반 분석 결과를 시각화하여 데이터 인사이트를 발견할 수 있도록 돕는 플랫폼입니다.

Eternel 메인 화면


주요 기능

1. 자연어 기반 스마트 검색 및 AI 요약 분석

사용자는 "체력 관리", "결혼 상태" 등 일상적인 언어로 질문하면, AI가 관련 패널 데이터를 자동으로 검색하고 요약 분석 결과를 제공합니다.

AI 요약 분석 결과

주요 특징:

  • 자연어 질의: 일상 언어로 데이터 검색 가능
  • AI 요약 분석: 검색 결과에 대한 간결한 인사이트 제공
  • 실시간 검색: 백엔드 API와 연동하여 즉시 결과 반환

2. 다양한 데이터 시각화

검색 결과를 다양한 형태의 차트와 테이블로 시각화하여 직관적인 데이터 분석을 지원합니다.

데이터 시각화

제공하는 차트:

  • 퀵 차트: 주요 통계를 한눈에 확인
  • 나이대별 통계 분포: 막대 차트로 연령대별 응답 현황 표시
  • 지역별 응답 비중: 원형 차트로 지역별 분포 시각화
  • 데이터 테이블: 실제 이용자 데이터를 정렬, 페이지네이션하여 제공
  • 응답 순위 및 성별 응답률: 상세 통계 정보 제공

3. 스마트 필터링

카테고리, 지역, 나이별 동적 필터를 적용하여 원하는 데이터를 정밀하게 추출할 수 있습니다.

4. AI 채팅 인터페이스

검색창 클릭으로 활성화되는 AI 어시스턴트를 통해 데이터에 대한 자유로운 질문이 가능하며, 이전 대화 맥락을 유지하여 연속적인 질의응답을 지원합니다.

AI 챗봇

주요 특징:

  • 데이터 기반 대화형 응답: 패널 데이터를 기반으로 짧고 명확하게 요약하여 대답
  • 후속 질문 지원: 이전 대화 맥락을 유지하여 연속적인 질문 가능
  • 스몰톡 처리: 데이터와 관련 없는 일반 질문은 smalltalk_chat으로 자연스럽게 응대

5. 데이터 내보내기

차트 이미지, PDF, CSV 형식으로 분석 결과를 다운로드할 수 있습니다.


기술 스택

영역스택
Frontend
Backend
Database
Infra
LLM

시스템 아키텍처

사용자 질의 (자연어)
↓
React Frontend (검색 UI)
↓
FastAPI Backend
↓
┌─────────────────────────────────┐
│ 1. LangChain RAG Pipeline │
│ 2. PostgreSQL + pgvector │
│ 3. 임베딩 기반 유사도 검색 │
└─────────────────────────────────┘
↓
LLM (GPT) 응답 생성
↓
데이터 시각화 (Chart.js)
↓
사용자에게 결과 반환

프로젝트 구조

Eternal/
├── src/ # React 프론트엔드 소스
│ ├── components/ # UI 컴포넌트
│ │ ├── AIChatInterface.js
│ │ ├── AdvancedChart.js
│ │ ├── ChatInterface.js
│ │ ├── DataTable.js
│ │ ├── DataVisualization.js
│ │ ├── DeviceMockup.js
│ │ ├── FilterPanel.js
│ │ ├── HeroSection.js
│ │ ├── Logo.js
│ │ ├── SearchBox.js
│ │ ├── SearchResults.js
│ │ ├── SearchTags.js
│ │ └── SmartChart.js
│ ├── App.js # 메인 앱 컴포넌트
│ ├── index.js # 진입점
│ └── index.css # 전역 스타일
│
├── public/ # 정적 파일
│ └── index.html
│
├── build/ # 프로덕션 빌드
│ └── static/
│
├── images/ # 프로젝트 이미지
│ └── 리드미.png
│
├── main.py # FastAPI 백엔드 서버
├── LLMlangchan.py # LLM RAG 파이프라인
├── requirements.txt # Python 의존성
├── package.json # Node.js 의존성
├── tailwind.config.js # Tailwind 설정
└── README.md

팀 역할

이름역할주요 담당
김홍근팀장 / PM일정 관리 · 주간 보고서 취합 · GitHub 관리 · 발표/브리핑 · 팀원 코드 리뷰
최용주프론트엔드React + Tailwind UI 제작 · 시각화 · UX 최적화
서정원데이터 엔지니어데이터 전처리 · 스키마 설계 · 임베딩 · PostgreSQL
김민석LLM 엔지니어LLM API 연동 · 프롬프트 설계 · RAG/Eval 관리
고범창백엔드FastAPI 서버 · DB 연동 · AWS 배포


시연

시연영상 보러가기


About

자연어 질의 기반 패널 데이터 검색 및 AI 시각화 플랫폼 | Natural Language Panel Data Search & AI Visualization Platform with RAG

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Eternel

25-2 프리캡스톤디자인 | 자연어 질의 기반 데이터 추출 및 시각화 아키텍처

최근 생성형 AI 기술은 다양한 분야에서 활용되고 있지만, 복잡한 패널 데이터를 일반 사용자가 직관적으로 검색하고 분석하는 데는 여전히 어려움이 있습니다.

Eternel은 자연어 질의를 통해 누구나 쉽게 패널 데이터를 검색하고, AI 기반 분석 결과를 시각화하여 데이터 인사이트를 발견할 수 있도록 돕는 플랫폼입니다.

Eternel 메인 화면


주요 기능

1. 자연어 기반 스마트 검색 및 AI 요약 분석

사용자는 "체력 관리", "결혼 상태" 등 일상적인 언어로 질문하면, AI가 관련 패널 데이터를 자동으로 검색하고 요약 분석 결과를 제공합니다.

AI 요약 분석 결과

주요 특징:

  • 자연어 질의: 일상 언어로 데이터 검색 가능
  • AI 요약 분석: 검색 결과에 대한 간결한 인사이트 제공
  • 실시간 검색: 백엔드 API와 연동하여 즉시 결과 반환

2. 다양한 데이터 시각화

검색 결과를 다양한 형태의 차트와 테이블로 시각화하여 직관적인 데이터 분석을 지원합니다.

데이터 시각화

제공하는 차트:

  • 퀵 차트: 주요 통계를 한눈에 확인
  • 나이대별 통계 분포: 막대 차트로 연령대별 응답 현황 표시
  • 지역별 응답 비중: 원형 차트로 지역별 분포 시각화
  • 데이터 테이블: 실제 이용자 데이터를 정렬, 페이지네이션하여 제공
  • 응답 순위 및 성별 응답률: 상세 통계 정보 제공

3. 스마트 필터링

카테고리, 지역, 나이별 동적 필터를 적용하여 원하는 데이터를 정밀하게 추출할 수 있습니다.

4. AI 채팅 인터페이스

검색창 클릭으로 활성화되는 AI 어시스턴트를 통해 데이터에 대한 자유로운 질문이 가능하며, 이전 대화 맥락을 유지하여 연속적인 질의응답을 지원합니다.

AI 챗봇

주요 특징:

  • 데이터 기반 대화형 응답: 패널 데이터를 기반으로 짧고 명확하게 요약하여 대답
  • 후속 질문 지원: 이전 대화 맥락을 유지하여 연속적인 질문 가능
  • 스몰톡 처리: 데이터와 관련 없는 일반 질문은 smalltalk_chat으로 자연스럽게 응대

5. 데이터 내보내기

차트 이미지, PDF, CSV 형식으로 분석 결과를 다운로드할 수 있습니다.


기술 스택

영역스택
Frontend
Backend
Database
Infra
LLM

시스템 아키텍처

사용자 질의 (자연어)
↓
React Frontend (검색 UI)
↓
FastAPI Backend
↓
┌─────────────────────────────────┐
│ 1. LangChain RAG Pipeline │
│ 2. PostgreSQL + pgvector │
│ 3. 임베딩 기반 유사도 검색 │
└─────────────────────────────────┘
↓
LLM (GPT) 응답 생성
↓
데이터 시각화 (Chart.js)
↓
사용자에게 결과 반환

프로젝트 구조

Eternal/
├── src/ # React 프론트엔드 소스
│ ├── components/ # UI 컴포넌트
│ │ ├── AIChatInterface.js
│ │ ├── AdvancedChart.js
│ │ ├── ChatInterface.js
│ │ ├── DataTable.js
│ │ ├── DataVisualization.js
│ │ ├── DeviceMockup.js
│ │ ├── FilterPanel.js
│ │ ├── HeroSection.js
│ │ ├── Logo.js
│ │ ├── SearchBox.js
│ │ ├── SearchResults.js
│ │ ├── SearchTags.js
│ │ └── SmartChart.js
│ ├── App.js # 메인 앱 컴포넌트
│ ├── index.js # 진입점
│ └── index.css # 전역 스타일
│
├── public/ # 정적 파일
│ └── index.html
│
├── build/ # 프로덕션 빌드
│ └── static/
│
├── images/ # 프로젝트 이미지
│ └── 리드미.png
│
├── main.py # FastAPI 백엔드 서버
├── LLMlangchan.py # LLM RAG 파이프라인
├── requirements.txt # Python 의존성
├── package.json # Node.js 의존성
├── tailwind.config.js # Tailwind 설정
└── README.md

팀 역할

이름역할주요 담당
김홍근팀장 / PM일정 관리 · 주간 보고서 취합 · GitHub 관리 · 발표/브리핑 · 팀원 코드 리뷰
최용주프론트엔드React + Tailwind UI 제작 · 시각화 · UX 최적화
서정원데이터 엔지니어데이터 전처리 · 스키마 설계 · 임베딩 · PostgreSQL
김민석LLM 엔지니어LLM API 연동 · 프롬프트 설계 · RAG/Eval 관리
고범창백엔드FastAPI 서버 · DB 연동 · AWS 배포


시연

시연영상 보러가기


About

자연어 질의 기반 패널 데이터 검색 및 AI 시각화 플랫폼 | Natural Language Panel Data Search & AI Visualization Platform with RAG

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Eternel

25-2 프리캡스톤디자인 | 자연어 질의 기반 데이터 추출 및 시각화 아키텍처

최근 생성형 AI 기술은 다양한 분야에서 활용되고 있지만, 복잡한 패널 데이터를 일반 사용자가 직관적으로 검색하고 분석하는 데는 여전히 어려움이 있습니다.

Eternel은 자연어 질의를 통해 누구나 쉽게 패널 데이터를 검색하고, AI 기반 분석 결과를 시각화하여 데이터 인사이트를 발견할 수 있도록 돕는 플랫폼입니다.

Eternel 메인 화면


주요 기능

1. 자연어 기반 스마트 검색 및 AI 요약 분석

사용자는 "체력 관리", "결혼 상태" 등 일상적인 언어로 질문하면, AI가 관련 패널 데이터를 자동으로 검색하고 요약 분석 결과를 제공합니다.

AI 요약 분석 결과

주요 특징:

  • 자연어 질의: 일상 언어로 데이터 검색 가능
  • AI 요약 분석: 검색 결과에 대한 간결한 인사이트 제공
  • 실시간 검색: 백엔드 API와 연동하여 즉시 결과 반환

2. 다양한 데이터 시각화

검색 결과를 다양한 형태의 차트와 테이블로 시각화하여 직관적인 데이터 분석을 지원합니다.

데이터 시각화

제공하는 차트:

  • 퀵 차트: 주요 통계를 한눈에 확인
  • 나이대별 통계 분포: 막대 차트로 연령대별 응답 현황 표시
  • 지역별 응답 비중: 원형 차트로 지역별 분포 시각화
  • 데이터 테이블: 실제 이용자 데이터를 정렬, 페이지네이션하여 제공
  • 응답 순위 및 성별 응답률: 상세 통계 정보 제공

3. 스마트 필터링

카테고리, 지역, 나이별 동적 필터를 적용하여 원하는 데이터를 정밀하게 추출할 수 있습니다.

4. AI 채팅 인터페이스

검색창 클릭으로 활성화되는 AI 어시스턴트를 통해 데이터에 대한 자유로운 질문이 가능하며, 이전 대화 맥락을 유지하여 연속적인 질의응답을 지원합니다.

AI 챗봇

주요 특징:

  • 데이터 기반 대화형 응답: 패널 데이터를 기반으로 짧고 명확하게 요약하여 대답
  • 후속 질문 지원: 이전 대화 맥락을 유지하여 연속적인 질문 가능
  • 스몰톡 처리: 데이터와 관련 없는 일반 질문은 smalltalk_chat으로 자연스럽게 응대

5. 데이터 내보내기

차트 이미지, PDF, CSV 형식으로 분석 결과를 다운로드할 수 있습니다.


기술 스택

영역스택
Frontend
Backend
Database
Infra
LLM

시스템 아키텍처

사용자 질의 (자연어)
↓
React Frontend (검색 UI)
↓
FastAPI Backend
↓
┌─────────────────────────────────┐
│ 1. LangChain RAG Pipeline │
│ 2. PostgreSQL + pgvector │
│ 3. 임베딩 기반 유사도 검색 │
└─────────────────────────────────┘
↓
LLM (GPT) 응답 생성
↓
데이터 시각화 (Chart.js)
↓
사용자에게 결과 반환

프로젝트 구조

Eternal/
├── src/ # React 프론트엔드 소스
│ ├── components/ # UI 컴포넌트
│ │ ├── AIChatInterface.js
│ │ ├── AdvancedChart.js
│ │ ├── ChatInterface.js
│ │ ├── DataTable.js
│ │ ├── DataVisualization.js
│ │ ├── DeviceMockup.js
│ │ ├── FilterPanel.js
│ │ ├── HeroSection.js
│ │ ├── Logo.js
│ │ ├── SearchBox.js
│ │ ├── SearchResults.js
│ │ ├── SearchTags.js
│ │ └── SmartChart.js
│ ├── App.js # 메인 앱 컴포넌트
│ ├── index.js # 진입점
│ └── index.css # 전역 스타일
│
├── public/ # 정적 파일
│ └── index.html
│
├── build/ # 프로덕션 빌드
│ └── static/
│
├── images/ # 프로젝트 이미지
│ └── 리드미.png
│
├── main.py # FastAPI 백엔드 서버
├── LLMlangchan.py # LLM RAG 파이프라인
├── requirements.txt # Python 의존성
├── package.json # Node.js 의존성
├── tailwind.config.js # Tailwind 설정
└── README.md

팀 역할

이름역할주요 담당
김홍근팀장 / PM일정 관리 · 주간 보고서 취합 · GitHub 관리 · 발표/브리핑 · 팀원 코드 리뷰
최용주프론트엔드React + Tailwind UI 제작 · 시각화 · UX 최적화
서정원데이터 엔지니어데이터 전처리 · 스키마 설계 · 임베딩 · PostgreSQL
김민석LLM 엔지니어LLM API 연동 · 프롬프트 설계 · RAG/Eval 관리
고범창백엔드FastAPI 서버 · DB 연동 · AWS 배포


시연

시연영상 보러가기


About

자연어 질의 기반 패널 데이터 검색 및 AI 시각화 플랫폼 | Natural Language Panel Data Search & AI Visualization Platform with RAG

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Latest commit

History

128 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

Eternel

25-2 프리캡스톤디자인 | 자연어 질의 기반 데이터 추출 및 시각화 아키텍처

최근 생성형 AI 기술은 다양한 분야에서 활용되고 있지만, 복잡한 패널 데이터를 일반 사용자가 직관적으로 검색하고 분석하는 데는 여전히 어려움이 있습니다.

Eternel은 자연어 질의를 통해 누구나 쉽게 패널 데이터를 검색하고, AI 기반 분석 결과를 시각화하여 데이터 인사이트를 발견할 수 있도록 돕는 플랫폼입니다.

Eternel 메인 화면


주요 기능

1. 자연어 기반 스마트 검색 및 AI 요약 분석

사용자는 "체력 관리", "결혼 상태" 등 일상적인 언어로 질문하면, AI가 관련 패널 데이터를 자동으로 검색하고 요약 분석 결과를 제공합니다.

AI 요약 분석 결과

주요 특징:

  • 자연어 질의: 일상 언어로 데이터 검색 가능
  • AI 요약 분석: 검색 결과에 대한 간결한 인사이트 제공
  • 실시간 검색: 백엔드 API와 연동하여 즉시 결과 반환

2. 다양한 데이터 시각화

검색 결과를 다양한 형태의 차트와 테이블로 시각화하여 직관적인 데이터 분석을 지원합니다.

데이터 시각화

제공하는 차트:

  • 퀵 차트: 주요 통계를 한눈에 확인
  • 나이대별 통계 분포: 막대 차트로 연령대별 응답 현황 표시
  • 지역별 응답 비중: 원형 차트로 지역별 분포 시각화
  • 데이터 테이블: 실제 이용자 데이터를 정렬, 페이지네이션하여 제공
  • 응답 순위 및 성별 응답률: 상세 통계 정보 제공

3. 스마트 필터링

카테고리, 지역, 나이별 동적 필터를 적용하여 원하는 데이터를 정밀하게 추출할 수 있습니다.

4. AI 채팅 인터페이스

검색창 클릭으로 활성화되는 AI 어시스턴트를 통해 데이터에 대한 자유로운 질문이 가능하며, 이전 대화 맥락을 유지하여 연속적인 질의응답을 지원합니다.

AI 챗봇

주요 특징:

  • 데이터 기반 대화형 응답: 패널 데이터를 기반으로 짧고 명확하게 요약하여 대답
  • 후속 질문 지원: 이전 대화 맥락을 유지하여 연속적인 질문 가능
  • 스몰톡 처리: 데이터와 관련 없는 일반 질문은 smalltalk_chat으로 자연스럽게 응대

5. 데이터 내보내기

차트 이미지, PDF, CSV 형식으로 분석 결과를 다운로드할 수 있습니다.


기술 스택

영역스택
Frontend
Backend
Database
Infra
LLM

시스템 아키텍처

사용자 질의 (자연어)
↓
React Frontend (검색 UI)
↓
FastAPI Backend
↓
┌─────────────────────────────────┐
│ 1. LangChain RAG Pipeline │
│ 2. PostgreSQL + pgvector │
│ 3. 임베딩 기반 유사도 검색 │
└─────────────────────────────────┘
↓
LLM (GPT) 응답 생성
↓
데이터 시각화 (Chart.js)
↓
사용자에게 결과 반환

프로젝트 구조

Eternal/
├── src/ # React 프론트엔드 소스
│ ├── components/ # UI 컴포넌트
│ │ ├── AIChatInterface.js
│ │ ├── AdvancedChart.js
│ │ ├── ChatInterface.js
│ │ ├── DataTable.js
│ │ ├── DataVisualization.js
│ │ ├── DeviceMockup.js
│ │ ├── FilterPanel.js
│ │ ├── HeroSection.js
│ │ ├── Logo.js
│ │ ├── SearchBox.js
│ │ ├── SearchResults.js
│ │ ├── SearchTags.js
│ │ └── SmartChart.js
│ ├── App.js # 메인 앱 컴포넌트
│ ├── index.js # 진입점
│ └── index.css # 전역 스타일
│
├── public/ # 정적 파일
│ └── index.html
│
├── build/ # 프로덕션 빌드
│ └── static/
│
├── images/ # 프로젝트 이미지
│ └── 리드미.png
│
├── main.py # FastAPI 백엔드 서버
├── LLMlangchan.py # LLM RAG 파이프라인
├── requirements.txt # Python 의존성
├── package.json # Node.js 의존성
├── tailwind.config.js # Tailwind 설정
└── README.md

팀 역할

이름역할주요 담당
김홍근팀장 / PM일정 관리 · 주간 보고서 취합 · GitHub 관리 · 발표/브리핑 · 팀원 코드 리뷰
최용주프론트엔드React + Tailwind UI 제작 · 시각화 · UX 최적화
서정원데이터 엔지니어데이터 전처리 · 스키마 설계 · 임베딩 · PostgreSQL
김민석LLM 엔지니어LLM API 연동 · 프롬프트 설계 · RAG/Eval 관리
고범창백엔드FastAPI 서버 · DB 연동 · AWS 배포


시연

시연영상 보러가기


About

자연어 질의 기반 패널 데이터 검색 및 AI 시각화 플랫폼 | Natural Language Panel Data Search & AI Visualization Platform with RAG

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors