Llm_model.json
atau muat riwayat dari file backup sebelumnya.Meta Panel LLM Engine - README.md
Meta Panel LLM Engine adalah antarmuka web (UI) berbasis vanilla HTML/JS tanpa framework yang dirancang untuk berinteraksi dengan server llama.cpp lokal maupun API Publik seperti Pollinations AI untuk pembuatan gambar. Dibangun dengan fokus pada performa ringan, offline-first, dan manajemen data client-side (LocalStorage).
Fitur Utama
- Chat UI Streaming Realtime: Respons AI berjalan (streaming) karakter per karakter tanpa instant load, memberikan pengalaman natural seperti AI Pada Umumnya.
- Generate Gambar Publik: Integrasi endpoint Pollinations AI untuk menghasilkan gambar dari text-prompt dengan preview interaktif dan fitur download langsung.
- Manajemen Kepribadian AI: Ubah system prompt/instruksi AI kapan saja, simpan ke file JSON backup atau reset ke default.
- LocalStorage & File Backup: Seluruh riwayat chat disimpan otomatis di browser,
bisa di-export ke
Llm_model.jsondan di-import kembali. - Dark/White Mode: Tampilan responsif dan mendukung tema gelap/terang ala Gemini.
- Prompt Suggestions: Saran pertanyaan pintar saat memulai chat baru agar UI tidak polosan.
Instalasi & Menjalankan Server
Pastikan Anda sudah menginstall
Xampp Meta Panel di Extension Antigrafity dan model
GGUF yang
sesuai.
Jalankan server dengan cara menekan tombol Server di Xampp Meta Panel contoh penggunaan code Python.
Contoh Penggunaan Code Backend
import json
import requests
API_URL = "http://127.0.0.1:8088/completion"
SYSTEM_PROMPT = (
"Sistem: Kamu adalah asisten AI yang akurat, logis, dan jujur. "
"Jawablah langsung ke inti masalah dengan jelas dan faktual. "
"Jika tidak tahu atau informasi tidak ada dalam konteks, katakan dengan jujur "
"bahwa kamu tidak tahu, jangan mengarang-ngarang atau berhalusinasi."
)
chat_history = []
def build_prompt(user_message):
context = SYSTEM_PROMPT + "\n\n"
recent_messages = chat_history[-4:]
for msg in recent_messages:
role = "User" if msg["role"] == "user" else "Assistant"
context += f"{role}: {msg['content']}\n"
context += f"User: {user_message}\nAssistant:"
return context
def send_message_stream(user_message):
payload = {
"prompt": build_prompt(user_message),
"n_predict": 512,
"temperature": 0.2,
"top_p": 0.9,
"top_k": 40,
"repeat_penalty": 1.15,
"stop": ["\nUser:", "User:", "\nAssistant:"],
"stream": True,
}
try:
response = requests.post(API_URL, json=payload, stream=True, timeout=60)
if response.status_code != 200:
print(f"Error: HTTP {response.status_code}")
return ""
full_response = ""
print("AI: ", end="", flush=True)
for line in response.iter_lines():
if line:
line = line.decode("utf-8")
if line.startswith("data: "):
try:
data = json.loads(line[6:])
if "content" in data:
content = data["content"]
full_response += content
print(content, end="", flush=True)
except json.JSONDecodeError:
continue
print("\n")
return full_response.strip()
except requests.exceptions.ConnectionError:
print(
"\nError: Tidak dapat terhubung ke server. Pastikan Llama.cpp berjalan."
)
return ""
except Exception as e:
print(f"\nError: {str(e)}")
return ""
def main():
print("=" * 50)
print("FAST & ACCURATE AI CHAT (Llama.cpp)")
print("Ketik 'exit' atau 'quit' untuk keluar.")
print("=" * 50 + "\n")
while True:
try:
user_input = input("Anda: ").strip()
if not user_input:
continue
if user_input.lower() in ["exit", "quit"]:
print("\nSampai jumpa!\n")
break
chat_history.append({"role": "user", "content": user_input})
ai_response = send_message_stream(user_input)
if ai_response:
chat_history.append({"role": "ai", "content": ai_response})
except (KeyboardInterrupt, EOFError):
print("\n\nSampai jumpa!\n")
break
if __name__ == "__main__":
main()
Contoh Penggunaan Website
Setelah server berjalan di http://127.0.0.1:8088/completion, buka file
index.html ini langsung di browser (Chrome/Edge). Tidak perlu node.js atau npm.
Struktur Project
| File / Folder | Deskripsi |
|---|---|
index.html |
Main UI file (HTML, CSS, JS gabungan dalam 1 file) |
icon.png |
Favicon icon aplikasi |
Llm_model.json |
Backup file riwayat chat (Auto-generated saat export) |
personality_backup.json |
Backup file kepribadian AI (Auto-generated saat export) |
Endpoint REST API
Aplikasi ini mengirim request ke POST /completion pada server llama.cpp Anda. Berikut adalah struktur payload yang digunakan:
Request Body
{
"prompt": "System: Instruksi...\nUser: Halo!\nAI:",
"n_predict": 512,
"temperature": 0.6,
"repeat_penalty": 1.15,
"stop": ["\nUser:", "User:"],
"stream": true
}
Streaming Response Format
Server merespons dalam format text/event-stream (SSE) chunk per chunk:
data: {"content":"H","multimodal":[],"stop":false}
data: {"content":"a","multimodal":[],"stop":false}
data: {"content":"l","multimodal":[],"stop":false}
...
data: {"content":".","stop":true,"id_slot":0}
UI membaca chunk ini secara real-time menggunakan ReadableStream dan
menampilkannya ke DOM karakter per karakter tanpa instant blink.
Pollinations AI Endpoint
Untuk pembuatan gambar, UI mengirim GET request ke:
https://image.pollinations.ai/prompt/{encoded_prompt}?nologo=true&width=1024&height=1024&seed={random_seed}
Format Data Llm_model.json
Data riwayat yang di-export/disimpan memiliki struktur JSON seperti berikut:
{
"chat_16987654321": {
"id": "chat_16987654321",
"title": "Chat Baru",
"messages": [
{ "role": "User", "content": "Halo AI!", "ts": 1698765432100 },
{ "role": "AI", "content": "Halo! Ada yang bisa saya bantu?", "ts": 1698765432200 }
],
"createdAt": 16987654321
}
}
-- Dibuat dengan Vanilla JS & CSS ♥ Meta Panel LLM Engine --