🖥️ Kernel Control Panel

Một giao diện điều khiển hiệu suất cao, nhỏ gọn và đẹp cho hệ thống Kernel TTS được chuyển đổi từ Python sang TypeScript cho Val Town.

✨ Tính Năng

⚙️ Control Tab: Tạo proxy, khởi động hệ thống, xem logs theo thời gian thực
📁 Profiles Tab: Quản lý các phiên làm việc đã lưu
🎨 Giao Diện Hiện Đại: Theme dark mode với hiệu ứng neon green
📱 Responsive: Hoạt động tốt trên desktop và mobile
⚡ Hiệu Suất Cao: Chạy 100% trên Val Town serverless

🚀 Cách Sử Dụng

1. Truy Cập Giao Diện

Truy cập endpoint HTTP của val:

https://buonhayvui1404--<id>.web.val.run

2. Cấu Hình Proxy

Nhập Region (tùy chọn): e.g., "California"
Nhập City (tùy chọn): e.g., "Los Angeles"
Click ▶ START để khởi động

3. Xem Logs

Tất cả hoạt động sẽ được ghi nhật ký theo thời gian thực:

🟢 INFO - Thông tin chung
🔴 ERROR - Lỗi
🟠 WARN - Cảnh báo

4. Quản Lý Profiles

Tab 📁 PROFILES:

REFRESH: Tải lại danh sách
OPEN: Mở live view trong trình duyệt
DEL: Xóa profile

📋 Cấu Trúc File

kernel/
├── main.ts              # HTTP endpoint chính với giao diện UI
├── browser_manager.ts   # Quản lý proxy và browser sessions
├── gui_app.py          # File Python cũ (có thể xóa)
├── browser_manager.py  # File Python cũ (có thể xóa)
└── README.md           # File này

🔧 Tích Hợp API Kernel

Để tích hợp với API Kernel thực tế, cập nhật các phần sau:

1. Trong `main.ts`, hàm `/api/create-proxy`:

// Thay thế:
const proxyId = `proxy_${Date.now()}`;

// Với:
const proxyRes = await fetch('https://api.kernel.com/proxies', {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${Deno.env.get('KERNEL_API_KEY')}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    type: "residential",
    name: `tiktok_auto_${Date.now()}`,
    config: { country, region, city }
  })
});
const proxy = await proxyRes.json();
const proxyId = proxy.id;

2. Thêm Environment Variables:

KERNEL_API_KEY: <your-api-key>

3. Sử dụng BrowserManager:

import { BrowserManager } from "./browser_manager.ts";

const manager = new BrowserManager(Deno.env.get("KERNEL_API_KEY")!);
const proxyId = await manager.createProxy({ country: "US", region, city });
const session = await manager.createBrowserSession(proxyId);

🎨 Tùy Chỉnh Giao Diện

Thay đổi màu sắc trong CSS:

Primary Color: #00ff00 (neon green)
Secondary Color: #1a1a2e (dark blue)
Background: #0f0f23 (dark black)
Accent: #00aa00 (button green)

📊 Logs Storage

Hiện tại logs được lưu trong memory. Để lưu trữ bền vững, sử dụng Val Town SQLite:

import { sqlite } from "https://esm.town/v/std/sqlite/main.ts";

await sqlite.execute(`
  CREATE TABLE IF NOT EXISTS logs (
    id INTEGER PRIMARY KEY,
    timestamp TEXT,
    level TEXT,
    message TEXT
  )
`);

🔐 Bảo Mật

Tất cả API requests đều được ghi log
Environment variables được bảo vệ bởi Val Town
Không lưu trữ credentials trong code

📝 Changelog

v2.0 (Current)

✅ Chuyển đổi từ Python tkinter sang Web UI
✅ TypeScript + Deno runtime
✅ Giao diện theme dark mode
✅ Responsive design
✅ Real-time logs

v1.0 (Legacy)

Python tkinter GUI application

🆘 Troubleshooting

Giao diện không tải

Kiểm tra endpoint URL có chính xác không
Xóa cache trình duyệt (Ctrl+Shift+Del)

API không kết nối

Kiểm tra KERNEL_API_KEY environment variable
Xác nhận API endpoint URL

Logs không hiển thị

Kiểm tra browser console (F12)
Xem execution logs trên Val Town dashboard

📞 Support

Cần giúp? Kiểm tra:

Val Town docs: https://docs.val.town
Browser Console (F12) cho error messages
Network tab để debug API calls

Made with 💚 for Val Town