Upload bersih ke Hugging Face

.gitignore

@@ -0,0 +1,12 @@
+venv/
+node_modules/
+__pycache__/
+*.env
+.env.local
+.next/
+*.gguf
+*.bin
+models/
+*.sqlite3
+db.sqlite3
+ai-backend/db.sqlite3

Dockerfile

@@ -0,0 +1,26 @@
+FROM python:3.13-slim
+
+# Aturan wajib Hugging Face: Buat user dengan ID 1000
+RUN useradd -m -u 1000 user
+
+# Install compiler C++ untuk menjalankan llama.cpp
+RUN apt-get update && apt-get install -y build-essential gcc g++
+
+# Gunakan user yang baru dibuat
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+# Copy requirements dan install library Python
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+# Copy seluruh file project dari laptop Anda ke server HF
+COPY --chown=user . /app
+
+# Buka pintu komunikasi wajib Hugging Face
+EXPOSE 7860
+
+# Jalankan mesin Django di port 7860
+CMD ["python", "manage.py", "runserver", "0.0.0.0:7860"]

README.md

@@ -0,0 +1,23 @@
+# 🤖 Proyek AI_Kan (Local Qwen 3B Chatbot)
+
+Proyek ini adalah aplikasi *Full-Stack* AI Chatbot yang berjalan sepenuhnya secara lokal menggunakan GPU (GTX). Aplikasi ini memiliki fitur memori obrolan (history), sistem *login* menggunakan akun Google (NextAuth), dan panel admin untuk mengatur kepribadian AI secara spesifik untuk setiap pengguna.
+
+## 🏗️ Arsitektur Proyek
+* **Backend:** Django (Python) + `llama_cpp` (Pemroses AI) + SQLite
+* **Frontend:** Next.js (App Router) + Tailwind CSS + NextAuth.js
+* **Model AI:** Qwen 2.5 3B Instruct (Format GGUF)
+
+---
+
+## 🚀 Cara Menjalankan Proyek (Local Development)
+
+Karena proyek ini terpisah antara *Backend* dan *Frontend*, Anda harus membuka **dua terminal** secara bersamaan.
+
+### Tahap 1: Menyalakan Mesin AI (Backend Django)
+1. Buka terminal (PowerShell/CMD) dan arahkan ke folder utama proyek (`D:\Project\AI_Kan`).
+2. Aktifkan *Virtual Environment*:
+   .\venv\Scripts\activate
+   python manage.py runserver
+3. Menyalakan Antarmuka Web (Frontend Next.js):
+    cd ai-frontend
+    npm run dev

ai-backend/chat_app/admin.py

@@ -0,0 +1,6 @@
+from django.contrib import admin
+from .models import UserProfile, ChatSession, Message
+
+admin.site.register(UserProfile)
+admin.site.register(ChatSession)
+admin.site.register(Message)

ai-backend/chat_app/apps.py

@@ -0,0 +1,5 @@
+from django.apps import AppConfig
+
+
+class ChatAppConfig(AppConfig):
+    name = 'chat_app'

ai-backend/chat_app/migrations/0001_initial.py

