1. 랭체인 이미지 인식 후 처리 마무리

2. fastAPI로 프로젝트 구조 실습

1. 랭체인 이미지 인식 후 처리 마무리
2. fastAPI로 프로젝트 구조 실습

project/rag_app/backend/static/js/index.js

@@ -0,0 +1,44 @@
+document.querySelector("button").addEventListener("click", ask)
+
+async function ask() {
+    // 사용자가 질문 입력 시 질문을 서버로 전송
+    const question = document.querySelector('#question').value
+
+    const response = await fetch("/api/question", {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json"
+        },
+        body: JSON.stringify({question : question})
+    })
+    // 전송 후 answer 도착 시 answer 화면에 보여주기
+    const answer = await response.json()
+    document.querySelector('#answer').textContent = answer.message
+}
+
+// 파일 업로드
+document.querySelector("#uploadBtn").addEventListener("click", uploadFile)
+async function uploadFile()
+{
+    const fileInput = document.querySelector("#file");
+    // 첨부파일 정보 가져오기
+    const file = fileInput.files[0];
+
+    if(!file)
+    {
+        alert("파일을 선택해주세요.");
+        return;
+    }
+
+    // form 만들어 전송
+    const formData = new FormData()
+    formData.append("file", file)
+
+    const response = await fetch("/api/reg/question", {
+        method: "POST",
+        body: formData
+    })
+    // 전송 후 answer 도착 시 answer 화면에 보여주기
+    const answer = await response.json()
+    document.querySelector('#answer').textContent = answer.message
+}