Spaces:

Phoe2004
/

ttup

Running

App Files Files Community

Phoe2004 commited on 2 days ago

Commit

d697f22

verified ·

1 Parent(s): cc83ea3

Upload app.py

Browse files

Files changed (1) hide show

app.py +840 -150

app.py CHANGED Viewed

@@ -320,6 +320,34 @@ def api_cookie_check():
         'keys': keys,
     })
 def get_latest_youtube_video(channel_id):
     """Use yt-dlp to get latest video ID & title — bypasses RSS cache delay"""
     try:
@@ -364,7 +392,10 @@ def get_latest_youtube_video(channel_id):
 def auto_poster_worker():
     global bot_running
     add_log('🤖 Auto Poster started')
-    CHANNEL_ID = 'UCsgopUB269PWGYTXo-MXjpA'
     last_id = None
     while bot_running:
@@ -402,170 +433,829 @@ def auto_poster_worker():
 # ── HTML Template ──
 HTML_TEMPLATE = '''
 <!DOCTYPE html>
-<html>
 <head>
-    <title>YouTube to TikTok Bot</title>
-    <style>
-        body { font-family: monospace; max-width: 820px; margin: 0 auto; padding: 20px; background: #0a0a0a; color: #0f0; }
-        .card { background: #111; border: 1px solid #333; border-radius: 8px; padding: 16px; margin-bottom: 20px; }
-        button { background: #00aa00; color: black; border: none; padding: 8px 16px; cursor: pointer; margin-right: 8px; border-radius: 4px; }
-        button:hover { background: #00cc00; }
-        button.red { background: #aa0000; color: #fff; }
-        button.red:hover { background: #cc0000; }
-        button.gray { background: #444; color: #fff; }
-        input, select, textarea { padding: 8px; margin: 5px 0; width: 100%; box-sizing: border-box; background: #222; color: #0f0; border: 1px solid #333; border-radius: 4px; }
-        .log-box { height: 220px; overflow-y: scroll; background: #050505; border: 1px solid #333; padding: 10px; font-size: 11px; line-height: 1.6; }
-        .status { padding: 8px 12px; border-radius: 4px; margin-bottom: 10px; font-weight: bold; }
-        .status.running { background: #1a3a1a; color: #0f0; }
-        .status.stopped { background: #3a1a1a; color: #f55; }
-        hr { border-color: #333; margin: 12px 0; }
-        .cookie-info { font-size: 11px; color: #888; margin-top: 6px; }
-        .cookie-info span { color: #0f0; }
-        .cookie-info span.bad { color: #f55; }
-        h2 { margin: 0 0 12px 0; font-size: 15px; }
-        h1 { font-size: 20px; }
-        .result { margin-top: 8px; font-size: 12px; min-height: 18px; }
-    </style>
 </head>
 <body>
-    <h1>🎬 YouTube → TikTok Bot</h1>
-    <!-- Cookie Status -->
-    <div class="card">
-        <h2>🍪 Cookie Status</h2>
-        <div id="cookie-status" class="cookie-info">Loading...</div>
-        <button class="gray" onclick="checkCookie()" style="margin-top:8px;">🔍 Check Cookies</button>
     </div>
-    <!-- Auto Bot -->
-    <div class="card">
-        <h2>🤖 Auto Poster Bot</h2>
-        <div id="status" class="status stopped">🔴 STOPPED</div>
-        <button onclick="startBot()">▶️ START</button>
-        <button class="red" onclick="stopBot()">⏹️ STOP</button>
-        <button class="gray" onclick="refreshStatus()">🔄 Refresh</button>
-        <hr>
-        <div id="log" class="log-box"></div>
     </div>
-    <!-- Manual Upload by URL -->
-    <div class="card">
-        <h2>📤 Manual Upload (by URL)</h2>
-        <input type="text" id="manual-url" placeholder="YouTube / Video URL">
-        <input type="text" id="manual-title" placeholder="Video Title (caption)">
-        <select id="manual-quality">
             <option value="1080">1080p</option>
             <option value="720" selected>720p</option>
             <option value="480">480p</option>
-        </select>
-        <button onclick="manualUpload()">⬆️ Download & Upload to TikTok</button>
-        <div id="manual-result" class="result"></div>
     </div>
-    <!-- Manual Upload by File -->
-    <div class="card">
-        <h2>📁 Manual Upload (by File)</h2>
-        <input type="file" id="file-input" accept="video/mp4,video/*">
-        <input type="text" id="file-title" placeholder="Video Title (caption)">
-        <button onclick="manualUploadFile()">⬆️ Upload File to TikTok</button>
-        <div id="file-result" class="result"></div>
     </div>
-    <script>
-        async function checkCookie() {
-            const res = await fetch('/api/cookie/check');
-            const d = await res.json();
-            const el = document.getElementById('cookie-status');
-            const ok = v => `<span>${v ? '✅' : '<span class="bad">❌</span>'}</span>`;
-            el.innerHTML = `
-                sessionid: ${ok(d.has_sessionid)} &nbsp;|&nbsp;
-                msToken: ${ok(d.has_msToken)} &nbsp;|&nbsp;
-                csrf: ${ok(d.has_csrf)} &nbsp;|&nbsp;
-                Total keys: <span>${d.total_keys}</span>
-            `;
-        }
-        async function refreshStatus() {
-            const res = await fetch('/api/bot/status');
-            const d = await res.json();
-            const statusDiv = document.getElementById('status');
-            statusDiv.className = 'status ' + (d.running ? 'running' : 'stopped');
-            statusDiv.innerHTML = d.running ? '🟢 RUNNING' : '🔴 STOPPED';
-            const logEl = document.getElementById('log');
-            logEl.innerHTML = d.logs.map(l => `<div>${escapeHtml(l)}</div>`).join('');
-            logEl.scrollTop = logEl.scrollHeight;
-        }
-        async function startBot() {
-            const res = await fetch('/api/bot/start', {method: 'POST'});
-            const d = await res.json();
-            alert(d.msg);
-            refreshStatus();
-        }
-        async function stopBot() {
-            const res = await fetch('/api/bot/stop', {method: 'POST'});
-            const d = await res.json();
-            alert(d.msg);
-            refreshStatus();
-        }
-        async function manualUpload() {
-            const url   = document.getElementById('manual-url').value.trim();
-            const title = document.getElementById('manual-title').value.trim();
-            const quality = document.getElementById('manual-quality').value;
-            if (!url || !title) { alert('URL နဲ့ Title ထည့်ပါ'); return; }
-            const el = document.getElementById('manual-result');
-            el.innerHTML = '⏳ Downloading & uploading... (ခဏစောင့်ပါ)';
-            try {
-                const res = await fetch('/api/upload/manual', {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({url, title, quality})
-                });
-                const d = await res.json();
-                el.innerHTML = d.ok ? '✅ ' + d.msg : '❌ ' + d.msg;
-            } catch(e) {
-                el.innerHTML = '❌ Request error: ' + e;
-            }
-            refreshStatus();
-        }
-        async function manualUploadFile() {
-            const file  = document.getElementById('file-input').files[0];
-            const title = document.getElementById('file-title').value.trim();
-            if (!file || !title) { alert('File ရွေးပြီး Title ထည့်ပါ'); return; }
-            const el = document.getElementById('file-result');
-            el.innerHTML = '⏳ Uploading file... (ခဏစောင့်ပါ)';
-            const formData = new FormData();
-            formData.append('video', file);
-            formData.append('title', title);
-            try {
-                const res = await fetch('/api/upload/file', {method: 'POST', body: formData});
-                const d = await res.json();
-                el.innerHTML = d.ok ? '✅ ' + d.msg : '❌ ' + d.msg;
-            } catch(e) {
-                el.innerHTML = '❌ Request error: ' + e;
-            }
-            refreshStatus();
-        }
-        function escapeHtml(text) {
-            const div = document.createElement('div');
-            div.textContent = text;
-            return div.innerHTML;
-        }
-        // Init
-        checkCookie();
-        refreshStatus();
-        setInterval(refreshStatus, 5000);
-    </script>
 </body>
 </html>
 '''
