Michael Ikehi
71ad7b4d26
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
431 lines
23 KiB
HTML
431 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>Customize the AI to match Adriana James' brand voice and tone.</p>
|
|
</div>
|
|
|
|
<div class="brand-style-form">
|
|
<div class="form-section">
|
|
<h3>Brand Tone</h3>
|
|
<p>Select the tone options that best represent the brand.</p>
|
|
<div class="tag-selector" id="tone-selector">
|
|
<span class="tag selected">professional</span>
|
|
<span class="tag selected">friendly</span>
|
|
<span class="tag selected">inspirational</span>
|
|
<span class="tag selected">empowering</span>
|
|
<span class="tag">excited</span>
|
|
<span class="tag">authoritative</span>
|
|
<span class="tag">casual</span>
|
|
<span class="tag">humorous</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-section">
|
|
<h3>Voice Characteristics</h3>
|
|
<p>Define the key characteristics of the brand voice.</p>
|
|
<div class="tag-selector" id="voice-selector">
|
|
<span class="tag selected">clear</span>
|
|
<span class="tag selected">direct</span>
|
|
<span class="tag selected">empowering</span>
|
|
<span class="tag selected">confident</span>
|
|
<span class="tag selected">authentic</span>
|
|
<span class="tag">innovative</span>
|
|
<span class="tag">visionary</span>
|
|
<span class="tag">approachable</span>
|
|
</div>
|
|
</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">
|
|
<button id="save-brand-style" class="btn btn-primary">Save Brand Style</button>
|
|
<button id="reset-brand-style" class="btn btn-outline">Reset to Defaults</button>
|
|
</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> |