Added image generation to blog writer
This commit is contained in:
ajaysi
576
frontend/src/components/BlogWriter/BlogWriterPhasesSection.tsx
Normal file
576
frontend/src/components/BlogWriter/BlogWriterPhasesSection.tsx
Normal file
@@ -0,0 +1,576 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Container, Grid, Card, CardContent, Typography, Box, Stack, Chip } from '@mui/material';
|
||||
import { CheckCircle, AutoAwesome } from '@mui/icons-material';
|
||||
|
||||
interface PhaseFeature {
|
||||
title: string;
|
||||
description: string;
|
||||
details: string[];
|
||||
imagePlaceholder: string;
|
||||
}
|
||||
|
||||
interface BlogPhase {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: string;
|
||||
shortDescription: string;
|
||||
features: PhaseFeature[];
|
||||
technicalDetails: {
|
||||
aiModel: string;
|
||||
promptType: string;
|
||||
outputFormat: string;
|
||||
integration: string;
|
||||
};
|
||||
videoPlaceholder: string;
|
||||
}
|
||||
|
||||
const BlogWriterPhasesSection: React.FC = () => {
|
||||
const [activePhase, setActivePhase] = useState<number | null>(null);
|
||||
|
||||
const phases: BlogPhase[] = [
|
||||
{
|
||||
id: 'research',
|
||||
name: 'Research & Strategy',
|
||||
icon: '🔍',
|
||||
shortDescription: 'AI-powered comprehensive research with Google Search grounding, competitor analysis, and content gap identification',
|
||||
features: [
|
||||
{
|
||||
title: 'Google Search Grounding',
|
||||
description: 'Real-time web research using Gemini\'s native Google Search integration',
|
||||
details: [
|
||||
'Single API call for comprehensive research',
|
||||
'Live web data from credible sources',
|
||||
'Automatic source extraction and citation',
|
||||
'Current trends and 2024-2025 insights',
|
||||
'Market analysis and forecasts'
|
||||
],
|
||||
imagePlaceholder: '/images/research-google-grounding.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Competitor Analysis',
|
||||
description: 'Identify top players and content opportunities in your niche',
|
||||
details: [
|
||||
'Top competitor content analysis',
|
||||
'Content gap identification',
|
||||
'Unique angle discovery',
|
||||
'Market positioning insights',
|
||||
'Competitive advantage opportunities'
|
||||
],
|
||||
imagePlaceholder: '/images/research-competitor.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Keyword Intelligence',
|
||||
description: 'Comprehensive keyword analysis with SEO opportunities',
|
||||
details: [
|
||||
'Primary, secondary, and long-tail keyword identification',
|
||||
'Search volume and competition analysis',
|
||||
'Keyword clustering and grouping',
|
||||
'Content optimization suggestions',
|
||||
'Target audience keyword mapping'
|
||||
],
|
||||
imagePlaceholder: '/images/research-keywords.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Content Angle Generation',
|
||||
description: 'AI-generated compelling content angles for maximum engagement',
|
||||
details: [
|
||||
'5 unique content angle suggestions',
|
||||
'Trending topic identification',
|
||||
'Audience pain point mapping',
|
||||
'Viral potential assessment',
|
||||
'Expert opinion synthesis'
|
||||
],
|
||||
imagePlaceholder: '/images/research-angles.jpg'
|
||||
}
|
||||
],
|
||||
technicalDetails: {
|
||||
aiModel: 'Gemini Pro with Google Search Grounding',
|
||||
promptType: 'Comprehensive research prompt',
|
||||
outputFormat: 'Structured JSON with sources, keywords, trends, competitors',
|
||||
integration: 'GeminiGroundedProvider via research_service.py'
|
||||
},
|
||||
videoPlaceholder: '/videos/phase1-research.mp4'
|
||||
},
|
||||
{
|
||||
id: 'outline',
|
||||
name: 'Intelligent Outline',
|
||||
icon: '📝',
|
||||
shortDescription: 'AI-generated outlines with source mapping, grounding insights, and optimization recommendations',
|
||||
features: [
|
||||
{
|
||||
title: 'AI Outline Generation',
|
||||
description: 'Comprehensive outline based on research with SEO optimization',
|
||||
details: [
|
||||
'Section-by-section breakdown',
|
||||
'Subheadings and key points',
|
||||
'Target word counts per section',
|
||||
'Logical flow and progression',
|
||||
'SEO-optimized structure'
|
||||
],
|
||||
imagePlaceholder: '/images/outline-generation.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Source Mapping & Grounding',
|
||||
description: 'Connect each section to research sources with citations',
|
||||
details: [
|
||||
'Automatic source-to-section mapping',
|
||||
'Grounding support scores',
|
||||
'Citation suggestions',
|
||||
'Source credibility ratings',
|
||||
'Reference verification'
|
||||
],
|
||||
imagePlaceholder: '/images/outline-grounding.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Interactive Refinement',
|
||||
description: 'Human-in-the-loop editing with AI assistance',
|
||||
details: [
|
||||
'Add, remove, merge sections',
|
||||
'Reorder and restructure',
|
||||
'AI enhancement suggestions',
|
||||
'Custom instructions support',
|
||||
'Multiple outline versions'
|
||||
],
|
||||
imagePlaceholder: '/images/outline-refine.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Title Generation',
|
||||
description: 'Multiple SEO-optimized title options',
|
||||
details: [
|
||||
'AI-generated title variations',
|
||||
'SEO score per title',
|
||||
'Engagement potential analysis',
|
||||
'Keyword integration',
|
||||
'Click-through optimization'
|
||||
],
|
||||
imagePlaceholder: '/images/outline-titles.jpg'
|
||||
}
|
||||
],
|
||||
technicalDetails: {
|
||||
aiModel: 'Gemini Pro (provider-agnostic via llm_text_gen)',
|
||||
promptType: 'Structured outline prompt with research context',
|
||||
outputFormat: 'JSON outline with sections, headings, key_points, references',
|
||||
integration: 'OutlineService via parallel_processor.py'
|
||||
},
|
||||
videoPlaceholder: '/videos/phase2-outline.mp4'
|
||||
},
|
||||
{
|
||||
id: 'content',
|
||||
name: 'Content Generation',
|
||||
icon: '✨',
|
||||
shortDescription: 'Section-by-section content generation with SEO optimization, context memory, and engagement improvements',
|
||||
features: [
|
||||
{
|
||||
title: 'Smart Content Generation',
|
||||
description: 'AI-powered section writing with context awareness',
|
||||
details: [
|
||||
'Section-by-section generation',
|
||||
'Context memory across sections',
|
||||
'Smooth transitions between sections',
|
||||
'Consistent tone and style',
|
||||
'Natural keyword integration'
|
||||
],
|
||||
imagePlaceholder: '/images/content-generation.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Continuity Analysis',
|
||||
description: 'Real-time flow and coherence monitoring',
|
||||
details: [
|
||||
'Narrative flow assessment',
|
||||
'Coherence scoring',
|
||||
'Transition quality analysis',
|
||||
'Tone consistency tracking',
|
||||
'Content quality metrics'
|
||||
],
|
||||
imagePlaceholder: '/images/content-continuity.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Source Integration',
|
||||
description: 'Automatic citation and source reference',
|
||||
details: [
|
||||
'Relevant URL selection',
|
||||
'Natural citation insertion',
|
||||
'Source attribution',
|
||||
'Evidence-backed content',
|
||||
'Reference management'
|
||||
],
|
||||
imagePlaceholder: '/images/content-sources.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Medium Blog Mode',
|
||||
description: 'Quick generation for Medium-style articles',
|
||||
details: [
|
||||
'Single-call full blog generation',
|
||||
'Medium-optimized formatting',
|
||||
'Engagement-focused structure',
|
||||
'SEO-ready output',
|
||||
'Fast turnaround option'
|
||||
],
|
||||
imagePlaceholder: '/images/content-medium.jpg'
|
||||
}
|
||||
],
|
||||
technicalDetails: {
|
||||
aiModel: 'Provider-agnostic (Gemini/HF via main_text_generation)',
|
||||
promptType: 'Context-aware section prompt with research',
|
||||
outputFormat: 'Markdown content with transitions and metrics',
|
||||
integration: 'EnhancedContentGenerator with ContextMemory'
|
||||
},
|
||||
videoPlaceholder: '/videos/phase3-content.mp4'
|
||||
},
|
||||
{
|
||||
id: 'seo',
|
||||
name: 'SEO Analysis',
|
||||
icon: '📈',
|
||||
shortDescription: 'Advanced SEO analysis with actionable recommendations and AI-powered optimization',
|
||||
features: [
|
||||
{
|
||||
title: 'Comprehensive SEO Scoring',
|
||||
description: 'Multi-dimensional SEO analysis across key factors',
|
||||
details: [
|
||||
'Overall SEO score (0-100)',
|
||||
'Structure optimization score',
|
||||
'Keyword optimization rating',
|
||||
'Readability assessment',
|
||||
'Quality metrics evaluation'
|
||||
],
|
||||
imagePlaceholder: '/images/seo-scoring.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Actionable Recommendations',
|
||||
description: 'AI-powered improvement suggestions',
|
||||
details: [
|
||||
'Priority-ranked fixes',
|
||||
'Specific text improvements',
|
||||
'Keyword density optimization',
|
||||
'Heading structure suggestions',
|
||||
'Content enhancement ideas'
|
||||
],
|
||||
imagePlaceholder: '/images/seo-recommendations.jpg'
|
||||
},
|
||||
{
|
||||
title: 'AI-Powered Content Refinement',
|
||||
description: 'Automatically apply SEO recommendations',
|
||||
details: [
|
||||
'Smart content rewriting',
|
||||
'Preserves original intent',
|
||||
'Natural keyword integration',
|
||||
'Readability improvement',
|
||||
'Structure optimization'
|
||||
],
|
||||
imagePlaceholder: '/images/seo-apply.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Keyword Analysis',
|
||||
description: 'Deep dive into keyword performance',
|
||||
details: [
|
||||
'Primary keyword density',
|
||||
'Semantic keyword usage',
|
||||
'Long-tail keyword opportunities',
|
||||
'Keyword distribution heatmap',
|
||||
'Optimization recommendations'
|
||||
],
|
||||
imagePlaceholder: '/images/seo-keywords.jpg'
|
||||
}
|
||||
],
|
||||
technicalDetails: {
|
||||
aiModel: 'Parallel non-AI analyzers + single AI call',
|
||||
promptType: 'Structured SEO analysis prompt',
|
||||
outputFormat: 'Comprehensive SEO report with scores and recommendations',
|
||||
integration: 'BlogContentSEOAnalyzer with parallel processing'
|
||||
},
|
||||
videoPlaceholder: '/videos/phase4-seo.mp4'
|
||||
},
|
||||
{
|
||||
id: 'metadata',
|
||||
name: 'SEO Metadata',
|
||||
icon: '🎯',
|
||||
shortDescription: 'Optimized metadata generation for titles, descriptions, Open Graph, Twitter cards, and structured data',
|
||||
features: [
|
||||
{
|
||||
title: 'Comprehensive Metadata',
|
||||
description: 'All-in-one SEO metadata generation',
|
||||
details: [
|
||||
'SEO-optimized title (50-60 chars)',
|
||||
'Meta description with CTA',
|
||||
'URL slug optimization',
|
||||
'Blog tags and categories',
|
||||
'Social hashtags'
|
||||
],
|
||||
imagePlaceholder: '/images/metadata-comprehensive.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Open Graph & Twitter Cards',
|
||||
description: 'Rich social media previews',
|
||||
details: [
|
||||
'OG title and description',
|
||||
'Twitter card optimization',
|
||||
'Image preview settings',
|
||||
'Social engagement boost',
|
||||
'Click-through optimization'
|
||||
],
|
||||
imagePlaceholder: '/images/metadata-social.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Structured Data',
|
||||
description: 'Schema.org markup for rich snippets',
|
||||
details: [
|
||||
'Article schema',
|
||||
'Organization markup',
|
||||
'Breadcrumb schema',
|
||||
'FAQ schema support',
|
||||
'Enhanced search results'
|
||||
],
|
||||
imagePlaceholder: '/images/metadata-schema.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Multi-Format Output',
|
||||
description: 'Ready-to-use metadata in all formats',
|
||||
details: [
|
||||
'HTML meta tags',
|
||||
'JSON-LD structured data',
|
||||
'WordPress export format',
|
||||
'Wix integration format',
|
||||
'One-click copy options'
|
||||
],
|
||||
imagePlaceholder: '/images/metadata-export.jpg'
|
||||
}
|
||||
],
|
||||
technicalDetails: {
|
||||
aiModel: 'Maximum 2 AI calls for comprehensive metadata',
|
||||
promptType: 'Personalized metadata prompt with context',
|
||||
outputFormat: 'Complete metadata package (title, desc, tags, schema)',
|
||||
integration: 'BlogSEOMetadataGenerator with optimization'
|
||||
},
|
||||
videoPlaceholder: '/videos/phase5-metadata.mp4'
|
||||
},
|
||||
{
|
||||
id: 'publish',
|
||||
name: 'Publish & Distribute',
|
||||
icon: '🚀',
|
||||
shortDescription: 'Direct publishing to WordPress, Wix, Medium, and other platforms with scheduling',
|
||||
features: [
|
||||
{
|
||||
title: 'Multi-Platform Publishing',
|
||||
description: 'Publish to multiple platforms simultaneously',
|
||||
details: [
|
||||
'WordPress direct publishing',
|
||||
'Wix blog integration',
|
||||
'Medium publishing',
|
||||
'Custom blog platforms',
|
||||
'API integrations'
|
||||
],
|
||||
imagePlaceholder: '/images/publish-platforms.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Content Scheduling',
|
||||
description: 'Schedule posts for optimal timing',
|
||||
details: [
|
||||
'Time-based scheduling',
|
||||
'Timezone management',
|
||||
'Bulk scheduling support',
|
||||
'Calendar integration',
|
||||
'Reminder notifications'
|
||||
],
|
||||
imagePlaceholder: '/images/publish-schedule.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Revision Management',
|
||||
description: 'Track and manage content versions',
|
||||
details: [
|
||||
'Version history',
|
||||
'Change tracking',
|
||||
'Rollback capabilities',
|
||||
'A/B testing support',
|
||||
'Performance comparison'
|
||||
],
|
||||
imagePlaceholder: '/images/publish-versions.jpg'
|
||||
},
|
||||
{
|
||||
title: 'Analytics Integration',
|
||||
description: 'Post-publish performance tracking',
|
||||
details: [
|
||||
'View count tracking',
|
||||
'Engagement metrics',
|
||||
'SEO performance',
|
||||
'Traffic analysis',
|
||||
'Conversion tracking'
|
||||
],
|
||||
imagePlaceholder: '/images/publish-analytics.jpg'
|
||||
}
|
||||
],
|
||||
technicalDetails: {
|
||||
aiModel: 'Platform-specific API integrations',
|
||||
promptType: 'N/A - publishing only',
|
||||
outputFormat: 'Published content with URL',
|
||||
integration: 'Platform APIs via Publisher component'
|
||||
},
|
||||
videoPlaceholder: '/videos/phase6-publish.mp4'
|
||||
}
|
||||
];
|
||||
|
||||
return (
|
||||
<Box sx={{ py: 8, bgcolor: 'background.paper' }}>
|
||||
<Container maxWidth="lg">
|
||||
{/* Section Title */}
|
||||
<Box sx={{ textAlign: 'center', mb: 6 }}>
|
||||
<Typography
|
||||
variant="h2"
|
||||
component="h2"
|
||||
sx={{
|
||||
fontSize: { xs: '2rem', md: '3rem' },
|
||||
fontWeight: 700,
|
||||
background: 'linear-gradient(135deg, #1976d2 0%, #9c27b0 100%)',
|
||||
WebkitBackgroundClip: 'text',
|
||||
WebkitTextFillColor: 'transparent',
|
||||
mb: 2
|
||||
}}
|
||||
>
|
||||
Complete AI Blog Writing Workflow
|
||||
</Typography>
|
||||
<Typography variant="h6" color="text.secondary" sx={{ maxWidth: '800px', mx: 'auto' }}>
|
||||
Six powerful phases that transform your ideas into SEO-optimized, engaging blog content
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Phase Cards */}
|
||||
<Grid container spacing={4}>
|
||||
{phases.map((phase, index) => (
|
||||
<Grid item xs={12} md={6} key={phase.id}>
|
||||
<Card
|
||||
sx={{
|
||||
height: '100%',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 0.3s ease',
|
||||
border: activePhase === index ? 2 : 1,
|
||||
borderColor: activePhase === index ? 'primary.main' : 'divider',
|
||||
'&:hover': {
|
||||
transform: 'translateY(-8px)',
|
||||
boxShadow: 6,
|
||||
}
|
||||
}}
|
||||
onClick={() => setActivePhase(activePhase === index ? null : index)}
|
||||
>
|
||||
<CardContent sx={{ p: 3 }}>
|
||||
<Stack direction="row" spacing={2} alignItems="flex-start" mb={2}>
|
||||
<Typography variant="h2" sx={{ fontSize: '3rem' }}>
|
||||
{phase.icon}
|
||||
</Typography>
|
||||
<Box flex={1}>
|
||||
<Typography variant="h5" fontWeight={600} gutterBottom>
|
||||
{phase.name}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{phase.shortDescription}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Chip
|
||||
label={`Phase ${index + 1}`}
|
||||
size="small"
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
{activePhase === index && (
|
||||
<Box sx={{ mt: 3, pt: 3, borderTop: 1, borderColor: 'divider' }}>
|
||||
{/* Video Placeholder */}
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
aspectRatio: '16/9',
|
||||
bgcolor: 'grey.200',
|
||||
borderRadius: 2,
|
||||
mb: 3,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
🎥 Video: {phase.videoPlaceholder}
|
||||
</Typography>
|
||||
</Box>
|
||||
|
||||
{/* Features Grid */}
|
||||
<Grid container spacing={2} mb={3}>
|
||||
{phase.features.map((feature, idx) => (
|
||||
<Grid item xs={12} sm={6} key={idx}>
|
||||
<Card variant="outlined" sx={{ p: 2, height: '100%' }}>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
aspectRatio: '4/3',
|
||||
bgcolor: 'grey.100',
|
||||
borderRadius: 1,
|
||||
mb: 2,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
📷 Image
|
||||
</Typography>
|
||||
</Box>
|
||||
<Typography variant="subtitle2" fontWeight={600} gutterBottom>
|
||||
{feature.title}
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary" mb={1}>
|
||||
{feature.description}
|
||||
</Typography>
|
||||
<Stack spacing={0.5}>
|
||||
{feature.details.slice(0, 3).map((detail, i) => (
|
||||
<Stack key={i} direction="row" spacing={1} alignItems="flex-start">
|
||||
<CheckCircle sx={{ fontSize: 16, color: 'success.main', mt: 0.5 }} />
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{detail}
|
||||
</Typography>
|
||||
</Stack>
|
||||
))}
|
||||
</Stack>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
|
||||
{/* Technical Details */}
|
||||
<Card variant="outlined" sx={{ bgcolor: 'grey.50', p: 2 }}>
|
||||
<Typography variant="subtitle2" fontWeight={600} mb={1} sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
|
||||
<AutoAwesome sx={{ fontSize: 18 }} />
|
||||
Technical Implementation
|
||||
</Typography>
|
||||
<Grid container spacing={2}>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="caption" fontWeight={600}>AI Model</Typography>
|
||||
<Typography variant="body2">{phase.technicalDetails.aiModel}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="caption" fontWeight={600}>Output Format</Typography>
|
||||
<Typography variant="body2">{phase.technicalDetails.outputFormat}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="caption" fontWeight={600}>Prompt Type</Typography>
|
||||
<Typography variant="body2">{phase.technicalDetails.promptType}</Typography>
|
||||
</Grid>
|
||||
<Grid item xs={12} sm={6}>
|
||||
<Typography variant="caption" fontWeight={600}>Integration</Typography>
|
||||
<Typography variant="body2" sx={{ fontFamily: 'monospace', fontSize: '0.85rem' }}>
|
||||
{phase.technicalDetails.integration}
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Card>
|
||||
</Box>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Grid>
|
||||
))}
|
||||
</Grid>
|
||||
</Container>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogWriterPhasesSection;
|
||||
|
||||
Reference in New Issue
Block a user