@@ -0,0 +1,48 @@
+# Generated by Django 6.0.2 on 2026-02-23 15:42
+
+import django.db.models.deletion
+import uuid
+from django.conf import settings
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    initial = True
+
+    dependencies = [
+        migrations.swappable_dependency(settings.AUTH_USER_MODEL),
+    ]
+
+    operations = [
+        migrations.CreateModel(
+            name='ChatSession',
+            fields=[
+                ('id', models.UUIDField(default=uuid.uuid4, editable=False, primary_key=True, serialize=False)),
+                ('title', models.CharField(default='Percakapan Baru', max_length=255)),
+                ('created_at', models.DateTimeField(auto_now_add=True)),
+                ('user', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='chat_sessions', to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+        migrations.CreateModel(
+            name='Message',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('role', models.CharField(max_length=10)),
+                ('content', models.TextField()),
+                ('timestamp', models.DateTimeField(auto_now_add=True)),
+                ('session', models.ForeignKey(on_delete=django.db.models.deletion.CASCADE, related_name='messages', to='chat_app.chatsession')),
+            ],
+            options={
+                'ordering': ['timestamp'],
+            },
+        ),
+        migrations.CreateModel(
+            name='UserProfile',
+            fields=[
+                ('id', models.BigAutoField(auto_created=True, primary_key=True, serialize=False, verbose_name='ID')),
+                ('system_prompt', models.TextField(default='Kamu adalah asisten AI berbahasa Indonesia yang cerdas, ramah, dan sopan.')),
+                ('user', models.OneToOneField(on_delete=django.db.models.deletion.CASCADE, to=settings.AUTH_USER_MODEL)),
+            ],
+        ),
+    ]

ai-backend/chat_app/models.py

@@ -0,0 +1,32 @@
+import uuid
+from django.db import models
+from django.contrib.auth.models import User
+
+# 1. Tabel Profil untuk mengatur Kepribadian AI per User
+class UserProfile(models.Model):
+    user = models.OneToOneField(User, on_delete=models.CASCADE)
+    # Default sifat AI, bisa diedit oleh Admin di panel Django
+    system_prompt = models.TextField(default="Kamu adalah asisten AI berbahasa Indonesia yang cerdas, ramah, dan sopan.")
+
+    def __str__(self):
+        return f"Pengaturan AI untuk: {self.user.username}"
+
+# 2. Tabel Sesi Obrolan (Riwayat per User)
+class ChatSession(models.Model):
+    id = models.UUIDField(primary_key=True, default=uuid.uuid4, editable=False)
+    user = models.ForeignKey(User, on_delete=models.CASCADE, related_name='chat_sessions')
+    title = models.CharField(max_length=255, default="Percakapan Baru")
+    created_at = models.DateTimeField(auto_now_add=True)
+
+    def __str__(self):
+        return f"{self.user.username} - {self.title}"
+
+# 3. Tabel Pesan Obrolan
+class Message(models.Model):
+    session = models.ForeignKey(ChatSession, on_delete=models.CASCADE, related_name='messages')
+    role = models.CharField(max_length=10)  # 'user' atau 'assistant'
+    content = models.TextField()
+    timestamp = models.DateTimeField(auto_now_add=True)
+
+    class Meta:
+        ordering = ['timestamp'] # Urutkan dari yang terlama ke terbaru

ai-backend/chat_app/tests.py

@@ -0,0 +1,3 @@
+from django.test import TestCase
+
+# Create your tests here.

ai-backend/chat_app/views.py

@@ -0,0 +1,110 @@
+from django.http import JsonResponse
+from django.views.decorators.csrf import csrf_exempt
+from django.contrib.auth.models import User
+from .models import ChatSession, Message, UserProfile
+from llama_cpp import Llama
+import json
+import os
+
+BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
+MODEL_PATH = os.path.join(BASE_DIR, 'chat_app', 'models', 'qwen2.5-3b-instruct-q5_k_m.gguf')
+
+print("Sedang memuat model AI ke dalam memori... Mohon tunggu.")
+try:
+    llm = Llama(
+        model_path=MODEL_PATH,
+        n_ctx=2048,      # Diperbesar untuk menampung riwayat chat
+        n_gpu_layers=-1 
+    )
+    print("Model AI berhasil dimuat!")
+except Exception as e:
+    print(f"Gagal memuat model: {e}")
+
+@csrf_exempt 
+def api_chat(request):
+    if request.method == 'POST':
+        try:
+            data = json.loads(request.body)
+            user_message = data.get('message', '')
+            session_id = data.get('session_id')
+            user_email = data.get('email') # Dari login Google di React
+
+            if not user_message or not user_email:
+                return JsonResponse({'error': 'Pesan dan Email wajib ada'}, status=400)
+
+            # 1. Cari atau Buat User & Profilnya (Berdasarkan email Gmail)
+            user, _ = User.objects.get_or_create(username=user_email, email=user_email)
+            user_profile, _ = UserProfile.objects.get_or_create(user=user)
+
+            # 2. Cari atau Buat Sesi Chat (Isolasi antar user)
+            if session_id:
+                session = ChatSession.objects.get(id=session_id, user=user)
+            else:
+                session = ChatSession.objects.create(user=user, title=user_message[:30])
+
+            # 3. Simpan pesan User
+            Message.objects.create(session=session, role='user', content=user_message)
+
+            # 4. Ambil 4 riwayat pesan terakhir (Agar VRAM tidak kepenuhan)
+            past_messages = session.messages.all().order_by('-timestamp')[:4]
+            past_messages = reversed(past_messages) 
+
+            # 5. Susun Prompt dengan KEPRIBADIAN DARI ADMIN + RIWAYAT CHAT
+            prompt = f"<|im_start|>system\n{user_profile.system_prompt}<|im_end|>\n"
+            for msg in past_messages:
+                prompt += f"<|im_start|>{msg.role}\n{msg.content}<|im_end|>\n"
+            prompt += "<|im_start|>assistant\n"
+
+            # 6. Proses ke Model Qwen
+            output = llm(
+                prompt, max_tokens=256, stop=["<|im_end|>"], echo=False
+            )
+            ai_response = output['choices'][0]['text'].strip()
+
+            # 7. Simpan balasan AI
+            Message.objects.create(session=session, role='assistant', content=ai_response)
+
+            return JsonResponse({
+                'status': 'success',
+                'session_id': str(session.id),
+                'response': ai_response
+            })
+
+        except Exception as e:
+            return JsonResponse({'error': str(e)}, status=500)
+            
+    return JsonResponse({'error': 'Hanya menerima POST'}, status=405)
+
+# Tambahkan di paling bawah views.py
+@csrf_exempt
+def get_history(request):
+    """Mengambil daftar judul riwayat chat milik user"""
+    if request.method == 'GET':
+        email = request.GET.get('email')
+        if not email:
+            return JsonResponse({'error': 'Email wajib ada'}, status=400)
+        
+        try:
+            user = User.objects.get(email=email)
+            # Ambil semua sesi urut dari yang paling baru
+            sessions = ChatSession.objects.filter(user=user).order_by('-created_at')
+            data = [{'id': str(s.id), 'title': s.title} for s in sessions]
+            return JsonResponse({'status': 'success', 'data': data})
+        except User.DoesNotExist:
+            return JsonResponse({'status': 'success', 'data': []})
+            
+    return JsonResponse({'error': 'Hanya menerima GET'}, status=405)
+
+@csrf_exempt
+def get_session_messages(request, session_id):
+    """Mengambil isi pesan saat riwayat di-klik"""
+    if request.method == 'GET':
+        try:
+            session = ChatSession.objects.get(id=session_id)
+            messages = session.messages.all().order_by('timestamp')
+            data = [{'role': m.role, 'content': m.content} for m in messages]
+            return JsonResponse({'status': 'success', 'data': {'messages': data}})
+        except ChatSession.DoesNotExist:
+            return JsonResponse({'error': 'Sesi tidak ditemukan'}, status=404)
+            
+    return JsonResponse({'error': 'Hanya menerima GET'}, status=405)

ai-backend/core/asgi.py

@@ -0,0 +1,16 @@
+"""
+ASGI config for core project.
+
+It exposes the ASGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/6.0/howto/deployment/asgi/
+"""
+
+import os
+
+from django.core.asgi import get_asgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
+
+application = get_asgi_application()

ai-backend/core/settings.py

@@ -0,0 +1,124 @@
+"""
+Django settings for core project.
+
+Generated by 'django-admin startproject' using Django 6.0.2.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/6.0/topics/settings/
+
+For the full list of settings and their values, see
+https://docs.djangoproject.com/en/6.0/ref/settings/
+"""
+
+from pathlib import Path
+
+# Build paths inside the project like this: BASE_DIR / 'subdir'.
+BASE_DIR = Path(__file__).resolve().parent.parent
+
+
+# Quick-start development settings - unsuitable for production
+# See https://docs.djangoproject.com/en/6.0/howto/deployment/checklist/
+
+# SECURITY WARNING: keep the secret key used in production secret!
+SECRET_KEY = 'django-insecure--_an^du4%(4rng$^18e-u)fu-x@&kepr3t7*qx615l@*bg1*hn'
+
+# SECURITY WARNING: don't run with debug turned on in production!
+DEBUG = True
+
+ALLOWED_HOSTS = []
+
+
+# Application definition
+
+INSTALLED_APPS = [
+    'django.contrib.admin',
+    'django.contrib.auth',
+    'django.contrib.contenttypes',
+    'django.contrib.sessions',
+    'django.contrib.messages',
+    'django.contrib.staticfiles',
+    'corsheaders',
+    'chat_app',
+]
+
+MIDDLEWARE = [
+    'corsheaders.middleware.CorsMiddleware',
+    'django.middleware.security.SecurityMiddleware',
+    'django.contrib.sessions.middleware.SessionMiddleware',
+    'django.middleware.common.CommonMiddleware',
+    'django.middleware.csrf.CsrfViewMiddleware',
+    'django.contrib.auth.middleware.AuthenticationMiddleware',
+    'django.contrib.messages.middleware.MessageMiddleware',
+    'django.middleware.clickjacking.XFrameOptionsMiddleware',
+]
+
+ROOT_URLCONF = 'core.urls'
+
+TEMPLATES = [
+    {
+        'BACKEND': 'django.template.backends.django.DjangoTemplates',
+        'DIRS': [],
+        'APP_DIRS': True,
+        'OPTIONS': {
+            'context_processors': [
+                'django.template.context_processors.request',
+                'django.contrib.auth.context_processors.auth',
+                'django.contrib.messages.context_processors.messages',
+            ],
+        },
+    },
+]
+
+WSGI_APPLICATION = 'core.wsgi.application'
+
+
+# Database
+# https://docs.djangoproject.com/en/6.0/ref/settings/#databases
+
+DATABASES = {
+    'default': {
+        'ENGINE': 'django.db.backends.sqlite3',
+        'NAME': BASE_DIR / 'db.sqlite3',
+    }
+}
+
+
+# Password validation
+# https://docs.djangoproject.com/en/6.0/ref/settings/#auth-password-validators
+
+AUTH_PASSWORD_VALIDATORS = [
+    {
+        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
+    },
+    {
+        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
+    },
+]
+
+
+# Internationalization
+# https://docs.djangoproject.com/en/6.0/topics/i18n/
+
+LANGUAGE_CODE = 'en-us'
+
+TIME_ZONE = 'UTC'
+
+USE_I18N = True
+
+USE_TZ = True
+
+
+# Static files (CSS, JavaScript, Images)
+# https://docs.djangoproject.com/en/6.0/howto/static-files/
+
+STATIC_URL = 'static/'
+
+CORS_ALLOW_ALL_ORIGINS = True
+
+APPEND_SLASH = False

ai-backend/core/urls.py

@@ -0,0 +1,10 @@
+from django.contrib import admin
+from django.urls import path
+from chat_app.views import api_chat, get_history, get_session_messages
+
+urlpatterns = [
+    path('admin/', admin.site.urls),
+    path('api/chat', api_chat, name='api_chat'),
+    path('api/history', get_history, name='get_history'),
+    path('api/history/<uuid:session_id>', get_session_messages, name='get_session_messages'),
+]

ai-backend/core/wsgi.py

@@ -0,0 +1,16 @@
+"""
+WSGI config for core project.
+
+It exposes the WSGI callable as a module-level variable named ``application``.
+
+For more information on this file, see
+https://docs.djangoproject.com/en/6.0/howto/deployment/wsgi/
+"""
+
+import os
+
+from django.core.wsgi import get_wsgi_application
+
+os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
+
+application = get_wsgi_application()

ai-backend/manage.py

@@ -0,0 +1,22 @@
+#!/usr/bin/env python
+"""Django's command-line utility for administrative tasks."""
+import os
+import sys
+
+
+def main():
+    """Run administrative tasks."""
+    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'core.settings')
+    try:
+        from django.core.management import execute_from_command_line
+    except ImportError as exc:
+        raise ImportError(
+            "Couldn't import Django. Are you sure it's installed and "
+            "available on your PYTHONPATH environment variable? Did you "
+            "forget to activate a virtual environment?"
+        ) from exc
+    execute_from_command_line(sys.argv)
+
+
+if __name__ == '__main__':
+    main()

ai-frontend/.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+.env.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

ai-frontend/README.md

@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

ai-frontend/app/api/auth/[...nextauth]/route.js

@@ -0,0 +1,15 @@
+// File: app/api/auth/[...nextauth]/route.js
+import NextAuth from "next-auth";
+import GoogleProvider from "next-auth/providers/google";
+
+const handler = NextAuth({
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
+    }),
+  ],
+  secret: process.env.NEXTAUTH_SECRET,
+});
+
+export { handler as GET, handler as POST };

