Kernel Control Panel đã được nâng cấp thành công từ Python Tkinter sang TypeScript/Web!

buonhayvui1404/kernel/
├── main.ts                  # ⭐ HTTP endpoint chính (giao diện web)
├── browser_manager.ts       # TypeScript class quản lý proxy/browser
├── utils.ts                 # Helper functions & database operations
├── README.md                # Tài liệu đầy đủ
├── QUICKSTART.md            # Hướng dẫn nhanh
├── SETUP.md                 # File này
├── gui_app.py              # (Cũ - có thể xóa)
└── browser_manager.py      # (Cũ - có thể xóa)

Endpoint URL:

https://buonhayvui1404--7388d0b81f8b11f19f3b42dde27851f2.web.val.run

✅ CONTROL Tab

• ⚙️ Cấu hình proxy (Region, City)
• ▶️ Nút START - Khởi động hệ thống
• ⏹️ Nút STOP - Dừng hệ thống
• 📊 Status indicator (IDLE, RUNNING, ERROR)
• 📋 Real-time system logs

✅ PROFILES Tab

• 🔄 Refresh danh sách profiles
• 📂 Hiển thị proxy sessions đã tạo
• 🔗 OPEN - Mở live view
• 🗑️ DEL - Xóa profile

✅ Giao Diện Design

• 🎨 Theme Dark Mode (Neon Green)
• 📱 Responsive (Desktop + Mobile)
• ⚡ Smooth Animations
• 🔌 Zero Dependencies (Pure HTML/CSS/JS)

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

const apiKey = Deno.env.get("KERNEL_API_KEY");
const manager = new BrowserManager(apiKey);

// Tạo proxy
const proxyId = await manager.createProxy({
  country: "US",
  region: "California",
  city: "Los Angeles"
});

// Tạo browser session
const session = await manager.createBrowserSession(proxyId);
console.log(session.liveViewUrl); // Live view URL

const response = 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: `proxy_${Date.now()}`,
    config: { country: "US", region, city }
  })
});

Để lưu trữ profiles & logs bền vững, sử dụng SQLite:

import { initializeDatabase, saveProfile, getProfiles } from "./utils.ts";

// Gọi một lần khi app start
await initializeDatabase();

await saveProfile(proxyId, cdpUrl, liveViewUrl);

const profiles = await getProfiles(); // Mảng profiles

await deleteProfile(profileId);

Cấu hình trong Val Town settings:

Key	Value	Mô Tả
KERNEL_API_KEY	your-api-key	API key từ Kernel
KERNEL_API_URL	https://api.kernel.com	(Tùy chọn)
PROXY_TIMEOUT	3600	(Tùy chọn) Timeout proxy

Trả về HTML giao diện chính

Tạo proxy mới

Request:

{
  "country": "US",
  "region": "California",
  "city": "Los Angeles"
}

Response:

{
  "success": true,
  "proxyId": "proxy_1742123456789"
}

Tạo browser session

Request:

{
  "proxyId": "proxy_1742123456789"
}

Response:

{
  "success": true,
  "cdpUrl": "wss://cdp.kernel.com/...",
  "liveUrl": "https://live.kernel.com/..."
}

Lấy danh sách profiles

Response:

{
  "profiles": [
    {
      "id": 1,
      "proxyId": "proxy_...",
      "time": "10:30:45",
      "liveUrl": "https://..."
    }
  ]
}

Trong getHTML() function, tìm section <style> và sửa:

/* Neon Green (Primary) */
color: #00ff00;

/* Dark Background */
background: #0f0f23;

/* Secondary */
background: #1a1a2e;

/* Button Green */
background: #00aa00;

/* Error Red */
background: #aa0000;

<button class="tab-btn" onclick="switchTab('newtab')">🆕 NEW</button>

<div id="newtab" class="tab-content">
  <!-- Content here -->
</div>

if (path === "/api/newfeature" && method === "POST") {
  // Your logic
  return Response.json({ success: true, data: {...} });
}

1. Caching: Sử dụng browser cache cho profiles
2. Lazy Loading: Load profiles chỉ khi click tab
3. Batch Operations: Group multiple API calls
4. Connection Pooling: Reuse HTTP connections

# Trong browser console (F12)
console.log(logs);

1. Nhấn F12 → Network tab
2. Klik START button
3. Xem requests/responses

import { getLogs } from "./utils.ts";
const logs = await getLogs(50);
console.log(logs);

• ✅ main.ts - HTTP endpoint
• ✅ browser_manager.ts - Browser manager class
• ✅ utils.ts - Database utilities
• ✅ Environment variables set
• ✅ API key configured
• ✅ Database initialized
• ✅ Theme customized (optional)

Python	TypeScript
tkinter.Tk GUI	HTML/CSS/JS Web UI
QueueHandler logging	Console + Database logs
tkinter.Entry inputs	HTML inputs
tkinter.Button buttons	HTML buttons
tkinter.Listbox profiles	HTML list
File storage (profiles.json)	SQLite database

• ✅ Browser-based (không cần cài đặt Python)
• ✅ Responsive design
• ✅ Real-time updates
• ✅ Better data persistence
• ✅ Production-ready

• README.md - Tài liệu đầy đủ
• QUICKSTART.md - Hướng dẫn nhanh
• SETUP.md - Hướng dẫn setup (file này)

→ Xóa cache (Ctrl+Shift+Del)
→ Kiểm tra URL endpoint
→ Xem browser console (F12)

→ Kiểm tra KERNEL_API_KEY
→ Kiểm tra API URL
→ Xem network errors (F12)

→ Gọi initializeDatabase()
→ Kiểm tra storage quota
→ Xem sqlite errors

1. Tích hợp API Kernel

   • Cập nhật KERNEL_API_KEY
   • Thay API endpoints
   • Test create-proxy & create-browser

2. Customize Giao Diện

   • Thay đổi colors/theme
   • Thêm logo
   • Adjust layout

3. Thêm Features

   • Stats dashboard
   • Proxy health check
   • Session management
   • Export logs

4. Production Deploy

   • Enable CORS nếu cần
   • Setup rate limiting
   • Configure monitoring
   • Add error tracking

• Sử dụng Deno DevTools (F12) để debug
• Kiểm tra Val Town Dashboard cho execution logs
• Backup database regularly
• Monitor API rate limits

• Val Town Docs: https://docs.val.town
• Community: Val Town Discord
• Issues: Check browser console + network tab

---

Status: ✅ Production Ready
Updated: 2026-03-14
Version: 2.0

Made with 💚 for Val Town