-if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860, debug=False)

         'keys': keys,
     })
+@app.route('/api/settings/save', methods=['POST'])
+def api_settings_save():
+    """Save channel_id and/or cookies.txt from the UI"""
+    data = request.get_json() or {}
+    channel_id = data.get('channel_id', '').strip()
+    cookie_txt  = data.get('cookie_txt', '').strip()
+    msgs = []
+    if channel_id:
+        # Hot-patch the worker's CHANNEL_ID by writing to a sidecar file
+        try:
+            (BASE_DIR / 'channel_id.txt').write_text(channel_id)
+            msgs.append(f'Channel ID saved: {channel_id}')
+        except Exception as e:
+            return jsonify({'ok': False, 'msg': f'Channel ID save error: {e}'})
+    if cookie_txt:
+        try:
+            Path(TIKTOK_COOKIE_FILE).write_text(cookie_txt)
+            msgs.append('cookies.txt updated')
+        except Exception as e:
+            return jsonify({'ok': False, 'msg': f'Cookie save error: {e}'})
+    if not msgs:
+        return jsonify({'ok': False, 'msg': 'Nothing provided'})
+    return jsonify({'ok': True, 'msg': ' · '.join(msgs)})
 def get_latest_youtube_video(channel_id):
     """Use yt-dlp to get latest video ID & title — bypasses RSS cache delay"""
     try:
 def auto_poster_worker():
     global bot_running
     add_log('🤖 Auto Poster started')
