TTS Kernel Control

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_247":248,"_249":250},"routes/_app.x.$handle.$name",{"_104":103,"_37":48,"_112":94,"_32":58,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_26":-5,"_123":-5,"_124":-5,"_125":30,"_126":127,"_128":63,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_46":47,"_37":48,"_41":49,"_50":-5,"_51":30,"_52":53,"_54":53,"_55":56,"_57":58,"_19":59,"_60":61,"_62":63,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":71,"_72":73,"_74":75,"_76":-5,"_77":78,"_79":78,"_80":81,"_82":81,"_83":81,"_84":78,"_85":78,"_86":87,"_88":89,"_90":91,"_92":30},"version",18,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","e1c78555-49d5-4866-a2b0-f0307bd4e4b7","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":33,"_38":26,"_39":40,"_41":42,"_43":14,"_44":45,"_29":30},"previous","deleted",false,"deletedHere","path","SETUP.md","latestPath","fileId","b6b8e224-1f8b-11f1-9232-42dde27851f2","name","fileType","content","# 🚀 Setup & Deployment Guide\n\n## ✅ Đã Hoàn Thành\n\nKernel Control Panel đã được **nâng cấp thành công** từ Python Tkinter sang TypeScript/Web!\n\n### 📁 Cấu Trúc Dự Án\n\n```\nbuonhayvui1404/kernel/\n├── main.ts # ⭐ HTTP endpoint chính (giao diện web)\n├── browser_manager.ts # TypeScript class quản lý proxy/browser\n├── utils.ts # Helper functions & database operations\n├── README.md # Tài liệu đầy đủ\n├── QUICKSTART.md # Hướng dẫn nhanh\n├── SETUP.md # File này\n├── gui_app.py # (Cũ - có thể xóa)\n└── browser_manager.py # (Cũ - có thể xóa)\n```\n\n## 🌐 Truy Cập Live\n\n**Endpoint URL:**\n```\nhttps://buonhayvui1404--7388d0b81f8b11f19f3b42dde27851f2.web.val.run\n```\n\n### Tính Năng Giao Diện\n\n✅ **CONTROL Tab**\n- ⚙️ Cấu hình proxy (Region, City)\n- ▶️ Nút START - Khởi động hệ thống\n- ⏹️ Nút STOP - Dừng hệ thống\n- 📊 Status indicator (IDLE, RUNNING, ERROR)\n- 📋 Real-time system logs\n\n✅ **PROFILES Tab**\n- 🔄 Refresh danh sách profiles\n- 📂 Hiển thị proxy sessions đã tạo\n- 🔗 OPEN - Mở live view\n- 🗑️ DEL - Xóa profile\n\n✅ **Giao Diện Design**\n- 🎨 Theme Dark Mode (Neon Green)\n- 📱 Responsive (Desktop + Mobile)\n- ⚡ Smooth Animations\n- 🔌 Zero Dependencies (Pure HTML/CSS/JS)\n\n## 🔧 Tích Hợp với API Kernel\n\n### Option 1: Sử dụng BrowserManager Class\n\n```typescript\nimport { BrowserManager } from \"./browser_manager.ts\";\n\nconst apiKey = Deno.env.get(\"KERNEL_API_KEY\");\nconst manager = new BrowserManager(apiKey);\n\n// Tạo proxy\nconst proxyId = await manager.createProxy({\n country: \"US\",\n region: \"California\",\n city: \"Los Angeles\"\n});\n\n// Tạo browser session\nconst session = await manager.createBrowserSession(proxyId);\nconsole.log(session.liveViewUrl); // Live view URL\n```\n\n### Option 2: Direct API Call\n\n```typescript\nconst response = await fetch(\"https://api.kernel.com/proxies\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${Deno.env.get(\"KERNEL_API_KEY\")}`,\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({\n type: \"residential\",\n name: `proxy_${Date.now()}`,\n config: { country: \"US\", region, city }\n })\n});\n```\n\n## 💾 Database Setup\n\nĐể lưu trữ profiles & logs bền vững, sử dụng SQLite:\n\n### Khởi Tạo Database\n\n```typescript\nimport { initializeDatabase, saveProfile, getProfiles } from \"./utils.ts\";\n\n// Gọi một lần khi app start\nawait initializeDatabase();\n```\n\n### Lưu Profile\n\n```typescript\nawait saveProfile(proxyId, cdpUrl, liveViewUrl);\n```\n\n### Lấy Profiles\n\n```typescript\nconst profiles = await getProfiles(); // Mảng profiles\n```\n\n### Xóa Profile\n\n```typescript\nawait deleteProfile(profileId);\n```\n\n## 🔐 Environment Variables\n\nCấu hình trong Val Town settings:\n\n| Key | Value | Mô Tả |\n|-----|-------|-------|\n| `KERNEL_API_KEY` | `your-api-key` | API key từ Kernel |\n| `KERNEL_API_URL` | `https://api.kernel.com` | (Tùy chọn) |\n| `PROXY_TIMEOUT` | `3600` | (Tùy chọn) Timeout proxy |\n\n## 📊 API Endpoints\n\n### GET /\nTrả về HTML giao diện chính\n\n### POST /api/create-proxy\nTạo proxy mới\n\n**Request:**\n```json\n{\n \"country\": \"US\",\n \"region\": \"California\",\n \"city\": \"Los Angeles\"\n}\n```\n\n**Response:**\n```json\n{\n \"success\": true,\n \"proxyId\": \"proxy_1742123456789\"\n}\n```\n\n### POST /api/create-browser\nTạo browser session\n\n**Request:**\n```json\n{\n \"proxyId\": \"proxy_1742123456789\"\n}\n```\n\n**Response:**\n```json\n{\n \"success\": true,\n \"cdpUrl\": \"wss://cdp.kernel.com/...\",\n \"liveUrl\": \"https://live.kernel.com/...\"\n}\n```\n\n### GET /api/profiles\nLấy danh sách profiles\n\n**Response:**\n```json\n{\n \"profiles\": [\n {\n \"id\": 1,\n \"proxyId\": \"proxy_...\",\n \"time\": \"10:30:45\",\n \"liveUrl\": \"https://...\"\n }\n ]\n}\n```\n\n## 🎯 Customization\n\n### Thay đổi Màu Sắc\n\nTrong `getHTML()` function, tìm section `\n\n\n

