fastAPI 심화

- Chart.js
- pdf, csv 파일 업로드 후 데이터 정제하여 llm으로 처리 후 결과 도출
- sqlite로 데이터 저장
- ORM - SQLAlchemy

project/CREDIT_APP/backend/static/js/analysis.js

@@ -0,0 +1,17 @@
+document.querySelector("button").addEventListener("click", ask)
+
+async function ask() {
+    // 사용자가 질문 입력 시 질문을 서버로 전송
+    const question = document.querySelector('#question').value
+
+    const response = await fetch("/api/card/analysis", {
+        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
+}

project/CREDIT_APP/backend/static/js/card.js

@@ -0,0 +1,24 @@
+// 파일 업로드
+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/card/upload",{
+        method:"POST",
+        body:formData
+    })
+    // 전송 후 answer 도착 시 answer 화면에 보여주기
+    const answer = await response.json()
+    document.querySelector('#result').textContent = answer.message
+}

project/CREDIT_APP/backend/static/js/dashboard.js

@@ -0,0 +1,65 @@
+
+const drawCategoryChart = (data) => {
+    new Chart(document.querySelector("#categoryChart"), {
+        type: 'pie',
+        data: {
+            labels : data.map((x) => x.category),
+            datasets:[
+                {
+                    data:data.map((x)=>x.amount)
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                title: {
+                    display: true,
+                    text: '카테고리별 소비내역'
+                }
+            }
+        },
+    })
+}
+
+const drawMonthlyChart = (data) => {
+        new Chart(document.querySelector("#monthlyChart"), {
+        type: 'line',
+        data: {
+            labels : data.map((x) => x.month),
+            datasets:[
+                {
+                    label:"월별 소비",
+                    data:data.map((x)=>x.amount)
+                }
+            ]
+        },
+        options: {
+            responsive: true,
+            plugins: {
+                legend: {
+                    position: 'top',
+                },
+                title: {
+                    display: true,
+                    text: '월별 소비내역'
+                }
+            }
+        },
+    })
+}
+
+async function loadDashboard() {
+    const response = await fetch("/api/card/dashboard");
+
+    const data = await response.json();
+    console.log(data);
+
+    drawCategoryChart(data.category);
+    drawMonthlyChart(data.monthly)
+}
+
+window.onload = loadDashboard;