🔮 FateMatch AI — Penganalisis Kompatibilitas Servant

Aplikasi pencocokan kepribadian berbasis AI yang menentukan Servant Fate/Grand Order mana yang paling cocok dengan kepribadian pengguna. Dibangun menggunakan React (Frontend) dan Flask (Backend) — dengan bumbu roasting AI ekstra 😎

👨‍💻 Identitas Pembuat

🧠 Ringkasan

FateMatch AI adalah sistem pakar sederhana yang menganalisis kepribadian pengguna dan mencocokkannya dengan Servant yang paling kompatibel dari semesta Fate/Grand Order. Selain analisis kompatibilitas, sistem juga menghasilkan penjelasan logis dan kalimat roasting lucu dari AI untuk membuat pengalaman pengguna lebih menarik.

Pengguna hanya perlu memberikan:

1. Nama Master / nama panggilan
2. Deskripsi singkat kepribadian
3. (Opsional) Umpan balik apakah hasilnya akurat

⚙️ Teknologi yang Digunakan

Backend

• Python 3.x
• Flask
• Flask-CORS
• OpenAI API (untuk penalaran + roasting)

Frontend

• React + Vite
• Tailwind CSS
• Axios
• Framer Motion (animasi UI)

🚀 Cara Menjalankan Proyek

1️⃣ Jalankan Backend (Flask)

cd backend
pip install flask flask-cors openai
python app.py

Backend akan berjalan di:

http://localhost:5000

2️⃣ Jalankan Frontend (React)

cd frontend
npm install
npm run dev

Frontend akan berjalan di:

http://localhost:5173

🧩 Struktur Proyek

FateMatch-AI/
├── backend/
│   ├── app.py
│   └── requirements.txt
│
├── frontend/
│   ├── src/
│   │   ├── App.jsx
│   │   ├── components/
│   │   │   ├── ResultCard.jsx
│   │   │   └── LoadingScreen.jsx
│   │   └── ...
│   └── package.json
│
└── README.md

🧠 Alur Kerja Sistem

1. Pengguna memberikan nama Master dan deskripsi kepribadian mereka.
2. Sistem menggunakan penalaran AI untuk menentukan Servant yang paling kompatibel.
3. AI menghasilkan penjelasan kompatibilitas + roasting humoris.
4. Hasil ditampilkan dalam Result Card dengan opsi:

• 👍 Cocok
• 👎 Tidak Cocok

🧾 Endpoint API

1️⃣ POST /analyze_match

Menganalisis kepribadian pengguna dan menentukan Servant yang cocok.

Request Body

{
  "master_name": "Fanthom",
  "personality": "Kesel dan marah, tapi tetap berjuang walau sendirian."
}

Response

{
  "servant": {
    "name": "Nezha",
    "className": "Lancer",
    "image": "https://fategrandorder.fandom.com/nezha.png"
  },
  "compatibility": {
    "reason": "Nezha cocok dengan Master karena keduanya sama-sama pantang menyerah.",
    "roast": "Nezha sering dianggap 'Lancer yang bunuh diri', kayaknya kalian dua sekawan."
  }
}

2️⃣ POST /feedback_match

Menyimpan umpan balik pengguna tentang apakah hasil pencocokan akurat.

Request Body

{
  "master_name": "Fanthom",
  "servant_name": "Jeanne d'Arc",
  "match": true
}

Response

{
  "status": "success",
  "message": "Feedback diterima dan disimpan ke feedback_data.json"
}

🧩 Fitur Tambahan

💬 Sistem Umpan Balik (Feedback)

• Pengguna dapat memberikan suara apakah hasil pencocokan akurat atau tidak.
• Umpan balik disimpan untuk peningkatan iterasi di masa mendatang.

🔗 Tombol Bagikan (Share)

• Hasil dapat dibagikan langsung ke media sosial (Twitter, WhatsApp, dll.).
• Diimplementasikan menggunakan Web Share API untuk kenyamanan.

⏳ Animasi Pemuatan (Loading)

• Saat AI memproses analisis, animasi pemuatan layar penuh akan ditampilkan.

🎴 Tampilan Hasil Terpusat

• Hasil akhir muncul dalam kartu terpusat untuk presentasi yang bersih dan estetis.

🧬 Logika Pencocokan AI

1. Teks kepribadian pengguna diproses dengan model AI untuk mendeteksi sifat kepribadian utama.
2. Sifat-sifat ini dipetakan terhadap database kepribadian Servant FGO.
3. Pencocokan kompatibilitas terdekat dipilih, beserta penalaran dan roasting.
4. Umpan balik pengguna membantu menyempurnakan akurasi pencocokan di masa mendatang.

📁 Contoh File Feedback (feedback_data.json)

[
  {
    "master_name": "Fanthom",
    "servant_name": "Jeanne d'Arc",
    "match": true
  },
  {
    "master_name": "Rin",
    "servant_name": "Gilgamesh",
    "match": false
  }
]