| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GPT-2 Activation Patching Demo</title> |
| <style> |
| body { |
| font-family: Arial, sans-serif; |
| margin: 20px; |
| background-color: #f4f4f4; |
| } |
| .container { |
| max-width: 800px; |
| margin: 0 auto; |
| background-color: #fff; |
| padding: 20px; |
| border-radius: 8px; |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
| } |
| input[type="text"] { |
| width: calc(100% - 22px); |
| padding: 10px; |
| margin-bottom: 10px; |
| border: 1px solid #ddd; |
| border-radius: 4px; |
| } |
| button { |
| background-color: #007bff; |
| color: white; |
| padding: 10px 15px; |
| border: none; |
| border-radius: 4px; |
| cursor: pointer; |
| font-size: 16px; |
| } |
| button:hover { |
| background-color: #0056b3; |
| } |
| pre { |
| background-color: #e9e9e9; |
| padding: 15px; |
| border-radius: 4px; |
| overflow-x: auto; |
| white-space: pre-wrap; |
| word-wrap: break-word; |
| } |
| .error { |
| color: red; |
| font-weight: bold; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <h1>GPT-2 Activation Patching Demo</h1> |
| <p>Enter a sentence containing one of these verb pairs: has/have, is/are, was/were, does/do</p> |
| <input type="text" id="sentenceInput" placeholder="e.g., 'The cat has fur.'"> |
| <button id="patchButton">Run Activation Patching</button> |
|
|
| <h2>Results:</h2> |
| <pre id="results">Click the button to see results...</pre> |
| </div> |
|
|
| <script> |
| const sentenceInput = document.getElementById('sentenceInput'); |
| const patchButton = document.getElementById('patchButton'); |
| const resultsDisplay = document.getElementById('results'); |
| |
| patchButton.addEventListener('click', async () => { |
| const inputValue = sentenceInput.value.trim(); |
| if (!inputValue) { |
| resultsDisplay.textContent = 'Please enter a sentence.'; |
| resultsDisplay.classList.add('error'); |
| return; |
| } |
| resultsDisplay.classList.remove('error'); |
| resultsDisplay.textContent = 'Processing...'; |
| |
| try { |
| |
| const response = await fetch('/predict', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify({ sentence: inputValue }) |
| }); |
| |
| if (!response.ok) { |
| const errorData = await response.json(); |
| throw new Error(`Server error: ${response.status} - ${errorData.detail || response.statusText}`); |
| } |
| |
| const data = await response.json(); |
| resultsDisplay.textContent = JSON.stringify(data, null, 2); |
| |
| } catch (error) { |
| resultsDisplay.textContent = `Error: ${error.message}`; |
| resultsDisplay.classList.add('error'); |
| console.error('Fetch error:', error); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