+    # Read channel_id from file if available (set via UI)
+    _cid_file = BASE_DIR / 'channel_id.txt'
+    CHANNEL_ID = _cid_file.read_text().strip() if _cid_file.exists() else 'UCsgopUB269PWGYTXo-MXjpA'
+    add_log(f'📡 Monitoring channel: {CHANNEL_ID}')
     last_id = None
     while bot_running:
 # ── HTML Template ──
 HTML_TEMPLATE = '''
 <!DOCTYPE html>
+<html lang="en">
 <head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>YT → TikTok AutoBot</title>
+<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;700;800&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
+<style>
+  :root {
+    --bg: #080810;
+    --bg2: #0d0d1a;
+    --card: #10101e;
+    --border: #1e1e3a;
+    --accent: #ff2d55;
+    --accent2: #00f0ff;
+    --accent3: #7b5ea7;
+    --green: #00e676;
+    --yellow: #ffd600;
+    --text: #e8e8f0;
+    --muted: #555570;
+    --font-display: 'Syne', sans-serif;
+    --font-mono: 'Space Mono', monospace;
+  }
+  * { margin: 0; padding: 0; box-sizing: border-box; }
+  body {
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-mono);
+    min-height: 100vh;
+    overflow-x: hidden;
+  }
+  /* Grid bg */
+  body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background-image:
+      linear-gradient(rgba(0,240,255,0.03) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(0,240,255,0.03) 1px, transparent 1px);
+    background-size: 40px 40px;
+    pointer-events: none;
+    z-index: 0;
+  }
+  /* Glow orbs */
+  .orb {
+    position: fixed;
+    border-radius: 50%;
+    filter: blur(120px);
+    pointer-events: none;
+    z-index: 0;
+  }
+  .orb1 { width: 500px; height: 500px; background: rgba(255,45,85,0.08); top: -150px; right: -100px; }
+  .orb2 { width: 400px; height: 400px; background: rgba(0,240,255,0.06); bottom: 100px; left: -100px; }
+  .orb3 { width: 300px; height: 300px; background: rgba(123,94,167,0.07); top: 40%; left: 40%; }
+  .wrap {
+    position: relative;
+    z-index: 1;
+    max-width: 860px;
+    margin: 0 auto;
+    padding: 28px 20px 60px;
+  }
+  /* Header */
+  .header {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 36px;
+    padding-bottom: 20px;
+    border-bottom: 1px solid var(--border);
+  }
+  .logo-mark {
+    width: 46px; height: 46px;
+    background: linear-gradient(135deg, var(--accent), var(--accent3));
+    border-radius: 12px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 20px;
+    flex-shrink: 0;
+    box-shadow: 0 0 20px rgba(255,45,85,0.3);
+  }
+  .header-text h1 {
+    font-family: var(--font-display);
+    font-size: 22px;
+    font-weight: 800;
+    letter-spacing: -0.5px;
+    background: linear-gradient(90deg, #fff 40%, var(--accent2));
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+  }
+  .header-text p {
+    font-size: 11px;
+    color: var(--muted);
+    margin-top: 2px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+  .header-badge {
+    margin-left: auto;
+    font-size: 10px;
+    color: var(--accent2);
+    border: 1px solid rgba(0,240,255,0.3);
+    padding: 4px 10px;
+    border-radius: 20px;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+  }
+  /* Cards */
+  .card {
+    background: var(--card);
+    border: 1px solid var(--border);
+    border-radius: 16px;
+    padding: 22px 24px;
+    margin-bottom: 16px;
+    position: relative;
+    overflow: hidden;
+    transition: border-color 0.2s;
+  }
+  .card::before {
+    content: '';
+    position: absolute;
+    top: 0; left: 0; right: 0;
+    height: 1px;
+    background: linear-gradient(90deg, transparent, rgba(0,240,255,0.15), transparent);
+  }
+  .card:hover { border-color: rgba(0,240,255,0.15); }
+  .card-header {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 18px;
+  }
+  .card-icon {
+    width: 32px; height: 32px;
+    border-radius: 8px;
+    display: flex; align-items: center; justify-content: center;
+    font-size: 15px;
+    flex-shrink: 0;
+  }
+  .card-icon.red { background: rgba(255,45,85,0.15); }
+  .card-icon.cyan { background: rgba(0,240,255,0.12); }
+  .card-icon.purple { background: rgba(123,94,167,0.2); }
+  .card-icon.green { background: rgba(0,230,118,0.12); }
+  .card-icon.yellow { background: rgba(255,214,0,0.12); }
+  .card-title {
+    font-family: var(--font-display);
+    font-size: 13px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    color: #fff;
+  }
+  .card-sub {
+    font-size: 10px;
+    color: var(--muted);
+    margin-top: 1px;
+  }
+  /* Status pill */
+  .status-pill {
+    display: inline-flex;
+    align-items: center;
+    gap: 7px;
+    padding: 6px 14px;
+    border-radius: 30px;
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    transition: all 0.3s;
+  }
+  .status-pill.running {
+    background: rgba(0,230,118,0.1);
+    border: 1px solid rgba(0,230,118,0.3);
+    color: var(--green);
+  }
+  .status-pill.stopped {
+    background: rgba(255,45,85,0.1);
+    border: 1px solid rgba(255,45,85,0.3);
+    color: var(--accent);
+  }
+  .status-dot {
+    width: 7px; height: 7px;
+    border-radius: 50%;
+    background: currentColor;
+  }
+  .status-dot.pulse {
+    animation: pulse 1.5s infinite;
+  }
+  @keyframes pulse {
+    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
+    50% { opacity: 0.7; box-shadow: 0 0 0 4px transparent; }
+  }
+  /* Bot control row */
+  .bot-row {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    flex-wrap: wrap;
+  }
+  /* Buttons */
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 9px 18px;
+    border-radius: 8px;
+    border: none;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    cursor: pointer;
+    transition: all 0.15s;
+    text-transform: uppercase;
+  }
+  .btn:active { transform: scale(0.97); }
+  .btn-start {
+    background: linear-gradient(135deg, #00b341, #00e676);
+    color: #000;
+    box-shadow: 0 0 16px rgba(0,230,118,0.25);
+  }
+  .btn-start:hover { box-shadow: 0 0 24px rgba(0,230,118,0.4); }
+  .btn-stop {
+    background: linear-gradient(135deg, #c0002a, #ff2d55);
+    color: #fff;
+    box-shadow: 0 0 16px rgba(255,45,85,0.25);
+  }
+  .btn-stop:hover { box-shadow: 0 0 24px rgba(255,45,85,0.4); }
+  .btn-ghost {
+    background: transparent;
+    color: var(--muted);
+    border: 1px solid var(--border);
+  }
+  .btn-ghost:hover { border-color: var(--accent2); color: var(--accent2); }
+  .btn-cyan {
+    background: linear-gradient(135deg, #007a87, #00f0ff);
+    color: #000;
+    box-shadow: 0 0 16px rgba(0,240,255,0.2);
+  }
+  .btn-cyan:hover { box-shadow: 0 0 24px rgba(0,240,255,0.35); }
+  .btn-purple {
+    background: linear-gradient(135deg, #4a2a7a, #7b5ea7);
+    color: #fff;
+    box-shadow: 0 0 16px rgba(123,94,167,0.25);
+  }
+  .btn-purple:hover { box-shadow: 0 0 24px rgba(123,94,167,0.4); }
+  .btn-sm { padding: 7px 14px; font-size: 10px; }
+  .btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }
+  /* Divider */
+  .divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
+  /* Log box */
+  .log-wrap { position: relative; }
+  .log-box {
+    height: 200px;
+    overflow-y: auto;
+    background: #07070f;
+    border: 1px solid var(--border);
+    border-radius: 10px;
+    padding: 12px 14px;
+    font-size: 11px;
+    line-height: 1.8;
+    color: #8888aa;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border) transparent;
+  }
+  .log-box::-webkit-scrollbar { width: 4px; }
+  .log-box::-webkit-scrollbar-track { background: transparent; }
+  .log-box::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+  .log-entry { display: flex; gap: 8px; }
+  .log-time { color: var(--muted); flex-shrink: 0; }
+  .log-msg { color: #aaaacc; }
+  .log-msg.ok { color: var(--green); }
+  .log-msg.err { color: var(--accent); }
+  .log-msg.info { color: var(--accent2); }
+  .log-msg.warn { color: var(--yellow); }
+  /* Inputs */
+  .field { margin-bottom: 12px; }
+  .field label {
+    display: block;
+    font-size: 10px;
+    color: var(--muted);
+    letter-spacing: 1px;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+  }
+  .field input, .field select, .field textarea {
+    width: 100%;
+    background: #0a0a18;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    padding: 10px 13px;
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    outline: none;
+    transition: border-color 0.2s, box-shadow 0.2s;
+  }
+  .field input:focus, .field select:focus, .field textarea:focus {
+    border-color: rgba(0,240,255,0.35);
+    box-shadow: 0 0 0 3px rgba(0,240,255,0.06);
+  }
+  .field textarea { resize: vertical; min-height: 90px; font-size: 11px; }
+  .field select option { background: #0d0d1a; }
+  .field input::placeholder { color: var(--muted); }
+  /* Row layouts */
+  .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
+  @media (max-width: 560px) { .row { grid-template-columns: 1fr; } }
+  /* Cookie chips */
+  .cookie-grid {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    margin-top: 4px;
+  }
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border-radius: 20px;
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    border: 1px solid transparent;
+  }
+  .chip.ok { background: rgba(0,230,118,0.08); border-color: rgba(0,230,118,0.25); color: var(--green); }
+  .chip.bad { background: rgba(255,45,85,0.08); border-color: rgba(255,45,85,0.25); color: var(--accent); }
+  .chip.neutral { background: rgba(255,214,0,0.08); border-color: rgba(255,214,0,0.25); color: var(--yellow); }
+  /* Result message */
+  .result-msg {
+    margin-top: 10px;
+    font-size: 11px;
+    min-height: 16px;
+    padding: 0 2px;
+    transition: all 0.2s;
+  }
+  .result-msg.ok { color: var(--green); }
+  .result-msg.err { color: var(--accent); }
+  .result-msg.loading { color: var(--accent2); }
+  /* Section label */
+  .section-tag {
+    display: inline-block;
+    font-size: 9px;
+    letter-spacing: 2px;
+    text-transform: uppercase;
+    color: var(--accent2);
+    border-left: 2px solid var(--accent2);
+    padding-left: 8px;
+    margin-bottom: 14px;
+    opacity: 0.7;
+  }
+  /* Tabs */
+  .tabs { display: flex; gap: 4px; margin-bottom: 18px; }
+  .tab {
+    flex: 1;
+    padding: 9px;
+    background: #0a0a18;
+    border: 1px solid var(--border);
+    border-radius: 8px;
+    color: var(--muted);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.5px;
+    text-transform: uppercase;
+    cursor: pointer;
+    text-align: center;
+    transition: all 0.15s;
+  }
+  .tab.active {
+    background: rgba(0,240,255,0.08);
+    border-color: rgba(0,240,255,0.3);
+    color: var(--accent2);
+  }
+  .tab-panel { display: none; }
+  .tab-panel.active { display: block; }
+  /* File drop zone */
+  .dropzone {
+    border: 2px dashed var(--border);
+    border-radius: 10px;
+    padding: 24px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s;
+    background: #07070f;
+    margin-bottom: 12px;
+  }
+  .dropzone:hover, .dropzone.drag { border-color: rgba(0,240,255,0.4); background: rgba(0,240,255,0.03); }
+  .dropzone input { display: none; }
+  .dropzone .dz-icon { font-size: 28px; margin-bottom: 8px; }
+  .dropzone .dz-text { font-size: 11px; color: var(--muted); }
+  .dropzone .dz-file { font-size: 11px; color: var(--accent2); margin-top: 4px; }
+  /* Settings save feedback */
+  .save-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    font-size: 10px;
+    color: var(--green);
+    opacity: 0;
+    transition: opacity 0.3s;
+    margin-left: 8px;
+  }
+  .save-badge.show { opacity: 1; }
+  /* Spinner */
+  .spin {
+    display: inline-block;
+    width: 11px; height: 11px;
+    border: 2px solid rgba(0,240,255,0.2);
+    border-top-color: var(--accent2);
+    border-radius: 50%;
+    animation: spin 0.7s linear infinite;
+    vertical-align: middle;
+    margin-right: 4px;
+  }
+  @keyframes spin { to { transform: rotate(360deg); } }
+  /* Fade in */
+  @keyframes fadeUp {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .card { animation: fadeUp 0.4s ease both; }
+  .card:nth-child(1) { animation-delay: 0.05s; }
+  .card:nth-child(2) { animation-delay: 0.10s; }
+  .card:nth-child(3) { animation-delay: 0.15s; }
+  .card:nth-child(4) { animation-delay: 0.20s; }
+  .card:nth-child(5) { animation-delay: 0.25s; }
+  /* Channel ID display */
+  .channel-display {
+    font-size: 11px;
+    color: var(--muted);
+    margin-top: 6px;
+  }
+  .channel-display span { color: var(--accent2); }
+  /* total keys */
+  .total-keys {
+    font-size: 10px;
+    color: var(--muted);
+    margin-top: 8px;
+  }
+  .total-keys b { color: var(--yellow); }
+</style>
 </head>
 <body>
+<div class="orb orb1"></div>
+<div class="orb orb2"></div>
+<div class="orb orb3"></div>
+<div class="wrap">
+  <!-- Header -->
+  <div class="header">
+    <div class="logo-mark">🎬</div>
+    <div class="header-text">
+      <h1>YT → TikTok AutoBot</h1>
+      <p>Automated cross-platform poster</p>
+    </div>
+    <div class="header-badge" id="conn-badge">● LIVE</div>
+  </div>
+  <!-- ① Bot Control -->
+  <div class="card">
+    <div class="card-header">
+      <div class="card-icon red">🤖</div>
+      <div>
+        <div class="card-title">Auto Poster Bot</div>
+        <div class="card-sub">Monitors YouTube channel · posts to TikTok</div>
+      </div>
+      <div style="margin-left:auto;" id="status-pill">
+        <span class="status-pill stopped"><span class="status-dot"></span> Stopped</span>
+      </div>
+    </div>
+    <div class="bot-row">
+      <button class="btn btn-start" onclick="startBot()">▶ Start</button>
+      <button class="btn btn-stop" onclick="stopBot()">■ Stop</button>
+      <button class="btn btn-ghost btn-sm" onclick="refreshStatus()">↻ Refresh</button>
+    </div>
+    <hr class="divider">
+    <div class="log-wrap">
+      <div class="log-box" id="log-box">
+        <div class="log-entry"><span class="log-msg info">— Waiting for logs —</span></div>
+      </div>
+    </div>
+  </div>
+  <!-- ② Settings -->
+  <div class="card">
+    <div class="card-header">
+      <div class="card-icon purple">⚙️</div>
+      <div>
+        <div class="card-title">Settings</div>
+        <div class="card-sub">Channel ID · Cookie configuration</div>
+      </div>
+    </div>
+    <div class="section-tag">YouTube Channel</div>
+    <div class="field">
+      <label>Channel ID</label>
+      <input type="text" id="channel-id-input" placeholder="UCxxxxxxxxxxxxxxxxxxxxxxxx"
+             value="UCsgopUB269PWGYTXo-MXjpA">
+    </div>
+    <div class="channel-display" id="channel-preview">
+      Channel: <span id="channel-url-preview">https://youtube.com/channel/UCsgopUB269PWGYTXo-MXjpA</span>
+    </div>
+    <hr class="divider">
+    <div class="section-tag">TikTok Cookies</div>
+    <div class="field">
+      <label>cookies.txt content (Netscape or one-line format)</label>
+      <textarea id="cookie-text-input" placeholder="# Netscape HTTP Cookie File&#10;.tiktok.com	TRUE	/	FALSE	2147483647	sessionid	xxxxx&#10;&#10;— or one-line: —&#10;sessionid=xxx; msToken=xxx; tt_csrf_token=xxx"></textarea>
+    </div>
+    <div style="display:flex; align-items:center; gap:10px; flex-wrap:wrap;">
+      <button class="btn btn-purple btn-sm" onclick="saveSettings()">💾 Save Settings</button>
+      <span class="save-badge" id="save-badge">✓ Saved</span>
+    </div>
+    <div class="result-msg" id="settings-result"></div>
+  </div>
+  <!-- ③ Cookie Status -->
+  <div class="card">
+    <div class="card-header">
+      <div class="card-icon yellow">🍪</div>
+      <div>
+        <div class="card-title">Cookie Status</div>
+        <div class="card-sub">TikTok session validation</div>
+      </div>
+      <button class="btn btn-ghost btn-sm" style="margin-left:auto;" onclick="checkCookie()">🔍 Check</button>
     </div>
+    <div class="cookie-grid" id="cookie-chips">
+      <span class="chip neutral">Loading...</span>
+    </div>
+    <div class="total-keys" id="cookie-total"></div>
+  </div>
+  <!-- ④ Upload -->
+  <div class="card">
+    <div class="card-header">
+      <div class="card-icon cyan">📤</div>
+      <div>
+        <div class="card-title">Manual Upload</div>
+        <div class="card-sub">Upload directly to TikTok</div>
+      </div>
     </div>
+    <div class="tabs">
+      <div class="tab active" onclick="switchTab('url')">🔗 By URL</div>
+      <div class="tab" onclick="switchTab('file')">📁 By File</div>
+    </div>
+    <!-- URL tab -->
+    <div class="tab-panel active" id="tab-url">
+      <div class="row">
+        <div class="field">
+          <label>YouTube / Video URL</label>
+          <input type="text" id="manual-url" placeholder="https://youtube.com/watch?v=...">
+        </div>
+        <div class="field">
+          <label>Quality</label>
+          <select id="manual-quality">
             <option value="1080">1080p</option>
             <option value="720" selected>720p</option>
             <option value="480">480p</option>
+          </select>
+        </div>
+      </div>
+      <div class="field">
+        <label>Caption / Title</label>
+        <input type="text" id="manual-title" placeholder="Video title for TikTok caption">
+      </div>
+      <button class="btn btn-cyan" onclick="manualUpload()">⬆ Download & Upload</button>
+      <div class="result-msg" id="url-result"></div>
     </div>
+    <!-- File tab -->
+    <div class="tab-panel" id="tab-file">
+      <div class="dropzone" id="dropzone" onclick="document.getElementById('file-input').click()"
+           ondragover="dzDragOver(event)" ondragleave="dzDragLeave()" ondrop="dzDrop(event)">
+        <input type="file" id="file-input" accept="video/mp4,video/*" onchange="dzFileChosen()">
+        <div class="dz-icon">🎞</div>
+        <div class="dz-text">Click or drag & drop video file</div>
+        <div class="dz-file" id="dz-name"></div>
+      </div>
+      <div class="field">
+        <label>Caption / Title</label>
+        <input type="text" id="file-title" placeholder="Video title for TikTok caption">
+      </div>
+      <button class="btn btn-cyan" onclick="manualUploadFile()">⬆ Upload to TikTok</button>
+      <div class="result-msg" id="file-result"></div>
     </div>
+  </div>
+</div><!-- /wrap -->
+<script>
+// ── Tab switch ──
+function switchTab(t) {
+  document.querySelectorAll('.tab').forEach((el,i) => {
+    el.classList.toggle('active', (t==='url'?0:1)===i);
+  });
+  document.getElementById('tab-url').classList.toggle('active', t==='url');
+  document.getElementById('tab-file').classList.toggle('active', t==='file');
+}
+// ── Channel ID preview ──
+document.getElementById('channel-id-input').addEventListener('input', function() {
+  const id = this.value.trim();
+  document.getElementById('channel-url-preview').textContent =
+    id ? `https://youtube.com/channel/${id}` : '—';
+});
+// ── Dropzone ──
+function dzDragOver(e) { e.preventDefault(); document.getElementById('dropzone').classList.add('drag'); }
+function dzDragLeave() { document.getElementById('dropzone').classList.remove('drag'); }
+function dzDrop(e) {
+  e.preventDefault();
+  dzDragLeave();
+  const f = e.dataTransfer.files[0];
+  if (f) { document.getElementById('file-input').files = e.dataTransfer.files; dzFileChosen(); }
+}
+function dzFileChosen() {
+  const f = document.getElementById('file-input').files[0];
+  document.getElementById('dz-name').textContent = f ? `📎 ${f.name}` : '';
+}
+// ── Log renderer ──
+function renderLogs(logs) {
+  const box = document.getElementById('log-box');
+  if (!logs || !logs.length) {
+    box.innerHTML = '<div class="log-entry"><span class="log-msg info">— No logs yet —</span></div>';
+    return;
+  }
+  box.innerHTML = logs.map(l => {
+    const m = l.match(/^\[(\d+:\d+:\d+)\]\s*(.*)$/);
+    const time = m ? m[1] : '';
+    const msg  = m ? m[2] : l;
+    let cls = 'log-msg';
+    if (/✅|success|upload/.test(msg)) cls += ' ok';
+    else if (/❌|error|fail/i.test(msg)) cls += ' err';
+    else if (/📌|📹|▶|started|detected/i.test(msg)) cls += ' info';
+    else if (/⚠️|warn|timeout/i.test(msg)) cls += ' warn';
+    return `<div class="log-entry"><span class="log-time">${escHtml(time)}</span><span class="${cls}">${escHtml(msg)}</span></div>`;
+  }).join('');
+  box.scrollTop = box.scrollHeight;
+}
+// ── Status ──
+async function refreshStatus() {
+  try {
+    const d = await (await fetch('/api/bot/status')).json();
+    const pill = document.getElementById('status-pill');
+    if (d.running) {
+      pill.innerHTML = '<span class="status-pill running"><span class="status-dot pulse"></span> Running</span>';
+    } else {
+      pill.innerHTML = '<span class="status-pill stopped"><span class="status-dot"></span> Stopped</span>';
+    }
+    renderLogs(d.logs);
+  } catch(e) {
+    document.getElementById('conn-badge').textContent = '● OFFLINE';
+    document.getElementById('conn-badge').style.color = 'var(--accent)';
+    document.getElementById('conn-badge').style.borderColor = 'rgba(255,45,85,0.3)';
+  }
+}
+// ── Bot controls ──
+async function startBot() {
+  const d = await (await fetch('/api/bot/start', {method:'POST'})).json();
+  showToast(d.msg);
+  refreshStatus();
+}
+async function stopBot() {
+  const d = await (await fetch('/api/bot/stop', {method:'POST'})).json();
+  showToast(d.msg);
+  refreshStatus();
+}
+// ── Cookie check ──
+async function checkCookie() {
+  const d = await (await fetch('/api/cookie/check')).json();
+  const chips = [
+    { key: 'sessionid', ok: d.has_sessionid },
+    { key: 'msToken',   ok: d.has_msToken   },
+    { key: 'csrf',      ok: d.has_csrf       },
+  ];
+  document.getElementById('cookie-chips').innerHTML = chips.map(c =>
+    `<span class="chip ${c.ok?'ok':'bad'}">${c.ok?'✓':'✗'} ${c.key}</span>`
+  ).join('');
+  document.getElementById('cookie-total').innerHTML =
+    `Total keys loaded: <b>${d.total_keys}</b>`;
+}
+// ── Save settings ──
+async function saveSettings() {
+  const channelId = document.getElementById('channel-id-input').value.trim();
+  const cookieTxt = document.getElementById('cookie-text-input').value.trim();
+  const el = document.getElementById('settings-result');
+  if (!channelId && !cookieTxt) {
+    setResult(el, '⚠ Nothing to save', 'err'); return;
+  }
+  el.innerHTML = '<span class="spin"></span> Saving...';
+  el.className = 'result-msg loading';
+  try {
+    const res = await fetch('/api/settings/save', {
+      method: 'POST',
+      headers: {'Content-Type': 'application/json'},
+      body: JSON.stringify({ channel_id: channelId, cookie_txt: cookieTxt })
+    });
+    const d = await res.json();
+    setResult(el, d.ok ? '✓ ' + d.msg : '✗ ' + d.msg, d.ok ? 'ok' : 'err');
+    if (d.ok) {
+      const badge = document.getElementById('save-badge');
+      badge.classList.add('show');
+      setTimeout(() => badge.classList.remove('show'), 2500);
+      if (cookieTxt) setTimeout(checkCookie, 500);
+    }
+  } catch(e) {
+    setResult(el, '✗ Request failed: ' + e, 'err');
+  }
+}
+// ── Manual URL upload ──
+async function manualUpload() {
+  const url     = document.getElementById('manual-url').value.trim();
+  const title   = document.getElementById('manual-title').value.trim();
+  const quality = document.getElementById('manual-quality').value;
+  const el = document.getElementById('url-result');
+  if (!url || !title) { setResult(el, '⚠ URL နဲ့ Title ထည့်ပါ', 'err'); return; }
+  el.innerHTML = '<span class="spin"></span> Downloading & uploading...';
+  el.className = 'result-msg loading';
+  try {
+    const d = await (await fetch('/api/upload/manual', {
+      method:'POST', headers:{'Content-Type':'application/json'},
+      body: JSON.stringify({url, title, quality})
+    })).json();
+    setResult(el, (d.ok?'✓ ':'✗ ') + d.msg, d.ok?'ok':'err');
+  } catch(e) { setResult(el, '✗ ' + e, 'err'); }
+  refreshStatus();
+}
+// ── Manual file upload ──
+async function manualUploadFile() {
+  const file  = document.getElementById('file-input').files[0];
+  const title = document.getElementById('file-title').value.trim();
+  const el = document.getElementById('file-result');
+  if (!file || !title) { setResult(el, '⚠ File ရွေးပြီး Title ထည့်ပါ', 'err'); return; }
+  el.innerHTML = '<span class="spin"></span> Uploading...';
+  el.className = 'result-msg loading';
+  const fd = new FormData();
+  fd.append('video', file);
+  fd.append('title', title);
+  try {
+    const d = await (await fetch('/api/upload/file', {method:'POST', body:fd})).json();
+    setResult(el, (d.ok?'✓ ':'✗ ') + d.msg, d.ok?'ok':'err');
+  } catch(e) { setResult(el, '✗ ' + e, 'err'); }
+  refreshStatus();
+}
+// ── Helpers ──
+function setResult(el, msg, cls) {
+  el.textContent = msg;
+  el.className = 'result-msg ' + cls;
+}
+function escHtml(s) {
+  const d = document.createElement('div');
+  d.textContent = s; return d.innerHTML;
+}
+function showToast(msg) {
+  // simple alert fallback
+  const t = document.createElement('div');
+  t.textContent = msg;
+  Object.assign(t.style, {
+    position:'fixed', bottom:'24px', right:'24px', zIndex:999,
+    background:'#1a1a2e', border:'1px solid var(--border)',
+    color:'var(--text)', fontFamily:'var(--font-mono)',
+    fontSize:'12px', padding:'10px 18px', borderRadius:'8px',
+    boxShadow:'0 4px 24px rgba(0,0,0,0.5)',
+    animation:'fadeUp 0.3s ease'
+  });
+  document.body.appendChild(t);
+  setTimeout(() => t.remove(), 3000);
+}
+// ── Init ──
+checkCookie();
+refreshStatus();
+setInterval(refreshStatus, 5000);
+</script>
 </body>
 </html>
 '''
+if __name__ == '__main__':    app.run(host='0.0.0.0', port=7860, debug=False)