'use client'; import { useState, useEffect } from 'react'; import axios from 'axios'; import Link from 'next/link'; import IconArrowWaveLeftUp from '@/components/icon/icon-arrow-wave-left-up'; import IconRefresh from '@/components/icon/icon-refresh'; import IconCopy from '@/components/icon/icon-copy'; import IconDownload from '@/components/icon/icon-download'; import Loading from '@/components/layouts/loading'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; const BlogGenerator = () => { const [message, setMessage] = useState(''); const [loading, setLoading] = useState(false); const [blogData, setBlogData] = useState(null); const [error, setError] = useState(''); const [recentBlogs, setRecentBlogs] = useState([]); const [selectedEngine, setEngine] = useState('domainnest'); useEffect(() => { fetchRecentBlogs(); }, [message]); const fetchRecentBlogs = async () => { try { const { data } = await axios.get(`http://localhost:3020/api/blog/recent`); if (data.ok) { setRecentBlogs(data.data); } } catch (err) { console.error('Error fetching recent blogs:', err); } }; const handleGenerate = async () => { if (!message) return setError('Please enter a message or topic'); setLoading(true); setError(''); setBlogData(null); try { console.log("Calling local LLM proxy..."); const fullPrompt = `Write a detailed, informative, and engaging blog post based on the given blog title. TITLE: ${message} CRITICAL FORMAT RULES: - Output ONLY pure HTML - Use

for the main title (exact blog title) - Use

and

headings that are UNIQUE and CONTEXTUAL to the title - Do NOT use generic headings like: "What is", "Benefits", "Key Features", "Conclusion" - Every heading must be creatively rewritten to match the topic and title - Use

for all paragraphs - Do NOT use markdown - Do NOT include explanations outside HTML - Do NOT include , , or tags CONTENT STRUCTURE (TITLE-AWARE): 1.

Exact blog title 2. Introduction explaining the topic and its significance 3.

Origin, background, or story related specifically to the title 4.

Rise, impact, or importance of the subject in its field 5.

Unique strengths, personality traits, skills, or defining qualities - Use

subheadings where relevant 6.

Career highlights, achievements, or real-world examples 7.

Lessons, insights, or inspiration drawn from the subject 8.

Criticism, challenges, or controversies (if applicable) 9.

Future direction, growth, or evolving trends related to the title 10.

A creatively worded closing section summarizing the journey and legacy (Do NOT use the word "Conclusion") SEO & QUALITY RULES: - Minimum 1000 words - Naturally include the main keyword (blog title) 3–5 times - Maintain a human, journalistic, professional tone - Avoid robotic or repetitive phrasing - Headings must feel editorial, not template-based OUTPUT: - Return ONLY the HTML content`; // Calling the internal Next.js API route we just created const { data } = await axios.post('/api/llm', { message: fullPrompt, mode: "extreme" }); if (data && data.ok) { const reply = data.reply; // Constructing the blog result entirely in the frontend const mockBlog = { _id: 'instant-' + Date.now(), title: message.substring(0, 100), content: reply, metaTitle: message.substring(0, 60), metaDescription: reply.substring(0, 160).replace(/\n/g, ' '), focusKeyword: "Instant AI", seoScore: 90, readabilityScore: 85, // Showing a low Human probability score (AI content) aiDetectionScore: Math.floor(Math.random() * 20) + 5, // Random score between 5% and 25% imagePrompts: [`Professional header for ${message}`], seoDetails: ["Direct frontend-based generation"], createdAt: new Date().toISOString() }; setBlogData(mockBlog); // Optional: Sync with backend for history try { await axios.post('http://localhost:3020/api/blog/save-raw', { title: mockBlog.title, content: mockBlog.content, topic: message }); fetchRecentBlogs(); } catch (e) { console.log("Could not save to history, but showing result."); } } else { setError(data?.error || 'Failed to generate content from DomainNest'); } } catch (err: any) { console.error("Generation Error:", err.response?.data || err.message); setError(err.response?.data?.error || err.message || 'Service is currently unavailable'); } finally { setLoading(false); } }; const copyToClipboard = (text: string) => { navigator.clipboard.writeText(text); alert('Copied to clipboard!'); }; return (
{/* Header Section */}
One Click Expert Content
AI Blog Generator

Transform any website URL into an SEO-optimized, human-readable blog post in seconds.