Syafrizal_Wd_Mahendra
/
TIFNGK_E41222719
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: integrate models endpoint fastAPI to analyzer form

This commit is contained in:
Mahen 2026-02-09 07:41:23 +07:00
parent 946ad0db71
commit 762de51baa
6 changed files with 201 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/dashboards/DashboardClient.tsx
View File

@ -16,11 +16,11 @@ import {
} from "@/src/app/dashboard/lib/data";
import { ModelInfoSkeleton } from "../skeletons/ModelInfoSkeleton";
import { ModelInfo } from "./ModelInfo";
import { SentimentAnalyzer } from "./SentimentAnalyzer";
import { BrandFilter } from "./BrandFilter";
import { ReviewTable } from "./ReviewTable";
import { SentimentChart, TrendChart, WordCloud } from "@/src/utils/dImports";
import { useDashboards } from "@/src/hooks/useDashboard";
import SentimentForm from "./SentimentAnalyzer";
export default function DashboardClient() {
const {
@ -136,7 +136,7 @@ export default function DashboardClient() {
</div>
<div className="mb-8">
<SentimentAnalyzer />
<SentimentForm />
</div>
<div className="space-y-6">

3
src/components/dashboards/ReviewTable.tsx
View File

@ -8,7 +8,6 @@ import {
} from "../../components/ui/table";
import { ReviewTableProps } from "@/src/types";
import getSentimentBadge from "./SentimentBadge";
import renderStars from "./RenderStars";
export function ReviewTable({ reviews }: ReviewTableProps) {
return (
@ -48,7 +47,7 @@ export function ReviewTable({ reviews }: ReviewTableProps) {
</p>
</TableCell>
<TableCell>{renderStars(review.rating)}</TableCell>
{/* <TableCell>{renderStars(review.rating)}</TableCell> */}
<TableCell>{getSentimentBadge(review.sentiment)}</TableCell>
<TableCell className="text-right">
<span className="font-medium">

101
src/components/dashboards/SentimentAnalyzer.tsx
View File

@ -1,10 +1,8 @@
import { Button } from "../../components/ui/button";
import { Textarea } from "../../components/ui/textarea";
import { Badge } from "../../components/ui/badge";
import { cn } from "@/lib/utils";
import { Loader2, Send, Sparkles } from "lucide-react";
"use client";
import { Send, Loader2, AlertCircle, Sparkles } from "lucide-react";
import { motion, AnimatePresence } from "framer-motion";
import { Input } from "../ui/input";
import { cn } from "@/lib/utils";
import {
Combobox,
ComboboxContent,
@ -14,25 +12,30 @@ import {
ComboboxList,
} from "../ui/combobox";
import { Item, ItemContent, ItemDescription, ItemTitle } from "../ui/item";
import { useSentiment } from "@/src/hooks/useSentiment";
import { Input } from "../ui/input";
import { Textarea } from "../ui/textarea";
import { Button } from "../ui/button";
import { Badge } from "../ui/badge";
import { getSentimentDisplay } from "@/src/utils/datas";
import { useSentimentForm } from "@/src/hooks/useSentimentForm";
export function SentimentAnalyzer() {
export default function SentimentForm() {
const {
selectedModel,
setSelectedModel,
text,
setText,
laptopName,
setLaptopName,
isAnalyzing,
analyzeText,
result,
getSentimentDisplay,
searchQuery,
setSearchQuery,
laptopName,
text,
isAnalyzing,
result,
filteredItems,
isFormValid,
} = useSentiment();
error,
analyzeText,
setSelectedModel,
setSearchQuery,
setLaptopName,
setText,
} = useSentimentForm();
return (
<div className="rounded-xl border bg-card p-6">
@ -40,17 +43,29 @@ export function SentimentAnalyzer() {
<Sparkles className="h-5 w-5 text-primary" />
<h3 className="text-lg font-semibold">Analisis Sentimen Real-time</h3>
</div>
<p className="mb-4 text-sm text-muted-foreground">
Masukkan ulasan produk laptop untuk menganalisis sentimennya menggunakan
model XGBoost
</p>
<form action="">
<form onSubmit={(e) => e.preventDefault()}>
<div className="space-y-4">
{error && (
<div className="p-3 text-sm text-red-600 bg-red-50 border border-red-200 rounded-md flex items-center gap-2">
<AlertCircle size={16} />
{error}
</div>
)}
<div className="flex gap-4">
<Combobox
value={selectedModel}
onValueChange={(val) => setSelectedModel(val)}
onValueChange={(value) => {
if (value !== null) {
setSelectedModel(value);
}
}}
itemToStringValue={(model) => model?.label ?? ""}
>
<ComboboxInput
@ -58,14 +73,12 @@ export function SentimentAnalyzer() {
className="focus:ring-primary/20 border-border w-1/2"
onChange={(e) => setSearchQuery(e.target.value)}
/>
<ComboboxContent className="bg-card border-border shadow-lg animate-in fade-in zoom-in-95 duration-200">
<ComboboxContent className="bg-card border-border shadow-lg animate-in fade-in zoom-in-95 duration-200 z-50">
{filteredItems.length === 0 && (
<ComboboxEmpty className="text-muted-foreground py-3 px-4 text-sm text-center">
Model "{searchQuery}" tidak ditemukan.
</ComboboxEmpty>
)}
<ComboboxList className="p-1">
{filteredItems.map((model) => (
<ComboboxItem
@ -78,8 +91,8 @@ export function SentimentAnalyzer() {
<ItemTitle className="whitespace-nowrap font-medium text-foreground">
{model.label}
</ItemTitle>
<ItemDescription className="text-muted-foreground/80">
{model.desc} ({model.code})
<ItemDescription className="text-muted-foreground/80 text-xs">
{model.desc}
</ItemDescription>
</ItemContent>
</Item>
@ -91,14 +104,14 @@ export function SentimentAnalyzer() {
<Input
className="w-1/2"
placeholder="Masukkan nama laptop"
placeholder="Masukkan nama laptop (misal: Asus ROG)"
value={laptopName}
onChange={(e) => setLaptopName(e.target.value)}
/>
</div>
<Textarea
placeholder="Contoh: Laptop ini sangat bagus..."
placeholder="Tulis ulasan laptop di sini... (Contoh: Baterainya awet tapi kipas berisik)"
value={text}
onChange={(e) => setText(e.target.value)}
rows={4}
@ -113,7 +126,7 @@ export function SentimentAnalyzer() {
{isAnalyzing ? (
<>
<Loader2 className="h-4 w-4 animate-spin" />
Menganalisis...
Sedang Menganalisis...
</>
) : (
<>
@ -139,23 +152,23 @@ export function SentimentAnalyzer() {
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
{(() => {
const Icon = getSentimentDisplay(result.sentiment).icon;
const {
icon: Icon,
bgClass,
textClass,
} = getSentimentDisplay(result.sentiment);
return (
<div
className={cn(
"flex h-12 w-12 items-center justify-center rounded-full",
getSentimentDisplay(result.sentiment).bgClass,
"flex h-12 w-12 items-center justify-center rounded-full bg-white/50",
textClass,
)}
>
<Icon
className={cn(
"h-6 w-6",
getSentimentDisplay(result.sentiment).textClass,
)}
/>
<Icon className="h-6 w-6" />
</div>
);
})()}
<div>
<p
className={cn(
@ -166,22 +179,24 @@ export function SentimentAnalyzer() {
{getSentimentDisplay(result.sentiment).label}
</p>
<p className="text-sm text-muted-foreground">
Confidence: {(result.confidence * 100).toFixed(1)}%
Tingkat Keyakinan (Confidence):{" "}
{(result.confidence * 100).toFixed(1)}%
</p>
</div>
</div>
</div>
{result.keywords.length > 0 && (
<div className="mt-4">
<p className="mb-2 text-sm font-medium text-muted-foreground">
{result.keywords && result.keywords.length > 0 && (
<div className="mt-4 pt-4 border-t border-black/5 dark:border-white/5">
<p className="mb-2 text-sm font-medium text-muted-foreground flex items-center gap-2">
Kata Kunci Terdeteksi:
</p>
<div className="flex flex-wrap gap-2">
{result.keywords.map((keyword, index) => (
<Badge
key={index}
className="text-xs bg-white text-black"
variant="secondary"
className="text-xs px-2 py-1 bg-white/80 dark:bg-black/20 hover:bg-white border-black/10"
>
{keyword}
</Badge>

16
src/components/dashboards/SentimentBadge.tsx
View File

@ -3,16 +3,16 @@ import { Badge } from "../ui/badge";
import { cn } from "@/lib/utils";
const getSentimentBadge = (sentiment: Review["sentiment"]) => {
const styles = {
positif: "sentiment-positive",
negatif: "sentiment-negative",
netral: "sentiment-neutral",
const styles: Record<Review["sentiment"], string> = {
positive: "sentiment-positive",
negative: "sentiment-negative",
neutral: "sentiment-neutral",
};
const labels = {
positif: "Positif",
negatif: "Negatif",
netral: "Netral",
const labels: Record<Review["sentiment"], string> = {
positive: "Positif",
negative: "Negatif",
neutral: "Netral",
};
return (

81
src/hooks/useSentimentForm.ts Normal file
View File

@ -0,0 +1,81 @@
"use client";
import { useState } from "react";
import { MODEL_OPTIONS } from "../utils/datas";
export const useSentimentForm = () => {
const [selectedModel, setSelectedModel] = useState(MODEL_OPTIONS[2]);
const [searchQuery, setSearchQuery] = useState("");
const [laptopName, setLaptopName] = useState("");
const [text, setText] = useState("");
const [isAnalyzing, setIsAnalyzing] = useState(false);
const [result, setResult] = useState<{
sentiment: string;
confidence: number;
keywords: string[];
} | null>(null);
const [error, setError] = useState<string | null>(null);
const filteredItems = MODEL_OPTIONS.filter((item) =>
item.label.toLowerCase().includes(searchQuery.toLowerCase()),
);
const isFormValid = selectedModel && laptopName.trim() && text.trim();
const analyzeText = async (e: any) => {
e.preventDefault();
if (!isFormValid) return;
setIsAnalyzing(true);
setError(null);
setResult(null);
try {
const response = await fetch("http://127.0.0.1:8000/predict", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
laptop_name: laptopName,
review_text: text,
model_type: selectedModel.code,
}),
});
if (!response.ok) {
throw new Error(`Error: ${response.statusText}`);
}
const data = await response.json();
setResult({
sentiment: data.sentiment,
confidence: data.confidenceScore,
keywords: data.keywords || [],
});
} catch (err) {
console.error("Failed to analyze:", err);
setError("Gagal menghubungi server. Pastikan API berjalan.");
} finally {
setIsAnalyzing(false);
}
};
return {
selectedModel,
searchQuery,
laptopName,
text,
isAnalyzing,
result,
filteredItems,
isFormValid,
error,
analyzeText,
setSelectedModel,
setSearchQuery,
setLaptopName,
setText,
};
};

51
src/utils/datas.ts Normal file
View File

@ -0,0 +1,51 @@
import { Frown, Meh, Smile } from "lucide-react";
export const MODEL_OPTIONS = [
{
label: "Model XGBoost (Baseline)",
code: "baseline",
desc: "Raw Data (Imbalanced)",
},
{
label: "Model XGBoost (Tuned)",
code: "tuned",
desc: "Hyperparameter Tuned",
},
{
label: "Model XGBoost (Optimized)",
code: "optimized",
desc: "Pipeline (SMOTE + Chi2)",
},
];
export const getSentimentDisplay = (sentiment: string) => {
switch (sentiment?.toLowerCase()) {
case "positive":
return {
label: "Positif",
icon: Smile,
bgClass:
"bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800",
textClass: "text-green-600 dark:text-green-400",
borderClass: "border-green-200",
};
case "negative":
return {
label: "Negatif",
icon: Frown,
bgClass:
"bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800",
textClass: "text-red-600 dark:text-red-400",
borderClass: "border-red-200",
};
default:
return {
label: "Netral",
icon: Meh,
bgClass:
"bg-gray-50 border-gray-200 dark:bg-gray-800 dark:border-gray-700",
textClass: "text-gray-600 dark:text-gray-400",
borderClass: "border-gray-200",
};
}
};