ai-frontend/app/globals.css

@@ -0,0 +1,26 @@
+@import "tailwindcss";
+
+:root {
+  --background: #ffffff;
+  --foreground: #171717;
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: #0a0a0a;
+    --foreground: #ededed;
+  }
+}
+
+body {
+  background: var(--background);
+  color: var(--foreground);
+  font-family: Arial, Helvetica, sans-serif;
+}

ai-frontend/app/layout.tsx

@@ -0,0 +1,15 @@
+// File: app/layout.js
+import "./globals.css";
+import SessionWrapper from "../components/SessionWrapper";
+
+export const metadata = { title: "Kans AI" };
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="id">
+      <body className="bg-[#131314] text-white">
+        <SessionWrapper>{children}</SessionWrapper>
+      </body>
+    </html>
+  );
+}

ai-frontend/app/page.tsx

@@ -0,0 +1,253 @@
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import { useSession, signIn, signOut } from "next-auth/react";
+import { Plus, Menu, MessageSquare, X } from "lucide-react"; // Tambahkan icon X
+
+export default function Home() {
+  const { data: session } = useSession();
+  const [messages, setMessages] = useState([]);
+  const [input, setInput] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [sessionId, setSessionId] = useState(null);
+  
+  const [chatHistory, setChatHistory] = useState([]);
+  
+  // State baru KHUSUS untuk mengatur menu sidebar di Mobile
+  const [isSidebarOpen, setIsSidebarOpen] = useState(false);
+
+  const messagesEndRef = useRef(null);
+  const scrollToBottom = () => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  };
+  useEffect(() => { scrollToBottom(); }, [messages]);
+
+  useEffect(() => {
+    if (session?.user?.email) {
+      fetchHistory();
+    }
+  }, [session]);
+
+  const fetchHistory = async () => {
+    try {
+      const response = await fetch(`/api/django/history?email=${session.user.email}`);
+      const data = await response.json();
+      if (data.status === "success") {
+        setChatHistory(data.data);
+      }
+    } catch (error) {
+      console.error("Gagal mengambil riwayat", error);
+    }
+  };
+
+  // Fungsi saat user mengklik salah satu riwayat di sidebar
+  const loadSession = async (id) => {
+    try {
+      const response = await fetch(`/api/django/history/${id}`);
+      const data = await response.json();
+      if (data.status === "success") {
+        setSessionId(id);
+        setMessages(data.data.messages);
+      }
+    } catch (error) {
+      console.error("Gagal memuat sesi", error);
+    }
+  };
+
+  const sendMessage = async (e) => {
+    e.preventDefault();
+    if (!input.trim() || !session) return;
+
+    const userMsg = input.trim();
+    setMessages((prev) => [...prev, { role: "user", content: userMsg }]);
+    setInput("");
+    setIsLoading(true);
+
+    try {
+      const response = await fetch("/api/django/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          message: userMsg,
+          email: session.user.email,
+          session_id: sessionId,
+        }),
+      });
+
+      const data = await response.json();
+      if (data.status === "success") {
+        // Jika ini adalah chat pertama (sebelumnya tidak ada sessionId), refresh riwayat di sidebar
+        if (!sessionId) {
+          fetchHistory(); 
+        }
+        setSessionId(data.session_id);
+        setMessages((prev) => [...prev, { role: "assistant", content: data.response }]);
+      } else {
+        console.error("Error dari Django:", data.error);
+      }
+    } catch (error) {
+      console.error("Gagal terhubung ke server Django", error);
+      setMessages((prev) => [...prev, { role: "assistant", content: "Maaf, gagal terhubung ke server lokal." }]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const startNewChat = () => {
+    setMessages([]);
+    setSessionId(null);
+    setIsSidebarOpen(false); // Tutup sidebar di HP saat buat chat baru
+  };
+
+  const isChatEmpty = messages.length === 0;
+
+  return (
+    <div className="flex h-screen font-sans bg-[#131314] overflow-hidden">
+      
+      {/* Overlay Hitam Transparan untuk Mobile saat Sidebar terbuka */}
+      {isSidebarOpen && (
+        <div 
+          className="fixed inset-0 bg-black/60 z-40 md:hidden transition-opacity"
+          onClick={() => setIsSidebarOpen(false)}
+        />
+      )}
+
+      {/* Sidebar - Diubah agar responsif (Slide di HP, Tetap di Laptop) */}
+      {session && (
+        <aside 
+          className={`fixed md:relative z-50 inset-y-0 left-0 w-64 bg-[#1e1f20] p-4 flex flex-col border-r border-gray-800 transition-transform duration-300 ease-in-out md:translate-x-0 ${
+            isSidebarOpen ? "translate-x-0" : "-translate-x-full"
+          }`}
+        >
+          {/* Tombol Close Menu (Khusus Mobile) */}
+          <div className="flex justify-between items-center mb-6 md:hidden">
+            <span className="text-gray-300 font-medium">Menu Navigasi</span>
+            <button onClick={() => setIsSidebarOpen(false)} className="text-gray-400 hover:text-white">
+              <X size={24} />
+            </button>
+          </div>
+
+          <button
+            onClick={startNewChat}
+            className="flex items-center gap-3 bg-[#131314] hover:bg-gray-800 p-3 rounded-full transition w-full md:w-fit border border-gray-700"
+          >
+            <Plus size={20} className="text-gray-200" />
+            <span className="font-medium text-sm text-gray-200">Chat baru</span>
+          </button>
+          
+          {/* Tampilan Daftar Riwayat Percakapan */}
+          <div className="mt-8 flex-1 overflow-y-auto pr-1">
+            <p className="text-xs text-gray-500 font-semibold mb-3 px-2">Riwayat Percakapan</p>
+            <div className="flex flex-col gap-1">
+              {chatHistory.map((chat) => (
+                <button
+                  key={chat.id}
+                  onClick={() => loadSession(chat.id)}
+                  className={`flex items-center gap-3 text-left px-3 py-2.5 rounded-lg text-sm transition-colors w-full ${
+                    sessionId === chat.id 
+                    ? 'bg-[#2a2b2c] text-gray-200' 
+                    : 'text-gray-400 hover:bg-[#2a2b2c] hover:text-gray-200'
+                  }`}
+                >
+                  <MessageSquare size={16} className="min-w-fit" />
+                  <span className="truncate">{chat.title}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </aside>
+      )}
+
+      {/* Main Content Area */}
+      <main className="flex-1 flex flex-col relative w-full">
+        <header className="h-16 flex items-center justify-between px-4 md:px-6 pt-2">
+          <div className="flex items-center gap-3">
+            {/* Tombol Hamburger di HP untuk membuka Sidebar */}
+            <Menu 
+              className="md:hidden cursor-pointer text-gray-400 hover:text-white" 
+              onClick={() => setIsSidebarOpen(true)}
+            />
+            <h1 className="text-xl font-medium text-gray-300 tracking-wide">MyNameIsKans</h1>
+          </div>
+
+          {session ? (
+            <div className="flex items-center gap-2 md:gap-4 bg-[#1e1f20] py-1.5 px-2 md:px-3 rounded-full border border-gray-700">
+              <span className="text-sm text-gray-300 hidden md:block">{session.user.name}</span>
+              <img src={session.user.image} alt="Profile" className="w-7 h-7 rounded-full" />
+              <button onClick={() => signOut()} className="text-sm font-medium text-red-400 hover:text-red-300 ml-1 md:ml-2 pr-2">
+                Keluar
+              </button>
+            </div>
+          ) : (
+            <button
+              onClick={() => signIn("google")}
+              className="flex items-center gap-2 bg-white text-black px-4 md:px-5 py-2 rounded-full hover:bg-gray-200 transition font-medium shadow-md text-sm md:text-base"
+            >
+              <svg className="w-5 h-5" viewBox="0 0 24 24">
+                <path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4" />
+                <path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853" />
+                <path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05" />
+                <path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335" />
+              </svg>
+              Login
+            </button>
+          )}
+        </header>
+
+        {!session ? (
+          <div className="flex-1 flex items-center justify-center flex-col gap-4 p-4">
+            <h2 className="text-2xl md:text-3xl font-semibold text-gray-300 text-center">Akses Terkunci</h2>
+            <p className="text-gray-500 text-center max-w-md text-sm md:text-base">Silakan login menggunakan akun Google Anda untuk memulai percakapan dan menyimpan riwayat obrolan.</p>
+          </div>
+        ) : (
+          <div className={`flex-1 overflow-y-auto px-4 md:px-32 flex flex-col ${isChatEmpty ? "justify-center items-center" : "pt-4 pb-32"}`}>
+            
+            {isChatEmpty ? (
+              <div className="w-full max-w-3xl text-left mb-8 px-2 md:px-0">
+                {/* Ukuran teks dikecilkan untuk layar HP (text-3xl) dan besar di Laptop (md:text-5xl) */}
+                <h1 className="text-3xl md:text-5xl font-semibold mb-2">
+                  <span className="bg-gradient-to-r from-blue-400 to-purple-400 text-transparent bg-clip-text">
+                    Halo, {session.user.name.split(' ')[0]}
+                  </span>
+                </h1>
+                <h2 className="text-3xl md:text-5xl font-semibold text-[#444746] leading-tight">Ada yang bisa saya bantu hari ini?</h2>
+              </div>
+            ) : (
+              <div className="w-full max-w-3xl mx-auto flex flex-col gap-6">
+                {messages.map((msg, index) => (
+                  <div key={index} className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}>
+                    <div className={`p-3 md:p-4 rounded-2xl max-w-[90%] md:max-w-[85%] leading-relaxed text-sm md:text-base ${
+                      msg.role === "user" ? "bg-[#2a2b2c] text-gray-200 rounded-br-sm" : "bg-transparent text-gray-100"
+                    }`}>
+                      <div className="whitespace-pre-wrap">{msg.content}</div>
+                    </div>
+                  </div>
+                ))}
+                {isLoading && (
+                  <div className="flex justify-start text-gray-500 italic text-sm animate-pulse ml-4">
+                  Kans sedang mengetik...
+                  </div>
+                )}
+                <div ref={messagesEndRef} />
+              </div>
+            )}
+
+            <div className={`w-full max-w-3xl mx-auto px-4 md:px-0 transition-all duration-500 ease-in-out ${isChatEmpty ? "" : "absolute bottom-4 md:bottom-6 left-1/2 -translate-x-1/2"}`}>
+              <form onSubmit={sendMessage} className="relative bg-[#1e1f20] rounded-full flex items-center p-1.5 md:p-2 border border-gray-700 shadow-xl focus-within:bg-[#2a2b2c] transition-colors">
+                <input
+                  type="text"
+                  value={input}
+                  onChange={(e) => setInput(e.target.value)}
+                  placeholder="Ketik pesan..."
+                  className="w-full bg-transparent text-gray-200 outline-none px-4 md:px-6 py-2 md:py-3 placeholder-gray-500 text-sm md:text-base"
+                />
+                <button type="submit" disabled={isLoading} className="bg-blue-600 hover:bg-blue-500 text-white font-medium px-4 md:px-6 py-2 md:py-3 rounded-full transition disabled:opacity-50 disabled:bg-gray-700 text-sm md:text-base">
+                  Kirim
+                </button>
+              </form>
+            </div>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

ai-frontend/components/SessionWrapper.js

@@ -0,0 +1,7 @@
+// File: components/SessionWrapper.js
+"use client";
+import { SessionProvider } from "next-auth/react";
+
+export default function SessionWrapper({ children }) {
+  return <SessionProvider>{children}</SessionProvider>;
+}

ai-frontend/eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

ai-frontend/next.config.mjs

@@ -0,0 +1,13 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  async rewrites() {
+    return [
+      {
+        // Jika ada request ke /api/django/..., teruskan ke Django lokal Anda
+        source: '/api/django/:path*',
+        destination: 'http://127.0.0.1:8000/api/:path*',
+      },
+    ]
+  },
+}
+export default nextConfig;

ai-frontend/next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+};
+
+export default nextConfig;

ai-frontend/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "ai-frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "lucide-react": "^0.575.0",
+    "next": "16.1.6",
+    "next-auth": "^4.24.13",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.1.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

ai-frontend/postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

ai-frontend/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}

prepare_dataset.py

@@ -0,0 +1,93 @@
+import json
+import random
+import os
+
+def process_datasets():
+    all_formatted_data = []
+
+    print("Memulai proses membaca dan menyeragamkan format...")
+
+    # 1. File 1: broad-general-dataset.jsonl
+    file1 = "dataset/broad-general-dataset.jsonl"
+    if os.path.exists(file1):
+        with open(file1, 'r', encoding='utf-8') as f:
+            for line in f:
+                if not line.strip(): continue
+                data = json.loads(line)
+                messages = []
+                
+                # Masukkan system prompt jika ada (berguna untuk persona)
+                if "system" in data and data["system"].strip():
+                    messages.append({"role": "system", "content": data["system"]})
+                
+                # Masukkan instruction sebagai user, dan response sebagai assistant
+                if "instruction" in data and "response" in data:
+                    messages.append({"role": "user", "content": data["instruction"]})
+                    messages.append({"role": "assistant", "content": data["response"]})
+                    
+                    all_formatted_data.append({"messages": messages})
+        print(f" [+] Berhasil membaca {file1}")
+
+    # 2. File 2: casual-conversation-poo.json
+    file2 = "dataset/casual-conversation-poo.json"
+    if os.path.exists(file2):
+        with open(file2, 'r', encoding='utf-8') as f:
+            data_list = json.load(f) # Ini file .json biasa (list of objects)
+            for item in data_list:
+                if "prompt" in item and "chosen" in item:
+                    messages = [
+                        {"role": "user", "content": item["prompt"]},
+                        {"role": "assistant", "content": item["chosen"]}
+                    ]
+                    all_formatted_data.append({"messages": messages})
+        print(f" [+] Berhasil membaca {file2}")
+
+    # 3. File 3: dataset.jsonl (Dataset curhat)
+    file3 = "dataset/dataset.jsonl"
+    if os.path.exists(file3):
+        with open(file3, 'r', encoding='utf-8') as f:
+            for line in f:
+                if not line.strip(): continue
+                data = json.loads(line)
+                # Karena formatnya sudah {"messages": [...]}, kita tinggal ambil utuh
+                if "messages" in data:
+                    all_formatted_data.append(data)
+        print(f" [+] Berhasil membaca {file3}")
+
+    total_data = len(all_formatted_data)
+    if total_data == 0:
+        print("[-] Tidak ada data yang berhasil diproses. Cek kembali path/nama folder.")
+        return
+
+    print(f"\nTotal data terkumpul: {total_data} baris percakapan.")
+
+    # 4. MENGACAK DATA (Shuffling)
+    print("Mengacak data agar pelatihan seimbang...")
+    random.seed(42) # Seed agar acakannya konsisten jika dijalankan ulang
+    random.shuffle(all_formatted_data)
+
+    # 5. MEMBAGI DATA (Train/Test Split - 90% Train, 10% Test)
+    print("Membagi data menjadi Train dan Test set...")
+    split_idx = int(total_data * 0.9)
+    train_data = all_formatted_data[:split_idx]
+    test_data = all_formatted_data[split_idx:]
+
+    # 6. MENYIMPAN KE FILE BARU
+    train_file = "dataset/train.jsonl"
+    test_file = "dataset/test.jsonl"
+
+    with open(train_file, 'w', encoding='utf-8') as f:
+        for item in train_data:
+            f.write(json.dumps(item, ensure_ascii=False) + '\n')
+
+    with open(test_file, 'w', encoding='utf-8') as f:
+        for item in test_data:
+            f.write(json.dumps(item, ensure_ascii=False) + '\n')
+
+    print("\n✅ PROSES SELESAI!")
+    print(f" - Data Pelatihan (Train): {len(train_data)} baris -> {train_file}")
+    print(f" - Data Evaluasi  (Test):  {len(test_data)} baris -> {test_file}")
+    print("Dataset sudah 100% siap digunakan untuk Fine-Tuning LLM.")
+
+# Jalankan script
+process_datasets()

requirements.txt

@@ -0,0 +1,3 @@
+django
+django-cors-headers
+llama-cpp-python

test_api.py

@@ -0,0 +1,36 @@
+import requests
+import time
+
+# Alamat API Django Anda
+url = 'http://127.0.0.1:8000/api/chat/'
+
+# Pesan yang akan dikirim ke bot (Saya buatkan pertanyaan seputar IoT)
+payload = {
+    "message": "saya punya teman bernama rosyy, coba berikan dia pencerahan agar tidak begadang terus, menjaga pola makan, menjaga kesehatan."
+}
+
+print("Sedang mengirim pesan ke server Django...\n")
+start_time = time.time()
+
+try:
+    # Menembak API dengan method POST
+    response = requests.post(url, json=payload)
+    
+    # Menghitung waktu respons
+    end_time = time.time()
+    durasi = round(end_time - start_time, 2)
+
+    # Mengecek apakah server membalas dengan status sukses (200)
+    if response.status_code == 200:
+        data = response.json()
+        print(f"⏱Waktu respons: {durasi} detik\n")
+        print("Jawaban Bot Qwen:")
+        print("-" * 50)
+        print(data['response'])
+        print("-" * 50)
+    else:
+        print(f"❌ Server membalas dengan Error {response.status_code}:")
+        print(response.text)
+
+except Exception as e:
+    print(f"❌ Gagal terhubung ke server: {e}")

train_local.py

@@ -0,0 +1,82 @@
+# train_local.py
+import torch
+from datasets import load_dataset
+from unsloth import FastLanguageModel
+from unsloth.chat_templates import get_chat_template
+from trl import SFTTrainer
+from transformers import TrainingArguments
+
+# 1. KONFIGURASI MEMORI SANGAT KETAT
+max_seq_length = 512 # Panjang maksimal kalimat dipangkas drastis agar tidak OOM
+dtype = None 
+load_in_4bit = True  # Wajib True untuk hemat VRAM
+
+print("Memuat model Qwen-2.5-1.5B...")
+# Menggunakan Qwen 1.5B yang sangat ringan tapi pintar
+model, tokenizer = FastLanguageModel.from_pretrained(
+    model_name = "unsloth/Qwen2.5-1.5B-Instruct-bnb-4bit",
+    max_seq_length = max_seq_length,
+    dtype = dtype,
+    load_in_4bit = load_in_4bit,
+)
+
+# Menyiapkan LoRA (Melatih hanya sebagian kecil otak AI)
+model = FastLanguageModel.get_peft_model(
+    model,
+    r = 8, # Diperkecil dari 16 ke 8 agar VRAM lebih hemat
+    target_modules = ["q_proj", "k_proj", "v_proj", "o_proj",
+                      "gate_proj", "up_proj", "down_proj",],
+    lora_alpha = 8,
+    lora_dropout = 0,
+    bias = "none",
+    use_gradient_checkpointing = "unsloth",
+    random_state = 3407,
+)
+
+# 2. PERSIAPAN DATASET
+print("Membaca dataset train.jsonl...")
+tokenizer = get_chat_template(tokenizer, chat_template = "chatml")
+
+def formatting_prompts_func(examples):
+    convos = examples["messages"]
+    texts = [tokenizer.apply_chat_template(convo, tokenize = False, add_generation_prompt = False) for convo in convos]
+    return { "text" : texts, }
+
+dataset = load_dataset("json", data_files="dataset/train.jsonl", split="train")
+dataset = dataset.map(formatting_prompts_func, batched = True)
+
+# 3. PROSES PELATIHAN (TRAINING)
+print("Memulai pelatihan...")
+trainer = SFTTrainer(
+    model = model,
+    tokenizer = tokenizer,
+    train_dataset = dataset,
+    dataset_text_field = "text",
+    max_seq_length = max_seq_length,
+    dataset_num_proc = 2,
+    packing = False,
+    args = TrainingArguments(
+        per_device_train_batch_size = 1, # HARGA MATI 1 untuk lokal
+        gradient_accumulation_steps = 4, 
+        warmup_steps = 5,
+        max_steps = 60, # Uji coba awal 60 langkah dulu
+        learning_rate = 2e-4,
+        fp16 = not torch.cuda.is_bf16_supported(),
+        bf16 = torch.cuda.is_bf16_supported(),
+        logging_steps = 10,
+        optim = "adamw_8bit", # Optimizer khusus hemat memori
+        weight_decay = 0.01,
+        lr_scheduler_type = "linear",
+        seed = 3407,
+        output_dir = "outputs",
+        report_to="none", # Mematikan notifikasi wandb secara otomatis
+    ),
+)
+
+trainer_stats = trainer.train()
+
+# 4. SIMPAN MODEL
+print("Pelatihan selesai! Menyimpan model...")
+model.save_pretrained("model_curhat_lokal") # Simpan hasil LoRA
+tokenizer.save_pretrained("model_curhat_lokal")
+print("Semua proses berhasil!")

translate_dataset.py

@@ -0,0 +1,89 @@
+import json
+import os
+import time
+from deep_translator import GoogleTranslator
+
+# Inisialisasi translator (Inggris ke Indonesia)
+translator = GoogleTranslator(source='en', target='id')
+
+def translate_text(text):
+    """Fungsi untuk menerjemahkan teks."""
+    try:
+        # Jika teks terlalu pendek atau kosong, lewati saja
+        if not text or len(text.strip()) < 2:
+            return text
+        
+        # Translate dan beri jeda agar tidak diblokir (Rate Limit)
+        translated = translator.translate(text)
+        time.sleep(0.5) 
+        return translated
+    except Exception as e:
+        print(f"Error saat menerjemahkan: {e}")
+        return text
+
+def translate_recursive(data):
+    """Fungsi rekursif untuk mencari dan menerjemahkan semua string."""
+    if isinstance(data, dict):
+        return {key: translate_recursive(value) for key, value in data.items()}
+    elif isinstance(data, list):
+        return [translate_recursive(item) for item in data]
+    elif isinstance(data, str):
+        return translate_text(data)
+    else:
+        return data
+
+def process_and_merge(filepaths, output_filepath):
+    """Membaca banyak file, menerjemahkan, dan menyatukannya ke satu file."""
+    print(f"Memulai proses... Hasil akhir akan disimpan di: {output_filepath}")
+    
+    # Buka file output utama dengan mode 'w' (write)
+    with open(output_filepath, 'w', encoding='utf-8') as outfile:
+        
+        for filepath in filepaths:
+            if not os.path.exists(filepath):
+                print(f"\n[!] File tidak ditemukan, melewati: {filepath}")
+                continue
+                
+            print(f"\n[+] Memproses file: {filepath}")
+            ext = os.path.splitext(filepath)[1]
+            
+            with open(filepath, 'r', encoding='utf-8') as infile:
+                if ext == '.jsonl':
+                    # Proses file .jsonl baris demi baris
+                    for line_num, line in enumerate(infile, 1):
+                        if not line.strip(): continue # Lewati baris kosong jika ada
+                        data = json.loads(line)
+                        translated_data = translate_recursive(data)
+                        
+                        # Tulis langsung ke file master
+                        outfile.write(json.dumps(translated_data, ensure_ascii=False) + '\n')
+                        print(f"  -> Baris {line_num} selesai diterjemahkan & digabung")
+                        
+                elif ext == '.json':
+                    # Proses file .json (biasanya berupa list of objects)
+                    data_list = json.load(infile)
+                    if isinstance(data_list, list):
+                        for i, data in enumerate(data_list, 1):
+                            translated_data = translate_recursive(data)
+                            
+                            # Tulis langsung ke file master dalam format jsonl
+                            outfile.write(json.dumps(translated_data, ensure_ascii=False) + '\n')
+                            print(f"  -> Item {i} selesai diterjemahkan & digabung")
+                    else:
+                        print(f"Format .json pada {filepath} tidak didukung. Harus berupa list.")
+
+    print(f"\n✅ PROSES SELESAI! Semua dataset berhasil diterjemahkan dan digabung menjadi {output_filepath}")
+
+
+# 1. Daftar file sumber Anda yang ada di dalam folder 'dataset'
+files_to_translate = [
+    "dataset/broad-general-dataset.jsonl",
+    "dataset/casual-conversation-poo.json",
+    "dataset/dataset.jsonl"
+]
+
+# 2. Nama file gabungan hasil terjemahan
+output_file = "dataset/master_dataset_id.jsonl"
+
+# 3. Eksekusi program
+process_and_merge(files_to_translate, output_file)