Add trending keywords app with opportunity scoring algorithm
This commit is contained in:
Imtiaz Ali
323
app.js
Normal file
323
app.js
Normal file
@@ -0,0 +1,323 @@
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
// DOM Elements
|
||||
const keywordsContainer = document.getElementById('keywords-container');
|
||||
const refreshBtn = document.getElementById('refresh-btn');
|
||||
const loading = document.getElementById('loading');
|
||||
const selectedKeywordText = document.getElementById('selected-keyword-text');
|
||||
const generatePromptBtn = document.getElementById('generate-prompt-btn');
|
||||
const promptResult = document.getElementById('prompt-result');
|
||||
const promptTitle = document.getElementById('prompt-title');
|
||||
const promptBody = document.getElementById('prompt-body');
|
||||
const copyPromptBtn = document.getElementById('copy-prompt-btn');
|
||||
const copySuccess = document.getElementById('copy-success');
|
||||
|
||||
// State
|
||||
let selectedKeyword = null;
|
||||
let currentPrompt = null;
|
||||
|
||||
// Fetch trending keywords with opportunity scoring
|
||||
const fetchTrendingKeywords = async () => {
|
||||
try {
|
||||
loading.classList.remove('hidden');
|
||||
keywordsContainer.innerHTML = '';
|
||||
|
||||
// Step 1: Get trending topics from multiple sources
|
||||
const trendingTopics = await fetchTrendingTopics();
|
||||
|
||||
// Step 2: Enrich with search volume and result count data
|
||||
const enrichedKeywords = await enrichKeywordsWithOpportunityData(trendingTopics);
|
||||
|
||||
// Step 3: Calculate opportunity score and sort
|
||||
const keywordsWithOpportunity = calculateOpportunityScore(enrichedKeywords);
|
||||
|
||||
if (keywordsWithOpportunity.length > 0) {
|
||||
renderKeywords(keywordsWithOpportunity);
|
||||
} else {
|
||||
useBackupKeywords();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error fetching trending keywords:', error);
|
||||
useBackupKeywords();
|
||||
} finally {
|
||||
loading.classList.add('hidden');
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch trending topics from multiple sources for diversity
|
||||
const fetchTrendingTopics = async () => {
|
||||
try {
|
||||
// Source 1: Wikipedia trending articles
|
||||
const wikiResponse = await fetch('https://wikimedia.org/api/rest_v1/metrics/pageviews/top/en.wikipedia/all-access/2023/01/all-days');
|
||||
const wikiData = await wikiResponse.json();
|
||||
|
||||
let combinedTopics = [];
|
||||
|
||||
// Process Wikipedia data
|
||||
if (wikiData && wikiData.items && wikiData.items[0] && wikiData.items[0].articles) {
|
||||
const wikiTopics = wikiData.items[0].articles
|
||||
.filter(article => !article.article.startsWith('Special:') &&
|
||||
!article.article.startsWith('Main_Page') &&
|
||||
!article.article.startsWith('Wikipedia:'))
|
||||
.slice(0, 15)
|
||||
.map(article => ({
|
||||
keyword: article.article.replace(/_/g, ' '),
|
||||
searchVolume: article.views,
|
||||
source: 'wikipedia'
|
||||
}));
|
||||
|
||||
combinedTopics = [...combinedTopics, ...wikiTopics];
|
||||
}
|
||||
|
||||
// Source 2: Use Google Trends API-like data (simulated)
|
||||
// In a real implementation, you would use Google Trends API
|
||||
const techTrendingTopics = [
|
||||
{ keyword: 'quantum computing applications', searchVolume: 85000 },
|
||||
{ keyword: 'edge computing use cases', searchVolume: 62000 },
|
||||
{ keyword: 'zero-knowledge proofs', searchVolume: 45000 },
|
||||
{ keyword: 'synthetic data generation', searchVolume: 73000 },
|
||||
{ keyword: 'federated learning models', searchVolume: 58000 },
|
||||
{ keyword: 'serverless architecture patterns', searchVolume: 67000 },
|
||||
{ keyword: 'homomorphic encryption', searchVolume: 41000 },
|
||||
{ keyword: 'computer vision in healthcare', searchVolume: 89000 },
|
||||
{ keyword: 'explainable ai techniques', searchVolume: 76000 },
|
||||
{ keyword: 'graph neural networks', searchVolume: 52000 }
|
||||
].map(item => ({ ...item, source: 'tech_trends' }));
|
||||
|
||||
combinedTopics = [...combinedTopics, ...techTrendingTopics];
|
||||
|
||||
// Source 3: Emerging research topics (simulated)
|
||||
const emergingTopics = [
|
||||
{ keyword: 'biomimetic materials science', searchVolume: 32000 },
|
||||
{ keyword: 'neuromorphic computing chips', searchVolume: 28000 },
|
||||
{ keyword: 'digital twin technology applications', searchVolume: 47000 },
|
||||
{ keyword: 'post-quantum cryptography standards', searchVolume: 39000 },
|
||||
{ keyword: 'spatial computing interfaces', searchVolume: 43000 }
|
||||
].map(item => ({ ...item, source: 'emerging_research' }));
|
||||
|
||||
combinedTopics = [...combinedTopics, ...emergingTopics];
|
||||
|
||||
// Deduplicate and return
|
||||
return Array.from(new Map(combinedTopics.map(item =>
|
||||
[item.keyword, item])).values());
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error fetching trending topics:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// Enrich keywords with search result counts
|
||||
const enrichKeywordsWithOpportunityData = async (keywords) => {
|
||||
// In a production environment, you would use a real search API
|
||||
// Here we'll simulate the data with a deterministic algorithm
|
||||
|
||||
return Promise.all(keywords.map(async (keyword) => {
|
||||
// Simulate API call to get search result count
|
||||
// In reality, you would use a search engine API
|
||||
|
||||
// Algorithm to generate realistic but varied result counts
|
||||
// Technical/specific keywords tend to have fewer results
|
||||
const wordCount = keyword.keyword.split(' ').length;
|
||||
const containsTechnicalTerms = /\b(api|algorithm|framework|protocol|quantum|neural|encryption|serverless|computing)\b/i.test(keyword.keyword);
|
||||
const isNiche = wordCount >= 3 || containsTechnicalTerms;
|
||||
|
||||
// Base result count - more specific terms have fewer results
|
||||
let baseResultCount;
|
||||
if (isNiche) {
|
||||
baseResultCount = Math.floor(50000 + Math.random() * 500000);
|
||||
} else {
|
||||
baseResultCount = Math.floor(1000000 + Math.random() * 50000000);
|
||||
}
|
||||
|
||||
// Add some randomness but keep it deterministic for the same keyword
|
||||
const seed = keyword.keyword.split('').reduce((acc, char) => acc + char.charCodeAt(0), 0);
|
||||
const pseudoRandom = Math.sin(seed) * 10000;
|
||||
const resultCount = Math.max(10000, Math.floor(baseResultCount + pseudoRandom));
|
||||
|
||||
return {
|
||||
...keyword,
|
||||
resultCount
|
||||
};
|
||||
}));
|
||||
};
|
||||
|
||||
// Calculate opportunity score based on search volume vs. result count
|
||||
const calculateOpportunityScore = (keywords) => {
|
||||
// Calculate the opportunity score
|
||||
// Higher score = high search volume + low result count (better opportunity)
|
||||
const keywordsWithScore = keywords.map(keyword => {
|
||||
// Normalize search volume (0-100)
|
||||
const maxSearchVolume = Math.max(...keywords.map(k => k.searchVolume));
|
||||
const normalizedSearchVolume = (keyword.searchVolume / maxSearchVolume) * 100;
|
||||
|
||||
// Normalize result count inversely (fewer results = higher score)
|
||||
const maxResultCount = Math.max(...keywords.map(k => k.resultCount));
|
||||
const normalizedResultCount = 100 - ((keyword.resultCount / maxResultCount) * 100);
|
||||
|
||||
// Calculate opportunity score (weighted average)
|
||||
// 60% weight to search volume, 40% weight to inverse result count
|
||||
const opportunityScore = (normalizedSearchVolume * 0.6) + (normalizedResultCount * 0.4);
|
||||
|
||||
// Calculate competition level (lower is better)
|
||||
const competitionLevel = keyword.resultCount / keyword.searchVolume;
|
||||
|
||||
return {
|
||||
...keyword,
|
||||
opportunityScore: Math.round(opportunityScore),
|
||||
competitionLevel: Math.round(competitionLevel)
|
||||
};
|
||||
});
|
||||
|
||||
// Sort by opportunity score (highest first)
|
||||
return keywordsWithScore
|
||||
.sort((a, b) => b.opportunityScore - a.opportunityScore)
|
||||
.slice(0, 10);
|
||||
};
|
||||
|
||||
// Use backup keywords when API fails
|
||||
const useBackupKeywords = () => {
|
||||
const backupKeywords = [
|
||||
{ keyword: 'quantum machine learning algorithms', opportunityScore: 95, searchVolume: 42000, resultCount: 156000, competitionLevel: 4 },
|
||||
{ keyword: 'zero-trust network architecture', opportunityScore: 92, searchVolume: 68000, resultCount: 310000, competitionLevel: 5 },
|
||||
{ keyword: 'synthetic data generation techniques', opportunityScore: 89, searchVolume: 51000, resultCount: 245000, competitionLevel: 5 },
|
||||
{ keyword: 'edge computing security frameworks', opportunityScore: 87, searchVolume: 73000, resultCount: 420000, competitionLevel: 6 },
|
||||
{ keyword: 'federated learning privacy', opportunityScore: 85, searchVolume: 47000, resultCount: 280000, competitionLevel: 6 },
|
||||
{ keyword: 'explainable ai for healthcare', opportunityScore: 82, searchVolume: 59000, resultCount: 390000, competitionLevel: 7 },
|
||||
{ keyword: 'post-quantum cryptography implementation', opportunityScore: 80, searchVolume: 38000, resultCount: 265000, competitionLevel: 7 },
|
||||
{ keyword: 'neuromorphic computing applications', opportunityScore: 78, searchVolume: 31000, resultCount: 225000, competitionLevel: 7 },
|
||||
{ keyword: 'graph neural networks for recommendation', opportunityScore: 76, searchVolume: 44000, resultCount: 340000, competitionLevel: 8 },
|
||||
{ keyword: 'digital twin technology standards', opportunityScore: 74, searchVolume: 53000, resultCount: 420000, competitionLevel: 8 }
|
||||
];
|
||||
|
||||
renderKeywords(backupKeywords);
|
||||
};
|
||||
|
||||
// Render keywords
|
||||
const renderKeywords = (keywords) => {
|
||||
keywordsContainer.innerHTML = '';
|
||||
|
||||
keywords.forEach(keyword => {
|
||||
const keywordCard = document.createElement('div');
|
||||
keywordCard.className = 'keyword-card';
|
||||
keywordCard.dataset.keyword = keyword.keyword;
|
||||
|
||||
// Display opportunity score and metrics
|
||||
const score = keyword.opportunityScore || keyword.score || 0;
|
||||
const searchVolume = keyword.searchVolume ? `${(keyword.searchVolume/1000).toFixed(1)}K` : 'N/A';
|
||||
const resultCount = keyword.resultCount ? `${(keyword.resultCount/1000).toFixed(1)}K` : 'N/A';
|
||||
const competitionLevel = keyword.competitionLevel || 'N/A';
|
||||
|
||||
keywordCard.innerHTML = `
|
||||
<div class="keyword-name">${keyword.keyword}</div>
|
||||
<div class="keyword-metrics">
|
||||
<div class="opportunity-score">Opportunity: <span class="highlight">${score}</span></div>
|
||||
<div class="search-volume">Search: ${searchVolume}</div>
|
||||
<div class="result-count">Results: ${resultCount}</div>
|
||||
<div class="competition">Competition: ${competitionLevel}</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
keywordCard.addEventListener('click', () => selectKeyword(keyword.keyword, keywordCard));
|
||||
|
||||
keywordsContainer.appendChild(keywordCard);
|
||||
});
|
||||
};
|
||||
|
||||
// Select a keyword
|
||||
const selectKeyword = (keyword, card) => {
|
||||
// Remove selected class from all cards
|
||||
document.querySelectorAll('.keyword-card').forEach(k => k.classList.remove('selected'));
|
||||
|
||||
// Add selected class to clicked card
|
||||
card.classList.add('selected');
|
||||
|
||||
// Update selected keyword
|
||||
selectedKeyword = keyword;
|
||||
selectedKeywordText.textContent = keyword;
|
||||
|
||||
// Enable generate prompt button
|
||||
generatePromptBtn.disabled = false;
|
||||
|
||||
// Hide prompt result if visible
|
||||
promptResult.classList.add('hidden');
|
||||
};
|
||||
|
||||
// Generate article prompt
|
||||
const generatePrompt = () => {
|
||||
if (!selectedKeyword) return;
|
||||
|
||||
try {
|
||||
loading.classList.remove('hidden');
|
||||
generatePromptBtn.disabled = true;
|
||||
|
||||
// Find the selected keyword data
|
||||
const keywordData = Array.from(document.querySelectorAll('.keyword-card')).find(
|
||||
card => card.dataset.keyword === selectedKeyword
|
||||
);
|
||||
|
||||
// Get opportunity metrics if available
|
||||
const opportunityScore = keywordData?.querySelector('.opportunity-score .highlight')?.textContent || 'high';
|
||||
const searchVolume = keywordData?.querySelector('.search-volume')?.textContent.split(': ')[1] || 'significant';
|
||||
const resultCount = keywordData?.querySelector('.result-count')?.textContent.split(': ')[1] || 'limited';
|
||||
|
||||
// Generate a ChatGPT-friendly prompt based on the keyword and opportunity metrics
|
||||
const prompt = {
|
||||
title: `Write a comprehensive article about "${selectedKeyword}" (High-Opportunity Keyword)`,
|
||||
content: `Write a well-researched, engaging, and informative article about "${selectedKeyword}". This is a high-opportunity keyword with ${searchVolume} monthly searches but only ${resultCount} competing results.
|
||||
|
||||
1. Start with an attention-grabbing introduction that explains why "${selectedKeyword}" is important or relevant today
|
||||
2. Include at least 5 main sections with appropriate headings
|
||||
3. Incorporate current statistics, trends, and expert opinions
|
||||
4. Address common questions or misconceptions about "${selectedKeyword}"
|
||||
5. Provide practical tips, applications, or future predictions related to "${selectedKeyword}"
|
||||
6. End with a compelling conclusion that summarizes key points and offers final thoughts
|
||||
7. Optimize the content for SEO while maintaining high-quality, valuable information
|
||||
|
||||
The article should be approximately 1500-2000 words, written in a professional yet accessible tone, and formatted for easy online reading with appropriate headings, subheadings, and bullet points where relevant.`
|
||||
};
|
||||
|
||||
currentPrompt = prompt;
|
||||
displayPrompt(prompt);
|
||||
} catch (error) {
|
||||
console.error('Error generating prompt:', error);
|
||||
alert('Failed to generate prompt. Please try again.');
|
||||
} finally {
|
||||
loading.classList.add('hidden');
|
||||
generatePromptBtn.disabled = false;
|
||||
}
|
||||
};
|
||||
|
||||
// Display the generated prompt
|
||||
const displayPrompt = (prompt) => {
|
||||
promptTitle.textContent = prompt.title;
|
||||
promptBody.textContent = prompt.content;
|
||||
promptResult.classList.remove('hidden');
|
||||
};
|
||||
|
||||
// Copy prompt to clipboard
|
||||
const copyPrompt = () => {
|
||||
if (!currentPrompt) return;
|
||||
|
||||
const fullPrompt = `${currentPrompt.title}\n\n${currentPrompt.content}`;
|
||||
|
||||
navigator.clipboard.writeText(fullPrompt)
|
||||
.then(() => {
|
||||
copySuccess.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
copySuccess.classList.add('hidden');
|
||||
}, 2000);
|
||||
})
|
||||
.catch(err => {
|
||||
console.error('Failed to copy prompt:', err);
|
||||
alert('Failed to copy prompt to clipboard');
|
||||
});
|
||||
};
|
||||
|
||||
// Event listeners
|
||||
refreshBtn.addEventListener('click', fetchTrendingKeywords);
|
||||
generatePromptBtn.addEventListener('click', generatePrompt);
|
||||
copyPromptBtn.addEventListener('click', copyPrompt);
|
||||
|
||||
// Initial load
|
||||
fetchTrendingKeywords();
|
||||
});
|
||||
Reference in New Issue
Block a user