Spaces:
Sleeping
Sleeping
File size: 9,621 Bytes
7c8d003 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 |
<!DOCTYPE html>
<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> |