Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Bloggig - AI Blog Writing Agent</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com" /> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> | |
| <link | |
| href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" | |
| rel="stylesheet" | |
| /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" | |
| /> | |
| <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> | |
| <style> | |
| :root { | |
| --bg-dark: #0f1117; | |
| --sidebar-bg: #161922; | |
| --accent: #6366f1; | |
| --accent-hover: #4f46e5; | |
| --text-primary: #f8fafc; | |
| --text-secondary: #94a3b8; | |
| --glass-bg: rgba(255, 255, 255, 0.03); | |
| --border: rgba(255, 255, 255, 0.1); | |
| --card-bg: #1e293b; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: "Inter", sans-serif; | |
| } | |
| body { | |
| background-color: var(--bg-dark); | |
| color: var(--text-primary); | |
| height: 100vh; | |
| display: flex; | |
| overflow: hidden; | |
| } | |
| /* Sidebar Styles */ | |
| aside { | |
| width: 300px; | |
| background-color: var(--sidebar-bg); | |
| border-right: 1px solid var(--border); | |
| display: flex; | |
| flex-direction: column; | |
| padding: 1.5rem; | |
| flex-shrink: 0; | |
| transition: transform 0.3s ease; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 2rem; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.5rem; | |
| color: var(--accent); | |
| } | |
| .new-chat-btn { | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| padding: 0.8rem; | |
| border-radius: 0.5rem; | |
| cursor: pointer; | |
| font-weight: 600; | |
| margin-bottom: 1.5rem; | |
| transition: all 0.2s; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 0.5rem; | |
| } | |
| .new-chat-btn:hover { | |
| background: var(--accent-hover); | |
| transform: translateY(-1px); | |
| } | |
| .history-list { | |
| flex: 1; | |
| overflow-y: auto; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 0.5rem; | |
| } | |
| .history-item { | |
| padding: 0.75rem; | |
| border-radius: 0.4rem; | |
| cursor: pointer; | |
| transition: background 0.2s; | |
| font-size: 0.9rem; | |
| color: var(--text-secondary); | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| border: 1px solid transparent; | |
| } | |
| .history-item:hover { | |
| background: var(--glass-bg); | |
| color: var(--text-primary); | |
| border-color: var(--border); | |
| } | |
| .history-item.active { | |
| background: rgba(99, 102, 241, 0.15); | |
| color: var(--accent); | |
| border-color: rgba(99, 102, 241, 0.3); | |
| } | |
| /* Main Content Styles */ | |
| main { | |
| flex: 1; | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| background: radial-gradient( | |
| circle at bottom right, | |
| rgba(99, 102, 241, 0.05), | |
| transparent | |
| ); | |
| } | |
| header { | |
| height: 60px; | |
| border-bottom: 1px solid var(--border); | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 0 2rem; | |
| background: rgba(15, 17, 23, 0.8); | |
| backdrop-filter: blur(8px); | |
| z-index: 10; | |
| } | |
| .blog-actions { | |
| display: flex; | |
| gap: 1rem; | |
| } | |
| .btn-icon { | |
| background: transparent; | |
| border: 1px solid var(--border); | |
| color: var(--text-secondary); | |
| padding: 0.5rem; | |
| border-radius: 0.4rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.4rem; | |
| font-weight: 500; | |
| transition: all 0.2s; | |
| } | |
| .btn-icon:hover:not(:disabled) { | |
| background: var(--glass-bg); | |
| color: var(--text-primary); | |
| border-color: var(--text-secondary); | |
| } | |
| .btn-delete:hover:not(:disabled) { | |
| background: rgba(239, 68, 68, 0.1); | |
| color: #ef4444; | |
| border-color: rgba(239, 68, 68, 0.3); | |
| } | |
| /* Chat/Content Area */ | |
| #content-area { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 2rem; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .welcome-screen { | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; | |
| max-width: 600px; | |
| } | |
| .welcome-screen h1 { | |
| font-size: 2.5rem; | |
| margin-bottom: 1rem; | |
| background: linear-gradient(to right, #818cf8, #6366f1); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .welcome-screen p { | |
| color: var(--text-secondary); | |
| font-size: 1.1rem; | |
| line-height: 1.6; | |
| } | |
| /* Markdown Display */ | |
| .markdown-body { | |
| width: 100%; | |
| max-width: 800px; | |
| color: var(--text-primary); | |
| line-height: 1.7; | |
| display: none; | |
| } | |
| .markdown-body h1, | |
| .markdown-body h2, | |
| .markdown-body h3 { | |
| margin-top: 2rem; | |
| margin-bottom: 1rem; | |
| color: white; | |
| } | |
| .markdown-body p { | |
| margin-bottom: 1rem; | |
| } | |
| .markdown-body img { | |
| max-width: 100%; | |
| border-radius: 0.8rem; | |
| margin: 2rem 0; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); | |
| } | |
| .markdown-body pre { | |
| background: #1e1e1e; | |
| padding: 1.5rem; | |
| border-radius: 0.8rem; | |
| overflow-x: auto; | |
| margin-bottom: 1.5rem; | |
| border: 1px solid var(--border); | |
| } | |
| /* Pipeline Progression (Console) */ | |
| #pipeline-status { | |
| width: 100%; | |
| max-width: 800px; | |
| background: #000; | |
| color: #10b981; | |
| font-family: "Courier New", Courier, monospace; | |
| padding: 1.5rem; | |
| border-radius: 0.8rem; | |
| margin-bottom: 2rem; | |
| font-size: 0.9rem; | |
| display: none; | |
| border: 1px solid #10b98133; | |
| max-height: 400px; | |
| overflow-y: auto; | |
| box-shadow: 0 0 20px rgba(16, 185, 129, 0.1); | |
| } | |
| .status-line { | |
| margin-bottom: 0.5rem; | |
| animation: fadeIn 0.3s ease-out; | |
| } | |
| @keyframes fadeIn { | |
| from { | |
| opacity: 0; | |
| transform: translateY(5px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| /* Input Area at the bottom */ | |
| .input-container { | |
| padding: 2rem; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .input-wrapper { | |
| max-width: 800px; | |
| width: 100%; | |
| position: relative; | |
| background: var(--glass-bg); | |
| border: 1px solid var(--border); | |
| border-radius: 1rem; | |
| padding: 0.5rem; | |
| display: flex; | |
| align-items: center; | |
| transition: all 0.3s; | |
| } | |
| .input-wrapper:focus-within { | |
| border-color: var(--accent); | |
| background: rgba(255, 255, 255, 0.05); | |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.1); | |
| } | |
| input { | |
| flex: 1; | |
| background: transparent; | |
| border: none; | |
| color: white; | |
| padding: 0.75rem 1rem; | |
| outline: none; | |
| font-size: 1rem; | |
| } | |
| .send-btn { | |
| background: var(--accent); | |
| color: white; | |
| border: none; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 0.5rem; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s; | |
| } | |
| .send-btn:hover { | |
| background: var(--accent-hover); | |
| } | |
| .send-btn:disabled { | |
| background: var(--text-secondary); | |
| cursor: not-allowed; | |
| opacity: 0.5; | |
| } | |
| /* Loading Spinner */ | |
| .spinner { | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top-color: white; | |
| animation: spin 0.8s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { | |
| transform: rotate(360deg); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <aside> | |
| <div class="logo"> | |
| <svg | |
| width="24" | |
| height="24" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| > | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> | |
| <polyline points="7 10 12 15 17 10" /> | |
| <line x1="12" y1="15" x2="12" y2="3" /> | |
| </svg> | |
| Bloggig | |
| </div> | |
| <button class="new-chat-btn" onclick="startNewBlog()"> | |
| <svg | |
| width="20" | |
| height="20" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| > | |
| <line x1="12" y1="5" x2="12" y2="19" /> | |
| <line x1="5" y1="12" x2="19" y2="12" /> | |
| </svg> | |
| New Blog | |
| </button> | |
| <div class="history-list" id="history-container"> | |
| <!-- Blogs will be loaded here --> | |
| </div> | |
| </aside> | |
| <main> | |
| <header> | |
| <div id="blog-title-display" style="font-weight: 600"> | |
| Blog Overview | |
| </div> | |
| <div class="blog-actions"> | |
| <button | |
| class="btn-icon" | |
| id="download-btn" | |
| onclick="downloadCurrentBlog()" | |
| disabled | |
| > | |
| <svg | |
| width="18" | |
| height="18" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| > | |
| <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" /> | |
| <polyline points="7 10 12 15 17 10" /> | |
| <line x1="12" y1="15" x2="12" y2="3" /> | |
| </svg> | |
| Download | |
| </button> | |
| <button | |
| class="btn-icon btn-delete" | |
| id="delete-btn" | |
| onclick="deleteCurrentBlog()" | |
| disabled | |
| > | |
| <svg | |
| width="18" | |
| height="18" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| > | |
| <polyline points="3 6 5 6 21 6" /> | |
| <path | |
| d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" | |
| /> | |
| <line x1="10" y1="11" x2="10" y2="17" /> | |
| <line x1="14" y1="11" x2="14" y2="17" /> | |
| </svg> | |
| Delete | |
| </button> | |
| </div> | |
| </header> | |
| <div id="content-area"> | |
| <div class="welcome-screen" id="welcome-screen"> | |
| <h1>Craft something amazing.</h1> | |
| <p> | |
| Welcome to Bloggig. Enter a topic below to start generating a | |
| high-quality, research-backed blog post with AI-generated visuals. | |
| </p> | |
| </div> | |
| <div id="pipeline-status"></div> | |
| <div class="markdown-body" id="blog-content"></div> | |
| </div> | |
| <div class="input-container"> | |
| <div class="input-wrapper"> | |
| <input | |
| type="text" | |
| id="topic-input" | |
| placeholder="Enter blog topic..." | |
| onkeypress="if (event.key === 'Enter') startGeneration();" | |
| /> | |
| <button | |
| class="send-btn" | |
| id="generate-btn" | |
| onclick="startGeneration()" | |
| > | |
| <svg | |
| id="send-icon" | |
| width="20" | |
| height="20" | |
| viewBox="0 0 24 24" | |
| fill="none" | |
| stroke="currentColor" | |
| stroke-width="2" | |
| stroke-linecap="round" | |
| stroke-linejoin="round" | |
| > | |
| <line x1="22" y1="2" x2="11" y2="13" /> | |
| <polyline points="22 2 15 22 11 13 2 9 22 2" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </main> | |
| <script> | |
| let currentBlogData = null; | |
| let isGenerating = false; | |
| // Initialize marked and highlight.js | |
| marked.setOptions({ | |
| highlight: function (code, lang) { | |
| if (lang && hljs.getLanguage(lang)) { | |
| return hljs.highlight(code, { language: lang }).value; | |
| } | |
| return hljs.highlightAuto(code).value; | |
| }, | |
| breaks: true, | |
| }); | |
| async function loadHistory() { | |
| const res = await fetch("/blogs"); | |
| const blogs = await res.json(); | |
| const container = document.getElementById("history-container"); | |
| container.innerHTML = ""; | |
| blogs.forEach((title) => { | |
| const div = document.createElement("div"); | |
| div.className = "history-item"; | |
| div.textContent = title; | |
| div.onclick = () => loadBlog(title); | |
| container.appendChild(div); | |
| }); | |
| } | |
| async function loadBlog(title) { | |
| if (isGenerating) return; | |
| const res = await fetch(`/blog/${encodeURIComponent(title)}`); | |
| if (!res.ok) return; | |
| const data = await res.json(); | |
| currentBlogData = { | |
| topic: title, | |
| plan: { blog_title: title }, | |
| final: data.content, | |
| }; | |
| displayBlog(data.content); | |
| document.getElementById("blog-title-display").textContent = title; | |
| // Mark as active in sidebar | |
| document.querySelectorAll(".history-item").forEach((item) => { | |
| item.classList.toggle("active", item.textContent === title); | |
| }); | |
| // Enable actions | |
| document.getElementById("download-btn").disabled = false; | |
| document.getElementById("delete-btn").disabled = false; | |
| } | |
| function displayBlog(markdown) { | |
| const blogContent = document.getElementById("blog-content"); | |
| const welcome = document.getElementById("welcome-screen"); | |
| const pipeline = document.getElementById("pipeline-status"); | |
| welcome.style.display = "none"; | |
| pipeline.style.display = "none"; | |
| blogContent.style.display = "block"; | |
| // Rewrite image paths to use the /images static mount if they are internal | |
| const processedMd = markdown.replace(/\(\.\.\/images\//g, "(/images/"); | |
| blogContent.innerHTML = marked.parse(processedMd); | |
| hljs.highlightAll(); | |
| } | |
| function startNewBlog() { | |
| if (isGenerating) return; | |
| currentBlogData = null; | |
| document.getElementById("welcome-screen").style.display = "flex"; | |
| document.getElementById("blog-content").style.display = "none"; | |
| document.getElementById("pipeline-status").style.display = "none"; | |
| document.getElementById("blog-title-display").textContent = | |
| "Blog Overview"; | |
| document.getElementById("topic-input").value = ""; | |
| document.getElementById("download-btn").disabled = true; | |
| document.getElementById("delete-btn").disabled = true; | |
| document.querySelectorAll(".history-item").forEach((item) => { | |
| item.classList.remove("active"); | |
| }); | |
| } | |
| function appendStatus(msg) { | |
| const pipeline = document.getElementById("pipeline-status"); | |
| pipeline.style.display = "block"; | |
| const line = document.createElement("div"); | |
| line.className = "status-line"; | |
| line.innerHTML = `<span style="color: #6ee7b7;">[${new Date().toLocaleTimeString()}]</span> ${msg}`; | |
| pipeline.appendChild(line); | |
| pipeline.scrollTop = pipeline.scrollHeight; | |
| } | |
| function startGeneration() { | |
| const topicInput = document.getElementById("topic-input"); | |
| const topic = topicInput.value.trim(); | |
| if (!topic || isGenerating) return; | |
| isGenerating = true; | |
| setLoading(true); | |
| document.getElementById("welcome-screen").style.display = "none"; | |
| document.getElementById("blog-content").style.display = "none"; | |
| const pipeline = document.getElementById("pipeline-status"); | |
| pipeline.innerHTML = ""; | |
| pipeline.style.display = "block"; | |
| appendStatus(`Initializing generation for topic: "${topic}"...`); | |
| const protocol = window.location.protocol === "https:" ? "wss:" : "ws:"; | |
| const ws = new WebSocket( | |
| `${protocol}//${window.location.host}/ws/generate_blog`, | |
| ); | |
| ws.onopen = () => { | |
| ws.send(JSON.stringify({ topic })); | |
| }; | |
| ws.onmessage = (event) => { | |
| const data = JSON.parse(event.data); | |
| if (data.status === "completed") { | |
| appendStatus("Done! Finalizing blog post..."); | |
| } else if (data.final) { | |
| // This is the final state | |
| currentBlogData = data; | |
| displayBlog(data.final); | |
| loadHistory(); // Refresh history | |
| setLoading(false); | |
| isGenerating = false; | |
| document.getElementById("download-btn").disabled = false; | |
| document.getElementById("delete-btn").disabled = false; | |
| if (data.plan && data.plan.blog_title) { | |
| document.getElementById("blog-title-display").textContent = | |
| data.plan.blog_title; | |
| } | |
| } else if (data.error) { | |
| appendStatus( | |
| `<span style="color: #f87171;">ERROR: ${data.error}</span>`, | |
| ); | |
| setLoading(false); | |
| isGenerating = false; | |
| } else { | |
| // Try to infer what happened from the state keys | |
| if (data.sections && data.sections.length > 0) { | |
| const lastSection = data.sections[data.sections.length - 1]; | |
| appendStatus( | |
| `Generated section: ${lastSection[1].split("\n")[0].replace("## ", "")}`, | |
| ); | |
| } else if (data.plan) { | |
| appendStatus( | |
| `Plan created: "${data.plan.blog_title}" with ${data.plan.tasks.length} sections.`, | |
| ); | |
| } else if (data.queries && data.queries.length > 0) { | |
| appendStatus(`Researching: ${data.queries.join(", ")}`); | |
| } | |
| } | |
| }; | |
| ws.onerror = (err) => { | |
| appendStatus( | |
| `<span style="color: #f87171;">Connection error.</span>`, | |
| ); | |
| setLoading(false); | |
| isGenerating = false; | |
| }; | |
| ws.onclose = () => { | |
| if (isGenerating) { | |
| appendStatus("Connection closed."); | |
| setLoading(false); | |
| isGenerating = false; | |
| } | |
| }; | |
| } | |
| function setLoading(loading) { | |
| const btn = document.getElementById("generate-btn"); | |
| const icon = document.getElementById("send-icon"); | |
| if (loading) { | |
| btn.disabled = true; | |
| btn.innerHTML = '<div class="spinner"></div>'; | |
| } else { | |
| btn.disabled = false; | |
| btn.innerHTML = `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="22" y1="2" x2="11" y2="13"/><polyline points="22 2 15 22 11 13 2 9 22 2"/></svg>`; | |
| } | |
| } | |
| async function deleteCurrentBlog() { | |
| if ( | |
| !currentBlogData || | |
| !confirm( | |
| "Are you sure you want to delete this blog and all related images?", | |
| ) | |
| ) | |
| return; | |
| const res = await fetch("/delete_blog", { | |
| method: "DELETE", | |
| headers: { "Content-Type": "application/json" }, | |
| body: JSON.stringify({ data: currentBlogData }), | |
| }); | |
| if (res.ok) { | |
| startNewBlog(); | |
| loadHistory(); | |
| } else { | |
| alert("Failed to delete blog."); | |
| } | |
| } | |
| function downloadCurrentBlog() { | |
| if (!currentBlogData) return; | |
| const title = currentBlogData.plan | |
| ? currentBlogData.plan.blog_title | |
| : currentBlogData.topic; | |
| window.location.href = `/download_blog/${encodeURIComponent(title)}`; | |
| } | |
| // Initial history load | |
| loadHistory(); | |
| </script> | |
| </body> | |
| </html> | |