Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Large vs Small Language Models</title> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| text-align: center; | |
| background-color: #f0f2f5; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| h1 { | |
| margin-top: 20px; | |
| color: #333; | |
| font-size: 2em; | |
| } | |
| .container { | |
| width: 90%; | |
| margin: 0 auto; | |
| max-width: 1100px; | |
| padding: 20px; | |
| } | |
| .game-board { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-top: 30px; | |
| gap: 20px; | |
| } | |
| .feature-list ul { | |
| list-style: none; | |
| padding: 0; | |
| } | |
| .feature-list li { | |
| background-color: #fff; | |
| border: 2px solid #d1d1d1; | |
| padding: 15px; | |
| margin: 10px 0; | |
| cursor: grab; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| transition: transform 0.2s ease; | |
| } | |
| .feature-list li:hover { | |
| transform: scale(1.05); | |
| } | |
| .category { | |
| width: 45%; | |
| padding: 20px; | |
| background-color: #fff; | |
| border: 2px solid #333; | |
| border-radius: 10px; | |
| min-height: 300px; | |
| box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .category h2 { | |
| margin-bottom: 20px; | |
| font-size: 1.5em; | |
| color: #333; | |
| } | |
| #large, #small { | |
| min-height: 200px; | |
| border: 2px dashed #999; | |
| padding: 10px; | |
| border-radius: 8px; | |
| } | |
| #large.dragging-over, | |
| #small.dragging-over { | |
| border-color: #007bff; | |
| } | |
| .score-section { | |
| margin-top: 40px; | |
| } | |
| .score-section h3 { | |
| font-size: 1.5em; | |
| color: #007bff; | |
| } | |
| .feedback { | |
| margin-top: 10px; | |
| font-size: 1.2em; | |
| color: red; | |
| } | |
| .correct-answer { | |
| color: green; | |
| margin-top: 5px; | |
| } | |
| button { | |
| padding: 10px 20px; | |
| background-color: #007bff; | |
| color: #fff; | |
| border: none; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 1em; | |
| } | |
| button:hover { | |
| background-color: #0056b3; | |
| } | |
| button:active { | |
| transform: scale(0.98); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Large vs Small Language Models</h1> | |
| <div class="game-board"> | |
| <div class="feature-list"> | |
| <h2>Features</h2> | |
| <ul id="features"> | |
| <li id="feature1" draggable="true" ondragstart="drag(event)">Trained with large volumes of general text data</li> | |
| <li id="feature2" draggable="true" ondragstart="drag(event)">Trained with focused text data</li> | |
| <li id="feature3" draggable="true" ondragstart="drag(event)">Many billions of parameters</li> | |
| <li id="feature4" draggable="true" ondragstart="drag(event)">Fewer parameters</li> | |
| <li id="feature5" draggable="true" ondragstart="drag(event)">Comprehensive language generation capabilities in multiple contexts</li> | |
| <li id="feature6" draggable="true" ondragstart="drag(event)">Focused language generation capabilities in specialized contexts</li> | |
| <li id="feature7" draggable="true" ondragstart="drag(event)">Large size can impact performance and portability</li> | |
| <li id="feature8" draggable="true" ondragstart="drag(event)">Fast and portable</li> | |
| <li id="feature9" draggable="true" ondragstart="drag(event)">Time-consuming (and expensive) to fine-tune with your own training data</li> | |
| <li id="feature10" draggable="true" ondragstart="drag(event)">Faster (and less expensive) to fine-tune with your own training data</li> | |
| <li id="feature11" draggable="true" ondragstart="drag(event)">Examples include: OpenAI GPT 4, Mistral 7B, Meta Llama 3</li> | |
| <li id="feature12" draggable="true" ondragstart="drag(event)">Examples include: Microsoft Phi 2, Microsoft Orca 2, OpenAI GPT Neo</li> | |
| </ul> | |
| </div> | |
| <div class="category large"> | |
| <h2>Large Language Models (LLMs)</h2> | |
| <div id="large" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| </div> | |
| <div class="category small"> | |
| <h2>Small Language Models (SLMs)</h2> | |
| <div id="small" ondrop="drop(event)" ondragover="allowDrop(event)"></div> | |
| </div> | |
| </div> | |
| <div class="feedback" id="feedback"></div> | |
| <div class="correct-answer" id="correct-answer"></div> | |
| <div class="score-section"> | |
| <h3>Score: <span id="score">0</span></h3> | |
| <button onclick="resetGame()">Reset Game</button> | |
| </div> | |
| </div> | |
| <script> | |
| let score = 0; | |
| function allowDrop(event) { | |
| event.preventDefault(); | |
| } | |
| function drag(event) { | |
| event.dataTransfer.setData("text", event.target.id); | |
| } | |
| function drop(event) { | |
| event.preventDefault(); | |
| const featureId = event.dataTransfer.getData("text"); | |
| const feature = document.getElementById(featureId); | |
| const category = event.target.id; | |
| const dropZone = event.target; | |
| const feedback = document.getElementById("feedback"); | |
| const correctAnswer = document.getElementById("correct-answer"); | |
| feedback.innerText = ''; | |
| correctAnswer.innerText = ''; | |
| // Handle category matching | |
| if ((featureId === "feature1" || featureId === "feature3" || featureId === "feature5" || featureId === "feature7" || featureId === "feature9" || featureId === "feature11") && category === "large") { | |
| score += 1; | |
| document.getElementById("score").innerText = score; | |
| dropZone.appendChild(feature); | |
| } else if ((featureId === "feature2" || featureId === "feature4" || featureId === "feature6" || featureId === "feature8" || featureId === "feature10" || featureId === "feature12") && category === "small") { | |
| score += 1; | |
| document.getElementById("score").innerText = score; | |
| dropZone.appendChild(feature); | |
| } else { | |
| score -= 1; | |
| feedback.innerText = "Incorrect!"; | |
| correctAnswer.innerText = "The correct category for that feature is " + (category === "large" ? "Small Language Models (SLMs)" : "Large Language Models (LLMs)"); | |
| document.getElementById("score").innerText = score; | |
| feature.style.display = 'none'; | |
| } | |
| } | |
| // Add visual feedback for drag over | |
| document.querySelectorAll(".category div").forEach(dropZone => { | |
| dropZone.addEventListener("dragover", function () { | |
| dropZone.classList.add("dragging-over"); | |
| }); | |
| dropZone.addEventListener("dragleave", function () { | |
| dropZone.classList.remove("dragging-over"); | |
| }); | |
| }); | |
| // Shuffle the list of features | |
| function shuffleFeatures() { | |
| const features = document.getElementById("features"); | |
| for (let i = features.children.length; i >= 0; i--) { | |
| features.appendChild(features.children[Math.random() * i | 0]); | |
| } | |
| } | |
| // Reset the game | |
| function resetGame() { | |
| score = 0; | |
| document.getElementById("score").innerText = score; | |
| const features = document.getElementById("features"); | |
| const featureElements = document.querySelectorAll('li'); // Select all features including those in drop zones | |
| const largeDropZone = document.getElementById("large"); | |
| const smallDropZone = document.getElementById("small"); | |
| // Clear the drop zones | |
| largeDropZone.innerHTML = ''; | |
| smallDropZone.innerHTML = ''; | |
| // Reset the features back to the list and make them visible again | |
| featureElements.forEach(feature => { | |
| features.appendChild(feature); // Move feature back to the list | |
| feature.style.display = 'block'; // Make features visible again | |
| }); | |
| // Clear feedback | |
| document.getElementById("feedback").innerText = ''; | |
| document.getElementById("correct-answer").innerText = ''; | |
| // Shuffle the feature list | |
| shuffleFeatures(); | |
| } | |
| // Shuffle features on page load | |
| window.onload = shuffleFeatures; | |
| </script> | |
| </body> | |
| </html> | |