\n \n\n

\n \n \n

\n\n

\n \n

🌍 Proxy Config

\n \n

\n Region\n \n

\n\n

\n City\n \n

\n\n

\n \n \n

\n\n

IDLE

\n\n

📋 System Logs

\n\n \n

\n \n

\n\n

\n\n \n\n`;\n}\n",[152],"64d7d3ca-1f8b-11f1-a9a6-42dde27851f2","gui_app.py","06eae464-1f8b-11f1-a108-42dde27851f2",11,["D",1773481897785],4,"export default async function(req: Request): Promise {\n const method = req.method;\n const url = new URL(req.url);\n const path = url.pathname;\n\n // API Routes\n if (path === \"/api/create-proxy\" && method === \"POST\") {\n const body = await req.json();\n const { country = \"US\", region, city } = body;\n\n try {\n // Placeholder - replace with actual Kernel API call\n const proxyId = `proxy_${Date.now()}`;\n return Response.json({ success: true, proxyId, message: `Proxy created: ${proxyId}` });\n } catch (error) {\n return Response.json({ success: false, error: (error as Error).message }, { status: 500 });\n }\n }\n\n if (path === \"/api/create-browser\" && method === \"POST\") {\n const body = await req.json();\n const { proxyId } = body;\n\n try {\n // Placeholder - replace with actual Kernel API call\n const cdpUrl = `wss://cdp.example.com/${proxyId}`;\n const liveUrl = `https://live.example.com/${proxyId}`;\n return Response.json({ success: true, cdpUrl, liveUrl });\n } catch (error) {\n return Response.json({ success: false, error: (error as Error).message }, { status: 500 });\n }\n }\n\n if (path === \"/api/profiles\" && method === \"GET\") {\n // Placeholder - return sample profiles\n return Response.json({\n profiles: [\n { id: 1, proxyId: \"proxy_123...\", time: \"10:30:45\", liveUrl: \"https://example.com\" },\n { id: 2, proxyId: \"proxy_456...\", time: \"10:15:22\", liveUrl: \"https://example.com\" },\n ]\n });\n }\n\n // Main HTML Page\n const html = \\`\n\n\n \n \n TTS Kernel Control\n \n\n\n

