Meta Panel LLM Engine
Meta Panel LLM Engine
Pilih salah satu saran di bawah untuk memulai percakapan yang bermanfaat, atau ketik pesan Anda sendiri di kolom input bawah.
Generate Gambar Publik (Pollinations)
Buat 1 gambar publik berkualitas tinggi secara instan menggunakan endpoint Pollinations yang terhubung. Klik gambar untuk preview & download.
Masukkan Prompt Gambar
Hasil Gambar
Belum ada gambar yang digenerate.
Pengaturan Kepribadian AI
Ubah sistem prompt / kepribadian AI, simpan ke file backup JSON, atau reset ke pengaturan awal.
System Prompt / Persona Aktif
Setting AI & Data Management
Atur data riwayat percakapan, impor/ekspor backup file, dan konfigurasi endpoint server termasuk custom link Pollinations.
Konfigurasi Server Endpoint & Pollinations
Anda dapat mengganti atau menyesuaikan URL endpoint Pollinations sesuai kebutuhan kustom Anda.
Pengelolaan Data Chat (.json)
Simpan seluruh riwayat percakapan ke file Llm_model.json atau muat riwayat dari file backup sebelumnya.
Parameter Model LLM
0.6
1.15

Meta Panel LLM Engine - README.md

Stable v1.0 Vanilla JS llama.cpp Pollinations AI

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.json dan 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 --