@nine-lab/nine-mu 0.1.150 → 0.1.152

package/src/components/ai/aiContainer.js

@@ -0,0 +1,438 @@
+import ninegrid from "../index.js";
+import { ChatGoogleGenerativeAI } from "@langchain/google-genai";
+import { Ollama } from "@langchain/ollama";
+import { ChatOpenAI } from '@langchain/openai';
+import { HumanMessage, SystemMessage } from '@langchain/core/messages';
+import { OllamaEmbeddings } from "@langchain/ollama";
+import { QdrantClient } from "@qdrant/js-client-rest";
+import { StringOutputParser } from "@langchain/core/output_parsers"
+import { PromptTemplate} from "@langchain/core/prompts"
+
+class aiContainer extends HTMLElement
+{
+	#target;
+	#ing = false;
+	#model;
+	#qdrantClient;
+	//#elChat;
+
+	settings;		/** nx-ai-settings element */
+
+	constructor() {
+		super();
+		this.attachShadow({ mode: 'open' });
+	}
+	
+	connectedCallback() {
+
+		const textareaText = "나에게 무엇이든 물어봐...";
+		
+		this.shadowRoot.innerHTML = `
+			<style>
+				@import "https://cdn.jsdelivr.net/npm/ninegrid2@${ninegrid.version}/dist/css/ai.css";
+				${ninegrid.getCustomPath(this,"ai.css")}
+			</style>
+
+			<div class="wrapper">
+				<nx-ai-settings></nx-ai-settings>
+
+				<div class="container">
+					<div class="head">
+						<div class="logo"></div>
+					</div>
+					<nx-ai-chat></nx-ai-chat>
+					<div class="foot">
+						<textarea name="ask" id="q" name="q" rows="4" placeholder="${textareaText}"></textarea>
+					</div>
+				</div>
+				<div class="menu">
+					<div class="collapse-icon"></div>
+					<div class="menu-icon menu-filter active"></div>
+					<div class="menu-icon menu-general"></div>
+					<div class="menu-icon menu-setting"></div>
+				</div>
+			</div>
+
+			<div class="expand-icon"></div>
+		`;
+
+		requestAnimationFrame(() => {
+			this.#init();
+		});
+	};
+
+	get target() { return this.#target; };
+	set target(v) { this.#target = v; };
+
+	#createModel = () => {
+
+		switch (this.settings.server) {
+			case "gemini":
+				console.log(this.settings.geminiApiKey);
+				this.#model = new ChatGoogleGenerativeAI({ model: this.settings.model, apiKey: this.settings.geminiApiKey, temperature: 0,});
+				break;
+			case "openai":
+				console.log(this.settings.openaiApiKey);
+				this.#model = new ChatOpenAI({ model: this.settings.model, apiKey: this.settings.openaiApiKey, temperature: 0, });
+				break;
+			case "ollama":
+				this.#model = new Ollama({
+					model: this.settings.model,
+					host: this.settings.ollamaUrl,
+				});
+				break;
+		}
+
+		this.#qdrantClient = new QdrantClient({ url: this.settings.qdrantUrl });
+	};
+
+	#getColumnInfo = () => {
+		if (this.#target.tagName === "NINE-GRID") {
+			return this.#target.columns.info()
+		}
+	};
+
+	#getColumnInfoString = () => {
+
+		const columnInfo = this.#getColumnInfo() || [];
+		
+		let r = "";
+
+		columnInfo.forEach(info => {
+			r += `- "${info.name}": ${info.desc}, ${info.type}\n`;
+		});
+		
+		return r;
+	};
+
+	#getUniqueKey = () => {
+		if (this.#target.tagName === "NINE-GRID") {
+			return this.#target.dataset.unique;
+		}
+	};
+
+	#getData = () => {
+		if (this.#target.tagName === "NINE-GRID") {
+			return this.#target.data.get();
+		}
+	};
+
+	#isEmptyObject = (obj) => {
+  		return Object.keys(obj).length === 0 && obj.constructor === Object;
+	}
+
+	#extractJsonSnippet = (text) => {
+		const match = text.match(/```json([\s\S]*?)```/);
+		return match ? match[1].trim() : text;
+	};
+
+	#getToday = () => {
+		const now = new Date();
+		const yyyy = now.getFullYear();
+		const mm = String(now.getMonth() + 1).padStart(2, '0'); // 월은 0부터 시작
+		const dd = String(now.getDate()).padStart(2, '0');
+
+		return `${yyyy}-${mm}-${dd}`;
+	}
+
+	#generateQdrantFilter = async () => {
+
+		const userInput = this.shadowRoot.querySelector("textarea").value.trim();
+
+		const systemMessage = "You are a helpful assistant.";
+		// Qdrant 필터로 변환하기 위한 프롬프트 엔지니어링
+		// 중요: 실제 컬렉션의 payload 필드와 그 데이터 타입을 정확히 알려줘야 Gemini가 올바른 필터를 생성합니다.
+		const prompt = `
+			자연어 쿼리를 Qdrant 필터 JSON 객체로 변환하는 AI 비서입니다.
+
+			Qdrant 컬렉션에서 사용 가능한 메타데이터 필드와 유형은 다음과 같습니다.:
+			${this.#getColumnInfoString()}
+
+			필터 생성 규칙:
+			1. 위에 제공된 필드만 사용하십시오. 새로운 필드를 만들지 마십시오.
+			2. 조건이 명확하게 지정되지 않았거나 모호한 경우 필터에 포함하지 마십시오.
+			3. AND 조건에는 'must', OR 조건에는 'should', NOT 조건에는 'must_not'을 사용하십시오.
+			4. 문자열 일치에는 'match.text'를 사용하십시오.
+			5. 날짜 조건은 'YYYY-MM-DD' 형식으로 변형해서 사용하십시요. 오늘날짜는 ${this.#getToday()} 입니다.
+			6. 숫자 범위에는 'range.gte', 'range.lte', 'range.gt', 'range.lt'를 사용하십시오.
+			7. 특정 값을 포함하는 배열에는 'contains', 'match.any' 또는 'match.all'을 사용하십시오.
+			8. 출력은 Qdrant 필터를 나타내는 유효한 JSON 객체여야 합니다.
+			9. 적용 가능한 필터가 없는 경우 빈 JSON 객체인 {}를 반환합니다.
+			
+			예:
+			- "500달러 미만의 전자제품 찾기" -> {"must": [{"key": "category", "match": {"text": "electronics"}}, {"key": "price", "range": {"lt": 500}}]}
+			- "John Doe 또는 Jane Smith의 책 보기" -> {"should": [{"key": "author", "match": {"text": "John Doe"}}, {"key": "author", "match": {"text": "Jane Smith"}}]}
+			- "재고 있는 품목(의류 제외)" -> {"must": [{"key": "in_stock", "match": {"text": true}}], "must_not": [{"key": "category", "match": {"text": "clothing"}}]}
+			- "다음이 포함된 제품 'new_arrival' 태그" -> {"must": [{"key": "tags", "match": {"text": "new_arrival"}}]}
+			- "2020년 이후 출판된 도서" -> {"must": [{"key": "published_year", "range": {"gt": 2020}}]}
+			
+			이제 다음 사용자 쿼리를 변환해 보겠습니다.
+			사용자 쿼리: "${userInput}"
+			
+			Qdrant 필터 JSON:
+		`;
+
+	
+		const response = await this.#model.invoke([
+			new SystemMessage(systemMessage),
+			new HumanMessage(prompt),
+		]);
+
+		console.log(response);
+
+		let filterString;
+		switch (this.settings.server) {
+			case "openai":
+				filterString = this.#extractJsonSnippet(response.content.trim());
+				break;
+			case "gemini":
+				filterString = this.#extractJsonSnippet(response.content.trim());
+				break;
+			case "ollama":
+				filterString = this.#extractJsonSnippet(response);
+				break;
+			default:
+				break;
+		}
+
+		//console.log(filterString);
+
+		return JSON.parse(filterString);
+	}
+
+	#searchWithQdrantFilter = async (filter) => {
+
+		const queryText = this.shadowRoot.querySelector("textarea").value.trim();
+		const collectionName = this.#target.collectionName;
+
+		//try {
+			// 쿼리 텍스트를 임베딩으로 변환 (Gemini Embedding 모델 사용)
+			// LangChain의 Embeddings 클래스 또는 @google/generative-ai SDK 직접 사용 가능
+			// 여기서는 예시를 위해 임시로 더미 벡터를 사용합니다.
+			// 실제로는 GoogleGenerativeAI.embedContent 등을 사용해야 합니다.
+			// const genAI = new GoogleGenerativeAI(GEMINI_API_KEY);
+			// const embeddingModel = genAI.get  GenerativeModel({ model: "embedding-001" });
+			// const { embedding } = await embeddingModel.embedContent({
+			//     content: queryText,
+			//     taskType: "retrieval_query",
+			// });
+			//const queryVector = [0.1, 0.2, 0.3, 0.4, ...Array(764).fill(0)]; // 실제 임베딩 벡터로 대체
+			const embeddings = new OllamaEmbeddings({ model: "nomic-embed-text" });
+			const queryVector = await embeddings.embedQuery(queryText);
+
+
+			console.log(collectionName, filter);
+
+			const searchParams = {
+				vector: queryVector,
+				limit: 500, // 검색 결과 수
+				filter: filter, // Gemini가 생성한 필터 적용
+				with_payload: true, // 페이로드도 함께 가져오도록 설정
+			};
+
+			//console.log("Qdrant Search Params:", JSON.stringify(searchParams, null, 2));
+
+			return await this.#qdrantClient.search(collectionName, searchParams);
+
+		//} catch (error) {
+		//	console.error("Error during Qdrant search:", error);
+			return [];
+		//}
+	};
+
+
+
+	#q1 = async () => {
+
+		/**
+		const filter = {
+			"should": [
+				{
+					"key": "reference_month",
+					"match": {
+						"any": [
+							"2025-04",
+							"2025-05",
+							"2025-06"
+						]
+					}
+				}
+			]
+		}; */
+
+		
+
+		const filter = await this.#generateQdrantFilter();
+		console.log(filter);
+		
+		const searchResults = this.#isEmptyObject(filter) ? [] : ninegrid.filter(this.#getData(), filter);
+
+		await this.#answer(searchResults);
+	};
+
+	#q2 = async () => {
+		const filter = await this.#generateQdrantFilter();
+		console.log(filter);
+		const searchResults = await this.#searchWithQdrantFilter(filter);
+
+		await this.#answer(searchResults);
+	};
+
+	#answer = async (searchResults) => {
+		const elAiChat = this.shadowRoot.querySelector("nx-ai-chat");
+		const columnInfo = this.#getColumnInfo();
+		const uniqueKey = this.#getUniqueKey();
+
+		const isAnalyze = this.settings.shadowRoot.querySelector("#chkAnalyze")?.checked || false;
+		const analyzeCnt = Number(this.settings.shadowRoot.querySelector("#txtAnalyze")?.value || 0);
+
+		console.log(searchResults);
+
+		if (!searchResults || searchResults.length == 0) {
+			elAiChat.add("ai", "관련된 정보가 없습니다.");
+		}
+		else if (isAnalyze && searchResults.length <= analyzeCnt) {
+			//let arr = searchResults.map(item => item.payload);
+			let contextText = `당신은 주어진 정보를 참고하여 답변하는 AI 입니다. 주어진 '정보'를 바탕으로 데이타를 분석해줘. 데이타는 "context" 항목에 있어. 제공될 데이터는 CSV 형식이며, 첫 번째 줄은 컬럼명입니다. 이전에 너가 찾아준 데이타를 다시 보내는거니깐 첫 줄에는 "${searchResults.length}건을 찾았습니다." 라고 답변을 달아줘.\n\ncontext: `;
+
+			let contextText1 = `당신은 주어진 데이터를 분석하고 핵심 인사이트를 도출하는 전문 데이터 분석가입니다.
+
+				아래에 제공될 데이터는 CSV 형식이며, 첫 번째 줄은 컬럼명입니다.
+
+				이 데이터를 철저히 분석하여 다음 질문에 대한 답변을 제공해주세요:
+				- 데이터의 주요 트렌드는 무엇인가요?
+				- 특이하거나 주목할 만한 패턴이 있나요?
+				- 가장 빈번하게 나타나는 항목(또는 값)은 무엇인가요?
+				- 데이터에서 발견할 수 있는 잠재적인 문제점이나 개선점은 무엇인가요?
+				- 각 데이터 레코드를 기반으로 한 간략한 요약 또는 분류가 가능할까요?
+
+				분석 결과는 다음 형식으로 제공해주세요:
+				1.  **주요 트렌드**: 불릿 포인트 형식으로 요약
+				2.  **주목할 만한 패턴/이상치**: 구체적인 예시와 함께 설명
+				3.  **가장 빈번한 항목**: 항목명과 빈도수를 포함 (테이블 형식도 가능)
+				4.  **개선점/문제점**: 텍스트 설명
+				5.  **각 레코드에 대한 간략한 요약 또는 분류**: (선택 사항, 필요시)
+
+				context:\n`;
+
+			columnInfo.forEach(info => {
+				contextText += `${info.desc}\t`;
+			});
+			contextText += "\n";
+
+			for (const o of searchResults) {
+				columnInfo.forEach(info => {
+					contextText += `${o[info.name]}\t`;
+				});
+
+				contextText += "\n";
+				//contextText += `문서ID: ${o.doc_id}, 문서명: ${o.doc_nm}, 매출액: ${o.amt}, 수정자: ${o.update_user}, 수정일: ${o.update_dt}\n`;
+			}
+
+			//console.log(contextText);
+
+			const prompt = PromptTemplate.fromTemplate(
+				contextText
+			)
+
+			const chain = prompt
+				.pipe(this.#model)
+				.pipe(new StringOutputParser())
+
+			const result = await chain.invoke();
+
+			elAiChat.add("ai", result, columnInfo, searchResults, uniqueKey);
+		}
+		else {
+			//elAiChat.add("ai", `${searchResults.length}건의 정보를 찾았습니다.`, columnInfo, searchResults.map(item => item.payload), uniqueKey);
+			elAiChat.add("ai", `${searchResults.length}건의 정보를 찾았습니다.`, columnInfo, searchResults, uniqueKey);
+		}
+	};
+
+	#init = (info) => {
+		
+		this.settings = this.shadowRoot.querySelector("nx-ai-settings");
+
+		//this.#elChat = this.shadowRoot.querySelector("nx-ai-chat");
+
+		this.shadowRoot.querySelector("textarea").addEventListener("keydown", this.#keydownHandler);
+
+		this.shadowRoot.querySelector(".expand-icon").addEventListener("click", this.#toggleCollapseHandler);
+		this.shadowRoot.querySelector(".collapse-icon").addEventListener("click", this.#toggleCollapseHandler);
+
+		this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.addEventListener("click", this.#menuClickHandler));
+	};
+
+	#keydownHandler = async (e) => {
+		if (e.key !== "Enter") return;
+
+		if (this.#target.tagName === "NINE-GRID") {
+		}
+		else {
+			throw new Error("지원하지 않는 그리드 입니다.");
+		}
+
+		e.preventDefault();
+
+		const question = e.target.value.trim();
+		if (!question) return;
+
+		if (this.#ing) return;
+		this.#ing = true;
+
+		/**
+		 * setTimeout 없으면, 맥에서 한글 잔상이 남음
+		 * setTimeout 내에서 e.target이 nx-ai-container가 된다.
+		 */
+		setTimeout(() => {
+			this.shadowRoot.querySelector("textarea").value = "";
+		});
+
+		const elAiChat = this.shadowRoot.querySelector("nx-ai-chat");
+
+		elAiChat.add("me", question);
+		elAiChat.add("ing", question);
+
+		try {
+			this.#createModel();
+
+			if (this.shadowRoot.querySelector(".menu-filter").classList.contains("active")) {
+				await this.#q1();
+			}
+			else if (this.shadowRoot.querySelector(".menu-general").classList.contains("active")) {
+				await this.#q2();
+			}
+			else {
+				await this.#q2();
+			}
+		} catch (error) {
+			console.error(error);
+			elAiChat.add("ai", error);
+		}
+		
+
+		this.#ing = false;
+	}
+
+	#toggleCollapseHandler = () => {
+        this.classList.toggle("collapse");
+    };
+
+    #menuClickHandler = (e) => {
+        
+        // 모든 `.menu-icon`에서 `active` 클래스 제거
+        this.shadowRoot.querySelectorAll(".menu-icon").forEach(el => el.classList.remove("active"));
+
+        // 클릭한 `.menu-icon`에 `active` 클래스 추가
+        const clickedIcon = e.target.closest(".menu-icon");
+        if (clickedIcon) clickedIcon.classList.add("active");
+
+        // `.menu-setting`이 클릭되었는지 확인 후 `nx-ai-settings` 토글
+        this.settings.classList.toggle("expand", !!e.target.closest(".menu-setting"));
+    };
+}
+
+
+if (!customElements.get('nx-ai-container')) {
+	customElements.define("nx-ai-container", aiContainer);
+}