Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ChunkViz Python</title> | |
| <style> | |
| .App { | |
| text-align: center; | |
| margin: 20px; | |
| } | |
| .chunked-text { | |
| white-space: pre-wrap; | |
| font-family: monospace; | |
| width: 80%; | |
| margin: 0 auto; | |
| text-align: left; | |
| padding-top: 30px; | |
| } | |
| .overlap { | |
| background-color: #90a955; | |
| } | |
| textarea { | |
| width: 80%; | |
| margin-bottom: 10px; | |
| } | |
| .control-group { | |
| margin-bottom: 10px; | |
| } | |
| #stats { | |
| margin-top: 20px; | |
| font-weight: bold; | |
| } | |
| .chunk { | |
| display: inline; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="App"> | |
| <h1>ChunkViz Python v0.2</h1> | |
| <p>Language Models do better when they're focused.</p> | |
| <p>One strategy is to pass a relevant subset (chunk) of your full data. There are many ways to chunk text.</p> | |
| <p>This is a tool to understand different chunking/splitting strategies.</p> | |
| <textarea id="textInput" rows="10"></textarea> | |
| <div class="control-group"> | |
| <label for="splitterSelect">Splitter:</label> | |
| <select id="splitterSelect"> | |
| <option value="words">Words</option> | |
| <option value="sentences">Sentences</option> | |
| <option value="paragraphs">Paragraphs</option> | |
| <option value="tokens">Tokens</option> | |
| </select> | |
| </div> | |
| <div class="control-group"> | |
| <label for="chunkSize">Chunk Size:</label> | |
| <input type="number" id="chunkSize" min="1" max="2000" value="300"> | |
| <input type="range" id="chunkSizeRange" min="1" max="2000" value="300"> | |
| </div> | |
| <div class="control-group"> | |
| <label for="overlap">Chunk Overlap:</label> | |
| <input type="number" id="overlap" min="0" max="1000" value="0"> | |
| <input type="range" id="overlapRange" min="0" max="1000" value="0"> | |
| </div> | |
| <div id="stats"></div> | |
| <div id="chunkedText" class="chunked-text"></div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const textInput = document.getElementById('textInput'); | |
| const splitterSelect = document.getElementById('splitterSelect'); | |
| const chunkSize = document.getElementById('chunkSize'); | |
| const chunkSizeRange = document.getElementById('chunkSizeRange'); | |
| const overlap = document.getElementById('overlap'); | |
| const overlapRange = document.getElementById('overlapRange'); | |
| const stats = document.getElementById('stats'); | |
| const chunkedText = document.getElementById('chunkedText'); | |
| // Set default text | |
| textInput.value = `One of the most important things I didn't understand about the world when I was a child is the degree to which the returns for performance are superlinear. | |
| Teachers and coaches implicitly told us the returns were linear. "You get out," I heard a thousand times, "what you put in." They meant well, but this is rarely true. If your product is only half as good as your competitor's, you don't get half as many customers. You get no customers, and you go out of business. | |
| It's obviously true that the returns for performance are superlinear in business. Some think this is a flaw of capitalism, and that if we changed the rules it would stop being true. But superlinear returns for performance are a feature of the world, not an artifact of rules we've invented. We see the same pattern in fame, power, military victories, knowledge, and even benefit to humanity. In all of these, the rich get richer. [1] | |
| You can't understand the world without understanding the concept of superlinear returns. And if you're ambitious you definitely should, because this will be the wave you surf on. | |
| It may seem as if there are a lot of different situations with superlinear returns, but as far as I can tell they reduce to two fundamental causes: exponential growth and thresholds. | |
| The most obvious case of superlinear returns is when you're working on something that grows exponentially. For example, growing bacterial cultures. When they grow at all, they grow exponentially. But they're tricky to grow. Which means the difference in outcome between someone who's adept at it and someone who's not is very great. | |
| Startups can also grow exponentially, and we see the same pattern there. Some manage to achieve high growth rates. Most don't. And as a result you get qualitatively different outcomes: the companies with high growth rates tend to become immensely valuable, while the ones with lower growth rates may not even survive. | |
| Y Combinator encourages founders to focus on growth rate rather than absolute numbers. It prevents them from being discouraged early on, when the absolute numbers are still low. It also helps them decide what to focus on: you can use growth rate as a compass to tell you how to evolve the company. But the main advantage is that by focusing on growth rate you tend to get something that grows exponentially. | |
| YC doesn't explicitly tell founders that with growth rate "you get out what you put in," but it's not far from the truth. And if growth rate were proportional to performance, then the reward for performance p over time t would be proportional to pt. | |
| Even after decades of thinking about this, I find that sentence startling.`; | |
| function updateChunks() { | |
| console.log("Updating chunks..."); | |
| fetch('/chunk', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ | |
| text: textInput.value, | |
| chunkSize: parseInt(chunkSize.value), | |
| overlap: parseInt(overlap.value), | |
| splitter: splitterSelect.value | |
| }), | |
| }) | |
| .then(response => response.json()) | |
| .then(data => { | |
| console.log("Received data:", data); | |
| // Update stats | |
| stats.innerHTML = ` | |
| <div>Total Characters: ${data.totalCharacters}</div> | |
| <div>Number of chunks: ${data.numberOfChunks}</div> | |
| <div>Average chunk size: ${data.averageChunkSize.toFixed(1)}</div> | |
| `; | |
| // Update chunked text display | |
| chunkedText.innerHTML = highlightChunks(data.chunks, textInput.value); | |
| }) | |
| .catch(error => { | |
| console.error("Error:", error); | |
| }); | |
| } | |
| function highlightChunks(chunks, originalText) { | |
| console.log("Highlighting chunks:", chunks); | |
| const colors = ['#70d6ff', '#e9ff70', '#ff9770', '#ffd670', '#ff70a6']; | |
| let highlightedText = ''; | |
| let lastEnd = 0; | |
| chunks.forEach((chunk, index) => { | |
| const color = colors[index % colors.length]; | |
| // Add any text between chunks | |
| if (chunk.startIndex > lastEnd) { | |
| highlightedText += originalText.slice(lastEnd, chunk.startIndex); | |
| } | |
| // Add the chunk | |
| highlightedText += `<span class="chunk" style="background-color: ${color}">${chunk.text}</span>`; | |
| // Add overlap | |
| if (chunk.overlapWithNext > 0) { | |
| const overlapText = chunk.text.slice(-chunk.overlapWithNext); | |
| highlightedText += `<span class="overlap">${overlapText}</span>`; | |
| } | |
| lastEnd = chunk.endIndex; | |
| }); | |
| // Add any remaining text | |
| if (lastEnd < originalText.length) { | |
| highlightedText += originalText.slice(lastEnd); | |
| } | |
| console.log("Highlighted text:", highlightedText); | |
| return highlightedText; | |
| } | |
| // Event listeners | |
| textInput.addEventListener('input', updateChunks); | |
| splitterSelect.addEventListener('change', updateChunks); | |
| chunkSize.addEventListener('input', function() { | |
| chunkSizeRange.value = this.value; | |
| updateChunks(); | |
| }); | |
| chunkSizeRange.addEventListener('input', function() { | |
| chunkSize.value = this.value; | |
| updateChunks(); | |
| }); | |
| overlap.addEventListener('input', function() { | |
| overlapRange.value = this.value; | |
| updateChunks(); | |
| }); | |
| overlapRange.addEventListener('input', function() { | |
| overlap.value = this.value; | |
| updateChunks(); | |
| }); | |
| // Initial update | |
| updateChunks(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |