Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>PBAGE</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| margin: 0; | |
| padding: 20px; | |
| background-color: #f4f4f4; | |
| } | |
| .container { | |
| max-width: 800px; | |
| margin: auto; | |
| background: white; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); | |
| } | |
| h1 { | |
| color: #333; | |
| } | |
| .result-item { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 10px; | |
| padding: 10px; | |
| border: 1px solid #ddd; | |
| border-radius: 4px; | |
| } | |
| .result-item button { | |
| margin-left: 10px; | |
| padding: 5px 10px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| } | |
| .relevant { background-color: #d4edda; } | |
| .irrelevant { background-color: #f8d7da; } | |
| .oos { border: 2px solid #ffeeba; } | |
| .repeating { border: 2px dashed #b8daff; } | |
| .null { background-color: #f1f1f1; } | |
| .active { | |
| background-color: #34C759; | |
| color: #fff; | |
| } | |
| #annotation { | |
| margin-top: 20px; | |
| padding: 10px; | |
| border-radius: 4px; | |
| font-weight: bold; | |
| } | |
| .excellent { background-color: #d4edda; color: #155724; } | |
| .good { background-color: #cce5ff; color: #004085; } | |
| .average { background-color: #fff3cd; color: #856404; } | |
| .bad { background-color: #f8d7da; color: #721c24; } | |
| .poor { background-color: #f1f1f1; color: #5a5a5a; } | |
| #reset-button { | |
| margin-top: 20px; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| background-color: #4CAF50; | |
| color: #fff; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>PBAGE</h1> | |
| <div id="results"></div> | |
| <div id="annotation"></div> | |
| <button id="reset-button">Reset</button> | |
| </div> | |
| <script> | |
| const results = Array(8).fill().map(() => ({ | |
| isRelevant: true, | |
| isOOS: false, | |
| isRepeating: false, | |
| isNull: false | |
| })); | |
| function updateUI() { | |
| const resultsContainer = document.getElementById('results'); | |
| resultsContainer.innerHTML = results.map((result, index) => ` | |
| <div class="result-item ${result.isRelevant ? 'relevant' : 'irrelevant'} ${result.isOOS ? 'oos' : ''} ${result.isRepeating ? 'repeating' : ''} ${result.isNull ? 'null' : ''}"> | |
| Result ${index + 1}: | |
| ${result.isRelevant ? 'Relevant' : 'Irrelevant'} | |
| ${result.isOOS ? '(OOS)' : ''} | |
| ${result.isRepeating ? '(Repeating)' : ''} | |
| ${result.isNull ? '(Null)' : ''} | |
| <button class="${result.isRelevant ? 'active' : ''}" onclick="toggleRelevance(${index})">Toggle Relevance</button> | |
| <button class="${result.isOOS ? 'active' : ''}" onclick="toggleOOS(${index})">Toggle OOS</button> | |
| <button class="${result.isRepeating ? 'active' : ''}" onclick="toggleRepeating(${index})">Toggle Repeating</button> | |
| <button class="${result.isNull ? 'active' : ''}" onclick="toggleNull(${index})">Toggle Null</button> | |
| </div> | |
| `).join(''); | |
| const annotation = getAnnotation(); | |
| const annotationElement = document.getElementById('annotation'); | |
| annotationElement.textContent = `Annotation: ${annotation}`; | |
| annotationElement.className = annotation.toLowerCase(); | |
| } | |
| function toggleRelevance(index) { | |
| results[index].isRelevant = !results[index].isRelevant; | |
| updateUI(); | |
| } | |
| function toggleOOS(index) { | |
| results[index].isOOS = !results[index].isOOS; | |
| updateUI(); | |
| } | |
| function toggleRepeating(index) { | |
| results[index].isRepeating = !results[index].isRepeating; | |
| updateUI(); | |
| } | |
| function toggleNull(index) { | |
| results[index].isNull = !results[index].isNull; | |
| updateUI(); | |
| } | |
| function getAnnotation() { | |
| const relevantCount = results.filter(r => r.isRelevant).length; | |
| const oosCount = results.filter(r => r.isOOS).length; | |
| const repeatingCount = results.filter(r => r.isRepeating).length; | |
| const nullCount = results.filter(r => r.isNull).length; | |
| const oosInTop5 = results.slice(0, 5).filter(r => r.isOOS).length; | |
| const oosInTop4 = results.slice(0, 4).filter(r => r.isOOS).length; | |
| if (relevantCount === 8 && oosCount === 0 && repeatingCount === 0 && nullCount === 0) return "Excellent"; | |
| if (relevantCount >= 7 && oosCount === 0 && repeatingCount === 0 && nullCount <= 1) return "Good"; | |
| if (results.slice(0, 5).every(r => r.isRelevant) && results.slice(5).every(r => r.isOOS)) return "Average"; | |
| if (results.slice(0, 5).every(r => r.isRelevant) && repeatingCount === 3) return "Average"; | |
| if (oosInTop4 >= 2) return "Bad"; | |
| if (relevantCount >= 5 && results.slice(5).some(r => !r.isRelevant)) return "Good"; | |
| if (relevantCount >= 5 && oosCount === 3 && results.slice(5).every(r => r.isOOS)) return "Average"; | |
| if (relevantCount >= 5 && repeatingCount === 3) return "Average"; | |
| if (relevantCount >= 4 && repeatingCount < 4) return "Average"; | |
| if (oosInTop5 === 1 || (oosCount === 2 && results[3].isOOS && results[4].isOOS)) return "Average"; | |
| if (relevantCount < 4 || repeatingCount >= 4) return "Bad"; | |
| if (nullCount > 4) return "Poor"; | |
| if (relevantCount >= 4 && nullCount >= 2) return "Poor"; | |
| if (relevantCount >= 5 && nullCount >= 1) return "Average"; | |
| return "Poor"; | |
| } | |
| document.getElementById('reset-button').addEventListener('click', () => { | |
| results.forEach(result => { | |
| result.isRelevant = true; | |
| result.isOOS = false; | |
| result.isRepeating = false; | |
| result.isNull = false; | |
| }); | |
| updateUI(); | |
| }); | |
| updateUI(); | |
| </script> | |
| </body> | |
| </html> | |