| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <title>Fact or Fiction: Securing LLMs</title> |
|
|
| |
| <link rel="preconnect" href="https://fonts.gstatic.com" /> |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;600&display=swap" rel="stylesheet"> |
|
|
| <style> |
| |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background: linear-gradient(120deg, #ade0f4, #f2cfff); |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: flex-start; |
| padding-bottom: 2rem; |
| } |
| |
| h1 { |
| text-align: center; |
| margin-top: 2rem; |
| color: #333; |
| font-weight: 600; |
| letter-spacing: 1px; |
| } |
| |
| |
| .article-link { |
| margin-top: 0.75rem; |
| font-size: 0.95rem; |
| color: #333; |
| text-align: center; |
| } |
| .article-link a { |
| color: #1b66c9; |
| text-decoration: none; |
| font-weight: 600; |
| } |
| .article-link a:hover { text-decoration: underline; } |
| |
| |
| #game-container { |
| background: #ffffffcc; |
| width: 90%; |
| max-width: 650px; |
| margin: 1.5rem auto; |
| padding: 2rem; |
| border-radius: 12px; |
| box-shadow: 0 8px 20px rgba(0,0,0,0.2); |
| transition: transform 0.3s ease; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| } |
| #game-container:hover { transform: scale(1.01); } |
| |
| #statement { |
| font-size: 1.25rem; |
| margin-bottom: 1rem; |
| min-height: 90px; |
| text-align: center; |
| color: #444; |
| } |
| |
| |
| .btn-group { margin: 1rem 0; } |
| button { |
| margin: 0.5rem; |
| padding: 0.75rem 1.5rem; |
| font-size: 1rem; |
| cursor: pointer; |
| border: none; |
| border-radius: 8px; |
| background-color: #3498db; |
| color: #fff; |
| transition: background-color 0.3s ease, transform 0.2s ease; |
| } |
| button:hover { |
| background-color: #2980b9; |
| transform: translateY(-2px); |
| } |
| |
| |
| #result { |
| margin-top: 1rem; |
| padding: 1rem; |
| border-radius: 6px; |
| font-weight: 600; |
| text-align: center; |
| width: 100%; |
| display: none; |
| } |
| #result.correct { |
| background-color: #d4edda; |
| color: #155724; |
| display: block; |
| } |
| #result.incorrect { |
| background-color: #f8d7da; |
| color: #721c24; |
| display: block; |
| } |
| #explanation { |
| margin-top: 0.5rem; |
| padding: 1rem; |
| border-radius: 6px; |
| background-color: #f9f9f9; |
| color: #555; |
| display: none; |
| width: 100%; |
| } |
| |
| |
| #next-btn { background-color: #2ecc71; } |
| #next-btn:hover { background-color: #27ae60; } |
| |
| #restart-btn { |
| background-color: #ff7675; |
| margin-top: 0.5rem; |
| } |
| #restart-btn:hover { background-color: #d63031; } |
| |
| |
| .progress-container { |
| width: 100%; |
| background-color: #eeeeee; |
| border-radius: 50px; |
| overflow: hidden; |
| margin: 1rem 0; |
| } |
| .progress-bar { |
| height: 16px; |
| background-color: #3498db; |
| width: 0%; |
| transition: width 0.3s ease; |
| } |
| |
| |
| #score { |
| margin-top: 1rem; |
| font-weight: 600; |
| color: #333; |
| } |
| |
| .note { |
| margin-top: 0.75rem; |
| font-size: 0.85rem; |
| color: #555; |
| text-align: center; |
| opacity: 0.9; |
| } |
| </style> |
| </head> |
|
|
| <body> |
| <h1>Fact or Fiction: Securing LLMs</h1> |
|
|
| <div class="article-link"> |
| Read the article: |
| <a href="https://www.linkedin.com/pulse/securing-large-language-models-michael-lively-ept6e/" target="_blank" rel="noopener noreferrer"> |
| Securing Large Language Models (LinkedIn) |
| </a> |
| </div> |
|
|
| <div id="game-container"> |
| |
| <div class="progress-container"> |
| <div class="progress-bar" id="progress-bar"></div> |
| </div> |
|
|
| |
| <div id="statement">Loading statement...</div> |
|
|
| |
| <div class="btn-group"> |
| <button onclick="guessFact()">Fact</button> |
| <button onclick="guessFiction()">Fiction</button> |
| </div> |
|
|
| |
| <div id="result"></div> |
| <div id="explanation"></div> |
|
|
| |
| <button id="next-btn" style="display:none;" onclick="nextStatement()">Next</button> |
| <button id="restart-btn" style="display:none;" onclick="restartGame()">Restart</button> |
|
|
| |
| <div id="score"></div> |
|
|
| <div class="note">5 questions • Order is randomized each play</div> |
| </div> |
|
|
| <script> |
| |
| |
| let statements = [ |
| { |
| text: "Security risks in generative AI applications can be grouped into three main attack vectors: manipulating inputs, corrupting core knowledge, and exploiting operational deployment risks.", |
| isFact: true, |
| explanation: "Fact! The content frames the LLM threat landscape as three vectors: input manipulation, system integrity corruption, and operational risks in deployment and trust." |
| }, |
| { |
| text: "The only effective way to bypass an LLM’s safety controls is through highly technical exploits and complex code.", |
| isFact: false, |
| explanation: "Fiction! The content explains that 'jailbreaking' can be psychological—using emotional or narrative manipulation to trick the model into breaking its own rules." |
| }, |
| { |
| text: "Training data poisoning can embed misinformation into a model’s foundational knowledge, making it confidently repeat falsehoods later.", |
| isFact: true, |
| explanation: "Fact! Poisoning the training corpus can bake in propaganda or inaccuracies that are hard to detect and correct after deployment." |
| }, |
| { |
| text: "If the LLM itself is secured, third-party libraries, datasets, and plugins do not meaningfully affect the system’s overall security.", |
| isFact: false, |
| explanation: "Fiction! The content highlights supply chain vulnerabilities: a single weak dependency can compromise an otherwise secure AI application." |
| }, |
| { |
| text: "Applying the CIA Triad—Confidentiality, Integrity, and Availability—provides a blueprint for designing secure AI systems from day one.", |
| isFact: true, |
| explanation: "Fact! The content emphasizes security-by-design and positions the CIA Triad as the foundational framework for secure AI architecture." |
| } |
| ]; |
| |
| |
| function shuffleArray(arr) { |
| for (let i = arr.length - 1; i > 0; i--) { |
| const j = Math.floor(Math.random() * (i + 1)); |
| [arr[i], arr[j]] = [arr[j], arr[i]]; |
| } |
| return arr; |
| } |
| |
| |
| let currentIndex = 0; |
| let score = 0; |
| let answered = false; |
| |
| |
| const statementDiv = document.getElementById("statement"); |
| const resultDiv = document.getElementById("result"); |
| const explanationDiv = document.getElementById("explanation"); |
| const nextBtn = document.getElementById("next-btn"); |
| const restartBtn = document.getElementById("restart-btn"); |
| const scoreDiv = document.getElementById("score"); |
| const progressBar = document.getElementById("progress-bar"); |
| |
| |
| startGame(); |
| |
| function startGame() { |
| shuffleArray(statements); |
| currentIndex = 0; |
| score = 0; |
| answered = false; |
| restartBtn.style.display = "none"; |
| loadStatement(); |
| } |
| |
| function loadStatement() { |
| if (currentIndex >= statements.length) { |
| endGame(); |
| return; |
| } |
| |
| const current = statements[currentIndex]; |
| statementDiv.textContent = current.text; |
| |
| |
| resultDiv.textContent = ""; |
| resultDiv.className = ""; |
| resultDiv.style.display = "none"; |
| |
| explanationDiv.innerHTML = ""; |
| explanationDiv.style.display = "none"; |
| |
| nextBtn.style.display = "none"; |
| answered = false; |
| |
| |
| const progressPercent = (currentIndex / statements.length) * 100; |
| progressBar.style.width = progressPercent + "%"; |
| scoreDiv.textContent = `Score: ${score} / ${statements.length}`; |
| } |
| |
| function guessFact() { |
| if (!answered) checkAnswer(true); |
| } |
| |
| function guessFiction() { |
| if (!answered) checkAnswer(false); |
| } |
| |
| function checkAnswer(userGuess) { |
| answered = true; |
| const correctAnswer = statements[currentIndex].isFact; |
| |
| if (userGuess === correctAnswer) { |
| score++; |
| resultDiv.textContent = "Correct!"; |
| resultDiv.className = "correct"; |
| } else { |
| resultDiv.textContent = "Incorrect!"; |
| resultDiv.className = "incorrect"; |
| } |
| resultDiv.style.display = "block"; |
| |
| explanationDiv.textContent = statements[currentIndex].explanation; |
| explanationDiv.style.display = "block"; |
| |
| scoreDiv.textContent = `Score: ${score} / ${statements.length}`; |
| |
| const progressPercent = ((currentIndex + 1) / statements.length) * 100; |
| progressBar.style.width = progressPercent + "%"; |
| |
| if (currentIndex === statements.length - 1) { |
| nextBtn.style.display = "none"; |
| endGame(); |
| } else { |
| nextBtn.style.display = "inline-block"; |
| } |
| } |
| |
| function nextStatement() { |
| currentIndex++; |
| loadStatement(); |
| } |
| |
| function endGame() { |
| statementDiv.textContent = "Game Over!"; |
| resultDiv.textContent = `You scored ${score} out of ${statements.length}!`; |
| resultDiv.className = "correct"; |
| resultDiv.style.display = "block"; |
| |
| explanationDiv.innerHTML = |
| `Want to review? Open the article here: <a href="https://www.linkedin.com/pulse/securing-large-language-models-michael-lively-ept6e/" target="_blank" rel="noopener noreferrer">Securing Large Language Models (LinkedIn)</a>`; |
| explanationDiv.style.display = "block"; |
| |
| nextBtn.style.display = "none"; |
| restartBtn.style.display = "inline-block"; |
| progressBar.style.width = "100%"; |
| } |
| |
| function restartGame() { |
| startGame(); |
| } |
| </script> |
| </body> |
| </html> |
|
|
