ducoterra
6359aefd18
All checks were successful
Build and Push Container / build-and-push (push) Successful in 14s
293 lines
13 KiB
HTML
293 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Use Cases - Cheat Sheet</title>
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<div class="nav-inner">
|
|
<a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
|
|
<div class="nav-links">
|
|
<a href="/pages/terminology.html">Terminology</a>
|
|
<a href="/pages/techniques.html">Techniques</a>
|
|
<a href="/pages/use-cases.html" class="active">Use Cases</a>
|
|
<a href="/pages/model-types.html">Model Types</a>
|
|
<a href="/pages/prompts.html">Prompt Guide</a>
|
|
<a href="/pages/math.html">Math & Concepts</a>
|
|
<a href="/pages/chat.html">Chat</a>
|
|
<a href="/pages/image-gen.html">Image Gen</a>
|
|
</div>
|
|
<button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
|
|
<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
|
|
|
|
<script>
|
|
(function(){
|
|
var btn = document.getElementById('darkToggle');
|
|
var saved = localStorage.getItem('theme');
|
|
if(saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)){
|
|
document.documentElement.setAttribute('data-theme','dark');
|
|
btn.textContent = '☀️';
|
|
}
|
|
btn.addEventListener('click', function(){
|
|
var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
if(isDark){
|
|
document.documentElement.removeAttribute('data-theme');
|
|
btn.textContent = '🌙';
|
|
localStorage.setItem('theme','light');
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme','dark');
|
|
btn.textContent = '☀️';
|
|
localStorage.setItem('theme','dark');
|
|
}
|
|
});
|
|
|
|
var menuToggle = document.getElementById('menuToggle');
|
|
var nav = document.querySelector('nav');
|
|
var backdrop = document.getElementById('sidebarBackdrop');
|
|
if(menuToggle && nav){
|
|
menuToggle.addEventListener('click', function(){
|
|
nav.classList.toggle('sidebar-open');
|
|
var isOpen = nav.classList.contains('sidebar-open');
|
|
menuToggle.textContent = isOpen ? '✕' : '☰';
|
|
if(backdrop){
|
|
backdrop.classList.toggle('visible', isOpen);
|
|
}
|
|
});
|
|
if(backdrop){
|
|
backdrop.addEventListener('click', function(){
|
|
nav.classList.remove('sidebar-open');
|
|
menuToggle.textContent = '☰';
|
|
backdrop.classList.remove('visible');
|
|
});
|
|
}
|
|
document.addEventListener('click', function(e){
|
|
if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
|
|
nav.classList.remove('sidebar-open');
|
|
menuToggle.textContent = '☰';
|
|
if(backdrop) backdrop.classList.remove('visible');
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<div class="hero">
|
|
<h1>AI Use Cases</h1>
|
|
<p>Real-world applications of AI across industries.</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
|
|
<h2 class="section-title">Content & Creative</h2>
|
|
<div class="use-grid">
|
|
<div class="use-card">
|
|
<div class="icon">✍️</div>
|
|
<h3>Content Generation</h3>
|
|
<p>Writing blog posts, marketing copy, emails, social media content, and creative stories at scale.</p>
|
|
<div class="example"><strong>Prompt:</strong> "Write a 300-word product description for a noise-canceling headphone."</div>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">🎨</div>
|
|
<h3>Image Generation</h3>
|
|
<p>Creating images from text descriptions using diffusion models like DALL-E, Stable Diffusion, and Midjourney.</p>
|
|
<div class="example"><strong>Prompt:</strong> "A watercolor painting of a cat astronaut floating in space, pink nebula background."</div>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">🎬</div>
|
|
<h3>Video & Audio</h3>
|
|
<p>Generating videos from text, creating music, voice cloning, and dubbing across languages.</p>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">📝</div>
|
|
<h3>Summarization</h3>
|
|
<p>Condensing long documents, articles, meetings, or research papers into concise summaries.</p>
|
|
<div class="example"><strong>Prompt:</strong> "Summarize this 50-page report in 5 bullet points."</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">Code & Development</h2>
|
|
<div class="use-grid">
|
|
<div class="use-card">
|
|
<div class="icon">💻</div>
|
|
<h3>Code Generation</h3>
|
|
<p>Writing code in any programming language from natural language descriptions. Tools: GitHub Copilot, Cursor.</p>
|
|
<div class="example"><strong>Prompt:</strong> "Write a Python function to sort a list of dictionaries by a given key."</div>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">🐛</div>
|
|
<h3>Debugging & Review</h3>
|
|
<p>Identifying bugs, explaining error messages, suggesting improvements, and reviewing code quality.</p>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">📄</div>
|
|
<h3>Documentation</h3>
|
|
<p>Auto-generating API docs, README files, inline comments, and technical documentation from code.</p>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">🔄</div>
|
|
<h3>Code Translation</h3>
|
|
<p>Converting code from one language to another (e.g., JavaScript to Python, old Java to modern Java).</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">Business & Productivity</h2>
|
|
<div class="use-grid">
|
|
<div class="use-card">
|
|
<div class="icon">🤖</div>
|
|
<h3>Chatbots & Assistants</h3>
|
|
<p>24/7 customer support agents that handle FAQs, triage issues, and escalate to humans when needed.</p>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">📊</div>
|
|
<h3>Data Analysis</h3>
|
|
<p>Writing SQL queries, analyzing spreadsheets, generating charts, and extracting insights from data — no coding required.</p>
|
|
<div class="example"><strong>Prompt:</strong> "Plot monthly revenue by region from this CSV."</div>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">🔍</div>
|
|
<h3>Research & Search</h3>
|
|
<p>AI-powered search that reads and synthesizes multiple sources instead of just returning links.</p>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">🌐</div>
|
|
<h3>Translation</h3>
|
|
<p>High-quality machine translation between 100+ languages, preserving tone and context.</p>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">📧</div>
|
|
<h3>Email & Meeting Assistants</h3>
|
|
<p>Drafting emails, scheduling, summarizing meetings, and extracting action items from conversations.</p>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">📋</div>
|
|
<h3>Document Processing</h3>
|
|
<p>Extracting structured data from invoices, contracts, forms, and receipts using OCR + AI.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">Industry-Specific</h2>
|
|
<div class="use-grid">
|
|
<div class="use-card">
|
|
<div class="icon">🏥</div>
|
|
<h3>Healthcare</h3>
|
|
<p>Medical image analysis, drug discovery, clinical note generation, symptom triage, and personalized treatment plans.</p>
|
|
<button class="llm-btn" onclick="brainstormUseCase('💡 Healthcare AI Use Cases', 'Give me 5 specific, actionable AI use cases for a mid-size hospital system. For each, describe the AI technique, expected impact, and implementation complexity.')"><span class="icon">💡</span> Brainstorm</button>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">💰</div>
|
|
<h3>Finance</h3>
|
|
<p>Fraud detection, algorithmic trading, risk assessment, credit scoring, and compliance monitoring.</p>
|
|
<button class="llm-btn" onclick="brainstormUseCase('💡 Finance AI Use Cases', 'Give me 5 specific, actionable AI use cases for a fintech startup. For each, describe the AI technique, expected impact, and key data needed.')"><span class="icon">💡</span> Brainstorm</button>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">🚗</div>
|
|
<h3>Automotive</h3>
|
|
<p>Autonomous driving, predictive maintenance, route optimization, and in-car voice assistants.</p>
|
|
<button class="llm-btn" onclick="brainstormUseCase('💡 Automotive AI Use Cases', 'Give me 5 specific, actionable AI use cases for an automotive company. For each, describe the AI technique, expected impact, and implementation complexity.')"><span class="icon">💡</span> Brainstorm</button>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">🎓</div>
|
|
<h3>Education</h3>
|
|
<p>Personalized tutoring, automated grading, curriculum design, and interactive learning experiences.</p>
|
|
<button class="llm-btn" onclick="brainstormUseCase('💡 Education AI Use Cases', 'Give me 5 specific, actionable AI use cases for an online education platform. For each, describe the AI technique, expected impact, and key data needed.')"><span class="icon">💡</span> Brainstorm</button>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">🏭</div>
|
|
<h3>Manufacturing</h3>
|
|
<p>Quality inspection via computer vision, supply chain optimization, predictive maintenance, and digital twins.</p>
|
|
<button class="llm-btn" onclick="brainstormUseCase('💡 Manufacturing AI Use Cases', 'Give me 5 specific, actionable AI use cases for a manufacturing company. For each, describe the AI technique, expected impact, and implementation complexity.')"><span class="icon">💡</span> Brainstorm</button>
|
|
</div>
|
|
<div class="use-card">
|
|
<div class="icon">⚖️</div>
|
|
<h3>Legal</h3>
|
|
<p>Contract review, legal research, case prediction, document drafting, and compliance analysis.</p>
|
|
<button class="llm-btn" onclick="brainstormUseCase('💡 Legal AI Use Cases', 'Give me 5 specific, actionable AI use cases for a law firm. For each, describe the AI technique, expected impact, and key considerations.')"><span class="icon">💡</span> Brainstorm</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="section-title">AI Assistant</h2>
|
|
<div class="def-card">
|
|
<span class="category">Interactive</span>
|
|
<h3>🤖 Brainstorm AI Use Cases</h3>
|
|
<p>Describe your industry, project, or problem — and the AI will suggest specific, actionable use cases with implementation details.</p>
|
|
<div class="llm-mini-chat" id="brainstorm-chat">
|
|
<div class="llm-mini-chat-header"><h4>💡 Brainstorm Assistant</h4><button class="llm-close-btn" onclick="this.closest(\'.llm-mini-chat\').classList.remove(\'visible\')">✕</button></div>
|
|
<div class="llm-mini-chat-input-row">
|
|
<input class="llm-mini-chat-input" id="brainstorm-input" placeholder="Describe your industry, project, or problem..." />
|
|
<button class="llm-mini-chat-send" onclick="doBrainstorm()">Go</button>
|
|
</div>
|
|
<div class="llm-mini-chat-output" id="brainstorm-output" style="margin-top: 0.8rem;"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<footer>AI Cheat Sheet — A learning reference for artificial intelligence</footer>
|
|
|
|
<script src="../lib/modal.js"></script>
|
|
<script src="../lib/llm.js"></script>
|
|
<script>
|
|
(function(){
|
|
function brainstormUseCase(title, prompt) {
|
|
LLMModal.open(title);
|
|
var messages = [
|
|
{ role: 'system', content: 'You are an AI consultant helping professionals brainstorm practical AI use cases. For each use case, describe: 1) The specific problem it solves, 2) The AI technique/model needed, 3) Expected impact (quantified if possible), 4) Implementation complexity (Easy/Medium/Hard), 5) Key data or resources needed. Be concrete and actionable.' },
|
|
{ role: 'user', content: prompt }
|
|
];
|
|
|
|
var fullText = '';
|
|
LLM.callAPI(
|
|
messages,
|
|
function(chunk) {
|
|
fullText += chunk;
|
|
LLMModal.update(fullText);
|
|
},
|
|
function() {},
|
|
function(err) {
|
|
LLMModal.error(err);
|
|
}
|
|
);
|
|
}
|
|
|
|
function doBrainstorm() {
|
|
var input = document.getElementById('brainstorm-input');
|
|
var output = document.getElementById('brainstorm-output');
|
|
var text = input.value.trim();
|
|
if (!text) return;
|
|
|
|
output.innerHTML = '<span class="llm-loading">Brainstorming...</span>';
|
|
|
|
var messages = [
|
|
{ role: 'system', content: 'You are an AI consultant helping professionals brainstorm practical AI use cases. For each use case, describe: 1) The specific problem it solves, 2) The AI technique or model needed, 3) Expected impact, 4) Implementation complexity (Easy/Medium/Hard), 5) Key data or resources needed. Be concrete and actionable. Give 5-7 use cases.' },
|
|
{ role: 'user', content: 'I work in ' + text + '. Brainstorm specific, actionable AI use cases for my context. Tailor each one to my industry, company size, and available resources. For each use case, describe the problem it solves, the AI technique needed, expected impact, implementation complexity, and key data or resources needed.' }
|
|
];
|
|
|
|
LLM.chatWithHistory('brainstorm-output', messages).catch(function() {});
|
|
}
|
|
|
|
var brainstormInput = document.getElementById('brainstorm-input');
|
|
if (brainstormInput) {
|
|
brainstormInput.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
doBrainstorm();
|
|
}
|
|
});
|
|
}
|
|
|
|
window.brainstormUseCase = brainstormUseCase;
|
|
window.doBrainstorm = doBrainstorm;
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|