본문 바로가기

ReactFileStructure

 (42)
링크에 해당하는 경로 이동 react-router-dom 을 사용하여 경로 처리, 컴포넌트에 대한 설명 페이지 생성라우팅 추가import React from "react";import { BrowserRouter as Router, Routes, Route } from "react-router-dom";import FileViewer from "./FileViewer";import FileDetail from "./FileDetail";import DocsPage from "./DocsPage"; // 새 문서 페이지import files from "./FilesData";const App = () => { return ( } /> } /> } /> {/* 새 경로 */} ..
코드 설명을 위해 코드 내 하이라이트 추가 2024.11.29 - [dev_AI_framework] - 포트폴리오, 리액트 화면 구성 방안 포트폴리오, 리액트 화면 구성 방안코드와 해당 코드의 하이라이트, 클릭 시 해당 설명 페이지로 이동하도록llm 을 추가로 활용할 수 있는 방안으로 기존에 내가 제공하는 코드에 대한 설명 외에 추가로 llm 에서 내 준 코드의 해석teach-meaning.tistory.com2024.11.29 - [dev_AI_framework] - 각 화면에 해당하는 설명들을 구성해야 해... 동적 방식이 아닌 정적 방식으로 구현하자 - 파일 설명의 작성 부분에 llm 을 적용시킬 수 있음 코드 내용 요약 등등 각 화면에 해당하는 설명들을 구성해야 해... 동적 방식이 아닌 정적 방식으로 구현하자 - 파일string 형식으로..
코드 하이라이트를 위한 코드 부분 렌더링, 하이라이트 및 링크 추가 import React from "react";import { useParams, Link } from "react-router-dom";const FileDetail = ({ files }) => { const { fileName } = useParams(); const file = files.find((f) => f.fileName === fileName); if (!file) { return File not found; } return ( {file.fileName} {file.description} {file.code.map((line, index) => ( {line.link ? ( ..
code 를 배열로 변환하여 각 줄에 대한 메타데이터를 포함한다. const files = [ { fileName: "App.js", description: "This is the main entry point of the React application.", code: [ { text: 'import React from "react";', highlight: true }, { text: 'import FileViewer from "./FileViewer";', highlight: false }, { text: 'import files from "./FilesData";', highlight: false }, { text: "", highlight: false }, { text: "const App = ()..
미니 프로젝트, 메모리 관리 LLM 을 이용한 chat bot 은 어떻게 기억하는 듯이 행동할 수 있을까?이전의 질문과 답변에 대한 내용을 프롬프트에 포함시킴으로써 이전의 대화 내용들을 기억하는 듯이 행동하게 할 수 있었음, 그런데 이러한 대화 내용들을 무한정 기억하게 한다면, 늘어난 프롬프트로 인해 API 토큰 비용이 많이 발생하게 됨, (연산이 많아지고 답변도 더 느려짐)따라서 리스트 형태로 저장한 내용들을 오래된 순으로 자르거나 요약하는 방법을 사용했음, 하지만 사용자가 일관된, 비슷한 내용의 질문과 답변을 한다는 보장이 없음, 이를 처리하는 로직을 구현한다면 효과적인 프롬프트 메모리 관리를 할 수 있을 것, 비슷한 내용끼리 묶고 요약,  사용자 입력이 주어지고 처리한 뒤에 답변을 받도록 구현한다.  여러 개의 메모리 중 하나..
LLM, RAG Retrieval Augmented GenerationLLM 의 문제점Model Hallucination ProblemLLM 이 생성하는 텍스트는 확률에 기반해 생성된다.일관성이 없지만 사실인 것 같은 내용을 생성하기도 한다.Timeliness Problem최신의 데이터, time sensitive data 가 훈련에 포함되지 않을 수  있다.최신 정보에 대한 질문에 답변하지 못하는 경우가 발생한다. RAG 란?학습된 지식에만 의존하는 것이 아닌 새로운 지식을 추가하여 LLM 이 올바른 답변을 할 수 있게 도와준다.Retrieval검색이 아닌 가져오는, 집어오는 것Augmented증강되었다는 뜻, Generation생성, 사용자 질문/질의에 대한 응답을 텍스트로 생성하는 것을 의미 RAG 프레임워크 플로..
내부 문서 (음악 데이터) 기반 질의 응답 시스템 구현 - 1 file_path = "C:/Users/owner/Desktop/LLM miniproject/langGraphChatbot/data/tcc_ceds_music.csv"data = pd.read_csv(file_path)데이터 로드data['combined_text'] = data.apply(lambda row: f"Artist: {row['artist_name']}, Track: {row['track_name']}, Genre: {row['genre']}, Lyrics: {row['lyrics']}", axis=1)데의터의 각 행에 대해 artist_name, track_nam, genre, lyrics 열의 내용을 결합하여 combined_text 열에 저장한다.결합된 텍스트는 각 노래에 대한 설명이 ..
LangGraph 예제, 노드의 다양한 역할과 분기 조건의 설정 from typing import Annotatedfrom typing_extensions import TypedDictfrom langgraph.graph.message import add_messagesclass State(TypedDict): """ { "input":"Hello", "result":5 } """ input: str # 사용자 input data result: int # Node의 result datadef len_str(state:State) -> State: # hello input = state["input"] # 5 result = len(input) return { "resu..

티스토리툴바