\n \n\n

\n \n \n

\n\n

\n \n

⚙️ PROXY CONFIG

\n \n

\n Region (optional)\n \n

\n\n

\n City (optional)\n \n

\n\n

\n \n \n

\n\n

IDLE

\n\n

📋 LOGS

\n\n \n

\n \n

\n\n

\n\n \n\n\\`;\n\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}\n",[160],"77777fbc-1f8b-11f1-9708-42dde27851f2","browser_manager.ts","7777805c-1f8b-11f1-9708-42dde27851f2",13,["D",1773481929034],"/**\n * Browser Manager - Handles proxy and browser creation via Kernel API\n * Convert Python code to TypeScript for Val Town\n */\n\ninterface ProxyConfig {\n country: string;\n region?: string;\n city?: string;\n}\n\ninterface BrowserSession {\n cdpUrl: string;\n liveViewUrl?: string;\n proxyId: string;\n createdAt: Date;\n}\n\nclass BrowserManager {\n private apiKey: string;\n private baseUrl: string = \"https://api.kernel.example.com\"; // Replace with actual Kernel API URL\n\n constructor(apiKey: string) {\n this.apiKey = apiKey;\n }\n\n /**\n * Creates a residential proxy with specific location\n */\n async createProxy(config: ProxyConfig): Promise {\n const locationInfo = `${config.country}${config.region ? `, ${config.region}` : \"\"}${config.city ? `, ${config.city}` : \"\"}`;\n \n console.log(`Creating Residential Proxy (${locationInfo})...`);\n\n try {\n const response = await fetch(`${this.baseUrl}/proxies`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${this.apiKey}`,\n },\n body: JSON.stringify({\n type: \"residential\",\n name: `tiktok_auto_proxy_${Date.now()}`,\n config: {\n country: config.country,\n ...(config.region && { region: config.region }),\n ...(config.city && { city: config.city }),\n },\n }),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n\n const data = await response.json() as { id: string };\n console.log(`Proxy Created Successfully: ${data.id} (${locationInfo})`);\n return data.id;\n } catch (error) {\n console.error(`Error creating proxy: ${(error as Error).message}`);\n throw error;\n }\n }\n\n /**\n * Creates a browser session using the specified proxy\n */\n async createBrowserSession(proxyId: string): Promise {\n console.log(`Creating Browser Session with Proxy ID: ${proxyId}...`);\n\n try {\n const response = await fetch(`${this.baseUrl}/browsers`, {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${this.apiKey}`,\n },\n body: JSON.stringify({\n proxy_id: proxyId,\n headless: false,\n stealth: true,\n timeout_seconds: 3600,\n }),\n });\n\n if (!response.ok) {\n throw new Error(`HTTP ${response.status}: ${response.statusText}`);\n }\n\n const data = await response.json() as {\n cdp_ws_url: string;\n browser_live_view_url?: string;\n };\n\n console.log(`Browser Created. CDP URL: ${data.cdp_ws_url}`);\n\n const session: BrowserSession = {\n cdpUrl: data.cdp_ws_url,\n liveViewUrl: data.browser_live_view_url,\n proxyId,\n createdAt: new Date(),\n };\n\n if (data.browser_live_view_url) {\n console.log(`Live View: ${data.browser_live_view_url}`);\n }\n\n return session;\n } catch (error) {\n console.error(`Error creating browser session: ${(error as Error).message}`);\n throw error;\n }\n }\n}\n\nexport { BrowserManager, ProxyConfig, BrowserSession };\n",[168],"fdb7bf8e-1f8a-11f1-a35a-42dde27851f2","browser_manager.py","f0fdf916-1f8a-11f1-9dea-42dde27851f2",5,["D",1773481724769],3,"import logging\nimport time\nfrom kernel import Kernel\n\nlogger = logging.getLogger(__name__)\n\nclass BrowserManager:\n def __init__(self, api_key):\n self.client = Kernel(api_key=api_key)\n\n def create_proxy(self, country=\"US\", region=None, city=None):\n \"\"\"Creates a residential proxy with specific location.\"\"\"\n location_info = f\"{country}\"\n if region: location_info += f\", {region}\"\n if city: location_info += f\", {city}\"\n \n logger.info(f\"Creating Residential Proxy ({location_info})...\")\n try:\n config = {\"country\": country}\n if region:\n config[\"region\"] = region\n if city:\n config[\"city\"] = city\n \n proxy = self.client.proxies.create(\n type=\"residential\",\n name=f\"tiktok_auto_proxy_{int(time.time())}\",\n config=config\n )\n logger.info(f\"Proxy Created Successfully: {proxy.id} ({location_info})\")\n return proxy.id\n except Exception as e:\n logger.error(f\"Error creating proxy: {e}\")\n raise\n\n def create_browser_session(self, proxy_id):\n \"\"\"Creates a browser session using the specified proxy.\"\"\"\n logger.info(f\"Creating Browser Session with Proxy ID: {proxy_id}...\")\n try:\n browser = self.client.browsers.create(\n proxy_id=proxy_id,\n headless=False,\n stealth=True, # Enable Stealth Mode to avoid detection\n timeout_seconds=3600\n )\n logger.info(f\"Browser Created. CDP URL: {browser.cdp_ws_url}\")\n \n if hasattr(browser, 'browser_live_view_url'):\n logger.info(f\"Live View: {browser.browser_live_view_url}\")\n # Optional: Automatically open live view for debugging\n # import webbrowser\n # webbrowser.open(browser.browser_live_view_url)\n return browser.cdp_ws_url, browser.browser_live_view_url\n \n return browser.cdp_ws_url, None\n except Exception as e:\n logger.error(f\"Error creating browser session: {e}\")\n raise",[175],"b6b8e170-1f8b-11f1-9232-42dde27851f2",["D",1773482035158],[33],"8040b276-1f8b-11f1-9708-42dde27851f2","README.md","8040b3e8-1f8b-11f1-9708-42dde27851f2",14,["D",1773481943771],"# 🖥️ Kernel Control Panel\n\nMộ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.\n\n## ✨ Tính Năng\n\n- **⚙️ Control Tab**: Tạo proxy, khởi động hệ thống, xem logs theo thời gian thực\n- **📁 Profiles Tab**: Quản lý các phiên làm việc đã lưu\n- **🎨 Giao Diện Hiện Đại**: Theme dark mode với hiệu ứng neon green\n- **📱 Responsive**: Hoạt động tốt trên desktop và mobile\n- **⚡ Hiệu Suất Cao**: Chạy 100% trên Val Town serverless\n\n## 🚀 Cách Sử Dụng\n\n### 1. Truy Cập Giao Diện\n\nTruy cập endpoint HTTP của val:\n```\nhttps://buonhayvui1404--.web.val.run\n```\n\n### 2. Cấu Hình Proxy\n\n- Nhập `Region` (tùy chọn): e.g., \"California\"\n- Nhập `City` (tùy chọn): e.g., \"Los Angeles\"\n- Click **▶ START** để khởi động\n\n### 3. Xem Logs\n\nTất cả hoạt động sẽ được ghi nhật ký theo thời gian thực:\n- 🟢 `INFO` - Thông tin chung\n- 🔴 `ERROR` - Lỗi\n- 🟠 `WARN` - Cảnh báo\n\n### 4. Quản Lý Profiles\n\nTab **📁 PROFILES**:\n- **REFRESH**: Tải lại danh sách\n- **OPEN**: Mở live view trong trình duyệt\n- **DEL**: Xóa profile\n\n## 📋 Cấu Trúc File\n\n```\nkernel/\n├── main.ts # HTTP endpoint chính với giao diện UI\n├── browser_manager.ts # Quản lý proxy và browser sessions\n├── gui_app.py # File Python cũ (có thể xóa)\n├── browser_manager.py # File Python cũ (có thể xóa)\n└── README.md # File này\n```\n\n## 🔧 Tích Hợp API Kernel\n\nĐể tích hợp với API Kernel thực tế, cập nhật các phần sau:\n\n### 1. Trong `main.ts`, hàm `/api/create-proxy`:\n\n```typescript\n// Thay thế:\nconst proxyId = `proxy_${Date.now()}`;\n\n// Với:\nconst proxyRes = await fetch('https://api.kernel.com/proxies', {\n method: 'POST',\n headers: {\n 'Authorization': `Bearer ${Deno.env.get('KERNEL_API_KEY')}`,\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify({\n type: \"residential\",\n name: `tiktok_auto_${Date.now()}`,\n config: { country, region, city }\n })\n});\nconst proxy = await proxyRes.json();\nconst proxyId = proxy.id;\n```\n\n### 2. Thêm Environment Variables:\n\n```\nKERNEL_API_KEY: \n```\n\n### 3. Sử dụng BrowserManager:\n\n```typescript\nimport { BrowserManager } from \"./browser_manager.ts\";\n\nconst manager = new BrowserManager(Deno.env.get(\"KERNEL_API_KEY\")!);\nconst proxyId = await manager.createProxy({ country: \"US\", region, city });\nconst session = await manager.createBrowserSession(proxyId);\n```\n\n## 🎨 Tùy Chỉnh Giao Diện\n\nThay đổi màu sắc trong CSS:\n\n- **Primary Color**: `#00ff00` (neon green)\n- **Secondary Color**: `#1a1a2e` (dark blue)\n- **Background**: `#0f0f23` (dark black)\n- **Accent**: `#00aa00` (button green)\n\n## 📊 Logs Storage\n\nHiện tại logs được lưu trong memory. Để lưu trữ bền vững, sử dụng Val Town SQLite:\n\n```typescript\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS logs (\n id INTEGER PRIMARY KEY,\n timestamp TEXT,\n level TEXT,\n message TEXT\n )\n`);\n```\n\n## 🔐 Bảo Mật\n\n- Tất cả API requests đều được ghi log\n- Environment variables được bảo vệ bởi Val Town\n- Không lưu trữ credentials trong code\n\n## 📝 Changelog\n\n### v2.0 (Current)\n- ✅ Chuyển đổi từ Python tkinter sang Web UI\n- ✅ TypeScript + Deno runtime\n- ✅ Giao diện theme dark mode\n- ✅ Responsive design\n- ✅ Real-time logs\n\n### v1.0 (Legacy)\n- Python tkinter GUI application\n\n## 🆘 Troubleshooting\n\n### Giao diện không tải\n- Kiểm tra endpoint URL có chính xác không\n- Xóa cache trình duyệt (Ctrl+Shift+Del)\n\n### API không kết nối\n- Kiểm tra KERNEL_API_KEY environment variable\n- Xác nhận API endpoint URL\n\n### Logs không hiển thị\n- Kiểm tra browser console (F12)\n- Xem execution logs trên Val Town dashboard\n\n## 📞 Support\n\nCần giúp? Kiểm tra:\n- Val Town docs: https://docs.val.town\n- Browser Console (F12) cho error messages\n- Network tab để debug API calls\n\n---\n\n**Made with 💚 for Val Town**\n",[186],"9686052c-1f8b-11f1-a293-42dde27851f2","QUICKSTART.md","96860612-1f8b-11f1-a293-42dde27851f2",16,["D",1773481981137],"# 🚀 Hướng Dẫn Nhanh\n\n## 📖 Tương Tác Với Kernel Control\n\n### 1️⃣ Truy Cập Giao Diện\nNhập URL này vào trình duyệt:\n```\nhttps://buonhayvui1404--7388d0b81f8b11f19f3b42dde27851f2.web.val.run\n```\n\n### 2️⃣ Tab CONTROL - Quản Lý Hệ Thống\n\n**Cấu Hình Proxy:**\n- 🌍 Region: Để trống hoặc nhập tên vùng (California, Texas, etc.)\n- 🏙️ City: Để trống hoặc nhập tên thành phố (Los Angeles, New York, etc.)\n\n**Điều Khiển:**\n- ▶ **START** - Khởi động tạo proxy & browser\n- ⏹ **STOP** - Dừng hệ thống\n\n**Giám Sát:**\n- Status hiển thị trạng thái (IDLE, RUNNING, ERROR)\n- Logs theo thời gian thực với các mức: INFO, ERROR, WARN\n\n### 3️⃣ Tab PROFILES - Quản Lý Phiên\n\n**Thao Tác:**\n- 🔄 **REFRESH** - Tải lại danh sách\n- **OPEN** - Mở live view của proxy trong tab mới\n- **DEL** - Xóa profile\n\n**Thông Tin:**\n- Hiển thị thời gian tạo\n- Hiển thị ID proxy (rút gọn)\n\n## 🔌 Kết Nối API Kernel Thực\n\nHiện tại giao diện dùng mock data. Để kết nối với API Kernel thực:\n\n### Bước 1: Thêm API Key\nVào trang manage val, thêm environment variable:\n- Key: `KERNEL_API_KEY`\n- Value: ``\n\n### Bước 2: Cập Nhật `/api/create-proxy`\nTrong `main.ts`, tìm và cập nhật:\n\n```typescript\nif (path === \"/api/create-proxy\" && method === \"POST\") {\n const apiKey = Deno.env.get(\"KERNEL_API_KEY\");\n const response = await fetch(\"https://api.kernel.com/proxies\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`,\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({\n type: \"residential\",\n name: `tiktok_auto_${Date.now()}`,\n config: { country: \"US\", region, city }\n })\n });\n const proxy = await response.json();\n return Response.json({ success: true, proxyId: proxy.id, ... });\n}\n```\n\n### Bước 3: Cập Nhật `/api/create-browser`\nTương tự, gọi endpoint create browser:\n```typescript\nconst browserRes = await fetch(\"https://api.kernel.com/browsers\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${apiKey}`,\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify({\n proxy_id: proxyId,\n headless: false,\n stealth: true,\n timeout_seconds: 3600\n })\n});\n```\n\n## 🗄️ Lưu Trữ Profiles\n\nĐể lưu trữ bền vững, sử dụng database SQL:\n\n```typescript\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { saveProfile, getProfiles } from \"./utils.ts\";\n\n// Khi tạo profile thành công\nawait saveProfile(proxyId, cdpUrl, liveUrl);\n\n// Lấy danh sách profiles\nconst profiles = await getProfiles();\n```\n\n## 🎨 Tùy Chỉnh Giao Diện\n\nThay đổi theme colors trong `main.ts`:\n\n```css\n/* Màu chính (neon green) */\ncolor: #00ff00;\n\n/* Nền tối */\nbackground: #0f0f23;\n\n/* Xanh đậm phụ */\nbackground: #1a1a2e;\n\n/* Nút khởi động */\nbackground: #00aa00;\n\n/* Nút dừng */\nbackground: #aa0000;\n```\n\n## 📊 Xem Logs Chi Tiết\n\n### Logs trong Giao Diện\nTất cả hoạt động hiển thị trong tab Control\n\n### Logs trong Database (nếu sử dụng)\n```typescript\nimport { getLogs } from \"./utils.ts\";\nconst recentLogs = await getLogs(50);\n```\n\n### Logs trong Browser Console\nNhấn **F12** → **Console** để xem JavaScript logs\n\n## 🔍 Debug\n\n**Nếu giao diện không tải:**\n1. Kiểm tra URL endpoint đúng không\n2. Xóa cache: Ctrl+Shift+Del\n3. Kiểm tra console (F12) có lỗi gì\n\n**Nếu API không kết nối:**\n1. Kiểm tra KERNEL_API_KEY có được set không\n2. Kiểm tra API endpoint URL đúng không\n3. Kiểm tra network tab (F12 → Network)\n\n**Nếu Profiles không lưu:**\n1. Kiểm tra database có được init không\n2. Xem console logs có lỗi gì\n3. Kiểm tra storage quota\n\n## 📝 Cấu Trúc Mã\n\n```\nmain.ts - HTTP endpoint + HTML UI\n├─ HTML - Giao diện web\n├─ CSS - Styling (theme dark mode)\n└─ JavaScript - Logic giao diện + API calls\n\nbrowser_manager.ts - TypeScript class quản lý browser/proxy\nutils.ts - Helper functions + database operations\nREADME.md - Tài liệu đầy đủ\n```\n\n## 💾 Ví Dụ API Response\n\n### Tạo Proxy Thành Công\n```json\n{\n \"success\": true,\n \"proxyId\": \"proxy_1742123456789\",\n \"message\": \"Proxy created successfully\"\n}\n```\n\n### Tạo Browser Thành Công\n```json\n{\n \"success\": true,\n \"cdpUrl\": \"wss://cdp.kernel.com/session/123\",\n \"liveUrl\": \"https://live.kernel.com/view/123\"\n}\n```\n\n### Lỗi\n```json\n{\n \"success\": false,\n \"error\": \"Invalid API key\"\n}\n```\n\n## ⚙️ Tối Ưu Hiệu Suất\n\n1. **Cache Profiles**: Đã có sẵn trong giao diện\n2. **Batch Requests**: Sử dụng sqlite.batch() cho multiple operations\n3. **Async/Await**: Tất cả API calls đều async\n4. **Minimal Dependencies**: Chỉ dùng std library\n\n## 🆘 Cần Giúp?\n\n- 📖 Docs: https://docs.val.town\n- 🐛 Console: Nhấn F12 để debug\n- 📡 Network Tab: Kiểm tra API calls\n- 💬 Community: Val Town Discord\n\n---\n\n**Made with 💚 on Val Town** ✨\n",[193],"pulls","branches","forks","envVars",{"_206":155,"_208":67},"connections",{"_206":67,"_207":67},"count","unfilledCount","emptyCount",{"_46":192,"_37":193,"_35":194,"_144":-5,"_44":45,"_43":195,"_146":63,"_41":239,"_13":67,"_38":26,"_39":197,"_29":30,"_149":-5,"_218":240,"_32":241},{"_46":185,"_37":186,"_35":187,"_144":-5,"_44":45,"_43":188,"_146":63,"_41":236,"_13":67,"_38":26,"_39":190,"_29":30,"_149":-5,"_218":237,"_32":238},{"_46":182,"_37":33,"_35":36,"_144":-5,"_44":45,"_43":14,"_146":63,"_41":233,"_13":67,"_38":26,"_39":40,"_29":30,"_149":-5,"_218":234,"_32":235},{"_46":174,"_37":175,"_35":176,"_144":-5,"_44":45,"_43":177,"_146":63,"_41":230,"_13":179,"_38":26,"_39":180,"_29":30,"_149":-5,"_218":231,"_32":232},{"_46":167,"_37":168,"_35":169,"_144":-5,"_44":45,"_43":170,"_146":63,"_41":227,"_13":67,"_38":26,"_39":172,"_29":30,"_149":-5,"_218":228,"_32":229},{"_46":159,"_37":160,"_35":161,"_144":-5,"_44":45,"_43":162,"_146":63,"_41":224,"_13":164,"_38":26,"_39":165,"_29":30,"_149":-5,"_218":225,"_32":226},{"_46":151,"_37":152,"_35":61,"_144":-5,"_44":45,"_43":153,"_146":30,"_41":221,"_13":155,"_38":156,"_39":157,"_29":30,"_149":-5,"_218":222,"_32":223},{"_46":141,"_37":142,"_35":143,"_144":-5,"_44":45,"_43":145,"_146":63,"_41":217,"_13":67,"_38":26,"_39":148,"_29":30,"_149":-5,"_218":219,"_32":220},["D",1773481953466],"children",[],[142],["D",1773482008767],[],[152],["D",1773481897785],[],[160],["D",1773481929034],[],[168],["D",1773481724769],[],[175],["D",1773482035158],[],[33],["D",1773481943771],[],[186],["D",1773481981137],[],[193],["D",1773481673231],["D",1789528252206],{"_104":103,"_111":107},{"_104":103,"_105":-5,"_106":107,"_19":59,"_108":109,"_110":30},{"_13":93,"_37":94,"_46":45,"_95":47,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":-5,"_101":48,"_102":103},"ctx",{"_86":-5,"_130":280,"_281":282,"_283":284,"_285":30,"_286":30,"_287":30,"_288":63,"_289":-5,"_290":-7,"_291":-7,"_292":67,"_293":30,"_294":30,"_295":-5,"_296":30,"_297":30,"_298":30,"_299":-5},"ENV",{"_251":252,"_253":254,"_255":94,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275,"_276":277,"_278":279},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v18