Michael Ikehi
c1a894ad50
Frontend (frontend/app.js): - Add textarea for improvement feedback - Add submit button with loading state - Handle API response and display improved content Backend (backend/copywriter.py): - Add improve_copy() method using Cohere API - Integrate retry mechanism for API calls Backend (backend/main.py): - Add /improve-content POST endpoint - Implement error handling and return improved content with metadata Testing: - Verified feedback submission flow - Confirmed improved content generation - Tested error scenarios and loading states
428 lines
23 KiB
HTML
428 lines
23 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Adriana James - Marketing Assistant AI</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
|
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
|
</head>
|
|
<body>
|
|
<div class="app-container">
|
|
<nav class="sidebar">
|
|
<div class="logo">
|
|
<h2>AJ</h2>
|
|
</div>
|
|
<ul class="menu">
|
|
<li class="active" data-page="generate"><i class="fas fa-magic"></i> Generate</li>
|
|
<li data-page="templates"><i class="fas fa-folder"></i> Templates</li>
|
|
<li data-page="history"><i class="fas fa-history"></i> History</li>
|
|
<li data-page="brand-style"><i class="fas fa-paint-brush"></i> Brand Style</li>
|
|
<li data-page="training"><i class="fas fa-graduation-cap"></i> Training</li>
|
|
</ul>
|
|
<div class="user-info">
|
|
<div class="user-avatar">
|
|
<img src="https://via.placeholder.com/50" alt="User Avatar">
|
|
</div>
|
|
<div class="user-name">Marketing Team</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="content">
|
|
<header>
|
|
<h1>Marketing Assistant AI</h1>
|
|
<div class="header-actions">
|
|
<button class="btn btn-secondary"><i class="fas fa-cog"></i> Settings</button>
|
|
<button class="btn btn-primary">Upgrade</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Generate Content Page -->
|
|
<section id="generate-page" class="page active">
|
|
<div class="page-header">
|
|
<h2>Generate Marketing Content</h2>
|
|
<p>Create high-quality marketing copy aligned with Adriana James' brand voice.</p>
|
|
</div>
|
|
|
|
<div class="generation-form">
|
|
<div class="form-group">
|
|
<label for="prompt">What would you like to create?</label>
|
|
<textarea id="prompt" placeholder="e.g., Generate an email campaign for a product launch" rows="4"></textarea>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="content-type">Content Type</label>
|
|
<select id="content-type">
|
|
<option value="">Select Type</option>
|
|
<option value="website_copy">Website Copy</option>
|
|
<option value="email">Email Campaign</option>
|
|
<option value="social_media">Social Media Post</option>
|
|
<option value="blog_post">Blog Post</option>
|
|
<option value="sales_copy">Sales Copy</option>
|
|
<option value="ad_copy">Ad Copy</option>
|
|
<option value="video_script">Video Script</option>
|
|
<option value="case_study">Case Study</option>
|
|
<option value="product_description">Product Description</option>
|
|
<option value="landing_page">Landing Page</option>
|
|
<option value="press_release">Press Release</option>
|
|
<option value="newsletter">Newsletter</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="length">Length</label>
|
|
<select id="length">
|
|
<option value="">Select Length</option>
|
|
<option value="short">Short (< 100 words)</option>
|
|
<option value="medium">Medium (100-300 words)</option>
|
|
<option value="long">Long (> 300 words)</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group checkbox-group">
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="include-cta" unchecked>
|
|
<span class="checkmark"></span>
|
|
Include Call to Action
|
|
</label>
|
|
<label class="checkbox">
|
|
<input type="checkbox" id="reference-similar" unchecked>
|
|
<span class="checkmark"></span>
|
|
Reference Similar Content
|
|
</label>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button id="generate-btn" class="btn btn-primary btn-lg">
|
|
<i class="fas fa-magic"></i> Generate
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="result-container" class="result-container hidden">
|
|
<div class="result-header">
|
|
<h3>Generated Content</h3>
|
|
<div class="result-actions">
|
|
<button id="copy-btn" class="btn btn-icon" title="Copy to clipboard">
|
|
<i class="fas fa-copy"></i>
|
|
</button>
|
|
<button id="improve-btn" class="btn btn-icon" title="Improve content">
|
|
<i class="fas fa-wand-magic-sparkles"></i>
|
|
</button>
|
|
<button id="save-btn" class="btn btn-icon" title="Save to history">
|
|
<i class="fas fa-save"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="result-content" class="result-content"></div>
|
|
|
|
<div class="metadata-panel">
|
|
<div class="metadata-item">
|
|
<span class="metadata-label">Alignment Score</span>
|
|
<div class="score-bar">
|
|
<div id="alignment-score" class="score-fill" style="width: 0%;">0%</div>
|
|
</div>
|
|
</div>
|
|
<div id="suggestions-container" class="suggestions-container">
|
|
<h4>Headline Suggestions</h4>
|
|
<ul id="suggestions-list" class="suggestions-list"></ul>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="improvement-panel" class="improvement-panel hidden">
|
|
<h4>Improve This Content</h4>
|
|
<textarea id="improvement-feedback" placeholder="What would you like to improve about this content?" rows="3"></textarea>
|
|
<button id="submit-improvement" class="btn btn-secondary">Submit Feedback</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="loading-indicator" class="loading-indicator hidden">
|
|
<div class="spinner"></div>
|
|
<p>Generating creative marketing content...</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Templates Page -->
|
|
<section id="templates-page" class="page">
|
|
<div class="page-header">
|
|
<h2>Content Templates</h2>
|
|
<p>Use pre-built templates for faster content creation.</p>
|
|
</div>
|
|
|
|
<div class="templates-grid">
|
|
<div class="template-card">
|
|
<div class="template-icon"><i class="fas fa-envelope"></i></div>
|
|
<h3>Email Welcome Sequence</h3>
|
|
<p>A 5-part email sequence for new subscribers.</p>
|
|
<button class="btn btn-outline">Use Template</button>
|
|
</div>
|
|
<div class="template-card">
|
|
<div class="template-icon"><i class="fas fa-share-alt"></i></div>
|
|
<h3>Product Launch Posts</h3>
|
|
<p>Social media templates for product launches.</p>
|
|
<button class="btn btn-outline">Use Template</button>
|
|
</div>
|
|
<div class="template-card">
|
|
<div class="template-icon"><i class="fas fa-newspaper"></i></div>
|
|
<h3>Transformation Story</h3>
|
|
<p>Client success story blog post template.</p>
|
|
<button class="btn btn-outline">Use Template</button>
|
|
</div>
|
|
<div class="template-card">
|
|
<div class="template-icon"><i class="fas fa-ad"></i></div>
|
|
<h3>Workshop Promotion</h3>
|
|
<p>Ad copy template for promoting workshops.</p>
|
|
<button class="btn btn-outline">Use Template</button>
|
|
</div>
|
|
<div class="template-card template-add">
|
|
<div class="template-icon"><i class="fas fa-plus"></i></div>
|
|
<h3>Create New Template</h3>
|
|
<p>Build a custom template from scratch.</p>
|
|
<button class="btn btn-outline">Create Template</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- History Page -->
|
|
<section id="history-page" class="page">
|
|
<div class="page-header">
|
|
<h2>Content History</h2>
|
|
<p>View and reuse your previously generated content.</p>
|
|
</div>
|
|
|
|
<div class="history-filters">
|
|
<div class="form-group">
|
|
<select id="history-filter-type">
|
|
<option value="">All Content Types</option>
|
|
<option value="email_campaign">Email Campaign</option>
|
|
<option value="email">Email</option>
|
|
<option value="social_media">Social Media</option>
|
|
<option value="blog_post">Blog Post</option>
|
|
<option value="website_copy">Website Copy</option>
|
|
<option value="sales_copy">Sales Copy</option>
|
|
<option value="ad_copy">Ad Copy</option>
|
|
<option value="video_script">Video Script</option>
|
|
<option value="case_study">Case Study</option>
|
|
<option value="product_description">Product Description</option>
|
|
<option value="landing_page">Landing Page</option>
|
|
<option value="press_release">Press Release</option>
|
|
<option value="newsletter">Newsletter</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" placeholder="Search history..." id="history-search">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="history-list">
|
|
<!-- History items will be loaded dynamically -->
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Brand Style Page -->
|
|
<section id="brand-style-page" class="page">
|
|
<div class="page-header">
|
|
<h2>Brand Style Guidelines</h2>
|
|
<p>Adriana James' brand voice and tone guidelines are fixed to maintain consistency.</p>
|
|
<div class="alert alert-info">
|
|
<i class="fas fa-info-circle"></i>
|
|
<span>The brand style is locked to Adriana James' distinct communication style—both in her written and spoken tone. This ensures all content maintains her authentic voice.</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="brand-style-form">
|
|
<div class="form-section">
|
|
<h3>Brand Tone</h3>
|
|
<p>Adriana James' distinctive tone is characterized by:</p>
|
|
<div class="tag-selector read-only" id="tone-selector">
|
|
<span class="tag selected">empowering</span>
|
|
<span class="tag selected">assertive</span>
|
|
<span class="tag selected">inspirational</span>
|
|
<span class="tag selected">direct</span>
|
|
</div>
|
|
<p class="style-description">Her tone carries a motivational coach-like clarity, using embedded commands and cause-effect statements that inspire action.</p>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Voice Characteristics</h3>
|
|
<p>Adriana James speaks with these distinctive characteristics:</p>
|
|
<div class="tag-selector read-only" id="voice-selector">
|
|
<span class="tag selected">clear</span>
|
|
<span class="tag selected">confident</span>
|
|
<span class="tag selected">conversational</span>
|
|
<span class="tag selected">teaching</span>
|
|
</div>
|
|
<p class="style-description">She speaks with conviction and clarity, using simple language to communicate profound ideas. Instead of saying "This might help you," she would say "You can do this—because your unconscious mind already knows how."</p>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Taboo Words</h3>
|
|
<p>Words to avoid in all marketing content.</p>
|
|
<div class="tag-editor">
|
|
<div class="tag-list" id="taboo-words">
|
|
<span class="tag removable">cheap<i class="fas fa-times"></i></span>
|
|
<span class="tag removable">discount<i class="fas fa-times"></i></span>
|
|
<span class="tag removable">bargain<i class="fas fa-times"></i></span>
|
|
<span class="tag removable">failure<i class="fas fa-times"></i></span>
|
|
<span class="tag removable">impossible<i class="fas fa-times"></i></span>
|
|
<span class="tag removable">difficult<i class="fas fa-times"></i></span>
|
|
</div>
|
|
<div class="tag-input-container">
|
|
<input type="text" id="taboo-input" placeholder="Add a word to avoid...">
|
|
<button class="btn btn-icon" id="add-taboo-btn"><i class="fas fa-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Preferred Terminology</h3>
|
|
<p>Preferred terms to use instead of common alternatives.</p>
|
|
<div class="terminology-table">
|
|
<div class="terminology-header">
|
|
<div class="term-avoid">Avoid</div>
|
|
<div class="term-use">Use Instead</div>
|
|
<div class="term-actions"></div>
|
|
</div>
|
|
<div class="terminology-row">
|
|
<div class="term-avoid">customers</div>
|
|
<div class="term-use">clients</div>
|
|
<div class="term-actions">
|
|
<button class="btn btn-icon"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="terminology-row">
|
|
<div class="term-avoid">products</div>
|
|
<div class="term-use">solutions</div>
|
|
<div class="term-actions">
|
|
<button class="btn btn-icon"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="terminology-row">
|
|
<div class="term-avoid">problems</div>
|
|
<div class="term-use">challenges</div>
|
|
<div class="term-actions">
|
|
<button class="btn btn-icon"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="terminology-row">
|
|
<div class="term-avoid">services</div>
|
|
<div class="term-use">experiences</div>
|
|
<div class="term-actions">
|
|
<button class="btn btn-icon"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="terminology-row">
|
|
<div class="term-avoid">training</div>
|
|
<div class="term-use">transformation</div>
|
|
<div class="term-actions">
|
|
<button class="btn btn-icon"><i class="fas fa-times"></i></button>
|
|
</div>
|
|
</div>
|
|
<div class="terminology-row add-row">
|
|
<div class="term-avoid">
|
|
<input type="text" placeholder="Avoid" id="avoid-term">
|
|
</div>
|
|
<div class="term-use">
|
|
<input type="text" placeholder="Use Instead" id="use-term">
|
|
</div>
|
|
<div class="term-actions">
|
|
<button class="btn btn-icon" id="add-term-btn"><i class="fas fa-plus"></i></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<p class="style-note"><i class="fas fa-lock"></i> Brand style settings are locked to maintain Adriana James' authentic voice across all content.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Training Page -->
|
|
<section id="training-page" class="page">
|
|
<div class="page-header">
|
|
<h2>Training Data</h2>
|
|
<p>Add examples of high-performing content to improve the AI.</p>
|
|
</div>
|
|
|
|
<div class="training-tabs">
|
|
<div class="tab active" data-tab="add-training">Add Training Data</div>
|
|
<div class="tab" data-tab="view-training">View Training Data</div>
|
|
</div>
|
|
|
|
<div id="add-training-tab" class="tab-content active">
|
|
<div class="training-form">
|
|
<div class="form-group">
|
|
<label for="training-content-type">Content Type</label>
|
|
<select id="training-content-type">
|
|
<option value="">Select Type</option>
|
|
<option value="email">Email Campaign</option>
|
|
<option value="social_media">Social Media</option>
|
|
<option value="blog_post">Blog Post</option>
|
|
<option value="website_copy">Website Copy</option>
|
|
<option value="ad_copy">Ad Copy</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="campaign-name">Campaign Name</label>
|
|
<input type="text" id="campaign-name" placeholder="e.g., Spring Launch 2025">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="training-content">Content</label>
|
|
<textarea id="training-content" rows="8" placeholder="Paste your successful marketing content here..."></textarea>
|
|
</div>
|
|
<div class="form-section">
|
|
<h3>Performance Metrics</h3>
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="open-rate">Open Rate (%)</label>
|
|
<input type="number" id="open-rate" min="0" max="100" step="0.1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="click-rate">Click Rate (%)</label>
|
|
<input type="number" id="click-rate" min="0" max="100" step="0.1">
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="conversion-rate">Conversion Rate (%)</label>
|
|
<input type="number" id="conversion-rate" min="0" max="100" step="0.1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="form-actions">
|
|
<button id="add-training-btn" class="btn btn-primary">Add Training Data</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="view-training-tab" class="tab-content">
|
|
<div class="training-filters">
|
|
<div class="form-group">
|
|
<select id="training-filter-type">
|
|
<option value="">All Content Types</option>
|
|
<option value="email">Email Campaign</option>
|
|
<option value="social_media">Social Media</option>
|
|
<option value="blog_post">Blog Post</option>
|
|
<option value="website_copy">Website Copy</option>
|
|
<option value="ad_copy">Ad Copy</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<input type="text" placeholder="Search training data..." id="training-search">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="training-list">
|
|
<!-- Training items will be loaded dynamically -->
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |