LLM integration with all the tabs

pages/use-cases.html

@@ -147,31 +147,52 @@
       <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>
 
@@ -179,5 +200,61 @@
 
 <footer>AI Cheat Sheet &mdash; 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>